/** Shopify CDN: Minification failed

Line 907:50 Unexpected ")"

**/
*,
:before,
:after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: rgb(var(--border-color));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-padding-top: var(--sticky-area-height);
  /* APD 2026-08-18: Figma uses exactly two line-height tokens, 200% (default) and
     130% (compact UI). 1.5 appears nowhere in the design and was hitting 206 elements. */
  line-height: 2;
}

body {
  background: rgb(var(--page-background));
  /* font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.65 var(--text-font-family); */
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  /* APD 2026-08-18: 14px is the design body size; letter-spacing is exactly 1% of
     font-size on 300 of 304 text nodes in the Figma file. */
  font-size: 14px;
  letter-spacing: 0.01em;
  margin: 0;
  position: relative;
}

hr {
  border-top-width: 1px;
  height: 0;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

/* Custom fonts */
/* Hanken Grotesk is loaded via Google Fonts CDN link in layout/theme.liquid (not self-hosted here). */

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
  font-size: 1em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

input[type="submit"] {
  cursor: pointer;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: #0000;
  background-image: none;
}

button,
label,
summary,
[role="button"],
[type="checkbox"],
[type="radio"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-webkit-inner-spin-button {
  height: auto;
}

::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-date-and-time-value {
  text-align: start;
}

[type="date"] {
  min-height: 3rem;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  list-style-type: none;
}

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

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ul,
ol,
menu {
  margin: 0;
  padding: 0;
}

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

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: rgb(var(--text-color) / 0.65);
}

:disabled {
  cursor: default !important;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  vertical-align: middle;
  display: block;
}

img {
  color: #0000;
  max-width: 100%;
  height: auto;
}

[role="img"] svg {
  display: initial;
}

picture source {
  display: contents;
}

video {
  max-width: 100%;
  height: auto;
}

:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none !important;
}

height-observer {
  display: block;
}

.color-scheme {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  border-color: rgb(var(--border-color));
}

.color-scheme--with-image-overlay {
  --border-color: var(--text-color) / 0.6;
}

.color-scheme--with-image-overlay .button--outline {
  --border-color: var(--text-color);
}

.accordion {
  box-sizing: content-box;
}

.accordion {
  border-block-width: 1px;
}

.accordion :is(svg) {
  transition: transform 0.2s;
}

.accordion + .accordion {
  border-block-start-width: 0;
}

.accordion__toggle {
  justify-content: space-between;
  align-items: center;
  column-gap: 0.625rem;
  padding-block: 1.25rem;
  display: flex;
}

.accordion__content {
  margin-block-start: -0.25rem;
  padding-block-end: 1.25rem;
  padding-inline-end: 1.25rem;
}

@media screen and (min-width: 1000px) {
  .accordion__toggle.text-lg {
    padding-block: 1.5rem;
  }

  .accordion--lg .accordion__toggle {
    padding-block: 2rem;
  }

  .accordion--lg .accordion__content {
    margin-block-start: -0.5rem;
  }
}

.accordion-group > * + * > .accordion {
  border-block-start-width: 0;
}

.blog-post-card {
  align-content: start;
  gap: 1.25rem;
  display: grid;
}

.blog-post-card__info {
  justify-items: start;
  row-gap: 1rem;
  display: grid;
}

.blog-post-list {
  --blog-post-list-items-per-row: 1;
  --blog-post-list-column-gap: 1.875rem;
  --blog-post-list-row-gap: var(--section-stack-gap);
  --blog-post-list-card-width: calc(
    100% / var(--blog-post-list-items-per-row) - var(--blog-post-list-column-gap) *
      (var(--blog-post-list-items-per-row) - 1) / var(--blog-post-list-items-per-row)
  );
  grid: auto / repeat(auto-fit, var(--blog-post-list-card-width));
  align-items: start;
  column-gap: var(--blog-post-list-column-gap);
  row-gap: var(--blog-post-list-row-gap);
  display: grid;
}

.featured-blog-post {
  grid-column: 1 / -1;
  display: none;
}

@media screen and (min-width: 700px) {
  .blog-post-list {
    --blog-post-list-items-per-row: 2;
  }
}

@media screen and (max-width: 999px) {
  .blog-post-list--carousel {
    --blog-post-list-card-width: 40vw;
    grid: auto / auto-flow var(--blog-post-list-card-width);
  }
}

@media screen and (max-width: 699px) {
  .blog-post-list--carousel {
    --blog-post-list-card-width: 74vw;
  }
}

@media screen and (min-width: 1000px) {
  .blog-post-list {
    --blog-post-list-items-per-row: 2;
    --blog-post-list-column-gap: 3.75rem;
  }

  .featured-blog-post {
    display: block;
  }

  .featured-blog-post + .blog-post-card {
    display: none;
  }
}

@media screen and (min-width: 1150px) {
  .blog-post-list {
    --blog-post-list-row-gap: 3.75rem;
  }
}

.shopify-challenge__button,
.shopify-payment-button__button--unbranded {
  all: revert;
}

.button,
.shopify-challenge__button,
.shopify-payment-button__button--unbranded {
  --initial-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
  --hover-gradient: linear-gradient(transparent, transparent);
  --initial-background-position: var(--transform-origin-end);
  --hover-background-position: var(--transform-origin-start);
  -webkit-appearance: none;
  appearance: none;
  text-transform: var(--button-text-transform);
  /* font: var(--button-font); */
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 900;
  letter-spacing: var(--button-letter-spacing);
  text-shadow: none;
  text-align: center;
  cursor: pointer;
  color: rgb(var(--button-text-color));
  border: 1px solid rgb(var(--button-outline-color, var(--button-background)));
  border-radius: var(--button-border-radius);
  background-color: #0000;
  background-image: var(--initial-gradient), var(--hover-gradient);
  background-size:
    100% 100%,
    0 100%;
  background-position: var(--initial-background-position);
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  column-gap: 1.125rem;
  padding: 0.65rem 1.75rem;
  transition:
    background-size 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    background-position 0.45s step-end,
    color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  display: inline-flex;
  position: relative;
}

.button--outline {
  --initial-gradient: linear-gradient(transparent, transparent);
  --hover-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
  --initial-background-position: var(--transform-origin-start);
  --hover-background-position: var(--transform-origin-end);
  color: rgb(var(--button-background, var(--text-color)));
  border-color: rgb(var(--button-outline-color, var(--border-color)));
}

.button--subdued.button--outline {
  color: rgb(var(--button-background) / 0.65);
  border-color: rgb(var(--border-color));
}

.button--sm {
  font-size: var(--text-xs);
  padding: 0.5rem 0.75rem;
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .features--button-transition
    :is(.button, .shopify-challenge__button, .shopify-payment-button__button--unbranded):not([disabled]):hover {
    color: rgb(var(--button-background));
    background-position: var(--hover-background-position);
    border-color: rgb(var(--button-background));
    background-size:
      0 100%,
      100% 100%;
  }

  .features--button-transition .shopify-payment-button__button--unbranded:not([disabled]):hover {
    background-color: #0000;
  }

  .features--button-transition .button--outline:not([disabled]):hover {
    color: rgb(var(--button-text-color));
  }
}

.button-group {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.button-group > * {
  margin: 0 !important;
}

.button-group:has(.link):has(.button) {
  column-gap: 1.5rem;
}

@media screen and (min-width: 700px) {
  .button-group {
    gap: 1.25rem;
  }

  .button-group:has(.link):not(:has(.button)) {
    column-gap: 2rem;
  }

  .button-group--same-width {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    display: grid;
  }
}

.shopify-payment-button__button {
  vertical-align: top;
  width: 100%;
  min-height: calc(1lh + 1.3rem + 2px);
}

.shopify-payment-button__button--branded:focus-within {
  outline: 2px solid highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

.shopify-payment-button__button--branded [role="button"] {
  border-radius: var(--button-border-radius);
  padding: 0.875rem 1.75rem;
}

.shopify-payment-button__more-options[aria-hidden="true"] {
  display: none;
}

@keyframes animateIconInline {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }

  50% {
    opacity: 0;
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
    transform: translateX(-100%);
  }

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

@keyframes animateIconBlock {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }

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

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

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

.circle-button {
  --circle-button-size: 2.75rem;
  width: var(--circle-button-size);
  height: var(--circle-button-size);
  background: rgb(var(--circle-button-background));
  color: rgb(var(--circle-button-text-color));
  border-radius: var(--rounded-full);
  box-shadow: 0 0.125rem 0.625rem rgb(var(--circle-button-text-color) / 0.15);
  place-items: center;
  display: grid;
}

.circle-button > svg {
  width: 0.75rem;
}

.circle-button > .icon-zoom {
  width: 0.875rem;
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .circle-button.hover\:animate-icon-inline:hover svg {
    animation: 0.35s ease-in-out forwards animateIconInline;
  }

  .circle-button.hover\:animate-icon-block:hover svg {
    animation: 0.35s ease-in-out forwards animateIconBlock;
  }
}

.circle-button--sm {
  --circle-button-size: 2.25rem;
}

.circle-button--lg,
.circle-button--xl {
  --circle-button-size: 3.125rem;
}

:is(.circle-button--lg, .circle-button--xl) > svg {
  width: 1rem;
}

@media screen and (min-width: 700px) {
  .circle-button--xl {
    --circle-button-size: 3.5rem;
  }
}

.content-over-media {
  --content-over-media-gap: 1.25rem;
  --content-over-media-calculated-row-gap: var(--content-over-media-row-gap, var(--content-over-media-gap));
  --content-over-media-calculated-column-gap: var(--content-over-media-column-gap, var(--content-over-media-gap));
  grid-template:
    [full-start] 0 [content-start] minmax(0, 1fr) [content-end] 0 [full-end] / [full-start] minmax(0, 1fr) [content-start] minmax(
      0,
      min(
        var(--container-max-width),
        100% - var(--content-over-media-column-gap, var(--content-over-media-gap, var(--container-gutter))) * 2
      )
    )
    [content-end] minmax(0, 1fr) [full-end];
  row-gap: var(--content-over-media-calculated-row-gap);
  column-gap: var(--content-over-media-calculated-column-gap);
  min-height: var(--content-over-media-height, auto);
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.content-over-media:before {
  content: "";
  background: var(--content-over-media-gradient-overlay, rgb(var(--content-over-media-overlay)));
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.content-over-media > picture {
  display: contents;
}

.content-over-media > :is(img, video, iframe, svg, video-media),
.content-over-media > picture img {
  height: var(--content-over-media-height, auto);
  overflow-wrap: anywhere;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  grid-area: full-start / full-start / full-end / full-end;
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
}

.content-over-media > :not(img, video, iframe, svg, video-media, picture) {
  max-width: var(--content-over-media-content-max-width, 48rem);
  z-index: 1;
  text-shadow: 0 1px rgb(var(--content-over-media-text-shadow) / 50%);
  grid-area: content-start / content-start / content-end / content-end;
  position: relative;
}

.content-over-media:has(> .prose):not(:has(> .prose .button:last-child)) {
  row-gap: calc(var(--content-over-media-calculated-row-gap) - 0.5rem);
}

@supports (row-gap: 1lh) {
  .content-over-media:has(> .prose):not(:has(> .prose .button:last-child)) {
    row-gap: calc(var(--content-over-media-calculated-row-gap) - 0.5lh);
  }
}

.content-over-media > video-media:not([autoplay]) ~ :not(img, video, iframe, svg, video-media, picture) {
  pointer-events: none;
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
}

.content-over-media > video-media:not([autoplay])[loaded] ~ :not(img, video, iframe, svg, video-media, picture) {
  opacity: 0;
  visibility: hidden;
}

.content-over-media:has(video-media:not([autoplay])) .play-button {
  transition: transform 0.2s ease-in-out;
}

.content-over-media:has(video-media:not([autoplay])):hover .play-button {
  transform: scale(1.1);
}

.shopify-section:first-child
  [allow-transparent-header]
  > .content-over-media
  > :not(img, video, iframe, svg, video-media, picture) {
  padding-block-start: var(--header-height, 0px);
}

.content-over-media--xs {
  --content-over-media-height: clamp(15rem, 65vw, 25rem);
}

.content-over-media--sm {
  --content-over-media-height: clamp(20rem, 85vw, 32rem);
}

.content-over-media--md {
  --content-over-media-height: clamp(25rem, 100vw, 36rem);
}

.content-over-media--lg {
  --content-over-media-height: clamp(30rem, 125vw, 42rem);
}

.content-over-media--fill {
  --content-over-media-height: calc(100vh - var(--sticky-area-height));
}

.shopify-section:first-child .content-over-media--fill {
  --content-over-media-height: calc(100vh - (var(--announcement-bar-height, 0px) + var(--header-height, 0px)));
}

.shopify-section:first-child:has([allow-transparent-header]) .content-over-media--fill {
  --content-over-media-height: calc(100vh - (var(--announcement-bar-height, 0px)));
}

@supports (height: 100svh) {
  .content-over-media--fill {
    --content-over-media-height: calc(100svh - var(--sticky-area-height));
  }

  .shopify-section:first-child .content-over-media--fill {
    --content-over-media-height: calc(100svh - (var(--announcement-bar-height, 0px) + var(--header-height, 0px)));
  }

  .shopify-section:first-child:has([allow-transparent-header]) .content-over-media--fill {
    --content-over-media-height: calc(100svh - (var(--announcement-bar-height, 0px)));
  }
}

@media screen and (min-width: 700px) {
  .content-over-media {
    --content-over-media-gap: 2rem;
  }
}

@media screen and (min-width: 1000px) {
  .content-over-media {
    --content-over-media-gap: 3rem;
  }
}

.page-dots {
  --dot-size: 0.375rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  display: flex;
}

.page-dots > * {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--rounded-full);
  place-content: center;
  display: grid;
}

.page-dots > *:after {
  content: "";
  border-radius: inherit;
  opacity: 0.4;
  background: currentColor;
  transition:
    opacity 0.25s,
    background 0.25s;
  position: absolute;
  inset: 0;
}

.page-dots > *[aria-current="true"]:after {
  opacity: 1;
}

.page-dots--narrow {
  column-gap: 0.5rem;
}

.page-dots--autoplay > [aria-current="false"]:after,
.page-dots--autoplay > [aria-current="true"] .circular-progress {
  transition-delay: 0.15s;
}

.page-dots--autoplay > [aria-current="true"]:after,
.page-dots--autoplay > [aria-current="false"] .circular-progress {
  opacity: 0;
}

.page-dots--autoplay > [aria-current="true"] .circular-progress circle:last-child {
  animation: animateCircularProgress var(--slideshow-progress-duration) linear var(--slideshow-progress-play-state) both;
}

.prev-next-button {
  transition:
    opacity 0.15s ease-in-out,
    transform 0.15s ease-in-out,
    visibility 0.15s ease-in-out;
}

.prev-next-button[disabled] {
  opacity: 0;
  visibility: hidden;
}

@media screen and (pointer: fine) {
  .prev-next-button[is="carousel-prev-button"]:hover svg {
    animation-direction: reverse;
  }
}

@media screen and (pointer: fine) {
  .floating-controls-container {
    padding-inline: 4.625rem;
    display: block;
    position: relative;
  }

  .floating-controls-container > .prev-next-button {
    display: none;
  }

  .floating-controls-container > .is-scrollable ~ .prev-next-button {
    z-index: 1;
    display: grid;
    position: absolute;
    inset-block-start: calc(50% - 1.5625rem);
  }

  .floating-controls-container > .prev-next-button--prev {
    inset-inline-start: var(--floating-controls-inset-inline, 0);
  }

  .floating-controls-container > .prev-next-button--next {
    inset-inline-end: var(--floating-controls-inset-inline, 0);
  }

  .floating-controls-container--inside {
    --floating-controls-inset-inline: 1.5rem;
    padding-inline: 0;
  }

  .floating-controls-container--on-hover > .prev-next-button {
    opacity: 0;
    transform: translateY(-10px);
  }

  .floating-controls-container--on-hover:hover > .prev-next-button:not([disabled]) {
    opacity: 1;
    transform: translateY(0);
  }
}

@media not screen and (pointer: fine) {
  .floating-controls-container > .prev-next-button {
    display: none;
  }
}

:where(x-drawer, x-modal, x-popover):not(:defined) {
  display: none;
}

:where(.modal, .drawer, .popover, .header-search) {
  z-index: 999;
  display: none;
  position: relative;
}

:where(.modal, .drawer, .popover, .header-search, )::part(overlay) {
  background: rgb(var(--page-overlay));
  min-height: 100vh;
  position: fixed;
  inset: 0;
}

:where(.modal, .drawer, .popover, .header-search)::part(close-button) {
  color: currentColor;
  cursor: pointer;
  background: none;
  border: none;
  place-items: center;
  padding: 0;
  display: grid;
}

:where(.modal, .drawer, .popover, .header-search)::part(close-button) > svg {
  display: block;
}

@media screen and (pointer: fine) {
  :where(.modal, .drawer, .popover, .header-search)::part(close-button) {
    opacity: 0.6;
    transition: all 0.2s ease-in;
  }

  :where(.modal, .drawer, .popover, .header-search)::part(close-button):hover {
    opacity: 1;
  }
}

:where(.modal, .drawer, .popover, .header-search)::part(tap-area) {
  position: relative;
}

:where(.modal, .drawer, .popover, .header-search)::part(tap-area):before {
  content: "";
  position: absolute;
  inset: -0.65rem;
}

.modal {
  --distance-to-bleed: var(--modal-body-padding-inline);
  --modal-header-padding-block: 0.875rem;
  --modal-header-padding-inline: 1.25rem;
  --modal-body-padding-block: 1.25rem;
  --modal-body-padding-inline: 1.25rem;
  --modal-body-max-width: 30rem;
}

.modal::part(base) {
  place-items: center center;
  width: 100%;
  height: 100%;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal::part(content) {
  /* padding-top: 1rem; */
  transform: none !important;
  max-width: var(--modal-body-max-width);
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  isolation: isolate;
  width: 100%;
  max-height: 75vh;
  overflow: auto;
}

@supports (height: 100dvh) {
  .modal::part(content) {
    max-height: 85dvh;
  }
}

.modal::part(header) {
  background-color: white;
  /* border-block-end: 1px solid rgb(var(--border-color)); */
  text-align: center;
  z-index: 2;
  align-items: center;
  /* padding-block-start: var(--modal-header-padding-block); */
  padding-block-start: 2rem;
  padding-block-end: var(--modal-header-padding-block);
  padding-inline-start: var(--modal-header-padding-inline);
  padding-inline-end: var(--modal-header-padding-inline);
  display: grid;
  position: sticky;
  inset-block-start: 0;
}

.modal::part(close-button) {
  position: absolute;
  inset-inline-end: var(--modal-header-padding-inline);
}

.modal::part(body) {
  background-color: white;
  padding-block-start: var(--modal-body-padding-block);
  padding-block-end: var(--modal-body-padding-block);
  padding-inline-start: var(--modal-body-padding-inline);
  padding-inline-end: var(--modal-body-padding-inline);
}

@media screen and (min-width: 700px) {
  .modal {
    --modal-header-padding-block: 1.125rem;
    --modal-header-padding-inline: 2rem;
    --modal-body-padding-block: 2rem;
    --modal-body-padding-inline: 2rem;
  }

  .modal::part(base) {
    place-items: center;
  }

  .modal--lg {
    --modal-body-max-width: 45rem;
  }
}

.drawer {
  --distance-to-bleed: var(--drawer-body-padding-inline);
  --drawer-header-padding-block: 1rem;
  --drawer-header-padding-inline: 1.25rem;
  --drawer-body-padding-block: 1.25rem;
  --drawer-body-padding-inline: 1.25rem;
  --drawer-footer-padding-block: 1rem;
  --drawer-footer-padding-inline: 1.25rem;
  --drawer-max-width: min(92vw, 28.125rem);
}

.drawer::part(base) {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
}

.drawer::part(content) {
  max-width: var(--drawer-max-width);
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  grid-auto-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
}

.drawer::part(header) {
  min-height: min(var(--header-height), 5rem);
  border-block-end: 1px solid rgb(var(--border-color));
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
  padding-block-start: var(--drawer-header-padding-block);
  padding-block-end: var(--drawer-header-padding-block);
  padding-inline-start: var(--drawer-header-padding-inline);
  padding-inline-end: var(--drawer-header-padding-inline);
  display: flex;
}

.drawer::part(body) {
  overscroll-behavior-y: contain;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-block-start: var(--drawer-body-padding-block);
  padding-block-end: var(--drawer-body-padding-block);
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
  display: grid;
  overflow: hidden auto;
}

.drawer::part(footer) {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  border-block-start: 1px solid rgb(var(--border-color));
  padding-block-start: var(--drawer-footer-padding-block);
  padding-block-end: var(--drawer-footer-padding-block);
  padding-inline-start: var(--drawer-footer-padding-inline);
  padding-inline-end: var(--drawer-footer-padding-inline);
}

.drawer--sm {
  --drawer-max-width: min(92vw, 25rem);
}

.drawer--center-body::part(body) {
  align-self: center;
}

@media screen and (min-width: 1000px) {
  .drawer {
    --drawer-header-padding-block: 1.125rem;
    --drawer-header-padding-inline: 2rem;
    --drawer-body-padding-block: 2rem;
    --drawer-body-padding-inline: 2rem;
    --drawer-footer-padding-block: 2rem;
    --drawer-footer-padding-inline: 2rem;
  }
}

.popover {
  --distance-to-bleed: var(--popover-body-padding-inline);
  --popover-header-padding-block: 0.875rem;
  --popover-header-padding-inline: 1.25rem;
  --popover-body-padding-block: 1.25rem;
  --popover-body-padding-inline: 1.25rem;
}

.popover::part(content) {
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  isolation: isolate;
  width: 100%;
  max-height: 75vh;
  overflow: auto;
}

@supports (height: 100dvh) {
  .popover::part(content) {
    max-height: 85dvh;
  }
}

.popover::part(header) {
  margin-top: 0.5rem;
  background: inherit;
  /* border-block-end: 1px solid rgb(var(--border-color)); */
  text-align: center;
  z-index: 2;
  align-items: center;
  padding-block-start: var(--popover-header-padding-block);
  padding-block-end: var(--popover-header-padding-block);
  padding-inline-start: var(--popover-header-padding-inline);
  padding-inline-end: var(--popover-header-padding-inline);
  display: grid;
  position: sticky;
  inset-block-start: 0;
}

.popover::part(close-button) {
  position: absolute;
  inset-inline-end: var(--popover-header-padding-inline);
}

/* .popover::part(body) {
  padding-block-start: var(--popover-body-padding-block);
  padding-block-end: var(--popover-body-padding-block);
  padding-inline-start: var(--popover-body-padding-inline);
  padding-inline-end: var(--popover-body-padding-inline);
} */

.popover__value-list {
  text-align: center;
  justify-items: center;
  /* gap: 0.25rem; */
  display: grid;
  padding: 10px 0;
}

.popover__value-list > * {
  text-align: inherit;
  color: rgb(var(--text-color) / 1);
  width: 100%;
  transition: color 0.2s ease-in-out;
  padding: 5px 15px;
}

.popover__value-list > *[aria-selected="true"],
.popover__value-list > *:hover {
  color: rgb(var(--text-color));
}

.popover__value-list > *:hover {
  background: #f7f7f7;
}

@media screen and (max-width: 999px) {
  .popover::part(base) {
    place-items: end center;
    width: 100%;
    height: 100%;
    display: grid;
    position: fixed;
    inset: 0;
  }
}

@media screen and (min-width: 1000px) {
  .popover {
    --popover-block-offset: 0.75rem;
    position: absolute;
  }

  .popover::part(content) {
    border: 1px solid rgb(var(--border-color));
    box-shadow: 2px 2px 6px rgb(var(--text-color) / 0.05);
    width: max-content;
    max-width: 18.75rem;
    max-height: min(60vh, 25rem);
  }

  .popover::part(overlay),
  .popover::part(header) {
    display: none;
  }

  .popover__value-list {
    text-align: start;
    justify-items: start;
  }

  /* .popover:has(.popover__value-list)::part(body) {
    padding-inline-end: 2.5rem;
  } */

  .popover--top-start {
    inset-block-end: calc(100% + var(--popover-block-offset));
    inset-inline-start: 0;
  }

  .popover--top-end {
    inset-block-end: calc(100% + var(--popover-block-offset));
    inset-inline-end: 0;
  }

  .popover--bottom-start {
    inset-block-start: calc(100% + var(--popover-block-offset));
    inset-inline-start: 0;
  }

  .popover--bottom-end {
    inset-block-start: calc(100% + var(--popover-block-offset));
    inset-inline-end: 0;
  }
}

.pop-in {
  z-index: 10;
  padding: 2rem;
  display: none;
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
}

.pop-in__close-button {
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  position: absolute !important;
}

@media screen and (min-width: 700px) {
  .pop-in {
    inset-block-end: 2rem;
    inset-inline: 2rem;
  }
}

.banner {
  font-size: var(--text-base);
  color: rgb(var(--banner-color));
  background: rgb(var(--banner-background));
  text-shadow: none;
  padding: 0.625rem 1.25rem;
}

.banner:has(.banner__text-with-button) {
  padding-block: 1.25rem;
}

.banner--error {
  --banner-background: var(--error-background);
  --banner-color: var(--error-text);
  --button-background: var(--error-text);
  --button-text-color: var(--error-background);
}

.banner--success {
  --banner-background: var(--success-background);
  --banner-color: var(--success-text);
  --button-background: var(--success-text);
  --button-text-color: var(--success-background);
}

.banner--warning {
  --banner-background: var(--warning-background);
  --banner-color: var(--warning-text);
  --button-background: var(--warning-text);
  --button-text-color: var(--warning-background);
}

.banner__text-with-button {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem 1.5rem;
  display: flex;
}

.form {
  align-content: start;
  row-gap: var(--form-gap);
  display: grid;
}

.form-row {
  gap: var(--fieldset-gap);
  flex-wrap: wrap;
  display: flex;
}

.form-row > .form-control {
  flex: 1 0 var(--fieldset-row-control-width, 14rem);
}

.form-row > button {
  flex-grow: 1;
}

.fieldset {
  gap: var(--fieldset-gap);
  display: grid;
}

.fieldset-row {
  gap: inherit;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  display: grid;
}

.form-control {
  gap: var(--form-control-gap);
  display: grid;
  position: relative;
}

.form-control > label {
  justify-self: start;
}

.form-control__max-characters-count {
  margin-block-start: -0.375rem;
}

.checkbox-control {
  align-items: flex-start;
  column-gap: var(--checkbox-control-gap);
  text-align: start;
  display: flex;
  position: relative;
}

.input,
.textarea,
.select {
  -webkit-appearance: none;
  appearance: none;
  padding: var(--input-padding-block) var(--input-padding-inline);
  border-radius: var(--input-border-radius);
  background: rgb(var(--input-background, transparent));
  color: rgb(var(--input-text-color, var(--text-color)));
  text-align: start;
  border-width: 1px;
  width: 100%;
  transition: border-color 0.1s ease-in-out;
  border: 1px solid rgb(var(--text-color));
}

:is(.input, .textarea, .select)::placeholder {
  color: rgb(var(--text-color));
}

:is(.input:focus, .textarea:focus, .select:focus-visible) {
  border-color: currentColor;
  outline: none;
}

.select {
  box-shadow: 0 1px 3px rgb(var(--text-color) / 0.08);
}

.select:required:invalid {
  color: rgb(var(--input-text-color, var(--text-color)) / 0.6);
}

.select ~ svg,
.select > svg {
  transition: transform 0.2s;
  position: absolute;
  inset-block-start: calc(50% - 3.5px);
  inset-inline-end: calc(var(--input-padding-inline) + 1px);
}

.select[aria-expanded="true"] > svg {
  transform: rotateZ(180deg);
}

.form-control:has(.select):before {
  content: "";
  width: calc(var(--input-padding-inline) * 2 + 35px);
  background-image: linear-gradient(
    to var(--transform-origin-start),
    rgb(var(--background)) calc(var(--input-padding-inline) + 20px),
    rgb(var(--background) / 0)
  );
  pointer-events: none;
  height: calc(100% - 2px);
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
}

.form-control:has(.select):not(
    :lang(ae),
    :lang(ar),
    :lang(arc),
    :lang(bcc),
    :lang(bqi),
    :lang(ckb),
    :lang(dv),
    :lang(fa),
    :lang(glk),
    :lang(he),
    :lang(ku),
    :lang(mzn),
    :lang(nqo),
    :lang(pnb),
    :lang(ps),
    :lang(sd),
    :lang(ug),
    :lang(ur),
    :lang(yi)
  ):before {
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}

.form-control:has(.select):is(
    :lang(ae),
    :lang(ar),
    :lang(arc),
    :lang(bcc),
    :lang(bqi),
    :lang(ckb),
    :lang(dv),
    :lang(fa),
    :lang(glk),
    :lang(he),
    :lang(ku),
    :lang(mzn),
    :lang(nqo),
    :lang(pnb),
    :lang(ps),
    :lang(sd),
    :lang(ug),
    :lang(ur),
    :lang(yi)
  ):before {
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}

.floating-label {
  z-index: 1;
  background: rgb(var(--background));
  color: rgb(var(--input-text-color, var(--text-color)) / 0.6);
  opacity: 0;
  pointer-events: none;
  padding: 0 0.25rem;
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
  position: absolute;
  inset-block-start: calc(-1 * var(--input-padding-block) + 1px);
  inset-inline-start: calc(var(--input-padding-inline) - 0.25rem + 1px);
  transform: translateY(3px);
}

:-webkit-autofill ~ .floating-label {
  color: #000;
}

:-webkit-any(
    :-webkit-any(.input, .textarea):not(:placeholder-shown) ~ .floating-label,
    :-webkit-any(.input, .textarea, .select):-webkit-autofill ~ .floating-label,
    .select:valid ~ .floating-label
  ) {
  opacity: 1;
  transform: translateY(0);
}

:is(
    :is(.input, .textarea):not(:placeholder-shown) ~ .floating-label,
    :is(.input, .textarea, .select):autofill ~ .floating-label,
    .select:valid ~ .floating-label
  ) {
  opacity: 1;
  transform: translateY(0);
}

.input-suffix {
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
  position: absolute;
  inset-block-start: var(--input-padding-block);
  inset-inline-end: var(--input-padding-inline);
}

.form-control:has(:focus-within) + .input-suffix.hide-on-focus {
  opacity: 0;
  visibility: hidden;
}

.checkbox {
  --checkbox-baseline-distance: calc(1em * 1.6);
  --checkbox-offset: calc((var(--checkbox-baseline-distance) - var(--checkbox-size)) / 2);
  -webkit-appearance: none;
  appearance: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-width: 1px;
  border-color: rgb(var(--text-color) / 0.8);
  background: var(--checkmark-svg-url) no-repeat center / 0;
  border-radius: 2px;
  flex-shrink: 0;
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  position: relative;
  inset-block-start: var(--checkbox-offset);
}

@supports (width: 1lh) {
  .checkbox {
    inset-block-start: calc(0.5lh - var(--checkbox-size) / 2);
  }
}

.checkbox:checked {
  background-color: rgb(var(--accent));
  border-color: rgb(var(--accent));
  background-size: 10px 8px;
}

.checkbox:checked ~ label {
  opacity: 1;
}

.checkbox:disabled,
.checkbox:disabled ~ label {
  opacity: 0.5;
  cursor: default;
}

.checkbox:not(:disabled, :checked) ~ label {
  opacity: 0.7;
}

.checkbox ~ label {
  transition: all 0.2s ease-in-out;
}

.dot-checkbox {
  -webkit-appearance: none;
  appearance: none;
  background: rgb(var(--text-color));
  opacity: 0;
  pointer-events: none;
  border-radius: 100%;
  width: 6px;
  height: 6px;
  transition: opacity 0.2s;
  display: block;
  position: absolute;
  inset-block-start: calc(0.5em + 1.5px);
}

.dot-checkbox ~ :is(label, span) {
  opacity: 0.65;
  transition:
    opacity 0.2s,
    transform 0.2s;
  position: relative;
}

.dot-checkbox ~ :is(label, span):hover {
  opacity: 1;
}

.dot-checkbox:checked {
  opacity: 1;
}

.dot-checkbox:checked ~ :is(label, span) {
  opacity: 1;
  transform: translateX(1.125rem);
}

.switch {
  --switch-height: 1rem;
  --switch-width: 2.25rem;
  --switch-padding: 0.1875rem;
  --switch-toggle-size: 0.625rem;
  -webkit-appearance: none;
  appearance: none;
  height: var(--switch-height);
  width: var(--switch-width);
  padding: var(--switch-padding);
  border-radius: var(--rounded-full);
  background: rgb(var(--text-color) / 0.2);
  align-self: center;
  transition: background 0.2s ease-in-out;
  display: grid;
}

.switch:after {
  content: "";
  width: var(--switch-toggle-size);
  height: var(--switch-toggle-size);
  background: rgb(var(--background));
  border-radius: var(--rounded-full);
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 1px #0003;
}

.switch:checked {
  background: rgb(var(--accent));
}

.switch:checked:after {
  transform: translateX(
    calc(var(--transform-logical-flip) * (var(--switch-width) - var(--switch-toggle-size) - var(--switch-padding) * 2))
  );
}

.shopify-section:not(:first-child) .bordered-section {
  border-block-start-width: 1px;
}

.shopify-section:not(:has(.section-spacing)) + .shopify-section {
  border-block-start-width: 0;
}

.container {
  --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

.container--xxs {
  --container-max-width: var(--container-xxs-max-width);
}

.container--xs {
  --container-max-width: var(--container-xs-max-width);
}

.container--sm {
  --container-max-width: var(--container-sm-max-width);
}

.container--md {
  --container-max-width: var(--container-md-max-width);
}

.container--lg {
  --container-max-width: var(--container-lg-max-width);
}

.container--xl {
  --container-max-width: var(--container-xl-max-width);
}

.section-spacing {
  padding-block-start: calc(
    var(--section-vertical-spacing-override, var(--section-vertical-spacing)) +
      var(--section-vertical-spacing-block-start-compensation, 0px)
  );
  padding-block-end: var(--section-vertical-spacing-override, var(--section-vertical-spacing));
}

.shopify-section:has(.section-spacing) {
  scroll-padding-block-start: calc(
    var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px) + var(--header-is-sticky, 0) *
      var(--header-height, 0px)
  );
}

.section-spacing--tight {
  --section-vertical-spacing: var(--section-vertical-spacing-tight);
  --section-stack-gap: var(--section-stack-gap-tight);
}

.shopify-section:empty {
  display: none;
}

.section-stack {
  gap: var(--section-stack-gap);
  grid-auto-columns: minmax(0, 1fr);
  display: grid;
}

.section-header {
  max-width: min(var(--container-xs-max-width), 100%);
  margin-inline-start: var(--container-gutter);
  margin-inline-end: var(--container-gutter);
}

.container .section-header {
  margin-inline: 0;
}

.v-stack {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  display: grid;
}

.h-stack {
  align-items: center;
  display: flex;
}

.bleed,
.full-bleed {
  margin-inline-start: calc(-1 * var(--distance-to-bleed));
  margin-inline-end: calc(-1 * var(--distance-to-bleed));
}

.bleed {
  scroll-padding-inline: var(--distance-to-bleed);
  padding-inline-start: var(--distance-to-bleed);
  padding-inline-end: var(--distance-to-bleed);
}

@media screen and (min-width: 700px) {
  .sm\:unbleed {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

@media screen and (min-width: 1000px) {
  .md\:unbleed {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

@media screen and (min-width: 1150px) {
  .lg\:unbleed {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

.empty-state {
  text-align: center;
  place-content: center;
  padding-block: 6.25rem;
  display: grid;
}

@media screen and (min-width: 1000px) {
  .empty-state {
    padding-block: 12.5rem;
  }
}

@media screen and (min-width: 1400px) {
  .empty-state {
    padding-block: 15.625rem;
  }
}

.shopify-section--announcement-bar,
.shopify-section--header {
  transform: translateY(
    calc(((var(--announcement-bar-height, 0px) + var(--header-height, 0px)) * -1) * var(--hide-header-group, 0))
  );
  transition: transform 0.25s ease-in-out;
}

video-media,
model-media {
  border-radius: inherit;
  aspect-ratio: var(--aspect-ratio, var(--default-aspect-ratio));
  width: 100%;
  display: block;
  position: relative;
  container: media / inline-size;
}

@supports not (aspect-ratio: 1) {
  :is(video-media, model-media):before {
    content: "";
    padding-block-end: calc(100% / (var(--aspect-ratio, var(--default-aspect-ratio))));
    display: block;
  }

  :is(video-media, model-media) > * {
    height: 100%;
    top: 0;
    left: 0;
    position: absolute !important;
  }
}

@container media (width >= 32rem) {
  :is(video-media, model-media)::part(play-button) {
    width: 4rem;
    height: 4rem;
  }
}

video-media {
  --default-aspect-ratio: 16 / 9;
}

video-media[host] {
  align-items: center;
  display: grid;
}

video-media[show-play-button]:not([loaded]),
video-media:not([autoplay]) {
  cursor: pointer;
}

video-media > :is(video, iframe, img) {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease-in-out;
}

video-media > video[controls] {
  pointer-events: auto;
}

video-media > :-webkit-any(video:not(:-webkit-full-screen), img) {
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}

video-media > :is(video:not(:fullscreen), img) {
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}

video-media > :is(iframe, img) {
  position: absolute;
  inset: 0;
}

video-media:not([loaded]) > :is(video, iframe),
video-media[loaded] > img,
video-media[loaded]::part(play-button) {
  opacity: 0;
  pointer-events: none;
}

video-media[suspended] ~ * {
  pointer-events: none;
}

video-media::part(play-button) {
  z-index: 1;
  will-change: scale;
  transition:
    scale 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

video-media:hover::part(play-button) {
  scale: 1.1;
}

model-media {
  --default-aspect-ratio: 1;
}

model-media model-viewer,
model-media .shopify-model-viewer-ui {
  vertical-align: top;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 699px) {
  .order-summary__header,
  .order-summary__body td:nth-child(n + 2),
  .order-summary__footer td:first-child {
    display: none;
  }

  .order-summary__body td {
    border-width: 0;
  }

  .order-summary__body tr:last-child td {
    border-block-end-width: 1px;
  }

  .order-summary__body tr:first-child td {
    padding-block-start: 0;
  }

  .order-summary__body tr:last-child td {
    padding-block-end: calc(var(--table-cell-padding-block) * 2);
  }
}

@media screen and (min-width: 700px) {
  .order-summary .line-item-info {
    max-width: 500px;
  }
}

.line-item {
  --line-item-media-width: 4.375rem;
  align-items: center;
  column-gap: 1.5rem;
  display: flex;
}

.line-item__media {
  width: var(--line-item-media-width);
  flex-shrink: 0;
}

@media screen and (min-width: 700px) {
  .line-item {
    --line-item-media-width: 7.5rem;
  }
}

.discount-badge {
  background: rgb(var(--on-sale-badge-background));
  color: rgb(var(--on-sale-badge-text));
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.125rem 0.5rem;
  display: flex;
}

.shipping-estimator__form {
  gap: var(--fieldset-gap);
  display: grid;
}

@media screen and (min-width: 700px) {
  .shipping-estimator__form {
    flex-wrap: wrap;
    display: flex;
  }

  .shipping-estimator__form .select {
    max-width: 15rem;
  }
}

.pagination {
  border-block-end-width: 1px;
  grid-auto-rows: minmax(0, 2.8125rem);
  grid-auto-columns: minmax(0, 2.625rem);
  grid-auto-flow: column;
  justify-self: center;
  display: inline-grid;
}

.pagination__link {
  place-content: center;
  display: grid;
  position: relative;
}

.pagination__link[aria-current="page"] {
  box-shadow:
    0 1px,
    inset 0 -2px;
}

@media screen and (min-width: 700px) {
  .pagination {
    grid-auto-columns: minmax(0, 3.75rem);
  }
}

.pswp {
  --pswp-bg: var(--background);
  --pswp-root-z-index: 100000;
  z-index: var(--pswp-root-z-index);
  touch-action: none;
  opacity: 0.003;
  contain: layout style size;
  -webkit-tap-highlight-color: #0000;
  outline: 0;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}

.pswp:focus {
  outline: 0;
}

.pswp--open {
  display: block;
}

.pswp img {
  max-width: none;
}

.pswp,
.pswp__bg {
  will-change: opacity;
  transform: translateZ(0);
}

.pswp__bg {
  opacity: 0.005;
  background: rgb(var(--pswp-bg));
}

.pswp,
.pswp__scroll-wrap {
  overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__img,
.pswp__zoom-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pswp__img,
.pswp__zoom-wrap {
  width: auto;
  height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
  cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
  cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: grabbing;
}

.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
  cursor: zoom-out;
}

.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
  -webkit-user-select: none;
  user-select: none;
}

.pswp__item {
  z-index: 1;
  overflow: hidden;
}

.pswp__hidden {
  display: none !important;
}

.pswp .pswp__hide-on-close {
  opacity: 0.005;
  will-change: opacity;
  z-index: 10;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.22, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.22, 1);
  transform: translateY(15px);
}

.pswp--ui-visible .pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.3s;
  transform: translateY(0);
}

.pswp__top-bar {
  z-index: 10;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 0.75rem;
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  pointer-events: none !important;
}

.pswp__top-bar > .circle-button {
  pointer-events: auto;
  transition: transform 0.2s ease-in-out;
}

@media screen and (pointer: fine) {
  .pswp__top-bar > .circle-button:hover {
    transform: scale(1.1);
  }
}

.pswp__preloader {
  display: none;
}

@media screen and (min-width: 700px) {
  .pswp__top-bar {
    column-gap: 1.125rem;
  }
}

.range {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  width: 100%;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.range::-webkit-slider-thumb {
  background: rgb(var(--text-color));
  cursor: pointer;
  z-index: 1;
  box-shadow: none;
  border-radius: 100%;
  width: 0.625rem;
  height: 0.625rem;
  margin-block-start: -0.25rem;
  position: relative;
}

.range::-webkit-slider-runnable-track {
  cursor: pointer;
  background: rgb(var(--text-color) / 0.12);
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 2px;
}

.range::-moz-range-thumb {
  background: rgb(var(--text-color));
  cursor: pointer;
  border: none;
  border-radius: 100%;
  width: 0.625rem;
  height: 0.625rem;
}

.range::-moz-range-progress {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 2px;
}

.range::-moz-range-track {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 2px;
}

.range::-moz-range-progress {
  background-color: rgba(var(--text-color));
}

.range::-moz-range-track {
  background-color: rgb(var(--border-color));
}

@media not screen and (pointer: fine) {
  .range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-block-start: -0.4375rem;
  }

  .range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
  }
}

.range-group {
  background: linear-gradient(
    to var(--transform-origin-end),
    rgb(var(--text-color) / 0.12) var(--range-min),
    rgb(var(--text-color)) var(--range-min),
    rgb(var(--text-color)) var(--range-max),
    rgb(var(--text-color) / 0.12) var(--range-max)
  );
  border-radius: 2px;
  height: 2px;
}

.range-group .range {
  pointer-events: none;
  vertical-align: top;
  height: 2px;
}

.range-group .range::-webkit-slider-runnable-track {
  background: none;
}

.range-group .range::-webkit-slider-thumb {
  pointer-events: auto;
}

.range-group .range::-moz-range-progress {
  background: none;
}

.range-group .range::-moz-range-track {
  background: none;
}

.range-group .range::-moz-range-thumb {
  pointer-events: auto;
}

.range-group .range:last-child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.input-group {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
}

.input-prefix {
  border-radius: min(0.625rem, var(--button-border-radius));
  border: 1px solid rgb(var(--text-color) / 0.12);
  flex: 1 0 0;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  padding: 0.4375rem;
  display: flex;
}

.input-prefix:focus-within {
  border-color: rgb(var(--text-color));
  box-shadow: inset 0 0 0 1px rgb(var(--text-color));
}

.input-prefix > .field {
  -webkit-appearance: textfield;
  appearance: textfield;
  text-align: end;
  background: none;
  border: none;
  width: 100%;
  min-width: 0;
  margin-inline-start: 0.625rem;
  padding: 0;
}

.input-prefix > .field:focus {
  outline: none;
}

.input-prefix > .field::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.input-prefix > .field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.price-range {
  padding-block-start: 0.25rem;
  display: block;
}

.price-range > .range-group {
  margin-block-end: 1.125rem;
  position: relative;
}

@media not screen and (pointer: fine) {
  .price-range {
    padding-block-start: 0.625rem;
  }
}

.product-card {
  scroll-snap-align: start;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1rem;
  display: grid;
  position: relative;
}

.product-card__figure {
  position: relative;
}

.product-card__figure > .badge-list {
  z-index: 1;
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-start: 0.25rem;
}

.product-card__media {
  isolation: isolate;
  display: block;
}

.product-card__image {
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
  transition: opacity 0.1s ease-in-out;
}

.product-card__image--secondary {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.product-card__quick-add-button {
  background: rgb(var(--circle-button-background));
  color: rgb(var(--circle-button-text-color));
  z-index: 1;
  padding: 0.625rem;
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
}

@media screen and (pointer: fine) {
  .product-card__quick-add-button {
    opacity: 0;
    transition:
      opacity 0.2s ease-in-out,
      transform 0.2s ease-in-out;
    transform: translateY(5px);
  }

  .product-card__quick-add-button :is(svg) {
    transition: transform 0.2s ease-in-out;
  }

  .product-card__quick-add-button:hover svg {
    transform: rotateZ(90deg);
  }

  .product-card:hover .product-card__quick-add-button {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Inline quick add bar (Figma "Quick Add" / "Size" / "Quick Add + runout") ------------------- */

.product-card__quick-add {
  z-index: 1;
  width: 100%;
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
}

.product-card__quick-add > summary {
  list-style: none;
  cursor: pointer;
}

.product-card__quick-add > summary::-webkit-details-marker,
.product-card__quick-add > summary::marker {
  display: none;
  content: "";
}

.product-card__quick-add[open] > summary {
  display: none;
}

.product-card__quick-add-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0);
  color: rgb(255 255 255);
  border: 0;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 900;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding-block: 0.85rem;
  cursor: pointer;
}

.product-card__quick-add-panel {
  background: rgb(0 0 0);
  padding: 0.75rem 0.75rem 1rem;
}

.product-card__quick-add-sizes {
  justify-content: center;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
}

.product-card__quick-add-sizes .block-swatch {
  --swatch-disabled-strike-color: rgb(255 255 255 / 0.4);
  color: rgb(255 255 255 / 0.85);
  min-width: 1.75rem;
  margin-top: 0;
  padding: 0.2rem 0.35rem;
  font-size: var(--text-xs);
}

.product-card__quick-add-sizes .block-swatch.is-disabled {
  color: rgb(255 255 255 / 0.35);
}

.product-card__quick-add-sizes :checked + .block-swatch,
.product-card__quick-add-sizes .block-swatch.is-selected {
  color: rgb(255 255 255);
}

/* Higher specificity than the base .block-swatch rule (which hardcodes a black underline that
   would be invisible on this bar's black background). */
.product-card__quick-add-sizes :checked + .block-swatch::after,
.product-card__quick-add-sizes .block-swatch.is-selected::after {
  background-color: rgb(255 255 255);
}

@media screen and (pointer: fine) {
  .product-card__quick-add {
    opacity: 0;
    transition:
      opacity 0.2s ease-in-out,
      transform 0.2s ease-in-out;
    transform: translateY(6px);
  }

  .product-card:hover .product-card__quick-add,
  .product-card__quick-add[open] {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card__info {
  text-align: left;
  align-content: start;
  justify-items: start;
  gap: 0.75rem;
  display: grid;
}

.product-card__info :is(.price-list, .rating-badge) {
  justify-content: center;
}

.product-card__info .color-swatch {
  --swatch-size: 1.375rem;
}

@media screen and (pointer: fine) {
  .product-card__image--secondary {
    opacity: 0;
    mix-blend-mode: plus-lighter;
    display: block;
  }

  .product-card__figure:has(.product-card__image--secondary):hover
    > .product-card__media
    .product-card__image--primary {
    opacity: 0;
  }

  .product-card__figure:has(.product-card__image--secondary):hover
    > .product-card__media
    .product-card__image--secondary {
    opacity: 1;
  }
}

@media screen and (min-width: 700px) {
  .product-card__figure > .badge-list {
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
  }
}

.horizontal-product-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  align-items: center;
  column-gap: 1.5rem;
  display: flex;
  position: relative;
  container: horizontal-product-card / inline-size;
}

.horizontal-product-card__figure {
  flex-shrink: 0;
  width: 6.25rem;
}

.horizontal-product-card__info {
  flex-grow: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: auto;
  justify-items: start;
  gap: 0.625rem;
  display: grid;
}

.\@large\:horizontal-product-card__button {
  display: none;
}

@media screen and (min-width: 700px) {
  .horizontal-product-card {
    column-gap: 2rem;
  }
}

@container horizontal-product-card (width >= 450px) {
  .horizontal-product-card__info {
    grid-auto-flow: column;
    align-items: center;
  }

  .\@narrow\:horizontal-product-card__button {
    display: none;
  }

  .\@large\:horizontal-product-card__button {
    display: block;
  }
}

.product-list {
  --product-list-max-items-per-row-allowed: 2;
  --product-list-calculated-items-per-row: min(
    var(--product-list-max-items-per-row-allowed),
    var(--product-list-items-per-row)
  );
  --product-list-default-row-gap: 2.1875rem;
  --product-list-default-column-gap: 0.625rem;
  --product-list-calculated-row-gap: clamp(
    var(--section-vertical-spacing) / 4,
    var(--product-list-default-row-gap) * var(--product-list-vertical-spacing-factor, 1),
    var(--section-vertical-spacing) * 2
  );
  --product-list-calculated-column-gap: clamp(
    var(--container-gutter) / 4,
    var(--product-list-default-column-gap) * var(--product-list-horizontal-spacing-factor, 1),
    var(--container-gutter) * 2
  );
  --product-list-card-width: calc(
    100% / var(--product-list-calculated-items-per-row) - var(--product-list-calculated-column-gap, 0px) *
      (var(--product-list-calculated-items-per-row) - 1) / var(--product-list-calculated-items-per-row)
  );
  grid: auto / repeat(auto-fit, var(--product-list-card-width));
  align-items: start;
  column-gap: var(--product-list-calculated-column-gap);
  row-gap: var(--product-list-calculated-row-gap);
  display: grid;
}

.product-list--carousel {
  --product-list-default-column-gap: 1.25rem;
  grid: auto / auto-flow var(--product-list-card-width);
  justify-content: safe center;
}

@media screen and (max-width: 699px) {
  .product-list:not(.product-list--carousel) {
    margin-inline: -0.625rem;
  }

  .product-list--carousel {
    --product-list-card-width: min(300px, 65%);
  }
}

@media screen and (min-width: 700px) {
  .product-list {
    --product-list-max-items-per-row-allowed: 3;
    --product-list-default-row-gap: 3rem;
    --product-list-default-column-gap: 1.5rem;
  }

  .product-list--compact {
    --product-list-max-items-per-row-allowed: 4;
  }
}

@media screen and (min-width: 1000px) {
  .product-list {
    --product-list-max-items-per-row-allowed: 4;
    --product-list-default-row-gap: 4rem;
    --product-list-default-column-gap: 3rem;
  }

  .product-list--compact {
    --product-list-max-items-per-row-allowed: 5;
  }

  .product-list--carousel {
    scroll-snap-type: x mandatory;
  }
}

@media screen and (min-width: 1150px) {
  .product-list {
    --product-list-max-items-per-row-allowed: var(--product-list-items-per-row);
  }
}

@media screen and (min-width: 1400px) {
  .product-list {
    /* APD 2026-08-18 (full-tree Figma pull): the design's product grid at 1440 is 4 columns of
       303px with a 40px column gap and a 79px row gap (cards at y=256/894/1532/2170, card height
       559 -> 638 pitch). 3.75rem/4rem rendered 60px/64px and 291px-wide cards. With the 54px page
       margin, 2.5rem here makes the card width exactly 303: (1440 - 108 - 120) / 4. */
    --product-list-default-row-gap: 4.9375rem;
    --product-list-default-column-gap: 2.5rem;
  }
}

.quick-buy-modal {
  --modal-body-max-width: 55.625rem;
}

.quick-buy-modal::part(content) {
  position: relative;
}

.quick-buy-modal__content {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.quick-buy-modal__close-button {
  position: absolute;
  inset-block-start: 1.875rem;
  inset-inline-end: 1.875rem;
}

.quick-buy-modal__view-more {
  margin-block-start: 2rem;
  display: inline-block;
}

@media screen and (max-width: 699px) {
  .quick-buy-modal::part(body) {
    padding-inline: 0;
  }

  .quick-buy-modal__gallery-wrapper,
  .quick-buy-modal__info-wrapper {
    padding-inline-start: var(--modal-body-padding-inline);
    padding-inline-end: var(--modal-body-padding-inline);
  }

  .quick-buy-modal__gallery-wrapper .price-list {
    justify-content: center;
  }

  .quick-buy-modal__gallery-wrapper .price-list .h6 {
    font-size: 0.6875rem;
  }

  .quick-buy-modal__mobile-info {
    margin-block-start: 1.25rem;
  }

  .quick-buy-modal__info-wrapper {
    border-block-start-width: 1px;
    margin-block-start: 1.25rem;
  }

  .quick-buy-modal__info-wrapper
    .product-info__block-item:is(
      [data-block-type="vendor"],
      [data-block-type="title"],
      [data-block-type="price"],
      [data-block-type="rating"],
      [data-block-type="separator"]
    ),
  .quick-buy-modal__info-wrapper .product-info__block-group[data-group-type="text-with-rating"] {
    display: none;
  }

  .quick-buy-modal__info-wrapper .product-info__block-item[data-block-type="variant-picker"] {
    --product-info-gap: 1.25rem;
  }

  .quick-buy-modal__info-wrapper .product-info__block-item[data-block-type="buy-buttons"] {
    --product-info-gap: 1.5rem;
  }
}

@media screen and (min-width: 700px) {
  .quick-buy-modal {
    --modal-body-padding-inline: 3.125rem;
    --modal-body-padding-block: 3.125rem;
  }

  .quick-buy-modal::part(header) {
    display: none;
  }

  .quick-buy-modal__content {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 2.5rem;
    display: grid;
  }

  .quick-buy-modal__content .product-info {
    top: unset;
    position: relative;
  }
}

.prose {
  overflow-wrap: anywhere;
}

.prose :first-child,
.prose .sr-only:first-child + * {
  margin-block-start: 0 !important;
}

.prose :last-child {
  margin-block-end: 0 !important;
}

.prose :where(:not(meta, span) + *) {
  margin-block-start: 1rem;
}

.prose :where(* + span:not(:empty)),
.prose :is(.link, img) {
  display: inline-block;
}

.prose :is(.link + .link) {
  margin-inline-start: 0.75rem;
}

.prose :is(.button, .button-group:has(.button)) {
  margin-block-start: 1.5rem;
}

.prose
  :is(
    p img:not([style*="float"]):only-child,
    div img:not([style*="float"]):only-child,
    figure,
    video,
    object,
    blockquote,
    table
  ) {
  margin-block: 1.6rem;
}

.prose :is(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"]) {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.prose .play-button {
  margin: 2rem auto;
  display: block;
}

.prose :is(ol, ul) :is(ol, ul) {
  margin-block-start: 0 !important;
}

.prose :is(ol, ul) {
  row-gap: 0.4em;
  display: grid;
}

.prose figcaption {
  font-style: italic;
  font-size: var(--text-sm);
  color: rgb(var(--text-color) / 0.65);
  margin-block-start: 0.5em;
}

.prose blockquote {
  border-inline-start-width: 3px;
  padding: 0.375rem 0 0.375rem 1rem;
  font-size: 1.15rem;
  line-height: 1.75;
}

@media screen and (min-width: 1000px) {
  .prose:not(.prose--tight) :where(:not(meta, span) + *) {
    margin-block-start: 1.25rem;
  }

  .prose:not(.prose--tight) :is(.button, .button-group:has(.button)) {
    margin-block-start: 2rem;
  }

  .prose:not(.prose--tight) .play-button {
    margin-block: 2.5rem;
  }

  .prose:not(.prose--tight) blockquote {
    margin-inline-start: 2rem;
    padding-inline-start: 2rem;
  }
}

.link,
.prose a:not(.h1, .h2, .h3, .h4, .h5, .h6, .button, .link-faded, .link-faded-reverse) {
  text-underline: none;
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 100% 1px no-repeat;
  transition: background-size 0.3s ease-in-out;
}

/* remove link hover effect */

/* @media screen and (pointer: fine) {
  :is(.link, .prose a:not(.h1, .h2, .h3, .h4, .h5, .h6, .button, .link-faded, .link-faded-reverse)):hover {
    background-size: 0 1px;
  }
} */

.link-reverse {
  text-underline: none;
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
  transition: background-size 0.3s ease-in-out;
}

@media screen and (pointer: fine) {
  .link-reverse:hover {
    background-size: 100% 1px;
  }
}

.link-faded {
  color: rgb(var(--text-color));
  transition: color 0.2s ease-in-out;
}

@media screen and (pointer: fine) {
  .link-faded:hover {
    color: rgb(var(--text-color));
  }
}

.link-faded-reverse {
  transition: color 0.2s ease-in-out;
}

@media screen and (pointer: fine) {
  .link-faded-reverse:hover {
    color: rgb(var(--text-color) / 0.65);
  }
}

table {
  --table-cell-padding-block: 0.75rem;
  --table-cell-padding-inline: 0.5rem;
  --table-foot-cell-padding-block: 0.75rem;
  --table-foot-cell-padding-inline: 0.5rem;
  width: 100%;
}

th {
  text-align: start;
}

:where(td, th):not(:empty) {
  border-block-width: 1px;
}

:where(th):not(:empty) {
  border-block-start-width: 0;
}

td:not(:empty) + td {
  border-inline-start-width: 1px;
}

th,
td {
  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
}

:is(th, td):first-child,
:is(th, td):empty + td {
  padding-inline-start: 0;
}

:is(th, td):last-child {
  padding-inline-end: 0;
}

th {
  /* opacity: 0.6; */
  line-height: 1.7;
  /* font-size: var(--text-h6); */
  /* font-family: var(--heading-font-family); */
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  /* text-transform: var(--heading-text-transform); */
  padding-block: 0 0.625rem;
}

tfoot td {
  padding: var(--table-foot-cell-padding-block) var(--table-foot-cell-padding-inline);
}

.js tr[onclick] {
  cursor: pointer;
  transition: background 0.2s;
}

.js tr[onclick]:hover {
  background: rgb(var(--text-color) / 0.05);
}

@media screen and (min-width: 700px) {
  table {
    --table-cell-padding-block: 1rem;
    --table-cell-padding-inline: 0.75rem;
    --table-foot-cell-padding-block: 1rem;
    --table-foot-cell-padding-inline: 0.75rem;
  }
}

.table--reduce-border :is(td) + td {
  border-inline-start-width: 0;
}

.table--lg {
  --table-cell-padding-block: 1.5rem;
  --table-cell-padding-inline: 0.5rem;
}

@media screen and (min-width: 700px) {
  .table--lg {
    --table-cell-padding-block: 2rem;
    --table-cell-padding-inline: 0.75rem;
  }
}

.social-media--list {
  align-items: center;
  gap: var(--social-media-list-gap, 0.75rem 2rem);
  flex-wrap: wrap;
  display: flex;
}

.social-media--list .social-media__item {
  opacity: 0.65;
  transition:
    opacity 0.2s,
    color 0.2s;
}

.social-media--list svg {
  width: var(--social-media-icon-size, 1.25rem);
}

@media screen and (pointer: fine) {
  .social-media--list .social-media__item:hover {
    opacity: 1;
  }
}

.social-media--block {
  grid-template-columns: repeat(auto-fit, minmax(0, 0.33fr));
  gap: 1px;
  display: grid;
}

.social-media--block:has(:nth-child(4)) {
  grid-template-columns: repeat(auto-fit, minmax(0, 0.25fr));
}

.social-media--block .social-media__item {
  outline: 1px solid rgb(var(--border-color));
  z-index: 0;
  width: 100%;
  transition:
    background 0.15s,
    color 0.15s,
    outline 0.15s,
    z-index 0.15s;
}

.social-media--block a {
  padding-block: 0.625rem;
  display: block;
}

.social-media--block svg {
  margin-inline: auto;
}

@media screen and (pointer: fine) {
  .social-media--block .social-media__item:hover {
    background: rgb(var(--branding-background));
    outline-color: rgb(var(--branding-background));
    color: rgb(var(--branding-color));
    z-index: 1;
  }
}

@media not screen and (pointer: fine) {
  .social-media--block .social-media__item {
    background: rgb(var(--branding-background));
    outline-color: rgb(var(--branding-background));
    color: rgb(var(--branding-color));
  }
}

@media screen and (min-width: 700px) {
  .social-media--block {
    grid-template-columns: repeat(auto-fit, minmax(0, 3.75rem));
  }
}

.branding-colors--facebook {
  --branding-background: 24 119 242;
  --branding-color: 255 255 255;
}

.branding-colors--twitter {
  --branding-background: 29 161 242;
  --branding-color: 255 255 255;
}

.branding-colors--instagram {
  --branding-background: 195 42 163;
  --branding-color: 255 255 255;
}

.branding-colors--pinterest {
  --branding-background: 189 8 28;
  --branding-color: 255 255 255;
}

.branding-colors--youtube {
  --branding-background: 255 0 0;
  --branding-color: 255 255 255;
}

.branding-colors--tiktok {
  --branding-background: 1 1 1;
  --branding-color: 255 255 255;
}

.branding-colors--vimeo {
  --branding-background: 26 183 234;
  --branding-color: 255 255 255;
}

.branding-colors--linkedin {
  --branding-background: 10 102 194;
  --branding-color: 255 255 255;
}

.branding-colors--whatsapp {
  --branding-background: 79 206 93;
  --branding-color: 255 255 255;
}

.branding-colors--snapchat {
  --branding-background: 255 252 0;
  --branding-color: 0 0 0;
}

.branding-colors--tumblr {
  --branding-background: 54 70 93;
  --branding-color: 255 255 255;
}

.branding-colors--wechat {
  --branding-background: 9 184 62;
  --branding-color: 255 255 255;
}

.branding-colors--reddit {
  --branding-background: 255 69 0;
  --branding-color: 255 255 255;
}

.branding-colors--line {
  --branding-background: 6 199 85;
  --branding-color: 255 255 255;
}

.branding-colors--spotify {
  --branding-background: 30 215 96;
  --branding-color: 255 255 255;
}

.branding-colors--21buttons {
  --branding-background: 0 0 0;
  --branding-color: 255 255 255;
}

.branding-colors--email {
  --branding-background: var(--text-color);
  --branding-color: var(--background);
}

.color-swatch {
  --swatch-offset: 2px;
  --swatch-size: 32px;
  --swatch-disabled-strike-color: rgb(var(--border-color));
  width: var(--swatch-size);
  height: var(--swatch-size);
  /* padding: var(--swatch-offset); */
  margin: 0.35rem 0.2rem;
  /* border-bottom: var(--swatch-border-size) solid transparent; */
  background: content-box var(--swatch-background) no-repeat center / cover;
  place-items: center;
  display: grid;
  position: relative;
}

:disabled + .color-swatch:before,
.color-swatch.is-disabled:before {
  content: "";
  margin: var(--swatch-disabled-margin, var(--swatch-offset));
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    black calc(50% - 0.5px) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  position: absolute;
  inset: 0;
}

/* :checked + .color-swatch,
/* :checked + .color-swatch,
.color-swatch.is-selected {
  --swatch-disabled-margin: 0;
  --swatch-disabled-strike-color: currentColor;
  position: relative;
} */

:checked + .color-swatch::after,
.color-swatch.is-selected::after {
  margin-top: 0.35rem;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  bottom: -0.35rem;
  height: 1px;
  background-color: black;
}

:focus-visible + .color-swatch {
  outline-offset: calc(var(--swatch-offset));
}

.thumbnail-swatch {
  --swatch-size: 3rem;
  --swatch-disabled-strike-color: rgb(var(--border-color));
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: min(4px, var(--input-border-radius));
  border-width: 1px;
  display: block;
  position: relative;
}

:checked + .thumbnail-swatch,
.thumbnail-swatch.is-selected {
  --swatch-disabled-strike-color: currentColor;
  border-color: currentColor;
}

:disabled + .thumbnail-swatch:before,
.thumbnail-swatch.is-disabled:before {
  content: "";
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--swatch-disabled-strike-color) calc(50% - 0.5px) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  position: absolute;
  inset: 0;
}

.thumbnail-swatch > img {
  border-radius: inherit;
  height: 100%;
}

:focus-visible + .thumbnail-swatch {
  outline-offset: 2px;
}

@media screen and (min-width: 700px) {
  .thumbnail-swatch {
    --swatch-size: 4.25rem;
  }
}

.block-swatch {
  /* --swatch-border-size: 1px; */
  --swatch-padding: calc(var(--input-padding-block) - var(--swatch-border-size) * 2) 0.875rem;
  --swatch-disabled-strike-color: rgb(var(--border-color));
  padding: var(--swatch-padding);
  padding-bottom: 0.2rem;
  margin-top: 0.35rem;
  /* border-width: var(--swatch-border-size);
  border-radius: var(--input-border-radius); */
  color: rgb(var(--text-color) / 0.65);
  border-bottom: var(--swatch-border-size) solid transparent !important;
  justify-content: center;
  align-items: center;
  column-gap: 0.875rem;
  min-width: 2.5rem;
  display: flex;
  position: relative;
}

.block-swatch.is-disabled {
  color: rgb(var(--text-color) / 0.5);
}

:checked + .block-swatch,
.block-swatch.is-selected {
  --swatch-disabled-strike-color: currentColor;
  color: var(--text-color);
}

:checked + .block-swatch::after,
.block-swatch.is-selected::after {
  --swatch-disabled-strike-color: currentColor;
  color: var(--text-color);
  margin-top: 0.25rem;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  bottom: -0.2rem;
  height: 1px;
  background-color: black;
}

:disabled + .block-swatch:before,
.block-swatch.is-disabled:before {
  content: "";
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--swatch-disabled-strike-color) calc(50% - 0.5px) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  position: absolute;
  inset: 0;
}

:focus-visible + .block-swatch {
  outline-offset: 2px;
}

.block-swatch__color {
  background: var(--swatch-background) center / cover;
  width: 1rem;
  height: 1rem;
}

.content-tabs::part(tab-list) {
  border-block-end: 1px solid rgb(var(--border-color));
  white-space: nowrap;
  grid-auto-flow: column;
  justify-content: start;
  gap: 2.5rem;
  margin-block-end: 1.5rem;
  display: grid;
}

.content-tabs [role="tab"] {
  box-shadow: 0 1px rgb(var(--text-color));
  padding-block-end: 0.625rem;
  transition:
    opacity 0.2s ease-in,
    box-shadow 0.2s ease-in;
}

.content-tabs [role="tab"]:not([aria-selected="true"]) {
  opacity: 0.6;
  box-shadow: 0 1px #0000;
}

.content-tabs--center::part(tab-list) {
  width: max-content;
  margin-inline: auto;
}

.content-tabs--center::part(tab-panel-list) {
  text-align: center;
  width: min(800px, 100%);
  margin-inline: auto;
  display: block;
}

@media screen and (min-width: 1000px) {
  .content-tabs::part(tab-list) {
    gap: 4.375rem;
    margin-block-end: 2rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .features--page-transition {
    opacity: 0;
  }
}

.constrained-image {
  width: var(--image-mobile-max-width, var(--image-max-width));
  max-width: 100%;
}

@media screen and (min-width: 700px) {
  .constrained-image {
    width: var(--image-max-width);
  }
}

.text-with-icon {
  align-items: center;
  gap: 0.625rem;
  display: flex;
}

.text-with-icon > svg {
  flex-shrink: 0;
}

.icon {
  vertical-align: middle;
  height: auto;
  transition: transform 0.2s;
  display: block;
}

.group[aria-expanded="true"] .icon.group-expanded\:rotate {
  transform: rotateZ(180deg);
}

[dir="rtl"] .icon--direction-aware {
  scale: -1;
}

.offset-icon {
  --icon-baseline-distance: calc(1em * 1.65 / 2);
  top: var(--icon-baseline-distance);
  position: relative;
  translate: 0 -50%;
}

@supports (top: 1lh) {
  .offset-icon {
    top: 0.5lh;
  }
}

.price-list {
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  display: flex;
}

.price-list--product {
  justify-content: center;
  column-gap: 1rem;
}

.localization-selectors {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.75rem;
  display: flex;
}

.localization-selectors__separator {
  background: rgb(var(--border-color));
  width: 1px;
  height: 0.5rem;
}

.localization-selectors__separator:last-child {
  display: none;
}

.localization-toggle {
  align-items: center;
  column-gap: 0.625rem;
  display: flex;
}

.localization-toggle > svg {
  transition: transform 0.2s;
}

.localization-toggle[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.country-flag {
  width: 20px;
  height: 15px;
}

.payment-methods {
  flex-wrap: wrap;
  gap: 1rem;
  display: flex;
}

.badge {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  align-items: center;
  width: max-content;
  padding: 0.0625rem 0.3125rem;
  font-size: 0.625rem;
  display: flex;
}

.badge--on-sale {
  background: rgb(var(--on-sale-badge-background));
  color: rgb(var(--on-sale-badge-text));
}

.badge--sold-out {
  background: rgb(var(--sold-out-badge-background));
  color: rgb(var(--sold-out-badge-text));
}

.badge--custom {
  background: rgb(var(--custom-badge-background));
  color: rgb(var(--custom-badge-text));
}

@media screen and (min-width: 700px) {
  .badge {
    /* APD 2026-08-18: Figma's discount pill ("-15%", Product Card Sale) is
       10px / 13px line-height / weight 900. 11px is not in the design scale. */
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.01em;
  }
}

.badge-list {
  flex-wrap: wrap;
  gap: 0.25rem;
  display: flex;
}

.badge-list--vertical {
  flex-direction: column;
}

.feature-badge {
  font-size: var(--text-xs);
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  display: inline-flex;
}

.feature-badge :is(svg, img) {
  flex-shrink: 0;
}

.feature-badge-list {
  flex-wrap: wrap;
  gap: 0.5rem;
  display: flex;
}

.rating-badge {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  line-height: normal;
  display: flex;
}

.rating-badge__stars {
  column-gap: 0.125rem;
  display: flex;
  position: relative;
  top: -0.5px;
}

@media (pointer: fine) {
  .is-scrollable[allow-drag] {
    cursor: grab;
  }

  .is-scrollable[allow-drag]:active {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-type: none;
  }
}

.text-with-rating {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 0.5rem;
  display: flex;
}

.inventory {
  row-gap: 0.5rem;
  font-style: italic;
  display: grid;
}

.progress-bar {
  background: rgb(var(--text-color) / 0.1);
  height: 2px;
  display: block;
  position: relative;
}

.progress-bar:before {
  content: "";
  transform: scaleX(var(--progress, 0));
  transform-origin: var(--transform-origin-start);
  background: currentColor;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease-in-out;
  display: block;
}

[data-tooltip] {
  --tooltip-text-color: var(--text-color);
  --tooltip-background: var(--background);
  position: relative;
}

@media screen and (pointer: fine) {
  [data-tooltip]:after {
    content: attr(data-tooltip);
    inset-block-end: calc(100% + var(--tooltip-offset, 0.5rem));
    border-radius: min(1.5rem, var(--button-border-radius));
    background: rgb(var(--tooltip-text-color));
    color: rgb(var(--tooltip-background));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    justify-self: center;
    width: max-content;
    max-width: 15rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.875rem;
    transition:
      opacity 0.1s ease-in-out,
      visibility 0.1s ease-in-out,
      scale 0.1s ease-in-out;
    position: absolute;
    left: 50%;
    translate: -50%;
    scale: 0.9;
  }

  [data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
    scale: 1;
  }
}

.separator-dot {
  --dot-size: 0.25rem;
  width: var(--dot-size);
  height: var(--dot-size);
  background: currentColor;
  border-radius: 100%;
}

.animated-plus {
  --animated-plus-size: 0.625rem;
  width: var(--animated-plus-size);
  height: var(--animated-plus-size);
  display: block;
  position: relative;
}

.animated-plus:before,
.animated-plus:after {
  content: "";
  background-color: currentColor;
  transition:
    transform 0.25s ease-in-out,
    opacity 0.25s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.animated-plus:before {
  width: var(--animated-plus-size);
  opacity: 1;
  height: 1px;
}

.animated-plus:after {
  height: var(--animated-plus-size);
  width: 1px;
}

.group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:before {
  opacity: 0;
}

.group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:before,
.group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (pointer: fine) {
  .is-scrollable[allow-drag] {
    cursor: grab;
  }

  .is-scrollable[allow-drag]:active {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-type: none;
  }
}

@media screen and (min-width: 700px) {
  .play-button svg {
    width: 5rem;
    height: 5rem;
  }
}

.quantity-selector {
  --quantity-selector-height: 2.7rem;
  --quantity-selector-input-width: 2.5rem;
  --tooltip-offset: calc(-1 * var(--quantity-selector-height) / 2 + 1rem);
  grid-template-columns: var(--quantity-selector-height) auto var(--quantity-selector-height);
  grid-auto-rows: var(--quantity-selector-height);
  border-width: 1px;
  display: inline-grid;
}

.quantity-selector__button {
  place-content: center;
  display: grid;
}

.quantity-selector__button svg {
  transition: opacity 0.2s;
}

.quantity-selector__button[disabled] svg,
.quantity-selector__button:hover svg {
  opacity: 0.65;
}

.quantity-selector__input {
  -webkit-appearance: textfield;
  appearance: textfield;
  min-width: var(--quantity-selector-input-width);
  width: var(--quantity-selector-character-count, 1ch);
  text-align: center;
  background: none;
}

.quantity-selector__input:focus {
  outline: none;
}

.quantity-selector__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-selector--sm {
  --quantity-selector-height: 2.2rem;
  --quantity-selector-input-width: 2rem;
}

.breadcrumb {
  display: none;
}

.breadcrumb__list {
  align-items: center;
  column-gap: 0.5rem;
  line-height: 1;
  display: flex;
}

.breadcrumb__list-item + .breadcrumb__list-item:before {
  content: "/";
  color: rgb(var(--text-color) / 0.65);
  margin-inline-end: 0.375rem;
  font-size: 0.625rem;
  display: inline-block;
}

@media screen and (min-width: 1000px) {
  .breadcrumb {
    display: block;
  }
}

.breadcrumb--floating {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: var(--container-gutter);
}

.bordered-box {
  border-width: 1px;
  padding: 2.5rem 1.25rem 1.25rem;
  position: relative;
}

.bordered-box__title {
  inset-block-start: 0;
  text-align: center;
  background: rgb(var(--background));
  width: max-content;
  padding-inline: 0.5rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 1000px) {
  .bordered-box {
    padding: 3rem;
  }
}

.loading-bar {
  z-index: 2000;
  pointer-events: none;
  mix-blend-mode: exclusion;
  transform-origin: var(--transform-origin-start);
  background: #fff;
  width: 100%;
  height: 2px;
  position: fixed;
  top: 0;
  left: 0;
  transform: scaleX(0);
}

@media screen and (min-width: 700px) {
  .loading-bar {
    height: 3px;
  }
}

@keyframes animateCircularProgress {
  from {
    stroke-dashoffset: var(--stroke-dasharray);
  }

  to {
    stroke-dashoffset: 0;
  }
}

.circular-progress {
  transition: opacity 0.25s;
  transform: rotate(-90deg);
}

.circular-progress circle:last-child {
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dasharray);
}

@media (prefers-reduced-motion: no-preference) {
  img[is="image-parallax"] {
    transform: scale(1.3) translateY(-11.5385%);
  }
}

.scroll-margin-offset {
  scroll-margin-block-start: 20px;
}

.share-buttons {
  align-items: center;
  gap: 0.875rem;
  display: flex;
}

.share-buttons .social-media {
  --social-media-icon-size: 1rem;
  --social-media-list-gap: 0.75rem;
}

.share-buttons--native:not([hidden]) + .share-buttons {
  display: none;
}

.customer-account-box {
  min-height: calc(
    100vh - var(--section-vertical-spacing) * 2 - var(--announcement-bar-height, 0px) - var(--header-height, 0px)
  );
  text-align: center;
  align-items: center;
  display: grid;
}

.customer-account-category {
  border-block-end-width: 1px;
  padding-block-end: 0.625rem;
}

/* .customer-account-overview {
  grid-gap: 2.5rem 3rem;
  display: grid;
} */

.customer-account-order-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem;
  display: grid;
}

.customer-account-order-grid > div > p {
  margin: 0.5rem 0;
}

@media screen and (min-width: 1000px) {
  .customer-account-overview {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }
}

@media screen and (min-width: 1150px) {
  /* .customer-account-overview {
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: 3.75rem;
  } */
}

.customer-address-list {
  --addresses-per-row: 1;
  grid-template-columns: repeat(var(--addresses-per-row), minmax(0, 1fr));
  gap: 3rem 3.75rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .customer-address-list {
    --addresses-per-row: 2;
  }
}

@media screen and (min-width: 1000px) {
  .customer-address-list {
    --addresses-per-row: 3;
  }
}

.customer-order {
  grid: auto / minmax(0, 1fr);
  gap: 3rem;
  display: grid;
}

.customer-order__details {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 3rem;
  display: grid;
}

.customer-order__address-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-content: start;
  gap: 2.5rem 3.75rem;
  display: grid;
}

@media screen and (min-width: 1150px) {
  .customer-order {
    grid: auto / auto-flow minmax(0, 1fr) 14rem;
    column-gap: 3.75rem;
  }
}

@media screen and (min-width: 1400px) {
  .customer-order {
    grid-auto-columns: minmax(0, 1fr) 18rem;
  }
}

.announcement-bar {
  --announcement-bar-gutter: 0.625rem;
  text-align: center;
  font-size: var(--announcement-bar-font-size);
  place-content: center;
  column-gap: 0.75rem;
  padding-block: 1em;
  padding-inline-start: max(var(--announcement-bar-gutter), 50% - var(--container-max-width) / 2);
  padding-inline-end: max(var(--announcement-bar-gutter), 50% - var(--container-max-width) / 2);
  display: flex;
}

.announcement-bar__link > a {
  text-decoration: underline;
}

@media (max-width: 699px) {
  .announcement-bar {
    justify-content: space-evenly;
  }
}

.announcement-bar__carousel {
  flex-grow: 1;
  place-items: center;
  max-width: 35rem;
  display: grid;
}

.announcement-bar__carousel > * {
  grid-area: 1 / -1;
}

.announcement-bar__carousel > :not(.is-selected) {
  visibility: hidden;
}

.announcement-bar__usp-icon {
  margin-right: 0.4rem;
}

@media screen and (min-width: 700px) {
  .announcement-bar {
    --announcement-bar-gutter: var(--container-gutter);
    /* justify-content: space-around; */
    /* column-gap: 2.5rem; */
  }
}

.before-after {
  --before-after-content-inset-inline: 1.25rem;
  --before-after-content-inset-block: 1rem;
  --before-after-cursor-size: 3.125rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  display: grid;
  position: relative;
}

.before-after > * {
  grid-area: 1 / -1;
}

.no-js .before-after {
  --before-after-cursor-position: var(--before-after-initial-cursor-position);
}

.before-after__after-image {
  z-index: 1;
}

.before-after__content-wrapper {
  position: absolute;
}

.before-after__cursor {
  pointer-events: auto;
  filter: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 1px 1px #0000000d);
  z-index: 1;
  display: grid;
  position: relative;
}

.before-after__cursor:before {
  content: "";
  background: rgb(var(--before-after-cursor-background));
  z-index: -1;
  position: absolute;
}

.before-after__cursor svg {
  width: var(--before-after-cursor-size);
  height: var(--before-after-cursor-size);
}

.before-after--horizontal {
  cursor: ew-resize;
}

.before-after--horizontal .before-after__after-image {
  clip-path: inset(0 0 0 var(--before-after-cursor-position, 0%));
}

[dir="rtl"] :is(.before-after--horizontal .before-after__after-image) {
  clip-path: inset(0 var(--before-after-cursor-position, 0%) 0 0);
}

.before-after--horizontal .before-after__before-image .before-after__content-wrapper {
  justify-items: start;
  inset-block-end: var(--before-after-content-inset-block);
  inset-inline-start: var(--before-after-content-inset-inline);
}

.before-after--horizontal .before-after__after-image .before-after__content-wrapper {
  text-align: end;
  justify-items: end;
  inset-block-end: var(--before-after-content-inset-block);
  inset-inline-end: var(--before-after-content-inset-inline);
}

.before-after--horizontal .before-after__cursor {
  justify-self: start;
  place-items: center start;
  inset-inline-start: calc(var(--before-after-cursor-position, 0%) - var(--before-after-cursor-size) / 2);
}

.before-after--horizontal .before-after__cursor:before {
  width: 0.125rem;
  height: 100%;
  inset-inline-start: calc(var(--before-after-cursor-size) / 2);
}

.before-after--vertical {
  cursor: ns-resize;
}

.before-after--vertical .before-after__after-image {
  clip-path: inset(var(--before-after-cursor-position, 0%) 0 0 0);
}

.before-after--vertical .before-after__before-image .before-after__content-wrapper {
  justify-items: start;
  inset-block-start: var(--before-after-content-inset-block);
  inset-inline-start: var(--before-after-content-inset-inline);
}

.before-after--vertical .before-after__after-image .before-after__content-wrapper {
  justify-items: start;
  inset-block-end: var(--before-after-content-inset-block);
  inset-inline-start: var(--before-after-content-inset-inline);
}

.before-after--vertical .before-after__cursor {
  align-self: start;
  place-items: start center;
  inset-block-start: calc(var(--before-after-cursor-position, 0%) - var(--before-after-cursor-size) / 2);
}

.before-after--vertical .before-after__cursor:before {
  width: 100%;
  height: 0.125rem;
  inset-block-start: calc(var(--before-after-cursor-size) / 2);
}

@media screen and (max-width: 699px) {
  .before-after {
    --before-after-cursor-size: 2.5rem;
  }

  .before-after .button {
    padding: 0.45rem 1.5rem;
  }
}

@media screen and (min-width: 700px) {
  .before-after {
    --before-after-content-inset-inline: 2.5rem;
    --before-after-content-inset-block: 2rem;
  }

  .before-after__content-wrapper:has(.button) {
    --before-after-content-inset-block: 2.5rem;
  }
}

.blog-tags {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  display: flex;
}

.article {
  --article-wrapper-offset: 0px;
  --article-wrapper-padding-inline: 0px;
  padding-block-end: var(--section-vertical-spacing);
}

.article__toolbar {
  visibility: hidden;
  z-index: 1;
  width: 100vw;
  padding-block: 1rem;
  transition:
    transform 0.2s,
    visibility 0.2s,
    inset-block-start 0.15s ease-in-out;
  position: fixed;
  inset-block-start: var(--sticky-area-height);
  transform: translateY(-100%);
}

.article__toolbar.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.article__toolbar .social-media {
  gap: 0.75rem 1rem;
}

.article__toolbar .social-media svg {
  width: 1rem;
  height: 1rem;
}

.article__image {
  overflow: hidden;
}

.article__image > img {
  height: var(--article-image-height);
  object-fit: cover;
}

.article__wrapper {
  padding: 1.5rem var(--article-wrapper-padding-inline) 0;
  background: rgb(var(--background));
  gap: 5rem;
  margin-inline-start: max(
    var(--container-gutter),
    50% - var(--container-max-width) / 2 - var(--article-wrapper-padding-inline)
  );
  margin-inline-end: max(
    var(--container-gutter),
    50% - var(--container-max-width) / 2 - var(--article-wrapper-padding-inline)
  );
  display: grid;
  position: relative;
}

.article__image + .article__wrapper {
  margin-block-start: var(--article-wrapper-offset);
}

.article__comments {
  gap: inherit;
  scroll-margin-block-start: calc(var(--sticky-area-height) + 20px);
  display: grid;
}

.article__footer {
  gap: 2.5rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .article {
    --article-wrapper-offset: -2.75rem;
    --article-wrapper-padding-inline: 3.125rem;
  }

  .article__wrapper {
    gap: 6.25rem;
    padding-block-start: 2.5rem;
  }

  .article__footer {
    grid: auto / auto-flow minmax(0, 1fr);
    align-items: center;
  }
}

@media screen and (min-width: 1000px) {
  .article {
    --article-wrapper-offset: -4.375rem;
  }
}

.comment {
  gap: 1.125rem;
  display: grid;
}

.comment:not(:first-child) {
  padding-block-start: 2rem;
}

.cart-page {
  align-items: start;
  row-gap: max(4rem, var(--section-vertical-spacing-tight));
  display: grid;
}

.cart-footer {
  flex-direction: column;
  gap: 1.5rem;
  display: flex;
}

.cart-recap {
  gap: 0.5rem;
  display: grid;
}

.cart-recap [type="submit"] {
  margin-block-start: 1rem;
}

@media screen and (min-width: 700px) {
  .cart-footer {
    flex-direction: row;
    gap: 3rem;
  }

  .cart-footer > :not(:only-child) {
    width: min(24rem, 100%);
  }

  .cart-recap {
    text-align: end;
    justify-items: end;
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 1000px) {
  .cart-page {
    row-gap: max(6rem, var(--section-vertical-spacing-tight));
  }
}

.cart-drawer::part(body) {
  padding-block: 0;
}

:is(
    .cart-drawer:has(.cart-drawer__order-note[open])::part(header),
    .cart-drawer:has(.cart-drawer__order-note[open])::part(body)
  ) {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s;
}

.cart-drawer:not(:has(.cart-drawer__footer:only-child))::part(footer) {
  padding-block-start: calc(var(--drawer-footer-padding-block) - 0.5rem);
}

.cart-drawer .free-shipping-bar {
  font-size: var(--text-sm);
  border-block-end-width: 1px;
  margin-inline-start: calc(-1 * var(--drawer-body-padding-inline));
  margin-inline-end: calc(-1 * var(--drawer-body-padding-inline));
  padding-block: 0.5rem;
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
}

.cart-drawer__items {
  gap: 1.5rem;
  padding-block-start: var(--drawer-body-padding-block);
  padding-block-end: var(--drawer-body-padding-block);
  display: grid;
}

.cart-drawer__complementary-products {
  padding-inline: var(--drawer-body-padding-inline);
  border-block-start-width: 1px;
  padding-block: 1.25rem;
  margin-inline: calc(-1 * var(--drawer-body-padding-inline)) !important;
  row-gap: 1.25rem !important;
}

.cart-drawer__button-price {
  align-items: center;
  display: flex;
}

.cart-drawer__button-price:before {
  content: "";
  background: currentColor;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  margin-inline-end: 1.125rem;
}

.cart-drawer__footer {
  align-items: start;
  gap: 1rem;
  display: grid;
}

.cart-drawer__order-note {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  box-shadow: 1px 0 6px rgb(var(--border-color));
  z-index: 2;
  border-block-start-width: 1px;
  width: 100%;
  padding-block-start: calc(var(--drawer-footer-padding-block) - 0.5rem);
  padding-block-end: var(--drawer-footer-padding-block);
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
  display: none;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
}

@media screen and (min-width: 700px) {
  .cart-drawer__complementary-products {
    padding-block: 2rem;
    row-gap: 1rem !important;
  }
}

.collection-banner {
  display: block;
  position: relative;
}

.collection-banner .breadcrumb {
  z-index: 2;
}

.collection {
  --collection-gap: 2rem;
  --collection-grid-template: minmax(0, 1fr);
  --collection-sidebar-width: 15rem;
  grid-template-columns: var(--collection-grid-template);
  align-items: start;
  gap: var(--collection-gap);
  margin-block-end: var(--section-vertical-spacing);
  scroll-margin-block-start: calc(var(--collection-toolbar-height, 0px) + 20px);
  display: grid;
}

.collection:only-child {
  margin-block-start: 1.5rem;
}

.collection__main {
  row-gap: var(--section-stack-gap);
  display: grid;
}

.collection .product-list[collection-mobile-layout="medium"] {
  --product-list-items-per-row: var(--collection-items-per-row-medium);
}

.collection .product-list[collection-mobile-layout="large"] {
  --product-list-items-per-row: var(--collection-items-per-row-large);
}

@media screen and (min-width: 700px) {
  .collection:only-child {
    margin-block-start: 3rem;
  }

  .collection .product-list[collection-desktop-layout="compact"] {
    --product-list-items-per-row: var(--collection-items-per-row-compact);
  }

  .collection .product-list[collection-desktop-layout="compact"] .product-card__info {
    display: none;
  }

  .collection .product-list[collection-desktop-layout="medium"] {
    --product-list-items-per-row: var(--collection-items-per-row-medium);
  }

  .collection .product-list[collection-desktop-layout="large"] {
    --product-list-items-per-row: var(--collection-items-per-row-large);
  }
}

@media screen and (min-width: 1150px) {
  .collection {
    --collection-gap: 3.125rem;
  }
}

.collection-toolbar {
  box-shadow:
    0 1px rgb(var(--border-color)),
    0 -1px rgb(var(--border-color));
  background-color: rgb(var(--background));
  z-index: 2;
  min-height: 3em;
  transition: inset-block-start 0.15s ease-in-out;
  display: flex;
  position: sticky;
  inset-block-start: var(--sticky-area-height);
  inset-inline-start: 0;
}

.collection-toolbar .popover {
  --popover-block-offset: 0px;
  inset-inline-end: -1px;
}

.collection-toolbar__button-list {
  flex-grow: 1;
  display: flex;
}

.collection-toolbar__button {
  padding-block: 0.75rem;
}

.collection-toolbar__button :is(svg) {
  transition: transform 0.2s;
}

.collection-toolbar__button[aria-expanded="true"] svg {
  transform: rotateZ(180deg);
}

.collection-toolbar__button-container {
  width: 100%;
  position: relative;
}

.collection-toolbar__button-container + .collection-toolbar__button-container {
  border-inline-start-width: 1px;
}

.collection-toolbar__layout-switch-list {
  border-inline-start-width: 1px;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding-inline: 1.25rem;
  display: flex;
}

.collection-toolbar__button {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.collection-toolbar__button:hover,
.collection-toolbar__button.is-active {
  opacity: 1;
}

@media screen and (min-width: 700px) {
  .collection-toolbar {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .collection-toolbar__button {
    padding-block: 1.125rem;
  }

  .collection-toolbar__button-list {
    flex-direction: row-reverse;
    flex: none;
  }

  .collection-toolbar__button-container {
    border-inline-start-width: 1px;
  }

  .collection-toolbar__button-container > .collection-toolbar__button {
    width: max-content;
    padding-inline: 2.875rem;
  }

  .collection-toolbar__layout-switch-list {
    border-inline-width: 0 1px;
    padding-inline: 1.875rem;
  }

  .collection-toolbar__products-count {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
  }
}

.facets .accordion-list .accordion:first-child {
  border-block-start-width: 0;
}

.facets .accordion-list .accordion:first-child .accordion__toggle {
  padding-block-start: 0;
}

.facets .accordion-list .accordion:last-child {
  border-block-end-width: 0;
}

.facets .accordion-list .accordion:last-child .accordion__content {
  padding-block-end: 0;
}

.active-facets {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  display: flex;
}

.facets-clear-all {
  margin-inline-start: 0.625rem;
}

/*
  .removable-facet base styling now lives at the bottom of this file, under the "APD REDESIGN — FILTERS BAR" section,
  restyled as a solid colour pill to match Figma. .facets-sidebar is no longer used (APD redesign replaced the
  sticky sidebar with the full-width facets-topbar-wrap bar - see sections/main-collection.liquid).
*/

.collection-list {
  gap: var(--collection-list-gap, 0px);
  display: flex;
}

.collection-list .collection-card {
  flex-basis: var(
    --collection-list-item-size,
    calc(
      100% / var(--collection-list-items-per-row) - var(--collection-list-gap, 0px) *
        (var(--collection-list-items-per-row) - 1) / var(--collection-list-items-per-row)
    )
  );
}

.collection-list--text-outside {
  row-gap: 3rem;
}

.collection-card {
  align-content: start;
  gap: 1.5rem;
  display: grid;
}

.countdown {
  gap: var(--section-stack-gap);
  display: grid;
}

.countdown__timer {
  text-transform: uppercase;
  text-align: center;
  grid: auto / auto-flow minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  display: grid;
}

.countdown__timer-item {
  display: grid;
}

.countdown__timer-flip {
  --heading-letter-spacing: 0;
  justify-content: center;
  column-gap: 2px;
  display: flex;
}

.countdown__timer-flip::part(digit) {
  color: rgb(var(--countdown-timer-flip-text-color));
}

.countdown__timer-flip--background::part(digit) {
  background: rgb(var(--countdown-timer-flip-background));
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
}

@media screen and (max-width: 699px) {
  .countdown__content {
    text-align: center;
  }

  .countdown__timer {
    justify-content: center;
  }
}

@media screen and (min-width: 700px) {
  .countdown {
    grid-template-columns: minmax(250px, 570px) max-content;
    justify-content: space-between;
    gap: 4rem;
    width: 100%;
  }

  .countdown__timer-item {
    row-gap: 0.5rem;
  }

  .countdown--reverse {
    grid-template-columns: max-content minmax(250px, 570px);
  }

  .countdown--reverse .countdown__timer {
    order: -1;
  }
}

@media screen and (min-width: 1000px) {
  .countdown__timer {
    column-gap: 1rem;
  }
}

.countdown-condensed {
  column-gap: 2.25rem;
  justify-content: var(--countdown-condensed-justify-content, space-between);
  padding: 1rem var(--container-gutter);
  display: flex;
}

.countdown-condensed__text {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  display: flex;
}

.countdown-condensed__timer {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  flex-shrink: 0;
  align-items: center;
  column-gap: 0.25rem;
  display: flex;
}

.countdown-condensed__timer-item {
  display: grid;
}

.countdown-condensed__timer-flip {
  font-size: 0.625rem;
  font-weight: bolder;
}

.countdown-condensed__timer-unit {
  font-size: 0.5rem;
}

@media screen and (max-width: 699px) {
  .countdown-condensed .h6 {
    font-size: 0.625rem;
  }
}

@media screen and (min-width: 700px) {
  .countdown-condensed {
    column-gap: 5rem;
  }

  .countdown-condensed__timer {
    column-gap: 0.75rem;
  }

  .countdown-condensed__timer-flip {
    font-size: 0.875rem;
  }

  .countdown-condensed__timer-unit {
    font-size: 0.875rem;
  }
}

.footer {
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  padding-block-start: var(--section-vertical-spacing);
  padding-block-end: min(var(--section-vertical-spacing), 3rem);
}

.footer__inner {
  row-gap: min(var(--section-vertical-spacing), 3rem);
  display: grid;
}

.footer__block-list {
  justify-content: start;
  align-items: start;
  gap: min(var(--section-vertical-spacing), 2.5rem);
  display: grid;
}

.footer__aside {
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  display: grid;
}

@media (min-width: 650px) {
  .footer__aside {
    grid-template-columns: 1fr auto 1fr;
  }
}

@media (min-width: 1024px) {
  .footer__aside > :nth-child(1) {
    justify-self: start;
  }

  .footer__aside > :nth-child(2) {
    justify-self: center;
  }

  .footer__aside > :nth-child(3) {
    justify-self: end;
  }
}

@media (max-width: 650px) {
  .footer__aside {
    justify-content: start;
  }
}

.footer__aside .payment-methods {
  justify-content: center;
  max-width: 30rem;
}

.footer-social-links {
  display: flex;
  align-items: center;
  justify-content: start;
}

.social-link {
  margin-right: 2rem;
}

@media screen and (min-width: 700px) {
  .footer__block-list {
    justify-content: var(--footer-content-justify-items);
    flex-wrap: wrap;
    gap: 3rem;
    display: flex;
  }

  .footer__block {
    flex: auto;
  }

  .footer__block--links,
  .footer__block--image {
    flex-grow: 0;
    max-width: 14rem;
  }

  .footer__block--newsletter {
    flex-basis: 14rem;
    max-width: 18rem;
  }

  .footer__block--text {
    flex-basis: 14rem;
    max-width: 24rem;
  }
}

@media screen and (min-width: 1000px) {
  .footer__aside {
    grid-auto-flow: column;
    justify-content: space-between;
  }

  .footer__aside .payment-methods {
    justify-content: end;
  }
}

@media screen and (min-width: 1150px) {
  .footer__block-list {
    justify-content: var(--footer-content-justify-items);
    column-gap: 3.75rem;
  }
}

@media screen and (min-width: 1400px) {
  .footer__block-list {
    column-gap: 5rem;
  }
}

.gift-card__image {
  max-width: 16.875rem;
  margin-inline: auto;
}

.gift-card__redeem-info {
  padding: 1.5rem;
}

.gift-card__save {
  place-items: center;
  gap: 1.5rem;
  display: grid;
}

.gift-card__qr-code {
  width: 5rem;
  height: 5rem;
}

@media screen and (min-width: 700px) {
  .gift-card__redeem-info {
    padding: 2rem;
  }

  .gift-card__save {
    grid-auto-flow: column;
  }
}

.faq {
  justify-content: center;
  align-items: start;
  column-gap: 3.75rem;
  display: flex;
}

.faq__toc {
  align-content: start;
  justify-items: start;
  gap: 0.75rem;
  min-width: 150px;
  max-width: 300px;
  transition: inset-block-start 0.15s ease-in-out;
  display: grid;
  position: sticky;
  inset-block-start: calc(var(--sticky-area-height) + 1.25rem);
}

.faq__toc-item {
  text-underline: none;
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
  transition: background-size 0.3s ease-in-out;
}

.faq__toc-item.is-active {
  background-size: 100% 1px;
}

.faq__content {
  flex-basis: 650px;
}

.faq__category {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  scroll-margin-block-start: 1.25rem;
  display: flex;
}

.faq__category + .accordion {
  margin-block-start: 1.25rem;
}

.accordion + .faq__category {
  margin-block-start: 3rem;
}

.featured-collections-navigation {
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  justify-content: safe center;
  column-gap: 1.5rem;
  display: grid;
}

.featured-collections-navigation > button:not(:only-child) {
  padding-block-end: 2px;
  position: relative;
}

.featured-collections-navigation > button:not(:only-child):after {
  content: "";
  width: calc(100% - var(--heading-letter-spacing));
  transform-origin: var(--transform-origin-start);
  background: currentColor;
  height: 1px;
  transition: transform 0.3s;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  transform: scaleX(0);
}

.featured-collections-navigation > button:not(:only-child)[aria-current="true"]:after {
  transform: scaleX(1);
}

@media screen and (min-width: 700px) {
  .featured-collections-navigation {
    column-gap: 2.5rem;
  }
}

.featured-collections-carousel {
  display: grid;
  position: relative;
}

.featured-collections-carousel > * {
  grid-area: 1 / -1;
}

.featured-collections-carousel__item {
  gap: var(--section-stack-gap);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.featured-collections-carousel__item:not(.is-selected) {
  display: none;
}

.header {
  --header-show-transparent-logo: 0;
  grid: var(--header-grid);
  justify-content: center;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: var(--header-padding-block);
  box-shadow: 0 -1px rgb(var(--header-separation-border-color)) inset;
  padding-block-start: var(--header-padding-block);
  padding-block-end: var(--header-padding-block);
  padding-inline-start: var(--container-gutter);
  padding-inline-end: var(--container-gutter);
  transition:
    background 0.2s,
    color 0.2s,
    border 0.2s,
    box-shadow 0.2s,
    transform 0.15s ease-in-out;
  display: grid;
  position: relative;
}

.header.is-hidden {
  transform: translateY(-100%);
}

.shopify-section--header:has(.header.is-hidden) {
  pointer-events: none;
}

:has(.shopify-section:first-child [allow-transparent-header]):not(
    :has(.shopify-section--header + .shopify-section-group-header-group)
  )
  .header {
  margin-block-end: calc(-1 * var(--header-height, 0px));
}

:has(.shopify-section:first-child [allow-transparent-header]):not(
    :has(.shopify-section--header + .shopify-section-group-header-group)
  )
  .header:not(:hover, .is-solid, :has([open])) {
  --header-show-transparent-logo: 1;
  --header-separation-border-color: 0 0 0 / 0;
  --background: 0 0 0 / 0;
  --background-gradient: 0 0 0 / 0;
  --border-color: 0 0 0 / 0;
  --text-color: var(--header-transparent-header-text-color);
}

:has(.shopify-section:first-child [allow-transparent-header]):not(
    :has(.shopify-section--header + .shopify-section-group-header-group)
  )
  .header:not(:hover, .is-solid, :has([open]))
  .link-faded {
  color: currentColor;
  transition: none;
}

.header__cart-dot {
  box-shadow: 0 0 0 2px rgb(var(--background));
  background-color: currentColor;
  border-radius: 100%;
  width: 0.5rem;
  height: 0.5rem;
  transition: transform 0.2s ease-in-out;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -0.125rem;
  transform: scale(0);
}

.header__cart-dot.is-visible {
  transform: scale(1);
}

@media screen and (min-width: 700px) {
  .header {
    column-gap: 2.5rem;
  }
}

.header__logo {
  grid-area: logo;
  justify-self: start;
  position: relative;
}

.header__logo-image {
  width: var(--header-logo-width);
  max-width: 100%;
  height: auto;
}

.header__logo-image:where(:not(:only-of-type)) {
  opacity: calc(1 - var(--header-show-transparent-logo));
  transition: opacity 0.2s;
}

.header__logo-image--transparent {
  opacity: var(--header-show-transparent-logo);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.header__logo-text {
  display: block;
}

.header__primary-nav {
  flex-wrap: wrap;
  grid-area: primary-nav;
  align-items: center;
  gap: 0.625rem 1.25rem;
  display: flex;
}

.header__primary-nav-item:before {
  content: attr(data-title);
  transform-origin: var(--transform-origin-start);
  background: rgb(var(--text-color));
  color: #0000;
  font-size: var(--text-h6);
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  pointer-events: none;
  width: max-content;
  height: 2px;
  transition: transform 0.2s ease-in-out;
  position: absolute;
  inset-block-end: 0;
  transform: scaleX(0);
}

/* hide hover on link item */

/* .header__primary-nav-item:hover:before {
  transform: scaleX(1);
} */

.header__primary-nav-item:has(.header__dropdown-menu):before {
  display: none;
}

@media screen and (max-width: 699px) {
  .header__nav-icon {
    width: 1.375rem;
  }
}

@media screen and (min-width: 1000px) {
  .header__primary-nav--center {
    justify-content: safe center;
  }
}

@media screen and (min-width: 1150px) {
  .header__primary-nav {
    column-gap: 2rem;
  }
}

.header__secondary-nav {
  flex-wrap: wrap;
  grid-area: secondary-nav;
  justify-content: end;
  justify-self: end;
  align-items: center;
  gap: 0.625rem 0.9rem;
  display: flex;
}

.header__secondary-nav .localization-selectors:not(:only-child) {
  margin-inline-end: 0.625rem;
}

@media screen and (min-width: 700px) {
  .header__secondary-nav {
    column-gap: 1.25rem;
  }
}

.header__dropdown-menu {
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  box-shadow: 2px 2px 6px rgb(var(--text-color) / 0.05);
  border-width: 0 1px 1px;
  width: max-content;
  min-width: 22rem;
  max-width: 17.5rem;
  padding-block: 1.125rem;
  position: absolute;
  inset-block-start: calc(100% - 2px);
}

.header__dropdown-menu:not(:has(.header__dropdown-menu)) {
  max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 20px);
  overflow: auto;
}

.header__dropdown-menu > .category-heading {
  padding: 0.8rem 1.5625rem 1rem;
}

/* hide header dropdown menu hover effect */

/* .header__dropdown-menu:before {
  content: "";
  transform-origin: var(--transform-origin-start);
  background: rgb(var(--text-color));
  width: 100%;
  height: 2px;
  transition: transform 0.25s ease-in-out 50ms;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: scaleX(0);
}

[aria-expanded="true"] > .header__dropdown-menu:before {
  transform: scaleX(1);
} */

.header__dropdown-menu :is(a, summary) {
  padding: 0.375rem 1.5625rem;
  display: block;
}

.header__dropdown-menu .header__menu-disclosure {
  position: relative;
}

.header__dropdown-menu--restrictable {
  max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 40px);
  overflow-y: auto;
}

.header__dropdown-menu .header__dropdown-menu {
  border-width: 1px;
  inset-block-start: calc(-1.125rem - 1px);
  inset-inline-start: 100%;
}

.header__dropdown-menu .header__dropdown-menu:before {
  display: none;
}

.header-search {
  z-index: -1;
  width: 100%;
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
}

.header-search::part(overlay) {
  min-height: calc(100vh - var(--sticky-area-height));
  inset-block-start: var(--sticky-area-height);
}

.header-search::part(content) {
  max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 1.25rem);
  /* background: rgb(var(--background)); */
  background: #f9f9f9;
  /* color: rgb(var(--text-color)); */
  color: #000000;
  overflow: auto;
}

@supports (max-height: 100dvh) {
  .header-search::part(content) {
    max-height: min(
      var(--header-search-max-height, 100vh),
      100dvh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 1.25rem
    );
  }
}

.header-search__form-control {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  padding-block: 0.75rem;
  display: grid;
}

.header-search__input {
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

.header-search__input:focus {
  outline: none;
}

.header-search__input::-webkit-search-decoration {
  display: none;
}

.header-search__input::-webkit-search-cancel-button {
  display: none;
}

.header-search__input::-webkit-search-results-button {
  display: none;
}

.header-search__input::-webkit-search-results-decoration {
  display: none;
}

@media screen and (min-width: 700px) {
  .header-search__form-control {
    column-gap: 1.25rem;
    padding-block: 1.5rem;
  }
}

.predictive-search {
  display: block;
}

.predictive-search__no-results {
  text-align: center;
  padding-block: 2.5rem 4rem;
}

.predictive-search__results {
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: 1.25rem 2rem;
  display: grid;
}

.predictive-search__suggestions {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 0.75rem 1.5rem;
  display: grid;
}

.predictive-search__suggestions mark {
  background: none;
  font-weight: bolder;
}

.predictive-search__tabs::part(tab-list-scrollable) {
  scrollbar-width: none;
  margin-inline-start: calc(-1 * var(--distance-to-bleed));
  margin-inline-end: calc(-1 * var(--distance-to-bleed));
  padding-inline-start: var(--distance-to-bleed);
  padding-inline-end: var(--distance-to-bleed);
  display: flex;
  overflow: auto;
}

.predictive-search__tabs::part(tab-list) {
  width: min-content;
  min-width: 100%;
}

.predictive-search__category {
  border-block-end-width: 1px;
  padding-block-end: 0.625rem;
}

.predictive-search__products {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  display: grid;
}

.predictive-search__blog-posts {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  display: grid;
}

.predictive-search__blog-posts .blog-post-card__info {
  row-gap: 0.75rem;
}

.predictive-search__collections {
  align-items: start;
  gap: var(--container-gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

@media screen and (max-width: 699px) {
  .predictive-search__suggestions {
    grid: auto / auto-flow max-content;
    row-gap: 1.25rem;
  }

  .predictive-search__products .horizontal-product-card__figure {
    max-width: 4.375rem;
  }

  .predictive-search__blog-posts .blog-post-card {
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    align-items: center;
  }
}

@media screen and (min-width: 700px) {
  .predictive-search__no-results {
    padding-block: 4.75rem 6.25rem;
  }

  .predictive-search__results {
    padding-block: 1.5rem 3rem;
  }

  .predictive-search__blog-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .predictive-search__blog-posts .blog-post-card__category {
    font-size: 0.875rem;
  }
}

@media screen and (min-width: 1000px) {
  .predictive-search__results--with-suggestions {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .predictive-search__products {
    grid-template-columns: repeat(var(--product-list-items-per-row, 4), minmax(0, 1fr));
  }

  .predictive-search__blog-posts {
    grid-template-columns: repeat(var(--blog-post-list-items-per-row, 4), minmax(0, 1fr));
  }

  .predictive-search__collections {
    grid-template-columns: repeat(var(--collection-list-items-per-row), minmax(0, 1fr));
  }
}

.mega-menu {
  position: absolute;
  z-index: 20;
  --mega-menu-gap: 4.5rem;
  --mega-menu-linklist-gap: 4.5rem;
  --mega-menu-promo-gap: 2rem;
  max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 20px);
  justify-content: safe start;
  align-items: start;
  column-gap: var(--mega-menu-gap);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  border-block-end-width: 1px;
  width: 100%;
  height: 500px;
  padding-block: 2.5rem;
  padding-inline-start: var(--container-gutter);
  padding-inline-end: var(--container-gutter);
  display: flex;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  overflow-y: auto;
}

.mega-menu--reverse {
  flex-direction: row-reverse;
}

.mega-menu--reverse .mega-menu__promo {
  justify-content: flex-start;
}

.mega-menu__linklist {
  gap: var(--mega-menu-linklist-gap);
  flex: 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 415px;
}

.mega-menu__linklist > * {
  max-width: 280px;
}

.mega-menu__promo {
  justify-content: flex-end;
  column-gap: var(--mega-menu-promo-gap);
  flex: 0 auto;
  display: flex;
}

.mega-menu__promo > * {
  flex: 315px;
  min-width: 240px;
  max-width: 315px;
}

@media screen and (min-width: 1400px) {
  .mega-menu {
    --mega-menu-gap: 6.25rem;
    --mega-menu-linklist-gap: 2.5rem 6.25rem;
  }

  .mega-menu:has(.mega-menu__linklist > :nth-child(5)) {
    --mega-menu-linklist-gap: 3rem 6.5rem;
  }
}

.header-sidebar {
  --header-linklist-padding-block: 1rem;
}

.header-sidebar::part(close-button) {
  opacity: 1;
}

.header-sidebar::part(header) {
  border-block-end: none;
}

.header-sidebar::part(content) {
  box-sizing: border-box;
  overflow-x: hidden;
}

.header-sidebar::part(panel-list) {
  position: relative;
}

.header-sidebar__scroller {
  padding-block-end: var(--drawer-body-padding-block);
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
  overflow-y: auto;
}

.header-sidebar__linklist > * {
  border-color: black;
}

.header-sidebar__linklist::before > * {
  border-color: black;
}

.header-sidebar__back-button {
  border-color: black;
}

.header-sidebar__linklist-button {
  text-align: start;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-block-start: calc(var(--header-linklist-padding-block) / 2);
  padding-block-end: calc(var(--header-linklist-padding-block) / 2);
  transition: color 0.2s;
  display: flex;
}

@media screen and (pointer: fine) {
  .header-sidebar__main-panel li:has([aria-expanded="true"]) ~ li .header-sidebar__linklist-button {
    color: rgb(var(--text-color) / 0.65);
  }

  .header-sidebar__main-panel
    li:has(~ li [aria-expanded="true"]):not(:has([aria-expanded="true"]))
    .header-sidebar__linklist-button {
    color: rgb(var(--text-color) / 0.65);
  }
}

.header-sidebar__sub-panel li:has([aria-expanded="true"]) ~ li .header-sidebar__linklist-button {
  color: rgb(var(--text-color) / 0.65);
}

.header-sidebar__sub-panel
  li:has(~ li [aria-expanded="true"]):not(:has([aria-expanded="true"]))
  .header-sidebar__linklist-button {
  color: rgb(var(--text-color) / 0.65);
}

.header-sidebar__sub-panel li:has([aria-expanded="true"]) .header-sidebar__linklist-button {
  color: rgb(var(--text-color)) !important;
}

.header-sidebar__back-button {
  border-block-end-width: 1px;
  width: 100%;
  margin-block-end: 1rem;
  padding-block-start: var(--header-linklist-padding-block);
  padding-block-end: 1rem;
}

.header-sidebar__back-button.is-divided {
  margin-block-end: 0.5rem;
}

.header-sidebar__nested-linklist {
  border-inline-start-width: 1px;
  row-gap: 0.75rem;
  margin-block: 2px 1.125rem;
  margin-inline-start: 0.5rem;
  padding-inline-start: 1.5rem;
  display: grid;
}

.header-sidebar__main-panel {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: max-content;
  height: 100%;
  display: grid;
}

.header-sidebar__footer {
  position: relative;
}

.header-sidebar__footer:before {
  content: "";
  background: linear-gradient(transparent, rgb(var(--background)));
  width: 100%;
  height: 2.5rem;
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 0;
}

.header-sidebar__footer > * {
  border-color: black;
  padding-block: 1.25rem;
  padding-inline-start: var(--drawer-footer-padding-inline);
  padding-inline-end: var(--drawer-footer-padding-inline);
}

.header-sidebar__footer .localization-selectors {
  border-block-start-width: 1px;
  justify-content: flex-start;
  column-gap: 1.25rem;
}

.header-sidebar__collapsible-panel {
  width: var(--drawer-max-width);
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  height: 100%;
  display: none;
  position: absolute;
  inset-block-start: 0;
}

.header-sidebar__promo {
  grid-auto-flow: column;
  gap: 2rem 1.25rem;
  margin-block-start: 1.25rem;
  display: flex;
}

.header-sidebar__promo > * {
  min-width: 12.5rem;
}

.header-sidebar__promo > *:only-child {
  min-width: 100%;
}

.header-sidebar__linklist.divide-y .header-sidebar__linklist-button {
  padding-block-start: var(--header-linklist-padding-block);
  padding-block-end: var(--header-linklist-padding-block);
}

.header-sidebar__linklist.divide-y .header-sidebar__back-button {
  padding-block-end: var(--header-linklist-padding-block);
}

.header-sidebar__linklist.divide-y .header-sidebar__nested-linklist {
  margin-block-end: calc(0.5rem + var(--header-linklist-padding-block));
}

.header-sidebar__linklist.divide-y .header-sidebar__promo {
  margin-block-start: 0.75rem;
}

@media screen and (min-width: 700px) {
  .header-sidebar {
    --header-linklist-padding-block: 1.25rem;
  }
}

@media screen and (min-width: 1000px) {
  .header-sidebar::part(panel-list) {
    position: static;
  }

  .header-sidebar::part(content) {
    overflow-x: visible;
  }

  .header-sidebar:has(.header-sidebar__collapsible-panel[aria-activedescendant])::part(content) {
    border-inline-end: 1px solid rgb(var(--border-color));
  }

  .header-sidebar__main-panel {
    z-index: 1;
    position: relative;
  }

  .header-sidebar__collapsible-panel .header-sidebar__scroller {
    inset-block: min(var(--header-height), 5rem) 0;
    width: 100%;
    position: absolute;
  }

  .header-sidebar__promo {
    flex-direction: column;
  }

  .header-sidebar__promo > * {
    min-width: 100%;
  }
}

.image-with-text {
  display: grid;
  overflow: hidden;
}

.image-with-text > .prose {
  box-sizing: content-box;
  max-width: var(--image-with-text-content-max-width);
  margin-block: 1.5rem;
  padding-inline-start: var(--container-gutter);
  padding-inline-end: var(--container-gutter);
}

.image-with-text > :is(svg, img) {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 699px) {
  .image-with-text > .prose {
    margin-inline: auto;
  }
}

@media screen and (min-width: 700px) {
  .image-with-text {
    --image-with-text-gap: 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .image-with-text > .prose {
    padding-inline-start: var(--image-with-text-gap);
  }

  .image-with-text--reverse > :is(picture, svg, img) {
    order: 9999;
  }

  .image-with-text--reverse > .prose {
    margin-inline-start: auto;
    padding-inline-end: var(--image-with-text-gap);
  }
}

@media screen and (min-width: 1000px) {
  .image-with-text {
    --image-with-text-gap: 6rem;
  }
}

.image-with-text-block > :not(img, svg, picture) {
  background: rgb(var(--background));
  padding: 2.375rem 1.25rem;
  box-shadow: 0 1px 20px #3636364d;
}

@media screen and (min-width: 700px) {
  .image-with-text-block > :not(img, svg, picture) {
    padding: 3rem 1rem;
  }
}

.image-with-text-block--parallax {
  min-height: var(--content-over-media-height, auto);
  aspect-ratio: var(--image-with-text-block-aspect-ratio);
  transform: unset;
  clip-path: inset(0);
}

@media (prefers-reduced-motion: no-preference) {
  .image-with-text-block--parallax > svg,
  .image-with-text-block--parallax > picture img {
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }

  @supports (min-height: 100lvh) {
    :is(.image-with-text-block--parallax > svg, .image-with-text-block--parallax > picture img) {
      min-height: 100lvh;
    }
  }
}

.images-with-text-scroll {
  --sticky-area-height: calc(
    var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px) + var(--header-is-sticky, 0) *
      var(--header-height, 0px)
  );
  align-items: start;
  display: grid;
  position: relative;
}

.images-with-text-scroll:before {
  content: "";
  background: rgb(var(--images-with-text-scroll-overlay));
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.images-with-text-scroll__image-background,
.images-with-text-scroll__container {
  grid-area: 1 / -1;
}

.images-with-text-scroll__image-background {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  position: sticky;
  inset-block-start: 0;
}

.images-with-text-scroll__container {
  z-index: 1;
  place-items: start center;
  row-gap: 2rem;
  padding-block-start: var(--section-vertical-spacing);
  padding-block-end: var(--section-vertical-spacing);
  display: grid;
}

.images-with-text-scroll__item {
  display: contents;
}

.images-with-text-scroll__item:not(:first-child) > .images-with-text-scroll__image {
  opacity: 0;
}

.images-with-text-scroll__image {
  grid-area: 1 / 1;
  align-self: center;
}

.images-with-text-scroll__text {
  text-align: center;
  grid-area: 2 / 1;
  max-width: 375px;
}

@media screen and (min-width: 700px) {
  .images-with-text-scroll__container {
    row-gap: 3rem;
  }
}

@media screen and (max-width: 999px) {
  .images-with-text-scroll__item:not(.is-selected) {
    visibility: hidden;
  }

  .images-with-text-scroll__image {
    width: min(56vw, 27.5rem);
  }
}

@media screen and (min-width: 1000px) {
  .images-with-text-scroll {
    min-height: calc(100vh - var(--sticky-area-height));
  }

  .images-with-text-scroll__container {
    --image-width: min(50vw - var(--container-gutter), 575px);
    --image-height: min(var(--image-width), var(--image-width) / var(--images-with-text-scroll-master-image-ratio));
    --content-padding: calc((100vh - var(--image-height) - var(--sticky-area-height)) / 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: center;
    padding-block-start: var(--content-padding);
    padding-block-end: var(--content-padding);
  }

  .images-with-text-scroll__image {
    height: var(--image-height);
    object-fit: contain;
    object-position: center;
    position: sticky;
    inset-block-start: calc(var(--content-padding) + var(--sticky-area-height));
  }

  .images-with-text-scroll__text {
    text-align: var(--images-with-text-scroll-text-alignment);
    grid-area: auto / 2;
  }

  .images-with-text-scroll--reverse .images-with-text-scroll__image {
    grid-column: 2;
  }

  .images-with-text-scroll--reverse .images-with-text-scroll__text {
    grid-column: 1;
  }
}

.logo-list {
  grid: auto / repeat(var(--logo-list-items-per-row), minmax(0, 250px));
  justify-content: center;
  gap: var(--logo-list-gap);
  display: grid;
}

.logo-list__item {
  outline: 1px solid rgb(var(--logo-list-item-border-color));
  place-items: center;
  padding: 1.25rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .logo-list__item {
    padding: 2rem 1.5rem;
  }
}

.media-grid {
  --media-grid-column-count: 2;
  align-items: start;
  gap: var(--media-grid-gap);
  grid: auto-flow dense var(--media-grid-row-height) / repeat(var(--media-grid-column-count), minmax(0, 1fr));
  display: grid;
}

.media-grid__item {
  grid-area: span min(2, var(--media-grid-item-row-span)) / span 2;
  height: 100%;
  container-type: inline-size;
}

.media-grid__item > * {
  height: 100%;
}

@media screen and (min-width: 700px) {
  .media-grid {
    --media-grid-column-count: 12;
  }

  .media-grid__item {
    grid-area: span var(--media-grid-item-row-span) / span var(--media-grid-item-column-span);
  }
}

.multi-column {
  grid: var(--multi-column-grid);
  column-gap: var(--multi-column-gap);
  row-gap: var(--section-stack-gap);
  justify-content: var(--multi-column-content-alignment);
  display: grid;
}

.multi-column__item {
  align-content: start;
  gap: 2rem;
  display: grid;
}

.multi-column__item--overlap {
  gap: 0;
}

.multi-column__item--overlap > .prose {
  isolation: isolate;
  margin-block-start: -0.875rem;
}

.multiple-media-with-text {
  --multiple-media-with-text-gap: 2rem;
  grid: var(--multiple-media-with-text-grid);
  gap: var(--multiple-media-with-text-gap);
  display: grid;
}

.multiple-media-with-text__media-wrapper {
  grid-area: media-wrapper;
  grid: var(--multiple-media-with-text-media-grid);
  column-gap: var(--multiple-media-with-text-media-gap);
  display: grid;
}

.multiple-media-with-text__media-wrapper > * {
  grid-row: 1 / -1;
}

.multiple-media-with-text__content-wrapper {
  grid-area: content-wrapper;
}

@media screen and (min-width: 1000px) {
  .multiple-media-with-text {
    --multiple-media-with-text-gap: 2rem 4rem;
  }
}

@media screen and (min-width: 1150px) {
  .multiple-media-with-text {
    --multiple-media-with-text-gap: 2rem 7.5rem;
  }
}

.multiple-media-with-text--overlap .multiple-media-with-text__media-wrapper > :first-child {
  grid-column: 1 / 3;
}

.multiple-media-with-text--overlap .multiple-media-with-text__media-wrapper > :nth-child(2) {
  grid-column: 2 / 4;
}

@media screen and (min-width: 700px) {
  .multiple-media-with-text--overlap.multiple-media-with-text--reverse
    .multiple-media-with-text__media-wrapper
    > :first-child {
    grid-column: 2 / 4;
  }

  .multiple-media-with-text--overlap.multiple-media-with-text--reverse
    .multiple-media-with-text__media-wrapper
    > :nth-child(2) {
    grid-column: 1 / 3;
  }
}

@media screen and (min-width: 700px) {
  .newsletter .form {
    width: 35rem;
  }
}

@media screen and (min-width: 700px) {
  .newsletter-popup {
    width: 23.75rem;
    inset-inline-start: auto;
  }
}

.password {
  position: relative;
}

.password__inner {
  isolation: isolate;
  align-content: space-between;
  row-gap: 3rem;
  min-height: 100vh;
  padding-block: 1.6rem;
  display: grid;
}

@supports (height: 100dvh) {
  .password__inner {
    min-height: 100dvh;
  }
}

.password__header {
  justify-items: center;
  display: grid;
}

.password__header > * {
  grid-area: 1 / -1;
}

.password__password-button {
  margin-inline-start: auto;
}

.password__block-list {
  justify-self: center;
  row-gap: 0.625rem;
  width: min(100%, 30rem);
  display: grid;
}

.password__content,
.password__social {
  padding: 1.25rem;
}

.password__social {
  display: grid;
}

.password__social .social-media {
  justify-content: center;
}

.password__footer {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  display: flex;
}

@media screen and (min-width: 700px) {
  .password__content {
    padding: 2.5rem;
  }

  .password__footer {
    justify-content: space-between;
  }
}

.prev-next-blog-posts {
  gap: 3.125rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .prev-next-blog-posts {
    grid: auto / auto-flow minmax(min-content, 31.25rem);
    justify-content: center;
    gap: 1.875rem;
  }
}

@media screen and (min-width: 1150px) {
  .prev-next-blog-posts {
    gap: 3.75rem;
  }
}

@media screen and (min-width: 700px) {
  .privacy-banner {
    width: 31.25rem;
  }
}

.shopify-section--main-product .section-spacing {
  padding-block-start: 0;
}

.product {
  grid: var(--product-grid, none);
  align-items: start;
  gap: var(--product-gap, 2rem);
  display: grid;
}

@media screen and (min-width: 1000px) {
  .shopify-section--main-product .section-spacing {
    padding-block-start: var(--container-gutter);
  }

  .product {
    --product-gap: 3.5rem;
  }
}

@media screen and (min-width: 1150px) {
  .product {
    --product-gap: 5rem;
  }
}

.product-gallery {
  --product-gallery-gap: 1.5rem;
  --product-gallery-thumbnail-list-gap: 1rem 0.5rem;
  --product-gallery-thumbnail-size: 3.5rem;
  flex-direction: var(--product-gallery-flex-direction, column);
  align-items: start;
  gap: var(--product-gallery-gap) var(--product-gap, 0px);
  grid-area: product-gallery;
  display: flex;
  position: relative;
}

.product-gallery__zoom-button {
  z-index: 1;
  transition:
    opacity 0.2s,
    visibility 0.2s;
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 0;
}

.product-gallery__zoom-button--hidden {
  opacity: 0;
  visibility: hidden;
}

.product-gallery__image-list {
  row-gap: var(--product-gallery-gap);
  grid-auto-rows: max-content;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  display: grid;
}

.product-gallery__carousel {
  grid: var(--product-gallery-carousel-grid, auto / auto-flow 100%);
  align-items: start;
  gap: var(--product-gallery-carousel-gap, 1.5rem min(1.5rem, var(--container-gutter)));
  scroll-snap-type: var(--product-gallery-carousel-scroll-snap-type, x mandatory);
  display: grid;
  position: relative;
}

.product-gallery[allow-zoom] .product-gallery__media {
  cursor:
    var(--cursor-zoom-in-svg-url) 18 18,
    zoom-in;
}

.product-gallery__media > * {
  width: 100%;
}

.product-gallery__thumbnail-list {
  flex-shrink: 0;
  max-width: 100%;
  position: relative;
}

.product-gallery__thumbnail-scroller {
  grid-auto-columns: var(--product-gallery-thumbnail-size);
  grid-auto-flow: var(--product-gallery-thumbnail-list-grid-auto-flow, column);
  align-content: start;
  align-items: start;
  gap: var(--product-gallery-thumbnail-list-gap);
  max-height: var(--product-gallery-thumbnail-list-max-height, none);
  scroll-snap-type: both mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  grid-template-columns: none;
  display: grid;
  position: relative;
  overflow: auto;
}

.product-gallery__thumbnail-scroller::-webkit-scrollbar {
  display: none;
}

.product-gallery__thumbnail {
  border: 1px solid #0000;
  padding: 1px;
  transition: border-color 0.1s;
  position: relative;
}

.product-gallery__thumbnail[aria-current="true"] {
  border-color: currentColor;
}

.product-gallery__media-badge {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
}

@media screen and (max-width: 999px) {
  .product-gallery__carousel-with-arrows {
    align-items: center;
    display: flex;
  }

  .product-gallery__carousel-with-arrows .product-gallery__media > img {
    width: 45vw;
    margin-inline: auto;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery__thumbnail-list {
    position: sticky;
    inset-block-start: calc(var(--sticky-area-height) + 20px);
  }

  .product-gallery__media {
    scroll-margin-block-start: 1.25rem;
  }
}

.product-info {
  --product-info-gap: 1rem;
  grid-area: product-info;
}

.product-info__block-list > :not(:first-child) {
  margin-block-start: var(--product-info-gap);
}

.product-info__block-list > :not(:last-child) {
  margin-block-end: var(--product-info-gap);
}

.product-info__block-item:empty {
  display: none;
}

.product-info__block-item:not(:has(> :not([hidden]))) {
  display: none;
}

.product-info__block-item:is(
    [data-block-type="vendor"],
    [data-block-type="title"],
    [data-block-type="sku"],
    [data-block-type="price"]
  ) {
  --product-info-gap: 0.5rem;
}

.product-info__block-group:has(
    .product-info__block-item:is(
        [data-block-type="vendor"],
        [data-block-type="title"],
        [data-block-type="sku"],
        [data-block-type="price"]
      )
  ) {
  --product-info-gap: 0.5rem;
}

.product-info__block-item:is(
    [data-block-type="variant-picker"],
    [data-block-type="product-variations"],
    [data-block-type="separator"],
    [data-block-type="description"],
    [data-block-type="text"],
    [data-block-type="liquid"],
    [data-block-type="share-buttons"]
  ) {
  --product-info-gap: 2rem;
}

.product-info__block-group:has(
    .product-info__block-item:is(
        [data-block-type="variant-picker"],
        [data-block-type="product-variations"],
        [data-block-type="separator"],
        [data-block-type="description"],
        [data-block-type="text"],
        [data-block-type="liquid"],
        [data-block-type="share-buttons"]
      )
  ) {
  --product-info-gap: 1.5rem;
}

.product-info__block-item:is(
    [data-block-type="inventory"],
    [data-block-type="buy-buttons"],
    [data-block-type="pickup-availability"],
    [data-block-type="more-information"],
    [data-block-type="offers"]
  ) {
  --product-info-gap: 2rem;
}

.product-info__block-group:has(
    .product-info__block-item:is(
        [data-block-type="inventory"],
        [data-block-type="buy-buttons"],
        [data-block-type="pickup-availability"],
        [data-block-type="more-information"],
        [data-block-type="offers"]
      )
  ) {
  --product-info-gap: 2rem;
}

.product-info__block-item[data-block-type="complementary-products"] {
  --product-info-gap: 3rem;
}

.product-info__block-group:has(.product-info__block-item[data-block-type="complementary-products"]) {
  --product-info-gap: 3rem;
}

@media screen and (max-width: 699px) {
  .product-info--center
    :is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"]) {
    text-align: center;
  }

  .product-info--center :is(.badge-list, .price-list, .rating-badge) {
    justify-content: center;
  }

  .product-info--center .text-with-rating {
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (min-width: 1000px) {
  .product-info {
    position: sticky;
    inset-block-start: calc(var(--sticky-area-height) + 20px);
  }
}

.product-content-below-gallery {
  grid-area: product-content;
}

.product-content-below-gallery product-recommendations:not(:first-child) {
  margin-block-start: max(48px, var(--product-gap, 0px));
}

.product-content-below-gallery product-recommendations:not(:last-child) {
  margin-block-end: max(48px, var(--product-gap, 0px));
}

.product-content-below-gallery__description:not(:last-child) {
  margin-block-end: 1.25rem;
}

.product-info__more-info {
  border-block-width: 1px;
  justify-content: space-between;
  align-items: center;
  padding: 0.9375rem;
  display: flex;
}

.product-info__more-info > svg {
  transition: transform 0.2s ease-in-out;
}

@media screen and (pointer: fine) {
  .product-info__more-info:hover > svg {
    transform: translateX(5px);
  }
}

.variant-picker {
  margin-top: 2rem;
}

.variant-picker .popover {
  --popover-block-offset: 0.5rem;
  --popover-body-padding-inline: 1.25rem;
  width: 100%;
}

.variant-picker__option-info {
  justify-content: center !important;
  /* margin: 0.5rem 0; */
}

.variant-picker__option-values {
  justify-content: center !important;
  font-size: 14px;
}

.variant-picker .popover::part(content) {
  width: 100%;
  max-width: none;
}

:not(.is-disabled) > .variant-picker__dropdown-sold-out-label {
  display: none;
}

.buy-buttons {
  row-gap: 1rem;
  display: grid;
}

.pickup-location {
  align-items: start;
  gap: 0.25rem;
  display: grid;
}

.pickup-location + .pickup-location {
  padding-block-start: 1rem;
}

.product-offers .page-dots {
  padding-block-end: 1.5rem;
}

.product-offers__item {
  padding: 1.5rem;
}

.product-offers__list--carousel {
  grid: auto / auto-flow 100%;
  display: grid;
}

.complementary-products {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.875rem;
  max-width: 40rem;
  margin-inline: auto;
  display: grid;
}

.complementary-products__header {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.complementary-products__header--align-start {
  text-align: start;
  justify-content: space-between;
}

.complementary-products__product-list {
  gap: 1.25rem;
  display: grid;
  position: relative;
}

.complementary-products__product-list--carousel {
  grid: auto / auto-flow 100%;
}

@media screen and (max-width: 699px) {
  .complementary-products__product-list--carousel .product-card__figure {
    max-width: 11.25rem;
    margin-inline: auto;
  }
}

@media screen and (min-width: 700px) {
  .complementary-products {
    row-gap: 1rem;
  }

  .complementary-products__header {
    text-align: start;
    justify-content: space-between;
  }
}

.product-sticky-bar {
  padding: var(--container-gutter);
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  width: 100%;
  transition:
    opacity 0.2s,
    visibility 0.2s,
    inset-block 0.15s ease-in-out;
  display: block;
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
}

.product-sticky-bar.is-visible {
  opacity: 1;
  visibility: visible;
}

.product-sticky-bar__info img {
  width: 3.75rem;
}

@media screen and (min-width: 700px) {
  .product-sticky-bar {
    inset-block: var(--sticky-area-height) auto;
    background: rgb(var(--background));
    border-block-end-width: 1px;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    padding-block: 1.125rem;
    display: grid;
  }
}

.scrolling-content {
  text-align: start;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.scrolling-content[direction="right"] {
  text-align: end;
}

.scrolling-content::part(scroller) {
  min-width: max-content;
  display: inline-flex;
  position: relative;
}

.scrolling-content__item {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.scrolling-content__item > * {
  margin-inline-start: calc(var(--scrolling-content-content-gap) / 2);
  margin-inline-end: calc(var(--scrolling-content-content-gap) / 2);
}

.scrolling-content__image > img {
  max-width: 1.5em;
}

.main-search-form {
  min-width: 18.75rem;
}

.main-search__linklist {
  text-align: center;
  max-width: 25rem;
  margin-inline: auto;
}

.shop-the-look__carousel {
  z-index: 2;
  grid: auto / auto-flow 100%;
  align-items: start;
  gap: 0.625rem;
  display: grid;
  position: relative;
  overflow: visible;
}

.shop-the-look__carousel.is-expanded {
  overflow: hidden;
}

.shop-the-look__image-wrapper {
  position: relative;
  overflow: hidden;
}

.shop-the-look__hot-spot-list {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.shop-the-look__hot-spot {
  --hot-spot-size: 1rem;
  top: calc(var(--shop-the-look-hot-spot-top) - (var(--hot-spot-size) / 2));
  left: calc(var(--shop-the-look-hot-spot-left) - (var(--hot-spot-size) / 2));
  width: var(--hot-spot-size);
  height: var(--hot-spot-size);
  border-radius: var(--rounded-full);
  transition: transform 0.2s ease-in-out;
  position: absolute;
}

.shop-the-look__hot-spot:after {
  --hot-spot-after-size: calc(var(--hot-spot-size) * 2.5);
  content: "";
  top: calc(50% - var(--hot-spot-after-size) / 2);
  left: calc(50% - var(--hot-spot-after-size) / 2);
  width: var(--hot-spot-after-size);
  height: var(--hot-spot-after-size);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--background) / 0), rgb(var(--background) / 0.3));
  border-radius: var(--rounded-full);
  animation: 2s ease-in-out infinite alternate ping;
  position: absolute;
}

.shop-the-look__hot-spot[aria-current="true"] {
  transform: scale(1.3);
}

.shop-the-look__item-carousel {
  grid: auto / auto-flow 100%;
  justify-items: center;
  display: grid;
  position: relative;
}

.shop-the-look__item {
  position: relative;
}

.shop-the-look__popover .product-card__figure {
  width: 100%;
  max-width: 10rem;
  margin-inline: auto;
}

.shop-the-look__popover::part(base) {
  height: auto;
  inset: auto auto 0 0;
}

.shop-the-look__popover::part(overlay) {
  display: none;
}

@media screen and (max-width: 699px) {
  .shopify-section--shop-the-look:before {
    content: "";
    opacity: 0;
    pointer-events: none;
    background: rgb(var(--background));
    z-index: 2;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .shopify-section--shop-the-look:has(.shop-the-look__carousel.is-expanded):before {
    opacity: 1;
  }
}

@media screen and (min-width: 1000px) {
  .shop-the-look__carousel {
    grid: none;
    align-items: center;
  }

  .shop-the-look__item {
    max-width: var(--container-sm-max-width);
    grid: auto / min(550px, 60%) minmax(0, 1fr);
    grid-area: 1 / -1;
    align-items: center;
    gap: 0.3125rem;
    margin-inline: auto;
    display: grid;
  }

  .shop-the-look__item:not(.is-selected) {
    visibility: hidden;
  }

  .shop-the-look__item-product {
    grid-area: 1 / -1;
    max-width: 16.875rem;
  }

  .shop-the-look__item-product:not(.is-selected) {
    visibility: hidden;
  }

  .shop-the-look__item-content {
    opacity: 0;
    justify-items: center;
    gap: 1.5rem;
    display: grid;
  }
}

@media screen and (pointer: fine) {
  .shop-the-look__hot-spot:hover {
    transform: scale(1.3);
  }
}

.slideshow {
  --slideshow-controls-spacing: var(--container-gutter);
  background: rgb(var(--slideshow-background));
  display: block;
  position: relative;
}

.slideshow .page-dots {
  z-index: 1;
  position: absolute;
  inset-block-end: var(--slideshow-controls-spacing);
  inset-inline-end: var(--slideshow-controls-spacing);
}

.shopify-section--slideshow:first-child .slideshow[allow-transparent-header] {
  --content-over-media-row-gap: 4rem;
}

.slideshow:has(.page-dots, .slideshow__volume-control) {
  --content-over-media-row-gap: 4rem;
}

.slideshow__slide:not(.is-selected) {
  visibility: hidden;
  position: absolute;
  inset: 0;
}

.slideshow__slide-content--boxed {
  padding: 1.5rem;
}

.slideshow__slide-content--with-border {
  outline: 1px solid rgb(var(--border-color));
}

.slideshow__slide-content--with-border-offset {
  outline-offset: -0.75rem;
  padding: 2.25rem;
}

.slideshow__volume-control {
  z-index: 1;
  display: grid;
  position: absolute;
  inset-block-end: var(--slideshow-controls-spacing);
  inset-inline-start: var(--slideshow-controls-spacing);
}

.slideshow__next-section-button {
  z-index: 2;
  position: absolute;
  inset-block-end: calc(-1 * var(--circle-button-size) / 2);
  inset-inline-start: calc(50% - var(--circle-button-size) / 2);
}

.shopify-section:has(.slideshow__next-section-button) + .shopify-section {
  --section-vertical-spacing-block-start-compensation: 1.5625rem;
}

@media screen and (min-width: 700px) {
  .slideshow:has(.page-dots, .slideshow__volume-control) {
    --content-over-media-row-gap: 5rem;
  }

  .slideshow__slide-content--boxed {
    padding: 3.5rem;
  }

  .slideshow__slide-content--with-border-offset {
    outline-offset: -1rem;
  }
}

.shopify-section--testimonials {
  --section-vertical-spacing-override: calc(var(--section-vertical-spacing) + 20px);
}

.testimonial-list {
  gap: var(--section-stack-gap);
  justify-items: center;
  display: grid;
}

.testimonial-item {
  font-size: var(--testimonials-font-size);
  grid-area: 1 / -1;
  align-content: start;
  justify-items: center;
  gap: 2rem;
  max-width: 34rem;
  display: grid;
}

.testimonial-item:not(.is-selected) {
  opacity: 0;
  visibility: hidden;
}

.testimonial-carousel {
  display: grid;
}

.testimonial-list__thumbnail-scroller {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 5.625rem;
}

.testimonial-list__thumbnail {
  transition: opacity 0.2s ease-in-out;
}

.testimonial-list__thumbnail[aria-current="false"] {
  opacity: 0.25;
}

.testimonial-list__thumbnail img {
  max-width: var(--image-max-width);
}

.testimonial-list__thumbnail .placeholder {
  width: var(--image-max-width);
}

.shopify-challenge__container,
.shopify-email-marketing-confirmation__container {
  max-width: 56.25rem;
  margin-block-start: var(--section-vertical-spacing);
  margin-block-end: var(--section-vertical-spacing);
}

.shopify-policy__container {
  gap: var(--section-stack-gap);
  grid-auto-columns: minmax(0, 1fr);
  max-width: 56.25rem;
  margin-block-start: var(--section-vertical-spacing-tight);
  margin-block-end: var(--section-vertical-spacing-tight);
  display: grid;
}

.shopify-challenge__container {
  gap: 1rem;
  display: grid;
}

.shopify-challenge__container > form {
  display: contents;
}

.shopify-email-marketing-confirmation__container {
  text-align: center;
}

.shopify-policy__title h1 {
  font: inherit;
}

.text-with-icons {
  --text-with-icons-items-per-row: 2;
  --text-with-icons-column-gap: 1.5rem;
  --text-with-icons-row-gap: 2rem;
  justify-content: center;
  gap: var(--text-with-icons-row-gap) var(--text-with-icons-column-gap);
  flex-wrap: wrap;
  display: flex;
}

.text-with-icons > * {
  flex-basis: min(
    18.75rem,
    calc(
      100% / var(--text-with-icons-items-per-row) - var(--text-with-icons-column-gap, 0px) *
        (var(--text-with-icons-items-per-row) - 1) / var(--text-with-icons-items-per-row)
    )
  );
}

.text-with-icons > :only-child {
  flex-basis: min(18.75rem, 100%);
}

@media screen and (max-width: 699px) {
  .text-with-icons:not(.text-with-icons--stacked) {
    grid: auto / auto-flow 100%;
    gap: 0;
    display: grid;
  }

  .text-with-icons:not(.text-with-icons--stacked) > * {
    grid-area: 1 / -1;
    padding-inline: 2.5rem;
  }

  .text-with-icons:not(.text-with-icons--stacked) > :not(.is-selected) {
    visibility: hidden;
  }
}

@media screen and (min-width: 700px) {
  .text-with-icons {
    --text-with-icons-items-per-row: 3;
    --text-with-icons-row-gap: 2.5rem;
  }
}

@media screen and (min-width: 1000px) {
  .text-with-icons {
    --text-with-icons-items-per-row: 5;
  }

  .text-with-icons:not(:has(> :nth-child(5))) {
    --text-with-icons-items-per-row: 4;
    --text-with-icons-column-gap: 3.75rem;
  }
}

.timeline__carousel,
.timeline__item {
  display: grid;
}

:is(.timeline__carousel, .timeline__item) > * {
  grid-area: 1 / -1;
}

.timeline__item:not(.is-selected) {
  visibility: hidden;
}

.timeline__item-image-wrapper {
  overflow: hidden;
}

.timeline__item-image-wrapper :is(img, svg) {
  scale: 1.05;
}

.timeline__item-content {
  padding: var(--container-gutter);
}

@media screen and (max-width: 699px) {
  .shopify-section--timeline {
    --section-vertical-spacing: 0;
    border-block-start-width: 0;
  }

  .timeline__carousel {
    position: relative;
  }

  .timeline__carousel:after {
    content: "";
    background: #0006;
    position: absolute;
    inset: 0;
  }

  .timeline__item {
    --text-color: var(--timeline-item-mobile-text-color);
    color: rgb(var(--text-color));
  }

  .timeline__item-content {
    text-align: center;
    z-index: 1;
    align-self: center;
    padding-block: 3.75rem;
  }
}

@media screen and (min-width: 700px) {
  .timeline__item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline__item > * {
    grid-area: unset;
  }

  .timeline__item-content {
    align-self: end;
  }
}

.timeline__nav {
  white-space: nowrap;
  grid-auto-flow: column;
  justify-content: safe center;
  align-items: center;
  column-gap: 2.5rem;
  display: grid;
}

.timeline__nav > button {
  height: var(--text-h4);
  line-height: 1;
  transition:
    opacity 0.25s ease-in-out,
    font-size 0.25s ease-in-out;
  position: relative;
}

.timeline__nav > button:after {
  content: "";
  width: calc(100% - var(--heading-letter-spacing));
  transform-origin: var(--transform-origin-start);
  background: currentColor;
  height: 3px;
  transition: transform 0.25s ease-in-out;
  position: absolute;
  inset-block-end: -1.25rem;
  inset-inline-start: 0;
  transform: scaleX(0);
}

.timeline__nav > [aria-current="false"] {
  opacity: 0.65;
}

.timeline__nav > [aria-current="true"] {
  font-size: var(--text-h4);
}

.timeline__nav > [aria-current="true"]:after {
  transform: scaleX(1);
}

@media screen and (max-width: 699px) {
  .timeline__nav {
    background: rgb(var(--timeline-nav-mobile-background));
    color: rgb(var(--timeline-nav-mobile-text-color));
    padding-block: 1.25rem;
    overflow: auto hidden;
  }
}

@media screen and (min-width: 700px) {
  .timeline__nav {
    margin-block-start: var(--section-stack-gap);
  }

  .timeline__nav > button:after {
    inset-block-end: -0.5rem;
  }
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

:is(.sr-only[type="checkbox"]:focus-visible + label, .sr-only[type="radio"]:focus-visible + label) {
  outline: 2px solid highlight;
  outline: 2px solid -webkit-focus-ring-color;
}

.skip-to-content:focus-visible {
  z-index: 9999;
  clip: auto;
  color: #fff;
  background: #000;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-weight: bold;
  overflow: auto;
}

.tap-area {
  position: relative;
}

.tap-area:before {
  content: "";
  position: absolute;
  inset: -0.5rem;
}

.js .js\:hidden,
.no-js .no-js\:hidden {
  display: none;
}

@media print {
  .print\:hidden {
    display: none;
  }
}

@keyframes ping {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.8);
  }
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .features--zoom-image .zoom-image {
    transform-origin: center;
    transition: scale 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .features--zoom-image .group:hover .group-hover\:zoom {
    scale: 1.2;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js [reveal-on-scroll="true"] {
    opacity: 0;
  }
}

.border {
  border-width: 1px;
}

.border-x {
  border-inline-width: 1px;
}

.border-y {
  border-block-width: 1px;
}

.border-t {
  border-block-start-width: 1px;
}

.border-b {
  border-block-end-width: 1px;
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  border-inline-start-width: 1px;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-block-start-width: 1px;
}

.rounded-full {
  border-radius: var(--rounded-full);
}

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

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

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

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

.text-secondary-grey {
  color: #8b8b8b;
}

.text-on-sale {
  color: rgb(var(--on-sale-text));
}

.text-stroke {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}

.text-gradient {
  background-image: var(--gradient);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.text-stroke.text-gradient {
  color: rgb(var(--background));
  -webkit-text-stroke-color: transparent;
  -webkit-text-fill-color: unset;
}

.bg-error,
.bg-success,
.bg-warning {
  --border-color: var(--text-color) / 0.15;
}

.bg-error {
  background: rgb(var(--error-background));
}

.bg-success {
  background: rgb(var(--success-background));
}

.bg-warning {
  background: rgb(var(--warning-background));
}

.opacity-0 {
  opacity: 0;
}

.backdrop-blur {
  -webkit-backdrop-filter: blur(var(--backdrop-blur, 0px));
  backdrop-filter: blur(var(--backdrop-blur, 0px));
}

.filter-invert {
  filter: invert();
}

.lock {
  overflow: hidden;
}

.pointer-events-none {
  pointer-events: none;
}

.scroll-area {
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  overflow: auto hidden;
}

.hide-scrollbar {
  scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-y {
  scroll-snap-type: y mandatory;
}

.snap-start {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.snap-center {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.hidden,
.empty\:hidden:empty {
  display: none;
}

.block {
  display: block;
}

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

.contents {
  display: contents;
}

@media screen and (min-width: 700px) {
  .sm\:hidden {
    display: none;
  }

  .sm\:block {
    display: block;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table {
    display: table;
  }

  .sm\:table-cell {
    display: table-cell;
  }
}

@media screen and (min-width: 1000px) {
  .md\:hidden {
    display: none;
  }

  .md\:block {
    display: block;
  }

  .md\:grid {
    display: grid;
  }

  .md\:flex {
    display: flex;
  }

  .md\:table {
    display: table;
  }

  .md\:table-cell {
    display: table-cell;
  }
}

@media screen and (min-width: 1150px) {
  .lg\:hidden {
    display: none;
  }

  .lg\:block {
    display: block;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:table {
    display: table;
  }

  .lg\:table-cell {
    display: table-cell;
  }
}

@media (min-width: 1200px) {
  .xl\:hidden {
    display: none;
  }
}

@media screen and (max-width: 699px) {
  .sm-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 999px) {
  .md-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 1149px) {
  .lg-max\:hidden {
    display: none;
  }
}

@media (max-width: 1200px) {
  .lg-xl\:hidden {
    display: none;
  }
}

@media screen and (max-width: 1399px) {
  .xl-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 3000px) {
  .xxl-max\:hidden {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:hidden {
    display: none;
  }

  .motion-reduce\:block {
    display: block;
  }
}

.visibility-hidden {
  visibility: hidden;
}

.relative {
  position: relative;
}

.wrap {
  flex-wrap: wrap;
}

.grow {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.text-start {
  text-align: start;
}

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

.text-end {
  text-align: end;
}

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

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

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

.justify-between {
  justify-content: space-between;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: safe center;
}

.justify-items-end {
  justify-items: end;
}

.justify-self-start {
  justify-self: start;
}

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

.justify-self-end {
  justify-self: end;
}

.align-start {
  align-items: start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: end;
}

.align-baseline {
  align-items: baseline;
}

.align-self-start {
  align-self: start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: end;
}

.place-self-start {
  place-self: start;
}

.place-self-start-center {
  place-self: start center;
}

.place-self-start-end {
  place-self: start end;
}

.place-self-center {
  place-self: center;
}

.place-self-center-start {
  place-self: center start;
}

.place-self-center-end {
  place-self: center end;
}

.place-self-end {
  place-self: end;
}

.place-self-end-start {
  place-self: end start;
}

.place-self-end-center {
  place-self: end center;
}

@media screen and (min-width: 700px) {
  .sm\:text-start {
    text-align: start;
  }

  .sm\:text-center {
    text-align: center;
  }

  .sm\:text-end {
    text-align: end;
  }

  .sm\:justify-start {
    justify-content: start;
  }

  .sm\:justify-center {
    justify-content: safe center;
  }

  .sm\:justify-end {
    justify-content: end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:justify-evenly {
    justify-content: space-evenly;
  }

  .sm\:justify-items-start {
    justify-items: start;
  }

  .sm\:justify-items-center {
    justify-items: safe center;
  }

  .sm\:justify-items-end {
    justify-items: end;
  }

  .sm\:justify-self-start {
    justify-self: start;
  }

  .sm\:justify-self-center {
    justify-self: center;
  }

  .sm\:justify-self-end {
    justify-self: end;
  }

  .sm\:align-start {
    align-items: start;
  }

  .sm\:align-center {
    align-items: center;
  }

  .sm\:align-end {
    align-items: end;
  }

  .sm\:align-baseline {
    align-items: baseline;
  }

  .sm\:align-self-start {
    align-self: start;
  }

  .sm\:align-self-center {
    align-self: center;
  }

  .sm\:align-self-end {
    align-self: end;
  }

  .sm\:place-self-start {
    place-self: start;
  }

  .sm\:place-self-start-center {
    place-self: start center;
  }

  .sm\:place-self-start-end {
    place-self: start end;
  }

  .sm\:place-self-center {
    place-self: center;
  }

  .sm\:place-self-center-start {
    place-self: center start;
  }

  .sm\:place-self-center-end {
    place-self: center end;
  }

  .sm\:place-self-end {
    place-self: end;
  }

  .sm\:place-self-end-start {
    place-self: end start;
  }

  .sm\:place-self-end-center {
    place-self: end center;
  }
}

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-0 {
  width: 0;
}

.min-w-full {
  min-width: 100%;
}

.min-h-full {
  min-height: 100%;
}

.mx-auto {
  margin-inline: auto;
}

.my-auto {
  margin-block: auto;
}

.aspect-short {
  aspect-ratio: 4 / 3;
}

.aspect-tall {
  aspect-ratio: 2 / 3;
}

.aspect-square {
  aspect-ratio: 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-4\.5 {
  gap: 1.125rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-5\.5 {
  gap: 1.375rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-6\.5 {
  gap: 1.625rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-16 {
  gap: 4rem;
}

@media screen and (min-width: 700px) {
  .sm\:gap-0\.5 {
    gap: 0.125rem;
  }

  .sm\:gap-1 {
    gap: 0.25rem;
  }

  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-3\.5 {
    gap: 0.875rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-4\.5 {
    gap: 1.125rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-5\.5 {
    gap: 1.375rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-7 {
    gap: 1.75rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-12 {
    gap: 3rem;
  }

  .sm\:gap-14 {
    gap: 3.5rem;
  }

  .sm\:gap-16 {
    gap: 4rem;
  }
}

.object-cover {
  object-fit: cover;
  object-position: center;
}

.object-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.image-background {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.placeholder {
  background: rgb(var(--background-without-opacity));
  fill: rgb(var(--text-color) / 0.5);
  color: rgb(var(--text-color) / 0.5);
  display: block;
}

.placeholder--invert {
  background: rgb(var(--text-color));
  fill: rgb(var(--background-without-opacity));
  color: rgb(var(--background-without-opacity));
}

.bold {
  font-weight: bold;
}

.smallcaps {
  text-transform: uppercase;
  letter-spacing: var(--heading-letter-spacing);
  font-size: 0.625rem;
}

.text-xxs {
  font-size: 0.6875rem;
}

.text-xs {
  font-size: var(--text-size-xs);
  line-height: var(--text-line-height-xs);
}

.text-sm {
  /* font-size: var(--text-sm);
   */
  font-size: var(--text-size-sm);
  line-height: var(--text-line-height-sm);
}

.text-base {
  /* font-size: var(--text-base); */
  font-size: var(--text-size-m);
  line-height: var(--text-line-height-m);
}

.text-lg {
  font-size: var(--text-size-lg);
  line-height: var(--text-line-height-lg);
}

.text-xl {
  font-size: var(--text-size-xl);
  line-height: var(--text-line-height-lg);
}

.heading,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.prose :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--heading-font-family), sans-serif;
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  overflow-wrap: anywhere;
}

.h1,
:where(.prose h1) {
  font-size: var(--text-h1);
  line-height: var(--h1-line-height) !important;
}

.h2,
:where(.prose h2) {
  font-size: var(--text-h2);
  line-height: var(--h2-line-height) !important;
}

.h3,
:where(.prose h3) {
  font-size: var(--text-h3);
  line-height: var(--h3-line-height) !important;
}

.h4,
:where(.prose h4) {
  font-size: var(--text-h4);
  line-height: var(--h4-line-height) !important;
}

.h5,
:where(.prose h5) {
  font-size: var(--text-h5);
  line-height: var(--h5-line-height) !important;
}

.h6,
:where(.prose h6) {
  font-size: var(--text-h6);
  /* APD 2026-08-18: 1.7 is not one of the design's two line-height tokens (2.0 / 1.3). */
  line-height: 1.3;
}

.prose blockquote {
  line-height: 1.75;
}

/* APD typography classes */

.text-body {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.text-emphasis {
  font-family: var(--emphasis-font-family), sans-serif;
  letter-spacing: 0.01em;
  /* APD 2026-08-18: Figma's bold is HankenGrotesk-Black 900; weight 700 is used
     nowhere in the design file. Weight 900 added to the Google Fonts link. */
  font-weight: 900;
}

.text-emphasis__collection-title {
  font-family: var(--emphasis-font-family), sans-serif;
  letter-spacing: 0.01em;
  font-weight: 900;
  font-size: var(--text-size-m);
  line-height: var(--text-line-height-m);
}

@media (max-width: 650px) {
  .text-emphasis__collection-title {
    font-size: var(--text-size-sm);
    line-height: var(--text-line-height-sm);
  }
}

.text-emphasis.xs-uc {
  font-size: var(--text-size-xs);
  text-transform: uppercase;
  line-height: 15.6px;
}

.upper {
  text-transform: uppercase;
}

@media screen and (min-width: 700px) {
  .sm\:text-xs {
    font-size: var(--text-xs);
  }

  .sm\:text-sm {
    font-size: var(--text-sm);
  }

  .sm\:text-base {
    font-size: var(--text-base);
  }

  .sm\:text-lg {
    font-size: var(--text-lg);
  }

  .sm\:h1 {
    font-size: var(--text-h1);
    line-height: 1.5;
  }

  .sm\:h2 {
    font-size: var(--text-h2);
    line-height: 1.5;
  }

  .sm\:h3 {
    font-size: var(--text-h3);
    line-height: 1.6;
  }

  .sm\:h4 {
    font-size: var(--text-h4);
    line-height: 1.6;
  }

  .sm\:h5 {
    font-size: var(--text-h5);
    line-height: 1.7;
  }

  .sm\:h6 {
    font-size: var(--text-h6);
    line-height: 1.7;
  }
}

/* @media screen and (min-width: 1150px) {
  .h1,
  :where(.prose h1) {
    line-height: 1.3;
  }

  .h2,
  :where(.prose h2) {
    line-height: 1.4;
  }

  .h3,
  :where(.prose h3) {
    line-height: 1.5;
  }
} */

ol {
  margin-inline-start: 2ch;
}

ul {
  margin-inline-start: 1em;
}

:where(ol, ul):not(.unstyled-list) li {
  padding-inline-start: 0.25rem;
  margin-block-start: 0 !important;
}

:where(.text-center, .text-end) :is(ol, ul) {
  margin-inline: 0;
  list-style-position: inside;
}

:where(.text-center, .text-end) :is(ol, ul) li {
  padding-inline-start: 0;
}

.line-through {
  text-decoration: line-through;
}

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

.hyphenate {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.truncate-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: var(--truncate-text-max-width, 100%);
  overflow: hidden;
}

.line-clamp {
  -webkit-line-clamp: var(--line-clamp-count, 2);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.title-wish-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.product-wish {
  justify-content: center;
  align-items: start;
}

.flex {
  display: flex;
}

.center {
  align-items: center;
}

.space-around {
  justify-content: space-around;
}

@media screen and (max-width: 699px) {
  .usp-hidden {
    display: none;
  }
}

/* custom for product link css */

.product_shop-link {
  margin-bottom: 2rem;
}

@media (max-width: 999px) {
  .product_shop-link {
    display: none;
  }
}

.shop-icon {
  margin-right: 8px;
}

.product-title__bundle-text {
  margin-top: 0.5rem;
  text-align: center;
}

.line-item--unstyled-list {
  list-style-type: none;
  margin-left: 0;
}

.line-item--unstyled-list > li {
  padding-inline-start: 0 !important;
}

/* Smart Product Filter and Search Custom CSS */

@media screen and (min-width: 1000px) {
  #shopify-section-template--16217988268105__main {
    --collection-items-per-row-compact: 4 !important;
    --collection-items-per-row-medium: 3 !important;
    --collection-items-per-row-large: 2 !important;
  }
}

@media screen and (max-width: 1015px) {
  .gf-filter-trigger,
  .gf-refine-toggle-mobile {
    display: block !important;
  }
  body #gf-tree {
    position: fixed;
    top: 0;
    left: -350px !important;
    bottom: 0;
    width: 350px !important;
    height: 100%;
    overflow: auto;
    transition: all ease-in-out 200ms;
    background: #fff;
    z-index: 99999999999;
    -webkit-overflow-scrolling: touch;
  }
}

span.gf-summary {
  display: none !important;
}
.gf-actions {
  justify-content: RIGHT !important;
}

.gf-offcanvas #gf-tree {
  left: auto !important;
  right: -350px !important;
}
.gf-offcanvas.offcanvas-open #gf-tree {
  right: 0 !important;
}
.limit-by {
  display: none !important;
}

.gf-filter-heading {
  text-transform: none !important;
  margin-left: 0.75rem;
}

.gf-close-canvas {
  margin-right: 0.35rem;
}

.gf-close-canvas > svg {
  width: 16px;
  height: 16px;
  margin-right: 0.75rem;
}

.gf-block-title {
  padding: 0.75rem;
}

.gf-refine-toggle {
  margin-right: 0.75rem;
}

.selected-item.gf-option-label {
  margin: 3px 0 !important;
  /* padding: 0 0.75rem 0.75rem; */
}

#gf-tree > div.globo-selected-items-wrapper.visible-xs > div.gf-block-title {
  justify-content: end;
}
.globo-selected-items > div:nth-child(1),
.globo-selected-items > div:nth-child(2) {
  padding: 0.25rem 0.9rem 0.25rem 0.85rem;
}
.gf-option-block {
  border-bottom: none !important;
  position: relative;
}
#gf-tree > div.globo-selected-items-wrapper.visible-xs > div.gf-block-title > div {
  display: none;
}

.clear-refinements {
  background: black !important;
  border-color: black !important;
  margin-right: 3px;
}

.selected-item > a {
  border-radius: 0 !important;
}

.gf-block-title .h3::after {
  font-size: 20px !important;
}

.gf-option-block::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 4%;
  width: 90%;
  height: 1px;
  background-color: #e3e3e3;
}

.gf-option-box {
  padding: 0 0.75rem !important;
}

.gf-Checkbox {
  display: none !important;
}

.gf-block-title > .h3 > span {
  font-family: "Hanken Grotesk" !important;
  font-weight: 900;
  font-size: 14px !important;
  line-height: 15.6px;
  /* APD 2026-08-18: was `1%` — not a valid letter-spacing unit, so it fell back to
     normal. Figma is 1% OF font-size, i.e. 0.01em. */
  letter-spacing: 0.01em;
}

.gf-filter-footer button {
  background-color: black !important;
  color: white;
  font-size: 14px !important;
}

#gf-products img.gflazyload,
#gf-products img.gflazyloaded,
#gf-products img.lazyload,
#gf-products img.lazyloaded,
.rimage-outer-wrapper svg {
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: 100% !important;
}

.gf-filter-trigger > div > span > i {
  display: none !important;
}

.gf-filter-selection > div:nth-child(2) {
  background: none !important;
  border: none !important;
}

.gf-filter-selection {
  flex: none !important;
}

.gf-filter-trigger {
  flex: none !important;
}

@media (max-width: 650px) {
  .gf-filter-trigger {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  .gf-filter-selection {
    margin-bottom: 0 !important;
  }
  .gf-actions {
    margin-bottom: 0 !important;
  }
}

.gf-filter-trigger > div > span {
  font-weight: bold;
}

#gf-controls-container {
  padding: 0 !important;
  font-weight: bold !important;
}

#gf-products {
  padding: 0 !important;
}

/* APD 2026-08-13: removed a legacy `.header__primary-nav-item:first-child { display: none }`
   (was commented "hide home link on desktop"). It dated from when the menu started with a
   Home link; after the nav was rebuilt to the designer IA the first item is "New In", so the
   rule was hiding New In on every desktop viewport. The menu has no Home item. */

.uppercase {
  text-transform: uppercase;
}

/* ======================================================================================================================
   APD REDESIGN — FILTERS BAR (desktop topbar + panels, mobile drawer, active filter chips)
   Colors/spacing pulled from Figma file APD_Redesign_Website_Handoff, node 144:969 (Filters Bar) and siblings.
   Scoped to .facets-topbar-wrap / .facets-drawer / .removable-facet so nothing outside the collection filters is
   affected.
   ====================================================================================================================== */

.facets-topbar-wrap,
.facets-drawer {
  --facets-bg: #f4f2ed;
  --facets-text-muted: #949494;
  --facets-accent: #a6192e;
  --facets-border: rgba(0, 0, 0, 0.1);
}

/* ---------- Desktop topbar ---------- */

.facets-topbar-wrap {
  position: relative;
  background-color: var(--facets-bg);
  z-index: 3;
}

.facets-topbar__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 2.5rem;
  row-gap: 0.5rem;
  padding-block: 1.5625rem;
  padding-inline: var(--distance-to-bleed, var(--container-gutter, 1.5rem));
}

.facets-topbar__label {
  font-family: var(--emphasis-font-family, var(--heading-font-family)), sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--facets-text-muted);
  text-transform: uppercase;
}

.facets-topbar__item {
  position: static;
}

.facets-topbar__trigger {
  font-family: var(--text-font-family), sans-serif;
  font-size: 0.875rem;
  color: rgb(var(--text-color));
  text-transform: capitalize;
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: 0.375rem;
  display: flex;
}

.facets-topbar__trigger::-webkit-details-marker {
  display: none;
}

.facets-topbar__trigger::marker {
  content: "";
}

/* APD 2026-08-25 — the `:hover` half of this selector is DELETED (deck: "Make this filter button
   smaller and black. Remove hover effect." — the Apply/Clear colour swaps went in round 13, the
   filter NAMES kept thickening on hover). Only an OPEN filter's name is bold now. Deleted rather
   than restated as a no-op, same as round 13's hover rules. */
.facets-topbar__item[open] > .facets-topbar__trigger {
  font-weight: 900;
}

/* small accent dot next to a filter name once it has at least one value picked */
.facets-topbar__item:has(input:checked) > .facets-topbar__trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--facets-accent);
  display: inline-block;
}

.facets-topbar__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background-color: var(--facets-bg);
  border-block-start: 1px solid var(--facets-border);
  padding: 1.75rem var(--distance-to-bleed, var(--container-gutter, 1.5rem)) 2rem;
  box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.15);
  z-index: 4;
}

.facets-topbar__panel-title {
  font-family: var(--emphasis-font-family, var(--heading-font-family)), sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--facets-text-muted);
  text-transform: uppercase;
  margin-block-end: 1.25rem;
}

.facets-topbar__panel-body {
  column-gap: 3rem;
  row-gap: 0.75rem;
  display: flex;
  flex-wrap: wrap;
}

.facets-topbar__panel-body .v-stack {
  row-gap: 0.75rem;
  min-width: 10rem;
}

.facets-topbar__panel-body .h-stack {
  row-gap: 0.75rem;
  column-gap: 1.5rem;
}

/* APD 2026-09-03 — GROUPED FILTER VALUES (deck slides 15-16, R46-16 / 17 / 18). Owner-approved sample
   `output/r46_slides15_16_proposal/v3_*.png`: one line per product family, a small grey caps label at the
   left (230px column), the values wrapping to its right — so the panel is no taller than before. In the
   phone sheet the label sits above its values and the values run in two columns. */
.facets-groups {
  flex: 1 1 100%;
  width: 100%;
}

.facets-group {
  display: flex;
  align-items: flex-start;
  padding-block: 0.4375rem;
}

.facets-group__label {
  flex: 0 0 230px;
  font-family: var(--text-font-family), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a;
  padding-block-start: 2px;
  line-height: 1.3;
}

.facets-group__values {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2.5rem;
  row-gap: 0.75rem;
}

.facets-group__values > .checkbox-control {
  flex: 0 0 auto;
  min-width: 150px;
  margin: 0;
}

.facets-drawer .facets-group {
  flex-direction: column;
  align-items: stretch;
  padding-block: 0.625rem 0;
}

.facets-drawer .facets-group__label {
  flex: none;
  margin-block-end: 0.5rem;
}

.facets-drawer .facets-group__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}

.facets-drawer .facets-group__values > .checkbox-control {
  min-width: 0;
}

/* Figma "BY COVERAGE / BY OCCASIONS / ..." desktop panels: filter values sit in one horizontal wrapping row
   (compact strip) with generous, evenly-spaced gaps and vertically-centred checkbox + label. Scoped under
   .facets-topbar__panel-body so it beats the generic ".facets-topbar__panel-body .h-stack" rule above. */
.facets-topbar__panel-body .facets-topbar__values {
  flex: 1 1 100%;
  width: 100%;
  align-items: center;
  column-gap: 2.75rem;
  row-gap: 0.75rem;
}

.facets-topbar__values > .checkbox-control,
.facets-topbar__values > .facets-swatch-item {
  flex: 0 0 auto;
  margin: 0;
}

.facets-topbar__panel-actions {
  justify-content: flex-end;
  gap: 0.75rem;
  margin-block-start: 1.75rem;
  display: flex;
}

.facets-topbar__apply,
.facets-topbar__clear {
  font-family: var(--text-font-family), sans-serif;
  /* APD 2026-08-18: Figma has these at 14px / 28px / weight 900 ("APPLY FILTERS",
     "Clear"). 18px/1.0 was not a design value. Padding 14/30 matches the Figma
     button instances (paddingTop 10, paddingLeft 30 — kept close to the shipped value). */
  font-size: 0.875rem;
  line-height: 2;
  font-weight: 900;
  letter-spacing: 0.01em;
  padding: 0.875rem 1.875rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

/* APD 2026-08-24 — owner: "clear all and apply filter - black, no color change on hover".
   Apply Filters was `--facets-accent` (#a6192e) and turned BLACK on hover; Clear was white/black
   and INVERTED to black/white on hover. Both hover rules are gone rather than restated, so there is
   no state left that can re-introduce a colour change. Apply is now the black the hover used to
   reveal. `--facets-accent` itself is untouched — the active-filter chips still use it. */
.facets-topbar__apply {
  background-color: #000;
  color: #fff;
}

.facets-topbar__clear {
  background-color: #fff;
  color: #000;
  border-color: #000;
}

/* colour swatch + visible label pattern (Figma "BY COLOUR" panel).

   facets-swatch-item is now the <label> for the swatch's checkbox (see facets.liquid), not just a wrapper span, so
   the circle, the visible colour name, and the row padding around them are all one click/tap target - matching the
   full-row treatment .checkbox-control already gets for the plain-list filters (Coverage/Silhouette/Support/
   Occasions) just below. */
.facets-swatch-item {
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
  padding-block: 0.375rem;
  display: inline-flex;
}

.facets-swatch-item .color-swatch {
  --swatch-size: 16px;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
}


.facets-swatch-item__label {
  font-family: var(--text-font-family), sans-serif;
  font-size: 0.875rem;
  color: rgb(var(--text-color));
  cursor: pointer;
}

/* radio-bullet look for the plain checklist filters (Coverage/Silhouette/Support/Occasions/Size), matching the
   simple outline circle used throughout the Figma filter panels. Scoped to facets so it never touches the
   .dot-checkbox used elsewhere.

   checkbox.liquid renders these rows as a single <label class="checkbox-control"> wrapping the input, so the whole
   row (circle + text, full row width via the .v-stack grid) is one comfortably large click/tap target - not just
   the 15px circle or the text. The extra block-padding below enlarges the vertical hit area further. */
.facets-topbar__panel .checkbox-control,
.facets-drawer .checkbox-control {
  align-items: center;
  cursor: pointer;
  padding-block: 0.375rem;
}

.facets-topbar__panel .dot-checkbox,
.facets-drawer .dot-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  opacity: 1;
  /* Base .dot-checkbox sets pointer-events: none (it's a purely decorative dot elsewhere in the theme); this look is
     an actual clickable radio-style control, so restore normal hit-testing on the circle itself. Clicking anywhere
     else in the row still works because the whole row is now the <label>. */
  pointer-events: auto;
  cursor: pointer;
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: transparent;
  margin-inline-end: 0.625rem;
  flex-shrink: 0;
  transition: background-color 0.15s ease-in-out;
}

.facets-topbar__panel .dot-checkbox:checked,
.facets-drawer .dot-checkbox:checked {
  background-color: #000;
}

.facets-topbar__panel .dot-checkbox ~ :is(label, span),
.facets-drawer .dot-checkbox ~ :is(label, span) {
  opacity: 1;
  transform: none;
  font-size: 0.875rem;
  color: rgb(var(--text-color));
  cursor: pointer;
}

/* DEVIATION FROM FIGMA (2026-08-10, owner-approved): the Figma design shows the desktop filter topbar
   down to ~1000px, but between 1000px and 1150px its wide-screen gaps/paddings make the filter row wrap
   and the full-width dropdown panel look cramped. The theme's own next layout tier is 1150px, so we hide
   the topbar up to 1149px and fall back to the already-built, narrow-friendly mobile filter drawer in that
   band instead. Tell the designer: small laptops (1024-1149px) intentionally get the drawer, not the topbar. */
@media screen and (max-width: 1149px) {
  .facets-topbar-wrap {
    display: none;
  }
}

/* Counterpart to the topbar deviation: the collection filter drawer + its "Filter" toolbar button
   (which the theme normally shows only below the 1000px md breakpoint) must now show up to 1149px, so the
   1000-1149px band that lost the topbar still has working filters. Kept in lockstep with the rule above. */
@media screen and (min-width: 1150px) {
  .facets-filters-mobile-only {
    display: none;
  }
}

/* ---------- Mobile drawer (Figma Mobile_Filters / Mobile_Apply Filters / Mobile_FiltersSelected) ---------- */

/* APD 2026-09-03 (R46-4) — owner: "Change the background color to the same cream color used on the
   homepage." The sheet had been WHITE all along: this rule used to set `--dialog-background`, which
   nothing in the theme reads — the drawer's shadow parts paint from `rgb(var(--background))`, and
   `.color-scheme--dialog` pins that to 255 255 255. Measured before the fix: content background
   rgb(255,255,255) while `--dialog-background` sat there resolving to #f4f2ed and doing nothing.
   Painting the two parts directly is deliberate: overriding `--background` would recolour every
   descendant that reads the scheme, and only the sheet itself is meant to change. */
.facets-drawer::part(content),
.facets-drawer::part(footer) {
  background-color: var(--facets-bg);
  background-image: none;
}

.facets-drawer__count {
  font-size: 0.875rem;
  margin-block-start: -0.5rem;
  margin-block-end: 1rem;
}

.facets-drawer .accordion-list .accordion {
  border-block-end: 1px solid var(--facets-border);
}

.facets-drawer .accordion__toggle {
  font-family: var(--text-font-family), sans-serif;
  font-size: 0.875rem;
  text-transform: capitalize;
}

.facets-drawer [slot="footer"] .btn,
.facets-drawer [slot="footer"] a,
.facets-drawer [slot="footer"] button {
  background-color: #000;
  color: #fff;
}

/* The sheet's Clear button (added 2026-08-18, Figma `Mobile_FiltersSelected`) must not read as a
   second Apply. The older rule just above paints every link/button in the drawer footer black on
   white text, which at 700-1149px left two identical black buttons side by side, one of which
   silently discards the shopper's filters. Unscoped on purpose — it is the same white/black-border
   treatment `.facets-topbar__clear` already uses on the desktop topbar, so the two Clear controls
   look like each other at every width. The mobile block further down only sets its geometry. */
.facets-drawer [slot="footer"] .facets-drawer__clear-button {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  text-align: center;
}

/* ---------- Active filter chips (Figma "Moderate" pill in the Filters Selected states) ---------- */

.removable-facet {
  font-size: var(--text-sm);
  background-color: var(--facets-accent, #a6192e);
  color: #fff;
  border-width: 0;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  display: flex;
}

.removable-facet__label {
  color: #fff;
}

.removable-facet__remove {
  color: #fff;
  display: inline-flex;
}

/* APD 2026-08-25 — deck: "X should be smaller" (the × inside the red active-filter chip).
   Was the theme's own icon size (unset here, 20px from the sprite) below 700 and 16px above it;
   12px both, so the glyph reads as a dismiss affordance rather than a second label. */
.removable-facet__remove svg {
  stroke: currentColor;
  width: 0.75rem;
  height: 0.75rem;
}

@media screen and (min-width: 700px) {
  .removable-facet {
    font-size: var(--text-base);
    column-gap: 0.75rem;
    padding: 0.625rem 0.875rem;
  }
}

/* ==========================================================================================================
   APD 2026-08-13 — Wishlist (Swish / Wishlist King) heart placement on product cards.
   The app injects <wishlist-button-collection><wk-button class="wk-floating"> into
   .product-card__figure and positions it with a transform computed by its own floating-position
   library. Against this theme's custom <product-card> markup that transform stays at 0,0, so the
   heart lands top-LEFT over the image. The figure is already position:relative, so pinning the
   button with plain CSS is enough and keeps the app's own styling/behaviour intact.
   Figma places the heart top-right of the product image.
   ========================================================================================================== */

.product-card__figure wishlist-button-collection wk-button.wk-floating {
  top: 0.5rem !important;
  right: 0.5rem !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* ==========================================================================================================
   APD 2026-08-13 — footer logo on mobile: REVERTED. This corrects my own earlier change.
   I had forced the footer wordmark visible on mobile, assuming the theme hiding it was a bug. The
   owner reported it as "too big on mobile", so I checked the mobile recording frame-by-frame: at 0:37
   the mobile footer shows Shop / Discover / Informations, the copyright line and the payment icons —
   and NO wordmark at all. The theme's own `display: none` below 700px matched the design; my override
   was the defect. The desktop footer keeps the wordmark (frame d08) and is untouched.
   To show it small instead, re-add:
     @media (max-width: 699px) { .footer__block--image { display: block !important; } }
   together with a width cap on `.constrained-image`.
   ========================================================================================================== */

/* ==========================================================================================================
   APD 2026-08-13 — custom apple cursor (designer: "a custom mouse cursor that replaces the standard
   mouse cursor; it should move with the mouse and be clickable, just like a normal cursor").
   Source artwork: output/figma_export/.../Apple cursor/Apple cursor.png — the Figma node is a
   RECTANGLE **81 x 88**, and `assets/apd-cursor-apple.png` is exactly that (the @2x is 162 x 176).
   APD 2026-08-25: the HOTSPOT was still the old 32px asset's `0 3`. Measured off the shipped art —
   the topmost dark pixel of the arrow, i.e. its tip, is at **(1, 8)** — so the hotspot is now `1 8`
   and clicks land where the arrow points. The 08-23 round reported this change and only the PNGs
   landed; the declaration below was never updated. The @2x file has been sitting in the theme
   unused since then, so each rule now also offers an `image-set()`, with the plain `url()` line
   first as the fallback for anything that does not support it.

   ⚠⚠ AND THE 81 x 88 ART WAS NEVER REACHING THE BROWSER. Measured on the pushed theme 2026-08-25:
   the CDN returned `apd-cursor-apple.png` at **29 x 32** — the pre-08-23 art — while that same file
   in the theme, and in a fresh pull of it, is 81 x 88. An asset referenced from inside a .css file
   carries **no `?v=`** (only Liquid's `asset_url` adds one), so the CDN kept serving the bytes it
   had cached under that filename, and the owner has been looking at the small cursor ever since.
   Fixed with NEW FILENAMES — `apd-cursor-apple-81.png` / `-81-2x.png` — which cannot resolve to the
   stale cache entry. **Rule: to replace an image referenced from a stylesheet, RENAME it.** The old
   pair stays in the theme so nothing 404s if another rule still points at it.
   Applied on `html` and inherited, then re-declared for the states the browser would otherwise
   override (links, buttons, inputs) so the apple persists there too. Every rule keeps a standard
   keyword fallback after the URL, so if the image ever fails to load the cursor still behaves.
   Touch devices have no cursor, and `hover: hover` keeps this off them entirely.
   ========================================================================================================== */

@media (hover: hover) and (pointer: fine) {
  html,
  body {
    cursor: url("apd-cursor-apple-56.png") 1 6, auto;
    cursor: image-set(url("apd-cursor-apple-56.png") 1x, url("apd-cursor-apple-56-2x.png") 2x) 1 6, auto;
  }

  a,
  button,
  summary,
  label,
  select,
  [role="button"],
  [onclick],
  .button {
    cursor: url("apd-cursor-apple-56.png") 1 6, pointer;
    cursor: image-set(url("apd-cursor-apple-56.png") 1x, url("apd-cursor-apple-56-2x.png") 2x) 1 6, pointer;
  }

  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  textarea {
    cursor: url("apd-cursor-apple-56.png") 1 6, text;
    cursor: image-set(url("apd-cursor-apple-56.png") 1x, url("apd-cursor-apple-56-2x.png") 2x) 1 6, text;
  }
}

/* ==========================================================================================================
   APD 2026-08-13 — Collections page, per the designer ("follow the layout shown in Figma",
   UI/Collections.png): a two-up grid of large landscape images, with the collection name and an
   "→ See More" link sitting BELOW each image rather than over it.
   ========================================================================================================== */

.collection-card--outside {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.collection-card--outside .collection-card__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* `prose` centres its children; the design left-aligns both lines */
  gap: 0.15rem;
  text-align: start;
}

.collection-card--outside .collection-card__see-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* APD 2026-08-23 — `prose` hands every child a 16px margin-block-start. On the name that was
   already zeroed; on the "See More" row it was pushing the row 16px below the name (measured: name
   ends 506, row started 522, Figma wants 0) and, because a flex item's vertical margin counts
   towards the row's height, it also made the row 34.2px tall instead of 18.2. */
.collection-card--outside .collection-card__see-more,
.collection-card--outside .collection-card__see-more-label {
  margin-block: 0;
}

/* icon-arrow-long is drawn with a white stroke because everywhere else it sits over a photo.
   On the Collections page the caption is on the page background, so it has to follow the text. */
.collection-card--outside .collection-card__see-more svg path,
.collection-card--outside .collection-card__see-more svg line {
  stroke: currentColor;
}

/* the row gap has to clear the caption, which the default grid does not allow for */
.collection-list:has(.collection-card--outside) {
  row-gap: 3rem;
}

/* ==========================================================================================================
   APD 2026-08-23 — DESKTOP Collections page, measured off Figma `Collections` (507:4111) at its
   1440 canvas. The 2026-08-13 pass built the layout by eye and the 08-18 mobile pass deliberately
   left desktop on `image_size: auto`; the owner's list was "fix photo sizes, spacing before and
   after, animation on hover, collection names font and weight, space between names and see more,
   space between arrow and see more".

   Every number below is off the frame:
     tile              661 x 366        -> aspect-ratio 661/366, page margin 54 (--container-gutter)
     column gap        10               -> section <style>, because the tile width derives from it
     image -> name     15               -> .collection-card--outside gap
     name              20 / 500 / 26    (Hanken Grotesk, ls 1% = 0.01em)
     name -> See More  0                (26px box ends where the 18px box starts)
     See More          14 / 500 / 18.2
     arrow             32 x 16, and the label starts at x+34 -> a 2px gap, not 7.2
     See More -> next  15               -> grid row-gap
     above the grid    0                (the first tile is flush under the 64px nav bar)
     below the grid    14               (last See More 526 -> footer 540)
   ========================================================================================================== */

@media screen and (min-width: 700px) {
  /* `image_size: auto` rendered each cover at its own ratio, so tiles in the same row had
     different heights and the rows never lined up. */
  .collection-card--outside .content-over-media {
    aspect-ratio: 661 / 366;
    --content-over-media-height: auto;
  }

  .collection-card--outside .content-over-media > img {
    object-fit: cover;
  }

  .collection-card--outside {
    gap: 15px;
  }

  .collection-list:has(.collection-card--outside) {
    row-gap: 15px;
  }

  /* Name: 20/500/26. It was on `.h5` (weight 900 at the theme's heading size). `!important` on the
     line-height for the same reason as the mobile block: `.h5` sets it `!important` itself. */
  .collection-card--outside .collection-card__caption :is(p, .h5) {
    font-size: 20px;
    line-height: 1.3 !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    /* `prose` gives its paragraphs block margins, which opened a gap inside the caption */
    margin-block: 0;
  }

  /* See More: 14/500/18.2. It was `text-emphasis` (weight 900) at `text-sm` (13px). */
  .collection-card--outside .collection-card__see-more {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.01em;
    gap: 2px;
  }

  .collection-card--outside .collection-card__caption {
    gap: 0;
  }

  .collection-card--outside .collection-card__see-more svg {
    width: 32px;
    height: 16px;
    flex: none;
  }

  /* Figma opens straight into the first tile with no band of section spacing above it, and closes
     14px above the footer. The theme's default here is 7rem top and bottom at this breakpoint. */
  .shopify-section--main-list-collections .section-spacing {
    padding-block-start: 0;
    padding-block-end: 14px;
  }
}

/* ---------- hover ----------
   ⚠ CORRECTED 2026-08-23, owner: "it should only dim, not magnify in collections page".

   The first read of `Hover_Anywhere Club` was wrong. Its two stacked states are NOT one photo
   scaled — they are the SAME framing at half brightness. Fitting the second state against the
   first, per channel, over a 330x183 sample:

       R  mean 115.4 -> 58.1     B = 0.5008*A + 0.29
       G  mean  86.1 -> 43.4     B = 0.5009*A + 0.29
       B  mean  68.8 -> 34.7     B = 0.5009*A + 0.30     mean |residual| 0.30

   A straight 0.5 multiply on all three channels with no offset and no colour cast: `brightness(0.5)`
   exactly (CSS filters composite in sRGB, so this is the same thing as a black overlay at 50%).
   The residual of 0.3/255 is what says there is no scale — a magnified frame could not fit its own
   original this closely. An earlier best-fit scale search over 1.00-1.30 had already returned 1.00;
   it was read as "different photo" when it meant "same photo, dimmed".

   So hover = dim only. Nothing scales, including the label: `.features--zoom-image`'s global
   1.2-over-8s zoom is explicitly held at 1 here, because it is 3 classes deep and would otherwise
   win. The "See More" underline stays — the hover frame draws a rule under the label, and an
   underline is a link affordance, not a magnify. */
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .shopify-section--main-list-collections .collection-card--outside .content-over-media > img {
    transition: filter 0.35s ease;
  }

  /* `.features--zoom-image .group:hover .group-hover\:zoom { scale: 1.2 }` is 3 classes, so holding
     it at 1 needs 3 too. Without this the theme's global zoom re-appears under the dim. */
  .shopify-section--main-list-collections .collection-card--outside:hover .content-over-media > img {
    filter: brightness(0.5);
    scale: 1;
  }

  /* APD 2026-08-25 — THE HOVER UNDERLINE IS DELETED (deck: "Add spacing above see more, remove
     underline"). The 08-23 round reported it gone and verified `::after { content: none }`, but it
     was still here and still firing: measured on the render today it read `content: ""`, a 1px
     `rgb(0,0,0)` bar going `scale: 0 1` -> `1` over 0.35s on card hover. The comment above this
     block — "the See More underline stays, an underline is a link affordance" — is overruled by the
     owner. Nothing replaces it; hover is the 0.5 dim on the photo and nothing else. */
}

/* ==========================================================================================================
   APD 2026-08-13 — product card fixes against the Figma/prototype product cards.
   Reported by the owner comparing our New In carousel with the recording:
     · carousel arrows were invisible (the theme only reveals them on hover)
     · the product title was too large
     · sale items showed two plain prices with no indication which was which
   Figma: small uppercase title, original price struck through, discounted price in the brand red,
   and the < > arrows always present.
   ========================================================================================================== */

/* --- carousel arrows: always visible and positioned, per Figma ---
   The theme only positions them via `.floating-controls-container > .is-scrollable ~ .prev-next-button`,
   and that `is-scrollable` class is toggled by a resize hook on <scroll-carousel> that never fires on
   this build — verified: scrollWidth 4152 vs clientWidth 1344 (so it genuinely overflows), the element
   is upgraded to ScrollCarousel, yet the class is never added, even after a real viewport resize.
   Rather than depend on that internal, the arrows are positioned here with the theme's own values.
   The `--prev` / `--next` inset-inline rules already exist outside any media query and take effect
   as soon as position is absolute. */
product-list.floating-controls-container > .prev-next-button {
  opacity: 1;
  transform: none;
}

product-list.floating-controls-container > .prev-next-button[disabled] {
  opacity: 0.35;   /* visible but clearly inactive at the ends of the carousel */
}

/* --- product title: Figma sets it noticeably smaller than the theme's default 16px --- */
.product-card .product-title {
  /* APD 2026-08-18: Figma's /Product Card+Quick Add title is 12px with 81% leading
     (9.84px), weight 400. The 13px/1.3 here was an estimate from a scaled still. */
  font-size: 0.875rem;
  line-height: 0.82;
  letter-spacing: 0.01em;
  /* the markup carries .text-emphasis, but Figma's card title is regular weight */
  font-weight: 400;
}

/* --- sale pricing: struck-through original, discounted in the brand red ---
   The theme ships no styling for these custom elements at all, which is why both prices rendered
   identically in plain black and looked like a mistake.

   APD 2026-08-23 — owner review of the Sale page: "old price - should be black, cross is red a
   diagonal, new price bold". All three are what the file draws and none of them was what the theme
   did. Figma `Product Card Sale` (COMPONENT 288:2239), offsets relative to the 303 x 559 card:

     original price    the last line of the 12px / 400 name text node, fill #000000, NO opacity
                       (characters: 'Claudia's Forever One (New Colour)\n\n3,190.00 THB')
     Vector 4          x +4..+68 (64 wide), y +493..+505.5 (12.5 TALL), stroke #A6192E, 1px, CENTER
                       -> 64 x 12.5 is a DIAGONAL. An axis-aligned strike would have a ~1px-tall
                          bounding box; this one rises 12.5px across the price, atan = 11.0 deg.
     discounted price  x +83, 10px / 13 / weight 900, fill #A6192E   ('2,711.50 THB')

   `text-decoration: line-through` cannot draw that: it is always horizontal, and it is painted in
   `text-decoration-color`, which the theme sets from the text's own colour — so a red strike over
   black text is not expressible that way either. It becomes a `::after` carrying a corner-to-corner
   gradient instead. With the `to bottom right` corner keyword the 50% colour band passes exactly
   through the OTHER two corners (CSS Images 3: the gradient line is angled so its perpendicular
   through the 50% point meets the two neighbouring corners), i.e. bottom-left to top-right, and the
   band's 1px thickness is measured perpendicular to the line — a true 1px diagonal rule. Because it
   is a gradient on the element's own box it follows the price at any width or font size; the 12.5px
   box height reproduces Figma's rise (12.5 over the 73.3px price = 9.7 deg here).

   ⚠ The DIRECTION is not from the file. The cached node gives Vector 4 as a bounding box only
   (`fillGeometry` is null for it), so bottom-left -> top-right is the conventional discount slash,
   not a measurement. Swap `to bottom right` for `to top right` for the other diagonal.

   The 0.55 opacity (added 2026-08-18, when the strike was still black and full-black read as loud
   as the title) comes out — the file draws this text at full #000, and with the strike now red the
   two prices no longer compete for the same ink. */
.product-card compare-at-price,
.product-list compare-at-price {
  position: relative;
  text-decoration: none;
  color: #000;
  opacity: 1;
}

.product-card compare-at-price::after,
.product-list compare-at-price::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  /* CENTRED on the price, which is a deliberate 1.33px departure from the vector's literal offset.
     Figma puts Vector 4 at y +493..+505.5 against a 9.84px line box at +493..+502.84, i.e. the
     strike hangs 2.66px BELOW the text and only its right end crosses the glyphs. Built that way
     and rendered (output/sale_card_2026-08-23/zoom_after2.png) it reads as an underline drifting
     upwards, not as a strike — the owner asked for a "cross". Centring the 12.5px box on the 9.8px
     text box keeps the file's rise and angle and puts the line through the digits. */
  inset-block-start: 50%;
  height: 12.5px;
  translate: 0 -50%;
  pointer-events: none;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    #a6192e calc(50% - 0.5px),
    #a6192e calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

.product-card price-list:has(compare-at-price) sale-price,
.product-list price-list:has(compare-at-price) sale-price {
  color: #a6192e;
}

/* The theme hides carousel arrows outright on desktop — `@media (pointer: fine)` sets
   `.floating-controls-container > .prev-next-button { display: none }`, leaving only the
   hover-reveal variant for touch. Figma shows the < > controls present on desktop, so re-show them
   for product carousels. Kept inside the same media query so touch behaviour is untouched. */
@media screen and (pointer: fine) {
  product-list.floating-controls-container > .prev-next-button {
    display: grid;
    position: absolute;
    z-index: 1;
    inset-block-start: calc(50% - 1.5625rem);
  }
}

/* === APD GENERATED: colour swatches — do not edit by hand === */
/* Generated by generate_swatch_css.py — re-run it instead of editing.
   FALLBACK ONLY. 142 Colour option values are in use; 132 of them
   already have a real swatch (photo or hex) on the Shopify option value, and those get NO rule
   here — the theme renders their own artwork. Only the
   10 with nothing at all are listed below, of which 4 land on grey because
   Notion has no Att 1 Color and the name contains no colour word. Filling those in Notion, or
   attaching a swatch photo, and re-running is the fix.
   ⚠ Until 2026-08-26 this block covered ALL of them and overwrote the real photos. Do not
   widen it again — see collect_values() for what that broke.
   !important is required here: the theme writes --swatch-background as an INLINE style on
   each label, and an inline declaration can only be overridden this way. */

.color-swatch-input[value="BLACK" i] + .color-swatch,
input[value="BLACK" i] + label.color-swatch { --swatch-background: #111111 !important; }
.color-swatch-input[value="CATS RED" i] + .color-swatch,
input[value="CATS RED" i] + label.color-swatch { --swatch-background: #C8102E !important; }
.color-swatch-input[value="CATS TARTAN" i] + .color-swatch,
input[value="CATS TARTAN" i] + label.color-swatch { --swatch-background: #CFCFCF !important; }
.color-swatch-input[value="DAISIES CAMPING" i] + .color-swatch,
input[value="DAISIES CAMPING" i] + label.color-swatch { --swatch-background: #CFCFCF !important; }
.color-swatch-input[value="ISLAND SEA" i] + .color-swatch,
input[value="ISLAND SEA" i] + label.color-swatch { --swatch-background: #CFCFCF !important; }
.color-swatch-input[value="PEACE WHITE" i] + .color-swatch,
input[value="PEACE WHITE" i] + label.color-swatch { --swatch-background: #FFFFFF !important; }
.color-swatch-input[value="PNK SOS" i] + .color-swatch,
input[value="PNK SOS" i] + label.color-swatch { --swatch-background: #CFCFCF !important; }
.color-swatch-input[value="RED" i] + .color-swatch,
input[value="RED" i] + label.color-swatch { --swatch-background: #C8102E !important; }
.color-swatch-input[value="RED CAT" i] + .color-swatch,
input[value="RED CAT" i] + label.color-swatch { --swatch-background: #C8102E !important; }
.color-swatch-input[value="WHITE CAMPING" i] + .color-swatch,
input[value="WHITE CAMPING" i] + label.color-swatch { --swatch-background: #FFFFFF !important; }

/* === APD GENERATED: end colour swatches === */

/* --- colour-FILTER values that are not product option values -------------------------------
   APD 2026-08-26. Hand-written, and deliberately OUTSIDE the generated block above, which is
   rebuilt from Shopify product options and would wipe these on the next run.

   `Multi-color` and `Tie Dye` are values of the `custom.att_1_color` filter, not colours any
   product option carries — so nothing has ever drawn them and they showed as two empty circles in
   the Colour filter on /collections/clothing (the only page that offers them; swimwear,
   accessories and sale were swept and have none). Neither can honestly be a single colour, so both
   get a multi-hue wash rather than a flat guess. */
input[value="Multi-color" i] + label.color-swatch,
.color-swatch-input[value="Multi-color" i] + .color-swatch {
  --swatch-background: conic-gradient(#e4572e, #f3a712, #a8c686, #2e86ab, #8367c7, #e4572e) !important;
}

input[value="Tie Dye" i] + label.color-swatch,
.color-swatch-input[value="Tie Dye" i] + .color-swatch {
  --swatch-background: conic-gradient(#ff6f91, #ffc75f, #6ee7b7, #64b5f6, #ba68c8, #ff6f91) !important;
}

/* ==========================================================================================================
   APD 2026-08-13 — frame-by-frame corrections against the prototype stills
   (evidence: output/figma_vs_site/cmp_*.jpg).
   The theme setting `heading_text_transform: uppercase` uppercases EVERY heading. Figma uses
   uppercase for section and page headings (NEW IN, ONE PIECE, OUR SIGNATURE STYLE) but Title Case
   for content names — the hero campaign title and the occasion/coverage tile labels — so those two
   are overridden rather than changing the global setting.
   ========================================================================================================== */

/* B2 — hero campaign title is Title Case in Figma, and much larger */
.slideshow__slide .prose :is(h1, h2, h3, .h1, .h2, .h3) {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* B3 — Figma centres the pagination dots under the caption; the theme pins them bottom-right */
.slideshow .page-dots {
  inset-inline-end: auto;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* B8 — occasion / coverage tile labels: Title Case and considerably larger than the theme default.
   Corrected 2026-08-14: these were written against `.home-filter-grid`, which is not a class that
   exists anywhere in the markup — the section wrapper is `.shopify-section--home-filter-grid`. The
   rules had therefore never applied, and the tiles were still rendering the theme's 16px uppercase
   (checked in Chrome: "INTENSE SWIM" where d06 shows "Intense swim"). */
/* APD 2026-08-18 (full-tree Figma pull) — SUPERSEDED IN PART. The 14px/400 written here applied
   the Coverage caption's values to the Occasion labels as well; the design's Occasion labels are
   20px/900/1.3 and Coverage's are 14px/400/1.3. Because the two grids differ, the sizes now live
   in sections/home-filter-grid.liquid's own ID-scoped <style> block, gated on `caption_position`.
   Only the case + tracking, which both grids share, stay here. */
.shopify-section--home-filter-grid .prose p:first-child {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* APD 2026-08-18 (full-tree Figma pull) — CORRECTED. The standalone 1440-wide "BY OCCASIONS" /
   "BY COVERAGE" components are the PLP's horizontal FILTER PANELS: each holds the heading plus a
   row of filter options with 16px radio circles (Intense swim / City Summer / Casual & Resort...).
   They are not home-page section headings, and the real home frame (/Home_Cream BG, 1440x5003)
   has no heading above either tile grid — the tile rows sit directly under the Signature carousel.
   Both titles have therefore been cleared in templates/index.json. This rule is kept, correctly
   styled at 14px/900/2.0, so that a title added later in the theme editor still matches the
   design's other section headings. */
.shopify-section--home-filter-grid .section-header .prose :is(h1, h2, h3, h4, h5, h6) {
  font-size: 14px;
  /* !important to beat .h2's own `line-height: var(--h2-line-height) !important` */
  line-height: 2 !important;
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* APD 2026-08-18 (full-tree Figma pull) — collection / sale page title.
   The design's page title ("ONE PIECE" on Product List+Filters, "SALE 15% OFF" on Sale Page) is
   32px / weight 900 / line-height 64px (the 2.0 token). 32px did not exist in the earlier spec at
   all, because it was built from a depth=2 dump that never reached these nodes, so the title was
   inheriting .h1 (36px / 400 / 0.81) — which is the HERO campaign title's style ("Anywhere Club"),
   a genuinely different style. Scoped to the banner section so the hero keeps its own. */
.shopify-section--collection-banner .prose :is(h1, .h1) {
  font-size: 32px;
  font-weight: 900;
  /* !important to beat .h1's own `line-height: var(--h1-line-height) !important` */
  line-height: 2 !important;
}

/* A2 — cart badge with the item count, replacing the theme's unlabelled dot (Figma shows a number). */
.header__cart-count {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: -0.55rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: rgb(var(--text-color));
  color: rgb(var(--background));
  font-size: 0.625rem;
  line-height: 1.05rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

.header__cart-count.is-visible {
  transform: scale(1);
}

/* ==========================================================================================================
   APD 2026-08-13 — PLP toolbar, matching the prototype stills (cmp_12_plp.jpg).
   Figma puts Sort By on the SAME row as the filters, right-aligned, over a plain page background —
   the theme instead stacks a separate bordered toolbar strip underneath and tints the filter row.
   ========================================================================================================== */

/* C5 — filter row sits on the page background, not a tinted band */
.facets-topbar-wrap {
  background-color: transparent;
}

/* C3 (rewritten 2026-08-18) — Figma puts Sort By INSIDE the 78px `Filters Bar` row, right-aligned,
   rather than in a strip of its own.

   The rules here used to be keyed on `.facets-topbar-wrap + .collection-toolbar`. That adjacent-sibling
   selector stopped matching on 2026-08-17, when `facets-mobile-bar` was rendered between the two — so
   the toolbar silently fell back to its own 94px strip with a 48px `.v-stack` gap either side, pushing
   the first product card 150px below where the design puts it. It is now taken out of flow rather than
   pulled up by a negative margin, so an extra sibling cannot break it again.

   Measured off `/UI / Component/Product List+Filters` (1440x3271) and its `Text+Down` instance:
   filter band 178..256 (78px), instance right edge on the 54px page margin, chevron right edge 1368
   (18px inside it), text right-aligned ending at 1347, first text line at y=209, first card at y=296. */
@media screen and (min-width: 1150px) {
  .facets-topbar-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  /* The filter row is the v-stack's first in-flow child, so `inset-block-start: 0` on an absolutely
     positioned toolbar is the top of that row. Grid children that are absolutely positioned do not
     size a track, so the row below closes up on its own. */
  .v-stack:has(> .facets-topbar-wrap) {
    position: relative;
    row-gap: 40px;                    /* Figma: band ends 256, first card 296 */
  }

  .facets-topbar-wrap ~ .collection-toolbar {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    z-index: 4;                       /* .facets-topbar-wrap is 3 */
    box-shadow: none;                 /* Figma has no rules above/below this row */
    background: transparent;
    min-height: 0;
    height: 4.875rem;                 /* 78px — the Filters Bar band */
    width: max-content;
    margin: 0;                        /* overrides .full-bleed */
    padding-inline-end: 1.125rem;     /* 18px — puts the chevron's right edge on Figma's 1368 */
    align-items: flex-start;
    justify-content: flex-end;
  }

  .facets-topbar-wrap ~ .collection-toolbar .collection-toolbar__button-list {
    flex: none;
  }

  .facets-topbar-wrap ~ .collection-toolbar .collection-toolbar__button-container {
    width: max-content;
    border-inline-start-width: 0;     /* the divider only makes sense in the stacked layout */
  }

  .facets-topbar-wrap ~ .collection-toolbar .collection-toolbar__button-container > .collection-toolbar__button {
    width: max-content;
    padding-block: 1.9375rem 0;       /* 31px — Figma puts the first line at y=209 in a 178..256 band */
    padding-inline: 0;
    opacity: 1;                       /* the design's Sort By is full black, not the theme's 50% */
  }

  /* Active-filter chips: `Product List+Filters Selected` layers the chip row over the band's bottom
     edge (245..269) and drops the grid by exactly the chip height, to 320 — i.e. the chip row sits
     directly under the band and the SAME 40px gap follows it. So the row-gap moves below the chips.
     NOTE the chip row is still 48px tall here where the design's pill is 24px, so the first card
     lands at 345 rather than 320; that residual is the pill's own size, not this rhythm. */
  .v-stack:has(> .facets-topbar-wrap):has(.active-facets) {
    row-gap: 0;
  }

  /* `.collection__main` is a grid with its own 48px row-gap; that is the gap the design pins at 40. */
  .v-stack:has(> .facets-topbar-wrap) .collection__main:has(> .active-facets) {
    row-gap: 40px;
  }
}

/* C3 — "Sort By" over the current sort. Figma `Sort By / Text+Down`, variant 3: one text node reading
   "Sort By\nBest Seller" at 12/400, letter-spacing 0, line-height 14.52 (30px over the two lines),
   textAlignHorizontal RIGHT, solid black — with the 16px chevron to the right of the PAIR, not inline
   with the label. Hence a two-line column with the icon as its sibling.
   (The previous 14/28/w900 reading came from the `List of Sort By` component, which is the open
   popover's option list, not the trigger.) */
.collection-toolbar__sort {
  display: flex;
  align-items: flex-start;            /* chevron sits on the first line */
  gap: 0.3125rem;                     /* 5px — Figma: text ends 1347, chevron starts 1352 */
}

.collection-toolbar__sort-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
}

.collection-toolbar__sort-label,
.collection-toolbar__sort-current {
  font-size: 0.875rem;                 /* 14px */
  line-height: 0.9375rem;             /* 15px */
  font-weight: 400;
  letter-spacing: 0;
}

.collection-toolbar__sort-label {
  text-transform: capitalize;         /* Figma writes "Sort By"; the locale string is "Sort by" */
}

.collection-toolbar__sort-current {
  text-transform: none;
}

.collection-toolbar__sort svg {
  flex: none;
  width: 1rem;                        /* 16px */
  height: 1rem;
}

/* ==========================================================================================================
   APD 2026-08-13 — mobile corrections against the mobile prototype stills (m01/m03/m06).
   ========================================================================================================== */

/* Figma's MOBILE hero is a short landscape banner (~200px on a 390px-wide screen), not the
   full-viewport hero used on desktop. `media_size: fill` is 100vh, which is right on desktop and
   far too tall on a phone, so the height is capped here rather than changing the desktop setting. */
@media screen and (max-width: 699px) {
  /* Specificity note: the theme sets the fill height on
     `.shopify-section:first-child .content-over-media--fill` (0,2,1), so a two-class selector loses.
     Matching the section wrapper as well takes precedence. */
  .shopify-section .slideshow .content-over-media--fill,
  .shopify-section .slideshow .content-over-media {
    /* APD 2026-09-02 (deck slide 2, designer) — "keep everything the same, but change the image
       ratio to 4:5". The phone hero was 48.611vw (390 x 189.6 at 390 — a 2.057:1 landscape banner,
       Figma `Mobile IP14_Home` > New in_Slide, a scaled copy of the 1440 x 700 desktop hero). 4:5
       is 5/4 of the width, so 125vw = 487.5px at 390. The DESKTOP rule below is untouched.
       ⚠ The four hero assets are 1440 x 960 (1.5:1) landscape. `cover` into a 0.8 box scales by
       height, so it now shows the FULL height of the photo and crops the sides to 53% of its width,
       centred — `--content-over-media-focal-y` (slide 2 is on 19%) no longer has anything to move,
       because nothing overflows vertically any more. There is no focal-X setting in this section.
       Portrait crops of the four photos are the real fix if the centred crop loses a model; a
       per-slide `mobile_image` already exists in the schema and is empty on all four. */
    --content-over-media-height: 125vw;
    min-height: 0;
  }
}

/* APD 2026-08-18 (full-tree Figma pull) — DESKTOP hero height.
   The design's hero (/Home_Cream BG > New in_Slide) is 1440 x 700 — a 2.057:1 banner, not a
   full-viewport one. `media_size: fill` resolves to `100vh - (announcement + header)`, which means
   the hero's height tracked the BROWSER WINDOW: on a 1440x900 window it rendered 789px, and on any
   other window height it rendered something else again. No window height makes it match the design.
   Pinned to the design's own proportion instead (700/1440 = 48.611vw), the same vw approach the
   mobile rule above already uses. At exactly 1440 this is 700px.
   Specificity note: the theme sets this on `.shopify-section:first-child .content-over-media--fill`
   (0,2,1), so the section wrapper is matched here too, as in the mobile rule. */
@media screen and (min-width: 700px) {
  .shopify-section .slideshow .content-over-media--fill,
  .shopify-section .slideshow .content-over-media {
    --content-over-media-height: 48.611vw;
    min-height: 0;
  }
}

/* Figma's mobile announcement bar keeps the left promo ("Bundles 5% off"). */
@media screen and (max-width: 699px) {
  .announcement-bar__left {
    display: block;
    /* APD 2026-08-18: 0.62rem = 9.92px, not a design size. Figma's smallest text is
       10px (e.g. IP_Footer headings 10/20). */
    font-size: 0.625rem;
  }
}

/* === APD 2026-08-14: hover crossfade for the Signature Styles looks and the Occasion/Coverage
   tiles ==========================================================================================
   The prototype recordings crossfade these tiles from the lifestyle photo to the garment/product
   still on hover; the theme only zooms. The second image is optional per block, so a tile with no
   hover image is untouched by all of this (the rules below only ever match when .apd-hover-image
   is actually rendered).
   Pointer-gated the same way the product-card swap is - a touch device has no hover to crossfade
   with, and would otherwise be left showing the wrong photo. */
@media screen and (hover: hover) and (pointer: fine) {
  .content-over-media:has(> .apd-hover-image),
  .signature-looks-carousel__item:has(.apd-hover-image) {
    position: relative;
  }

  .apd-hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
  }

  .content-over-media:hover > .apd-hover-image,
  .signature-looks-carousel__item:hover .apd-hover-image {
    opacity: 1;
  }
}

/* Without a fine pointer the second image must never paint. */
@media not all and (hover: hover) and (pointer: fine) {
  .apd-hover-image { display: none; }
}

/* A look that links somewhere should say so. */
a.signature-looks-carousel__item { display: block; cursor: pointer; }

/* === APD 2026-08-14: three mobile fixes reported by the owner ===================================
   All three were checked against the reference frames first; each one is a real deviation from the
   design, not a preference:

   1. Menu drawer took the full screen width.  Figma m04/m05 show it at ~69% of the screen with the
      page still visible behind it, and the labels in Title Case ("Swimwear", "Ready To Wear"),
      not the uppercase we render. The uppercase is purely the h6 heading class's transform - the
      menu titles are already Title Case in the data - so removing the transform reproduces Figma
      exactly without touching the font family.
   2. Footer was 1021px on a 375x812 phone (1.26 screens).  Figma's mobile footer puts Shop and
      Discover SIDE BY SIDE with Informations below, at a noticeably smaller type size, and comes
      in around half a screen.
   3. Signature Styles: the teal tote is in the design (d05) but at roughly half the row height,
      sharing the models' baseline. Ours stretched every tile to the full row height, so a 403x820
      cutout rendered 128px wide against 68-90px figures - the "huge bag" the owner saw. Handled
      per-block in signature-looks-carousel.liquid via a height scale, not here.
   ============================================================================================== */

@media screen and (max-width: 699px) {
  /* 1a. Drawer width. Scoped to the header sidebar on purpose - the same custom property drives the
     cart drawer and the filter sheet, which Figma shows at full width. */
  .header-sidebar {
    --drawer-max-width: min(69vw, 20rem);
  }

  /* 1b. Title Case labels, and let a long one wrap rather than force the panel wider. */
  .header-sidebar__linklist-button,
  .header-sidebar__back-button {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.9375rem;
    text-wrap: pretty;
  }

  /* 2. Footer: Shop | Discover side by side, Informations full width underneath. The link blocks
     are the 2nd..4th children (1st is the text/social block), so they are addressed by type. */
  .footer__block-list {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.25rem;
  }

  /* The text/social block and the wordmark span the full width; the link blocks are left to the
     grid's own auto-placement, which lands Shop in column 1, Discover in column 2 and Informations
     back in column 1 on the next row - exactly Figma's mobile arrangement, and it stays correct if
     the owner adds or reorders a menu. (An earlier :nth-of-type rule here was wrong: nth-of-type
     counts every sibling div, so it caught Discover and threw it full width.) */
  .footer__block--text,
  .footer__block--image {
    grid-column: 1 / -1;
  }

  .footer__block--links a,
  .footer__block--links li {
    font-size: 0.8125rem;
  }

  /* The column headings are <p class="h4"> at 18px - much heavier than Figma's mobile footer,
     where the heading is barely larger than the links. */
  .footer__block--links .h4 {
    font-size: 0.875rem;
  }

  /* Tighter than the theme's desktop rhythm: 16px heading-to-list and 8px between links stack up
     over 17 links. Figma's mobile footer is appreciably denser than this. */
  .footer__block--links > .v-stack {
    gap: 0.625rem;
  }

  .footer__block--links ul {
    gap: 0.375rem;
  }
}

/* === APD 2026-08-14: mobile sort lives in the filter sheet ======================================
   Figma m07 opens the mobile filter sheet with "Sort By" as its first accordion, and m12 shows no
   Sort By control in the mobile toolbar at all — the sort is chosen inside the sheet and committed
   by APPLY FILTERS along with the filters. The accordion is rendered by snippets/facets.liquid for
   the drawer context; this hides the now-duplicate toolbar control below the breakpoint.
   Desktop is untouched: there the popover in the toolbar is exactly what d15 shows. */
@media screen and (max-width: 699px) {
  .collection-toolbar__button-container:has(.collection-toolbar__sort) {
    display: none;
  }

  /* with only the Filter button left, let it span the row rather than sit in a half-width cell */
  .collection-toolbar__button-list {
    grid-template-columns: 1fr;
  }
}

/* === APD 2026-08-14: uniform PDP gallery slides on mobile ======================================
   Owner report: "photo on mobile site on product page. height is not the same."

   The mobile gallery is a horizontal snap carousel and each slide was sized by its own image, so a
   2:3 shot rendered 422px tall next to a 4:5 shot at 375px — a ragged row with the next slide
   peeking at a different height.

   Product photography here is all portrait but not one ratio: measured across 559 images it is
   0.8 (4:5) for 61%, 0.667 (2:3) for 24%, 0.796 for 10%. Slides are therefore pinned to 4:5, the
   dominant one, so the majority are shown exactly as shot and the taller minority is cropped a few
   percent top and bottom rather than the carousel stepping up and down.

   CONFIRMED + EXTENDED 2026-08-17. The designer answered question 2: "Please use a 4:5 ratio for the
   product images. I think keeping the images at the same ratio will make the gallery look more
   consistent, especially on mobile." "Especially on mobile" rather than "only on mobile", so the
   rule is no longer behind a mobile media query — the desktop grid gets the same uniform ratio.

   Now scoped to `[data-media-type="image"]`: video and 3D-model slides keep their own proportions,
   which the earlier unscoped rule would have cropped. */
.product-gallery__carousel .product-gallery__media[data-media-type='image'] {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.product-gallery__carousel .product-gallery__media[data-media-type='image'] > img,
.product-gallery__carousel .product-gallery__media[data-media-type='image'] > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === APD 2026-08-14: "All <category>" first in the mobile menu ==================================
   Owner: "i cant click on swimwear, only components inside — one piece, two piece…"

   Correct, and it is by design: in the mobile drawer the category name is a <summary> that expands
   the group, not a link. The way to the whole category is the "All swimwear" item — but ours sat at
   the BOTTOM of the group, so it read as if only the sub-categories were reachable.

   Figma m05 (the Swimwear drill-down) leads with "All Swimwear" as the first row for exactly this
   reason. Desktop d11 keeps it last, at the foot of each column — so this is mobile-only, and the
   menu data is left alone rather than reordered for one breakpoint at the other's expense. */
@media screen and (max-width: 699px) {
  .header-sidebar__nested-linklist > a:last-child {
    order: -1;
  }
}

/* === APD 2026-08-14: hover is a crossfade, not a zoom ==========================================
   Owner, watching the desktop recording: "when she hovers on full coverage, moderate coverage etc
   it shows swimwear cut without human. in our test it just slowly zooms in."

   Confirmed in the coverage frame — the third tile is captured mid-hover (the cursor is on it) and
   shows a garment flatlay on cream where the other two show models. So the hover swaps the photo
   for the product cutout; it does not zoom.

   The crossfade itself was built earlier (per-block "Hover image"). This stops the theme's zoom
   running underneath it, so a tile that HAS a hover image does a clean swap. A tile with no hover
   image keeps the theme's zoom, so nothing changes until the flatlays are supplied. */
@media screen and (hover: hover) and (pointer: fine) {
  .content-over-media:has(> .apd-hover-image):hover .zoom-image,
  .signature-looks-carousel__item:has(.apd-hover-image):hover .zoom-image {
    scale: 1;
    transform: none;
  }
}

/* === APD 2026-08-17: the mobile filter bar IS the closed filter panel ===========================
   Designer, answering question 3: "the filter names shown across the top are the closed state of
   the filter panel. When the user opens the filter, it should expand into the full-screen filter
   panel you have built."

   So below the desktop topbar's breakpoint the row of names replaces the "Filter (n)" button that
   was there before — Figma's mobile PLP frames (IMobile_Sale, Mobile_Filters_One piece) show the
   names under the page title and no Filter button anywhere. Six names do not fit across a 375px
   phone, so the row scrolls horizontally, bleeding to the screen edge to make it obvious there is
   more to the right. Kept in lockstep with the 1149px topbar deviation above: whichever of the two
   is showing, the other is not. */
@media screen and (max-width: 1149px) {
  .facets-mobile-bar {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--container-gutter);
    padding-block: 0.25rem;
  }

  .facets-mobile-bar::-webkit-scrollbar {
    display: none;
  }

  .facets-mobile-bar__item {
    flex: 0 0 auto;
    display: flex;
    gap: 0.3125rem;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.8125rem;
    /* APD 2026-08-18: 1.4 is not one of Figma's two line-height tokens (1.3 / 2.0). */
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgb(var(--text-color));
    white-space: nowrap;
    cursor: pointer;
  }

  .facets-mobile-bar__item svg {
    flex-shrink: 0;
  }

  /* The toolbar's Filter button is the control this row replaces. Scoped to the button container so
     it does not also catch <facets-drawer>, which carries the same class (see main-collection.liquid)
     and must stay in the DOM for the row to open. */
  .collection-toolbar__button-container.facets-filters-mobile-only {
    display: none;
  }
}

@media screen and (min-width: 1150px) {
  .facets-mobile-bar {
    display: none;
  }
}

/* Below 700px the sort control is inside the sheet too (see the 2026-08-14 rule above), so the
   toolbar's button row has nothing left in it and would only add empty space above the grid. The
   toolbar itself then measured 48px of bordered blank, so it goes as well — but only while it is
   genuinely empty: the results count is already hidden at this width, and the `:has` guard keeps the
   toolbar if the owner ever switches the mobile grid-size control back on. */
@media screen and (max-width: 699px) {
  .collection-toolbar__button-list {
    display: none;
  }

  .collection-toolbar:not(:has(collection-layout-switch[device='mobile'])) {
    display: none;
  }
}

/* ==========================================================================================================
   APD 2026-08-18 — MOBILE 390 CONFORMANCE, PART 2: PLP · Sale · Collections · filter sheet.

   Part 1 (same date, further up this file) conformed the home page and left these five Figma frames
   explicitly unbuilt — see docs/KNOWN_ISSUES.md 42. Spec: docs/DESIGN_SPEC_MOBILE.json, frames
   `mobile_collection_page`, `mobile_filters_onepiece`, `mobile_apply_filters`, `mobile_sale`,
   `mobile_collections`, `mobile_filters`, `mobile_filters_selected`. Zero Figma API calls — the
   numbers come from the full tree cached on 2026-08-18.

   TWO COORDINATE SYSTEMS, deliberately:
     · The PAGE frames (PLP/Sale/Collections) carry an `IP_TOP BAR` whose text sits at y=35 in a 64px
       band, so per part 1 every page y here is Figma y MINUS 35 (the iPhone status bar). 
     · The SHEET frames (`Mobile_Filters`, `Mobile_FiltersSelected`) have no `IP_TOP BAR` and their
       close X is drawn at y=30 — applying the offset would put it at y=-5. So the sheet is its own
       full-height surface with NO offset. That is measured, not interpreted.

   Gated at 699px, the theme's own mobile tier and the same breakpoint part 1 used. 700-1149px keeps
   what it had: the design defines 390 and 1440 only, and inventing a third rhythm for the tablet band
   is the open question KNOWN_ISSUES 41 already flags.
   ========================================================================================================== */

@media screen and (max-width: 699px) {
  /* ---------- Page title: "ONE PIECE" / "SALE 15% OFF" ----------
     16px / weight 900 / line-height 32 (the 2.0 token). Desktop's own title is 32/900/64 (see the
     rule further up) — mobile is separately authored at half that, not a scaled copy. Figma puts the
     text box at page y 83..115 with the section starting at 70, hence 13px above and 5px below. */
  .shopify-section--collection-banner .prose :is(h1, .h1) {
    font-size: 16px;
    /* !important to beat .h1's own `line-height: var(--h1-line-height) !important` */
    line-height: 2 !important;
  }

  .shopify-section--collection-banner .section-spacing {
    padding-block-start: 13px;
    /* !important because the platform injects a per-section <style> INSIDE the section element —
       `#shopify-section-<id> .section-spacing { padding-block-end: 0rem }` under its own
       `@media (max-width: 650px)`. That is ID specificity in a later stylesheet, so a class rule
       cannot reach it, and without this the 5px gap the design puts between the title and the filter
       row would exist at 651-699px and vanish at 650px and below — i.e. on every real phone. */
    padding-block-end: 5px !important;
  }

  /* ---------- Filter name row (Figma `IP_Filter`, a 28px band) ----------
     10px / line-height 20 / weight 400, six names starting at x=16 with 12px between them and a 5px
     chevron 4px after each label. At those numbers the last chevron ends at x=366, so all six names
     FIT across a 390 screen — the horizontal scroll the 2026-08-17 build needed at 13px is only a
     fallback now (kept for 375px, where the row is ~7px too wide).
     APD 2026-09-30 — Trong (feedback chat): "Filters tab on phone is a bit small". Raised to 13px with a
     40px tap height, so the row scrolls sideways again on a phone; the scroll was always the fallback. */
  .facets-mobile-bar {
    padding-block: 0;
    gap: 18px;
  }

  .facets-mobile-bar__item {
    font-size: 13px;
    line-height: 1.3;
    gap: 6px;
    min-height: 40px;
  }

  .facets-mobile-bar__item svg {
    width: 8px;
    height: auto;
  }

  /* ---------- Product grid ----------
     Figma: 16px page margin, two 171px cards, 16px gutter (16 + 171 + 16 + 171 + 16 = 390) and a
     359px row pitch. The theme pulled the grid 10px OUTSIDE the container on mobile
     (`margin-inline: -0.625rem`), so cards started at x=6 and were 184 wide — 10px past the page
     margin every other band on the page respects. Carousels keep their own width. */
  .product-list:not(.product-list--carousel) {
    margin-inline: 0;
    --product-list-default-column-gap: 1rem;
    --product-list-default-row-gap: 0.83125rem;
  }

  /* Card internals, from `IP_Newin_Product card_Slide_Home` as it is drawn on the PLP frames: image,
     4.6px, title+price, 7.4px, colour row. The blank line Figma leaves between "(New Colour)" and the
     price is one 9.84px line of the same text node, so it is the title/price gap.

     SCOPED TO THE GRID, NOT TO EVERY CARD. The home page's New In row is the same component drawn at a
     different size — 187x378 there against 171x345.7 here — and part 1 of this pass conformed that row
     to a verified 438px block using the theme's default card gaps. Written unscoped, these three gaps
     shortened it to 406.5 and the home page to 3539. `:not(--carousel)` keeps the home row exactly
     where part 1 left it. */
  .product-list:not(.product-list--carousel) .product-card {
    gap: 4.6px;
  }

  .product-list:not(.product-list--carousel) .product-card__info {
    gap: 7.4px;
  }

  .product-list:not(.product-list--carousel) .product-card__info > .v-stack {
    gap: 9.84px;
  }

  /* Figma's card price is the last line of the 12px/400/9.84 title node, not the theme's 14px/28. */
  .product-list:not(.product-list--carousel) .product-card price-list {
    font-size: 14px;
    line-height: 0.82;
  }

  /* ---------- Discount badge (Figma `IP_Product Card Sale` > Rectangle 62) ----------
     39x21 box inset 12px from the card's top-left corner, "-15%" at 10px/13/900 white. The theme
     inset it 4px and the 10/13/900 type rule was scoped `min-width: 700px`, so mobile never got it.
     Padding is what makes the box: 23px of text ink + 8+8 = 39, 13px line + 4+4 = 21. */
  .product-list:not(.product-list--carousel) .product-card__figure > .badge-list {
    inset-block-start: 12px;
    inset-inline-start: 12px;
  }

  .badge {
    font-size: 0.625rem;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.01em;
    padding: 4px 8px;
  }

  /* ---------- Sale card pricing (Figma `IP_Product Card Sale`) ----------
     The design puts the STRUCK-THROUGH original first (its `Vector 5` strikethrough runs x=20..84)
     and the discounted price after it at x=99 — 10px / weight 900 in the brand red. The theme emits
     `<sale-price>` before `<compare-at-price>`, i.e. the opposite order, and rendered both at the
     title's 12/400. `price-list` is a flex row, so `order` fixes the sequence without touching the
     markup (and so the DOM order screen readers get — sale price first — is unchanged). */
  .product-list:not(.product-list--carousel) .product-card price-list {
    column-gap: 15px;
  }

  .product-list:not(.product-list--carousel) .product-card price-list compare-at-price {
    order: -1;
  }

  .product-list:not(.product-list--carousel) .product-card price-list sale-price {
    font-size: 10px;
    line-height: 1.3;
    font-weight: 900;
  }

  /* ---------- Sale tier sub-nav ----------
     NOT IN THE FIGMA FILE — `sale-tier-tabs` is APD's own row (see the snippet header: the Sale Page
     frame has no node for it) and KNOWN_ISSUES 41 already asks the owner whether it stays. It is
     touched here only because at 390 its four labels wrapped onto two lines, making it 105px tall and
     pushing the filter row and the whole grid 105px down on every sale page. Same treatment as the
     filter-name row above it: one row that scrolls if it does not fit. Delete the render call in
     main-collection.liquid if the designer confirms the row should not exist.

     The rules themselves live in `snippets/sale-tier-tabs.liquid` — that snippet inlines its own
     stylesheet AFTER theme.css, so its `flex-wrap: wrap` beats anything written here. */

  /* ---------- Active filter chips ON THE PAGE (Figma `Mobile_Apply Filters`) ----------
     78x18 pill, 10px/400 white label, 10px X, and "Clear all" in the muted grey 6px to its right.
     NOTE the sheet draws the same pill at 24px/12px — the two are genuinely different sizes, so the
     sheet's rule below deliberately overrides this one. */
  /* Vertical rhythm around the chip row. Figma stacks these with no slack at all:
       filter band 120..148 · chip row 148..166 · first card 178
     while the theme had a 24px grid gap under the filter row and a 36px one above the grid, so the
     first card sat at 228 instead of 178. The negative margin cancels the `v-stack gap-6` (24px)
     that separates the filter row from the collection body; `:first-child` then distinguishes the
     two states without needing `:has()` — with chips the row is first and gets 0, without them the
     grid is first and gets the 5px the unfiltered frame draws. */
  .facets-mobile-bar {
    margin-block-end: -1.5rem;
  }

  .collection__main {
    row-gap: 12px;
  }

  .collection__main > .product-list:first-child {
    margin-block-start: 5px;
  }

  .active-facets {
    gap: 6px;
    align-items: center;
    margin-block-start: 0;
  }

  .removable-facet {
    height: 18px;
    padding: 0 10px 0 11px;
    column-gap: 2px;
    font-size: 10px;
    line-height: 1;
  }

  /* 1.8 rather than the design's own 2.0 line-height token: the pill next to it is 18px, and at 2.0
     this link's 20px box would set the row height and push the first card 2px past the drawn y=178.
     The rendered text is identical either way — only the box differs. */
  .facets-clear-all {
    font-size: 10px;
    line-height: 1.8;
    /* APD 2026-08-24 — owner: "Clear all should always be black". Was #949494, which is the grey
       the mobile Figma frame draws; the owner's "always" overrides it. */
    color: #000;
    margin-inline-start: 0;
    padding-inline: 0;
  }

  /* ---------- Collections page (Figma `Mobile_Collections`) ----------
     One tile per row (already the section default), 358 wide, and a LANDSCAPE 358x198.2 image — the
     theme's `image_size: auto` was showing the source photo's own ~1:1.22 portrait crop at 437px
     tall, more than twice the drawn height. Scoped to `--outside`, which is APD's own Collections
     class, so product-grid and featured-collection cards keep the native ratio.
     Deliberately NOT applied above 699px: the desktop Collections frame was not measured in this
     pass, so desktop keeps `auto` until it is. */
  .collection-card--outside .content-over-media {
    aspect-ratio: 358 / 198.2;
    --content-over-media-height: auto;
  }

  .collection-card--outside .content-over-media > img {
    object-fit: cover;
  }

  .collection-card--outside {
    gap: 8.2px;
  }

  .collection-list:has(.collection-card--outside) {
    row-gap: 16.1px;
  }

  /* Caption: both lines are 12px / 15.6 / weight 500. The theme had the name at .h5 and "See More"
     at `text-emphasis` (weight 900), and the long arrow at 32x16 against a drawn 17.3x8.7. */
  .collection-card--outside .collection-card__caption :is(p, .h5),
  .collection-card--outside .collection-card__see-more {
    font-size: 14px;
    /* !important to beat `.h5`'s own `line-height: var(--h5-line-height) !important`, the same
       reason the h1/h2 rules further up this file carry it. Without it the name's box stayed 24px
       and pushed "See More" 29px below its drawn y. */
    line-height: 1.3 !important;
    font-weight: 500;
    /* `prose` gives its paragraphs block margins, which added 16px inside a 25px caption */
    margin-block: 0;
  }

  /* Figma's two caption lines overlap slightly: the name's box runs 276.4..292 and "See More" starts
     at 289.9. So the offset between their tops is 13.5px against a 15.6px line — a -2.1px pull, not
     a gap. */
  .collection-card--outside .collection-card__caption {
    gap: 0;
  }

  .collection-card--outside .collection-card__see-more {
    margin-block-start: -2.1px;
  }

  .collection-card--outside .collection-card__see-more svg {
    width: 17.3px;
    height: 8.7px;
    flex: none;
  }

  /* APD 2026-08-23 — arrow 17.3 wide ending at x=17.3 with the label starting at 18.4, i.e. 1.1px,
     not the 7.2 the base rule inherits. (Desktop is 2px against a 32px arrow.) */
  .collection-card--outside .collection-card__see-more {
    gap: 1.1px;
  }

  /* Figma opens straight into the first tile at page y=70, i.e. flush under the 41px nav with no
     band of section spacing above it, and closes 16px above the footer (last tile ends 1078.6,
     IP_Footer starts 1095). The theme's own bottom padding here measured 40px. */
  .shopify-section--main-list-collections .section-spacing {
    padding-block-start: 0;
    padding-block-end: 16px;
  }

  /* ==========================================================================================
     FILTER SHEET (Figma `Mobile_Filters` / `Mobile_FiltersSelected`, 390x862)
     ==========================================================================================
     Structure of the drawn sheet, top to bottom:
       X 16x16 at (358, 30) · "Sort By" 12/400/24 at (16, 98) · "(0) Filter Selected" at (16, 138) ·
       [selected only: pill at (16,168) + "Clear all" at (125,167)] · six filter rows on a 40px pitch
       from y=198, each with a 16px +/- at x=358 · expanded values on a 32px pitch, 15px radio at
       x=16 and label at x=40 · APPLY FILTERS 358x39 black at (16, 598), splitting into two 179x39
       halves once something is selected.

     The theme's drawer is a shadow-DOM component, so the geometry goes through its own
     `--drawer-*` variables and `::part()` hooks rather than by reaching into the shadow tree. */
  .facets-drawer {
    /* ⚠⚠ THIS LINE HAS BEEN SET BOTH WAYS ON THE OWNER'S OWN INSTRUCTION. Read before changing it.
       · 2026-08-26 (round 36) they said *"side menu on filters covers whole screen. make it less
         wide, enough to fit content"*, and it became `min(69vw, 20rem)` — 259px on a 375 phone.
       · 2026-09-03 (deck R46-4, item 5 of 18) they reversed it: *"Make the filter panel full-screen
         as shown in the prototype."* So it is back to the full bleed `Mobile_Filters` 455:3383 draws
         (390 wide), which is also what puts the footer's two 179x39 halves side by side again.
       The narrow version is gone rather than commented out; this note is the record of it. */
    --drawer-max-width: 100%;
    --drawer-header-padding-block: 0px;
    --drawer-header-padding-inline: 16px;
    --drawer-body-padding-block: 0px;
    --drawer-body-padding-inline: 16px;
    --drawer-footer-padding-block: 0px;
    --drawer-footer-padding-inline: 16px;
  }

  /* 90px so the first row's own 8px of padding puts its text at y=98. */
  .facets-drawer::part(header) {
    min-height: 90px;
    height: 90px;
    border-block-end: 0;
  }

  /* The sheet has no visible "Filters" heading — the X is the only thing above Sort By. Hidden
     visually rather than removed, so the dialog keeps an accessible name. */
  .facets-drawer .facets-drawer__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 16x16 at 16px from the right edge, 30px down. `part(content)` is position: relative already. */
  .facets-drawer::part(close-button) {
    position: absolute;
    inset: 30px 16px auto auto;
    width: 16px;
    height: 16px;
    min-width: 0;
    min-height: 0;
  }

  .facets-drawer::part(close-button) > svg {
    width: 16px;
    height: 16px;
  }

  /* "(0) Filter Selected" — 12/400/24 at y=138, i.e. 8px under the Sort By row, and 28px of clear
     air before the first filter row lands its text on y=198. */
  .facets-drawer .facets-drawer__count {
    margin-block: 8px 0;
    font-size: 14px;
    line-height: 2;
  }

  .facets-drawer .facets-drawer__count + .accordion {
    margin-block-start: 28px;
  }

  .facets-drawer .facets-drawer__active {
    margin-block-start: 6px;
  }

  /* -2px, not a positive gap: in `Mobile_FiltersSelected` the pill's box (168..192) and the next
     filter row's box (190..230) genuinely overlap by 2px, which is what puts that row's text on the
     same y=198 as in the unselected frame. Harmless — the pill's ink is well inside its 24px box. */
  .facets-drawer .facets-drawer__active + .accordion {
    margin-block-start: -2px;
  }

  /* The sheet's pill is 24px tall with a 12px label — bigger than the 18px/10px pill on the page
     behind it. Overrides the page rule above on purpose. */
  .facets-drawer .removable-facet {
    height: 24px;
    padding: 0 12px 0 10px;
    column-gap: 6px;
    font-size: 14px;
    line-height: 1;
  }

  .facets-drawer .facets-clear-all {
    font-size: 14px;
    line-height: 2;
  }

  /* Filter rows: 12/400/24 text on a 40px pitch. The theme had 14px text with 20px of padding
     (a 55.6px row) and its own 1px hairline under every row; the design has neither that height nor
     that line.

     It does draw a line of its own, though, and the owner asked for it back on 2026-09-03 ("add
     line separators between filter sections as in figma"): `Mobile_Filters` 455:3383 carries
     Line 19-24 — 358 wide at x=16, i.e. the drawer body edge to edge — stroke #949494 at 0.25,
     under EVERY filter row from Occasions down to Colour, including the last one. Sort By and the
     "(n) Filter Selected" row carry none, which is why the sort row is excluded below by the one
     thing that identifies it in the markup, its `sort_by` radios.

     ⚠ Two knowing deviations: Figma sets each line 4px above the row box it closes (line y=226 for
     a row whose box ends at 230) — a border can only sit on the box edge, so these land 4px lower;
     and the desktop topbar has no separators at all, because no Figma panel draws one.
     ⚠ The `:last-child` half of the selector is load-bearing: `.facets .accordion-list
     .accordion:last-child` further up (line ~4615) strips the last row's border and outranks a
     plain three-class selector. */
  .facets-drawer .accordion-list .accordion,
  .facets-drawer .accordion-list .accordion:last-child {
    border-block-start-width: 0;
    border-block-end: 0.25px solid #949494;
  }

  .facets-drawer .accordion-list .accordion:has(input[name="sort_by"]) {
    border-block-end: 0;
  }

  .facets-drawer .accordion__toggle {
    padding-block: 8px;
    font-size: 14px;
    line-height: 2;
    font-weight: 400;
  }

  /* The label lives in a span carrying `text-emphasis xs-uc`, which pins its own line-height to the
     1.3 token (15.6px). Without this the row measured 32px instead of the drawn 40px, because the
     8+8 padding was wrapping a 15.6px line box rather than a 24px one. */
  .facets-drawer .accordion__toggle > span {
    font-size: 14px;
    line-height: 2;
    font-weight: 400;
    /* the span also carries `xs-uc`, which uppercased the labels to "OCCASIONS" / "SORT BY". Every
       text node in `Mobile_Filters` is authored title case with no textCase transform, and the filter
       row on the page behind the sheet is already title case — so the two now agree. */
    text-transform: capitalize;
  }

  /* Beats `.facets .accordion-list .accordion:first-child .accordion__toggle { padding-block-start: 0 }`
     further up (specificity 0,4,0). Figma gives the Sort By row the same 40px height as the rest — its
     text sits on y=98, i.e. 8px below the 90px header, not flush against it. */
  .facets-drawer .facets .accordion-list .accordion:first-child .accordion__toggle {
    padding-block-start: 8px;
  }

  /* Figma uses the 16/plus and 16/minus instances, not a chevron — facets.liquid now asks the
     accordion for its plus/minus toggle (`show_arrow: false`); this is only its size. */
  .facets-drawer .accordion__toggle .animated-plus {
    --animated-plus-size: 16px;
  }

  /* Values: 32px pitch, 15px radio at x=16, label at x=40 (so 9px between them). The -4px pulls the
     first value's text onto y=270 exactly; without it the row's own padding lands it 4px low. */
  .facets-drawer .accordion__content {
    margin-block-start: -4px;
  }

  /* The value list is a `v-stack gap-2.5` (10px). Figma's 32px value pitch is the row height alone —
     each row is a 24px line with 4+4 of padding — so the stack gap has to go, or the pitch reads 42. */
  .facets-drawer .accordion__content .v-stack {
    gap: 0;
  }

  /* The row is a flex label with its own 12px column-gap; the 15px radio also carries a 9px inline-end
     margin (below). Both applied, the label landed on x=52 instead of the drawn x=40 — so the gap is
     zeroed here and the margin alone spaces the pair (16 + 15 + 9 = 40). */
  .facets-drawer .checkbox-control {
    padding-block: 4px;
    column-gap: 0;
  }

  .facets-drawer .dot-checkbox {
    margin-inline-end: 9px;
  }

  .facets-drawer .dot-checkbox ~ :is(label, span) {
    font-size: 14px;
    line-height: 2;
  }

  .facets-drawer .facets-swatch-item {
    padding-block: 4px;
  }

  .facets-drawer .facets-swatch-item__label {
    font-size: 14px;
    line-height: 2;
  }

  /* Action row: 358x39, or two 179x39 halves once a filter is on. Figma draws no rule above it.
     STRUCTURAL DEVIATION, noted in the summary: the design has the button at y=598 with 225px of
     blank sheet below, because that frame only expands one filter. The button stays pinned to the
     bottom here — with six filters expanded the list is far taller than 862px, and a shopper should
     never have to scroll past the values to commit them. */
  .facets-drawer::part(footer) {
    border-block-start: 0;
    padding-block: 16px;
  }

  /* APD 2026-09-03 (R46-4) — the footer goes back SIDE BY SIDE, because the sheet is full width
     again. `Mobile_FiltersSelected` 2060:3787 draws Apply at x=16 w=179 and Clear at x=195 w=179 —
     they touch, no gap, so the black block and the black-bordered white block read as one 358px bar.
     Two equal 1fr tracks reproduce that at any phone width.

     ⚠ Round 36 stacked these because the narrowed 259px sheet could not hold both labels — at that
     width "Apply Filters (1)" broke onto THREE lines inside a 39px button. That reason is gone with
     the narrowing. The label is checked for wrapping in `diff_harness/r52_sheet.js`; if a
     translation ever overflows again, stack it for that locale rather than for every phone.

     Only the filtered state has two buttons — with nothing selected there is a single Apply, which
     spans the full 358 on its own. */
  .facets-drawer [slot="footer"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
  }

  .facets-drawer [slot="footer"] :is(.facets-drawer__apply-button, .facets-drawer__clear-button) {
    height: 39px;
    min-height: 39px;
    padding-block: 0;
    /* The grid track above already sets each button's width, so the theme's own 28px button padding
       only eats into the label. Measured on a 375 phone before this line: the track is 171.5px, the
       padding took 56 of it, and "Apply Filters (1)" (113px at 14/900) broke onto TWO 28px lines
       inside a 39px box — i.e. it overflowed. 6px keeps the label on one line down to 360px wide
       with room for a longer translation. */
    padding-inline: 6px;
    font-size: 0.875rem;
    line-height: 2;
    font-weight: 900;
    letter-spacing: 0.01em;
    display: grid;
    place-items: center;
  }

  .facets-drawer [slot="footer"] .facets-drawer__clear-button {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
  }
}

/* ==========================================================================================================
   APD 2026-08-19 — SURFACE CONFORMANCE (desktop 1440)

   Seven items measured out of the cached Figma tree (output/figma_redesign/cache/file_full_20260818.json,
   file lastModified 2026-08-11), not out of the 2026-08-05 screen recording. The recording was checked
   first and got two of them wrong: it appeared to show a rounded active-filter chip and an underlined
   "Clear all", but the file sets no cornerRadius and no textDecoration on either — the underline was a
   hover state with her cursor sitting on the link. Numbers below are the file's.

   Everything here is gated >= 700px. Mobile 390 was conformed against the same file on 2026-08-18
   (KNOWN_ISSUES 42/43) and must not move.
   ========================================================================================================== */

/* --- announcement bar: centre message truly centred ---
   Figma TOP Bar: "Bundles 5% off" x=54, "Just Dropped: ..." x=590 w=259 -> its centre is 719.5 of 1440,
   i.e. the page centre. The shipped three-zone flex layout let the carousel fill the space *between*
   the left promo and the right controls, so its centre landed at 1105 instead. Absolute centring is
   exact regardless of what the side zones weigh; the side zones are 80px and ~24px wide, so there is
   no overlap risk at these widths (checked at 1000 and 1440). */
@media screen and (min-width: 700px) {
  .announcement-bar {
    position: relative;
  }

  .announcement-bar__carousel {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 700px) {
  /* --- desktop filter panel: Apply / Clear geometry ---
     Figma: Apply Filters 176x60 at x=1076, Clear 110x60 at x=1276, both ending flush with the 1386
     content edge, 24px apart. Shipped: 145x58 and 98x58. min-width rather than width so a longer
     translation grows the button instead of clipping it. */
  .facets-topbar__panel-actions {
    gap: 1.5rem;
  }

  /* APD 2026-08-24 — owner: "make this filter button smaller" (after "black, no hover"). One notch
     down from the Figma geometry above, which is deliberately abandoned here:
       height    60 -> 44   (0.73x)   min-width Apply  176 -> 140  (0.80x)
       label     20 -> 14px           min-width Clear  110 ->  88  (0.80x)
     44 = the 28px label box (14px x the 2.0 leading token) + 7 + 7 padding + the two 1px borders.
     14px is the site's type floor set earlier today, so this is as small as the label may go. The
     numbers are a judgment call, not from the file — the owner gave no target size. To resize, move
     min-height and the two min-widths together; the padding below keeps the label centred. */
  .facets-topbar__apply,
  .facets-topbar__clear {
    min-height: 2.75rem;
  }

  .facets-topbar__apply {
    min-width: 8.75rem;
  }

  .facets-topbar__clear {
    min-width: 5.5rem;
  }

  /* --- desktop filter panel: Apply / Clear TYPE ---
     Every desktop instance of the Figma button (`Apply Filters` / `Clear` components, and their
     instances inside `Product List+Filters Selected` and `BY OCCASIONS_On click`) draws the label at
     **20px / weight 400**, title case, in a 40px-tall text box centred in the 60px button.
     The 14px / 900 in the base rule above came from `Mobile_Filters`, which is a different
     component and stays as it is below 700px. 40px label + 10px above and below = the 60px button. */
  .facets-topbar__apply,
  .facets-topbar__clear {
    /* APD 2026-08-24 — 20px -> 14px with the owner's "smaller". Weight 400 and title case are kept
       from the Figma component, so the label's only change is its size. */
    font-size: 0.875rem;
    line-height: 2;
    font-weight: 400;
    text-transform: none;
    /* 8 / 20 inset around the 28px label box. Border-box with a 1px border from the base rule, so
       the border comes out of the padding or the button lands at 46 tall instead of 44. */
    padding: calc(0.5rem - 1px) calc(1.25rem - 1px);
  }

  /* --- desktop filter panel: value spacing ---
     Figma BY COVERAGE: the three radios sit at x=54 / 283 / 512 — a flat 229px pitch, with the label
     boxes themselves drawn 163px wide. Shipped values were content-width items separated by a 44px
     gap, so they bunched into the left third (54 / 168 / 279). auto-fill keeps the pitch for filters
     with more values than three, which is what every other panel has.

     Not applied to the colour panel: that one is a swatch grid in the design, a different component.

     ⚠ APD 2026-09-03 — a 6-column version of this (deck R46-5, "change the layout to this format")
     was built, measured against Figma and then REVERTED on 2026-09-03: the owner checked with Trong,
     who does not want it. Do not rebuild it without their word. What it did, if it is ever asked for
     again: gave the Colour panel this same class in `snippets/facets.liquid`, and replaced the
     auto-fill track list with `repeat(5, minmax(0,228.8fr)) minmax(0,188fr)` so all six Figma columns
     (x = 54 / 283 / 512 / 741 / 970 / 1198) fit the 1332px content box; it also needed the row's
     `--checkbox-control-gap` zeroed and a 35px row-gap. Full detail in `docs/ACTIVE_WORK.md` round 51. */
  .facets-topbar__panel-body .facets-topbar__values:not(:has(.facets-swatch-item)) {
    grid-template-columns: repeat(auto-fill, 14.3125rem);
    column-gap: 0;
    row-gap: 0.75rem;
    display: grid;
  }

  /* --- active filter chip ---
     Figma "Moderate Button": 107x22 at x=54, fill #a6192e, no corner radius. Shipped 73x48 — same
     red, also square, but more than twice the drawn height. 107 is 9.5 + 62 (the 14px label) + 10 +
     16 (the X) + 9.5, so the padding and column-gap below reproduce the width for that label. */
  .removable-facet {
    height: 1.375rem;
    padding: 0 0.59375rem;
    column-gap: 0.625rem;
    font-size: 0.875rem;
    line-height: 1;
  }

  /* 16px is Figma's `Moderate Button` X; the owner has asked for smaller — 12px, see the base rule */
  .removable-facet__remove svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* --- "Clear all" beside the chip ---
     Figma: 12px at x=168, i.e. 7px after the chip's 161 right edge. Shipped 14px at x=147.
     No underline in the file. */
  .active-facets {
    gap: 7px;
  }

  .facets-clear-all {
    margin-inline-start: 0;
    font-size: 0.875rem;
  }
}

/* --- Home "New In" carousel arrows: above the row, not over the photos ---
   Figma `Home_Cream BG` carries `16/chev-left` at x=1344 and `16/chev-right` at x=1373, both 16x16 at
   y=905 — right-aligned to the 1386 content edge and sitting in the blank band above the cards, whose
   images do not start until y=964. Each chevron's own glyph is a 7x14 vector inside that 16px box.
   Shipped: 44px `circle-button` discs at x=78 and x=1318, vertically centred *on* the product images.

   Scoped to the New In section rather than every `.floating-controls-container`, because related
   products / recently viewed carousels reuse the same component and have no Figma frame — pulling
   their arrows 59px upward could collide with their own headings. */
@media screen and (pointer: fine) {
  [id$="__new_in_carousel"] product-list.floating-controls-container > .prev-next-button {
    --circle-button-size: 1rem;
    inset-block-start: -3.6875rem;
    background: none;
    color: #000;
    border-radius: 0;
    box-shadow: none;
  }

  [id$="__new_in_carousel"] product-list.floating-controls-container > .prev-next-button > svg {
    width: 0.4375rem;
    height: 0.875rem;
  }

  /* Figma right-aligns the pair 3px *past* the 1386 content edge: chev-right x=1373 (right edge 1389),
     chev-left x=1344 (right edge 1360). */
  [id$="__new_in_carousel"] product-list.floating-controls-container > .prev-next-button--prev {
    inset-inline-start: auto;
    inset-inline-end: 1.625rem;
  }

  [id$="__new_in_carousel"] product-list.floating-controls-container > .prev-next-button--next {
    inset-inline-end: -0.1875rem;
  }
}

/* ============================================================================
   APD 2026-08-19 — owner decisions (see docs/ACTIVE_WORK.md, decision block)
   ============================================================================ */

/* Decision 4b: card image aspect matches Figma exactly.
   Figma draws the product card image at 1 : 1.529 (455 x 695 desktop, 171 x 261.5 mobile).
   The theme's `product_image_aspect_ratio` setting only offers 2/3 = 1 : 1.500 via `.aspect-tall`,
   which is the whole residual card-height gap. Overridden here rather than by adding a preset.
   ⚠ Consequence, accepted by the owner: the theme-editor "image aspect ratio" setting no longer
   has any visible effect on product cards. Delete this rule to hand control back to the editor. */
.product-card .product-card__image,
.product-card .product-card__image--primary {
  aspect-ratio: 1 / 1.529;
}

/* Decision 8: filter values render in title case regardless of how they are cased in Notion.
   The Notion export mixes `Full`/`Minimal`/`Moderate` with `basic`/`crop`/`long`/`maxi`/`midi`/
   `mini` inside one list. Done at the display layer on purpose, so a future Notion re-export
   cannot undo it. Covers the desktop topbar panels, the drawer, the mobile sheet (all inside
   `.facets`) and the active-filter chips. */
.facets .checkbox-control,
.facets .facets-swatch-item__label,
.removable-facet__label {
  text-transform: capitalize;
}

/* ==================================================================================================
   Desktop (>= 700px) SALE CARD — Figma `Sale Page` > `Product Card Sale` (2026-08-19)

   The 2026-08-18 mobile pass conformed all of this inside a `max-width: 699px` block, so desktop
   kept the theme's defaults: the discount pill was 32.1 x 15 inset 8/8 instead of 39 x 21 inset
   12/12, the card price rendered at 14px / 28 instead of the design's 12px, and the two prices came
   out in the wrong order — `<sale-price>` is emitted before `<compare-at-price>` in the markup,
   while the design puts the struck-through original FIRST and the red discounted price after it.

   Figma, card origin = the card's top-left (303 x 559):
     Rectangle 62 (pill)   +12 / +12, 39 x 21, fill rgb(0,0,0)
     "-15%"                +20 / +16, 10px / 13 / weight 900, white
                           -> 23px of text ink + 8 + 8 = 39 wide, 13px line + 4 + 4 = 21 tall
     title + price node    12px / weight 400 ("Claudia's Forever One (New Colour)\n\n3,190.00 THB")
     Vector 4 (strike)     runs +4 .. +68 over that price line
     "2,711.50 THB"        starts +83, i.e. 15px after the strike, 10px / weight 900, rgb(166,25,46)

   Same numbers the mobile block already uses, because both frames draw the component identically.
   ================================================================================================== */
@media screen and (min-width: 700px) {
  .product-list:not(.product-list--carousel) .product-card__figure > .badge-list {
    inset-block-start: 12px;
    inset-inline-start: 12px;
  }

  .badge {
    padding: 4px 8px;
  }

  .product-list:not(.product-list--carousel) .product-card price-list {
    font-size: 14px;
    line-height: 0.82;
    column-gap: 15px;
  }

  .product-list:not(.product-list--carousel) .product-card price-list compare-at-price {
    order: -1;
  }

  .product-list:not(.product-list--carousel) .product-card price-list sale-price {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 900;
  }
}

/* ==================================================================================================
   Mobile 390 HERO — caption baseline + pagination dots (Figma `Mobile IP14_Home` > `New in_Slide`)
   2026-08-19

   §42 conformed the hero's type (6px "NEW IN", 12px "Anywhere Club") and its 189.6 height, but not
   where inside the slide the caption and dots sit. Measured before this change, against the frame:

     "NEW IN"        Figma y=148 (rel. to the slide top)   theme 101
     "Anywhere Club" Figma y=158                           theme 115.9
     dot row centre  Figma y=179.8                         theme 170.6
     dot diameter    Figma 2.2 (active 3.2), 7.6px pitch   theme 6, 22px pitch

   The 47px lift is `--content-over-media-row-gap`, which `.slideshow:has(.page-dots, …)` sets to
   4rem: the content grid is three rows and the caption is `place-self: end` in the middle one, so
   the caption's bottom sits one whole gap above the slide. Slide height 189.6 = 2G + row, and the
   caption bottom lands at 189.6 - G, so Figma's caption bottom of 168 needs G = 21.6px.

   The 4.6px that remained on the label after that is a separate bug, fixed in
   `sections/slideshow.liquid`: its inline rule read Figma's 10px label-to-headline step as a 10px
   MARGIN, but the label's own line box is 4.86px, so the step came out at 14.9px.

   The dots are drawn by `.page-dots > *:after` inset inside a `--dot-size` box. Setting the box to
   Figma's 7.6px pitch and the gap to 0 reproduces the drawn spacing, and the insets give the two
   drawn diameters: 7.6 - 2x2.7 = 2.2, and 7.6 - 2x2.2 = 3.2 for the current slide.

   ⚠ The active dot is normally replaced by the autoplay progress RING (`.page-dots--autoplay` hides
   its `:after` and shows `.circular-progress`). Figma draws a plain filled dot, slightly larger — so
   the ring is hidden and the `:after` restored, on mobile only. Desktop keeps the ring.
   ================================================================================================== */
@media screen and (max-width: 699px) {
  .shopify-section--slideshow .slideshow {
    --content-over-media-row-gap: 21.6px;
  }

  .shopify-section--slideshow .slideshow .page-dots {
    --dot-size: 7.6px;
    gap: 0;
    inset-block-end: 6px;
  }

  .shopify-section--slideshow .slideshow .page-dots > *:after {
    inset: 2.7px;
  }

  /* APD 2026-08-25 — same call as the desktop block below: one size for all four, the highlight is
     opacity only. Figma draws 2.2 inactive / 3.2 active here (`Mobile IP14_Home`); 2.7px inset is
     the 2.2px circle. */
  .shopify-section--slideshow .slideshow .page-dots--autoplay > *[aria-current="true"]:after {
    opacity: 1;
    inset: 2.7px;
  }

  .shopify-section--slideshow .slideshow .page-dots .circular-progress {
    display: none;
  }
}

/* The struck-through original comes FIRST wherever a sale card is drawn — the rules above scope the
   sale-card work to `:not(.product-list--carousel)` because the type sizes would change the home
   carousel's conformed row height, but the ORDER costs no geometry and the home row was otherwise
   showing the same component the opposite way round from the PLP on the same site. Figma draws no
   sale card in the home New In row, so this follows the component, not a frame. */
.product-list--carousel .product-card price-list compare-at-price {
  order: -1;
}

/* APD 2026-08-22 — owner PDF review, item 2 "should not be bold".
   Figma's NAV BAR draws every top-level link as HankenGrotesk-**Regular 400**, 14px, ls 0.14, with
   `Sale` in #a6192e. The theme rendered them at 900 because they carry `.text-emphasis`, which is
   correctly 900 everywhere else (Figma's footer headings are `Emphasis small` fw 900) — so this
   overrides the top-level nav labels ONLY, not `.text-emphasis` globally and not the dropdown
   contents, which are a separate element still to be checked against the file.
   The weight also inflated every label's width, which is half of why the row drifted left of the
   drawn x positions; the other half is the gap below. */
.header__primary-nav-item > a.text-emphasis,
.header__primary-nav-item > details > summary.text-emphasis {
  font-weight: 400;
}

/* Figma spaces the six links on a uniform 40px gap (label right edge -> next label left edge, the
   same 40 between all five pairs). The theme's 1150px band sets 2rem = 32. */
@media screen and (min-width: 1150px) {
  .header__primary-nav {
    column-gap: 2.5rem;
  }
}

/* APD 2026-08-22 — owner PDF review, item 3: header icons.
   Figma's NAV BAR puts the three 24x24 icon instances at x=1256 (search), 1310 (heart) and 1364
   (basket) — a uniform 30px gap, and a right edge of 1388. The theme had them on the 20px gap set
   by the >=700 band, ending at 1386.
   Confirmed first that box-to-box alignment is the right target: the live SVGs carry the SAME
   artwork with the SAME insets as the Figma instances (search glyph 18.1 wide inset 2.9, heart 22.5
   inset 0.7, basket 18 inset 3), so the 24x24 boxes correspond 1:1 and matching them matches the
   visible icons.
   Scoped to the theme's existing 1150 band, the same one the primary nav's 40px gap uses — below it
   this is our own interpolation (Figma draws only 1440 and 390), and at 390 the header is a
   different two-icon 16x16 layout that must not move.
   The -2px is deliberate: Figma's right margin here is 52 against the 54 gutter the logo sits on.
   The design is asymmetric by 2px, this is not a mistake to be tidied away. */
@media screen and (min-width: 1150px) {
  .header__secondary-nav {
    column-gap: 1.875rem;
    margin-inline-end: -2px;
  }
}

/* APD 2026-08-22 — owner PDF review, item 4: TOP Bar.
   Figma `TOP Bar` is a 1440x35 black rectangle: "Bundles 5% off" 12/400 white at x=54, the centre
   message 12/**900** white centred on 720, `TH/EN` 12/400 white at x=1302, and a 24x24 account icon
   at x=1365.
   - Height: the bar measured 35.6 and grows to 44 once the icon is 24 tall, so it is pinned to 35
     with the contents centred. Figma's own inner y values disagree with each other (the icon box
     centres on 14, "Bundles" on 16, TH/EN on 19, against a bar centre of 17.5), so centring is the
     honest reading rather than reproducing three different offsets.
   - The account icon's right edge goes to 1388, the same as the basket directly below it in the nav
     bar. Figma draws 1389 vs the basket's 1388 — 1px apart and plainly meant to line up, so they are
     aligned to each other rather than each given its own magic margin.
   - The centre message was ALREADY centred on 720 correctly (the 08-19 absolute-centring rule
     works) AND already the right weight. A 900 was briefly applied here and reverted: the TEXT
     node's `style.fontWeight` is 900, but `characterStyleOverrides` re-styles EVERY character to
     Regular 400, so the node default applies to no rendered glyph. Read the overrides, not the
     node style. (Owner caught this from the Figma inspect panel: 400, 12px, 200% leading, 1%
     tracking — which is what the resolved runs say too.) */
@media screen and (min-width: 700px) {
  .announcement-bar {
    block-size: 2.1875rem;
    padding-block: 0;
    align-items: center;
  }

  .announcement-bar__account {
    margin-inline-end: -2px;
  }
}

/* The 24px icon is a DESKTOP number — `TOP Bar` is the 1440 frame. Rendering it at 24 everywhere
   pushed the mobile strip from its conformed 29px to 37 and the 390 page from 3575 to 3583.
   `Mobile IP14_Home` draws no account icon in the top area at all, so mobile keeps the 15px it was
   conformed with on 2026-08-18 rather than inheriting a desktop measurement. */
@media screen and (max-width: 699px) {
  .announcement-bar__account svg {
    inline-size: 0.9375rem;
  }
}

/* APD 2026-08-25 — LANGUAGE DROPDOWN in the top bar. Round 16 built it; round 17 (same day) is the
   owner's second pass: "should open on click, not hover, but closed when mouse removed from it or
   when lang chosen. the list need shift to the right to align right below EN with arrow. add more
   languages as stated in slides. remove arrow."

   - OPENING IS JS-ONLY now. There is deliberately no `:hover` and no `:focus-within` rule: the only
     open state is `[data-open]`, which the section's inline script sets on click and clears on
     pointerleave / language chosen / outside click / Escape. Adding a `:hover` rule back would
     re-introduce hover-open, which the owner rejected.
   - NO CHEVRON — the trigger is the active language's label alone ("remove arrow").
   - ALIGNMENT: the panel is pulled 0.75rem to the left of the trigger, exactly the list's own
     inline padding, so the labels in the list sit at the SAME x as the trigger's label instead of
     the box's right edge lining up with it. That is the "shift to the right" the owner asked for —
     round 16 had the box right-aligned to a trigger that was 8px wider than its text because of the
     chevron, which read as a leftward offset.

   ⚠ DELIBERATE DEVIATION FROM FIGMA. `TOP Bar` draws one 36x24 label reading "TH/EN" at x=1302,
   12/400 white, no chevron and no panel. Nothing in the file describes this dropdown, so its
   geometry is a judgment call:
   - trigger type stays 14px/400 white (14 is the global type floor set 2026-08-24, and 400 + white
     is what the file gives the label);
   - the panel repeats the BAR's own colours — rgb(28,28,28) with white text — so it reads as the
     top bar extending downwards. Cream (the nav flyouts' colour, `NAV Dropdown Bar_New In` 24:406)
     was tried first and is invisible here: the page behind the bar is the same #F4F2ED, so the
     panel had no edge at all;
   - the active row is UNDERLINED, which is how the file's `Languages` component set (2095:2968)
     marks the active language, and matches the mobile drawer. This also answers owner PDF item 3's
     open half: the chosen language shows in the trigger AND is underlined in the list.
   Position still falls out of the flex row: the account icon keeps Figma's 26px left gap. */
.announcement-bar__locale {
  position: relative;
  display: flex;
  align-items: center;
  /* Stretched to the bar's full height on purpose: `inset-block-start: 100%` on the panel then lands
     on the BAR's bottom edge, so the black panel is continuous with the black bar and the pointer
     never crosses a gap on its way down. The button stays vertically centred (align-items above). */
  align-self: stretch;
  z-index: 20;
}

.announcement-bar__locale-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.01em;
}

.announcement-bar__locale-panel {
  position: absolute;
  inset-block-start: 100%;
  /* -0.75rem == the list's inline padding, so the OPTION TEXT lines up with the trigger's text. */
  inset-inline-start: -0.75rem;
  inset-inline-end: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.announcement-bar__locale[data-open] .announcement-bar__locale-panel {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* `unstyled-list` in the markup is load-bearing: the theme's own
   `:where(ol, ul):not(.unstyled-list) li { padding-inline-start: 0.25rem }` was pushing every option
   4px right of the trigger's label, which is exactly the misalignment this round was fixing. */
.announcement-bar__locale-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.75rem;
  min-inline-size: 3.25rem;
  background: rgb(28, 28, 28);
  color: #fff;
  text-align: start;
}

.announcement-bar__locale-option {
  display: block;
  padding-block: 0.125rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.announcement-bar__locale-option.is-active {
  text-decoration: underline;
  text-decoration-thickness: 0.25px;
  text-underline-offset: 2px;
}

@media screen and (min-width: 700px) {
  .announcement-bar__account {
    margin-inline-start: 1.625rem;
  }
}

/* ==================================================================================================
   DESKTOP HERO pagination dots — owner hero review, 2026-08-22
   "4 circles should be bigger, not show loading animation and check switch time"

   Source of truth: `/UI / Component/Home_Cream BG/New in_Slide` in the cached full Figma tree.
   The slide draws four plain white ELLIPSES, no ring and no progress arc:

     Ellipse 39 (current)  12 x 12  white, node opacity 1
     Ellipse 40/41/42      8 x 8    white, node opacity 0.5
     centre pitch          28, uniform (centres at 679 / 707 / 735 / 763 in the 1440 frame)
     centre y              763 in a hero that spans 99..799. Figma centres all four on 763 rather
                           than aligning their bottoms, so the 8px ones sit 767 and the 12px one 769.
                           Live boxes are all 12px, so the inset is measured off the 12px box: 799 -
                           (763 + 6) = 30.

   Measured live at 1440 before this change: box 6px, active dot replaced by an 8px `.circular-progress`
   ring animating `animateCircularProgress` over 6s, pitch 22, bottom inset 54.

   So all three of the owner's points are one geometry fix plus one deletion:
     bigger            --dot-size 6 -> 12 (the box IS the active diameter; `:after` inset gives the
                       smaller inactive one, 12 - 2x2 = 8)
     no loading dot    hide `.circular-progress` and restore the active `:after`, exactly as the
                       mobile block above already does. Autoplay is NOT driven by this animation —
                       `SlideshowCarousel` uses a `Player(autoplay)` timer that dispatches
                       `player:end` -> `next()`; the CSS var `--slideshow-progress-duration` only
                       paints the ring. Hiding it cannot stop the rotation.
     switch time       stays at the section's `cycle_speed` = 6s. Figma has no timing information,
                       and the value is unchanged by this pass — flagged to the owner instead.

   Column gap is already 16 in the base rule, restated here because 12 + 16 is what makes the 28.
   Scoped to `.shopify-section--slideshow` like the mobile block, so every slideshow gets the same
   dots — it is one component, and the collection templates that reuse it drew the theme default.
   ================================================================================================== */
@media screen and (min-width: 700px) {
  .shopify-section--slideshow .slideshow .page-dots {
    --dot-size: 12px;
    column-gap: 16px;
    inset-block-end: 30px;
  }

  .shopify-section--slideshow .slideshow .page-dots > *:after {
    inset: 2px;
    opacity: 0.5;
  }

  /* APD 2026-08-25 — ALL FOUR DOTS ARE THE SAME SIZE. Owner: "the dots that highlighted when hero
     pic changed. make same size. now highlighted one is bigger." Figma's `New in_Slide` draws the
     current one at 12 and the other three at 8 (node opacities 1 / 0.5), which is what the 08-22
     round built; the owner overrules the file. The inset goes 0 -> 2px, i.e. the active dot is now
     the same 8px circle as the rest, and the highlight is carried by OPACITY alone (1 against 0.5).
     The 12px box stays — it is what sets the 28px pitch with the 16px column gap. To make them all
     the LARGER size instead, this inset becomes 0 and the inactive rule's becomes 0 too. */
  .shopify-section--slideshow .slideshow .page-dots--autoplay > *[aria-current="true"]:after {
    inset: 2px;
    opacity: 1;
  }

  .shopify-section--slideshow .slideshow .page-dots .circular-progress {
    display: none;
  }
}

/* ==================================================================================================
   HERO slide transition — owner review, 2026-08-25
   "fade in, do slower than now, design similar to netflix. but also keep possiblity to switch
   manually. should not irritate eye."

   REPLACES the 2026-08-22 horizontal push (Figma's SMART_ANIMATE read). The hero now holds 6s and
   dissolves over 1.2s; the timing was chosen by playing seven options side by side on the real
   slides — output/hero_animation/hero_motion_samples.html. The motion itself lives in
   `assets/theme.js` (`SlideshowCarousel.createOnChangeAnimationControls`, marked as a patch there,
   with the full reasoning); these two classes are the layout half of it. Only the MEDIA fades — in
   the design the caption and the dots are siblings of the slide instance, not children, and all four
   slides carry the same caption, so nothing about the text moves at all.
   ================================================================================================== */

/* The outgoing slide keeps `is-selected` for the whole fade — both slides are live so one can
   dissolve over the other — which would make it `position: static` a second time and double the
   section height. Left in place after the animation on purpose: once `is-selected` goes,
   `:not(.is-selected)` below says exactly the same thing, and removing it on finish would race the
   base's class swap.

   `z-index` is what makes the fade work at all, and it is new in this round. The incoming slide is
   static, but its `.content-over-media` is `position: relative` — so both slides own a positioned
   box at `z-index: auto` and TREE ORDER decides, which paints the incoming media above the outgoing
   one on any forward change (slide 3 -> 4) and leaves the fade with nothing to reveal. 2 puts the
   leaving slide on top unconditionally. The old push patch did not need this: two frames sliding
   side by side never overlap. */
.slideshow__slide--leaving {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* APD 2026-09-03 — owner: "the circles for transition disappear and appear again when photo changes. they
   should stay." They did, on the HOME hero as well as the collection one, for the whole 1.2s fade.

   Cause is the line directly above. `.slideshow .page-dots` is `z-index: 1` (theme.css:6866); the round-22
   dissolve puts the LEAVING slide at `z-index: 2` so its media and caption stay on top for the length of the
   fade — and the dots sit underneath it. Measured before the fix, at 1440: `elementFromPoint` on the middle of
   the first dot returned the leaving slide's `<img>` from 94ms to 1012ms after a change, and the dot again at
   1411ms. The dots never actually faded (opacity stayed 1); they were covered.

   3 clears the leaving slide without touching the fade, which is what the z-index-2 rule exists for. The
   volume control is raised with them — it is pinned inside the same box and would have been covered too. */
.slideshow .page-dots,
.slideshow .slideshow__volume-control {
  z-index: 3;
}

/* The outgoing slide paints above the incoming one, so its gradient and caption are the pair that
   stays visible for the whole fade. Hide the incoming slide's copies or the gradient stacks twice
   across the join and the caption renders twice. */
.slideshow__slide--entering .content-over-media:before,
.slideshow__slide--entering .slideshow__slide-content {
  opacity: 0;
}

/* ==================================================================================================
   HERO media focal point — owner review, 2026-08-22
   "hero_anywhere_club_2.jpg — cropped on top, but in figma it is not"

   The slide media is `object-fit: cover` in a 1440x700 box (AR 2.057). Slides 2, 3 and 4 are
   1440x960 sources (AR 1.500), i.e. TALLER than the box, so 13.5% of the image height is discarded —
   and `object-position: center` took it off the top and the bottom equally.

   Figma does not centre it. Every `landing page N` rectangle carries its own crop window, and the
   numbers say slide 2's is deliberately high:

     landing page 1   FILL (centred) — and its source is 1440x573, WIDER than the box, so nothing is
                      cropped vertically at all
     landing page 2   STRETCH, cropX 0.0000..1.0000, cropY **0.0502..0.7793**
     landing page 3   FILL (centred)
     landing page 4   FILL (centred)

   Two things fall out of that cropY. Its height is **0.7291**, and this box's cover window is
   1.500 / 2.057 = **0.7292** — identical to four decimals, which confirms Figma is placing the same
   1440x960 asset. And its centre is **0.4147**, not 0.5: the drawn window sits 8.5% of the image
   height above where the theme put it, which is exactly the band the owner was missing off the top.

   Converting a crop window to `object-position`: with cover, `50% p` puts the window top at
   (1 - f) * p where f is the visible fraction. Solving (1 - 0.7292) * p = 0.0502 gives p = 0.1851,
   so **18.5%**. `range` settings cap at 101 steps, so the slider is 0-100 step 1 and slide 2 is set
   to **19%** — window top 0.0515 against Figma's 0.0502, which is 1.2px of a 960px source, under a
   pixel on screen. Slides 1, 3 and 4 stay at 50% because Figma draws them FILL/centred.

   Driven by a per-block setting rather than an `:nth-child` rule so it survives reordering, shows up
   in the theme editor, and leaves every other slideshow (10 collection templates use this section)
   on the 50% default, which is byte-for-byte the old behaviour.
   ================================================================================================== */
.slideshow__slide .content-over-media > :is(img, video, iframe, svg, video-media),
.slideshow__slide .content-over-media > picture img {
  /* APD 2026-09-02 — the X half was a hard 50%. The phone hero is now 4:5 (deck slide 2), and every
     hero photo is landscape, so on a phone the crop is SIDEWAYS: at 0.8 against a 1.5:1 photo only
     53% of its width shows, and a centred window cut a face off slides 2 and 4. `image_focal_x`
     moves that window. MEASURED: the four assets are NOT one shape — slide 1 is 1440x574 (2.51:1),
     slides 2-4 are 1440x960 (1.5:1). At desktop (a 2.057:1 slide) the three 1.5:1 photos overflow
     vertically only, so their X value has nothing to take up and the desktop hero is untouched by
     this; slide 1 does have horizontal slack at desktop, and is left on the 50% default for that
     reason. The same asymmetry makes `image_focal_y` inert on the PHONE, where nothing overflows
     vertically any more — slide 2's 19% is a desktop-only correction and still works there. */
  object-position: var(--content-over-media-focal-x, 50%) var(--content-over-media-focal-y, 50%);
}

/* ==========================================================================================================
   APD 2026-08-22 — owner review: Quick Add / size type, and the wishlist heart.

   TYPE. DESIGN_SPEC.json components `Quick Add`, `Quick Add + runout` and `Size` are all 303x37
   frames whose text is Hanken Grotesk 14px / weight 400 / line-height 18.2px (1.3) /
   letter-spacing 0.14px (0.01em), with `text_case: null` — so NOT uppercased. The bar shipped at
   12px / weight 900 / line-height 24px / uppercase, which is where "quick add font is diff" comes
   from; the size labels shipped at 12px / 24px line-height. Both are corrected to the design here.
   Appended rather than edited in place so the original block stays readable as the theme's own;
   same specificity, later in the file, so these win.
   ========================================================================================================== */

.product-card__quick-add-bar {
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
  line-height: 1.3;         /* 18.2px at 14px */
  letter-spacing: 0.01em;
  text-transform: none;
}

/* The size row that replaces the bar on hover — Figma's `Size` frame, same type as the bar. */
.product-card__quick-add-sizes .block-swatch {
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* HEART. Owner: "hearts favourites are too small in product photos". The glyph is the Swish /
   Wishlist King app's own <wk-button class="wk-floating"> (placed by the rule at the top of the
   2026-08-13 block above); the app ships it smaller than the design reads.

   ⚠ NO FIGMA NUMBER EXISTS for the product-card heart — DESIGN_SPEC.json records no vector for it,
   only the NAV BAR's icons (24x24 instances, heart glyph 22.5 wide, theme.css ~10735). 24px is
   taken from those so the two hearts on the page agree. This is a judgement call, not a measured
   design value, and it is ALSO UNVERIFIED IN BROWSER: the app's block is not injected into the
   throwaway `shopify theme dev` theme, so the element does not exist there to measure. Confirm on
   REDESIGN-WIP and adjust the one number below if the owner wants it larger still. */
/* APD 2026-08-25 — BACK TO 24px. The owner's "heart in desktop size should be bigger" turned out to
   mean the **mouse cursor** ("heart 81x88" = Figma's `Apple cursor` rectangle — see the cursor block
   above, where the real defect was), not this heart. The 28px bump made earlier the same day is
   reverted; the card heart is Figma's own number again. The reasoning below is kept because it is
   the answer to "where is the heart's size in Figma".
   Superseded: 24px -> 28px on the owner's "heart in desktop size should be bigger".
   ⚠ THE FIGMA FILE DOES NOT SUPPORT A BIGGER NUMBER, and this is the third time it has been looked
   for, so here is the whole answer with node names. In the cached full tree
   (output/figma_redesign/cache/file_full_20260818.json) every product-card heart is
   `Product Card+Quick Add/Heart line` = a **24 x 24** instance whose glyph `love-it` is
   **22.5 x 19.69**; the only other size anywhere is **16 x 16** (glyph 15 x 13.12), which is the
   mobile header's. Measured live before this change, the card's Wishlist King svg was a 24px box
   painting a **23.8 x 20.7** glyph — i.e. already fractionally LARGER than the file's 22.5 x 19.69,
   and the header heart renders 22.5 x 19.7, exactly the drawn value. So 28 is the owner's call
   overriding the file, not a conformance fix: it is +17%, and 28 is the size of the design's other
   circle on the same card (the selected-swatch ring). One number if they want 32 instead.
   Mobile stays at 20px (round 25, "make heart smaller in mobile site"). */
.product-card__figure wishlist-button-collection wk-button.wk-floating {
  --apd-heart-size: 24px;
}

.product-card__figure wishlist-button-collection wk-button.wk-floating :is(svg, img) {
  width: var(--apd-heart-size) !important;
  height: var(--apd-heart-size) !important;
}

/* ==========================================================================================================
   APD 2026-08-22 — HOME CONTENT CAPPED AT THE DESIGN WIDTH (1332 content / 1440 frame).

   Owner tests at 1920. Reported there and correct at 1440: the mosaic crop, the Signature carousel
   looking too short, and the product photos being "huge". All one cause — `.container`
   (theme.css:1657) sizes itself as `max(var(--container-gutter), 50% - var(--container-max-width)/2)`
   and the base class never defines `--container-max-width`, so the `50%` term is invalid, the max()
   falls back to the 54px gutter, and content grows with the viewport forever.

   Defining the variable is all that is needed: at 1440 it still resolves to the 54px gutter (so that
   width is byte-for-byte unchanged), and above 1440 the margins grow instead of the content, which
   centres it. The product card is the clearest case — the New In row is 4-up on a 1332 content width
   with 40px gutters, i.e. exactly Figma's 303px card, at any viewport.

   THIS IS NOT THE REVERTED PAGE CAP. That one put `max-width` on `#main` and the header group, so the
   section BACKGROUNDS capped too and the white <body> showed down both sides. Here the backgrounds
   are untouched and still run to the viewport edge; only their contents stop. Nothing empty appears.

   The Signature carousel needs nothing else: its height and gap are already `clamp()`ed and hit their
   ceilings by 1440 — it only ever looked short because the strip kept getting wider around a
   fixed-height figure. Capping the strip restores the proportion.
   ========================================================================================================== */

.apd-content-1440 .container {
  --container-max-width: 1332px;
}

/* ==========================================================================================================
   APD 2026-08-22 — Quick Add hover, two owner-reported defects.

   1. "hovering on quick add increase blank line height" — the open panel was taller than the bar it
      replaces (measured 53px against the bar's 45px), so the card's contents shifted every time the
      pointer crossed it. The panel now carries the bar's own `padding-block`, so the swap is
      height-neutral and nothing moves. `row-gap: 0` stops a wrapped size row re-introducing the jump.
   2. "underline under S appears" — `.block-swatch::after` is the theme's SELECTED-value underline, and
      the quick-add row opens with the product's first available size already selected, so it drew a
      white rule under it. In this row the sizes are a picker, not a readout of current state, and
      Figma's `Size` frame draws no underline on any pill. Suppressed here only; the PDP's variant
      picker, which does need it, is untouched.
   ========================================================================================================== */

.product-card__quick-add-panel {
  padding-block: 0.85rem;
}

.product-card__quick-add-sizes {
  row-gap: 0;
}

/* The pills' own vertical padding is what was left of the jump: with the bar's `padding-block`
   (0.85rem) on the panel the open state still came out 51.8px against the bar's 45.4px, because each
   swatch adds 0.2rem top and bottom. Zeroing just the block padding here makes the panel exactly
   2 x 0.85rem + 1.3 x 0.875rem = 45.4px — identical to the bar, so the swap moves nothing. The
   horizontal padding is kept: it is what spaces the labels apart. */
.product-card__quick-add-sizes .block-swatch {
  padding-block: 0;
}

.product-card__quick-add-sizes :checked + .block-swatch::after,
.product-card__quick-add-sizes .block-swatch.is-selected::after {
  display: none;
}

/* ==========================================================================================
   APD 2026-08-23 — owner review of the PLP (Shop All, Swimwear > One Piece), four items.
   Everything here is scoped to the collection page's two sections, so the home page, the PDP
   and the search results are untouched.
   ========================================================================================== */

/* ---------- 1. PAGE TITLE: ALL CAPS ----------
   Figma draws the title as `ONE PIECE` — literal capitals in the text node, 32/900 desktop and
   16/900 mobile (`Product List+Filters` 132:644, `Mobile_Filters_One piece`). The 2026-08-19
   "title case everywhere" decision removed the theme's uppercasing from product-card titles and
   collection names; the PAGE title was collateral, and the owner has now asked for it back. Done
   as text-transform rather than in Liquid so the breadcrumb, the <title> tag and the nav label
   keep their own casing. */
.shopify-section--collection-banner .prose :is(h1, .h1) {
  text-transform: uppercase;
}

/* ---------- 2. PAGE BACKGROUND: CREAM, NOT WHITE ----------
   Every 1440 and 390 frame in the handoff file is filled #F4F2ED — including the one literally
   named `Home_Cream BG`. The theme's scheme-1 background is #ffffff, so only the header (which
   sets the cream itself) was right and the page under it was white. Set on <body> rather than on
   the sections so the strip beside a full-bleed row and the area under a short page are cream
   too, and as a plain background-color rather than by re-pointing `--background`, which doubles
   as the "colour of things drawn ON the page" (cart-count digit, badge text). */
body:has(.shopify-section--main-collection) {
  background-color: #f4f2ed;
}

/* <body> alone is not enough: both sections wrap their content in a
   `<div class="color-scheme color-scheme--scheme-1">`, and scheme-1's background is #ffffff, so
   that div painted a 1440 x 5104 white sheet over the cream from y=178 down. Repainted here
   rather than by changing scheme-1 itself (which is the default scheme for the whole store) or by
   re-pointing `--background` inside the section (which would also recolour the quick-add bar and
   the badge text that read from it). */
.shopify-section--collection-banner > .color-scheme,
.shopify-section--main-collection > .color-scheme {
  background-color: #f4f2ed;
}

/* ---------- 3. COLOUR CIRCLES: SAME AS THE HOME PAGE ----------
   Owner: "circle UI should be same as home page". The New In carousel was conformed to Figma on
   2026-08-22 (assets/section-newin.css §4) and that lane scoped its rules to
   `[id$="__new_in_carousel"]`, noting the PLP owns the same decision separately — this is that.
   Two differences, both visible side by side: the circle was 22px here against 24px there, and
   the selected colour was marked with the theme's 1px underline instead of Figma's 28px ring
   (24 + 2 either side, stroke #000 at 0.25). Values copied from section-newin.css verbatim so the
   two surfaces cannot drift. */
.shopify-section--main-collection .product-card__info .color-swatch {
  --swatch-size: 1.5rem; /* 24px, per Figma */
  margin: 2px 0.2rem; /* row height 24 + 4 = 28, per Figma */
}

/* APD 2026-08-23 — owner: "white space between outer and inner circles is bigger in figma, which
   i like more." It is, and the reason is a rounding floor in the browser, not a wrong number.
   Figma: swatch 24, ring ellipse 28, stroke #000 at **0.25px, CENTER-aligned** -> the ring's inner
   edge sits at radius 14 - 0.125 = 13.875, so the white gap is 13.875 - 12 = **1.875px**.
   Chrome will not paint a 0.25px border: any non-zero border-width rasterises to at least 1 device
   pixel, measured on the render as `1px solid rgb(0, 0, 0)`. Inside a 28px ring that 1px eats 0.75
   of the gap and leaves 1px of white — half of the design's, which is exactly what the owner saw.
   Since the hairline cannot be thinner, the gap is bought with diameter: inset -3px = a **30px**
   ring, white gap **2px** against Figma's 1.875. Deliberate deviation, one number, stated:
   the drawn OUTER diameter is 30 where the file says 28; the white space — the thing asked for —
   is within 0.125px. The 0.25px border-width declaration stays as the record of the file's value.
   The swatch itself is untouched at 24px, and the ::after is absolutely positioned, so nothing in
   the card's layout moves (verified: info block height unchanged after the change). */
.shopify-section--main-collection .product-card__info :checked + .color-swatch::after,
.shopify-section--main-collection .product-card__info .color-swatch.is-selected::after {
  content: "";
  position: absolute;
  /* APD 2026-08-25 (deck: "Make outline thicker", the arrow points at a selected card swatch).
     Stroke 0.25px -> **2px** and the inset -3px -> **-4px** in the same move: the ring is drawn on
     the OUTSIDE of the box, so thickening it alone would eat the white gap the owner asked for on
     08-23 (2px) and leave 1px. -4px makes the ring 32px across, so 32 - 2*2 = 28 inner edge and the
     gap stays 2px against the 24px swatch. The 0.25px note below is kept as the record of what the
     Figma file draws; Chrome could not paint it anyway. */
  inset: -4px; /* 24 + 4 + 4 = a 32px ring; Figma draws 28 with a 0.25px stroke */
  width: auto;
  height: auto;
  margin: 0;
  inset-inline-start: -4px;
  inset-block-end: -4px;
  transform: none;
  background: none;
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 50%;
}

/* ---------- 4. PAGE TITLE: OPTICALLY CENTRED IN ITS BAND (mobile) ----------
   Owner: "vertical align in the middle". Desktop was already centred — measured on the render,
   the caps ink sits 28.1px below the nav and 27.4px above the filter row inside the 79px band, so
   nothing is changed there. Mobile was not: the 13px / 5px padding was derived from where Figma
   PUTS THE TEXT BOX (page y 83..115 in a section starting at 70), and a 32px line box holding
   16px capitals has 10.1px of empty space at the top and 10.2px at the bottom, so the visible
   letters ended up 23.1px below the top of the band and 15.2px above the bottom — 8px low.
   9px / 9px keeps the band exactly 50px tall, so the filter row and everything under it stay put,
   and lands the ink at 19.1 / 19.2. */
@media screen and (max-width: 699px) {
  .shopify-section--collection-banner .section-spacing {
    padding-block-start: 9px;
    /* !important for the same reason as the rule above: the platform injects
       `#shopify-section-<id> .section-spacing { padding-block-end: 0rem }` inside the section. */
    padding-block-end: 9px !important;
  }
}

/* ---------- 5. CARD PRICE: NOT BOLD ----------
   Owner 2026-08-23: "price should not be bold". On the PLP every current price rendered
   10px / weight 900 — the red discounted one AND, on the ~80% of cards that are not on sale, a black
   one, because the rule that carries the weight matches `<sale-price>`, which the theme emits for
   the plain price too (`.product-list:not(.product-list--carousel) .product-card price-list
   sale-price`, added for Figma's `IP_Product Card Sale` card). The home page's New In cards were
   already 12px/400 — the same lane scoped its rule away from carousels — so this is the same
   "make it match the home page" as the colour circles above.
   ⚠ Deviation from the file, deliberate and owner-directed: Figma DOES draw the discounted price
   on the sale card as HankenGrotesk-Black 900 in #A6192E. The red stays; only the weight goes.
   Weight only — the struck-through original, the red, the order and every size are untouched.
   Selector deliberately mirrors the rule it overrides, character for character up to the last
   element, so the two carry the SAME specificity (0,3,2) and this one wins only by being later in
   the file — no `!important`, and it cannot outrank anything it was not meant to. */
.product-list:not(.product-list--carousel) .product-card price-list :is(sale-price, compare-at-price) {
  font-weight: 400;
}

/* ---------- 6. CARD PRICE: 12px WHERE FIGMA SAYS 12px ----------
   Owner 2026-08-23, following the flag above: "should as in figma 12px". The file draws the price
   of a REGULAR card as the last line of the card's name node — 12px / 400 / line-height 9.84 (the
   0.82 factor `price-list` already carries) — while the 10px belongs to the SALE card, where it is
   the separate red discounted node (`Sale  -15%` frame: '2,711.50 THB', 10/900/13) sitting next to
   the struck-through original, which is itself part of that same 12/400 name node.
   So the size is conditional, not global: 12px when the card has no `<compare-at-price>`, 10px kept
   when it does. `:not(:has(compare-at-price))` makes that distinction in CSS — the same `:has`
   test the sale-red rule earlier in this file already relies on — and lands the regular card on the
   same 12px/400 the home page's New In cards have always shown.
   Specificity (0,4,2) beats the 10px rule's (0,3,2) outright, so this does not depend on order. */
.product-list:not(.product-list--carousel) .product-card price-list:not(:has(compare-at-price)) sale-price {
  font-size: 14px;
  line-height: 0.82;
}

/* ---------- 5b. SALE CARD ONLY: THE DISCOUNTED PRICE IS BOLD AGAIN ----------
   Owner 2026-08-23, Sale page review: "new price bold". §5 above took every card price to weight
   400 for the owner's earlier "price should not be bold" — right for the ~80% of cards that are NOT
   on sale, where `<sale-price>` carries the only, plain price, but it flattened the red discounted
   price too, and Figma draws THAT one as HankenGrotesk-Black 900 (`Product Card Sale`,
   '2,711.50 THB', 10px / 13 / 900 / #A6192E). §5 already flagged this as a deliberate deviation
   from the file; the owner has now reversed it for the sale case only.
   Both instructions hold at once because the two cases are distinguishable in CSS: a sale card is
   one whose `price-list` HAS a `<compare-at-price>`. Specificity (0,3,3) — `:has()` contributes its
   argument's specificity, here one element — beats §5's (0,3,2) outright, so this does not depend
   on source order. The struck original stays at 400: in the file it is part of the 12px/400 name
   node, and the owner asked for bold on the NEW price. */
.product-list:not(.product-list--carousel) .product-card price-list:has(compare-at-price) sale-price {
  font-weight: 900;
}

/* ---------- 7. CARD VERTICAL RHYTHM: NAME -> PRICE, AND THE TWO GAPS AROUND IT ----------
   Owner 2026-08-23: "in figma spacing is bigger between prod name and price". It is, and the reason
   the theme could not have got there by accident: in the file the name and the price are ONE text
   node whose characters are
       'Claudia's Forever One (New Colour)' + newline + newline + '3,190.00 THB'
   — an EMPTY LINE between them. At line-height 9.84 that puts 9.84px between the two line boxes
   (baseline to baseline 19.68), where the theme's `.gap-1` stack gave 4px.
   Measured on the 303-wide `Product Card+Quick Add` component (image 0..463, text node 474..504 at
   3 x 9.84 centred, colour row 514..542) against the render, desktop:

                            Figma     was      now
     image -> name          11.24     16       11.24
     name  -> price          9.84      4        9.84
     price -> colour row    10.24     12       10.24
     card height           542.48    542.95   542.5

   The two neighbours are conformed with it deliberately: the owner asked for one of the three, but
   moving only that one would have grown the card 5.8px and left the other two off-spec, whereas all
   three together leave the grid's row height where every other lane measured it (within 0.5px).
   The two neighbours are desktop-only — those numbers come from the 303 component; the mobile
   frame draws its own (image -> text 4.57, text -> colour 7.31, and 7.31 is already live as the
   7.4px in the max-width:699px block above). The name -> price empty line exists in the mobile node
   too, so that one applies in both bands and mobile cards grow by the 5.8px. */
.product-list:not(.product-list--carousel) .product-card__info .v-stack:has(> price-list) {
  row-gap: 9.84px;
}

@media screen and (min-width: 700px) {
  .product-list:not(.product-list--carousel) .product-card {
    row-gap: 11.24px;
  }

  .product-list:not(.product-list--carousel) .product-card__info {
    row-gap: 10.24px;
  }
}

/* ---------- 8. QUICK ADD: NO OFFSET BETWEEN THE BAR AND THE PHOTO ----------
   Owner 2026-08-23: "should be no space between quick add and photo".
   The SETTLED bar is already flush — it is absolutely positioned inside `.product-card__figure`
   with `inset-block-end: 0`, and measured on the render its bottom edge sits exactly on the photo's
   (bar bottom == image bottom, delta 0.00, at 1440 and at 390, PLP and home carousel).
   What is NOT flush is the entrance: the theme parks the hidden bar at `translateY(6px)` and slides
   it up over 0.2s, so for that 0.2s — and for the whole fade-out when the pointer leaves — the bar
   hangs 6px BELOW the photo's bottom edge, over the cream. Removed here: the bar now fades in and
   out in place, on the photo edge, with nothing between the two at any point in the interaction.
   (Consistent with the 08-22 call on the carousel arrows, where the owner asked for the hover
   animation to go on its own merits.) The opacity fade is kept — only the 6px move goes. */
@media screen and (pointer: fine) {
  .product-card__quick-add {
    transform: none;
  }
}

/* ---------- 9. HOVER (SECOND) CARD PHOTO: FILL THE FRAME, LIKE THE FIRST ONE ----------
   Owner PDF p7 "Weird cropping", and the same defect the owner described as "space between quick
   add and photo": on the circled card the QUICK ADD bar is showing, i.e. the pointer is ON it, i.e.
   what is displayed is the SECOND photo — and the second photo is letterboxed inside the card
   frame, white above and below, which is what leaves a strip between the photo and the bar.
   Cause: `snippets/product-card.liquid` puts `object-cover` (and the aspect class) on the PRIMARY
   image only —
       primary   → `product-card__image product-card__image--primary object-cover aspect-tall`
       secondary → `product-card__image product-card__image--secondary`
   — so the hover image falls through to `.product-card__image`'s own `object-fit: contain` and is
   fitted inside the 1:1.529 box instead of filling it. Verified on the render: every card reports
   primary `cover`, secondary `contain`.
   Fixed in CSS rather than in the snippet because `snippets/product-card.liquid` belongs to the PLP
   lane's push set and this file is already open; the snippet is the tidier home for it later. */
.product-card .product-card__image--secondary {
  object-fit: cover;
  object-position: center;
}

/* APD 2026-08-24 — owner: "all text on desktop nothing should be below 14px", the follow-up to the
   12px -> 14px pass earlier the same day. DESKTOP ONLY: the 390 Figma scale (6/8/10/13px) is
   deliberately left intact below 700px, so these are gated here rather than edited in place —
   each one's original declaration reaches mobile too (four are ungated, .facets-mobile-bar__item
   sits in a max-width:1149 block), so raising it at source would have taken mobile with it.
   Every selector is repeated verbatim from its original rule, so equal specificity plus a later
   source position is what makes this win; keep this block last in the file. */
@media screen and (min-width: 700px) {
  .breadcrumb__list-item + .breadcrumb__list-item:before,
  /* the compact filter bar the PLP shows below 1150px — 13px, and 1024-1149 is a desktop width */
  .facets-mobile-bar__item,
  .smallcaps,
  .text-xxs,
  .header__cart-count {
    font-size: 0.875rem;
  }
}

/* ==========================================================================================================
   APD 2026-08-25 — DECK ROUND, three cheap items. Appended after the 08-24 type-floor block on
   purpose: nothing here declares a font-size, so "keep that block last" still holds for type.

   1. BEIGE IS NOW THE WHOLE SITE'S BACKGROUND (deck: "Beige should be default background for all
      website"). The 08-23 PLP work set the cream on `body:has(.shopify-section--main-collection)`
      and on the two PLP sections' own scheme wrappers; every other template was still white.
      Two declarations, because the white came from two places, measured on every template type
      (home, product, /collections, /collections/all, page, blog, search, cart, 404, account):
        · `<body>` — home and the 404 paint nothing else, so the body IS the page there;
        · `.color-scheme--scheme-1` section sheets — scheme-1's background is #ffffff and it is the
          store's default scheme, so on product / cart / search / page / blog / /collections a
          1440-wide white div covers the cream from the header down.
      scheme-1 itself is NOT re-pointed: it is the default scheme store-wide and `--background`
      doubles as "the colour of things drawn ON the page" (cart-count digit, badge text), so
      changing the token repaints those too. The selector is deliberately narrow — a scheme-1
      wrapper that is a SECTION's own sheet, i.e. a direct child of `.shopify-section` or a
      `.section-spacing` box inside one (which is how `<product-recommendations>` nests its sheet).
      `.drawer` is excluded so the CART DRAWER stays white: it is a panel over the page, not the
      page, and the owner asked about the site's background.
   2. Spacing above "See More" on the Collections page (deck: "Add spacing above see more, remove
      underline"). The underline half is NOT here — it is deleted in the collections hover block
      above, because the 08-23 round reported it removed and it was not: on the render today it read
      `content: ""`, a 1px black bar scaling in over 0.35s on card hover. Both halves of that deck
      line are now actually done. The spacing is a ⚠ JUDGEMENT CALL with no Figma number behind it:
      the file draws name -> See More at **0** (the 26px line box ends exactly where the 18.2px one
      starts) and that zero is the thing the owner is rejecting, so there is nothing to conform to.
      8px, measured 506 -> 514 on the render. Desktop only — mobile keeps its own gap, as with the
      occasions caption in round 12, because the owner did not raise it.
   3. The product-card wishlist heart is smaller on mobile (deck: "Make heart smaller in mobile
      site"). It was set to 24px on 08-22 off the NAV BAR's 24x24 icon instances, answering "hearts
      favourites are too small in product photos" — a desktop judgement that rode along to 390,
      where the card is 171 wide against 303 on the desktop grid. ⚠ 20px is a JUDGEMENT CALL, not a
      proportion: matching desktop's 7.9% of the card width would give ~14px, which is under the
      24px tap-target floor and would make the only wishlist control on a phone hard to hit. 20px is
      visibly smaller than 24 and still tappable. No Figma value exists for this heart. Contrary to
      the 08-22 note, the Wishlist King button IS rendered on a `shopify theme dev` theme, so it can
      be measured before a push; both numbers here are confirmed on REDESIGN-WIP as well
      (390: glyph 20x20 on a 171 card · 1440: 24x24 on a 303 card).
   ========================================================================================================== */

/* ⚠ `body { background-color }` alone LOSES. `<body>` carries `color-scheme color-scheme--scheme-1`
   and the theme's `.color-scheme { background-color: rgb(var(--background)) }` is one class (0,1,0)
   against an element selector's (0,0,1), so it wins wherever it is in the file. The 08-23 PLP rule
   only worked because `body:has(.shopify-section--main-collection)` is (0,1,1). `body.color-scheme`
   is (0,1,1) too and is later, so it wins without re-pointing `--background`. */
body.color-scheme {
  background-color: #f4f2ed;
}

.shopify-section > .color-scheme--scheme-1:not(.drawer),
.shopify-section .section-spacing.color-scheme--scheme-1:not(.drawer) {
  background-color: #f4f2ed;
}

@media screen and (min-width: 700px) {
  .collection-card--outside .collection-card__caption {
    gap: 8px;
  }
}

@media screen and (max-width: 699px) {
  .product-card__figure wishlist-button-collection wk-button.wk-floating {
    --apd-heart-size: 20px;
  }
}

/* ==========================================================================================================
   APD 2026-08-25 — COLLECTIONS PAGE HEADER (deck slide 8: "Collections - add header").

   ⚠ Deliberate deviation from the design file: `Collections` (507:4111) draws NO title band — the
   page opens straight into the first 661x366 tile, which is why the 08-23 pass set
   `show_title: false` in `templates/list-collections.json`. The owner has now asked for a header,
   so the markup is switched back on in `sections/main-list-collections.liquid` and styled HERE to
   the band the owner already approved on the PLP, rather than to the theme's own `.h2`.

   Numbers copied off the live PLP banner (`shopify-section--collection-banner`, measured, both
   widths) so the two page headers are the same object:
     1440   h1 32px / 900 / 64px line box / uppercase / ls 0.01em / centred, band 79 tall
            (8 above the line box, 7 below) -> the grid starts 79px under the 64px nav row
      390   h1 16px / 900 / 32px / uppercase / centred, band 50 tall (9 above, 9 below)
   The theme's `.h2` is a different size and weight and `.section-stack` adds its own row gap, so
   both are overridden here; `--section-stack-gap` is zeroed for this section only, because the band
   itself carries the space and two sources of gap cannot be reasoned about later.
   ========================================================================================================== */

.shopify-section--main-list-collections .section-stack {
  --section-stack-gap: 0px;
  row-gap: 0;
}

.shopify-section--main-list-collections .collection-list-header {
  width: 100%;
  padding-block: 9px;
  margin-block: 0;
}

.shopify-section--main-list-collections .collection-list-header :is(h1, .h2) {
  font-size: 1rem;          /* 16px, per the 390 PLP banner */
  font-weight: 900;
  /* `!important` because `.h2` sets its own line-height !important — same trap as the collection
     card's name rule above. Without it the box is 20.8px and the band comes out 38.8 not 50. */
  line-height: 2rem !important;   /* 32px */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  margin-block: 0;
}

@media screen and (min-width: 700px) {
  .shopify-section--main-list-collections .collection-list-header {
    padding-block: 8px 7px;
  }

  .shopify-section--main-list-collections .collection-list-header :is(h1, .h2) {
    font-size: 2rem;                /* 32px, per the 1440 PLP banner */
    line-height: 4rem !important;   /* 64px */
  }
}

/* ==========================================================================
   APD 2026-08-26 (round 34) — SELECTED COLOUR = AN OUTER RING, EVERYWHERE.
   Owner: "plp. make outer circle instead of underline", then, against the product page and the
   cards under it: "still showing underline in product page and below".

   Round 33 fixed only the PLP filter panel, which was too narrow: `.color-swatch` is rendered by
   `snippets/option-value.liquid` for FIVE surfaces — the PDP variant picker, the product card,
   the facet panel, `set-component-picker` and `variant-picker-bundle` — and the base theme's
   underline (`:checked + .color-swatch::after`, line ~3232) applied to all of them. Only two had
   an override: the PLP card (a ::after ring, scoped to `.shopify-section--main-collection
   .product-card__info`, so the same card on a PDP or the home page still drew the underline) and
   the facet panel. Hence one unscoped rule instead of a third patch.

   Why `outline` rather than a ::after ring — all three measured on the render:
     * ::after is ALSO the hover tooltip on facet swatches (option-value with show_tooltip: true),
       and the tooltip holds `opacity: 0; visibility: hidden` until hover, so a ring built there is
       perfectly formed and paints NOTHING. getComputedStyle reports it as correct. Only a
       screenshot catches this.
     * `.color-swatch` is `display: grid` with `place-items: center`, which shrink-wraps an
       absolutely-positioned child into an oval.
     * ::after positions against the PADDING box, so a swatch's own hairline border shifts the
       arithmetic differently per surface (16px facet vs 24px card).
   `outline` is painted outside the border box by definition, follows `border-radius`, never
   affects layout, and `outline-offset` shows whatever is behind through the gap, so no background
   colour has to be matched on any of the five surfaces.

   Geometry is the card's, expressed as a ratio rather than fixed pixels, so every size matches:
   2px stroke + 2px gap. A 24px card swatch -> a 32px ring (what the card drew before, unchanged);
   a 16px facet swatch -> 24px.

   NOTE this makes the ::after ring block further up (`.shopify-section--main-collection
   .product-card__info ... ::after`, ~line 11494) inert — the pseudo is `display: none` now. It is
   left in place only because its comment records the Figma numbers it was derived from.
   Sizes are deliberately untouched: they are `.block-swatch` text, and keep their underline.
   ========================================================================== */
:checked + .color-swatch,
.color-swatch.is-selected {
  outline: 2px solid #000;
  outline-offset: 2px;
}

:checked + .color-swatch::after,
.color-swatch.is-selected::after {
  display: none;
}

/* ==========================================================================================================
   APD 2026-08-26 — OWNER ROUND 35. Twelve items from the owner's phone screenshots. This block holds
   the ones that are CSS; the collection membership and the collection cover images are data jobs and
   are not here. Every number below was measured on the pushed REDESIGN-WIP render at 390 and 1440.
   ========================================================================================================== */

/* ---------- R35-3. Product card name: ONE LINE, three dots when it does not fit ----------
   Owner: "prod name always one line never wrap. if don't fit make three dots".
   The name was `white-space: normal` with no clamp, so long names ran to two or three lines and,
   because this card's line-height is 0.82 (11.48px for 14px text, Figma's leading), the lines almost
   touched. `nowrap` plus `text-overflow: ellipsis` needs `overflow: hidden`, which would also clip
   the descenders out of that short line box. The padding/negative-margin pair gives the overflow box
   4px of head and foot room for the glyphs while cancelling its effect on layout, so the card's
   vertical rhythm (image to name 11.23, name to price 9.84) is unchanged.
   The anchor is a flex item, so it also needs `min-width: 0` or it refuses to shrink below its text. */
/* The container must be told to fill the card. It sits in a `v-stack justify-items-start`, i.e. a
   grid whose items shrink to their content, so without this the row simply grew as wide as the name
   and `text-overflow` had nothing to overflow: measured after the first push, scrollWidth ==
   clientWidth on every card and no name ever showed the three dots. */
.product-card .title-wish-container {
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.product-card .product-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-block: 4px;
  margin-block: -4px;
}

/* ---------- R35-4 + R35-6. The colour circle now fills its box and sits concentric with the ring ----------
   Owner: "color circle is cropped in the bottom" and "for some colors outer circle is not centered".
   Reproduced at device pixel ratio 3 (a phone) on the card the owner photographed: the coloured
   circle sat up and to the right inside the ring with its lower right visibly flattened.
   Cause: `.color-swatch` paints its image with `background-origin: content-box` AND
   `background-clip: content-box`, so the circle is rasterised against the content box and then
   rounded by `border-radius`, while the ring is an `outline` painted against the border box. At a
   fractional x (19.188px here, from a 3.2px inline margin on a 16px gutter) the two boxes snap to
   different device pixels and the circle lands off centre. Painting and clipping against the border
   box, with `overflow: hidden` doing the rounding, puts both on the same box; a 3px inline margin
   lands the swatch on a whole pixel. Verified side by side against four other candidates.
   SCOPED TO THE CARD ON PURPOSE: the facet panel renders its tooltip in `::after` OUTSIDE the
   swatch, so `overflow: hidden` there would hide it. */
.product-card__info .color-swatch {
  background-clip: border-box;
  background-origin: border-box;
  overflow: hidden;
}

/* The whole-pixel snap needs its own weight: both `assets/section-newin.css` (scoped to the New In
   carousel) and the round-23 card rule (`.shopify-section--main-collection .product-card__info`)
   already set `margin: 2px 0.2rem`, and a two-class selector loses to either. 0.2rem is 3.2px, which
   lands the first swatch of every row on x.188 and is what makes the circle and the ring snap to
   different device pixels. */
.product-card__info .color-swatch {
  margin-inline: 3px !important;
}

/* ---------- R35-5. The selected-colour ring is slightly thinner ----------
   Owner: "outer line slightly thinner". 2px, set in round 34, becomes 1px. 1.5px was tried first and
   Chrome COMPUTES OUTLINE-WIDTH TO A WHOLE NUMBER OF CSS PIXELS — `outline-width: 1.5px` reported
   back as `1px` on the render — so 1 and 2 are the only values available here. The 2px offset stays,
   so the white gap the owner asked for on 08-23 is untouched and the ring's outer diameter goes
   32 -> 30 on a 24px card swatch. Unscoped, like the round-34 rule it edits, so every surface
   (PDP picker, card, facet panel) keeps reading as one system. */
:checked + .color-swatch,
.color-swatch.is-selected {
  outline-width: 1px;
}

/* ---------- R35-8. Collections page: names and See More at 14 / 400, smaller arrow ----------
   Owner: "collectiom page, coll names make 14 px weight 400, see more as well. make arrow smaller".
   Measured before: desktop name already 14/400, desktop See More 14/500, desktop arrow 17.3 x 8.69;
   mobile name 20/500, mobile See More 14/500, mobile arrow 32 x 16. */
.collection-card--outside .collection-card__caption :is(p, .h5),
.collection-card--outside .collection-card__see-more,
.collection-card--outside .collection-card__see-more-label {
  font-size: 14px;
  font-weight: 400;
}

.collection-card--outside .collection-card__see-more svg {
  width: 12px;
  height: 6px;
  flex: none;
}

@media screen and (max-width: 699px) {
  .collection-card--outside .collection-card__caption :is(p, .h5) {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3 !important;
  }

  .collection-card--outside .collection-card__see-more {
    font-size: 14px;
    font-weight: 400;
  }

  .collection-card--outside .collection-card__see-more svg {
    width: 20px;
    height: 10px;
    flex: none;
  }
}

/* ---------- R35-10 + R35-11. Sort By and the current sort share ONE line ----------
   Owner: "sort should be a line not drop-down" and "sort by (current sort should not be below too
   close. may be one line?)". Measured before: "Sort by" at y=209 and "Best Seller" at y=224 with a
   0.00px gap between the two 15px line boxes, which is what read as too close. The two spans were a
   column because Figma's `Sort By / Text+Down` variant 3 draws them stacked; the owner overrules the
   file. Now a row, with the chevron centred against it. Markup is untouched, so the popover and the
   form still work exactly as before. */
.collection-toolbar__sort {
  align-items: center;
}

.collection-toolbar__sort-lines {
  flex-direction: row;
  align-items: baseline;
  gap: 0.375rem; /* 6px between "Sort by" and the current value */
  text-align: end;
  white-space: nowrap;
}

/* ---------- R35-12. Legal page reads like the rest of the site ----------
   Owner: "legal page make same styling as home page". The page is Shopify's own policy page
   (`/policies/privacy-policy`), not a theme template, so it arrives inside `.shopify-policy__container`
   with the platform's defaults: a 16px / 400 heading and a 20px gutter. The store's own page background
   (cream) was already inherited. Heading now matches the band the PLP and Collections pages use —
   uppercase, 32 / 900 desktop and 16 / 900 mobile — and the gutters match the site container. */
.shopify-policy__container {
  max-width: 1332px;
  margin-inline: auto;
  padding-inline: 54px;
  padding-block: 4rem 6rem;
}

/* `!important` because the heading measured 20px / 400 after the first push: the platform wraps the
   h1 in `<div class="shopify-policy__title h2">` and the theme's own `.h2` sizing reaches the h1 with
   more weight than a two-part descendant selector. */
.shopify-policy__title,
.shopify-policy__title h1,
.shopify-policy__title > * {
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  margin-block-end: 2.5rem;
}

.shopify-policy__body {
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
}

.shopify-policy__body :is(h2, h3, h4) {
  font-size: 14px;
  font-weight: 900;
  line-height: 28px;
  text-transform: uppercase;
  margin-block-start: 2rem;
}

@media screen and (max-width: 699px) {
  .shopify-policy__container {
    padding-inline: 16px;
    padding-block: 2rem 4rem;
  }

  .shopify-policy__title,
  .shopify-policy__title h1,
  .shopify-policy__title > * {
    font-size: 16px !important;
    margin-block-end: 1.5rem;
  }
}

/* ==========================================================================================================
   APD 2026-08-26 — OWNER ROUND 36. Four follow-ups on the same day.
   ========================================================================================================== */

/* ---------- R36-A. The ring is a BOX-SHADOW now, because an outline breaks at the bottom ----------
   Owner: "color circles still crossed with white in the bottom. check products under hero".
   Reproduced at device pixel ratio 2 AND 3 on the home page: the black ring had a thin WHITE BREAK at
   6 o'clock. Chrome paints a rounded `outline` as four corner arcs whose seams meet at the middle of
   each edge; on a circle at a fractional y (615.28px here) the bottom seam does not close. It is not
   a thickness problem - a 2px outline showed the same notch, measured.
   `box-shadow` with spread paints ONE continuous ring on a `border-radius` element, so there is no
   seam to open. Two shadows: the first fills the 2px gap with the page cream, the second draws the
   1px ring outside it. Same geometry as the outline it replaces (24px swatch -> 30px ring).
   ⚠ The gap shadow has to be an opaque colour, so this is scoped to `.product-card__info`, where the
   surface behind a card is always the cream page background. Everything else keeps the outline.

   `background-size: 108%` in the same block: the colour PNGs carry a transparent margin (measured on
   `Sunset_pink_-_pineapple.png`: 591x591 with the ink inside 19..572, i.e. 3.2% of dead edge on each
   side), which showed as a pale halo between the colour and the ring. 108% pushes it outside the box.
   The prints are repeating patterns, so cropping 4% off each edge changes nothing that reads. */
.product-card__info .color-swatch {
  background-size: 108% 108%;
  /* R37 — A HAIRLINE, so a pale colour still reads as a circle.
     Owner, second report: "circles are still cropped at bottom. see under hero". Measured at device
     pixel ratios 1, 2 and 3 on that exact card: the circle is geometrically COMPLETE - 24 x 24,
     border-radius 9999px, background 108% and centred. What is missing is its EDGE. `Choco Banana`
     and `Ivory` are photographs whose pale half is within a few percent of the page cream (#f4f2ed),
     so that side of the circle has nothing to end against and the eye reads a straight cut.
     A 1px inset hairline gives every swatch an edge whatever the artwork does. Tested at 12% (too
     faint to fix it), the theme's own #cfcec9 (reads as a grey band), and 70% (a dark grey band).
     APD round 39: 20% -> **40%**. On the owner's third report the geometry was re-verified at device
     pixel ratios 1, 2 and 4 and is correct at all three - 24px box, full circle, artwork centred and
     filling it - so what is left is contrast: the 2px cream gap between a PALE artwork edge and the
     black ring merges with the artwork, and only a firmer edge separates them. 40% does; 20% did not
     at the size the owner is looking at. Comparison: output/round35/edge_cmp.png */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 40%);
}

/* Same hairline, carried through, because `box-shadow` is one property and the second declaration
   would otherwise drop the inset ring off the selected swatch. */
.product-card__info :checked + .color-swatch,
.product-card__info .color-swatch.is-selected {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 40%),
    0 0 0 2px #f4f2ed,
    0 0 0 3px #000;
}

/* ---------- R36-C. Sort options in a ROW, in the filter bar, not a drop-down ----------
   Owner: "sort options in a row not drop-down. check figma."
   Markup and the Figma reading are in `snippets/facets.liquid`; this is only its dress.
   The old toolbar trigger and its `<facets-sort-popover>` are hidden from 700px up — the mobile
   sheet still owns the sort below that, per the 2026-08-14 rule further up this file. */
@media screen and (min-width: 700px) {
  .collection-toolbar__button-container:has(.collection-toolbar__sort) {
    display: none;
  }
}

/* The sort sits at the RIGHT end of the filter bar — Figma `Product List+Filters` puts FILTERS at
   x=54 and the Sort By text at x=1305, and that is also where the old toolbar trigger was.
   `margin-inline-start: auto` alone did nothing: measured after the first push, the bar was only
   **889px wide**, exactly its own content, because `facets-clear-group` is an unstyled custom
   element and therefore `display: inline`, which makes the whole chain shrink to fit. An auto margin
   has no free space to take in a shrink-to-fit flex container. Giving the two wrappers the wrap's
   full width is what lets it push. */
.facets-topbar-wrap > facets-clear-group,
.facets-topbar-wrap .facets--topbar {
  display: block;
  width: 100%;
}

.facets-topbar__item--sort {
  margin-inline-start: auto;
}

/* The small accent dot marks a filter that HAS a value picked. The sort always has one, so on this
   item the dot carries no information — it just sat there permanently. */
.facets-topbar__item--sort:has(input:checked) > .facets-topbar__trigger::after {
  content: none;
}

/* Trigger: "Sort by" and the current value on one line — round 35's fix, kept. */
.facets-topbar__trigger--sort {
  gap: 0.375rem;
  white-space: nowrap;
}

.facets-topbar__trigger--sort .facets-topbar__sort-label,
.facets-topbar__trigger--sort .facets-topbar__sort-current {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* Figma lays the five options ACROSS the panel at x = 46 / 241 / 420 / 677 / 955. Those gaps are
   uneven (105 / 110 / 122 / 143) because each was placed by hand against its own label width, so a
   single 110px column gap is the honest reading of it. The panel gutter stays the bar's own 54px
   rather than Figma's 46, so the options line up with every filter panel above them. */
.facets-topbar__panel-body--sort {
  column-gap: 6.875rem;
  row-gap: 0.75rem;
  align-items: center;
}

.facets-topbar__panel-body--sort label {
  column-gap: 0.3125rem; /* Figma: circle at x, label at x+21, circle is 16 -> 5px between them */
  white-space: nowrap;
}

/* ---------- R40. The carousel was CLIPPING the bottom of the selected-colour ring ----------
   Owner: "do you notice that the outer circle is cut in the bottom?" — yes, and this is the cause.
   It is not contrast and not rasterisation, both of which the previous two rounds chased.

   `.product-list--carousel` is also `.scroll-area`, which needs `overflow-x: auto` to scroll
   horizontally — and CSS will not let one axis be `visible` while the other is `auto`, so the
   vertical axis is forced to `hidden`. The swatch row is the last thing in a card, so the swatch's
   bottom edge sat **2.00px** above that hidden edge (measured), while the ring extends **3px**
   below it (2px gap + 1px stroke). The bottom ~1px of the ring was simply cut off. That is why it
   read as thin or faded at 6 o'clock at every thickness: 1px, 1.25, 1.5 and 2px were all rendered
   and all showed it (output/round35/r40_cmp.png).

   Six pixels of bottom padding inside the scroll area takes the room from 2 to 8, so a 3px ring
   clears it with margin to spare. It is padding INSIDE the scroller, so it grows the row by 6px and
   changes nothing about the cards themselves or the horizontal scrolling.
   Round 35 measured 13.47px of room here and concluded there was no clip — that reading came from a
   different card set, before the collection sync changed which products the row holds. Measure the
   card that is actually complained about. */
.product-list--carousel.scroll-area {
  padding-block-end: 6px;
}

/* ==================================================================================================
   APD 2026-09-04 — OWNER / DESIGNER / KANA BUGHERD REVIEW (export output/bugherd_20260904/539435.csv).
   Home items that live in theme.css: #3 hero progress line, #4 product-card heart, #15 badge size.
   The rest of the review is in the section files (see docs/ACTIVE_WORK.md, round 59).
   ================================================================================================== */

/* #3 — "add a bar instead of dots and make animation fill in line in parts depending on how many
   photos in slide" (reference attachment: a thin white line under the caption with the current
   part filling). The dots' <carousel-navigation class="page-dots"> keeps its buttons — one per
   slide, aria-current on the one showing — and is simply drawn as ONE line split into as many parts
   as there are slides. Parts already shown stay filled (`:has(~ [aria-current="true"])` = "a later
   sibling is the current one"), the current part fills over the slide's display time using the
   same `--slideshow-progress-duration` / `--slideshow-progress-play-state` the old ring used
   (SlideshowCarousel sets them from `cycle_speed` and pauses them on hover), parts still to come
   are the faint track. Clicking a part still jumps to that slide (.tap-area keeps the hit area).
   Applies to every slideshow-class section, i.e. the collection hero too — one component, one look.
   Replaces the dot geometry from the 08-22 / 08-25 rounds above at both breakpoints. */
.shopify-section--slideshow .slideshow .page-dots {
  --apd-bar-w: 250px; /* 2026-09-06 owner-tuned (APD Hero Line Tuner), was 240 */
  --apd-bar-h: 2px;
  width: var(--apd-bar-w);
  max-width: calc(100% - 2 * var(--container-gutter, 16px));
  height: var(--apd-bar-h);
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  column-gap: 0;
  inset-block-end: 30px;
}

.shopify-section--slideshow .slideshow .page-dots > * {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: var(--apd-bar-h);
  border-radius: 0;
  display: block;
  position: relative;
  /* 2026-09-04 owner, Chrome on iPhone: "line is under main line" — the fill painted a few px BELOW the
     track. The <button> keeps the browser's default border/padding/line box, so its painted track and the
     pseudo-element's `top: 0` did not share an edge. Zeroed here, and `overflow: hidden` guarantees the
     fill can only ever paint inside the 2px track box. */
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  background: rgb(255 255 255 / 0.35);
  background: color-mix(in srgb, currentColor 35%, transparent);
}

.shopify-section--slideshow .slideshow .page-dots > *:after {
  content: "";
  display: block;
  position: absolute;
  /* 2026-09-04 owner, phone: "first part waits then fills instantly". Measured in WebKit: with `inset: 0`
     the fill computed 0px TALL inside the <button>, so the growing part was invisible and only the
     "already shown = full" rule ever painted. Explicit height + top/left instead of inset. */
  top: 0;
  left: 0;
  width: 100%;
  height: var(--apd-bar-h);
  border-radius: 0;
  background: currentColor;
  opacity: 1;
  transition: none;
  transform: scaleX(0);
  transform-origin: left center;
}

/* 2026-09-04 round 63, owner (Chrome on iPhone): "still filling instantly part by part" — REPRODUCED by
   sampling painted PIXELS, not computed style: the current part painted nothing until the slide changed,
   then jumped to full. Cause: the 08-25 dot-geometry rules still in their media blocks above
   (`.page-dots--autoplay > *[aria-current="true"]:after { inset: 2.7px }` phone / `inset: 2px` desktop)
   carry an attribute selector, so they OUT-SPECIFY the `top: 0; left: 0` above for the CURRENT part only.
   Its fill therefore sat 2-2.7px below the 2px track — first seen as "line is under main line" — and
   once round 61 added `overflow: hidden` to the button it was clipped away entirely. Computed transform
   still animated 0 -> 1, which is why every earlier check passed. Same-specificity selectors, later in
   the file, pin the fill to the track's own top-left at every width. */
.shopify-section--slideshow .slideshow .page-dots > *:after,
.shopify-section--slideshow .slideshow .page-dots > *[aria-current="true"]:after,
.shopify-section--slideshow .slideshow .page-dots--autoplay > *[aria-current="true"]:after {
  inset: 0 auto auto 0;
  width: 100%;
  height: var(--apd-bar-h);
  opacity: 1;
}

/* parts for slides already shown: full */
.shopify-section--slideshow .slideshow .page-dots > *:has(~ [aria-current="true"]):after {
  transform: scaleX(1);
}

/* the current part fills over the slide's display time */
.shopify-section--slideshow .slideshow .page-dots--autoplay > *[aria-current="true"]:after {
  /* 2026-09-04 BugHerd #26 ("now whole part is bright when pic switched"): the theme sets
     `--slideshow-progress-duration` to 0s on every `player:stop` — at each slide change and whenever
     the pointer rests on the photo — which snapped the part to full. The bar now reads its own
     `--apd-bar-dur` (= cycle_speed, written on the nav by slideshow.liquid / collection-hero.liquid)
     and only borrows the theme's play-state, so a hover pauses the fill instead of completing it. */
  /* 2026-09-06 owner-tuned (APD Hero Line Tuner): soft start and end, and `--apd-bar-dur` is now
     cycle_speed − 1.5s so every part fills, then HOLDS full for 1.5s until the photo changes. */
  animation: apdHeroBarFill var(--apd-bar-dur, 4.5s) ease-in-out var(--slideshow-progress-play-state, running) both;
}

/* no autoplay: the current part is simply full */
.shopify-section--slideshow .slideshow .page-dots:not(.page-dots--autoplay) > *[aria-current="true"]:after {
  transform: scaleX(1);
}

.shopify-section--slideshow .slideshow .page-dots .circular-progress {
  display: none;
}

@keyframes apdHeroBarFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media screen and (max-width: 699px) {
  .shopify-section--slideshow .slideshow .page-dots {
    --apd-bar-w: 160px;
    inset-block-end: 10px;
  }
}

/* #4 — product-card heart: "use same shape as in top right corner of website / move closer towards
   corner of photo", then #21 "too thick outline". The card heart is injected by Wishlist King
   (<wishlist-button-collection> > <wk-button> > <wk-icon icon="wishlist"> with the app's own filled
   heart). First build (09-04 a.m.) painted the header's `picto-love` path through a CSS mask on
   <wk-icon>; a mask is rasterised, so on the owner's 1920 screen the 1.5 stroke came out heavier than
   the header's crisp SVG — that is #21. Now snippets/product-card.liquid renders the SAME `picto-love`
   SVG (`.apd-card-heart`) into the figure, so the two hearts are literally the same drawing at the
   same 1.5 stroke; the app's own icon is made invisible but its button stays on top and clickable, and
   the saved state (any icon other than "wishlist") fills our path. Our heart only shows once the app
   has loaded (`[wk-loaded]`), so a card never shows a heart that does nothing.
   Position: the 48px app box sat 8px in, putting the 24px glyph 20px from the photo's corner; the box
   is now 44px flush with the corner and the glyph sits 10px in (12px on the phone, 20px glyph). */
.product-card__figure wishlist-button-collection wk-button.wk-floating {
  top: 0 !important;
  right: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.product-card__figure wishlist-button-collection wk-button.wk-floating .wk-button {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__figure wishlist-button-collection wk-icon.wk-icon {
  opacity: 0;
}

/* The size var used to live on the app's <wk-button> only, so `.apd-card-heart` could not see it and its
   calc() top/right fell to auto = top-left (measured). Declared on the figure, which both inherit from. */
.product-card__figure {
  --apd-heart-size: 24px;
}

@media screen and (max-width: 699px) {
  .product-card__figure {
    --apd-heart-size: 20px;
  }
}

.product-card .product-card__figure > .apd-card-heart {
  /* APD 2026-09-25 — our own button now (assets/apd-wishlist.js), replacing the Swish app.
     The whole 44px corner box is the tap target; the glyph sits centred in it, which keeps the
     round-59 position (10px from the corner on desktop, 12px on the phone). */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  /* !important: a theme rule pins every positioned child of the figure to inset 0 (top-left),
     measured live before this — the heart rendered over the badge at the top-LEFT. */
  inset: auto !important;
  top: 0 !important;
  right: 0 !important;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: rgb(var(--text-color));
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.product-card__figure .apd-card-heart svg {
  display: block;
  width: var(--apd-heart-size);
  height: var(--apd-heart-size);
}

.product-card__figure .apd-card-heart[aria-pressed="true"] svg path {
  fill: currentColor;
}

.product-card__figure .apd-card-heart:focus-visible {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: -4px;
}

/* #15 — "for mobile use 12px as minimal font except very top header": the -50% sale badge was 10px. */
@media screen and (max-width: 699px) {
  .badge {
    font-size: 0.75rem;
  }
}

/* #23 / #24 — Shop All page headers read "PARENT > CHILD" and sit on the left edge of the product
   grid instead of centred in the 680px band (sections/collection-banner.liquid decides which pages).
   `.container--xs` centres via `--container-max-width`; forcing it to 100% makes the max() fall back
   to the gutter, i.e. the same x as the grid (54 desktop / 16 phone). Type is unchanged: 32/900
   desktop, 16/900 phone, uppercase. */
.shopify-section--collection-banner .container:has(.collection-banner__title--nav) {
  --container-max-width: 100%;
}

.shopify-section--collection-banner .prose:has(> .collection-banner__title--nav) {
  text-align: start;
}

.shopify-section--collection-banner .collection-banner__title-sep {
  font-weight: 400;
  margin-inline: 0.15em;
}

/* ---------- PAGE TITLE, owner-tuned 2026-09-06 (APD Page Title Tuner, settings/plp-title) ----------
   Desktop 22px / regular (400) / line-height 1.25, 26px above and 10px below the letters' box
   (sections/collection-banner.liquid sets the desktop padding, ID-scoped). Phone 16px / regular /
   1.25, 15px above and 10px below. Was 32/900 on a 2.0 line-height (8/7) and 16/900 on 2.0 (9/9).
   Letter-spacing, uppercase, left alignment and the thin ">" are unchanged. `!important` on
   line-height and the phone padding-block-end for the same reasons as the earlier rules. */
.shopify-section--collection-banner .prose :is(h1, .h1) {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25 !important;
}

@media screen and (max-width: 699px) {
  .shopify-section--collection-banner .prose :is(h1, .h1) {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25 !important;
  }

  .shopify-section--collection-banner .section-spacing {
    padding-block-start: 15px;
    padding-block-end: 10px !important;
  }
}