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

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

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

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

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

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

/* base */

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hidden {
  display: none !important;
}

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.visibility-hidden {
  visibility: hidden;
}

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

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

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

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

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

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

.icon-arrow {
  width: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
  Focus ring - inset
*/

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

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

/*
  Focus ring - none
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

deferred-media {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Shopify Accelerated Checkout */

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


/* Button - other */

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

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

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

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

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

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

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

/* Button - social share */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Select */

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

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

/* Field */

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

.customer .field {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

/* Text area */

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

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

/* Form global */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.quantity__rules-cart {
  position: relative;
}

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

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

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__icon span {
  height: 100%;
}

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

.header__icon::after {
  content: none;
}

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

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

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

/* Claude Code: FIX — Cart icon: removed negative margin-right that was
   pulling the cart icon inward and making it appear smaller/misaligned
   compared to search and wishlist. The icon now sits flush in the icons
   group with the same spacing as its siblings. */
.header__icon--cart {
  position: relative;
  margin-right: 0;
}

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

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

details .header__icon-close {
  display: none;
}

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

account-icon {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.search-modal__form {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__menu {
  padding: 0 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rte table {
  table-layout: fixed;
}

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

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

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

.rte li {
  list-style: inherit;
}

/* Shopify's rich text editor wraps <li> content in <p> tags which pushes
   the bullet dot to its own line. Collapse the <p> to fix this. */
.rte li p {
  display: inline;
  margin: 0;
}

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

/* Center headings on policy/page templates (page-width--narrow covers
   built-in Shopify policy pages and custom page templates alike). */
.page-width--narrow .rte h2,
.page-width--narrow .rte h3,
.page-width--narrow .rte h4,
.page-width--narrow .rte h5,
.page-width--narrow .rte h6 {
  text-align: left !important;
}

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

/* ============================================================
   ANEKA JEWELLERY — CUSTOM STYLESHEET
   Theme: Shopify Dawn 15.4.1
   
   HOW TO USE:
   Paste this entire file at the bottom of:
   Online Store → Themes → Edit Code → assets/base.css
   
   HOW THIS FILE IS ORGANISED:
   Each section is clearly labelled with START and END markers.
   To find a section quickly, search (Ctrl+F / Cmd+F) for its name.
   
   SECTION INDEX:
   1.  BRAND TOKENS         — Colors, fonts, spacing (change brand colors HERE)
   2.  ANNOUNCEMENT BAR     — Top maroon scrolling strip
   3.  HEADER               — Logo, icons, navigation bar
   4.  HERO BANNER          — Homepage full-image section with CTA
   5.  PRODUCT CARDS        — Cards shown in grids and collections
   6.  BEST SELLERS         — "Our Most Loved Designs" section
   7.  CATEGORY GRID        — "Shop by Category" tiles
   8.  PROMISE SECTION      — "The Aneka Promise" trust cards
   9.  REVIEWS SECTION      — Customer review cards
   10. FAQ SECTION          — Collapsible question/answer blocks
   11. PRODUCT PAGE         — Individual product detail page
   12. CART PAGE            — Cart layout, summary, checkout button
   13. MENU DRAWER          — Left slide-in navigation menu
   14. FOOTER               — Footer colors, links, newsletter
   15. WHATSAPP BUTTON      — Fixed floating WhatsApp icon
   16. POLICY PAGES         — Returns, Shipping, T&C pages
   
   ============================================================ */


/* ============================================================
   SECTION 1: BRAND TOKENS
   
   These are the core brand values used everywhere.
   ⚠️  If you ever want to change the brand color,
       change it ONLY here — it updates the entire site.
   ============================================================ */

:root {
  /* --- Primary Brand Colors --- */
  --maroon:           #6B0F2B;   /* Main brand color — buttons, headings, accents */
  --maroon-dark:      #5a0d25;   /* Slightly darker — used on hover states */
  --maroon-faint:     rgba(107, 15, 43, 0.08); /* Very light maroon — backgrounds */

  /* --- Gold Accent --- */
  --gold:             #C9A84C;   /* Gold for stars, icons, borders */
  --gold-light:       rgba(201, 168, 76, 0.2); /* Faint gold for subtle borders */

  /* --- Background & Surface --- */
  --ivory:            #FAF7F2;   /* Warm page background */
  --champagne:        #F5E6C8;   /* Slightly deeper warm tone for cards */
  --white:            #ffffff;

  /* --- Text Colors --- */
  --text-dark:        #2C1A0E;   /* Main body text — warm dark brown */
  --text-mid:         #4a4a4a;   /* Secondary text */
  --text-muted:       rgba(44, 26, 14, 0.55); /* Placeholder, captions */

  /* --- Status Colors --- */
  --green:            #2e7d32;   /* Savings, success states */
  --red:              #C62828;   /* Low stock, alerts */
  --whatsapp-green:   #25D366;   /* WhatsApp brand color */

  /* --- Shapes --- */
  --radius-pill:      999px;     /* Fully rounded — buttons */
  --radius-card:      12px;      /* Card corners */
  --radius-sm:        6px;       /* Small elements */

  /* --- Shadows --- */
  --shadow-card:      0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-card-hover:0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-sticky:    0 -4px 20px rgba(44, 26, 14, 0.10);
}

/* END SECTION 1: BRAND TOKENS */


/* ============================================================
   SECTION 2: ANNOUNCEMENT BAR
   
   The thin strip at the very top of every page.
   Currently shows: Free Shipping / COD / Happy Customers info.
   
   To change the message: go to Online Store → Customize →
   Header → Announcement bar → edit text there.
   ============================================================ */

/* Main bar container */
/* Claude Code: FIX 2 — Reduce announcement bar thickness.
   Previous min-height of 42px + 6px top/bottom padding made the bar visually
   too tall. Reduced to 32px min-height and 4px vertical padding for a slimmer,
   more premium feel while keeping enough click/read comfort. */
.announcement-bar,
.utility-bar {
  background-color: #4d0621;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-height: 40px;
  padding: 4px 44px; /* Side padding leaves space for prev/next arrows */
  text-align: center;
  position: relative;
  z-index: 20;
}

/* .utility-bar became a flex container above without giving its child
   .utility-bar__grid an explicit width, so that child (and everything
   inside it) sizes to its own content instead of stretching to fill —
   normally invisible because the single-announcement text is in-flow
   content with real intrinsic width. But the multi-block slider's
   slides are all position:absolute (for the opacity crossfade), which
   have zero in-flow content to measure, collapsing the whole chain
   (.utility-bar__grid > .announcement-bar > .announcement-bar-slider >
   #Slider-...) toward 0 width. Forcing it to stretch fixes both cases. */
.utility-bar__grid {
  width: 100%;
}

/* All text inside the bar — force white so it's readable on dark maroon */
.announcement-bar,
.announcement-bar *,
.utility-bar,
.utility-bar * {
  color: #FFF7E6 !important;
}

/* FIX 1: Announcement bar text — bump font to 13.5px and force single-line white-space
   on desktop so the bar stays slim and text never wraps to two lines.
   white-space:nowrap + text-overflow:ellipsis guards against very long messages. */
.announcement-bar__message,
.utility-bar__item {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.2;
  opacity: 1 !important;
  max-width: 100%;
  margin: 0 auto;
  white-space: nowrap;      /* FIX 1: prevent text wrapping to a second line */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FIX 1 (mobile): allow wrapping only on very small screens where long messages
   genuinely can't fit — but still keep the bar as short as possible. */
@media (max-width: 480px) {
  .announcement-bar__message,
  .utility-bar__item {
    white-space: normal;    /* allow wrap on tiny screens only */
    font-size: 12px;
    line-height: 1.3;
  }
}

/* Links inside the bar */
.announcement-bar a,
.utility-bar a {
  color: #FFF7E6 !important;
  text-decoration: none;
}

/* SVG icons inside bar */
.announcement-bar svg,
.utility-bar svg {
  fill: #FFF7E6 !important;
}

/* Prev / Next arrow buttons (shown when multiple messages exist) */
.announcement-bar .slider-button,
.utility-bar .slider-button,
.announcement-bar button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #FFF7E6 !important;
  fill: #FFF7E6 !important;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.announcement-bar .slider-button--prev,
.utility-bar .slider-button--prev { left: 12px; }

.announcement-bar .slider-button--next,
.utility-bar .slider-button--next { right: 12px; }

.announcement-bar .slider-button:hover,
.utility-bar .slider-button:hover { opacity: 1; }

/* Claude Code: FIX 2 (mobile) — Reduce announcement bar thickness on small screens.
   Was min-height:44px / padding:8px — reduced to 30px / 4px for a slimmer bar
   that doesn't dominate the top of the viewport on phones. */
@media (max-width: 768px) {
  .announcement-bar,
  .utility-bar {
    min-height: 30px;
    max-height: 38px;
    padding: 4px 16px;
  }

  /* FIX 1: font-size and white-space for mobile announcement text is handled
     in the shared rule above — no override needed here. */

  .announcement-bar .slider-button,
  .utility-bar .slider-button {
    display: none;
  }
}

/* END SECTION 2: ANNOUNCEMENT BAR */


/* ============================================================
   SECTION 3: HEADER — REFACTORED (PREMIUM + CONVERSION)
   ============================================================ */

/* ===== HEADER BASE ===== */
.header-wrapper {
  background-color: var(--ivory);
  border-bottom: 1px solid rgba(0,0,0,0.05); /* softer premium divider */
}

/* ===== HEADER HEIGHT CONTROL ===== */
.header__inner {
  padding: 6px 20px; /* reduced from 10px → tighter = premium */
}

/* ===== LOGO (CRITICAL FIX) ===== */
.header__heading {
  padding: 2px 0; /* remove floating effect */
  text-align: center;
}

/* Logo sizing — refined */
.header__heading-logo {
  max-height: 34px; /* 🔥 was 60px → THIS was the problem */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Ensure wrapper doesn't add extra space */
.header__heading-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FIX 2: Ensure all header icons — including cart and wishlist — render at
   the same 20×20px size with equal gap so nothing looks squashed or imbalanced. */
.header__icon svg,
.header__icon--cart svg,
.header__icon--wishlist svg {
  width: 20px !important;
  height: 20px !important;
  overflow: visible;
  display: block;
}

/* Claude Code: FIX — Consistent gap between all header icons (search, account,
   wishlist, cart). Increased from 12px → 16px so icons have uniform breathing room
   and don't feel cramped against each other or the logo. */
.header__icons {
  gap: 16px;
}

/* Icon styling */
.header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  background: none !important;
  border-radius: 0 !important;
  opacity: 0.85; /* subtle reduction */
  transition: all 0.2s ease;
  /* Claude Code: FIX 4 — overflow:visible prevents container from clipping SVG
     paths that extend to the edge of their viewBox (e.g. the heart icon). */
  overflow: visible !important;
}

.header__icon svg {
  /* Claude Code: FIX 4 — 20px matches the heart icon's 0 0 20 20 viewBox so
     the full path is always rendered without any edge clipping. Previously 18px
     caused the top curves of the heart to appear slightly chopped on some
     browsers that clip fractional-pixel SVG overflow. */
  width: 20px;
  height: 20px;
  stroke: var(--text-dark);
  transition: all 0.2s ease;
  overflow: visible;
  display: block;
}

/* Hover — premium subtle */
.header__icon:hover {
  opacity: 1;
}

.header__icon:hover svg {
  stroke: var(--maroon);
  transform: translateY(-1px); /* micro interaction */
}

/* ===== CART BADGE ===== */
.cart-count-bubble {
  background-color: var(--maroon);
  color: var(--white);
  font-size: 10px;
  transform: translate(2px, -2px); /* tighter positioning */
}

/* ===== NAVIGATION ===== */
.header__inline-menu {
  justify-content: center;
  padding-top: 4px; /* reduced */
}

.header__menu-item {
  font-size: 13px; /* slightly tighter */
  color: var(--text-dark);
  letter-spacing: 0.3px;
}

/* Active underline — refined */
.header__menu-item--active {
  border-bottom: 1.5px solid var(--maroon);
}

/* ============================================================
   FINAL HEADER SYSTEM (LOGO + SPACING + ICONS)
   Clean, unified, no conflicts
   ============================================================ */


/* ===== BASE (ALL DEVICES) ===== */

.header__heading-logo {
  width: 100%;
  height: auto;
  max-height: none; /* no distortion */
}


/* ============================================================
   DESKTOP (>= 990px)
   ============================================================ */

@media (min-width: 990px) {

  /* Logo size */
  .header__heading-logo-wrapper {
    max-width: 140px;
    width: 100%;
    overflow: visible;
  }

  .header__heading-logo {
    transform: scale(1.35);
    transform-origin: center;
  }

  /* Reduce header height */
  .header__inner {
    padding: 6px 20px;
  }

  .header__heading {
    padding: 2px 0;
  }

  /* FIX 1 (revised): Tighten header to 960px so it never feels stretched or empty
     on large monitors. Content is naturally centred with good breathing room. */
  .header {
    max-width: 860px;
    margin: 0 auto;
  }

  /* Icon spacing — uniform gap, no negative margin on cart */
  .header__icons {
    gap: 16px;
  }

  /* Claude Code: FIX — Cart icon on desktop: ensure no inherited negative margin
     shifts it off the uniform grid. Explicitly zero out margin-right. */
  .header__icon--cart {
    margin-right: 0 !important;
  }

  /* Claude Code: FIX 4 — Match 20px on desktop too so the heart viewBox is
     fully visible. overflow:visible prevents clipping at icon container edge. */
  .header__icon svg {
    width: 20px;
    height: 20px;
    overflow: visible;
  }
}


/* ============================================================
   TABLET (750px – 989px)
   ============================================================ */

@media (min-width: 750px) and (max-width: 989px) {

  .header__heading-logo-wrapper {
    max-width: 120px;
    overflow: visible;
  }

  .header__heading-logo {
    transform: scale(1.35);
    transform-origin: center;
  }

}


/* ============================================================
   MOBILE (< 749px)
   ============================================================ */

@media (max-width: 749px) {

  /* Logo */
  .header__heading-logo-wrapper {
    max-width: 110px;
    overflow: visible;
  }

  .header__heading-logo {
    transform: scale(1.35);
    transform-origin: center;
  }

  /* Padding */
  .header__inner {
    padding: 6px 16px;
  }

  /* Icons */
  .header__icons {
    gap: 10px;
  }

  /* Claude Code: FIX 4 — 20px matches the heart icon viewBox (0 0 20 20)
     so the path is never clipped. overflow:visible ensures paths at the
     edge of the viewBox don't get cut. */
  .header__icon svg {
    width: 20px;
    height: 20px;
    overflow: visible;
  }

  /* Hide desktop menu */
  .header__inline-menu {
    display: none;
  }

}
/* ===== END HEADER REFACTOR ===== */

/* ============================================================
   SECTION 4: HERO BANNER
   
   The large full-image section on the homepage.
   Contains headline text, subtext, and the "Shop Now" button.
   
   To change the image/text: Online Store → Customize →
   Homepage → Image banner → edit there.
   ============================================================ */

/* ===== OVERLAY (GRADIENT FOR READABILITY) ===== */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.25),
    transparent
  );
  z-index: 1;
}


/* ===== CONTENT LAYER ===== */
.banner__content {
  position: relative;
  z-index: 2;
  max-width: 460px;
}

/* Consistent spacing */
.banner__content > * + * {
  margin-top: 16px;
}


/* ===== TEXT ===== */
.banner__heading,
.banner__text {
  color: var(--white) !important;
  max-width: 420px;
}

.banner__heading {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.banner__text {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;
}


/* ===== BUTTONS ===== */
.banner__buttons {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.banner__buttons .button,
.banner__buttons .button--secondary {
  background-color: var(--maroon) !important;
  color: var(--white) !important;
  padding: 12px 28px;
  border-radius: 8px;
  border: none !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  opacity: 1 !important;
  filter: none !important;
}

.banner__buttons .button::after {
  display: none !important;
}

.banner__buttons .button:hover {
  background-color: var(--maroon-dark) !important;
  transform: translateY(-1px);
}

.banner__buttons .button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* ============================================================
   DESKTOP FIXES (ALIGNMENT + COMPOSITION)
   ============================================================ */

@media (min-width: 990px) {

  /* Force LEFT alignment (fixes your issue) */
  .banner__content {
    text-align: left;
    align-items: flex-start;
    margin-top: 40px; /* better vertical placement */
    margin-left: 40px; /* subtle premium offset */
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 749px) {

  .banner__heading {
    font-size: 20px; /* was too large */
    line-height: 1.25;
    max-width: 280px; /* controls line breaks */
    margin: 0 auto 10px;
    margin-bottom: 8px;
  }

  .banner__content {
    position: absolute;
    bottom: 12px;

    left: 0;           /* 🔥 key fix */
    right: 0;          /* 🔥 key fix */
    margin: 0 auto;

    width: 90%;
    text-align: center;
    z-index: 2;
  }

  .banner__buttons .button {
    padding: 10px 18px;
    font-size: 13px;
    margin-top: 0;

  }

}
/* END SECTION 4: HERO BANNER */


/* ============================================================
   SECTION 5: PRODUCT CARDS
   
   These are the cards shown in all product grids
   (Best Sellers, Collection pages, You May Also Like, etc.)
   
   Each card has: image → title → price → (optional badge)
   ============================================================ */

/* Card wrapper — white background, rounded, subtle shadow */
.card-wrapper {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover — card lifts slightly */
.card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Product image — zooms slightly on hover */
.card__media img {
  border-radius: var(--radius-card);
  transition: transform 0.4s ease;
}

.card-wrapper:hover .card__media img {
  transform: scale(1.04);
}

/* Card content area below image */
.card__content {
  padding: 12px 10px 14px;
}

/* Product name */
.card__heading {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Price block */
.price {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* Current / sale price */
.price-item--sale {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Original (crossed out) price */
.price-item--regular {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Sale / Bestseller badge (pill label on card) */
.badge {
  background-color: var(--maroon);
  color: var(--white);
  font-size: 1.2rem;
  padding: 4px 8px;
  border-radius: 20px;
}

/* --- Wishlist Heart Button (top-right of card image) --- */

/* The image container must be relative so heart can be positioned */
.card__media {
  position: relative;
}

/* ============================================================
   MST WISHLIST APP — VISUAL DESIGN (R8)
   Elements are empty <a> tags matching the app's exact snippet output.
   All visual design is applied via CSS so no extra classes/children
   interfere with the app's JS class-matching.
   ============================================================ */

/* --- CARD CIRCLE BUTTON --- */
/* Exact app HTML: <a class="iWishAddColl iwishcheck" href="#" data-*> */
.iWishAddColl.iwishcheck {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}
.iWishAddColl.iwishcheck:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
/* Expanded tap target */
.iWishAddColl.iwishcheck::before {
  content: "";
  position: absolute;
  inset: -8px;
}
/* Heart icon */
.iWishAddColl.iwishcheck::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-6-4.35-8.5-6.5C2 12.5 2 11 2 9.5 2 7 4 5 6.5 5c1.8 0 3.4 1 4.3 2.5C11.6 6 13.2 5 15 5 17.5 5 19.5 7 19.5 9.5c0 1.5 0 3-1.5 5C16 16.65 12 21 12 21z' fill='none' stroke='%23777' stroke-width='1.5'/></svg>");
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
/* Active / wishlisted state — cover common class names the app might use */
.iWishAddColl.iwishcheck.active::after,
.iWishAddColl.iwishcheck.in-wishlist::after,
.iWishAddColl.iwishcheck.iwish-added::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-6-4.35-8.5-6.5C2 12.5 2 11 2 9.5 2 7 4 5 6.5 5c1.8 0 3.4 1 4.3 2.5C11.6 6 13.2 5 15 5 17.5 5 19.5 7 19.5 9.5c0 1.5 0 3-1.5 5C16 16.65 12 21 12 21z' fill='%236b0f2b' stroke='%236b0f2b' stroke-width='1.5'/></svg>");
}

/* --- PDP PILL BUTTON --- */
/* Exact app HTML: <div class="iwish-app-block-product"><a class="iWishAdd st-1" href="#" data-*></a></div> */
.iwish-app-block-product a.iWishAdd.st-1 {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1.6rem;
  min-height: 4.5rem;
  border-radius: 999px;
  border: 0.15rem solid rgba(47, 42, 40, 0.2);
  background: transparent;
  color: rgba(47, 42, 40, 0.75);
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.iwish-app-block-product a.iWishAdd.st-1:hover {
  border-color: rgba(107, 15, 43, 0.5);
  color: #6b0f2b;
}
/* Heart icon before text */
.iwish-app-block-product a.iWishAdd.st-1::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-6-4.35-8.5-6.5C2 12.5 2 11 2 9.5 2 7 4 5 6.5 5c1.8 0 3.4 1 4.3 2.5C11.6 6 13.2 5 15 5 17.5 5 19.5 7 19.5 9.5c0 1.5 0 3-1.5 5C16 16.65 12 21 12 21z' fill='none' stroke='%236b0f2b' stroke-width='1.5'/></svg>");
  background-size: 1.8rem 1.8rem;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
/* "Save to wishlist" label */
.iwish-app-block-product a.iWishAdd.st-1::after {
  content: "Save to wishlist";
}
/* Active / saved state */
.iwish-app-block-product a.iWishAdd.st-1.active::after,
.iwish-app-block-product a.iWishAdd.st-1.in-wishlist::after,
.iwish-app-block-product a.iWishAdd.st-1.iwish-added::after {
  content: "Saved!";
}
/* Heart icon filled maroon when saved */
.iwish-app-block-product a.iWishAdd.st-1.active::before,
.iwish-app-block-product a.iWishAdd.st-1.in-wishlist::before,
.iwish-app-block-product a.iWishAdd.st-1.iwish-added::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-6-4.35-8.5-6.5C2 12.5 2 11 2 9.5 2 7 4 5 6.5 5c1.8 0 3.4 1 4.3 2.5C11.6 6 13.2 5 15 5 17.5 5 19.5 7 19.5 9.5c0 1.5 0 3-1.5 5C16 16.65 12 21 12 21z' fill='%236b0f2b' stroke='%236b0f2b' stroke-width='1.5'/></svg>");
}
.iwish-app-block-product a.iWishAdd.st-1.active,
.iwish-app-block-product a.iWishAdd.st-1.in-wishlist,
.iwish-app-block-product a.iWishAdd.st-1.iwish-added {
  border-color: #6b0f2b;
  color: #6b0f2b;
}

/* END MST WISHLIST APP STYLES */

/* Fix 25APR26 R5: Wishlist heart button — white circle on product cards.
   Base properties are on .wishlist-btn; the circle shape is scoped with
   :not(.product__wishlist-button--pdp) so the PDP pill (which also carries the
   .wishlist-btn class) keeps its own pill shape defined further below. */
.wishlist-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

/* Fix 25APR26 R6: Scope circle shape to card-level buttons only.
   Previously the width/height/border-radius applied to the PDP pill too,
   shrinking it to a 32 px circle. The :not() guard prevents that. */
.wishlist-btn:not(.product__wishlist-button--pdp) {
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wishlist-btn:not(.product__wishlist-button--pdp):hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Positioned top-right of the image — must be direct child of .card__inner
   so it escapes the z-index:0 stacking context of .card__media */
.card__inner > .wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
}

/* Expand tap target without growing the visible circle */
.card__inner > .wishlist-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
}

/* Fix 25APR26 R6: Scope icon colour to card-level circle only.
   PDP pill has its own stronger colour overrides on .product__wishlist-button--pdp. */
.wishlist-btn:not(.product__wishlist-button--pdp) .svg-wrapper,
.wishlist-btn:not(.product__wishlist-button--pdp) svg {
  width: 18px;
  height: 18px;
  display: flex;
  color: rgba(0, 0, 0, 0.45);
  filter: none;
  transition: color 0.2s ease;
}

/* Active (wishlisted) state: maroon filled heart on white circle.
   Target the <path> directly to override the SVG presentation attribute fill="none". */
.wishlist-btn.active svg {
  filter: none;
}
.wishlist-btn.active svg path {
  fill: #6b0f2b;
  stroke: #6b0f2b;
}
.wishlist-btn.active:hover svg path {
  fill: #8b1535;
  stroke: #8b1535;
}

/* END SECTION 5: PRODUCT CARDS */

/* ============================================================
   CLAUDE CODE: PRODUCT PAGE (PDP) WISHLIST BUTTON STYLES
   Replaces the old "button button--secondary" yellow-box style.
   Now renders as an inline pill with heart icon + label text,
   matching the brand's minimal aesthetic.
   ============================================================ */

/* CLAUDE CODE: Base style — inline flex pill, no Dawn button chrome.
   Fix 25APR26 R4: background-color: transparent !important is needed because
   .button { background-color: rgba(var(--color-button),...) } is applied by Dawn
   to every element with class="button" and the CSS variable resolves to a visible
   colour for secondary buttons, creating the grey circular haze around the icon. */
.product__wishlist-button--pdp {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1.6rem;
  min-height: 4.5rem;
  border-radius: 999px;
  border: 0.15rem solid rgba(47, 42, 40, 0.2);
  background-color: transparent !important;
  color: rgba(47, 42, 40, 0.75);
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  box-shadow: none !important;
  min-width: unset !important;
  /* Prevent the card-level drop-shadow filter from leaking onto the PDP pill */
  filter: none !important;
}

/* CLAUDE CODE: Remove Dawn's ::before and ::after pseudo-elements that draw the yellow box */
.product__wishlist-button--pdp::before,
.product__wishlist-button--pdp::after {
  display: none !important;
}

/* CLAUDE CODE: SVG heart icon sizing inside PDP button.
   Fix 25APR26 R3: Always maroon stroke so the heart reads clearly against the
   light pill background. fill:none keeps it as an outline (not filled).
   Fix 25APR26 R4: filter:none !important on the svg prevents the card-level
   .wishlist-btn.active svg { filter: drop-shadow(...) } rule from also applying
   here (the PDP pill shares the .wishlist-btn class), which was the grey haze. */
.product__wishlist-button--pdp .svg-wrapper,
.product__wishlist-button--pdp svg {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  color: #6b0f2b !important;
  filter: none !important;
}
.product__wishlist-button--pdp svg path {
  stroke: #6b0f2b !important;
  fill: none !important;
}

/* CLAUDE CODE: Hover state — subtle maroon tint */
.product__wishlist-button--pdp:hover {
  border-color: rgba(107, 15, 43, 0.5);
  color: #6b0f2b;
}

/* CLAUDE CODE: Active / wishlisted state — maroon border + text only.
   Fix 25APR26: icon fill/stroke intentionally removed so the heart stays
   as an outline on the PDP pill. The label text ("Saved!") and border are
   the only visual indicators of the saved state on the product page. */
.product__wishlist-button--pdp.active {
  border-color: #6b0f2b;
  color: #6b0f2b;
}

/* PDP pill heart stays as outline — no fill when active */
.product__wishlist-button--pdp.active svg {
  fill: none;
  stroke: currentColor;
}

/* CLAUDE CODE: When wishlisted, swap label text via CSS attr trick isn't reliable —
   JS in aneka-storefront.js handles the label swap instead */

/* ============================================================
   CLAUDE CODE: BREADCRUMB — PDP PLACEMENT & RESPONSIVE RULES
   The breadcrumb nav shows:
   - Full-width above the image+info grid (mobile)
   - Inside the info column just above the product title (desktop)
   The --inline variant (desktop-only duplicate) is hidden on mobile
   so breadcrumb doesn't appear twice.
   ============================================================ */

/* CLAUDE CODE: Base breadcrumb — shared between both instances */
.aneka-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 1.2rem 0 1.6rem;
  font-size: 1.25rem;
  color: rgba(47, 42, 40, 0.5);
  line-height: 1;
}

.aneka-breadcrumbs a {
  color: rgba(47, 42, 40, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.aneka-breadcrumbs a:hover {
  color: #6b0f2b;
}

.aneka-breadcrumbs span[aria-hidden] {
  color: rgba(47, 42, 40, 0.3);
}

/* CLAUDE CODE: Full-width breadcrumb (above the grid) — visible only on mobile */
.aneka-breadcrumbs:not(.aneka-breadcrumbs--inline) {
  display: flex;
}

@media screen and (min-width: 990px) {
  /* CLAUDE CODE: On desktop, hide the full-width breadcrumb above the grid — the
     inline version inside the info column takes over */
  .aneka-breadcrumbs:not(.aneka-breadcrumbs--inline) {
    display: none;
  }
}

/* CLAUDE CODE: Inline breadcrumb (inside info column, above title) — desktop only */
.aneka-breadcrumbs--inline {
  display: none;
  padding: 0 0 1.2rem;
}

@media screen and (min-width: 990px) {
  .aneka-breadcrumbs--inline {
    display: flex;
  }
}

/* ============================================================
   CLAUDE CODE: PDP INFO COLUMN — SPACING & TYPOGRAPHY SCALE
   Tightens the rhythm between title → price → controls so the
   right column feels balanced against the large product image.
   Responsive: large on desktop, scaled down on tablet/mobile.
   ============================================================ */

/* CLAUDE CODE: Product title — desktop large, scales down */
@media screen and (min-width: 990px) {
  .product__title h1 {
    font-size: 3.8rem;
    line-height: 1.15;
    margin: 0 0 1.6rem;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .product__title h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin: 0 0 1.4rem;
  }
}

@media screen and (max-width: 749px) {
  .product__title h1 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin: 0 0 1.2rem;
  }
}

/* CLAUDE CODE: Price block — tighter top margin so it reads as a group with title */
#price-{{ section.id }},
[id^="price-"] {
  margin-top: 0;
}

/* CLAUDE CODE: Aneka custom price block sizing — desktop vs mobile */
@media screen and (min-width: 990px) {
  .aneka-price-new {
    font-size: 3rem !important;
  }
  .aneka-price-old {
    font-size: 1.6rem !important;
  }
  .aneka-price-save {
    font-size: 1.4rem !important;
  }
}

@media screen and (max-width: 749px) {
  .aneka-price-new {
    font-size: 2.2rem !important;
  }
  .aneka-price-old {
    font-size: 1.4rem !important;
  }
}

/* CLAUDE CODE: Tighten spacing between all product form blocks */
.product__info-container > * + * {
  margin-top: 0;
}

.product-form__input,
.product-form__quantity {
  margin-top: 1.6rem !important;
}

/* CLAUDE CODE: Quantity row — fix alignment of stepper + wishlist pill */
.product-form__controls-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.iwish-app-block-product {
  display: flex;
  align-items: center;
}

/* CLAUDE CODE: Pincode block spacing */
.aneka-pincode {
  margin-top: 1.6rem !important;
  margin-bottom: 0 !important;
}

/* CLAUDE CODE: Buy buttons spacing */
.product-form__buttons {
  margin-top: 1.6rem;
}

/* CLAUDE CODE: Product form submit button — full-width dark maroon, consistent */
.product-form__submit.button--primary {
  background: #6b0f2b !important;
  color: #fff !important;
  border-radius: 999px !important;
  min-height: 5rem !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04rem !important;
  border: none !important;
}

.product-form__submit.button--primary:hover {
  background: #5a0c24 !important;
}

/* CLAUDE CODE: Remove Dawn's ::after border ring on all product-form buttons */
.product-form__submit::after,
.product-form__submit::before {
  display: none !important;
}

/* ============================================================
   CLAUDE CODE: UNIFIED BUTTON SYSTEM
   One consistent look for all action buttons across the store:
   - Primary = filled maroon (#6b0f2b), white text, pill shape
   - Secondary = maroon outline, transparent bg, maroon text
   - Tertiary / ghost = same as secondary but lighter border
   All suppress Dawn's ::before / ::after pseudo-element chrome.
   ============================================================ */

/* CLAUDE CODE: Suppress Dawn's box-shadow border trick on ALL buttons sitewide */
.button::after,
.button::before {
  display: none !important;
}

/* CLAUDE CODE: Primary button — maroon fill, white text */
.button--primary {
  background: #6b0f2b !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  min-height: 4.8rem !important;
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03rem !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}

.button--primary:hover:not([disabled]) {
  background: #5a0c24 !important;
}

/* CLAUDE CODE: Secondary button — maroon outline */
.button--secondary:not(.product__wishlist-button--pdp) {
  background: transparent !important;
  color: #6b0f2b !important;
  border: 0.15rem solid rgba(107, 15, 43, 0.4) !important;
  border-radius: 999px !important;
  min-height: 4.8rem !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.button--secondary:not(.product__wishlist-button--pdp):hover:not([disabled]) {
  background: rgba(107, 15, 43, 0.06) !important;
  border-color: #6b0f2b !important;
}

/* CLAUDE CODE: Wishlist page "Explore collections" button uses base .button — maroon fill */
.aneka-wishlist__empty .button {
  background: #6b0f2b;
  color: #fff;
  border-radius: 999px;
  min-height: 4.8rem;
  padding: 0 3rem;
  font-weight: 600;
  font-size: 1.45rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   CLAUDE CODE: WISHLIST LOGIN-AWARE NOTICE BANNER
   Shown at the top of the wishlist page to explain localStorage
   behaviour and nudge guests to sign in.
   ============================================================ */

.aneka-wishlist__notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  border-radius: 1.2rem;
  font-size: 1.35rem;
  line-height: 1.5;
  margin-top: 1.6rem;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* CLAUDE CODE: Logged-in variant — green tint */
.aneka-wishlist__notice--loggedin {
  background: rgba(63, 143, 90, 0.08);
  border: 0.1rem solid rgba(63, 143, 90, 0.25);
  color: #2a5c39;
}

/* CLAUDE CODE: Guest variant — warm maroon tint */
.aneka-wishlist__notice--guest {
  background: rgba(107, 15, 43, 0.06);
  border: 0.1rem solid rgba(107, 15, 43, 0.2);
  color: #4a1020;
}

.aneka-wishlist__notice--guest a {
  color: #6b0f2b;
  font-weight: 600;
  text-underline-offset: 0.2rem;
}

.aneka-wishlist__notice-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 0.1rem;
}

.aneka-wishlist__notice-icon svg {
  width: 1.8rem;
  height: 1.8rem;
}


/* ============================================================
   SECTION 6: BEST SELLERS SECTION
   
   The "Our Most Loved Designs" grid on the homepage.
   Shows 4 product cards side by side.
   ============================================================ */

/* ===== RESET ALL CARD STRUCTURE ===== */
.aneka-bestsellers .card,
.aneka-bestsellers .card-wrapper,
.aneka-bestsellers .card__inner,
.aneka-bestsellers .card__content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* REMOVE any inherited padding messing layout */
.aneka-bestsellers .card__content {
  padding: 10px 0 0 !important;
}


/* ===== IMAGE — PREMIUM ===== */
.aneka-bestsellers .card__media img {
  border-radius: 8px;
  transition: transform 0.4s ease;
}

.aneka-bestsellers .card-wrapper:hover img {
  transform: scale(1.03);
}


/* ============================================================
   FORCE SINGLE ROW — PROPER FIX (Dawn Compatible)
   ============================================================ */

.aneka-bestsellers .grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px; /* reduced from 28px */
}

.aneka-bestsellers .grid__item {
  flex: 1 1 0 !important;   /* auto distribute evenly */
  max-width: 100% !important;
}

/* ===== TYPOGRAPHY ===== */
.aneka-bestsellers .card__heading {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 4px;
}

.aneka-bestsellers .price-item--sale {
  font-size: 15px;
  font-weight: 600;
}

.aneka-bestsellers .price-item--regular {
  font-size: 12px;
  opacity: 0.6;
}

.aneka-bestsellers .badge {
  position: absolute;
  bottom: 10px;
  left: 14px; /* 👈 adjusted slightly inside */

  font-size: 14px;
  padding: 3px 7px;
  border-radius: 12px;
}

/* ===== FORCE TRUE CENTER ALIGNMENT ===== */

/* ============================================================
   TRUE CENTER ALIGN — CORRECT TARGET
   ============================================================ */

/* Center the actual Dawn title container */
.aneka-bestsellers .collection__title {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure inner wrapper also aligns */
.aneka-bestsellers .collection__title .title {
  text-align: center !important;
}

/* Subtitle alignment */
.aneka-bestsellers .collection__description,
.aneka-bestsellers .collection__title p {
  text-align: center !important;
}

/* OPTIONAL: constrain width for premium feel */
.aneka-bestsellers .collection__title {
  max-width: 520px;
}
/* Title */
.aneka-bestsellers .title {
  text-align: center !important;
}

/* Subtitle */
.aneka-bestsellers .collection__description,
.aneka-bestsellers .title-wrapper-with-link p {
  text-align: center !important;
}


/* ===== FIX BUTTON STYLE ===== */
.collection__view-all .button {
  background: var(--maroon) !important;
  color: var(--white) !important;
  border-radius: 30px;
  padding: 12px 28px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   FIX: REMOVE YELLOW BORDER — VIEW ALL BUTTON
   ============================================================ */

/* Kill ALL Dawn layers */
.collection__view-all .button,
.collection__view-all .button::before,
.collection__view-all .button::after {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove focus ring */
.collection__view-all .button:focus,
.collection__view-all .button:focus-visible,
.collection__view-all .button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Rebuild clean button */
.collection__view-all .button {
  background: #6B0F2B !important;
  color: #FFFFFF !important;

  border-radius: 999px !important;
  padding: 12px 28px !important;

  border: none !important;
}


/* ===== SECTION SPACING ===== */
.aneka-bestsellers {
  padding: 60px 0;
}

/* ============================================================
   FIX ONLY HEADING — NO OTHER CHANGES
   ============================================================ */

/* Center the heading container */
.aneka-bestsellers .collection__title {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
  text-align: center !important;
}

/* Ensure title is centered */
.aneka-bestsellers .collection__title .title {
  text-align: center !important;
}

/* Ensure subtitle is centered */
.aneka-bestsellers .collection__description,
.aneka-bestsellers .collection__title p {
  text-align: center !important;
}

/* END SECTION 6: BEST SELLERS SECTION */


/* ============================================================
   SECTION 7: CATEGORY GRID
   
   The "Shop by Category" tiles on the homepage.
   Shows image tiles for: Bridal, AD Stone, Mangalsutra, etc.
   ============================================================ */

/* Section spacing */
.collection-list {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Section heading — centered */
.collection-list .title-wrapper-with-link {
  width: 100%;
  display: block !important;
  text-align: center !important;
}

.collection-list .title-wrapper-with-link .title {
  display: block;
  width: 100%;
  text-align: center !important;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0 auto 28px;
}

/* Grid gap between tiles */
.collection-list .grid {
  gap: 18px;
}

/* Each category tile */
.collection-list .card-wrapper {
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Tile image — zooms on hover */
.collection-list img {
  border-radius: var(--radius-card);
  transition: transform 0.4s ease;
}

.collection-list .card-wrapper:hover img {
  transform: scale(1.05);
}

/* 
  Hide the default Dawn text overlays on category tiles.
  The tile image itself communicates the category.
  To show text, remove the display:none lines below.
*/
.collection-list .card__heading,
.collection-list .card__information,
.collection-list .card__content {
  display: none !important;
}

/* Section max width */
.collection-list .page-width {
  max-width: 1200px;
  margin: 0 auto;
}

/* END SECTION 7: CATEGORY GRID */


/* ============================================================
   SECTION 8: PROMISE SECTION
   
   The "The Aneka Promise" trust cards section.
   Shows 5 cards: Craftsmanship, Quality, Shipping, Payments, Support.
   
   To edit card content: Online Store → Customize →
   Homepage → Promise section → edit each card there.
   ============================================================ */

/* Section outer wrapper */
.promise-section {
  width: 100%;
  margin: 80px auto;
  padding: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Section heading */
.promise-heading {
  text-align: center;
  font-size: 50px;
  margin-bottom: 50px;
  letter-spacing: 1px;
  font-weight: 400;
}

/* Horizontal scrollable row of cards */
.promise-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  justify-content: center;
  padding: 10px 20px;
  scrollbar-width: none; /* Hide scrollbar (Firefox) */
}

.promise-track::-webkit-scrollbar {
  display: none; /* Hide scrollbar (Chrome/Safari) */
}

/* Each promise card */
.promise-card {
  flex: 0 0 260px;
  min-width: 240px;
  background: linear-gradient(180deg, #f7f4ef, #f3efe8);
  border-radius: 14px;
  padding: 36px 26px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.promise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* Card icon */
.promise-card img{
width:70px !important;
height:70px !important;
object-fit:contain;
transform:scale(5.0);
display:block;
margin:0 auto 16px auto;
}

/* Card title */
.promise-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #3a3a3a;
}

/* Card description */
.promise-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* Card hashtag (optional, shown at bottom) */
.promise-card span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #9a7c6a;
}

/* 
  Subtle fade on left and right edges to hint at scroll.
  These are decorative — remove if not desired.
*/
.promise-section::before,
.promise-section::after {
  content: '';
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  pointer-events: none;
}

.promise-section::before {
  left: 0;
  background: linear-gradient(to right, #efe9df, transparent);
}

.promise-section::after {
  right: 0;
  background: linear-gradient(to left, #efe9df, transparent);
}

/* END SECTION 8: PROMISE SECTION */


/* ============================================================
   SECTION 9: REVIEWS SECTION
   
   Customer review cards shown on the homepage.
   Shows 3 cards side by side (scrollable on mobile).
   
   NOTE: Reviews are added via the Judge.me app or manually
   in the Customizer → Testimonials section.
   ============================================================ */

/* ===== SECTION WRAPPER ===== */
.review-section {
  max-width: 1100px;
  margin: 60px auto 40px;
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.02));
  border-radius: 20px;
  padding: 30px 20px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(107, 15, 43, 0.03)
  );
}

/* ===== HEADING ===== */
.review-heading {
  text-align: center;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
  color: var(--text-dark);
}

/* ===== SUBHEADING (ADD IN HTML) ===== */
.review-subheading {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 34px;
}


/* ===== TRACK ===== */
.review-track {
  display: flex;
  gap: 20px;
  overflow: hidden;
}


/* ===== CARD ===== */
.review-card {
  flex: 0 0 32%;

  background: #ffffff;

  border-radius: 16px;

  padding: 26px 24px;

  border: 1px solid rgba(0,0,0,0.04);

  box-shadow: 0 12px 30px rgba(0,0,0,0.05);

  transition: all 0.3s ease;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
}


/* ===== STARS ===== */
.stars {
  color: #B8962E; /* deeper gold */
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 1px;
}


/* ===== TEXT ===== */
.review-card p {
  font-size: 14px;
  line-height: 1.75;
  color: #3A3A3A;
  margin-bottom: 16px;
  justify-content: center;
  max-width: 90%;

}


/* ===== AUTHOR ===== */
.review-card span {
  font-size: 12px;
  color: #8A6F5A;
  font-weight: 500;
  margin-top: 4px;
  display: block;
  color: #8A6F5A;
  font-style: italic;
}


/* ===== ARROWS ===== */
.review-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);

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

  font-size: 14px;
  color: #8A6F5A;
  cursor: pointer;

  transition: all 0.25s ease;
}

.review-arrow:hover {
  background: #6B0F2B;
  color: #ffffff;
}

.review-arrow.left  { left:  -8px; }
.review-arrow.right { right: -8px; }


/* ===== CTA BUTTON ===== */
.review-cta {
  text-align: center;
  margin-top: 26px;
}

.review-cta a {
  display: inline-block;
  padding: 12px 26px;
  font-size: 13px;
  letter-spacing: 0.5px;

  color: #6B0F2B;
  background: transparent;

  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 999px;

  text-decoration: none;
  transition: all 0.25s ease;
}

.review-cta a:hover {
  background: #6B0F2B;
  color: #ffffff;
  border-color: #6B0F2B;
}


/* ===== MOBILE ===== */
@media (max-width: 768px) {

    .review-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 10px 14px;
    border-radius: 999px;

    font-size: 13px;
    line-height: 1;

    width: fit-content;
    margin: 0 auto 24px;
  }

  .review-summary img {
    height: 14px;
  }
  .review-card {
    flex: 0 0 80%;
  }

  .review-arrow {
    display: flex;
    transform: scale(0.8);
    opacity: 0.8;
  }

  .review-section {
    margin: 40px auto;
  }
  .review-card:nth-child(2) {
    transform: scale(1.03);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  }
  .review-section {
    box-shadow: inset 0 -20px 40px rgba(0,0,0,0.03);
  }
  .review-heading {
  font-size: 50px;
  }
}

/* ===== GOOGLE STYLE REVIEW BADGE ===== */
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  padding: 12px 22px;

  border-radius: 999px;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);

  border: 1px solid rgba(0,0,0,0.05);

  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* stars */
.review-stars {
  color: #B8962E;
  font-size: 14px;
  letter-spacing: 1px;
}

/* rating number */
.review-rating {
  font-size: 14px;
  color: #2A2A2A;
}

.review-rating strong {
  font-weight: 600;
}

/* verified text */
.review-verified {
  font-size: 13px;
  color: #6B0F2B;
  font-weight: 500;
}

/* ===== CARD TOP ROW ===== */
.review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.review-card p::before {
  content: "“";
  font-size: 20px;
  color: #6B0F2B;
  margin-right: 4px;
}

.review-card p::after {
  content: "”";
  font-size: 20px;
  color: #6B0F2B;
  margin-left: 4px;
}

/* ===== VERIFIED BADGE ===== */
.verified-badge {
  font-size: 11px;
  padding: 4px 10px;
  opacity: 0.8;
  border-radius: 999px;
  background: rgba(107, 15, 43, 0.08);
  color: #6B0F2B;
  font-weight: 500;
  margin-top: 0px; /* fine-tune */

}
.verified-badge::before {
  content: "✔";
  margin-right: 4px;
  font-size: 10px;
}
.review-google {
  display: flex;
  align-items: center;
}

.review-google img {
  height: 20px;
  opacity: 0.85;
  margin: 0 2px;
}

/* ===== CENTER WRAPPER ===== */
.review-summary {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;

  text-align: center;
  margin: 10px 0 40px;
  opacity: 0.9;
}

/* END SECTION 9: REVIEWS SECTION */


/* ============================================================
   SECTION 10: FAQ SECTION
   
   Collapsible question / answer blocks.
   Click a question to expand the answer.
   
   To add/edit questions: Online Store → Customize →
   Homepage (or any page) → Collapsible content → edit there.
   ============================================================ */

/* Section width and spacing */
.collapsible-content {
  max-width: 900px;
  margin: 80px auto;
}

/* Section heading */
.collapsible-content .title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
}

/* Each question row */
.collapsible-content .accordion {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Question text */
.collapsible-content .accordion__title {
  font-size: 19px;
  font-weight: 500;
  padding: 16px 0;
}

/* Answer text */
.collapsible-content .accordion__content {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  padding-bottom: 14px;
  line-height: 1.6;
}

/* Remove default extra margin from paragraphs inside answers */
.collapsible-content .accordion__content p {
  margin: 0 0 0 3rem;
}

/* ============================================================
   FAQ CHEVRON — WORKING VERSION (DAWN 15)
   ============================================================ */

   /* REMOVE ALL DEFAULT FAQ ICONS */
.collapsible-content .accordion summary .icon,
.collapsible-content .accordion summary svg {
  display: none !important;
}

/* ADD CUSTOM CHEVRON */
.collapsible-content .accordion summary {
  position: relative;
  padding-right: 30px;
}

/* Chevron */
.collapsible-content .accordion summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;

  width: 8px;
  height: 8px;

  border-right: 2px solid #8A6F5A;
  border-bottom: 2px solid #8A6F5A;

  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.25s ease;
}

/* Rotate when open */
.collapsible-content details[open] summary::after {
  transform: translateY(-50%) rotate(-135deg);
}


/* END SECTION 10: FAQ SECTION */


/* ============================================================
   SECTION 11: PRODUCT PAGE
   
   The individual product detail page.
   
   Layout: Image gallery (left) | Product info (right)
   
   Sub-sections:
   A. Layout & Title
   B. Price display
   C. Variant selector (color/size buttons)
   D. Quantity input
   E. Urgency & offer lines
   F. Add to Cart + Buy Now buttons
   G. Trust image strip
   H. Description / Care tabs
   ============================================================ */

/* --- 11A: Layout & Title --- */

.product {
  gap: 60px;
}

/* Constrain the info panel width on desktop */
.product__info-wrapper,
.product__info-wrapper > * {
  max-width: 420px;
}

.product__info-container {
  font-size: 14px;
  line-height: 1.5;
}

/* Product name heading */
.product__title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  color: #2f2f2f;
}

/* --- 11B: Price Display --- */

.aneka-price-wrap {
  margin-bottom: 10px;
}

/* Row containing old price + new price side by side */
.aneka-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: -1.0rem;
}

/* Crossed-out original price */
.aneka-price-old {
  font-size: 14px;
  color: #9a9a9a;
  text-decoration: line-through;
}

/* Current sale price — large and maroon */
.aneka-price-new {
  font-size: 20px;
  font-weight: 600;
  color: var(--maroon);
}

/* Hide the old "You save Rs. X" text block — pill is now inline in price.liquid */
.aneka-price-save {
  display: none !important;
}

/* Pill is now inside price__sale so it flows inline naturally.
   Strip the pill shape on cards — plain green bracketed text only. */
.card-wrapper .aneka-discount-pill,
.product-card-wrapper .aneka-discount-pill {
  display: inline;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-left: 4px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #2e7d32 !important;
  top: 0 !important;
  letter-spacing: 0;
}

/* Centre-align all price content inside product cards */
.card-wrapper .price,
.product-card-wrapper .price,
.card-wrapper .price__sale,
.product-card-wrapper .price__sale,
.card-wrapper .card__information .price,
.product-card-wrapper .card__information .price {
  justify-content: center;
  text-align: center;
}

/* Tighten gap between strikethrough and sale price on cards */
.card-wrapper .price__sale,
.product-card-wrapper .price__sale {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
}

/* % off pill — inline beside sale price (PDP and other non-card contexts) */
.aneka-discount-pill {
  display: inline-flex;
  align-items: center;
  background: #f0faf4;
  color: #1a7a4a;
  border: 0.15rem solid #1a7a4a;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-left: 0.8rem;
  position: relative;
  top: -0.6rem;
}

/* --- 11C: Variant Selector (Color / Size) --- */

/* Unselected variant option */
.product-form__input input[type='radio'] + label {
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #f7f4ef;
  font-size: 13px;
}

/* Selected variant option */
.product-form__input input[type='radio']:checked + label {
  background: #2f2f2f;
  color: var(--white);
}

/* --- 11D: Quantity Input --- */

/* Pill-shaped quantity box */
.quantity {
  border-radius: var(--radius-pill) !important;
  border-color: var(--gold-light) !important;
  padding: 0 6px; /* Breathing room so numbers aren't cramped */
}

/* The number itself */
.quantity__input {
  color: #2f2f2f !important;
  font-weight: 600;
  font-size: 15px;
  min-width: 40px;
  text-align: center;
}

/* Remove browser's default up/down arrows on number input */
.quantity__input::-webkit-inner-spin-button,
.quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* +/- buttons */
.quantity__button {
  color: var(--maroon) !important;
  font-size: 18px !important;
  opacity: 0.7;
  flex: 0 0 32px; /* Fixed width prevents layout shifts */
}

.quantity__button:hover {
  opacity: 1;
}

/* --- 11E: Urgency & Offer Lines --- */

/* Generic line item (urgency, delivery, offer) */
.aneka-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #4a4a4a;
}

/* Highlighted line (e.g. "Only 1 left") — maroon + bold */
.aneka-meta-item.highlight {
  color: var(--maroon);
  font-weight: 500;
  font-size: 13.5px;
}

/* Offer line (e.g. coupon code) — maroon */
.aneka-meta-item.offer {
  color: var(--maroon);
}

/* Small icon inside a line */
.aneka-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--maroon);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Urgency block (stock + delivery lines grouped) */
.aneka-urgency {
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Offers block (coupon + secure payment grouped) */
.aneka-offers {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- 11F: Add to Cart + Buy Now Buttons --- */

/* Reset any weird browser/theme artifacts on both buttons */
.product-form__submit,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded {
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

/* ADD TO CART — solid maroon pill */
.product-form__submit {
  background: var(--maroon) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  height: 52px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: background 0.25s ease, transform 0.2s ease;
}

/* Remove Dawn's default pseudo-element decorations */
.product-form__submit::before,
.product-form__submit::after {
  display: none !important;
}

.product-form__submit:hover {
  background: var(--maroon-dark) !important;
  transform: translateY(-2px);
}

/* BUY IT NOW — outline pill (secondary action) */
/* Remove yellow border (comes from wrapper) */
.shopify-payment-button__button--unbranded,
.shopify-payment-button__button,
.shopify-payment-button__button::before,
.shopify-payment-button__button::after {
  border: none !important;
  box-shadow: none !important;
}

/* Re-apply clean border */
.shopify-payment-button__button {
  border: 1.5px solid #6B0F2B !important;
  border-radius: 999px !important;
  background: rgba(107,15,43,0.07) !important;
  color: #6B0F2B !important;
  height: 52px !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  transition: background 0.2s ease !important;
}

.shopify-payment-button__button:hover {
  background: rgba(107,15,43,0.13) !important;
}

/* Fix weird extra container */
.shopify-payment-button > div {
  border: none !important;
}

/* --- 11G: Trust Image Strip --- */
/* This is the image showing "Premium Craftsmanship / Skin Safe / Gift-Ready" */

.aneka-trust-image {
  max-width: 420px;
  margin-top: 18px;
}

.aneka-trust-image img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

/* --- 11H: Description / Care Instructions Tabs --- */

.aneka-tabs {
  margin-top: 28px;
}

/* Tab button row */
.aneka-tab-buttons {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}

/* Individual tab button */
.tab-btn {
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 13px;
  color: #777;
  cursor: pointer;
}

/* Active tab — dark text + gold underline */
/* Active tab — dark text + maroon underline */
.tab-btn.active {
  color: #2f2f2f;
  font-weight: 500;
}

.tab-btn.active::after {
  content: "";
  display: block;
  height: 2.5px;
  background: #6B0F2B;
  border-radius: 2px;
  margin-top: 6px;
}

/* Tab content panel — hidden by default */
.aneka-tab-content {
  display: none;
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin-top: 12px;
}

/* Active tab panel — visible */
.aneka-tab-content.active {
  display: block;
}

/* Mobile adjustments for product page */
@media (max-width: 768px) {
  .product {
    gap: 30px;
  }

  .product__title {
    font-size: 26px;
  }
}

/* END SECTION 11: PRODUCT PAGE */

/* ============================================================
   ANEKA PDP — ADDITIONAL STYLE FIXES
   Add these after END SECTION 11
   ============================================================ */

/* 2. Sale badge — lighter style */
.card__badge .badge--sale,
.badge--sale {
  background: #f5e8ec !important;
  color: #6B0F2B !important;
  font-weight: 500 !important;
  border: 1px solid #e8c4cc !important;
  box-shadow: none !important;
}

/* 3. Trust strip bottom margin */
.aneka-trust-image {
  margin-bottom: 20px;
}

/* 4. Active tab indicator — maroon, thicker */
.tab-btn.active::after {
  height: 2.5px !important;
  background: #6B0F2B !important;
  border-radius: 2px;
}

/* 5. Hide share button */
.product__share-button,
share-button,
.share-button {
  display: none !important;
}

/* 6. Color variant — hide if single variant */
.product-form__input--pill:has(input:only-of-type) {
  display: none !important;
}

/* 7. Floating video widget — fix overlap with WhatsApp */
.product-page-reel-widget,
[class*="reel-widget"],
[class*="video-widget"] {
  bottom: 80px !important;
  right: 16px !important;
  z-index: 100 !important;
}

/* 8. Mobile thumbnails — force show */
@media (max-width: 768px) {
  .product--mobile-hide .thumbnail-list,
  .product--mobile-hide .product__media-list--thumbnails {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
  }
}

/* 9. Description placeholder lines — hide empty measure rows */
.product__description li:has(span:empty),
.product__description p:empty {
  display: none;
}

/* 10. Breathing room above You may also like */
.product-recommendations,
.complementary-products,
section:has(.you-may-also-like) {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

/* 11. You may also like — heading style */
.product-recommendations h2,
.product-recommendations .h2 {
  font-size: 20px;
  font-weight: 500;
  color: #2f2f2f;
  margin-bottom: 20px;
}

/* 12. Unify button border-radius */
.shopify-payment-button__button {
  border-radius: var(--radius-pill) !important;
}


/* ============================================================
   SECTION 12: CART PAGE
   
   The full cart page (not the drawer — the separate /cart page).
   
   Layout:
   - Left column: product rows (image, name, quantity, remove)
   - Right column: sticky summary card with total + checkout
   ============================================================ */

/* --- 12A: Cart Header (Title + Continue Shopping button) --- */

.aneka-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 20px;
}

/* "Your Cart" title */
.aneka-cart-title {
  font-size: 34px;
  font-weight: 500;
  color: #2f2f2f;
}

/* "Continue Shopping" button — maroon outline */
.aneka-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--maroon);
  text-decoration: none;
  border: 1.5px solid var(--maroon);
  border-radius: var(--radius-pill);
  transition: background 0.25s ease, transform 0.2s ease;
}

.aneka-btn-secondary:hover {
  background: var(--maroon-faint);
  transform: translateY(-1px);
}

/* --- 12B: Two-column Layout --- */

.aneka-cart-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr; /* Wider left (items) + narrower right (summary) */
  gap: 60px;
  align-items: start;
}

/* Mobile — stack vertically */
@media (max-width: 768px) {
  .aneka-cart-layout {
    grid-template-columns: 1fr;
  }
}

/* --- 12C: Product Row in Cart --- */

/* Each product row */
.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr 140px 120px;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #eee;
}

/* Product thumbnail */
.cart-item__media img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* Product name link */
.cart-item a {
  color: #2f2f2f !important;
  text-decoration: none !important;
  font-weight: 500;
}

.cart-item a:hover {
  text-decoration: underline;
}

/* Price / variant text below name */
.cart-item__details {
  font-size: 13px;
  color: #7a7a7a;
  font-weight: 400;
}

/* Total price (rightmost column) */
.cart-item__totals {
  font-size: 15px;
  font-weight: 500;
  color: #2f2f2f;
  text-align: right;
}

/* --- 12D: Quantity Selector in Cart --- */

/* Quantity box — inline flex, fixed size */
.cart-item .quantity {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 110px;
  height: 38px;
  border: 1px solid #d6d1c9;
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 0 6px;
  box-sizing: border-box;
}

/* Remove any pseudo-elements Dawn adds to quantity */
.cart-item .quantity::before,
.cart-item .quantity::after,
.cart-item .quantity__button::before,
.cart-item .quantity__button::after {
  display: none !important;
}

/* +/- buttons */
.cart-item .quantity__button {
  flex: 0 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon);
  font-size: 16px;
  cursor: pointer;
}

/* Number input */
.cart-item .quantity__input {
  flex: 1;
  width: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #2f2f2f;
  background: transparent;
  border: none;
}

/* Hide browser's number input spinners */
.cart-item .quantity__input::-webkit-inner-spin-button,
.cart-item .quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Remove button */
.cart-item__remove {
  color: var(--gold);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.cart-item__remove:hover {
  opacity: 1;
}

/* --- 12E: Right Summary Card --- */

/* Sticky card — stays on screen as you scroll the item list */
.aneka-summary-card {
  position: sticky;
  top: 120px; /* Distance from top when sticky. Increase if header is taller. */
  background: var(--white);
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 24px;
}

/* Mobile — no sticky (would cover content) */
@media (max-width: 768px) {
  .aneka-summary-card {
    position: static;
    margin-top: 20px;
  }
}

/* Row in summary (label + value side by side) */
.aneka-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 16px;
}

/* Total amount — larger and bolder */
.aneka-total {
  font-size: 20px;
  font-weight: 600;
}

/* Optional order note textarea */
.aneka-order-note {
  margin-bottom: 16px;
}

.aneka-order-note textarea {
  width: 100%;
  height: 70px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  resize: none;
}

/* Small reassurance text above checkout button */
.aneka-reassurance {
  font-size: 12.5px;
  color: #7a7a7a;
  margin-bottom: 18px;
}

/* --- 12F: Free Shipping Progress Bar --- */
/* Shows "Add Rs. X more for free shipping!" above the summary */

/* Centered card — wide enough for 3 recommendation items */
.aneka-free-shipping {
  max-width: 900px;
  margin: 20px auto 10px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #faf7f2 0%, #f3ede5 100%);
  border: 1px solid rgba(107, 15, 43, 0.1);
  border-radius: 12px;
  text-align: center;
}

/* Title line (e.g. "You're Rs. 200 away from free shipping!") */
.aneka-fs-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}

/* When free shipping is unlocked — turns green */
.aneka-fs-title.success {
  color: var(--green);
}

/* Subtext (e.g. "Free delivery on orders above Rs. 1299") */
.aneka-fs-sub {
  font-size: 13px;
  color: #6a6a6a;
  margin-bottom: 8px;
}

/* Progress bar track */
.aneka-fs-bar {
  position: relative;
  height: 8px;
  width: 100%;
  background-color: #e9e4dc;
  border-radius: 99px;
  margin: 10px 0 6px;
  overflow: hidden;
}

/* Fill — span so no block-level resets apply; background-color avoids
   shorthand conflicts; position:absolute resolves height:100% against
   the track's explicit 8px. Width is set via Liquid inline style. */
#aneka-fs-fill {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #6B0F2B;
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* --- 12F-2: Recommendations inside free-shipping card --- */

.aneka-fs-recommendations {
  margin-top: 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(107, 15, 43, 0.1);
}

.aneka-fs-reco-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(var(--color-foreground), 0.45);
  letter-spacing: 0.2px;
  text-transform: none;
  text-align: center;
  margin: 0 0 10px;
}

/* --- Tiered spend discount tracker (replaces the old single-tier free-shipping card) --- */

.aneka-tier-tracker {
  /* Half the badge's own width. The bar and every dot are inset from the
     true 0%/100% edges by this amount (see .aneka-tier-bar and the dot
     positioning in main-cart-items.liquid) so that centering a badge on
     its point never pushes half of it past the edge. Overridden per
     breakpoint to match .aneka-tier-badge's width there. */
  --aneka-badge-half-w: 37px;
  max-width: 900px;
  margin: 20px auto 10px;
  padding: 18px 22px 22px;
  background: linear-gradient(135deg, #faf7f2 0%, #f3ede5 100%);
  border: 1px solid rgba(107, 15, 43, 0.1);
  border-radius: 12px;
  text-align: center;
}

.aneka-tier-header {
  margin-bottom: 14px;
}

.aneka-tier-message {
  font-size: 14px;
  font-weight: 600;
  color: var(--maroon);
  margin: 0;
  letter-spacing: 0.2px;
}

.aneka-tier-bar-wrap {
  position: relative;
  padding: 36px 2px 34px;
}

.aneka-tier-bar {
  /* Starts flush with the card's left edge (leaving visible track before
     dot 1, matching that dot's own lead-in gap) and is inset by the same
     half-width the last dot is inset by, so the track ends exactly at
     the last dot with nothing visible past it. */
  position: absolute;
  top: 39px;
  left: 0;
  right: var(--aneka-badge-half-w);
  height: 8px;
  background-color: #e9e4dc;
  border-radius: 99px;
  overflow: hidden;
}

#aneka-tier-fill {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--maroon);
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* Milestone marker: threshold amount above the bar, a checkmark/lock
   icon centered on the bar itself, and the discount amount below —
   evenly spaced regardless of the actual rupee gap to the next tier. */
.aneka-tier-badge {
  position: absolute;
  top: 6px;
  left: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 74px;
}

.aneka-tier-badge__threshold {
  font-size: 11px;
  /* Fixed instead of inheriting the theme's default line-height, so the
     icon-wrap below it (and thus .aneka-tier-bar's top offset, tuned
     against this exact height) lands at a predictable pixel position
     instead of shifting with whatever line-height the theme sets globally. */
  line-height: 14px;
  font-weight: 600;
  color: rgba(42, 42, 42, 0.55);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.aneka-tier-badge__icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf7f2;
  border: 2px solid #e3dccf;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.aneka-tier-badge__icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
}

/* SVGs default to inline-level with baseline alignment, which leaves a
   few stray pixels of offset even inside a centered flex parent — force
   block display so the icon actually sits dead-center in the circle. */
.aneka-tier-badge__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aneka-tier-badge__icon--locked {
  display: flex;
  color: rgba(107, 15, 43, 0.4);
}

.aneka-tier-badge__icon--unlocked {
  color: #fff;
  width: 13px;
  height: 10px;
}

.aneka-tier-badge__pct {
  font-size: 11px;
  font-weight: 700;
  color: rgba(42, 42, 42, 0.4);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.aneka-tier-badge.unlocked .aneka-tier-badge__icon-wrap {
  background: var(--maroon);
  border-color: var(--maroon);
  transform: scale(1.08);
}

.aneka-tier-badge.unlocked .aneka-tier-badge__icon--locked {
  display: none;
}

.aneka-tier-badge.unlocked .aneka-tier-badge__icon--unlocked {
  display: flex;
}

.aneka-tier-badge.unlocked .aneka-tier-badge__threshold {
  color: rgba(42, 42, 42, 0.75);
}

.aneka-tier-badge.unlocked .aneka-tier-badge__pct {
  color: var(--maroon);
  font-weight: 700;
}

@media screen and (max-width: 749px) {
  .aneka-tier-tracker {
    padding: 14px 14px 16px;
    margin: 12px auto 8px;
  }

  .aneka-tier-header {
    margin-bottom: 12px;
  }

  .aneka-tier-message {
    font-size: 13px;
    line-height: 1.4;
  }

  .aneka-tier-tracker {
    --aneka-badge-half-w: 31px;
  }

  .aneka-tier-bar-wrap {
    padding: 32px 2px 28px;
  }

  .aneka-tier-bar {
    top: 35px;
  }

  .aneka-tier-badge {
    width: 62px;
    gap: 4px;
  }

  .aneka-tier-badge__icon-wrap {
    width: 26px;
    height: 26px;
  }

  .aneka-tier-badge__threshold,
  .aneka-tier-badge__pct {
    font-size: 10px;
  }

  .aneka-tier-badge__threshold {
    line-height: 13px;
  }

  .aneka-fs-recommendations {
    margin-top: 20px;
    padding-top: 12px;
  }

  .aneka-fs-reco-label {
    margin: 0 0 10px;
  }
}

/* --- 12G: Gift wrap cart-item — disable ± quantity controls and remove btn --- */

/* Liquid adds .cart-item--gift-wrap; JS also sets data-gift-wrap on the row */
.cart-item--gift-wrap .quantity__button,
.cart-item[data-gift-wrap] .quantity__button {
  display: none !important;
}

.cart-item--gift-wrap .quantity__input,
.cart-item[data-gift-wrap] .quantity__input {
  pointer-events: none;
  border: none;
  background: transparent;
  text-align: center;
}


/* --- 12G: Checkout Button --- */

/* Cart page checkout button — full-width pill, matching akiiko */
.cart__checkout-button,
button[name="checkout"],
.cart__checkout,
.aneka-checkout-btn {
  width: 100%;
  height: 52px;
  background: var(--maroon) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.25s ease, transform 0.2s ease;
}

/* Remove any Dawn pseudo-element decorations */
.cart__checkout-button::before,
.cart__checkout-button::after,
button[name="checkout"]::before,
button[name="checkout"]::after {
  display: none !important;
}

.cart__checkout-button:hover,
button[name="checkout"]:hover,
.aneka-checkout-btn:hover {
  background: var(--maroon-dark) !important;
  transform: translateY(-2px);
}

/* Checkout button — right-aligned, full width of right column */
#main-cart-footer .cart__ctas {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#main-cart-footer .cart__checkout-button,
#main-cart-footer button[name="checkout"] {
  width: 100% !important;
}

/* Space between tax note and checkout button */
#main-cart-footer .tax-note {
  margin-bottom: 2rem !important;
  text-align: right;
}

#main-cart-footer .cart__blocks > * + * {
  margin-top: 0.6rem !important;
}

/* --- 12H: Cart Footer Left Column --- */

.cart__footer-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- 12I: Gift Wrap Section --- */

/* Gift wrap — horizontal row matching akiiko: text left, button right */
.aneka-gift-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.aneka-gift-wrap__info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.aneka-gift-wrap__icon {
  color: var(--maroon);
  flex-shrink: 0;
  opacity: 0.85;
}

.aneka-gift-wrap__text {
  font-size: 14px;
  color: rgba(var(--color-foreground), 0.85);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aneka-gift-wrap__text strong {
  color: var(--maroon);
}

.aneka-gift-wrap__btn {
  flex-shrink: 0;
  padding: 10px 26px;
  background: transparent;
  border: 1.5px solid var(--maroon);
  border-radius: var(--radius-pill);
  color: var(--maroon);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.aneka-gift-wrap__btn:hover,
.aneka-gift-wrap--added .aneka-gift-wrap__btn {
  background: var(--maroon);
  color: #fff;
}

.aneka-gift-wrap--added .aneka-gift-wrap__btn:hover {
  background: var(--maroon-dark);
}

/* Order note when show_cart_note is off */
.aneka-order-note-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aneka-order-note-label {
  font-size: 13px;
  color: rgba(var(--color-foreground), 0.7);
  font-weight: 500;
  margin: 0;
}

.aneka-order-note-input {
  width: 100%;
  min-height: 80px;
  border: 1px solid rgba(var(--color-foreground), 0.18);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: rgba(var(--color-foreground), 0.85);
  background: transparent;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.aneka-order-note-input::placeholder {
  color: rgba(var(--color-foreground), 0.4);
}

.aneka-order-note-input:focus {
  outline: none;
  border-color: var(--maroon);
}

/* --- 12J: Footer Shipping Progress Bar (right column) --- */

.aneka-footer-shipping {
  margin-bottom: 10px;
}

.aneka-footer-shipping .aneka-fs-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 2px;
  text-align: right;
}

.aneka-footer-shipping .aneka-fs-title.success {
  color: #3a7d44;
}

.aneka-fs-congrats-sub {
  font-weight: 400;
  color: #3a7d44;
}

.aneka-footer-shipping .aneka-fs-sub {
  font-size: 12px;
  color: rgba(var(--color-foreground), 0.55);
  margin-bottom: 8px;
  text-align: right;
}

.aneka-footer-shipping .aneka-fs-bar {
  height: 5px;
  width: 100%;
  background: rgba(var(--color-foreground), 0.1);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.aneka-footer-shipping .aneka-fs-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--maroon) 0%, #8c1c3d 100%);
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}

/* --- 12K: Terms & Conditions Checkbox --- */

.aneka-cart-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0 6px;
}

.aneka-terms-checkbox {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--maroon);
}

.aneka-terms-label {
  font-size: 13px;
  color: rgba(var(--color-foreground), 0.75);
  line-height: 1.4;
  cursor: pointer;
}

.aneka-terms-label a {
  color: var(--maroon);
  text-decoration: underline;
}

/* Disabled checkout button when terms not accepted */
.aneka-checkout-gated[disabled],
.aneka-checkout-gated[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* --- 12L: Recommendations Panel --- */

.aneka-recommendations {
  margin-top: 24px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #faf7f2 0%, #f3ede5 100%);
  border: 1px solid rgba(var(--color-foreground), 0.08);
  border-radius: 12px;
}

.aneka-reco-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.aneka-reco-icon {
  color: var(--maroon);
  flex-shrink: 0;
}

.aneka-reco-title {
  font-size: 13.5px;
  color: rgba(var(--color-foreground), 0.8);
  margin: 0;
  line-height: 1.4;
}

.aneka-reco-title strong {
  color: var(--maroon);
}

.aneka-reco-carousel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.aneka-reco-prev,
.aneka-reco-next {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(var(--color-foreground), 0.6);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.aneka-reco-prev:hover,
.aneka-reco-next:hover {
  border-color: var(--maroon);
  color: var(--maroon);
  background: #fff;
}

.aneka-reco-track {
  flex: 1;
  overflow: hidden;
}

/* Horizontal carousel track for recommendation rows */
.aneka-reco-items {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Each recommendation: 3 visible at a time */
.aneka-reco-item {
  flex: 0 0 calc((100% - 16px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(107, 15, 43, 0.1);
  border-radius: 7px;
  padding: 6px 10px;
  text-align: left;
  box-sizing: border-box;
}

.aneka-reco-item__img-wrap {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.aneka-reco-item__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aneka-reco-item__img-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(var(--color-foreground), 0.06);
  border-radius: 4px;
}

.aneka-reco-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.aneka-reco-item__title {
  font-size: 13px;
  color: rgba(var(--color-foreground), 0.85);
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aneka-reco-item__title:hover {
  color: var(--maroon);
}

.aneka-reco-item__price {
  font-size: 12px;
  font-weight: 600;
  color: var(--maroon);
}

.aneka-reco-add-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  background: transparent;
  border: 1.5px solid var(--maroon);
  border-radius: var(--radius-pill);
  color: var(--maroon);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.aneka-reco-add-btn:hover {
  background: var(--maroon);
  color: #fff;
}

.aneka-reco-add-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Loading skeletons */
.aneka-reco-loading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aneka-reco-loading span {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ede8e0 25%, #e5dfd5 50%, #ede8e0 75%);
  background-size: 200% 100%;
  animation: aneka-shimmer 1.4s infinite;
}

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

/* Mobile: full-width layout */
@media screen and (max-width: 749px) {
  /* Gift wrap — stack and center on mobile */
  .aneka-gift-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .aneka-gift-wrap__info {
    justify-content: center;
  }

  .aneka-gift-wrap__btn {
    align-self: center;
  }

  /* Recommendations — show 1 item at a time on mobile */
  .aneka-reco-item {
    flex: 0 0 100%;
  }
}

/* Cart item name — body font, not bold */
.cart-item__name {
  font-family: var(--font-body-family) !important;
  font-style: var(--font-body-style) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* Cart table column headings (PRODUCT, QUANTITY, TOTAL) — larger */
.cart-items thead th.caption-with-letter-spacing {
  font-size: 1.2rem !important;
  letter-spacing: 0.12rem !important;
}

/* Subtotal label */
.totals__total {
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: rgb(var(--color-foreground)) !important;
  text-transform: none;
  letter-spacing: normal;
}

/* Subtotal amount */
.totals__total-value {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: rgb(var(--color-foreground)) !important;
  letter-spacing: normal;
}

/* END SECTION 12: CART PAGE */


/* ============================================================
   SECTION 13: MENU DRAWER
   
   The slide-in left navigation menu (on mobile and desktop).
   Opens when you tap the hamburger ☰ icon.
   ============================================================ */

/* CLAUDE CODE: Drawer panel — force deep-maroon background regardless of which
   color-scheme Dawn applies via the menu_color_scheme setting. scheme-1 gives a
   light beige background by default; we override the background AND the gradient
   variable so both the solid and gradient background declarations resolve correctly. */
.menu-drawer {
  max-width: 320px;
  background: #4d0621 !important;
  background-color: #4d0621 !important;
  /* CLAUDE CODE: Override Dawn's CSS-variable-based gradient background */
  --gradient-background: #4d0621 !important;
  --color-background: 77, 6, 33 !important;
}

/* Inner padding */
.menu-drawer__navigation {
  padding: 24px 20px;
}

/* CLAUDE CODE: Drawer nav links — cream-white text that reads on the dark maroon
   background. The previous var(--gold) was the right intent but on desktop scheme-1
   (light bg) it made links invisible against the light panel. Now forced to
   cream-white to match the dark panel background override above. */
.menu-drawer__menu-item {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 248, 240, 0.9) !important;
  padding: 14px 0;
  letter-spacing: 0.2px;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* CLAUDE CODE: Hover — brighter cream, gentle rightward nudge */
.menu-drawer__menu-item:hover {
  color: #fff !important;
  transform: translateX(4px);
}

/* CLAUDE CODE: Active/current page link — pure white for clear visual cue */
.menu-drawer__menu-item--active {
  color: #fff !important;
  font-weight: 600 !important;
}

/* CLAUDE CODE: Subtle cream divider between nav links (not gold — matches the
   dark maroon background better and feels more refined). */
.menu-drawer__menu li {
  border-bottom: 1px solid rgba(255, 248, 240, 0.1) !important;
}

/* Remove divider after last link */
.menu-drawer__menu li:last-child {
  border-bottom: none;
}

/* Top-level section headings inside drawer */
.menu-drawer__menu-item--level-1 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 12px;
}

/* END SECTION 13: MENU DRAWER */


/* ============================================================
   SECTION 14: FOOTER
   
   The dark maroon footer at the bottom of every page.
   Contains: brand story, policy links, social icons, newsletter.
   
   To edit footer content: Online Store → Customize → Footer.
   ⚠️  Do NOT change the background-color here without also
       updating the social/link colors below — they rely on
       being white text on dark background.
   ============================================================ */

/* Footer background — deep maroon */
.footer {
  background-color: #4d0621;
  /* Override Dawn's CSS variable system inside footer only */
  --color-foreground: 255, 255, 255;
  --color-link: 255, 255, 255;
  padding: 80px 0 60px;
}

/* Headings */
.footer h1,
.footer h2,
.footer h3,
.footer h4 {
  color: rgb(var(--color-foreground));
}

/* Body text */
.footer p,
.footer span,
.footer small {
  color: rgb(var(--color-foreground));
  opacity: 0.9;
}

/* Links */
.footer a {
  color: rgb(var(--color-link));
  transition: color 0.2s ease;
}

.footer a:hover {
  color: #ffd6e3; /* Light pink on hover — warm and on-brand */
}

/* Inner content max-width */
.footer__content-top .page-width {
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* Main columns layout */
.footer__blocks-wrapper {
  display: flex !important;
  justify-content: center;
  gap: 160px;
  align-items: flex-start;
}

/* Left column (About / Brand story) */
.footer-block:first-child {
  width: 420px;
}

.footer-block__details-content {
  max-width: 420px;
}

/* Policy links column */
.footer-block--menu {
  width: 260px;
}

.footer-block--menu li {
  margin-bottom: 14px;
}

.footer .footer-block--menu a {
  color: rgb(var(--color-foreground)) !important;
}

.footer .footer-block--menu a:hover {
  color: #ffd6e3 !important;
}

/* Social icons row */
.footer__list-social {
  display: flex;
  gap: 18px;
  margin-top: 22px;
  flex-wrap: nowrap;
}

.footer__list-social svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.footer__list-social a:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}

/* Newsletter block */
.footer-block--newsletter {
  text-align: left;
  margin-top: 24px;
  max-width: 420px;
}

/* Fix missing newsletter button */
.footer .newsletter-form__button {
  display: flex !important;
  align-items: center;
  justify-content: center;

  background: #6B0F2B;
  color: #fff;

  border: none;
  padding: 0 16px;
  height: 44px;

  cursor: pointer;
}

/* Claude Code: FIX 6 — The newsletter column handles its own input styling via
   section-footer.css (transparent bg, cream text, no pseudo-element shadows).
   Remove the white-background override here so it doesn't fight those rules. */
.footer .field__input {
  /* background removed — handled per-context in section-footer.css */
  border: none;
}

.footer .field__input::placeholder {
  color: rgba(var(--color-foreground), 0.55);
}

/* Column heading labels (e.g. "THE ANEKA STORY", "POLICIES") */
.footer-block__heading {
  white-space: nowrap;
  letter-spacing: 3px;
  font-size: 14px;
}

/* Copyright bar */
.footer__content-bottom-wrapper {
  justify-content: center;
  text-align: center;
}

.footer__copyright {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 0.85;
}

/* Hide "Powered by Shopify" separator dot */
.footer__content-bottom-wrapper .separator {
  display: none;
}

/* END SECTION 14: FOOTER */


/* ============================================================
   SECTION 15: WHATSAPP BUTTON
   
   The fixed green WhatsApp icon in the bottom-right corner.
   Visible on all pages. Clicking it opens a WhatsApp chat.
   
   To change the phone number: edit the href in the Liquid
   snippet that renders this button (search "whatsapp-float"
   in your theme code).
   ============================================================ */

/* Fixed position — the <a> itself carries this class (no wrapper div) */
/* Change 005: raised bottom from 24px to 64px so the icon sits above the mobile browser chrome / bottom nav bar and doesn't overlap the cart drawer footer */
.whatsapp-float {
  position: fixed;
  bottom: 64px;
  right: 24px;
  z-index: 999;
  display: block;
  line-height: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float img {
  width: 48px;
  height: 48px;
  display: block;
}

/* Hover — button grows slightly */
.whatsapp-float:hover {
  transform: scale(1.08);
}

/* END SECTION 15: WHATSAPP BUTTON */


/* ============================================================
   SECTION 16: POLICY PAGES
   
   Shared styles for: Returns Policy, Shipping Policy,
   Terms & Conditions, Privacy Policy pages.
   
   To use these styles, wrap your policy page content in:
   <div class="aneka-policy"> ... your content ... </div>
   ============================================================ */

/* Outer wrapper — centered, comfortable reading width */
.aneka-policy {
  max-width: 760px;
  margin: 60px auto;
  padding: 0 20px;
}

/* Codex change: add shared storefront styles for the custom wishlist page, recently viewed rail, and improved footer newsletter layout so the new shopper-facing features feel consistent across templates. */
.aneka-storefront-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 24rem));
  gap: 2.4rem;
  justify-content: flex-start;
}

.aneka-storefront-card {
  display: grid;
  gap: 1.2rem;
}

.aneka-storefront-card__content {
  display: grid;
  gap: 0.8rem;
}

.aneka-storefront-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2rem;
  background: #f5efe8;
}

.aneka-storefront-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 0.82;
  object-fit: cover;
  transition: transform 0.32s ease, filter 0.32s ease;
}

.aneka-storefront-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #6b0f2b;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
}

.aneka-storefront-card__title {
  color: #2f2a28;
  font-size: 1.7rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.25s ease;
}

.aneka-storefront-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: baseline;
}

.aneka-storefront-card__compare {
  color: rgba(47, 42, 40, 0.45);
  text-decoration: line-through;
}

.aneka-storefront-card__sale {
  color: #6b0f2b;
  font-size: 1.8rem;
  font-weight: 600;
}

.aneka-storefront-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.aneka-storefront-card__wishlist {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border-radius: 999px;
  border: 0.1rem solid rgba(47, 42, 40, 0.12);
  background: #fff;
  box-shadow: none;
}

.aneka-storefront-card__wishlist::before {
  display: none !important;
}

.aneka-storefront-card__wishlist .svg-wrapper,
.aneka-storefront-card__wishlist svg {
  width: 1.6rem;
  height: 1.6rem;
}

.aneka-storefront-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: 0 1.4rem;
  border-radius: 999px;
  background: #6b0f2b;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.3rem;
}

.product-recommendations .card__badge .badge,
.product-recommendations .badge--sale,
.complementary-products .card__badge .badge,
.complementary-products .badge--sale {
  /* Codex change: shrink recommendation sale badges so they stop reading like oversized pills compared with the refined product cards. */
  font-size: 1.2rem !important;
  padding: 0.4rem 0.9rem !important;
  border-radius: 999px !important;
  line-height: 1.1 !important;
}

/* CLAUDE CODE: Wishlist page and recently viewed root containers */
.aneka-wishlist,
.aneka-recently-viewed {
  display: grid;
  gap: 1.6rem;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* ============================================================
   Fix 25APR26 R7: Wishlist page CSS moved from main-wishlist.liquid
   section <style> block to base.css so it loads on the app proxy
   page (/apps/iwish) which only has theme.liquid + base.css, not
   the section, and would otherwise be completely unstyled.
   ============================================================ */

/* Header — centered, stacked */
.aneka-wishlist__header {
  display: grid;
  gap: 0.8rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 64rem;
}

.aneka-wishlist__eyebrow {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 42, 40, 0.55);
  margin: 0;
}

.aneka-wishlist__title {
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 600;
  margin: 0;
}

.aneka-wishlist__copy {
  font-size: 1.5rem;
  color: rgba(47, 42, 40, 0.65);
  margin: 0;
  line-height: 1.6;
}

/* App login note wrapper — styled as the Aneka notice banner */
.aneka-wishlist__notice-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 2rem;
  border-radius: 2.4rem;
  border: 0.1rem solid rgba(107, 15, 43, 0.2);
  background: rgba(107, 15, 43, 0.04);
  font-size: 1.4rem;
  color: rgba(47, 42, 40, 0.8);
  text-align: left;
}

.aneka-wishlist__notice-wrap a {
  color: #6b0f2b;
  text-decoration: underline;
}

/* Wishlist product grid — 3 col desktop, 2 tablet, 2 mobile, 1 narrow */
.aneka-wishlist .aneka-storefront-grid,
.iwishProducts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 989px) {
  .aneka-wishlist .aneka-storefront-grid,
  .iwishProducts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 749px) {
  .aneka-wishlist .aneka-storefront-grid,
  .iwishProducts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.4rem !important;
  }

  .aneka-wishlist {
    gap: 2rem;
  }

  .aneka-wishlist__header {
    gap: 1.2rem;
  }

  .aneka-wishlist__notice-wrap {
    padding: 1.4rem 1.6rem;
    border-radius: 1.8rem;
  }
}

@media screen and (max-width: 479px) {
  .aneka-wishlist .aneka-storefront-grid,
  .iwishProducts {
    grid-template-columns: 1fr !important;
  }
}

/* Mst app card — map iwishItem to our card styles */
.iwishItem {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}

/* Wishlist page padding — replaces section padding which doesn't load on proxy */
.aneka-wishlist {
  padding-top: 4.8rem;
  padding-bottom: 6.4rem;
}

/* CLAUDE CODE: Wishlist empty state — hidden by default via HTML `hidden` attribute.
   JS in aneka-storefront.js removes `hidden` only when the wishlist is actually empty.
   This prevents the "Your wishlist is waiting" block from showing alongside real items. */
.aneka-wishlist__empty[hidden] {
  display: none !important;
}

/* CLAUDE CODE: Empty state visible state — centered, refined card look */
.aneka-wishlist__empty:not([hidden]) {
  display: grid;
  text-align: center;
  justify-items: center;
}

/* FIX 5: Recently viewed — horizontal scrolling strip instead of a vertical grid.
   Previously auto-fit columns caused items to stack in a single column on narrow
   viewports. Now the grid is a single row of fixed-width cards that scroll
   horizontally, so multiple recently viewed items are always visible side by side. */
.aneka-recently-viewed .aneka-storefront-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1.6rem !important;
  overflow: visible !important;
}

.aneka-recently-viewed .aneka-storefront-card {
  flex: unset !important;
  max-width: unset !important;
  width: 100% !important;
}

.aneka-recently-viewed .aneka-storefront-card__media img {
  aspect-ratio: 4 / 5 !important;
}

/* FIX 5: Hide scrollbar on Webkit/Firefox for a clean look while still
   allowing horizontal drag/swipe scroll. */
.aneka-recently-viewed .aneka-storefront-grid::-webkit-scrollbar {
  height: 4px;
}
.aneka-recently-viewed .aneka-storefront-grid::-webkit-scrollbar-track {
  background: transparent;
}
.aneka-recently-viewed .aneka-storefront-grid::-webkit-scrollbar-thumb {
  background: rgba(107, 15, 43, 0.25);
  border-radius: 999px;
}

@media screen and (max-width: 749px) {
  .aneka-recently-viewed .aneka-storefront-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 1.2rem !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .aneka-recently-viewed .aneka-storefront-grid::-webkit-scrollbar { display: none; }

  .aneka-recently-viewed .aneka-storefront-card {
    flex: 0 0 55vw !important;
    max-width: 55vw !important;
    width: unset !important;
    scroll-snap-align: start;
  }
}

.aneka-recently-viewed .aneka-storefront-card:hover .aneka-storefront-card__media img {
  /* Codex change: add the requested hover lift/zoom treatment to recently viewed cards so they feel interactive like the reference component. */
  transform: scale(1.04);
  filter: saturate(1.02);
}

.aneka-recently-viewed .aneka-storefront-card:hover .aneka-storefront-card__title {
  color: #6b0f2b;
}

.aneka-wishlist__header {
  max-width: 62rem;
}

.aneka-recently-viewed__header {
  width: 100%;
  text-align: center;
}

.aneka-recently-viewed__header .aneka-wishlist__eyebrow,
.aneka-recently-viewed__header .h1 {
  text-align: center;
}

.aneka-wishlist__eyebrow {
  margin: 0 0 0.6rem;
  color: #8f7f74;
  font-family: var(--font-heading-family);
  font-size: calc(var(--font-heading-scale) * 1.1rem);
  font-weight: 400;
  letter-spacing: calc(var(--font-heading-scale) * 0.12rem);
  text-transform: uppercase;
}

.aneka-wishlist__title,
.aneka-recently-viewed .h1 {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: calc(var(--font-heading-scale) * 2.4rem);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  text-align: center;
}

.aneka-wishlist__eyebrow,
.aneka-recently-viewed__header {
  text-align: center;
}

.aneka-wishlist__copy,
.aneka-wishlist__empty p {
  max-width: 56rem;
  color: rgba(47, 42, 40, 0.72);
  line-height: 1.7;
}

.aneka-wishlist__empty {
  display: grid;
  gap: 1.2rem;
  padding: 3.2rem;
  border: 0.1rem solid rgba(47, 42, 40, 0.08);
  border-radius: 2.4rem;
  background: linear-gradient(180deg, #faf6f1 0%, #f5eee8 100%);
}

.footer .newsletter-form__field-wrapper {
  max-width: 44rem;
}

.footer .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  position: static;
}

.footer .field__input {
  padding-right: 2rem !important;
}

.footer .newsletter-form__button {
  position: static !important;
  min-width: 14rem;
  width: auto !important;
  height: 4.8rem !important;
  border-radius: 999px !important;
  gap: 0.8rem;
  flex-shrink: 0;
}

.footer .newsletter-form__button-label {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
}

.shopify-section-group-header-group,
.header-wrapper,
sticky-header {
  /* Keep header above wishlist cards, PDP overlays, and any positioned page content. */
  position: relative;
  z-index: 200;
}

@media screen and (max-width: 989px) {
  .aneka-storefront-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* FIX 5: recently-viewed stays a horizontal flex row on tablet — no grid override */
  .aneka-recently-viewed .aneka-storefront-grid {
    display: flex !important;
    grid-template-columns: unset !important;
  }

  .footer__blocks-wrapper {
    gap: 6rem;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 749px) {
  /* Codex change: keep storefront cards in a compact two-column phone grid so wishlist and saved-item layouts feel closer to the intended reference. */
  .aneka-storefront-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }

  /* FIX 5: recently-viewed stays horizontal flex even on mobile — handled by its own mobile rule above */
  .aneka-recently-viewed .aneka-storefront-grid {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 1.4rem !important;
  }

  /* Codex change: tighten mobile storefront card spacing so imagery, text, and actions feel lighter and more balanced on phone screens. */
  .aneka-storefront-card {
    gap: 1rem;
  }

  /* Codex change: slightly reduce mobile wishlist card titles so two-column saved-item layouts remain readable without looking crowded. */
  .aneka-storefront-card__title {
    font-size: 1.5rem;
  }

  /* Codex change: stack only the actionable controls on mobile while keeping the heart toggle compact and visually separate. */
  .aneka-storefront-card__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  /* Codex change: let the primary mobile wishlist actions fill the card width while preserving a compact heart control. */
  .aneka-storefront-card__cta,
  .aneka-storefront-card__remove {
    width: 100%;
  }

  /* Codex change: keep the mobile wishlist heart as a small circular toggle aligned to the card edge instead of stretching into a large bar. */
  .aneka-storefront-card__wishlist {
    width: 3.6rem;
    justify-content: center;
    align-self: flex-end;
  }

  /* Codex change: stop the generic footer mobile rule from forcing the Aneka newsletter into a tall stacked control. */
  .footer .field {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Codex change: keep the generic footer newsletter button compact on mobile so custom footer treatments can stay balanced. */
  .footer .newsletter-form__button {
    width: auto;
  }
}

@media screen and (max-width: 479px) {
  /* Codex change: fall back to a single storefront card column only on very narrow phones where two cards would become cramped. */
  .aneka-storefront-grid {
    grid-template-columns: 1fr;
  }

  /* FIX 5: recently-viewed stays horizontal flex — single-column doesn't apply here */
  .aneka-recently-viewed .aneka-storefront-grid {
    display: flex !important;
    grid-template-columns: unset !important;
  }
}

/* Page title (H1) */
.aneka-policy h1 {
  text-align: center !important;
  font-size: 42px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #2f2f2f;
  margin-left: auto;
  margin-right: auto;
}

/* Section headings (H2, H3) — maroon to visually separate sections */
.aneka-policy h2,
.aneka-policy h3 {
  font-size: 20px;
  font-weight: 500;
  margin-top: 32px;
  margin-bottom: 10px;
  color: var(--maroon);
}

/* Intro paragraph — slightly muted and centered */
.aneka-policy > p:first-of-type {
  text-align: center;
  color: #777;
  font-size: 14px;
  margin-bottom: 30px;
}

/* Body paragraphs and list items */
.aneka-policy p,
.aneka-policy li {
  font-size: 14.5px;
  line-height: 1.7;
  color: #4a4a4a;
}

/* Bullet lists */
.aneka-policy ul {
  padding-left: 18px;
  margin: 12px 0 20px;
}

.aneka-policy li {
  margin-bottom: 8px;
  line-height: 1.6;
  display: list-item; /* Ensures bullets show correctly */
}

/* Remove extra margin from paragraphs inside list items */
.aneka-policy li p {
  margin: 0;
  display: inline;
}

/* Horizontal divider line */
.aneka-policy hr {
  border: none;
  border-top: 1px solid #e5e0d8;
  margin: 30px 0;
}

/* Links */
.aneka-policy a {
  color: var(--maroon);
  text-decoration: underline;
}

/* Bold text */
.aneka-policy strong {
  color: #2f2f2f;
  font-weight: 500;
}

/* Optional highlight box (add class="highlight-box" to any div) */
.aneka-policy .highlight-box {
  background: #f7f4ef;
  border: 1px solid #eee;
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin: 20px 0;
}

/* Consistent spacing between content blocks */
.aneka-policy > * + * {
  margin-top: 10px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .aneka-policy {
    margin: 40px auto;
  }

  .aneka-policy h1 {
    font-size: 30px;
  }
}

/* END SECTION 16: POLICY PAGES */


/* ============================================================
   END OF ANEKA CUSTOM STYLESHEET
   
   If something breaks, use Ctrl+F / Cmd+F to search for
   the section name and inspect that block first.
   
   Last updated: April 2026
   ============================================================ */


/* ============================================================
   CLAUDE CODE: FOOTER REDESIGN
   Compact, tight, well-aligned. 2-col layout on desktop:
   left = brand blurb + social icons, right = policy links.
   Newsletter moved to its own centered strip below the main row.
   ============================================================ */

/* CLAUDE CODE: Override Dawn's loose top padding on footer */
.footer__content-top.page-width {
  padding-top: 0rem !important;
  padding-bottom: 0 !important;
}

/* CLAUDE CODE: Force footer blocks into a clean 2-col layout: brand left, links right */
.footer__blocks-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3.2rem 6rem !important;
  align-items: start !important;
}

@media screen and (max-width: 749px) {
  .footer__blocks-wrapper {
    grid-template-columns: 1fr !important;
    gap: 2.4rem !important;
  }
}

/* CLAUDE CODE: Footer block headings — smaller, tighter letter spacing */
.footer-block__heading {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18rem !important;
  text-transform: uppercase !important;
  margin: 0 0 1.6rem !important;
  opacity: 0.7;
}

/* CLAUDE CODE: Footer link list — tighter line height */
.footer-block__details-content.list-unstyled li {
  margin-bottom: 0.8rem;
}

.footer-block__details-content .link--text {
  font-size: 1.35rem !important;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.footer-block__details-content .link--text:hover {
  opacity: 1;
}

/* CLAUDE CODE: Social icons in footer — smaller, inline row */
.footer__list-social {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.4rem !important;
  margin-top: 1.6rem !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer__list-social .list-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 0.1rem solid rgba(255,255,255,0.25);
  opacity: 0.8;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.footer__list-social .list-social__link:hover {
  opacity: 1;
  border-color: rgba(255,255,255,0.6);
}

.footer__list-social .svg-wrapper svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

/* CLAUDE CODE: Newsletter strip — full-width, centered, with a subtle top divider */
.footer-block--newsletter {
  border-top: 0.1rem solid rgba(255,255,255,0.12) !important;
  margin-top: 3.2rem !important;
  padding-top: 3.2rem !important;
  text-align: center !important;
}

.footer-block__newsletter {
  max-width: 48rem;
  margin: 0 auto;
}

.footer-block__newsletter .footer-block__heading {
  margin-bottom: 1.2rem !important;
  opacity: 1 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.12rem !important;
}

/* CLAUDE CODE: Newsletter input+button row — pill pair */
.footer-block__newsletter .field {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 999px !important;
  border: 0.1rem solid rgba(255,255,255,0.2) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: static !important;
}

.footer-block__newsletter .field__input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  padding: 1.2rem 1.8rem !important;
  font-size: 1.35rem !important;
  flex: 1 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.footer-block__newsletter .field__input::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

.footer-block__newsletter .field__label {
  display: none !important;
}

/* CLAUDE CODE: Newsletter submit button — compact maroon pill inside the field */
.footer-block__newsletter .newsletter-form__button {
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  border-left: 0.1rem solid rgba(255,255,255,0.2) !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0 2rem !important;
  height: 4.4rem !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s ease !important;
  flex-shrink: 0 !important;
}

.footer-block__newsletter .newsletter-form__button:hover {
  background: rgba(255,255,255,0.25) !important;
}

.footer-block__newsletter .newsletter-form__button .svg-wrapper {
  display: none !important;
}

/* CLAUDE CODE: Footer bottom bar — copyright, compact */
.footer__content-bottom {
  margin-top: 3.2rem !important;
  border-top: 0.1rem solid rgba(255,255,255,0.1) !important;
}

.footer__content-bottom-wrapper {
  padding: 1.6rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer__copyright {
  font-size: 1.2rem !important;
  opacity: 0.5 !important;
  text-align: center !important;
}

/* CLAUDE CODE: Payment icons row — hide if it looks too cluttered */
.footer__payment {
  display: none !important;
}

/* ============================================================
   CLAUDE CODE: HERO BANNER BUTTON — FILLED MAROON
   The "Shop Bestsellers" button on the homepage hero should be
   a solid filled button, not an outline ghost on dark images.
   ============================================================ */

.banner__buttons .button {
  background: #6b0f2b !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  min-height: 4.8rem !important;
  padding: 0 3rem !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03rem !important;
  box-shadow: 0 4px 16px rgba(107,15,43,0.35) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.banner__buttons .button:hover {
  background: #5a0c24 !important;
  box-shadow: 0 6px 20px rgba(107,15,43,0.45) !important;
}

.banner__buttons .button::after,
.banner__buttons .button::before {
  display: none !important;
}

/* ============================================================
   CLAUDE CODE: ADD TO CART BUTTON — FILLED MAROON
   The main product form submit should always be filled maroon,
   regardless of Dawn's dynamic checkout variant logic.
   ============================================================ */

.product-form__submit {
  background: #6b0f2b !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  min-height: 5rem !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04rem !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
  width: 100% !important;
}

.product-form__submit:hover:not([disabled]) {
  background: #5a0c24 !important;
}

.product-form__submit[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.product-form__submit::after,
.product-form__submit::before {
  display: none !important;
}

/* ============================================================
   CLAUDE CODE: MOBILE DRAWER — LOGIN BUTTON STYLES
   Replaces the social icon row at the bottom of the menu drawer
   with a full-width "Sign in" / "My Account" button.
   ============================================================ */

.menu-drawer__login-cta {
  padding: 2rem 1.6rem 1.6rem;
  border-top: 0.1rem solid rgba(47, 42, 40, 0.08);
}

/* CLAUDE CODE: Login pill button — full width, maroon fill */
.menu-drawer__login-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  width: 100% !important;
  min-height: 4.8rem !important;
  background: #4d0621 !important;
  color: #fff !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02rem !important;
  transition: background 0.2s ease !important;
}

.menu-drawer__login-btn:hover {
  background: #4d0621 !important;
  color: #fff !important;
}

.menu-drawer__login-btn .svg-wrapper {
  display: flex;
  align-items: center;
}

.menu-drawer__login-btn .svg-wrapper svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* ============================================================
   Claude Code: FIX 3 — Mobile header icon alignment and
   sticky header / announcement bar behaviour
   ============================================================ */

@media screen and (max-width: 749px) {
  /* Claude Code: Ensure the sticky header group always has a high enough z-index on mobile so the announcement bar and header remain above page content when scrolling. The shopify-section-group-header-group wraps both — setting it sticky at top:0 keeps both pinned correctly. */
  .shopify-section-group-header-group {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  /* Claude Code: Keep the announcement bar inside the sticky header group so it scrolls away with the header on reduce-logo-size sticky mode but stays pinned on always-sticky mode. Setting it as a block inside the sticky group (not its own stacking context) prevents the gap that can appear between announcement bar and header when both try to be independently sticky. */
  .shopify-section-group-header-group .shopify-section:first-child {
    position: relative !important;
    z-index: 1 !important;
  }
  /* Claude Code: FIX 4 — Mobile header icon row alignment.
     Ensure all icons (search, cart, wishlist) sit on the same vertical
     midline as the logo. Use a small consistent gap instead of 0 so icons
     don't touch each other. */
  .header__icons {
    align-items: center !important;
    gap: 2px !important;
  }

  /* Claude Code: FIX 4 — Normalise each header icon touch target on mobile.
     44×44px hit area (Apple HIG minimum). overflow:visible ensures SVG paths
     that extend near the edge of the viewBox are never clipped by the container.
     Previously overflow defaulted to hidden on some browsers, chopping the
     heart icon's two top curves. */
  .header__icon {
    width: 4.4rem !important;
    height: 4.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* Claude Code: FIX 4 — Constrain icon SVGs to a safe size that fits cleanly
     inside the 44px touch target with a small breathing margin on all sides.
     20px gives a comfortable 12px of padding per side in a 44px box.
     The wishlist heart (viewBox 0 0 20 20) was being clipped because the SVG
     was sized 18px but the path occupies the full 20-unit viewBox. */
  .header__icon svg {
    width: 20px !important;
    height: 20px !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Claude Code: FIX 4 — Reduce right padding on the icons container on mobile
     so the rightmost icon (cart) aligns flush with the page edge padding
     rather than feeling inset. */
  .header__icons {
    padding-right: 0.2rem !important;
  }

  /* Claude Code: Keep the hamburger / menu icon on the left aligned with the
     page edge — remove the negative left margin that was pulling it slightly
     off-grid on small screens. */
  header-drawer {
    margin-left: -0.6rem !important;
  }

  /* Claude Code: Ensure the header itself stays centred and doesn't shift
     when the sticky class is toggled by the StickyHeader JS — prevents the
     brief layout jump on scroll direction change. */
  .header-wrapper {
    transition: none !important;
  }
}


/* ============================================================
   CLAUDE CODE: FIX 1 — STICKY HEADER & ANNOUNCEMENT BAR
   Hide sticky header + announcement bar when mobile drawer is open.
   Uses :has() selector to detect open drawer state without JS.
   Also hides the header group entirely while drawer is open so
   the left panel gets full screen space on mobile.
   ============================================================ */

/* CLAUDE CODE: When the menu drawer is open on mobile, hide the sticky
   header group (announcement + header) so the drawer gets full vertical
   space and doesn't overlap with or sit under the sticky bar. */
/* Claude Code: FIX 1 — Replaced opacity:0 header-hiding with z-index stacking.
   opacity:0 caused iOS Safari to permanently hide the announcement bar and header
   after the nav drawer was closed, requiring a hard reload to recover.
   The drawer (#menu-drawer) naturally overlays at z-index 100+ so the header
   does NOT need to be hidden — it just needs to sit below the drawer. */
@media screen and (max-width: 989px) {
  /* Claude Code: Ensure the nav drawer panel sits above the sticky header
     so no overlap is visible while the drawer is open. No opacity change —
     the header stays in the DOM, visible, and repaints correctly on close. */
  #Details-menu-drawer-container[open] #menu-drawer {
    z-index: 101 !important;
  }

  /* Claude Code: Keep the sticky header below the open drawer rather than
     hiding it entirely. position:relative removes sticky behaviour while open
     so the header doesn't float above the drawer on scroll. */
  body:has(#Details-menu-drawer-container[open]) .shopify-section-header-sticky {
    position: relative !important;
    top: auto !important;
  }
}

/* CLAUDE CODE: FIX 1B drawer aesthetics merged into Section 13 block above */

/* ============================================================
   CLAUDE CODE: FIX 2 — FOOTER HEADINGS & EMAIL INPUT
   Premium typography for section headings. White email input text.
   ============================================================ */

/* CLAUDE CODE: Footer block headings — Cormorant Garamond, generous size,
   warm gold-white colour. Premium editorial feel, not tiny caps. */
.footer-block__heading {
  /*font-family: 'Cormorant Garamond', Georgia, serif !important; */
  font-family: var(--font-heading-family);
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22rem !important;
  text-transform: uppercase !important;
  color: rgba(255, 248, 240, 0.75) !important;
  opacity: 1 !important;
  margin: 0 0 1.8rem !important;
}

@media screen and (min-width: 750px) {
  /* CLAUDE CODE: Slightly larger on desktop — more presence */
  .footer-block__heading {
    font-size: 1.8rem !important;
    letter-spacing: 0.28rem !important;
  }
}

/* CLAUDE CODE: Newsletter section heading — larger, brighter, centred */
.footer-block__newsletter .footer-block__heading {
  font-size: 2rem !important;
  letter-spacing: 0.2rem !important;
  color: rgba(255, 248, 240, 0.95) !important;
  margin-bottom: 1.4rem !important;
}

@media screen and (min-width: 750px) {
  .footer-block__newsletter .footer-block__heading {
    font-size: 2.4rem !important;
  }
}

/* CLAUDE CODE: Email input text — force white so placeholder and typed
   text are legible on the dark transparent field background */
.footer-block__newsletter .field__input,
.footer-block__newsletter .field__input::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer-block__newsletter .field__input {
  color: #fff !important;
}

/* CLAUDE CODE: Subscribe button label text — white */
.footer-block__newsletter .newsletter-form__button,
.footer-block__newsletter .newsletter-form__button-label {
  color: #fff !important;
}

/* CLAUDE CODE: Arrow icon in subscribe button — white */
.footer-block__newsletter .newsletter-form__button .svg-wrapper svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* ============================================================
   CLAUDE CODE: FIX 3 — MOBILE FILTER: AUTO-APPLY + HIDE PILLS
   Filters apply immediately on checkbox change (no Apply button).
   Active filter pills below the toolbar are hidden — the count
   badge on the Filter button already communicates applied state.
   ============================================================ */

/* CLAUDE CODE: Hide the active filter pills row on mobile — the Filter (N)
   count badge communicates applied filters. Pill row creates visual clutter
   and pushes the product grid down on small screens. */
@media screen and (max-width: 749px) {
  .active-facets-mobile {
    display: none !important;
  }
}

/* CLAUDE CODE: Filter button — base state, outlined maroon pill */
.mobile-facets__open {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0.8rem 1.6rem !important;
  border-radius: 999px !important;
  border: 0.15rem solid rgba(107, 15, 43, 0.45) !important;
  background: transparent !important;
  color: #6b0f2b !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* CLAUDE CODE: Filter button active state — filled maroon when filters applied.
   Matches the Adore reference: filled button + count badge. */
.mobile-facets__open--active {
  background: #6b0f2b !important;
  border-color: #6b0f2b !important;
  color: #fff !important;
}

.mobile-facets__open--active .svg-wrapper svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* CLAUDE CODE: Filter icon inside the button */
.mobile-facets__open .svg-wrapper svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
  color: #6b0f2b !important;
}

/* CLAUDE CODE: Mobile filter drawer panel — Aneka brand styling */
.mobile-facets__inner {
  background: #4d0621 !important;
  color: rgba(255, 248, 240, 0.9) !important;
}

/* CLAUDE CODE: Filter panel heading */
.mobile-facets__heading {
  color: rgba(255, 248, 240, 0.95) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 2rem !important;
  letter-spacing: 0.18rem !important;
  text-transform: uppercase !important;
}

/* CLAUDE CODE: Filter section summary rows (Price, Colour, Availability) */
.mobile-facets__summary {
  color: rgba(255, 248, 240, 0.85) !important;
  border-bottom-color: rgba(255, 248, 240, 0.1) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16rem !important;
  text-transform: uppercase !important;
}

/* CLAUDE CODE: Filter checkbox labels */
.mobile-facets__label {
  color: rgba(255, 248, 240, 0.8) !important;
  font-size: 1.4rem !important;
}

/* CLAUDE CODE: Active filter value inside panel — highlight checked state */
.mobile-facets__label.active {
  color: #fff !important;
  font-weight: 600 !important;
}

/* CLAUDE CODE: Filter panel close X button */
.mobile-facets__close-button,
.mobile-facets__close .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.7) !important;
}

/* ============================================================
   CLAUDE CODE: FIX 4 — MOBILE HEADER: HIDE ACCOUNT ICON,
   CENTER LOGO, CORRECT ICON SPACING
   ============================================================ */

@media screen and (max-width: 749px) {
  /* CLAUDE CODE: Hide the account/sign-in icon on mobile header.
     The login action is accessible via the hamburger menu drawer instead.
     .small-hide already hides it when a menu is set — this makes it
     unconditional so it hides even on pages without a menu block. */
  .header__icon--account {
    display: none !important;
  }

  /* Claude Code: FIX 4 — Center the logo — Dawn uses a CSS grid on the header.
     When account icon is hidden, the right column has fewer items so the
     logo can drift. Force the logo cell to be centred in the grid.
     Both hamburger and icons columns use "auto" so the middle 1fr column
     is mathematically centred — the logo will always be visually centred. */
  .header--mobile-center .header__heading,
  .header .header__heading {
    justify-self: center !important;
    text-align: center !important;
  }

  /* Claude Code: FIX — Consistent gap between right-side icons (search, wishlist, cart).
     Increased from 2px → 8px so icons have uniform space and the cart icon doesn't
     appear squashed next to the wishlist heart. */
  .header__icons {
    gap: 8px !important;
  }

  /* Claude Code: FIX — Cart icon: zero out the negative margin-right that was
     making the cart appear smaller and misaligned on mobile. */
  .header__icon--cart {
    margin-right: 0 !important;
  }

  /* Claude Code: FIX 4 — Each icon: 44×44 touch target with overflow:visible
     so SVG paths (e.g. the heart icon's upper curves) are never clipped by the
     container box. padding:0 removes any residual inherited padding that could
     offset the visual centre of the icon. */
  .header__icons .header__icon {
    width: 4.4rem !important;
    height: 4.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Claude Code: FIX 4 — Icon SVGs at a consistent 20px — large enough to
     read clearly, small enough to leave breathing room in the 44px touch target.
     overflow:visible ensures the heart path (which extends to 0,0 of its viewBox)
     never gets clipped. display:block removes the inline baseline descender gap. */
  .header__icons .header__icon svg {
    width: 20px !important;
    height: 20px !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Claude Code: FIX 4 — Header layout: 3-column grid [hamburger][logo][icons].
     Both outer columns are "auto" so the middle 1fr is always perfectly centred
     regardless of how many icons are in the right column. */
  .header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  /* Claude Code: FIX 4 — Logo cell: full middle column, content centred */
  .header__heading {
    grid-column: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Claude Code: FIX 4 — Hamburger in first cell */
  header-drawer {
    grid-column: 1 !important;
    margin-left: 0 !important;
  }

  /* Claude Code: FIX 4 — Icons group in last cell, right-aligned */
  .header__icons {
    grid-column: 3 !important;
    justify-content: flex-end !important;
  }
}


/* ============================================================
   CLAUDE CODE: FILTER FIXES v2
   1. Hide active filter pills + "Remove all" below toolbar on mobile
   2. Filter button styled with count only (no pill clutter)
   3. Active filter state visible INSIDE the drawer panel
   ============================================================ */

/* CLAUDE CODE: Hide entire active-facets row on mobile — pills, "Remove all" link,
   everything. The Filter (N) count badge on the button is the only indicator needed. */
@media screen and (max-width: 749px) {
  .active-facets-mobile {
    display: none !important;
  }

  /* CLAUDE CODE: Also hide the "Remove all" link that Dawn renders as a standalone
     element outside the pills list — targets both inside and outside .active-facets */
  .active-facets-mobile .active-facets__button--light,
  a.active-facets__button.js-facet-remove,
  .facets-container .js-facet-remove {
    display: none !important;
  }
}

/* CLAUDE CODE: Inside the filter drawer, show which options are currently active.
   Dawn renders checked state from the server HTML, but the checkboxes are visually
   hard to see on the dark background. Add a clear cream border + fill for checked state. */
.mobile-facets__checkbox:checked + .mobile-facets__highlight,
.mobile-facets__label.active .mobile-facets__highlight {
  border-color: rgba(255, 248, 240, 0.9) !important;
  background: rgba(255, 248, 240, 0.15) !important;
}

/* CLAUDE CODE: Checked checkbox custom indicator — cream outline square */
.mobile-facets__checkbox {
  accent-color: rgba(255, 248, 240, 0.9) !important;
}

/* CLAUDE CODE: Active filter label text — brighter when checked */
.mobile-facets__label:has(.mobile-facets__checkbox:checked) {
  color: #fff !important;
  font-weight: 600 !important;
}

/* CLAUDE CODE: Filter drawer header — show count of applied filters */
.mobile-facets__header {
  border-bottom: 0.1rem solid rgba(255, 248, 240, 0.12) !important;
  padding-bottom: 1.2rem !important;
}

/* CLAUDE CODE: Price range slider — cream thumb on dark background */
.mobile-facets__main .price-filter input[type="range"] {
  accent-color: rgba(255, 248, 240, 0.8) !important;
}

/* CLAUDE CODE: Price range display text */
.mobile-facets__main .facets__price {
  color: rgba(255, 248, 240, 0.85) !important;
}

/* ============================================================
   CLAUDE CODE: FOOTER EMAIL INPUT STYLING RESTORE
   Previous CSS block was being overridden by Dawn's component-newsletter.css
   loaded after base.css. Using higher specificity here to ensure the
   styles apply. The newsletter input must show white text on dark bg.
   ============================================================ */

/* CLAUDE CODE: Force white text in email input — was reverting to dark on dark bg */
.footer .newsletter-form__field-wrapper .field__input,
.footer .footer-block__newsletter .field__input,
.footer-block__newsletter input[type="email"] {
  color: #fff !important;
  caret-color: #fff !important;
}

.footer .newsletter-form__field-wrapper .field__input::placeholder,
.footer .footer-block__newsletter .field__input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* CLAUDE CODE: Pill container for the newsletter input row */
.footer .footer-block__newsletter .newsletter-form__field-wrapper .field {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 0.1rem solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  position: relative !important;
  min-height: 4.8rem !important;
}

/* CLAUDE CODE: Input inside pill — transparent, white text, full flex */
.footer .footer-block__newsletter .field__input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 1.2rem 1.8rem !important;
  font-size: 1.35rem !important;
  color: #fff !important;
  height: auto !important;
}

/* CLAUDE CODE: Label inside the field — hide it (placeholder serves this role) */
.footer .footer-block__newsletter .field__label {
  display: none !important;
}

/* CLAUDE CODE: Subscribe button — sits flush at right end of pill */
/* Claude Code: FIX — was rgba(255,255,255,0.15) which made the button 5% brighter
   than the input area (which shows the field's 10% white background). Setting to
   transparent makes both areas show the same underlying 10% field background. */
.footer .footer-block__newsletter .newsletter-form__button {
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: 0.1rem solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0 2rem !important;
  min-height: 4.8rem !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  transition: background 0.2s ease !important;
  white-space: nowrap !important;
  /* CLAUDE CODE: Reset Dawn button pseudo-element chrome */
  position: relative !important;
  min-width: unset !important;
}

.footer .footer-block__newsletter .newsletter-form__button::before,
.footer .footer-block__newsletter .newsletter-form__button::after {
  display: none !important;
}

.footer .footer-block__newsletter .newsletter-form__button:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* CLAUDE CODE: Button label text — visible white */
.footer .footer-block__newsletter .newsletter-form__button-label {
  color: #fff !important;
  font-size: 1.35rem !important;
}

/* CLAUDE CODE: Arrow icon in subscribe button — white */
.footer .footer-block__newsletter .newsletter-form__button .svg-wrapper {
  display: flex !important;
  align-items: center !important;
}

.footer .footer-block__newsletter .newsletter-form__button .svg-wrapper svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
}

/* ============================================================
   CLAUDE CODE: DESKTOP DRAWER OPEN — HIDE STICKY HEADER FIX
   The :has() selector covers the mobile nav drawer specifically.
   Refined to only target the left-side nav drawer, not filter panel.
   ============================================================ */

/* CLAUDE CODE: When mobile nav drawer (hamburger menu) is open,
   hide the announcement bar + header sticky group so the drawer
   gets a clean full-viewport overlay with no overlap. */
/* Claude Code: FIX 1 — Removed opacity:0 block (was causing permanent header
   disappearance on iOS Safari after drawer close). z-index stacking handles
   the visual layering instead. See the fix block above. */
@media screen and (min-width: 990px) {
  /* Claude Code: Desktop — drawer menu layout. Header stays fully visible.
     Opacity was never needed on desktop; keeping this reset for safety. */
  body:has(#Details-menu-drawer-container[open]) .shopify-section-group-header-group {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* ============================================================
   CLAUDE CODE: CONSOLIDATED DRAWER + FILTER + FOOTER FIX (v6)
   Single authoritative block. All rules use specific selectors
   with !important only where Dawn's cascade requires it.
   ============================================================ */

/* ── DRAWER PANEL: BACKGROUND & ALL TEXT ───────────────────── */

/* CLAUDE CODE: Force dark-maroon background on the drawer panel regardless
   of which color-scheme is set in theme settings. scheme-1 defaults to a
   light beige (#f5f1e8) which made text invisible. The --gradient-background
   and --color-background CSS variables are also overridden so Dawn's
   "gradient" class resolves to dark maroon rather than the scheme's light bg. */
#menu-drawer,
.menu-drawer {
  background: #4d0621 !important;
  background-color: #4d0621 !important;
  --gradient-background: #4d0621 !important;
  --color-background: 77, 6, 33 !important;
}

/* CLAUDE CODE: All text inside the drawer — cream white on dark bg */
.menu-drawer,
.menu-drawer * {
  color: rgba(255, 248, 240, 0.9);
}

/* CLAUDE CODE: Explicit link override — Dawn's .link class forces rgb(var(--color-foreground))
   which resolves to dark on light schemes. Must override at this specificity level. */
.menu-drawer .menu-drawer__menu-item,
.menu-drawer .menu-drawer__menu-item.link,
.menu-drawer .menu-drawer__menu-item.link--text,
.menu-drawer .list-menu__item {
  color: rgba(255, 248, 240, 0.9) !important;
  border-bottom-color: rgba(255, 248, 240, 0.1) !important;
}

/* CLAUDE CODE: Active/current page — pure white */
.menu-drawer .menu-drawer__menu-item--active,
.menu-drawer [aria-current="page"] {
  color: #fff !important;
  font-weight: 600;
}

/* CLAUDE CODE: Hover — white, subtle rightward nudge */
.menu-drawer .menu-drawer__menu-item:hover {
  color: #fff !important;
  transform: translateX(3px);
}

/* CLAUDE CODE: Submenu items and back button */
.menu-drawer .menu-drawer__close-button,
.menu-drawer .menu-drawer__submenu .link {
  color: rgba(255, 248, 240, 0.85) !important;
}

/* CLAUDE CODE: Submenu background — slightly lighter maroon so depth is visible */
.menu-drawer .menu-drawer__submenu {
  background: #5a0a28 !important;
  --gradient-background: #5a0a28 !important;
  --color-background: 90, 10, 40 !important;
}

/* CLAUDE CODE: SVG icons inside drawer — cream tint */
.menu-drawer .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.6) !important;
  stroke: rgba(255, 248, 240, 0.6) !important;
}

/* CLAUDE CODE: Login CTA button inside drawer — cream ghost style on dark bg */
.menu-drawer .menu-drawer__login-cta {
  border-top-color: rgba(255, 248, 240, 0.12) !important;
}

.menu-drawer .menu-drawer__login-btn {
  background: rgba(255, 248, 240, 0.12) !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.3) !important;
  color: rgba(255, 248, 240, 0.95) !important;
}

.menu-drawer .menu-drawer__login-btn:hover {
  background: rgba(255, 248, 240, 0.22) !important;
  color: #fff !important;
}

/* ── APPLIED FILTER CHIPS INSIDE DRAWER ─────────────────────── */

/* CLAUDE CODE: Container for applied filter chips at top of filter drawer.
   Mirrors Adore's UX — chips with × remove links shown before the filter
   category list so shoppers can see what's active without scrolling. */
.aneka-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 1.2rem 2rem 0.4rem;
}

/* CLAUDE CODE: Each chip — pill shape, gold/cream border on dark bg.
   Uppercase label matches the Adore reference style.
   Clicking the chip navigates to url_to_remove (handled by facet-remove). */
.aneka-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 0.1rem solid rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.08);
  color: rgba(255, 248, 240, 0.9) !important;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.aneka-filter-chip:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.8);
  color: #fff !important;
}

/* CLAUDE CODE: The × remove indicator inside each chip */
.aneka-filter-chip__remove {
  font-size: 1rem;
  opacity: 0.7;
  font-style: normal;
}

/* ── MOBILE FILTER PILLS ROW: FULLY HIDDEN ──────────────────── */

/* CLAUDE CODE: Hide the active-facets-mobile pills row that was appearing below
   the Filter/Sort toolbar. Applied filters are now shown inside the drawer as
   chips (aneka-filter-chips above). The Filter (N) count badge on the button
   communicates applied state when the drawer is closed. */
.active-facets-mobile,
.active-facets.active-facets-mobile {
  display: none !important;
}

/* ── FILTER DRAWER INNER PANEL STYLING ──────────────────────── */

/* CLAUDE CODE: Filter summary rows (PRICE / COLOUR / AVAILABILITY) */
.mobile-facets__summary {
  padding: 1.4rem 2rem !important;
  border-bottom: 0.1rem solid rgba(212, 175, 55, 0.25) !important;
}

.mobile-facets__summary > div > span:first-child {
  color: rgba(212, 175, 55, 0.9) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18rem !important;
  text-transform: uppercase !important;
}

/* CLAUDE CODE: Arrow icon in filter summary rows */
.mobile-facets__arrow .svg-wrapper svg,
.mobile-facets__arrow svg {
  color: rgba(212, 175, 55, 0.7) !important;
  stroke: rgba(212, 175, 55, 0.7) !important;
}

/* CLAUDE CODE: Filter sub-panel (expanded options list) */
.mobile-facets__submenu {
  background: #3d0518 !important;
  --gradient-background: #3d0518 !important;
}

/* CLAUDE CODE: Back button in sub-panel */
.mobile-facets__close-button {
  color: rgba(212, 175, 55, 0.9) !important;
  padding: 1.2rem 2rem !important;
  border-bottom: 0.1rem solid rgba(212, 175, 55, 0.2) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15rem !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  width: 100% !important;
  background: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  cursor: pointer !important;
}

/* CLAUDE CODE: Filter option labels (Green, Red, In stock, etc.) */
.mobile-facets__label {
  color: rgba(255, 248, 240, 0.82) !important;
  padding: 1rem 2rem !important;
}

/* CLAUDE CODE: Active/checked filter option — brighter */
.mobile-facets__label.active,
.mobile-facets__label:has(input:checked) {
  color: #fff !important;
  font-weight: 600 !important;
}

/* CLAUDE CODE: Checkbox accent color on dark bg */
.mobile-facets__checkbox {
  accent-color: rgba(212, 175, 55, 0.9) !important;
}

/* CLAUDE CODE: Filter heading (FILTER title at top of panel) */
.mobile-facets__heading {
  color: rgba(212, 175, 55, 0.95) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22rem !important;
  text-transform: uppercase !important;
}

/* ── FOOTER EMAIL INPUT: HIGH SPECIFICITY RESTORE ───────────── */

/* CLAUDE CODE: Dawn's component-newsletter.css loads AFTER base.css and overwrites
   the newsletter field styles. Using the footer ancestor plus form ID for specificity
   so these rules win over component-newsletter.css without needing JS. */
footer .footer-block__newsletter .newsletter-form__field-wrapper,
.footer .footer-block__newsletter .newsletter-form__field-wrapper {
  max-width: 100% !important;
}

footer .footer-block__newsletter .field,
.footer .footer-block__newsletter .field {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 0.1rem solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  position: relative !important;
  min-height: 4.8rem !important;
  /* CLAUDE CODE: Reset any box-shadow Dawn adds inside newsletter component */
  box-shadow: none !important;
}

footer .footer-block__newsletter .field:focus-within,
.footer .footer-block__newsletter .field:focus-within {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

footer .footer-block__newsletter .field__input,
.footer .footer-block__newsletter .field__input,
footer .footer-block__newsletter input[type="email"],
.footer .footer-block__newsletter input[type="email"] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 1.2rem 1.8rem !important;
  font-size: 1.35rem !important;
  color: #fff !important;
  caret-color: #fff !important;
  height: auto !important;
  /* CLAUDE CODE: Prevent Dawn's absolute positioning of the input */
  position: static !important;
}

footer .footer-block__newsletter .field__input::placeholder,
.footer .footer-block__newsletter .field__input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

footer .footer-block__newsletter .field__label,
.footer .footer-block__newsletter .field__label {
  /* CLAUDE CODE: Hide floating label — placeholder text serves this role */
  display: none !important;
}

footer .footer-block__newsletter .newsletter-form__button,
.footer .footer-block__newsletter .newsletter-form__button {
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: 0.1rem solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0 2rem !important;
  min-height: 4.8rem !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  transition: background 0.2s ease !important;
  white-space: nowrap !important;
  /* CLAUDE CODE: Neutralise Dawn's .button pseudo-element chrome (border box) */
  position: relative !important;
  min-width: unset !important;
}

footer .footer-block__newsletter .newsletter-form__button::before,
footer .footer-block__newsletter .newsletter-form__button::after,
.footer .footer-block__newsletter .newsletter-form__button::before,
.footer .footer-block__newsletter .newsletter-form__button::after {
  display: none !important;
}

footer .footer-block__newsletter .newsletter-form__button:hover,
.footer .footer-block__newsletter .newsletter-form__button:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

footer .footer-block__newsletter .newsletter-form__button-label,
.footer .footer-block__newsletter .newsletter-form__button-label {
  color: #fff !important;
}

footer .footer-block__newsletter .newsletter-form__button .svg-wrapper svg,
.footer .footer-block__newsletter .newsletter-form__button .svg-wrapper svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
}


/* =============================================================================
   CLAUDE CODE: FINAL CONSOLIDATED FIX BLOCK (v7)
   Covers: desktop nav drawer visibility, mobile filter panel, footer newsletter,
   active filter chips in panel, header hide when drawer open on mobile.
   All previous partial blocks for these features are superseded by this one.
   Rules are ordered from least to most specific to avoid cascade conflicts.
   ============================================================================= */

/* ── 1. NAV DRAWER: FORCE DARK BACKGROUND + CREAM TEXT ──────────────────────
   scheme-1 (light beige) is set as menu_color_scheme in theme settings.
   Dawn applies --color-background from the scheme to .gradient inside .menu-drawer,
   overriding our background declaration. We must override BOTH the CSS variable
   AND the computed background-color, and scope all text to the dark context.
   --------------------------------------------------------------------------- */

/* CLAUDE CODE: Override Dawn's scheme-derived background on the nav drawer panel.
   Targets both the custom element and the inner div that Dawn applies gradient to. */
#menu-drawer,
.menu-drawer,
.menu-drawer.gradient,
.menu-drawer .gradient {
  background: #4d0621 !important;
  background-color: #4d0621 !important;
  --gradient-background: #4d0621 !important;
  --color-background: 77, 6, 33 !important;
  --color-foreground: 255, 248, 240 !important;
}

/* CLAUDE CODE: All nav links in the drawer — cream on dark. Dawn's .link class uses
   rgb(var(--color-foreground)) which scheme-1 sets to dark (#2a2a2a). Override. */
.menu-drawer a,
.menu-drawer .link,
.menu-drawer .link--text,
.menu-drawer .menu-drawer__menu-item,
.menu-drawer .list-menu__item {
  color: rgba(255, 248, 240, 0.88) !important;
  text-decoration: none;
}

/* CLAUDE CODE: Active/current page link */
.menu-drawer [aria-current="page"],
.menu-drawer .menu-drawer__menu-item--active {
  color: #fff !important;
  font-weight: 600 !important;
}

/* CLAUDE CODE: Hover — pure white nudge */
.menu-drawer .menu-drawer__menu-item:hover,
.menu-drawer a:hover {
  color: #fff !important;
  transform: translateX(3px);
}

/* CLAUDE CODE: Li dividers — cream-subtle, not yellow */
.menu-drawer .menu-drawer__menu li {
  border-bottom-color: rgba(255, 248, 240, 0.1) !important;
}

/* CLAUDE CODE: Submenu panel — slightly deeper maroon for depth */
.menu-drawer .menu-drawer__submenu,
.menu-drawer .menu-drawer__submenu.gradient {
  background: #3d0518 !important;
  background-color: #3d0518 !important;
  --gradient-background: #3d0518 !important;
  --color-background: 61, 5, 24 !important;
  --color-foreground: 255, 248, 240 !important;
}

/* CLAUDE CODE: Back button and icons inside drawer — cream tint */
.menu-drawer .menu-drawer__close-button {
  color: rgba(255, 248, 240, 0.85) !important;
}

.menu-drawer .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.55) !important;
  stroke: rgba(255, 248, 240, 0.55) !important;
}

/* CLAUDE CODE: Login button inside drawer — ghost cream style on dark bg */
.menu-drawer .menu-drawer__login-cta {
  border-top-color: rgba(255, 248, 240, 0.1) !important;
  padding: 1.6rem;
}

.menu-drawer .menu-drawer__login-btn {
  background: rgba(255, 248, 240, 0.1) !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.28) !important;
  color: rgba(255, 248, 240, 0.92) !important;
  border-radius: 999px !important;
  min-height: 4.4rem !important;
}

.menu-drawer .menu-drawer__login-btn:hover {
  background: rgba(255, 248, 240, 0.2) !important;
  color: #fff !important;
}

/* ── 2. STICKY HEADER HIDE WHEN NAV DRAWER IS OPEN ──────────────────────────
   Hides announcement bar + header when the hamburger nav drawer is open on
   mobile. Uses :has() — supported in all modern browsers (Chrome 105+, Safari 15.4+).
   Scoped to ≤989px so desktop drawer-menu layout keeps the header visible.
   --------------------------------------------------------------------------- */

/* Claude Code: FIX 1 — Third opacity:0 block removed. Was redundant duplicate
   of the blocks above and all three were causing the iOS repaint bug.
   z-index stacking in the first fix block handles drawer layering. */

/* ── 3. MOBILE FILTER TOOLBAR: FILTER BUTTON STYLING ────────────────────────
   Clean pill button. Filled maroon when filters are active.
   No black outline — only the brand maroon border.
   --------------------------------------------------------------------------- */

/* CLAUDE CODE: Remove all extra borders/strokes Dawn puts around the filter button
   area. The aneka-mobile-facets-toolbar should have no background or border of its
   own — only the individual Filter pill and Sort select have borders. */
.aneka-mobile-facets-toolbar {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* CLAUDE CODE: The wrapper summary element — reset all button-like chrome */
.mobile-facets__open-wrapper {
  list-style: none !important;
  cursor: pointer !important;
  /* Remove summary triangle in all browsers */
  appearance: none !important;
  -webkit-appearance: none !important;
}

.mobile-facets__open-wrapper::-webkit-details-marker {
  display: none !important;
}

/* CLAUDE CODE: Filter pill — outlined maroon, clean pill shape, no black stroke */
.mobile-facets__open {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0.75rem 1.6rem !important;
  border-radius: 999px !important;
  border: 0.15rem solid #6b0f2b !important;
  background: transparent !important;
  color: #6b0f2b !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  /* CLAUDE CODE: Reset any inherited box-shadow or outline that adds the unwanted
     black ring around the pill on some mobile browsers */
  box-shadow: none !important;
  outline: none !important;
}

/* CLAUDE CODE: Filled maroon when 1+ filters are active (--active modifier) */
.mobile-facets__open.mobile-facets__open--active {
  background: #6b0f2b !important;
  border-color: #6b0f2b !important;
  color: #fff !important;
}

.mobile-facets__open.mobile-facets__open--active .svg-wrapper svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* CLAUDE CODE: Filter icon inside pill */
.mobile-facets__open .svg-wrapper svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
  color: #6b0f2b !important;
  stroke: #6b0f2b !important;
}

/* ── 4. ACTIVE FILTER PILLS BELOW TOOLBAR: COMPLETELY HIDDEN ────────────────
   Applied filters are shown inside the drawer as .aneka-filter-chips.
   The pills row + "Remove all" below the toolbar are redundant and removed.
   --------------------------------------------------------------------------- */

/* CLAUDE CODE: Hide the entire active-facets-mobile row below the toolbar.
   This removes the "Color: Green ×", "Remove all" clutter. */
.active-facets-mobile,
.active-facets.active-facets-mobile,
.active-facets-mobile .active-facets__button,
.active-facets-mobile .active-facets__button-wrapper,
.active-facets-mobile .js-facet-remove {
  display: none !important;
}

/* ── 5. APPLIED FILTER CHIPS INSIDE DRAWER ──────────────────────────────────
   Server-rendered by facets.liquid into .aneka-filter-chips.
   Appears at top of filter panel list showing active filters with remove links.
   --------------------------------------------------------------------------- */

/* CLAUDE CODE: Chips container — full-width, wrapping row */
.aneka-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
  padding: 1.4rem 2rem 0.6rem !important;
  border-bottom: 0.1rem solid rgba(212, 175, 55, 0.2) !important;
}

/* CLAUDE CODE: Individual chip — matches Adore layout with Aneka gold palette */
.aneka-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 0.4rem !important;
  border: 0.1rem solid rgba(212, 175, 55, 0.55) !important;
  background: rgba(212, 175, 55, 0.08) !important;
  color: rgba(255, 248, 240, 0.9) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1rem !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  /* CLAUDE CODE: Reset any inherited button chrome */
  box-shadow: none !important;
  outline: none !important;
}

.aneka-filter-chip:hover {
  background: rgba(212, 175, 55, 0.18) !important;
  color: #fff !important;
}

/* CLAUDE CODE: × remove marker on each chip */
.aneka-filter-chip__remove {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  opacity: 0.65 !important;
  line-height: 1 !important;
}

/* ── 6. FOOTER NEWSLETTER: HIGH-SPECIFICITY WHITE INPUT ─────────────────────
   component-newsletter.css loads after base.css and resets these styles.
   Using the `footer` element as ancestor gives us one extra specificity level.
   --------------------------------------------------------------------------- */

/* CLAUDE CODE: Newsletter section heading — premium Cormorant Garamond serif */
.footer .footer-block__newsletter .footer-block__heading {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24rem !important;
  text-transform: uppercase !important;
  color: rgba(255, 248, 240, 0.9) !important;
  opacity: 1 !important;
  margin-bottom: 1.4rem !important;
}

/* CLAUDE CODE: The pill-shaped input+button row */
footer .footer-block__newsletter .field {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 0.1rem solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  position: relative !important;
  min-height: 4.8rem !important;
  box-shadow: none !important;
  max-width: 44rem !important;
  margin: 0 auto !important;
}

/* CLAUDE CODE: Email input — transparent bg, white text */
footer .footer-block__newsletter .field__input,
footer .footer-block__newsletter input[type="email"] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 1.2rem 1.8rem !important;
  font-size: 1.4rem !important;
  color: #fff !important;
  caret-color: #fff !important;
  height: auto !important;
  position: static !important;
}

footer .footer-block__newsletter .field__input::placeholder,
footer .footer-block__newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-style: italic !important;
}

/* CLAUDE CODE: Floating label — hidden, placeholder serves this purpose */
footer .footer-block__newsletter .field__label {
  display: none !important;
}

/* CLAUDE CODE: Subscribe arrow button at right end of pill */
footer .footer-block__newsletter .newsletter-form__button {
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: 0.1rem solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0 2.2rem !important;
  min-height: 4.8rem !important;
  color: #fff !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  transition: background 0.2s ease !important;
  white-space: nowrap !important;
  position: relative !important;
  min-width: unset !important;
}

footer .footer-block__newsletter .newsletter-form__button::before,
footer .footer-block__newsletter .newsletter-form__button::after {
  display: none !important;
}

footer .footer-block__newsletter .newsletter-form__button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* CLAUDE CODE: Button label text */
footer .footer-block__newsletter .newsletter-form__button-label {
  color: #fff !important;
  font-size: 1.35rem !important;
}

/* CLAUDE CODE: Arrow SVG icon inside button */
footer .footer-block__newsletter .newsletter-form__button .svg-wrapper svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
}

/* CLAUDE CODE: Success/error messages */
footer .footer-block__newsletter .newsletter-form__message {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 1rem !important;
}

/* CLAUDE CODE: Mobile footer — tighter, properly sized newsletter area */
@media screen and (max-width: 749px) {
  .footer .footer-block__newsletter {
    text-align: center !important;
  }

  footer .footer-block__newsletter .field {
    max-width: 100% !important;
    min-height: 4.4rem !important;
  }

  footer .footer-block__newsletter .field__input {
    font-size: 1.35rem !important;
  }

  footer .footer-block__newsletter .newsletter-form__button {
    padding: 0 1.6rem !important;
    min-height: 4.4rem !important;
    font-size: 1.3rem !important;
  }

  /* CLAUDE CODE: Mobile footer section headings — Cormorant serif, visible size */
  .footer-block__heading {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.2rem !important;
    color: rgba(255, 248, 240, 0.75) !important;
    opacity: 1 !important;
  }

  /* CLAUDE CODE: Mobile footer newsletter heading — slightly larger */
  .footer .footer-block__newsletter .footer-block__heading {
    font-size: 1.6rem !important;
  }

  /* CLAUDE CODE: Mobile footer accordion headings */
  .footer__mobile-summary {
    font-size: 1.2rem !important;
    letter-spacing: 0.18rem !important;
    color: rgba(255, 248, 240, 0.75) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;

  }
}


/* =============================================================================
   CLAUDE CODE: DEFINITIVE DRAWER BACKGROUND FIX
   
   Root cause: .color-scheme-1 sets --gradient-background and --color-background
   via an inline <style> block in <head> (rendered by theme.liquid). Inline style
   blocks beat external stylesheets for CSS custom properties even with !important.
   Setting the variable on .menu-drawer doesn't help because .color-scheme-1 is
   an ancestor that re-declares the variable, and custom property inheritance means
   the child (.gradient) reads the nearest ancestor's value — which is .color-scheme-1.

   SOLUTION: Override the COMPUTED background property directly on the exact element
   (#menu-drawer) using ID specificity, which beats class specificity from .color-scheme-1.
   Also override background-attachment which .gradient sets to 'fixed' — that can cause
   rendering artifacts on some mobile browsers.
   ============================================================================= */

/* CLAUDE CODE: ID selector (#menu-drawer) has highest specificity of any non-inline rule.
   This overrides both .gradient's var()-based background AND .color-scheme-1's variables. */
#menu-drawer {
  background: #4d0621 !important;
  background-color: #4d0621 !important;
  background-image: none !important;
  background-attachment: scroll !important;
  /* CLAUDE CODE: Also set text color directly so links are readable without variable dependency */
  color: rgba(255, 248, 240, 0.9) !important;
}

/* CLAUDE CODE: Every direct child of #menu-drawer — ensure nothing re-applies a light bg */
#menu-drawer > *,
#menu-drawer .menu-drawer__inner-container,
#menu-drawer .menu-drawer__navigation-container,
#menu-drawer .menu-drawer__navigation,
#menu-drawer .menu-drawer__utility-links {
  background: transparent !important;
  background-color: transparent !important;
}

/* CLAUDE CODE: Submenu panels inside the drawer — slightly deeper shade for depth.
   These use .gradient class so they also inherit .color-scheme-1 variables.
   ID + descendant specificity overrides the class-level variable. */
#menu-drawer .menu-drawer__submenu {
  background: #3a0416 !important;
  background-color: #3a0416 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

/* CLAUDE CODE: All links and text directly inside #menu-drawer — cream white.
   Dawn's .link class uses rgb(var(--color-foreground)) — on scheme-1 this is dark.
   ID + descendant specificity beats .link's class-level color rule. */
#menu-drawer a,
#menu-drawer .link,
#menu-drawer .menu-drawer__menu-item,
#menu-drawer .list-menu__item,
#menu-drawer button {
  color: rgba(255, 248, 240, 0.9) !important;
}

#menu-drawer [aria-current="page"],
#menu-drawer .menu-drawer__menu-item--active {
  color: #fff !important;
  font-weight: 600 !important;
}

#menu-drawer a:hover,
#menu-drawer .menu-drawer__menu-item:hover {
  color: #fff !important;
}

#menu-drawer .menu-drawer__menu li {
  border-bottom-color: rgba(255, 248, 240, 0.1) !important;
}

#menu-drawer .menu-drawer__close-button {
  color: rgba(255, 248, 240, 0.8) !important;
}

#menu-drawer .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.55) !important;
  stroke: rgba(255, 248, 240, 0.55) !important;
}

/* CLAUDE CODE: Login CTA at bottom of drawer */
#menu-drawer .menu-drawer__login-cta {
  border-top-color: rgba(255, 248, 240, 0.1) !important;
}

#menu-drawer .menu-drawer__login-btn {
  background: rgba(255, 248, 240, 0.1) !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.28) !important;
  color: rgba(255, 248, 240, 0.92) !important;
  border-radius: 999px !important;
}

#menu-drawer .menu-drawer__login-btn:hover {
  background: rgba(255, 248, 240, 0.2) !important;
  color: #fff !important;
}

/* ============================================================
   Claude Code: V4 MASTER FIX — All 4 reported issues
   Applied to latest theme 22APR2026-0301pm
   ============================================================ */

/* ── FIX 1 & 2: DESKTOP DRAWER — HEADER SHOWS THROUGH ────────
   Claude Code: The header-wrapper has z-index:30 globally which makes it
   sit above the desktop drawer panel. When the nav drawer opens on desktop,
   lower the header z-index below the drawer (which sits at z-index:100+)
   so the drawer cleanly covers the header without the sticky bar bleeding
   through the overlay. ---------------------------------------- */

@media screen and (min-width: 990px) {
  /* Claude Code: When desktop drawer is open, drop header-wrapper below the
     drawer z-index so it doesn't bleed through the overlay panel. */
  body:has(#Details-menu-drawer-container[open]) .shopify-section-group-header-group,
  body:has(#Details-menu-drawer-container[open]) .header-wrapper,
  body:has(#Details-menu-drawer-container[open]) sticky-header {
    z-index: 10 !important;
  }

  /* Claude Code: Ensure the drawer itself sits well above the header on desktop. */
  #Details-menu-drawer-container[open] #menu-drawer {
    z-index: 200 !important;
  }
}

/* ── FIX 2: DESKTOP DRAWER — UNIFORM HOVER EFFECT ─────────────
   Claude Code: Dawn's default hover on drawer links only changes text colour.
   Aneka's drawer is maroon-background so hover should show a subtle full-row
   highlight (cream bg tint) for a consistent, premium feel. Previous CSS had
   multiple conflicting hover blocks producing uneven highlighting. This block
   is the single authoritative rule — specificity beats all prior rules. */

#menu-drawer .menu-drawer__menu > li > a:hover,
#menu-drawer .menu-drawer__menu > li > summary:hover,
#menu-drawer .menu-drawer__menu-item:hover,
#menu-drawer .menu-drawer__menu-item.link:hover {
  /* Claude Code: Subtle cream wash on hover — visible on maroon bg without
     being harsh. Text brightens to full white to confirm interactive state. */
  background: rgba(255, 248, 240, 0.07) !important;
  color: #fff !important;
  /* Claude Code: Padding already set by Dawn; extend the bg across full row
     using negative margin compensation so highlight reaches edge-to-edge. */
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

/* Claude Code: Active (current page) link — slightly stronger cream wash
   so it's distinguishable from the plain hover state. */
#menu-drawer .menu-drawer__menu-item--active,
#menu-drawer [aria-current="page"] {
  background: rgba(255, 248, 240, 0.1) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Claude Code: Remove the per-item bottom border on the last list item in
   the desktop drawer — the drawer already has a bottom padding so the last
   divider line looks like a double border. */
#menu-drawer .menu-drawer__menu > li:last-child > a,
#menu-drawer .menu-drawer__menu > li:last-child > summary {
  border-bottom: none !important;
}

/* ── FIX 3: HOME NAV PANEL + FILTER PANEL — UNIFIED STYLING ───
   Claude Code: Both panels use the .menu-drawer / .mobile-facets colour scheme
   (maroon bg, gold text). The nav drawer uses color-scheme-1 which was adding
   a light background. Unify both panels so they share the same maroon palette,
   gold links, and consistent divider lines. */

/* Claude Code: Ensure the mobile nav drawer background matches the filter
   panel — both should be the same maroon. Previously nav drawer used Dawn's
   scheme-1 (light cream) and filter used a custom maroon. */
#menu-drawer {
  background: #4d0621 !important;
  --gradient-background: #4d0621 !important;
  --color-background: 77, 6, 33 !important;
}

/* Claude Code: Nav drawer links — match the gold-on-maroon treatment used
   in the filter panel so both panels feel like the same design language. */
#menu-drawer .menu-drawer__menu-item,
#menu-drawer .menu-drawer__menu-item.link,
#menu-drawer a.list-menu__item {
  color: rgba(212, 175, 55, 0.92) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12rem !important;
  text-transform: uppercase !important;
}

/* Claude Code: Nav drawer divider lines — use the same gold opacity as filter
   panel separators so both panels have identical rhythm. */
#menu-drawer .menu-drawer__menu > li {
  border-bottom: 0.1rem solid rgba(212, 175, 55, 0.22) !important;
}

/* Claude Code: Login/account CTA button — maroon-on-gold feel, same as the
   filter panel's Apply button. Consistent between both panel types. */
#menu-drawer .menu-drawer__login-btn {
  background: rgba(212, 175, 55, 0.12) !important;
  border: 0.1rem solid rgba(212, 175, 55, 0.45) !important;
  color: rgba(212, 175, 55, 0.95) !important;
  border-radius: 999px !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.1rem !important;
  text-transform: uppercase !important;
}

#menu-drawer .menu-drawer__login-btn:hover {
  /* Claude Code: Hover — slightly brighter gold tint matches filter chip hover. */
  background: rgba(212, 175, 55, 0.22) !important;
  color: #fff !important;
}

/* Claude Code: Close X button colour — gold to match filter panel close X. */
#menu-drawer .header__icon--menu .icon-close,
.menu-drawer-container[open] .header__icon--menu svg {
  color: rgba(212, 175, 55, 0.85) !important;
  stroke: rgba(212, 175, 55, 0.85) !important;
}

/* Claude Code: Nav drawer inner container padding — match filter panel spacing
   so the two panels feel the same width and internal rhythm. */
#menu-drawer .menu-drawer__inner-container {
  padding-top: 1.6rem !important;
}

/* ── FIX 4: FILTER CHIPS × BUTTON — WORKING REMOVE + NO DUPLICATE LINES ──
   Claude Code: The aneka-filter-chips are rendered inside .mobile-facets__wrapper
   but OUTSIDE the <facet-filters-form> element. FacetRemove.closeFilter() calls
   this.closest('facet-filters-form') which returns null, so it falls back to
   document.querySelector('facet-filters-form') — this finds the desktop form
   (#FacetFiltersForm) not the mobile form (#FacetFiltersFormMobile).
   Fix: use data-attribute on each chip anchor so the JS can find the right form.
   Since we can't change facets.js easily, we add a delegated click listener
   in aneka-storefront.js that intercepts chip clicks and calls the mobile form.
   This CSS block also removes the duplicate gold divider lines. */

/* Claude Code: Remove the extra top border that was rendering above the
   .aneka-filter-chips container — it was duplicating the header's bottom border
   causing two yellow lines to appear between the FILTER heading and the chips. */
.mobile-facets__wrapper .aneka-filter-chips {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 1.2rem !important;
}

/* Claude Code: Remove double bottom border — .aneka-filter-chips already has
   border-bottom; the .mobile-facets__main that follows also has a top border
   in component-facets.css. Cancel the top border on the main wrapper when
   chips are present so only one divider line appears between them. */
.mobile-facets__wrapper .aneka-filter-chips + .mobile-facets__main {
  border-top: none !important;
}

/* Claude Code: Also cancel any ::before pseudo-element borders on the
   mobile-facets__main that some Dawn versions add as a divider. */
.mobile-facets__wrapper .aneka-filter-chips + .mobile-facets__main::before {
  display: none !important;
  border: none !important;
}

/* Claude Code: Chip hover — more obvious on the dark background so the
   user clearly sees each chip is clickable/tappable. */
.aneka-filter-chip {
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(212, 175, 55, 0.15) !important;
}

.aneka-filter-chip:active {
  background: rgba(212, 175, 55, 0.25) !important;
  transform: scale(0.97) !important;
}

/* ============================================================
   Claude Code: V5 MASTER FIX
   1. Filter chip × CSS cleanup (no yellow styling, no duplicate lines)
   2. Nav drawer full redesign — cream text on maroon, no yellow
   3. Sign-in icon hidden on mobile header
   ============================================================ */

/* ── FIX 1: FILTER DRAWER — REMOVE YELLOW CHIP STYLING + DUPLICATE LINES ──
   Claude Code: Replace the gold/yellow chip aesthetic inside the filter drawer
   with a clean cream-on-maroon design that matches the rest of the dark panel.
   Also remove the extra horizontal lines that appear between the chips row
   and the filter category list below. */

/* Claude Code: Chips container — no extra border-bottom to avoid the duplicate
   gold line between chips and the PRICE/COLOR/AVAILABILITY list below. */
.mobile-facets__wrapper .aneka-filter-chips {
  border-bottom: none !important;
  padding: 1.2rem 2rem 0.8rem !important;
  gap: 0.6rem !important;
}

/* Claude Code: Individual chip — cream text, subtle cream border, no yellow.
   Matches the cream-on-maroon aesthetic of the rest of the filter panel. */
.aneka-filter-chip {
  background: rgba(255, 248, 240, 0.08) !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.35) !important;
  color: rgba(255, 248, 240, 0.92) !important;
  border-radius: 0.3rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08rem !important;
  text-transform: uppercase !important;
  padding: 0.45rem 1rem !important;
  gap: 0.7rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Claude Code: Hover state for chips — slightly brighter cream background. */
.aneka-filter-chip:hover {
  background: rgba(255, 248, 240, 0.16) !important;
  color: #fff !important;
  border-color: rgba(255, 248, 240, 0.55) !important;
}

/* Claude Code: Active/tap state for chips on mobile. */
.aneka-filter-chip:active {
  background: rgba(255, 248, 240, 0.22) !important;
  transform: scale(0.97) !important;
}

/* Claude Code: The × remove marker inside each chip — slightly muted so it
   reads as a secondary element, not competing with the label text. */
.aneka-filter-chip__remove {
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  opacity: 0.7 !important;
  line-height: 1 !important;
  margin-left: 0.1rem !important;
}

/* Claude Code: Remove the top border from the filter list that follows chips —
   the chips container's bottom is already enough visual separation. */
.mobile-facets__wrapper .aneka-filter-chips + .mobile-facets__main,
.mobile-facets__wrapper .aneka-filter-chips ~ #FacetsWrapperMobile {
  border-top: none !important;
  margin-top: 0 !important;
}

/* Claude Code: Remove ALL duplicate gold/yellow divider lines inside the
   filter drawer. The only acceptable dividers are the ones between each
   PRICE / COLOR / AVAILABILITY row — set by .mobile-facets__summary border. */
.mobile-facets__wrapper .aneka-filter-chips::after,
.mobile-facets__wrapper .aneka-filter-chips::before {
  display: none !important;
}

/* ── FIX 3: NAV DRAWER REDESIGN — CREAM ON MAROON, NO YELLOW ──────────────
   Claude Code: Replace all gold/yellow text in the nav drawer with a clean
   cream palette that reads better on the dark maroon background.
   Also remove conflicting rules from previous iterations. */

/* Claude Code: Nav drawer background — same deep maroon as the filter panel. */
#menu-drawer,
#menu-drawer .menu-drawer__navigation-container {
  background: #4d0621 !important;
  background: linear-gradient(160deg, #5a0a27 0%, #3d0518 100%) !important;
}

/* Claude Code: All nav links — warm cream, not yellow/gold.
   Uses maximum specificity to beat previous conflicting rules. */
#menu-drawer .menu-drawer__menu-item,
#menu-drawer .menu-drawer__menu-item.link,
#menu-drawer .menu-drawer__menu-item.link--text,
#menu-drawer a.list-menu__item,
#menu-drawer a {
  color: rgba(255, 248, 240, 0.88) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14rem !important;
  text-transform: uppercase !important;
  border-radius: 0 !important; /* Claude Code: Remove pill border-radius — flat rows look cleaner */
  margin: 0 !important; /* Claude Code: Remove per-item margin so rows go edge to edge */
  padding: 1.4rem 2.4rem !important;
}

/* Claude Code: Divider lines between nav rows — very subtle cream, matching
   the filter panel row separator style. No gold/yellow. */
#menu-drawer .menu-drawer__menu > li {
  border-bottom: 0.1rem solid rgba(255, 248, 240, 0.1) !important;
}

/* Claude Code: Remove the bottom border on the last nav item to avoid a
   double line at the bottom of the list before the utility area. */
#menu-drawer .menu-drawer__menu > li:last-child {
  border-bottom: none !important;
}

/* Claude Code: Active/current page link — slightly brighter cream + left accent bar. */
#menu-drawer .menu-drawer__menu-item--active,
#menu-drawer [aria-current='page'] {
  color: #fff !important;
  font-weight: 600 !important;
  background: rgba(255, 248, 240, 0.07) !important;
  border-left: 0.3rem solid rgba(255, 248, 240, 0.5) !important;
  padding-left: 2.1rem !important; /* Claude Code: Compensate for the 3px border so text stays aligned */
}

/* Claude Code: Hover state — gentle cream wash across the full row width. */
#menu-drawer .menu-drawer__menu-item:hover,
#menu-drawer .menu-drawer__menu-item.link:hover,
#menu-drawer a.list-menu__item:hover {
  background: rgba(255, 248, 240, 0.07) !important;
  color: #fff !important;
}

/* Claude Code: SVG arrow icons in the drawer — cream, not gold. */
#menu-drawer .svg-wrapper svg,
#menu-drawer .menu-drawer__menu-item > .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.45) !important;
  stroke: rgba(255, 248, 240, 0.45) !important;
}

/* Claude Code: Utility area at the bottom of the drawer — slightly darker
   maroon to visually separate the login CTA from the nav links. */
#menu-drawer .menu-drawer__utility-links {
  background: rgba(0, 0, 0, 0.15) !important;
  border-top: 0.1rem solid rgba(255, 248, 240, 0.1) !important;
  padding: 2rem 2.4rem !important;
}

/* Claude Code: Login/account CTA — cream outline pill, not gold.
   Clean and consistent with the cream palette. */
#menu-drawer .menu-drawer__login-btn {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  padding: 1.2rem 2rem !important;
  border-radius: 999px !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.35) !important;
  background: rgba(255, 248, 240, 0.06) !important;
  color: rgba(255, 248, 240, 0.88) !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}

/* Claude Code: Login CTA hover — slightly brighter fill. */
#menu-drawer .menu-drawer__login-btn:hover {
  background: rgba(255, 248, 240, 0.12) !important;
  color: #fff !important;
  border-color: rgba(255, 248, 240, 0.5) !important;
}

/* Claude Code: Login CTA icon — match the cream text colour. */
#menu-drawer .menu-drawer__login-btn .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.7) !important;
  stroke: rgba(255, 248, 240, 0.7) !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
}

/* ── FIX 5: MOBILE HEADER — HIDE SIGN-IN ACCOUNT ICON ─────────────────────
   Claude Code: The account icon is already hidden on mobile via small-hide
   when a menu is set. This rule makes it unconditionally hidden on all phones
   regardless of menu presence — the Login action lives inside the nav drawer. */
@media screen and (max-width: 749px) {
  .header__icon--account {
    display: none !important;
  }
}

/* ============================================================
   Claude Code: V6 FINAL — Unified cream-on-maroon palette for
   BOTH the nav drawer and the filter drawer. No gold/yellow anywhere.
   All prior conflicting gold rules are overridden here with
   higher specificity selectors.
   ============================================================ */

/* ── NAV DRAWER: CREAM ON MAROON ────────────────────────────── */

/* Claude Code: Single source of truth for nav drawer background.
   Overrides all prior .menu-drawer background rules in this file. */
#menu-drawer,
#menu-drawer .menu-drawer__navigation-container,
#menu-drawer .menu-drawer__inner-submenu {
  background: #4a0a20 !important;
  background-image: none !important;
}

/* Claude Code: Nav links — warm cream, not gold. Flat rows edge-to-edge,
   no pill border-radius, no per-item margin, consistent uppercase style. */
#menu-drawer .menu-drawer__menu-item,
#menu-drawer .menu-drawer__menu-item.link,
#menu-drawer .menu-drawer__menu-item.link--text,
#menu-drawer a.list-menu__item,
#menu-drawer .menu-drawer__menu a {
  color: rgba(255, 248, 240, 0.90) !important;
  font-size: 1.45rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15rem !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 1.5rem 2.4rem !important;
  background: transparent !important;
  text-decoration: none !important;
  display: block !important;
}

/* Claude Code: Row dividers — subtle cream at low opacity, identical to
   the filter panel row separators. No gold. */
#menu-drawer .menu-drawer__menu > li {
  border-bottom: 0.1rem solid rgba(255, 248, 240, 0.1) !important;
  margin: 0 !important;
}
#menu-drawer .menu-drawer__menu > li:last-child {
  border-bottom: none !important;
}

/* Claude Code: Hover row — cream wash across full row width. */
#menu-drawer .menu-drawer__menu-item:hover,
#menu-drawer .menu-drawer__menu a:hover {
  background: rgba(255, 248, 240, 0.07) !important;
  color: #fff !important;
}

/* Claude Code: Active / current page — brighter cream, left border accent. */
#menu-drawer .menu-drawer__menu-item--active,
#menu-drawer [aria-current='page'] {
  color: #fff !important;
  font-weight: 500 !important;
  background: rgba(255, 248, 240, 0.08) !important;
  border-left: 0.25rem solid rgba(255, 248, 240, 0.55) !important;
  padding-left: 2.15rem !important;
}

/* Claude Code: Arrow/caret SVG icons in drawer rows — cream, not gold. */
#menu-drawer .svg-wrapper svg,
#menu-drawer .menu-drawer__menu-item .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.4) !important;
  stroke: rgba(255, 248, 240, 0.4) !important;
}

/* Claude Code: Utility / login section at bottom of drawer. */
#menu-drawer .menu-drawer__utility-links {
  background: rgba(0, 0, 0, 0.18) !important;
  border-top: 0.1rem solid rgba(255, 248, 240, 0.1) !important;
  padding: 2rem 2.4rem 3rem !important;
}

/* Claude Code: Login CTA — cream outline pill. Clean and readable. */
#menu-drawer .menu-drawer__login-btn {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  padding: 1.2rem 2rem !important;
  border-radius: 999px !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.3) !important;
  background: rgba(255, 248, 240, 0.05) !important;
  color: rgba(255, 248, 240, 0.85) !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
}
#menu-drawer .menu-drawer__login-btn:hover {
  background: rgba(255, 248, 240, 0.12) !important;
  color: #fff !important;
  border-color: rgba(255, 248, 240, 0.45) !important;
}
#menu-drawer .menu-drawer__login-btn .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.6) !important;
  stroke: rgba(255, 248, 240, 0.6) !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
}

/* ── FILTER DRAWER CHIPS: CREAM ON MAROON, NO YELLOW ────────── */

/* Claude Code: Filter chip container — no extra borders, just spacing.
   Removes both the yellow bottom border and the duplicate top border
   on the filter list that follows, eliminating the extra yellow lines. */
.mobile-facets__wrapper .aneka-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  padding: 1.2rem 2rem 1rem !important;
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 !important;
}

/* Claude Code: Remove the extra border on the filter list that appears
   immediately after the chips — prevents the double-line gap. */
.mobile-facets__wrapper .aneka-filter-chips + div,
.mobile-facets__wrapper .aneka-filter-chips + .mobile-facets__main,
.mobile-facets__wrapper .aneka-filter-chips ~ #FacetsWrapperMobile {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Claude Code: Individual filter chip — cream text, cream border, no yellow.
   Matches the nav drawer's cream-on-maroon language. */
.aneka-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 0.3rem !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.35) !important;
  background: rgba(255, 248, 240, 0.07) !important;
  color: rgba(255, 248, 240, 0.88) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Claude Code: Chip hover. */
.aneka-filter-chip:hover {
  background: rgba(255, 248, 240, 0.14) !important;
  border-color: rgba(255, 248, 240, 0.5) !important;
  color: #fff !important;
}

/* Claude Code: Chip tap/active on mobile. */
.aneka-filter-chip:active {
  background: rgba(255, 248, 240, 0.2) !important;
  transform: scale(0.97) !important;
}

/* Claude Code: The × marker inside the chip — slightly muted. */
.aneka-filter-chip__remove {
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  opacity: 0.65 !important;
  line-height: 1 !important;
}

/* ── MOBILE HEADER: ACCOUNT ICON ALWAYS HIDDEN ───────────────── */

/* Claude Code: Account/sign-in icon hidden on all mobile viewports.
   Login is accessible via the nav drawer's Login CTA button. */
@media screen and (max-width: 749px) {
  .header__icon.header__icon--account {
    display: none !important;
  }
}


/* ============================================================
   Claude Code: ISSUE FIX BATCH v2 — Cart icon size, mobile header,
   filter panel dark burgundy
   Applied: 2026-04-22
   ============================================================ */

/* ── ISSUE 1 FIX: Cart icon size — SVG viewBox mismatch ──────────────────
   Claude Code: The cart SVG (icon-cart.svg / icon-cart-empty.svg) has
   viewBox="0 0 40 40" while search (18×19) and heart (20×20) have smaller
   viewBoxes. When all icons are rendered at 20×20px the cart artwork is
   drawn at half the visual weight because it is specified in a 40-unit
   coordinate space. Fix: render cart SVG at 36px so its perceived stroke
   weight and visual size match the other icons. Applied to both desktop
   and mobile with !important to override all earlier 20px rules. */

.header__icon--cart .svg-wrapper svg,
.header__icon--cart svg {
  width: 36px !important;
  height: 36px !important;
  overflow: visible !important;
  display: block !important;
}

/* Claude Code: ISSUE 1 — same fix scoped to mobile breakpoint so the earlier
   mobile-specific 20px rule (inside @media max-width:749px in this file)
   is also overridden. Must be outside a media query at file level to win
   the cascade, then mirrored inside the mobile block below. */
@media (max-width: 749px) {
  .header__icon--cart .svg-wrapper svg,
  .header__icon--cart svg {
    width: 36px !important;
    height: 36px !important;
    overflow: visible !important;
    display: block !important;
  }
}

@media (min-width: 750px) {
  .header__icon--cart .svg-wrapper svg,
  .header__icon--cart svg {
    width: 36px !important;
    height: 36px !important;
    overflow: visible !important;
    display: block !important;
  }
}

/* ── ISSUE 2 FIX: Mobile header — icon sizes consistent, logo centred ─────
   Claude Code: On mobile the icons were inconsistently sized and the logo
   was drifting off-centre. The fix enforces:
   - All non-cart SVGs at 22px (slightly larger than before for readability)
   - Cart SVG stays at 36px (viewBox correction above)
   - Logo always centred in the 3-column header grid (hamburger | logo | icons)
   - Consistent 6px gap between icons
   - 44×44 touch targets on every icon */
@media (max-width: 749px) {

  /* Claude Code: ISSUE 2 — All non-cart header SVGs at 22px for better
     readability on mobile, with overflow:visible to avoid path clipping. */
  .header__icons .header__icon:not(.header__icon--cart) svg {
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Claude Code: ISSUE 2 — Every header icon: 44×44 touch target, flex-centred.
     padding:0 removes any offset that shifts the SVG off-centre inside the tap area. */
  .header__icons .header__icon {
    width: 4.4rem !important;
    height: 4.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Claude Code: ISSUE 2 — Tighten icon gap on mobile to 4px so the icons
     group is visually compact and the logo reads as clearly centred. */
  .header__icons {
    gap: 4px !important;
  }

  /* Claude Code: ISSUE 2 — Force header into strict 3-column grid so the
     logo column (1fr) is always mathematically centred between the
     hamburger (auto) and icons (auto) columns. */
  .header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  /* Claude Code: ISSUE 2 — Logo cell fills the middle 1fr column,
     content centred horizontally. */
  .header__heading {
    grid-column: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Claude Code: ISSUE 2 — Hamburger drawer in leftmost cell, no extra margin. */
  header-drawer {
    grid-column: 1 !important;
    margin-left: 0 !important;
  }

  /* Claude Code: ISSUE 2 — Icons group in rightmost cell, right-aligned. */
  .header__icons {
    grid-column: 3 !important;
    justify-content: flex-end !important;
  }
}


/* ============================================================
   Claude Code: FINAL FIX BATCH — All 4 issues resolved cleanly
   Applied: 2026-04-22
   Issues addressed:
   1. Sort pill dark outline + "Best selling" text-chevron gap
   2. Filter drawer yellow gold → maroon/cream color scheme
   3. Sign-in button hidden on mobile (belt-and-suspenders)
   4. Header logo centred, uniform icon spacing on mobile
   ============================================================ */

/* ── ISSUE 1 FIX: Sort pill — remove ALL dark outlines, center text properly ──
   Claude Code: The sort pill was showing a dark/black outline because multiple
   overlapping CSS blocks in template-collection.css had conflicting overflow,
   clip-path, and box-shadow rules that compounded into a visible ring.
   Also, text-align:center + asymmetric padding pushed "Best selling" away from
   the chevron visually. Fix: clean consolidated rule with no overflow tricks,
   explicit border only (no box-shadow), and symmetric padding so text sits
   naturally left-of-chevron like the Filter pill text. */
@media screen and (max-width: 749px) {

  /* Claude Code: ISSUE 1 FIX — Sort pill outer wrapper: single clean maroon border,
     no overflow:hidden (which caused the inner seam), no clip-path, no box-shadow.
     The border-radius alone is enough to shape the pill correctly. */
  .aneka-mobile-sort .select {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 4.8rem !important;
    min-height: 4.8rem !important;
    border: 0.15rem solid #6b0f2b !important;
    border-radius: 999px !important;
    background: #fff !important;
    overflow: visible !important;
    clip-path: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Claude Code: ISSUE 1 FIX — Native <select>: completely transparent/borderless
     inside the pill wrapper. Padding: left 1.8rem for breathing room, right 3.6rem
     to leave space for the chevron, matching the Filter pill's text position.
     text-align:left so text does NOT drift to center — keeps it flush-left like
     the Filter pill label, eliminating the text-to-chevron visual gap. */
  .aneka-mobile-sort__select,
  .aneka-mobile-sort .select__select {
    width: 100% !important;
    height: 4.8rem !important;
    min-height: 4.8rem !important;
    padding: 0 3.6rem 0 1.8rem !important;
    line-height: 4.8rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6b0f2b !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Claude Code: ISSUE 1 FIX — text-align:left (not center) so the selected
       option text sits near the left edge, matching the Filter pill's icon+label
       layout. This eliminates the large gap between text and chevron. */
    text-align: left !important;
    text-align-last: left !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background-image: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Claude Code: ISSUE 1 FIX — Strip ALL focus/active/hover outlines so no
     browser-native ring ever appears as a dark stroke around the pill. */
  .aneka-mobile-sort__select:hover,
  .aneka-mobile-sort__select:active,
  .aneka-mobile-sort__select:focus,
  .aneka-mobile-sort__select:focus-visible,
  .aneka-mobile-sort .select__select:hover,
  .aneka-mobile-sort .select__select:active,
  .aneka-mobile-sort .select__select:focus,
  .aneka-mobile-sort .select__select:focus-visible,
  .aneka-mobile-sort .select:focus-within,
  .aneka-mobile-sort .select:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: #6b0f2b !important;
  }

  /* Claude Code: ISSUE 1 FIX — Chevron SVG: right edge of pill, vertically centred. */
  .aneka-mobile-sort .svg-wrapper {
    position: absolute !important;
    right: 1.4rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.6rem !important;
    height: 1.6rem !important;
    pointer-events: none !important;
    color: #6b0f2b !important;
    z-index: 2 !important;
  }

  /* Claude Code: ISSUE 1 FIX — Chevron SVG itself: maroon stroke, no fill. */
  .aneka-mobile-sort .svg-wrapper svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    stroke: #6b0f2b !important;
    fill: none !important;
    display: block !important;
  }
}

/* ── ISSUE 2 FIX: Filter drawer — remove ALL yellow/gold, use maroon+cream ──
   Claude Code: Multiple places in base.css used rgba(212,175,55) gold for the
   filter drawer PRICE/COLOR/AVAILABILITY row text, arrow icons, chip borders,
   and the FILTER heading. This fix replaces every gold instance with the same
   maroon-background + warm-cream-text treatment used on the homepage nav drawer,
   so the filter panel looks cohesive with the rest of the site. */

/* Claude Code: ISSUE 2 FIX — Filter summary rows (PRICE / COLOR / AVAILABILITY):
   use warm cream text, no gold. Border uses cream at low opacity, not gold. */
.mobile-facets__summary {
  padding: 1.4rem 2rem !important;
  border-bottom: 0.1rem solid rgba(255, 248, 240, 0.12) !important;
}

.mobile-facets__summary > div > span:first-child {
  color: rgba(255, 248, 240, 0.88) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18rem !important;
  text-transform: uppercase !important;
}

/* Claude Code: ISSUE 2 FIX — Arrow icon (→) in each summary row:
   was gold rgba(212,175,55) — now matches the cream text color. */
.mobile-facets__arrow .svg-wrapper svg,
.mobile-facets__arrow svg {
  color: rgba(255, 248, 240, 0.7) !important;
  stroke: rgba(255, 248, 240, 0.7) !important;
}

/* Claude Code: ISSUE 2 FIX — FILTER heading at top of drawer:
   was gold — now warm cream, consistent with nav drawer heading style. */
.mobile-facets__heading {
  color: rgba(255, 248, 240, 0.95) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22rem !important;
  text-transform: uppercase !important;
}

/* Claude Code: ISSUE 2 FIX — Filter header X close button:
   was inheriting gold — now cream. */
.mobile-facets__header .mobile-facets__close .svg-wrapper svg,
.mobile-facets__header .svg-wrapper svg {
  color: rgba(255, 248, 240, 0.75) !important;
  stroke: rgba(255, 248, 240, 0.75) !important;
}

/* Claude Code: ISSUE 2 FIX — Back arrow button in sub-panel (e.g. "← PRICE"):
   was gold — now cream, consistent with the row text above. */
.mobile-facets__close-button {
  color: rgba(255, 248, 240, 0.88) !important;
  border-bottom: 0.1rem solid rgba(255, 248, 240, 0.12) !important;
}

.mobile-facets__close-button .icon-arrow svg,
.mobile-facets__close-button svg {
  color: rgba(255, 248, 240, 0.75) !important;
  stroke: rgba(255, 248, 240, 0.75) !important;
}

/* Claude Code: ISSUE 2 FIX — Checkbox accent color: was gold, now cream-white
   so checked state is clearly visible on the dark maroon background. */
.mobile-facets__checkbox {
  accent-color: rgba(255, 248, 240, 0.95) !important;
}

/* Claude Code: ISSUE 2 FIX — Applied filter chips at top of drawer:
   border and background were gold-tinted — now use maroon/cream palette.
   Chip border: cream at low opacity. Background: white at very low opacity
   (a subtle lighter maroon tint). */
.aneka-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
  padding: 1.2rem 2rem 0.8rem !important;
  border-bottom: 0.1rem solid rgba(255, 248, 240, 0.12) !important;
}

.aneka-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 999px !important;
  border: 0.1rem solid rgba(255, 248, 240, 0.45) !important;
  background: rgba(255, 248, 240, 0.1) !important;
  color: rgba(255, 248, 240, 0.9) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1rem !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
}

.aneka-filter-chip:hover {
  background: rgba(255, 248, 240, 0.2) !important;
  border-color: rgba(255, 248, 240, 0.7) !important;
  color: #fff !important;
}

.aneka-filter-chip__remove {
  font-size: 1rem !important;
  opacity: 0.65 !important;
  font-style: normal !important;
}

/* ── ISSUE 3 FIX: Sign-in button — unconditionally hidden on mobile ──────────
   Claude Code: The account icon has class "medium-hide large-up-show small-hide"
   in header.liquid, but Dawn's CSS only applies small-hide when certain conditions
   are met. This belt-and-suspenders rule ensures it is ALWAYS hidden on mobile
   regardless of page type, menu state, or class cascade order. */
@media screen and (max-width: 989px) {
  /* Claude Code: ISSUE 3 FIX — Account/sign-in icon: never shown on mobile or
     tablet. The hamburger nav drawer provides the login link instead. */
  .header__icon--account {
    display: none !important;
  }
}

/* ── ISSUE 4 FIX: Mobile header — logo centred, uniform icon spacing ─────────
   Claude Code: With the account icon removed the header grid had an empty slot
   that could make the logo appear off-centre. This enforces the strict 3-column
   layout [hamburger | logo | icons] so the middle 1fr column is always exactly
   centred, and gives all icons identical 4.4rem touch targets with 6px gap. */
@media screen and (max-width: 749px) {

  /* Claude Code: ISSUE 4 FIX — Force header into a 3-column grid.
     "auto 1fr auto" means both outer columns shrink to their content width
     so the middle column is always the exact mathematical centre of the header. */
  .header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  /* Claude Code: ISSUE 4 FIX — Hamburger drawer: first column, no extra margin. */
  header-drawer {
    grid-column: 1 !important;
    margin-left: 0 !important;
  }

  /* Claude Code: ISSUE 4 FIX — Logo heading: fills middle 1fr, content centred.
     Both h1 and the link element are flex-centred so no child can drift left. */
  .header__heading {
    grid-column: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Claude Code: ISSUE 4 FIX — Icons group: last column, right-aligned,
     uniform 6px gap between search, wishlist, and cart icons. */
  .header__icons {
    grid-column: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* Claude Code: ISSUE 4 FIX — Every icon: identical 44×44 touch target,
     flex-centred so the SVG artwork sits exactly in the middle of the tap area.
     overflow:visible ensures no SVG path is clipped by the container box. */
  .header__icons .header__icon {
    width: 4.4rem !important;
    height: 4.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  /* Claude Code: ISSUE 4 FIX — Search and wishlist SVGs at 22px.
     Cart SVG stays at 36px (its larger viewBox is corrected separately above). */
  .header__icons .header__icon:not(.header__icon--cart) svg {
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    display: block !important;
  }
}
/* END Claude Code: FINAL FIX BATCH */

/* ============================================================
   ANEKA 22APR26 — Mobile header: account icon hide + layout fix
   
   Root cause of icon still showing: .header__icons .header__icon
   sets display:flex with specificity 0,2,0. The earlier hide rules
   used .header__icon--account with specificity 0,1,0 — LOWER than
   the layout rule, so the layout rule won even though it came first.
   
   Fix: use .header__icons .header__icon--account (specificity 0,2,0)
   which matches the layout rule's specificity — and because it comes
   LATER in the file, it wins the cascade.
   ============================================================ */
@media screen and (max-width: 989px) {
  /* ANEKA 22APR26: Higher-specificity hide — matches the specificity of
     the .header__icons .header__icon display:flex rule above so this
     display:none wins via source-order (last rule at equal specificity). */
  .header__icons .header__icon--account {
    display: none !important;
  }
}
/* END ANEKA 22APR26 mobile header fix */

/* ============================================================
   ANEKA 22APR26 ROUND-4 — Mobile header: guaranteed true centre

   Previous approaches failed:
   - "auto 1fr auto": logo drifts left when hamburger width ≠ icons width
   - Absolute left:50%: fused with search icon on homepage transparent header

   Definitive fix: "1fr auto 1fr" grid.
     col 1 (1fr) = hamburger, start-justified
     col 2 (auto) = logo — always at exact screen centre because col1 = col3
     col 3 (1fr) = icons, end-justified (touching the right margin)
   ============================================================ */
@media screen and (max-width: 989px) {
  .header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    /* Reset position:relative set by ROUND-2 */
    position: static !important;
  }

  header-drawer {
    grid-column: 1 !important;
    justify-self: start !important;
    flex: unset !important;
    margin-right: 0 !important;
  }

  .header__heading {
    grid-column: 2 !important;
    /* Reset absolute-position from ROUND-2 */
    position: static !important;
    left: auto !important;
    transform: none !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Icons at the right edge of col 3.  8px padding keeps cart off the edge. */
  .header__icons {
    grid-column: 3 !important;
    justify-self: end !important;
    flex: unset !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-right: 8px !important;
  }
}
/* END ANEKA 22APR26 ROUND-4 mobile header */

/* ============================================================
   ANEKA 22APR26 ROUND-5 — Mobile header: icons tight to right edge

   ROOT CAUSE: .page-width adds padding:0 1.5rem on mobile, which already
   gives the header a 24px inset from the viewport edge. On top of that,
   .header__icons has padding-right:0.8rem (base CSS) and our R4 set 8px,
   adding another ~8px of internal right padding, pushing the cart icon
   ~32px from the edge. Combined with the 1fr auto 1fr grid from R4
   (correct for centering), the icons looked left-drifted vs the reference.

   FIX: zero the internal right padding on the icons group so cart sits at
   the natural page-width boundary (24px from viewport). Also ensure
   justify-content:flex-end is explicit so the icon flex items pack right
   even if the grid cell is wider than the icons.
   ============================================================ */
@media screen and (max-width: 989px) {
  .header__icons {
    /* Pack icons to the right edge of their grid cell */
    justify-content: flex-end !important;
    /* Remove internal right padding — the page-width 1.5rem already gives
       enough breathing room from the viewport edge */
    padding-right: 0 !important;
    /* Keep the uniform gap between individual icons */
    gap: 8px !important;
  }
}
/* END ANEKA 22APR26 ROUND-5 mobile header */

/* ============================================================
   Fix 25APR26 R2: reCAPTCHA badge — belt-and-suspenders hide.
   The primary hide is the inline <style> in theme.liquid <head>
   which runs before any external CSS. This rule covers any edge
   case where the inline style isn't applied (e.g. cached HTML).
   ============================================================ */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   Fix 25APR26 R2: Wishlist card — X remove button + Add to cart
   ============================================================ */
/* Wrapper provides the positioning context for the X button */
.aneka-storefront-card__media-wrap {
  position: relative;
}

/* Small circular X button in top-right of wishlist card image.
   Fix 25APR26 R3: width/height/position use !important to override the mobile
   .aneka-storefront-card__remove { width:100% } rule that made this button
   span the full card width instead of appearing as a small circle overlay.
   Fix 25APR26 R6: Changed background from near-white rgba(255,255,255,0.92) to
   dark semi-transparent rgba(0,0,0,0.55) with white icon — was barely visible
   on light-coloured product card images. */
.aneka-storefront-card__remove-x {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 2.8rem !important;
  height: 2.8rem !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #fff;
  transition: background 0.2s ease;
  padding: 0 !important;
  flex-direction: row !important;
}
.aneka-storefront-card__remove-x:hover {
  background: #6b0f2b;
}
.aneka-storefront-card__remove-x svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  display: block;
}

/* Add to cart button on wishlist page cards */
.aneka-storefront-card__atc {
  width: 100%;
  padding: 1rem 1.4rem;
  background: #6b0f2b;
  color: #fff !important;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
  text-align: center;
  display: block;
}
.aneka-storefront-card__atc:hover:not(:disabled) {
  background: #8b1535;
}
.aneka-storefront-card__atc:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Wishlist counter badge — styled to match .cart-count-bubble */
.header__icon--wishlist {
  position: relative;
}
/* !important on height/width beats .header__icon span { height: 100% } (0,1,1 specificity) */
.iwish-counter {
  position: absolute !important;
  background-color: var(--maroon);
  color: var(--white);
  height: 1.7rem !important;
  width: 1.7rem !important;
  min-width: 1.7rem;
  border-radius: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  line-height: 1;
  bottom: 0.8rem;
  left: 2.2rem;
  pointer-events: none;
  flex-shrink: 0;
  box-sizing: border-box;
}
.iwish-counter:empty {
  display: none !important;
}

/* Wishlist page — Add to cart: pill shaped matching Aneka brand buttons */
.aneka-storefront-card__atc {
  border-radius: 5rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.2rem !important;
}

/* Wishlist page remove button — round X overlaid on card image top-right */
.aneka-storefront-card__remove-x,
.aneka-storefront-card__remove {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 2.8rem !important;
  height: 2.8rem !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10;
  color: #fff !important;
  transition: background 0.2s ease;
  padding: 0 !important;
  flex-direction: row !important;
}
.aneka-storefront-card__remove-x:hover,
.aneka-storefront-card__remove:hover {
  background: #6b0f2b !important;
}

/* Collection page heart button — force above card overlays */
.card-wrapper .iWishAddColl.iwishcheck {
  z-index: 100 !important;
  display: inline-flex !important;
}

/* Wishlist page — logged-in account notice (green) */
.aneka-wishlist__account-notice {
  text-align: center;
  padding: 1.1rem 2.0rem;
  border-radius: 1.2rem;
  background: rgba(34, 139, 68, 0.14);
  border: 0.1rem solid rgba(34, 139, 68, 0.45);
  color: #1a8a3c !important
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 52rem;
  margin: 0 auto;
}

/* Wishlist page — guest login prompt (shown only when items exist, via JS) */
.aneka-wishlist__guest-notice {
  text-align: center;
  font-size: 1.4rem;
  color: rgba(47, 42, 40, 0.65);
  padding: 0.8rem 1.6rem;
  border-radius: 1.2rem;
  border: 0.1rem solid rgba(107, 15, 43, 0.15);
  background: rgba(107, 15, 43, 0.03);
  max-width: 52rem;
  margin: 0 auto;
}
.aneka-wishlist__guest-notice a {
  color: #6b0f2b;
  text-decoration: underline;
}

/* Wishlist page — empty state CTA */
.aneka-wishlist__empty-cta {
  text-align: center;
  display: grid;
  gap: 1.2rem;
  padding: 2rem 0;
}
.aneka-wishlist__empty-cta p {
  margin: 0;
  color: rgba(47, 42, 40, 0.65);
  font-size: 1.5rem;
}
.aneka-wishlist__shop-btn {
  display: inline-block;
  margin: 0 auto;
  padding: 1.2rem 3.2rem;
  background: #6b0f2b;
  color: #fff !important;
  border-radius: 5rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.2s ease;
}
.aneka-wishlist__shop-btn:hover {
  background: #8b1535;
}

/* Hide the Mst app's sysMessage — we render our own empty state */
.sysMessage { display: none !important; }

/* ============================================================
   FIX: header__icons--localization spacing matches header__icons
   on all pages. When country/language selectors are enabled the
   icons div gets extra classes that alter its flex layout.
   These rules restore identical behaviour to the non-localization
   header on all breakpoints.
   ============================================================ */
.header__icons--localization {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: end;
  gap: inherit;
}

/* Hide the localization wrapper entirely until selectors are needed.
   When country/language selectors are actually enabled and have
   multiple options, .desktop-localization-wrapper will contain visible
   children and this rule won't affect them. */
.header__icons--localization .desktop-localization-wrapper:empty {
  display: none;
}

@media screen and (max-width: 749px) {
  .header__icons--localization {
    gap: 10px !important;
    padding-right: 4px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  /* Hide the localization selector on mobile — it will be in the drawer */
  .header__icons--localization .desktop-localization-wrapper {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .header__icons--localization {
    gap: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .header__icons--localization .desktop-localization-wrapper {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  /* True logo centering: equal left/right cols mirror each other exactly */
  .header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }

  /* Pull hamburger toward left edge */
  header-drawer {
    margin-left: -2.5rem !important;
  }

  /* Pull icon group toward right edge */
  .header__icons {
    margin-right: -2.5rem !important;
  }

  /* Tighten gap between search and wishlist icons */
  .header__icons .header__icon--search,
  .header__icons .header__icon--wishlist {
    margin-right: -1.5rem !important;
  }
}