/* me-product.css: product page pieces (scene line, tabs, notices, Responsible Person), family tag on cards,
   family nav on collections, "Pairs well with". Loaded by main-product and me-pairs-with. */
.me-scene-line { margin: 0.4rem 0 1.6rem; max-width: 36ch; color: var(--color-stone); }
.product__title h1 { font-size: var(--me-size-h2); font-weight: var(--me-weight-heading-light); line-height: 1.05; letter-spacing: -0.01em; }
.product__info-container > * + * { margin-top: 1.6rem; }
.product__info-container .price--large { font-size: 1.8rem; }
.product-form__input .form__label { font-family: var(--font-body-family); font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; }
.product-form__input--pill input[type="radio"] + label { border-radius: 0; font-size: 1.4rem; min-height: 4.4rem; padding: 0 1.6rem; }
.product-form__input--pill input[type="radio"]:checked + label { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }

/* One primary action: Add to bag is solid, Buy it now is outlined. This file loads before section-main-product.css, hence the longer selectors.
   Branded wallet buttons keep Shopify's own look. */
.product-form__buttons .shopify-payment-button__button--unbranded,
.product-form__buttons .shopify-payment-button__button--unbranded:hover:not([disabled]) { background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); border: 1px solid rgb(var(--color-foreground)); }
.product-form__buttons .shopify-payment-button__button--unbranded:hover:not([disabled]) { border-width: 2px; }
.product-form__buttons .shopify-payment-button__button--unbranded::after { box-shadow: none; }
.product-form__buttons .shopify-payment-button__button--unbranded:focus-visible { outline: 0.2rem solid var(--color-accent); outline-offset: 0.3rem; box-shadow: none; }
.product__modal-opener .product__media-icon { border-radius: 0; }

/* Phone buy bar, no JS: the form scrolls in at its own place, just after the size picker, so the shopper has seen the size, then stays at the foot of the
   screen for the length of the info column. 7.3rem is the bar's own height. A sticky box stops at the content edge, so the room at the end of the column is a
   spacer, not padding, or the bar would rest on the last lines. Focus stops clear of the bar, and messages sit above it or they would fall off screen. */
@media screen and (max-width: 749px) {
  html:has([id^="MainProduct-"] .me-buy) { scroll-padding-bottom: 8.9rem; }
  [id^="MainProduct-"]:not(quick-add-modal *) .product__info-container::after { content: ""; display: block; height: 7.3rem; }
  [id^="MainProduct-"]:not(quick-add-modal *) .product__info-container .product-form__input--pill input[type="radio"] { height: 4.4rem; }
  [id^="MainProduct-"]:not(quick-add-modal *) .me-buy { position: sticky; top: calc(100vh - 7.3rem); top: calc(100dvh - 7.3rem); z-index: 2; margin-inline: calc(-1 * var(--me-gutter)); padding: 1.2rem var(--me-gutter); background: rgb(var(--color-background)); border-top: 1px solid var(--color-mist); }
  [id^="MainProduct-"]:not(quick-add-modal *) .me-buy .product-form { margin: 0; }
  [id^="MainProduct-"]:not(quick-add-modal *) .me-buy .product-form__buttons { display: flex; gap: 0.8rem; max-width: none; }
  [id^="MainProduct-"]:not(quick-add-modal *) .me-buy .product-form__submit,
  [id^="MainProduct-"]:not(quick-add-modal *) .me-buy .shopify-payment-button { flex: 1 1 0; min-width: 0; margin: 0; }
  [id^="MainProduct-"]:not(quick-add-modal *) .me-buy :is(.product-form__error-message-wrapper, .me-demo-note) { position: absolute; inset: auto 0 100%; margin: 0 !important; padding: 0.8rem var(--me-gutter); background: rgb(var(--color-background)); }
}

/* Notices */
.me-notice { margin: 1.2rem 0 0; font-size: 1.6rem; line-height: 1.5; color: rgb(var(--color-foreground)); max-width: 48ch; }
.me-reassurance { font-size: 1.4rem; line-height: 1.5; max-width: 48ch; }
.me-reassurance li + li { margin-top: 0.4rem; }
.me-rp { margin-top: 2rem; font-size: 1.2rem; line-height: 1.6; color: var(--color-stone); max-width: 60ch; }
.me-rp__label { display: block; font-size: 1.1rem; letter-spacing: var(--me-eyebrow-tracking); text-transform: uppercase; font-weight: var(--me-weight-body-medium); }

/* Tabs (details/summary) */
.me-tabs { margin-top: 2.4rem; border-top: 1px solid var(--color-mist); }
.me-tabs__item { border-bottom: 1px solid var(--color-mist); }
.me-tabs__summary { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; min-height: 5.6rem; padding: 1.2rem 0; cursor: pointer; list-style: none; }
.me-tabs__summary::-webkit-details-marker { display: none; }
.me-tabs__summary:focus-visible { outline: 0.2rem solid var(--color-accent); outline-offset: 0.3rem; }
.me-tabs__title { margin: 0; font-family: var(--font-body-family); font-size: 1.5rem; font-weight: var(--me-weight-body-medium); letter-spacing: 0.02em; }
.me-tabs__icon { position: relative; width: 1.4rem; height: 1.4rem; flex: none; }
.me-tabs__icon::before, .me-tabs__icon::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgb(var(--color-foreground)); transition: transform 240ms var(--me-ease); }
.me-tabs__icon::after { transform: rotate(90deg); }
.me-tabs__item[open] .me-tabs__icon::after { transform: rotate(0deg); }
.me-tabs__content { padding: 0 0 2rem; font-size: 1.5rem; line-height: 1.6; max-width: 60ch; }
.me-tabs__content p { margin: 0 0 1rem; }
.me-tabs__inci { color: var(--color-stone); }
.me-tabs__warnings { font-size: 1.3rem; }

/* Family tag on cards */
.me-family-tag { margin: 0 0 0.4rem; font-size: 1.1rem; letter-spacing: var(--me-eyebrow-tracking); text-transform: uppercase; font-weight: var(--me-weight-body-medium); color: rgba(var(--color-foreground), 0.8); }
.card__information .me-family-tag { order: -1; }

/* Family nav on collection pages */
.me-family-nav { margin: 0 auto 2.4rem; }
.me-family-nav__list { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.me-family-nav__list::-webkit-scrollbar { display: none; }
.me-family-nav__link { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 1.6rem; border: 1px solid rgba(var(--color-foreground), 0.3); font-family: var(--font-body-family); font-size: 1.4rem; font-weight: var(--me-weight-body-medium); letter-spacing: 0.02em; text-decoration: none; color: rgb(var(--color-foreground)); white-space: nowrap; transition: background-color 240ms var(--me-ease), color 240ms var(--me-ease); }
.me-family-nav__link:hover { border-color: rgb(var(--color-foreground)); }
.me-family-nav__link.is-active { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: rgb(var(--color-foreground)); }
.me-family-nav__link:focus-visible { outline: 0.2rem solid var(--color-accent); outline-offset: 0.3rem; }

/* Pairs well with */
.me-pairs__head { margin-bottom: 3.2rem; }
.me-pairs__heading { margin: 0.8rem 0 0; }
.me-pairs__grid { margin: 0; }
@media screen and (min-width: 990px) { .me-pairs__head { margin-bottom: 4.8rem; } }
@media (prefers-reduced-motion: reduce) { .me-tabs__icon::before, .me-tabs__icon::after, .me-family-nav__link { transition: none; } }

/* Price settles after a variant change: Dawn re-inserts the children of #price-<section>, so the keyframe runs on insertion. */
@media (prefers-reduced-motion: no-preference) {
  [id^="price-"] .price { animation: me-settle 300ms var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1)) both; }
  @keyframes me-settle { from { opacity: 0.4; transform: translateY(4px); } }
}

/* Size pills: Dawn top-aligns the label once the pill gets a minimum height. */
.product-form__input.product-form__input--pill input[type='radio'] + label { display: inline-flex; align-items: center; justify-content: center; }

/* A tab eases open instead of snapping. */
.me-tabs__item[open] .me-tabs__content { animation: me-tab-in 360ms var(--me-ease) both; }
@keyframes me-tab-in { from { opacity: 0; transform: translateY(-0.6rem); } }
@media (prefers-reduced-motion: reduce) { .me-tabs__item[open] .me-tabs__content { animation: none; } }