/** Shopify CDN: Minification failed

Line 266:20 Unexpected "{"
Line 266:29 Expected ":"
Line 273:20 Unexpected "{"
Line 273:29 Expected ":"
Line 274:20 Unexpected "{"
Line 274:29 Expected ":"

**/
:root {
       --heading-font-family: bahnschrift-semicondensed, sans-serif!important;
       --text-font-family: acumin-pro, sans-serif!important;
}


.h6 {
    font-family: var(--text-font-family);
    letter-spacing: -0.04em!important;
    font-weight: 500!important;
}

#main > .shopify-section.shopify-section--main-product:first-child > .section-spacing {
  padding-block-start: 0;
}

.h2 {
  text-transform: uppercase;
  font-weight: 600;
}

.h3 {
  text-transform: uppercase;
  font-weight: 600!important;
  line-height: 1.2;
}


.h4, .h5 {
  font-family: 'acumin-pro';
  font-weight: 500;
  letter-spacing: -0.02em;
}


:checked+.block-swatch {
    background-color: white;
    font-weight: 500;
    z-index: 10;
}

.block-swatch {
    font-weight: 300;
    --swatch-padding: 1.5rem 1.75rem;
    line-height: 1 ;
}

.feature-badge {
    text-transform: uppercase;
    font-weight: 500;
    padding: 0;
}

.feature-badge p {
  margin-block-start: 0!important;
}

.feature-badge-list {
    justify-content: space-between;
}

.title-with-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3em;
  width: 100%;
}

.title-with-price .product-info__block-item[data-block-type="title"] {
  flex: 1;
  min-width: 0;
}

.title-with-price .product-info__block-item[data-block-type="price"] {
  flex-shrink: 0;
  text-align: right;
}

.review-text {
  margin-left: 3px;
  letter-spacing: -0.01em;
}

.product-tabs {
  width: 100%;
  margin-top: calc(var(--product-info-gap) * 2);
}

.product-tabs__nav {
  display: flex;
  align-items: flex-end;
  gap: 2em;
  width: 100%;
  border-bottom: 0.5px solid rgb(var(--text-color) / 0.12);
  font-size: var(--text-h6);
}

.product-tabs__button {
  position: relative;
  flex-shrink: 0;
  padding: 0 0 12px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.product-tabs__button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.product-tabs__button.is-active {
  font-weight: 500;
}

.product-tabs__button.is-active::after {
  transform: scaleX(1);
}

.product-tabs__content {
  padding-top: 16px;
}

.product-tabs__panel[hidden] {
  display: none;
}


@media screen and (max-width: 699px) {
  .product-tabs__nav {
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .product-tabs__nav::-webkit-scrollbar {
    display: none;
  }
  p.h6.newsletter-title { 
    font-size: calc(var(--text-h2) - 2px )!important;
  }
  .multi-column__content  {
  width: 90%!important;
}

}

.product-info__block-group.feature-badge-list {
    margin-block-start: 0.75em !important;
}

.multi-column {
  column-gap: .1em;
}

.multi-column__content  {
  width: 65%;
  margin-block-start: .5em;
  margin-inline: auto;
}

.shopify-section--image-with-text .image-with-text__split-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
}

.image-with-text__split-content p {
  text-align: justify;
  letter-spacing: -0.04em;
}

.image-with-text__split-content .h1 {
  font-family: var(--text-font-family);
}
 

.shopify-section--image-with-text .image-with-text__text-group {
  width: 100%;
}

.shopify-section--image-with-text .image-with-text__features {
  width: 100%;
}

.button--outline {
  padding: .25rem 0;
  font-family: var(--text-font-family);
  text-transform: capitalize!important;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.content-over-media > :not(img, video, iframe, svg, video-media, picture, image-parallax, figure) {
  text-align: center;
}

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

@media screen and (min-width: 1000px) { 
  .prose:not(.prose--tight) :is(.button, .button-group:has(.button)) {
    margin-block-start: 0.5rem;
}}

.video-content-overlay.bottom_center {
  padding-bottom: 2em;
}

a.product-title {
  font-family: var(--heading-font-family);
  text-transform: uppercase;
  font-weight: 600;
}

.shopify-section--featured-collections .section-spacing {
  padding-block-start: 0.1em;
  padding-block-end: 2em;
}

.footer {
  border-bottom: 1px solid rgb(var(--border-color));
  margin-bottom: 1em;
}

.footer__block.footer__block--links .h6 {
  font-weight: 300!important;
  letter-spacing: -.01em !important;
}

p.heading.text-subdued.text-xxs {
  font-family: var(--text-font-family)!important;
}


.footer__group.footer-grid-item--divider {
  gap: 3em!important;
}
@media screen and (min-width: 700px) {
  #shopify-section-{{ section.id }} .footer__block--links {
    text-align: center;
  }
  p.h6.newsletter-title { 
    font-size: calc(var(--text-h2) - 7px )!important;
  }

  #shopify-section-{{ section.id }} .footer__block--links .v-stack,
  #shopify-section-{{ section.id }} .footer__block--links ul {
    align-items: center;
  }
  variant-picker.variant-picker.v-stack.gap-4 {
    padding-top: 3em;
}
}

.footer-newsletter__form {
    width: 90%!important;
    margin: auto;
}

.sold-out {
  opacity: .5!important;
}

buy-buttons.buy-buttons button.button.button--outline.w-full {
  background-color: #F5F5F5;
  padding: .65rem 1.75rem;
  opacity: 0.7;
}


.buy-buttons button[type="submit"].button.w-full {
  transition: opacity 0.3s ease;
}

.buy-buttons button[type="submit"].button.w-full:hover {
  opacity: 0.8;
}

.footer-newsletter__submit {
  transition: opacity 0.3s ease;
}

.footer-newsletter__submit:hover {
  opacity: 0.7;
}

.sizing-details {
  font-weight: 300!important;
  opacity: .7!important;
  letter-spacing: -0.01em!important;
}

button.link.variant-picker__size-guide.variant-picker__size-guide--desktop.sizing-details {
  text-decoration-thickness: 0.5px!important;
}  


.product-info__block-item .prose {
  line-height: 1.55;
  text-align: justify;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.section-stack.related {
  gap: 2em;
}

h2.account__heading {
  text-transform: uppercase!important;
  letter-spacing: 0.02em!important;
  font-weight: 600!important;
}

p.h3.multi-col-heading {
  font-size: calc(var(--text-h3) - 4px )!important;
}


.button {
  transition: all ease 1s;
}

.button:hover {
  opacity: .7;
}
button.collection-toolbar__button.heading.text-xxs.w-full {
    font-family: 'acumin-pro';
    letter-spacing: -0.03em;
}

.collection:only-child {
  margin-block-start: 0!important;
}    

@media screen and (min-width: 1000px) {
  .product-info {
    padding: 0 3em 0 2em;
  }
}

.accordion {
  border-block-width: 0px!important;
}

.accordion-group .accordion__toggle:first-of-type {
  padding-block: 0;
}

.product-info__block-group.feature-badge-list {
    margin-block-end: calc(var(--product-info-gap) + 10px);
}


.product-info__block-item .prose {
  margin-top: .25em!important;
}

/* Figma: size boxes as separate light-gray squares */
.variant-picker__option-values:has(.block-swatch) {
  gap: .55rem;
}

.variant-picker__option-values .block-swatch {
  min-width: 4rem;
  min-height: 4rem;
  padding: 0 .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #efefef;
  border: 1px solid transparent;
  color: rgb(var(--text-color) / .75);
  font-weight: 300;
}

/* Order 2 / change 2: the selected size has a black background and white text (also when that size is sold out; its strike-through line stays) */
.variant-picker__option-values :checked + .block-swatch,
.variant-picker__option-values .block-swatch.is-selected {
  background-color: #000;
  border-color: #000;
  color: #fff;
  font-weight: 500;
}

.variant-picker__option-values .block-swatch.is-disabled {
  color: rgb(var(--text-color) / .4);
}

.variant-picker__option-values :checked + .block-swatch.is-disabled,
.variant-picker__option-values .block-swatch.is-selected.is-disabled {
  --swatch-disabled-strike-color: rgb(255 255 255 / .55);
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* Accordion headings slightly bold so they stand apart from the text inside */
.product-info .accordion__toggle,
.product-info .accordion__toggle span {
  font-weight: 600;
}

/* Figma: tighter product accordions */
.product-info .accordion__toggle {
  padding-block: .5rem;
}

.product-info .accordion__content {
  padding-block-end: .5rem;
}

.product-info__block-list > .product-info__block-item[data-block-type="product-accordions"] {
  margin-block-start: 0;
}

/* Figma: bottom FAQ section on product pages */
.product-faq {
  padding-block: 3rem;
}

.product-faq__subheading {
  margin: 0 0 1.5rem;
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.product-faq .product-faq__item.accordion {
  border-block: 0;
  border-top: 1px solid #d9d9d9 !important;
}

.product-faq .product-faq__item.accordion:last-child {
  border-bottom: 1px solid #d9d9d9 !important;
}

.product-faq__item .accordion__toggle,
.product-faq__item .accordion__toggle span {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.product-faq__item .accordion__toggle {
  padding-block: 1.1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
}

.product-faq__item .accordion__content {
  padding-block-end: 1.1rem;
}

/* Figma: full-screen cart */
@media screen and (max-width: 999px) {
  .cart-drawer {
    --drawer-max-width: 100vw;
  }
}

.cart-drawer__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cart-drawer__notice {
  margin: 0;
  padding-block: .75rem 0;
  font-size: .8125rem;
}

.cart-drawer__summary {
  display: grid;
  gap: .75rem;
  margin: 0;
}

.cart-drawer__summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8125rem;
}

.cart-drawer__summary-row dt {
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cart-drawer__summary-row dd {
  margin: 0;
  text-align: end;
}

.cart-drawer__summary-row--total {
  font-size: .9375rem;
}

.cart-drawer__summary-row--total dt,
.cart-drawer__summary-row--total dd {
  font-weight: 700;
}

.cart-drawer__secure-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cart-drawer__payments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-drawer__payment-icon {
  display: block;
  width: 2rem;
  height: 1.25rem;
}

/* FAQ section lines up with the footer's content edge on desktop (3rem) */
@media screen and (min-width: 1000px) {
  .product-faq .container {
    max-width: 86rem;
    margin-inline: auto;
    padding-inline: 3rem;
  }
}

/* Cart: checkout button same height as the Add to Cart button (50px); summary rows in the same font as the rest of the cart */
.cart-drawer__footer .button {
  min-height: 50px;
}

.cart-drawer__summary dt,
.cart-drawer__summary dd {
  font-family: "SuisseIntl Trial", sans-serif;
}

/* Product photos (mobile): thin black line on the bottom edge that moves as you swipe (like Aritzia). Absolutely positioned so it adds no space under the photos. */
.pg-progress {
  display: none;
}

@media screen and (max-width: 699px) {
  .product-gallery__image-list {
    position: relative;
  }

  .pg-progress {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: calc(-1 * var(--container-gutter, 1.25rem));
    width: calc(100% + 2 * var(--container-gutter, 1.25rem));
    height: 1px;
    margin: 0;
    pointer-events: none;
  }

  .pg-progress span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: #000;
  }
}

/* Order 2 / change 1: product title closer to the photos on phones (theme gap is 30px, now 20px) */
@media screen and (max-width: 699px) {
  [id$="__main"] product-gallery {
    margin-bottom: -10px;
  }
}

/* Order 2 / change 3: the product accordions shown as tabs (Description, Size Guide, Materials, Free Returns, FAQ'S) on a cream panel, like the Figma tab area */
.product-info__block-list > .product-info__block-item[data-block-type="product-accordions"] {
  margin-block-start: 24px;
}

.product-tabs--cream {
  margin-top: 0;
  padding: 20px 20px 24px;
  background: #f6f6f1;
}

.product-tabs--cream .product-tabs__nav {
  gap: 20px;
  border-bottom: 1px solid rgb(0 0 0 / .12);
  font-size: 13px;
}

.product-tabs--cream .product-tabs__button {
  padding-bottom: 12px;
  color: rgb(var(--text-color) / .55);
  font-weight: 400;
  white-space: nowrap;
}

/* active tab: dark text + underline only (no faux-bold, the font has one weight) */
.product-tabs--cream .product-tabs__button.is-active {
  color: rgb(var(--text-color));
  font-weight: 400;
}

.product-tabs--cream .product-tabs__button::after {
  height: 1px;
  bottom: -1px;
}

.product-tabs--cream .product-tabs__content {
  padding-top: 20px;
}

.product-tabs--cream .product-tabs__panel .prose {
  text-align: left;
}

@media screen and (max-width: 699px) {
  .product-tabs--cream {
    padding: 16px 12px 20px;
  }

  .product-tabs--cream .product-tabs__nav {
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
  }
}

/* Wider screens: the info column is narrow, so the tabs wrap onto a second line instead of being cut off; the active tab gets its own underline */
@media screen and (min-width: 700px) {
  .product-tabs--cream .product-tabs__nav {
    flex-wrap: wrap;
    gap: 10px 18px;
    border-bottom: 0;
    overflow: visible;
  }

  .product-tabs--cream .product-tabs__button {
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
  }

  .product-tabs--cream .product-tabs__button.is-active {
    border-bottom-color: currentColor;
  }

  .product-tabs--cream .product-tabs__button::after {
    display: none;
  }

  .product-tabs--cream .product-tabs__content {
    padding-top: 16px;
  }
}

/* Order 2 / change 4: "Pairs Well With" heading left-aligned on phones too (the theme centers it there; on desktop it is already left) */
@media screen and (max-width: 699px) {
  .complementary-products__header {
    justify-content: flex-start;
    text-align: start;
  }
}

/* Order 2 / change 4 (phones): less empty space around the Pairs Well With block (was 48px above, 30px under its heading, 86px below the photos) */
@media screen and (max-width: 699px) {
  .product-info__block-list > .product-info__block-item[data-block-type="complementary-products"] {
    margin-block-start: 28px;
  }

  .complementary-products {
    row-gap: 16px;
  }

  [id$="__main"] > .section-spacing {
    padding-bottom: 0;
  }
}

/* Pairs Well With heading: same size as the product title (14px) instead of the tiny 11px label */
.complementary-products p.h5.complementary-products__title {
  font-size: 14px;
  line-height: 1.3;
}

/* ORDER 2 - collection pages (all collections use this one template), styled after the reference collection page */
/* title: regular weight (the theme forces bold on headings) */
.cbc .cbc__title {
  font-family: "SuisseIntl Trial", sans-serif !important;
  font-weight: 400 !important;
}

/* product cards: name (uppercase) above the price, both left-aligned with the photo edge */
.cbc .cbp__row {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.cbc a.cbp__title {
  text-transform: uppercase !important;
  letter-spacing: .01em;
}

.cbc .cbp__price {
  font-weight: 500;
}

/* phones: as in the reference the breadcrumb row is not shown, VIEW and FILTER AND SORT sit on one row (icon first on VIEW, icon last on FILTER) */
@media screen and (max-width: 749px) {
  .cbc__toolbar .cbc__tb-col:first-child {
    display: none;
  }

  .cbc__view {
    flex-direction: row-reverse;
  }

  .cbc__filter-btn {
    flex-direction: row-reverse;
  }
}

/* Client review round 1 / 1: "Size Guide" link with a ruler icon, capitals, no underline */
button.link.variant-picker__size-guide {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  letter-spacing: .06em !important;
  font-size: 12px;
  font-weight: 400 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  background-image: none;
  border: 0;
  box-shadow: none;
}

button.link.variant-picker__size-guide::before {
  content: "";
  width: 18px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M.6.6h16.8v8.8H.6zM3.6.6v4M6.6.6v3M9.6.6v4M12.6.6v3M15.6.6v4' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M.6.6h16.8v8.8H.6zM3.6.6v4M6.6.6v3M9.6.6v4M12.6.6v3M15.6.6v4' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Client review round 1 / 2: size boxes as small light rectangles with a thin border; the selected one is black with white text */
.variant-picker__option-values:has(.block-swatch) {
  gap: .75rem;
}

.variant-picker__option-values .block-swatch {
  min-width: 3.9rem;
  min-height: 2.7rem;
  padding: 0 .5rem;
  background-color: #f6f6f6;
  border: 1px solid #dcdcdc;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
}

.variant-picker__option-values :checked + .block-swatch,
.variant-picker__option-values .block-swatch.is-selected {
  background-color: #000;
  border-color: #000;
  color: #fff;
  font-weight: 400;
}

.variant-picker__option-values .block-swatch.is-disabled {
  color: rgb(0 0 0 / .4);
}

.variant-picker__option-values :checked + .block-swatch.is-disabled,
.variant-picker__option-values .block-swatch.is-selected.is-disabled {
  color: #fff;
}

/* Order 3 / 1: phone tab row moved up/down under the thumb. Cause: the base phone rule gives the nav overflow-x:auto, which makes it a vertical scroll box too (underline + button padding overflow it). The 4 tabs fit on one row, so no scrolling is needed. */
@media screen and (max-width: 699px) {
  .product-tabs--cream .product-tabs__nav {
    overflow: visible;
    overscroll-behavior: none;
  }
}

/* Client review round 1 / 3: tabs on the plain page background (no grey box) */
.product-tabs--cream {
  padding: 4px 0 0;
  background: transparent;
}

@media screen and (max-width: 699px) {
  .product-tabs--cream {
    padding: 4px 0 0;
  }
}

/* ORDER 4 change 1: product gallery video = no controls / no play-button overlay */
video-media[group="product"]::part(play-button) { display: none !important; }
video-media[group="product"] video { pointer-events: none; }
video-media[group="product"] video::-webkit-media-controls,
video-media[group="product"] video::-webkit-media-controls-panel,
video-media[group="product"] video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* ORDER 4 change 2: "Model is 5'9.5” wearing S" pill on the product photo (copy of Aloyoga: white pill, 14px/600, padding 5px 16px, radius 100px).
   Phones: floats bottom-right over the photo area (15px up, 20px in from the screen edge), stays while swiping.
   Desktop: sits on the 2nd photo of the grid (24px up, 20px in). Text = snippets/model-line.liquid (empty fields = no pill). */
.model-pill {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 5px 16px;
  background: #fff;
  color: #000;
  border-radius: 100px;
  font-family: acumin-pro, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 600;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: .8;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.model-pill--mobile { display: none; }
.model-pill--desktop { display: none; }

@media screen and (max-width: 699px) {
  .model-pill--mobile {
    display: block;
    bottom: 15px;
    right: calc(20px - var(--container-gutter, 1.25rem));
    max-width: calc(100vw - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Tablets / small windows (700-999px): the gallery is still a swipe carousel (the 2-column grid starts at 1000px), so the floating pill is used here too,
   otherwise it would sit on the 2nd photo and stay out of sight until the visitor swipes. Photos are not full-bleed at this size: 20px in, 24px up. */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .product-gallery__image-list {
    position: relative;
  }

  .model-pill--mobile {
    display: block;
    bottom: 24px;
    right: calc(20px - var(--container-gutter, 2rem));
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery__media:has(> .model-pill--desktop) {
    position: relative;
  }

  .product-gallery__media > .model-pill--desktop {
    display: block;
    width: auto;
    bottom: 24px;
    right: 20px;
  }
}

/* ORDER 4 change 3: size chart like Represent. Table, Inches/Centimetres toggle, row+column hover (instant, no fade), right-side drawer (0.7s slide, blurred backdrop).
   Behaviour in assets/size-chart.js; markup in snippets/size-chart-content.liquid (+ link/template in snippets/variant-picker.liquid). */
.sc-chart { display: block; max-width: 100%; overflow-x: auto; }
.sc-chart[data-unit="cm"] table[data-unit="in"],
.sc-chart[data-unit="in"] table[data-unit="cm"],
.sc-chart .sc-hidden { display: none !important; }

.sc-chart table {
  width: 100%;
  margin: 0;
  border: 0 !important;
  border-collapse: collapse;
  font-size: 10px;
  line-height: 18px;
}

.sc-chart table th,
.sc-chart table td {
  padding: 12px 4px;
  background: #f7f7f7;
  border: 1px solid #fff !important;
  color: #000;
  font-family: inherit;
  opacity: 1;
  font-size: 10px;
  line-height: 18px;
  font-weight: 300;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  vertical-align: middle;
  transition: none;
}

.sc-chart table tr > :first-child {
  width: 130px;
  padding: 12px 16px 12px 8px;
  text-align: left;
}

.sc-chart table :is(strong, b, em, i, p) {
  margin: 0;
  font-weight: inherit;
  font-style: normal;
}

.sc-chart table td.highlight,
.sc-chart table th.highlight { background: #eaeaea; }

@media screen and (max-width: 699px) {
  .sc-chart table tr > :first-child { width: 119px; padding: 12px 8px; }
}

.sc-chart table :is(th, td).sc-note {
  width: auto;
  padding: 12px 8px;
  text-align: left;
}

/* part title inside one table (e.g. "Top", "Pants") */
.sc-chart table :is(th, td).sc-section { font-weight: 600; }

/* never let long text or media push the page wider: words only break when a single word is wider than the chart; wide charts scroll inside their own box */
.sc-chart table th,
.sc-chart table td { overflow-wrap: break-word; word-break: normal; }
.sc-chart img, .sc-chart video, .sc-chart iframe { max-width: 100%; height: auto; }

/* charts with 6+ columns on small phones: narrower label column and tighter cells so they still fit without scrolling */
@media screen and (max-width: 420px) {
  .sc-chart table.sc-wide tr > :first-child { width: 64px; padding: 12px 4px; }
  .sc-chart table.sc-wide th,
  .sc-chart table.sc-wide td { padding-left: 2px; padding-right: 2px; }
  .sc-chart table.sc-wide :is(th, td).sc-note { width: auto; padding: 12px 8px; }
}

.sc-unit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 8px !important;
  padding: 0;
}

/* the theme's .prose wrapper adds top margins between siblings; keep the toggle independent of it */
.sc-unit .sc-unit__btn {
  margin: 0 !important;
  min-height: 0;
  height: auto;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

.sc-unit .sc-unit__btn:last-child { padding-right: 0; }

.sc-unit__btn {
  padding: 8px;
  background: none;
  border: 0;
  color: #000;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 300;
  cursor: pointer;
}

.sc-unit__btn[aria-pressed="true"] { font-weight: 600; }

.sc-drawer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  visibility: hidden;
  transition: visibility .7s cubic-bezier(.4, 0, .2, 1);
}

.sc-drawer.is-open { visibility: visible; }

.sc-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  cursor: pointer;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}

.sc-drawer.is-open .sc-drawer__backdrop { opacity: 1; }

.sc-drawer__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100vw;
  max-width: 100%;
  padding: 24px 24px 0;
  background: #fff;
  color: #000;
  transform: translateX(100%);
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.sc-drawer.is-open .sc-drawer__panel { transform: translateX(0); }

@media screen and (min-width: 1024px) {
  .sc-drawer__panel { max-width: 540px; }
}

.sc-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.sc-drawer__title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.sc-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  color: #000;
  cursor: pointer;
}

.sc-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}

.sc-drawer__heading {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .sc-drawer, .sc-drawer__backdrop, .sc-drawer__panel { transition-duration: .01s; }
}

/* Size boxes stay on ONE row in narrow columns (390px phones, narrow desktop info column). Before: each box was at least 62px + 12px gaps, so 5 sizes needed 360px and the last box dropped to a second row.
   In a narrow column (< 441px) the boxes now share the row equally; when there is more room they keep the normal 62px boxes. Only for options with 2+ boxes (a single value such as a bag's "Black" is untouched). */
.variant-picker__option-values:has(> .block-swatch ~ .block-swatch) {
  container-type: inline-size;
}

@container (max-width: 440px) {
  .variant-picker__option-values > .block-swatch {
    flex: 1 1 36px;
    min-width: min-content;
    max-width: 5rem;
    padding-inline: .25rem;
  }
}