/** Shopify CDN: Minification failed

Line 3995:66 Unexpected "*"

**/
/* OS: RTE heading fallback — rich-text-editor content (fit guides,
   blog article body, anywhere .rte wraps merchant content) can never
   carry a heading-size-N class, since Shopify's rich text editor
   doesn't add custom classes to the HTML it generates. This is the
   one deliberate global CSS addition in the type rebuild: a global
   fallback sized via the same native scale tokens (--font-N) the real
   heading-size-N classes use, not hardcoded px, so it moves with the
   scale/preset like everything else. See docs/TYPOGRAPHY-SPEC.md,
   "DEFINITIVE SYSTEM" section, for why h1/h2/h3 map to 9/6/5. */
.rte h1 {
  font-size: var(--font-9);
  font-weight: var(--FONT-WEIGHT-HEADING);
  line-height: var(--leading-relaxed);
}
.rte h2 {
  font-size: var(--font-6);
  font-weight: var(--FONT-WEIGHT-HEADING);
  line-height: var(--leading-relaxed);
}
.rte h3 {
  font-size: var(--font-5);
  font-weight: var(--FONT-WEIGHT-HEADING);
  line-height: var(--leading-relaxed);
}

.gap-2 {
  gap: var(--space-2);
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.py-05 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pt-8 {
  padding-top: 2rem;
}

.gap-x-2 {
  column-gap: 0.5rem;
}

.text-10 {
  font-size: 10px;
  line-height: 12px;
}

.text-11 {
  font-size: var(--font-2);
  line-height: 18px;
}

.font-w-500 {
  font-weight: 500;
}

.font-normal {
  font-style: normal;
}

.grow {
  flex-grow: 1;
}

.flex-important {
  display: flex !important;
}

.flex-basis-50 {
  flex-basis: 50%;
}

.height-auto {
  height: auto;
}

.border-radius-40 {
  border-radius: 2.5rem;
}

.w-45 {
  width: 45%;
}

.table-switcher {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}

.table-switcher>* {
  display: flex;
  padding: 5px 10px;
  border: 1px solid var(--text);
  color: var(--text);
}

.table-switcher>.selected {
  background: var(--text);
  color: #fff;
}

#table-cm, #table-in {
  display: none;
}

#table-cm.selected, #table-in.selected {
  display: block;
}

.size-chart-container .rte__table-wrapper {
  overflow-x: hidden;
}

/* May want to remove .size-chart-container to style all tables inside .product__block__description */
.product__block__description .size-chart-container table tr td:first-child {
  padding-left: 0;
  font-weight: 700;
  min-width: 90px;
}

.product__block__description .size-chart-container table tr:first-child td {
  font-weight: 700;
}

.product__block__description .size-chart-container table td {
  padding: 18px 10px;
  border-bottom: 1px solid #e5e6e6;
  text-align: left;
  vertical-align: top;
}

.product__block__description .size-chart-container table {
  font-size: 12px;
}

@media (max-width: 950px) {
  .md--width-90 {
    width: 90%;
  }
}

.pd-pickup-modal {
  padding: 4.5rem var(--space-7);
}

@media (max-width: 950px) {
  .pd-pickup-modal {
    padding: 4.5rem var(--space-6);
  }
}

.position-modal-icon {
  position: absolute;
  right: 30px;
  top: 30px;
}

@media (max-width: 950px) {
  .position-modal-icon {
    right: 0;
    top: 0;
  }
}

/* PDP breadcrumb - muted utility register. Colour is set on the nav
   itself and inherited down to the links (stock's global "a { color:
   inherit }" already does the propagating, so no separate .breadcrumb
   a rule is needed); the current/last crumb (product.title, always
   the final <span> per sections/product.liquid's breadcrumbs_markup
   capture) is bumped back to full charcoal so it stays legible against
   the muted links/separators. Both PDP templates that actually enable
   breadcrumbs have padding_top: 0, and .breadcrumb's own padding-bottom
   is var(--PT) (== padding_top) - so today there is NO space at all
   below it before the gallery; margin-bottom adds real, guaranteed
   space independent of that setting. */
.breadcrumb {
  color: var(--text-light);
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  margin-bottom: var(--space-8);
}

.breadcrumb span:last-child {
  color: var(--text);
}

/* "Order Online & Collect In-Store" feature box (Concept A) - see the
   matching markup rebuild in snippets/pickup-availability.liquid.
   Fresh, unclaimed class names throughout (.os-collect*) so nothing
   here has to fight stock/prior specificity - there's simply nothing
   else targeting these selectors. */
.os-collect {
  margin-top: var(--space-8);
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
}

.os-collect__row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.os-collect__icon {
  display: flex;
  color: var(--text);
}

.os-collect__icon svg {
  width: 20px;
  height: 20px;
}

.os-collect__label {
  font-size: var(--font-3);
  font-weight: 500;
  color: var(--text);
}

.os-collect__detail {
  margin: 8px 0 0;
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  line-height: 1.55;
  font-weight: 400;
  font-style: normal;
  color: var(--text-light);
}

/* Persistent border-bottom instead of .text-link-bare's animated
   ::after underline - that retract-on-hover swap was changing the
   .os-collect box's rendered height on hover. A static border never
   changes state, so there's nothing to reflow. */
button.os-collect__link {
  display: inline-block;
  margin-top: 14px;
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 1px solid var(--text);
  padding: 0;
  line-height: 1.2;
  cursor: pointer;
}

/* PDP subtitle/cutline - muted so it reads as secondary detail between
   the (charcoal) title and the (charcoal) price. */
.product__page__cutline {
  color: var(--text-light);
}

.product-tag-label {
  top: 10px;
  right: 10px;
}

.sidebar__filter__group .filter__button label {
  padding: 4px 10px 4px 0;
}

.accordion-is-open~ul[accordion-option-label="accordion-size"] {
  display: flex !important;
  flex-wrap: wrap;
  column-gap: 0.5rem;
}

.accordion-is-open~ul[accordion-option-label="accordion-size"] li {
  flex-grow: 1;
  flex-basis: 45%;
}

.accordion-is-open~ul[accordion-option-label="accordion-size"] label svg {
  left: 0;
}

.accordion-is-open~ul[accordion-option-label="accordion-size"] label p {
  right: 0;
  padding-left: 25px;
}

.product-img-filter {
  filter: brightness(var(--PHOTO-CORRECTION));
}


.js__header__stuck.js__header__stuck__backdrop .theme__header {
  opacity: 1;
  background: white;
}


.header__desktop__button .navlink {
  padding-left: 10px;
  padding-right: 10px;
}

.header__desktop__bar__r {
  align-items: center;
}


.header__desktop__bar__r:after {
  content: '';
  display: block;
  height: 28px;
  width: 75px;
  background: url(coordinates-red.svg) no-repeat top left;
  background-size: contain;
  position: relative;
  margin-left: 32px;
}

[data-header-transparent=true]:not(.meganav--visible) .header__desktop__bar__r:after {
  background: url(coordinates-white.svg) no-repeat top left;
  background-size: contain;
}

.collection-list-item .product-grid-item,
.product-grid-item__link {
  height: 100%;
}

.product-grid-item__link {
  background-size: cover;
  position: relative;
}

.product-grid-item__link .text-btn-arrow-right {
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  /* color: white; */
  text-transform: none;
}

.product-grid-item__link .text-btn-arrow-right:after {
  display: none;
}

.product-grid-item__link__overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
}

.product-grid-item__pagination span:before, .product-grid-item__pagination span:after {
  background: var(--os-grey-750);
}

/* SALE PRICE COLOUR — brand red, consolidated into ONE rule so it can't
   drift per-section again. Pipeline/OS render "the sale amount" via
   FOUR different markup patterns depending on context, each previously
   styled (or not) independently:
     .price.on-sale        - stock Pipeline price component. Sibling
                              .compare-at holds the struck original.
                              Used by: product-grid-item.liquid (home/
                              featured blocks, collection/PLP cards,
                              recommended/related), search-predictive.
                              liquid, sections/search.liquid,
                              sections/predictive-search.liquid.
                              theme.css's OWN rule for this is the bare
                              .on-sale class (color: var(--primary)) -
                              this compound selector (2 classes) safely
                              out-specifies it regardless of source
                              order, without touching that stock rule.
     .product__price--sale - OS's PDP price snippet. Sibling
                              .product__price--compare holds the struck
                              original. Used by: product-price.liquid,
                              so also PDP, quick-view (api-product-
                              quickview.liquid), and combined-listing
                              cards (product-combined-listing.liquid) -
                              all three render via the same snippet.
                              Was already correct; folded in here so
                              every context lives in one place.
     .line__price mark      - cart's semantic markup (<mark> for the
                              sale amount, <del> for the struck
                              original). Used by cart-line-items.liquid,
                              rendered from BOTH sections/cart.liquid
                              (full cart page) and sections/api-cart-
                              items.liquid (cart drawer's AJAX-refreshed
                              content) - one fix, both surfaces. Was
                              rendering theme.css's var(--primary) (a
                              palette-driven brand accent, not
                              necessarily red - the grey the user saw).
     .product-clip__price
       .new-price            - "buy it with" cross-sell card. Sibling
                              .old-price holds the struck original.
                              Used by product-clip.liquid, rendered from
                              sections/api-product-upsell-item.liquid.
                              Was inheriting .product-clip__price's own
                              var(--os-grey-500) with no override.
   None of these selectors reach the struck/compare-at/regular-price
   siblings (.compare-at, .product__price--compare, del, .old-price) -
   confirmed each already resolves to var(--text-light)/var(--os-grey-500)
   independently and stays untouched by this rule. */
.price.on-sale,
.product__price--sale,
.line__price mark,
.product-clip__price .new-price {
  color: var(--os-red-750);
}

/* Body Copy Styling */
.compare-at,
.pickup__content.drawer__content .pickup_time,
.pickup__content.drawer__content address,
.index__column .rte p,
.dropdown__family .navlink--grandchild .navtext,
.tmenu_item_level_2>.tmenu_item_link .tmenu_item_text,
.tmenu_item_level_1>.tmenu_item_link .tmenu_item_text,
body .tmenu_item_level_2.tmenu_item_display_header .tmenu_item_link .tmenu_item_text,
.blog__article__content.rte p,
.standard__rte p,
.sidebar__filter__group .filter__button label,
.sidebar__filter__group .sidebar__navigation__list+button,
.accordion-content__entry,
.accordion__body p,
.accordion__body ul,
.product-clip__price,
.wrapper p {
  font-size: 13px !important;
  line-height: 20px !important;
  letter-spacing: 0.02em !important;
  text-transform: unset !important;
}

/* ---------------------------------------------------
REMOVE DEFAULT MEGA MENU BORDER + SHADOW
--------------------------------------------------- */

body .tmenu_item--root > .tmenu_submenu {
  border-top: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

body .tmenu_item_level_1>.tmenu_item_link+.tmenu_submenu,
body .tmenu_item_level_2.tmenu_item_display_header .tmenu_item_link+.tmenu_submenu {
  padding-top: 0px !important;
}

/* Main navigation – override small caps */
.tmenu_nav .tmenu_item--root>.tmenu_item_link .tmenu_item_text,
.navlink--toplevel .navtext {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* Mega menu headers – main + internal match */
body .tmenu_item_level_1>.tmenu_item_link,
body .tmenu_item_level_2.tmenu_item_display_header>.tmenu_item_link {
  position: relative;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
}

body .tmenu_item_level_1>.tmenu_item_link::after,
body .tmenu_item_level_2.tmenu_item_display_header>.tmenu_item_link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55%;
  height: 1px;
  background: #e9e9e9;
}

body .tmenu_item_level_1>.tmenu_item_link .tmenu_item_text,
body .tmenu_item_level_2.tmenu_item_display_header>.tmenu_item_link .tmenu_item_text {
  text-transform: none !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  color: var(--COLOR-NAV-TEXT) !important;
}

/* Level 2 navigation */
body .tmenu_item_level_2>.tmenu_item_link .tmenu_item_text,
body .tmenu_item_level_2.tmenu_item_display_header .tmenu_item_link .tmenu_item_text {
  text-transform: none !important;
  font-weight: 400 !important;
}

body .tmenu_item_level_2>.tmenu_item_link .tmenu_item_text {
  color: var(--COLOR-NAV-TEXT-LIGHT) !important;
}

body .tmenu_item_level_2>.tmenu_item_link:hover .tmenu_item_text {
  color: var(--COLOR-NAV-TEXT) !important;
}

/* Force internal headers to use the same darker colour as main headers */
body .tmenu_item_level_2.tmenu_item_display_header > .tmenu_item_link,
body .tmenu_item_level_2.tmenu_item_display_header > .tmenu_item_link .tmenu_item_text,
body .tmenu_item_level_2.tmenu_item_display_header > .tmenu_item_link span,
body .tmenu_item_level_1 > .tmenu_item_link .tmenu_item_text {
  color: var(--COLOR-NAV-TEXT) !important;
}



/* =========================================================
HEADER LOCALISATION: REMOVE SHOUTY SMALL CAPS
Targets the country / currency selector in the header.
This is deliberately broad because theme selectors vary.
========================================================= */
.header__desktop__buttons .disclosure,
.header__desktop__buttons .disclosure__toggle,
.header__desktop__buttons .localization-form,
.header__desktop__buttons .localization-form button,
.header__desktop__buttons button,
.header__desktop__actions .disclosure,
.header__desktop__actions .disclosure__toggle,
.header__desktop__actions .localization-form,
.header__desktop__actions .localization-form button,
.header__desktop__actions button,
.header__right .disclosure,
.header__right .disclosure__toggle,
.header__right .localization-form,
.header__right .localization-form button,
.header__right button {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--COLOR-NAV-TEXT) !important;
}

/* =========================================================
HEADER LOCALISATION SELECTOR
Styles the country / currency button in the header
========================================================= */

popout-select .popout__toggle {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--COLOR-NAV-TEXT) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Chevron icon */
popout-select .popout__toggle svg {
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px !important;
}

/* Dropdown options */
popout-select .popout-list__option,
popout-select .popout-list__option span {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
}

/* Add to Cart label - uppercase + tracked, matching the nav/label
   register. .btn--outline (already on this button) wires up
   text-transform/letter-spacing to the native button tokens, but
   settings.type_button_uppercase is off sitewide, so those resolve to
   "none"/normal - flipping that setting would uppercase every button
   on the site, well beyond this one button, so this targets
   .btn--add-to-cart specifically instead, reusing the nav tokens
   (equal specificity to .btn--outline's rule, later in the cascade,
   so it wins without !important). Applies to every button_text state
   (sold out / unavailable / pre-order / add to cart) since the class
   doesn't change with state. */
.btn--add-to-cart {
  text-transform: var(--FONT-NAV-TRANSFORM);
  letter-spacing: var(--FONT-NAV-LETTER-SPACING);
}

/* Body Bold Styling */
.pickup__button,
.pickup__content a,
.product__grid__title,
.text-btn-arrow-right,
.sidebar__filter__group .sidebar__navigation__list+button,
.accordion__body p strong,
h3.product-clip__title {
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  text-transform: unset;
}

/* Body Bold Small Styling */
/* .variant__countdown--low deliberately excluded - see the PDP utility-text
   quieting rule below, which puts it in the muted secondary register instead
   of this bold treatment. --in/--out (in-stock/sold-out) keep it. */
.product__grid__price,
.product__grid__price>*,
.variant__countdown--in,
.variant__countdown--out {
  font-size: 12px !important;
  line-height: 14px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  text-transform: unset;
}

/* PDP utility-text quieting - one consistent secondary register for SKU
   and the low-stock message. */
.variant-sku,
.variant__countdown--low {
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  color: var(--text-light);
  font-weight: 400;
}

/* "More payment options" - colour already wins (no competing rule for
   it), but font-size doesn't: there's no theme.css rule setting it, so
   this element's ~15.3px must be coming from Shopify's own checkout/
   accelerated-checkout script applying it directly (inline, at
   runtime, after our stylesheet loads) rather than from any selector
   we can out-specificity. !important is the deliberate, isolated
   exception here - text-decoration is left alone so its existing
   underline survives untouched. */
.shopify-payment-button__more-options {
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY)) !important;
  color: var(--text-light);
  font-weight: 400;
}

/* Small Caps Styling */
.pickup__info__text,
.product_size_variant_chip,
.selector-wrapper .radio__button label,
.article__item-date,
.article__item-tag,
.stain-button-canvas,
.shopify-product-form .typography-accent,
.navlink--toplevel .navtext,
.tmenu_item_text,
.tmenu_nav .tmenu_item--root>.tmenu_item_link,
.tmenu_nav .tmenu_item .tmenu_item_link,
body .tmenu_item_level_2 .tmenu_item_display_header a span,
.tmenu_item_mobile .tmenu_item_link,
.tmenu_item_mobile .tmenu_item_level_2>.tmenu_item_link .tmenu_item_text,
.navlink--child .navtext,
.blog__tag,
.blog__article--light,
.collection__nav__buttons span,
.sidebar__heading,
.btn--soft.blog__tag,
.product__popdown__title {
  font-size: 10px !important;
  line-height: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Accordion title — renders as authored now (no uppercase/tracking),
   charcoal, weight 400. Size back to heading-size-3 (~12-13px) in
   snippets/product-tabs.liquid - heading-size-2 read too small. */
.accordion__title {
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text);
}

/* Header H1 Styling */
.blog__heading,
h1.title {
  font-size: 30px !important;
  line-height: 38px !important;
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
}

/* Pickup drawer product-title header - stock theme.css puts this on
   var(--bg-accent) (the brand green); neutralise to the same var(--bg)
   token the rest of the modal chrome (.pickup__header) already uses.
   Also left-aligns the product-context block (stock centres it) - the
   whole modal is left-aligned now, not just this block. */
.pickup__product__wrap {
  background-color: var(--bg);
  text-align: left;
}

/* Modal header label - stock's .pickup__header (sticky, var(--bg),
   1px solid var(--border) underneath already) is kept as-is for
   structure/position; only the label's own typography is overridden
   here, same selector/specificity as stock, later source order wins.
   text-transform/letter-spacing forced explicitly rather than via
   settings.font_accent_uppercase (off sitewide, and flipping it would
   affect every accent-styled element on the site, not just this one). */
.pickup__header__title {
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.pickup__header .drawer__close {
  color: var(--text-light);
}

/* Product context block. */
.pickup__product__title {
  font-size: calc(var(--font-4) * var(--FONT-ADJUST-BODY));
  font-weight: 500;
  color: var(--text);
}

.pickup__variant {
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  font-style: normal;
}

/* Store rows - name (left) + status (right), no status icons. New
   .os-pickup-modal-row/-status/-timing classes since this row layout
   and the status word don't exist in stock markup at all - nothing to
   override, nothing to fight. */
.os-pickup-modal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
}

.os-pickup-modal-store {
  font-size: var(--font-3);
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.os-pickup-modal-status {
  font-size: var(--font-2);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  margin: 0;
}

.os-pickup-modal-status--unavailable {
  color: var(--text-light);
}

.os-pickup-modal-timing {
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  color: var(--text-light);
  margin: 2px 0 0;
}

/* Footer - new, doesn't exist in stock markup. */
.os-pickup-modal-footer {
  padding: var(--gutter);
  border-top: 1px solid var(--border);
}

.os-pickup-modal-instruction {
  font-size: var(--font-2);
  color: var(--text-light);
  margin: 0;
}

/* Tighter store-list spacing - stock's 32px margin-bottom + 32px
   margin-top/padding-top (64px total between entries) was the main
   reason the drawer needed heavy scrolling with several stores;
   combined with dropping the phone line and collapsing the address to
   one line (snippets/pickup-availability.liquid), this gets
   meaningfully more stores on screen without scrolling. Also where the
   green (var(--bg-accent)) divider border is neutralised to the
   hairline token used everywhere else on this page. */
.pickup__list__item {
  margin-bottom: var(--space-8);
}

.pickup__list__item + .pickup__list__item {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

/* Address - muted, matches the collect box's secondary-detail register. */
.pickup__address {
  color: var(--text-light);
}

/* Header H3 Styling */
/* .pickup__product__title deliberately excluded - pickup modal rebuild
   below needs its own, different size/weight (~15px / 500, not 20px /
   300 - it's the product-context heading in the modal, not an
   eyebrow/label like the rest of this list). */
.section-blog .kicker-flourished,
.accent-title-large,
.section-related .kicker-flourished,
.section-carousel .kicker-flourished {
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: 0.01em !important;
  font-weight: 300 !important;
}

/* Header H3 Styling — heading (account/login page titles); weight
   normalised to 400, the rest unchanged. Split from the rule above
   because .pickup__product__title/.kicker-flourished/.accent-title-large
   are eyebrows/labels, not headings, and stay at weight 300. */
.account__form__title {
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
}

/* Body Large Styling */
.store-availability-list__location {
  font-size: 18px !important;
  line-height: 26px !important;
  letter-spacing: 0.01em !important;
  font-weight: 300 !important;
}

/* CTA Styling - Hero */
.hero__btn,
.product__submit__buttons button.btn--add-to-cart {
  font-size: 12px !important;
  line-height: 14px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  padding-top: 0;
  padding-bottom: 0;
  height: 54px;
  display: inline-flex;
  transition: var(--os-transition-medium) cubic-bezier(.215, .61, .355, 1);
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* .hero__btn:after {
  content: '';
  display: block;
  width: 6px;
  height: 10px;
  opacity: 0;
  transition: var(--os-transition-medium) cubic-bezier(.215,.61,.355,1);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMSIgdmlld0JveD0iMCAwIDYgMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjc1MDA3IDAuMDUwMjkzTDguMDA5OWUtMDUgMC43NjQ1NzlMNC40OTk5OCA1LjA1MDI1TDAgOS4zMzYwMUwwLjc0OTk5IDEwLjA1MDNMNiA1LjA1MDNMMC43NTAwNyAwLjA1MDI5M1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=")
}
.hero__btn:hover {
  padding-right: 20px;
  gap: 10px;
}
.hero__btn:hover:after {
  opacity: 1;
} */



/* CTA Styling - Primary */
.section-blog__btn,
#customer_login button,
#create_customer button,
#RecoverPasswordForm button[type="submit"],
.product__popdown__cart__wrapper a {
  font-size: 12px !important;
  line-height: 14px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  padding: 14px 24px 12px 24px;
  border: 1px solid var(--os-grey-750);
  background-color: var(--os-grey-750);
  color: #ffffff;
  display: inline-flex;
  transition: var(--os-transition-medium) cubic-bezier(.215, .61, .355, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: auto;
}

.section-blog__btn:after {
  content: '';
  display: block;
  width: 6px;
  height: 10px;
  opacity: 0;
  transition: var(--os-transition-medium) cubic-bezier(.215, .61, .355, 1);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMSIgdmlld0JveD0iMCAwIDYgMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjc1MDA3IDAuMDUwMjkzTDguMDA5OWUtMDUgMC43NjQ1NzlMNC40OTk5OCA1LjA1MDI1TDAgOS4zMzYwMUwwLjc0OTk5IDEwLjA1MDNMNiA1LjA1MDNMMC43NTAwNyAwLjA1MDI5M1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=")
}

.section-blog__btn:hover {
  border: 1px solid var(--os-grey-500);
  background-color: var(--os-grey-500);
  padding-right: 20px;
  gap: 10px;
}

.section-blog__btn:hover:after {
  opacity: 1;
}


/* CTA Styling - Secondary */
.article__item-content .text-link,
.index__column a:not(.link-over-image),
.btn--soft,
.brick__block__text__inner a.standard__cta {
  font-size: 12px !important;
  line-height: 14px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  padding: 14px 24px 12px 24px;
  border: 1px solid var(--os-grey-250);
  background-color: #FFFFFF;
  display: inline-flex;
  transition: var(--os-transition-medium) cubic-bezier(.215, .61, .355, 1);
}

.article__item-content .text-link:hover,
.index__column a:not(.link-over-image):hover,
.btn--soft:hover {
  background-color: var(--os-grey-250);
}

.article__item-content .text-link:after {
  display: none;
}

.product__price__main {
  gap: 4px;
}

.product__price {
  padding: 0;
}

.compare-at {
  margin-top: 0;
}

/* PDP product description (product__block__description block) - deliberately smaller/
   quieter than body-size-4 default: ~13px, same grey as .compare-at, measure-limited */
.product__block__description {
  font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
  line-height: var(--leading-relaxed);
  color: var(--text-light);
  text-align: left;
  max-width: 64ch;
}

.product__block__description p + p {
  margin-top: 0.75em;
}

.product__block__pickup p+p {
  color: var(--os-grey-500);
}

.drawer__content {
  max-width: 556px;
}

.drawer__close:hover .icon-close {
  transform: none;
}

.drawer__underlay .drawer__underlay__blur {
  display: none;
}

.drawer--visible .drawer__underlay .drawer__underlay__fill,
.is-open .drawer__underlay .drawer__underlay__fill,
.drawer__underlay.underlay--visible .drawer__underlay__fill {
  opacity: 0.3;
  background-color: var(--os-grey-900);
}


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

  .header__drawer .drawer__underlay,
  .drawer--right .drawer__underlay,
  .drawer__underlay__fill,
  .drawer__underlay__blur {
    display: unset !important;
  }
}


.selector-wrapper .radio__fieldset .radio__button label,
.product_size_variant_chip {
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio__fieldset .radio__button label {
  min-width: 50px;
}

.product_size_variant_chip {
  background: var(--os-grey-250);
  color: var(--os-grey-750);
}

.pickup_time {
  color: var(--os-grey-500);
}

.radio__inputs {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap;
}

.radio__fieldset .radio__button input:checked~label {
  color: var(--os-grey-750);
  background: var(--os-grey-250);
}

.radio__button .sold-out+label,
.radio__button .unavailable+label {
  color: var(--os-grey-500);
}

.radio__fieldset .radio__button label {
  border-color: var(--os-grey-250);
}

.radio__button .sold-out+label:before,
.radio__button .unavailable+label:before {
  background: var(--os-grey-250);
}

.swatch__button.sold-out a,
.swatch__button input.sold-out~label,
.swatch__button input.unavailable~label,
.swatch__button input:disabled~label,
.radio__button .sold-out+label,
.radio__button .unavailable+label {
  overflow: hidden;
}

.swatch__button.sold-out a:before,
.swatch__button input.sold-out~label:before,
.swatch__button input.unavailable~label:before,
.swatch__button input:disabled~label:before,
.radio__button .sold-out+label:before,
.radio__button .unavailable+label:before {
  top: -30%;
  width: 1px;
  height: 160%;
}

.pickup_marker {
  padding-top: 2px;
}

/*--- SECTION BLOG ---*/
.section-blog .kicker-flourished {
  text-align: left;
  margin-bottom: 8px;
}

.kicker-flourished:after {
  display: none;
}

.article__item-image {
  margin-bottom: 24px;
}

.article__item-content {
  padding-right: 32px;
}

.article__item-content .article__item-meta {
  margin: 0 0 8px;
}

.article__item-content .article__item-title {
  color: var(--os-grey-900);
}

.article__item-content .article__item-title,
.article__item-content .rte {
  margin: 0 0 24px;
}


/*--- SECTION - Text Column ---*/
.index__column .rte p {
  color: var(--os-grey-500);
}

.index__column .accent-title-large {
  margin-bottom: 12px;
}

.index__column .rte {
  margin-bottom: 24px;
}

.index__column>*:not(.column__image) {
  padding-right: 32px;
}

.column__image .play__button {
  justify-content: left;
  align-items: flex-end;
  padding: 24px;
}

.column__image .play__button .icon {
  width: 32px;
  height: 32px;
}


/*--- PRODUCT CARD ---*/
.product__grid__price,
.product__grid__price>* {
  color: var(--os-grey-500);
}

.product__grid__info a {
  color: var(--os-grey-750);
}



/*--- MEGAMENU ---*/
.grandparent .navlink--child {
  padding-bottom: 12px;
  border: 0;
}

.grandparent .navlink--grandchild {
  margin-top: 12px;
}


/*---BLOG---*/
.rte p img {
  margin-top: 3em;
  margin-bottom: 3em;
}

.blog__article header .blog__article--light {
  opacity: 1;
  color: var(--os-grey-500);
}


/*--- PLP ---*/
.sidebar__heading {
  padding-bottom: 10px;
}

@media only screen and (min-width: 1100px) {
  .collection__heading__text p {
    max-width: 50%;
    margin-left: 0;
  }

  .collection__heading__text p+p {
    max-width: 75%;
  }
}



/*--- PDP ---*/
.product__submit__buttons button.btn--add-to-cart {
  background: var(--os-grey-750);
  color: #FFFFFF;
}

.accordion__title:after {
  border-color: var(--os-grey-500);
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg);
}

.accordion__title.accordion-is-open:after {
  transform: rotate(-225deg);
}

h3.product-clip__title {
  color: var(--os-grey-750);
}

.product-clip__price {
  color: var(--os-grey-500);
}

.quickview+.quickview {
  margin-top: 30px;
}

.variant--soldout .product__submit__buttons button,
.variant--soldout .product__submit__buttons .product__submit__quick {
  display: none !important;
}

/* Redundant next to the "Notify Me When Available" trigger - hide the
   plain out-of-stock line once that trigger is showing. CSS-only, keyed
   to the same variant--soldout class the trigger itself is keyed to
   (product-buttons.liquid / os-product-form.js) - doesn't touch that
   class-toggle logic at all. */
.variant--soldout .variant__countdown--out {
  display: none;
}


/*--- Section Carousel ---*/
.section-carousel .kicker-flourished {
  padding-bottom: 0;
}


/*--- Flickity ---*/
.flickity-force-arrows-top [data-carousel] .flickity-button.previous,
.flickity-force-arrows-top.title-center [data-carousel] .flickity-button.previous,
.flickity-force-arrows-top [data-carousel].flickity-rtl .flickity-button.next,
.flickity-force-arrows-top.title-center [data-carousel] .flickity-rtl .flickity-button.next,
.wrapper--full [data-carousel] .flickity-button.previous,
.wrapper--full.title-center [data-carousel] .flickity-button.previous,
.wrapper--full [data-carousel].flickity-rtl .flickity-button.next,
.wrapper--full.title-center [data-carousel] .flickity-rtl .flickity-button.next,
.wrapper--full .grandparent .title-center.header__dropdown__wrapper [data-carousel] .flickity-rtl .flickity-button.next,
.wrapper--none [data-carousel] .flickity-button.previous,
.wrapper--none.title-center [data-carousel] .flickity-button.previous,
.wrapper--none [data-carousel].flickity-rtl .flickity-button.next,
.wrapper--none.title-center [data-carousel] .flickity-rtl .flickity-button.next {
  left: auto;
  right: calc((var(--gutter) / 2) + 46px);
}

[data-carousel] .flickity-button {
  background: var(--os-grey-50);
}

#RecoverPasswordForm p+form {
  margin-top: 20px;
}

input, select, .popout__toggle, textarea {
  padding: 14px 16px 12px;
  border-radius: 0;
}

.product__popdown__textbar {
  background: var(--os-grey-250);
}

.product__popdown__image-holder,
.product__popdown__image img,
.product__popdown__image--no-image div {
  border-radius: 0;
  height: auto;
}

@media only screen and (max-width: 767px) {
  .stack_on_mobile {
    display: flex;
    flex-direction: column !important;
  }

  .stack_on_mobile>* {
    width: calc(100% - var(--gutter)) !important;
  }
}

.wrapper .text__standard p {
  color: var(--os-grey-500);
}

.brick__block__text__inner .btn--long {
  min-width: auto;
}

/* QUICKIFY STYLING */
.tmenu_app .tmenu_nav .tmenu_item--root>.tmenu_item_link {
  color: var(--text);
}

body .tmenu_submenu_type_mega {
  padding-top: var(--gutter) !important;
  padding-bottom: var(--gutter) !important;
  padding-left: var(--outer) !important;
  padding-right: var(--outer) !important;
}

body .tmenu_col.tmenu_submenu_tab_control {
  padding-left: var(--outer) !important;
  padding-right: var(--outer) !important;
}

.tmenu_navbar .tmenu_item--root>.tmenu_item_link {
  height: 73px !important;
}

body .tmenu_item--root>.tmenu_submenu {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-top: 1px solid var(--os-grey-250);
}

body .tmenu_submenu_tab_control .tmenu_submenu_tab_active {
  background: var(--os-grey-50) !important;
}

body .tmenu_item--root .tmenu_item_display_header>.tmenu_item_link {
  border: 0;
}

body .tmenu_item_level_2.tmenu_item_display_header .tmenu_item_link {
  margin-top: 30px !important;
}

body .tmenu_item_level_2.tmenu_item_display_header .tmenu_item_link .tmenu_item_text {
  color: var(--os-grey-750) !important;
}

body li:not(.tmenu_item_mobile) .tmenu_submenu .tmenu_item_link,
body li:not(.tmenu_item_mobile) .tmenu_submenu .tmenu_custom_content,
body li:not(.tmenu_item_mobile) .tmenu_submenu .tmenu_contact_title {
  color: var(--os-grey-750) !important;
}

body .tmenu_col.tmenu_submenu_tab_control :not(.tmenu_submenu_tab_active) a.tmenu_item_link {
  color: var(--os-grey-500) !important;
}

body .tmenu_item_mobile.tmenu_item_active>.tmenu_item_link,
body .tmenu_item_mobile .tmenu_item_active>.tmenu_item_link {
  background: transparent !important;
}

body .tmenu_item_mobile .tmenu_submenu {
  padding-left: 0 !important;
}


.tmenu_item_mobile .tmenu_item_link {
  padding: 17px 15px !important;
  border-bottom: 1px solid var(--os-grey-250);
}

.drawer__search {
  border-bottom: 1px solid var(--os-grey-250);
}

.tmenu_item_mobile .tmenu_item_level_1 .tmenu_item_link {
  padding: 17px 25px !important;
}

.tmenu_item_active.tmenu_item_mobile>.tmenu_submenu {
  padding-bottom: 40px !important;
  border-bottom: 1px solid var(--os-grey-250) !important;
}

.tmenu_item_active.tmenu_item_mobile>.tmenu_submenu .tmenu_item_active .tmenu_submenu {
  padding-top: 10px !important;
}

.tmenu_item_mobile .tmenu_item_level_2 .tmenu_item_link {
  padding: 9px 25px !important;
  border-bottom: none;
}

.tmenu_item_mobile .tmenu_indicator {
  right: 10px !important;
  width: 40px !important;
  height: 40px !important;
}

.drawer__search .search__predictive__button {
  right: 6px !important;
}

.tmenu_item_mobile .tmenu_indicator_icon svg,
.tmenu_item_mobile .tmenu_indicator_icon svg path {
  fill: var(--os-grey-500) !important;
}

body .tmenu_app--horizontal .tmenu_item--root>.tmenu_item_link .tmenu_indicator,
body .tmenu_submenu_tab_position_bottom .tmenu_submenu_tab_control .tmenu_indicator,
body .tmenu_submenu_tab_position_top .tmenu_submenu_tab_control .tmenu_indicator {
  margin-bottom: 3px !important;
}

/****************************************
Klaviyo Form
****************************************/

div:has(div[aria-label="FLYOUT Form"]) {
  z-index: 1000000 !important;
  width: 500px !important;
  position: relative;
}

/* @media (max-width: 767px) {
  div[aria-label="FLYOUT Form"] {
    width: 100% !important;
  }
} */

div:has(div[aria-label="FLYOUT Form"]):before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--klaviyo-form-overlay);
  opacity: 0.75;
  z-index: 0;
}

div div:has(div[aria-label="FLYOUT Form"]):before {
  display: none;
}

div[aria-label="FLYOUT Form"] button.klaviyo-close-form svg {
  display: none;
}

div[aria-label="FLYOUT Form"] button.klaviyo-close-form {
  height: 25px !important;
  width: 25px !important;
  margin-right: 15px !important;
  margin-top: 15px !important;
}

div[aria-label="FLYOUT Form"] button.klaviyo-close-form::before,
div[aria-label="FLYOUT Form"] button.klaviyo-close-form::after {
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  background: #FFFFFF !important;
  border-radius: 9999px;
  position: absolute;
  bottom: 0;
  left: 10px;
  pointer-events: none;
}

div[aria-label="FLYOUT Form"] button.klaviyo-close-form::after {
  transform: rotate(45deg);
}

div[aria-label="FLYOUT Form"] button.klaviyo-close-form::before {
  transform: rotate(-45deg);
}


div[aria-label="FLYOUT Form"] form.klaviyo-form {
  width: 100%;
  max-width: 450px !important;
  justify-content: center;
  padding: 0 !important;
  flex-direction: column !important;
  background: var(--klaviyo-form-background);
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child {
  width: 450px !important;
  height: 400px !important;
  margin: 0 !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>*:nth-child(2) {
  padding: 50px !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  width: auto !important;
  ;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>*:nth-child(2)>* {
  grid-column: span 2;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>*:nth-child(2)>* {
  grid-column: span 2;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>*:nth-child(2)>*:nth-child(3),
div[aria-label="FLYOUT Form"] form.klaviyo-form>*:nth-child(2)>*:nth-child(4) {
  grid-column: span 1;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>*:nth-child(2)>*:last-child {
  padding-top: 50px;
}

/* div[aria-label="FLYOUT Form"] form.klaviyo-form>*>*:first-child>* {
  max-width: 400px;
} */



div[aria-label="FLYOUT Form"] form.klaviyo-form>*,
div[aria-label="FLYOUT Form"] form.klaviyo-form>* span:not([role="alert"]),
div[aria-label="FLYOUT Form"] form.klaviyo-form>* input,
div[aria-label="FLYOUT Form"] form.klaviyo-form>* textarea,
div[aria-label="FLYOUT Form"] form.klaviyo-form>* ::placeholder,
div[aria-label="FLYOUT Form"] form.klaviyo-form>* label *,
div[aria-label="FLYOUT Form"] form.klaviyo-form button {
  font-family: var(--FONT-STACK-BODY) !important;
  line-height: 1.65 !important;
  color: var(--klaviyo-form-text) !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>* ::placeholder,
div[aria-label="FLYOUT Form"] form.klaviyo-form>* span a {
  color: var(--klaviyo-form-text) !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form p,
div[aria-label="FLYOUT Form"] form.klaviyo-form .p1 {
  margin-bottom: 20px !important;
}

div[aria-label="FLYOUT Form"] div[role="group"] {
  margin-top: 20px !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>* input:not([type="checkbox"]),
div[aria-label="FLYOUT Form"] form.klaviyo-form>* textarea {
  -webkit-appearance: none !important;
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 0 !important;
  border: 1px solid var(--klaviyo-form-field) !important;
  width: 100% !important;
  line-height: normal !important;
  resize: none !important;
  transition: border-color .1s ease-in-out !important;
  background: var(--klaviyo-form-field) !important;
  box-shadow: none !important;
  margin-top: 10px !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>* input:focus {
  border-color: var(--text-color-25) !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>* input+label svg {
  stroke: var(--klaviyo-form-field) !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form *:focus {
  box-shadow: none !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form label {
  padding-bottom: 0 !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form button {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 12px !important;
  padding-bottom: 13px !important;
  line-height: 1 !important;
  color: var(--klaviyo-form-background) !important;
  font-weight: normal !important;
}

div[aria-label="FLYOUT Form"] form.klaviyo-form>* input+label svg rect {
  fill: var(--klaviyo-form-field) !important;
}

@media screen and (max-width: 767px) {
  div[aria-label="FLYOUT Form"] div div:has(div[aria-label="FLYOUT Form"]) {
    transform: scale(1) translateX(-50%) !important;
    width: 100% !important;
  }

  div:has(div[aria-label="FLYOUT Form"]) {
    width: auto !important;
  }

  div[aria-label="FLYOUT Form"] button.klaviyo-close-form::before,
  div[aria-label="FLYOUT Form"] button.klaviyo-close-form::after {
    background: var(--klaviyo-form-text) !important;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:nth-child(2) {
    display: none !important;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child {
    padding: 30px 25px 20px !important;
    display: grid !important;
    grid-template-columns: 1fr auto;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>* {
    grid-column: span 2;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>*:nth-child(3),
  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>*:nth-child(4) {
    grid-column: span 1;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>*:last-child {
    padding-top: 25px;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*>*:first-child>* {
    max-width: 400px;
  }

  div[aria-label="FLYOUT Form"] button.klaviyo-close-form::before,
  div[aria-label="FLYOUT Form"] button.klaviyo-close-form::after {
    background: var(--klaviyo-form-text);
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form p,
  div[aria-label="FLYOUT Form"] form.klaviyo-form .p1 {
    margin-bottom: 15px !important;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>*:first-child p span,
  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>*:first-child .p1 span {
    font-size: 13px !important;
    line-height: 19px !important;
  }

  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>*:first-child p:first-of-type span,
  div[aria-label="FLYOUT Form"] form.klaviyo-form>*:first-child>*:first-child .p1:first-of-type span {
    font-size: 22px !important;
    line-height: 26px !important;
  }
}

product-combined-listing {
  display: block;
}

.product-combination-card {
  margin-bottom: 48px;
  gap: 16px;
}

.product-combination-card__media {
  background: var(--bg);
  display: block;
  position: relative;
  inset: 0;
  width: calc(40% - 8px);
  height: 100%;
}

.product-combination-card__info {
  width: calc(60% - 8px);
}

.product-combination-card__info h2 {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.18px;
  margin-bottom: 4px;
}

.product-combination-card__info p {
  font-size: 13px;
}

.product-combination-card__actions {
  width: 100%;
}

.product-combination-card__actions form {
  margin: 0;
}

.product-combination-card__actions .klaviyo-product-container {
  position: relative !important;
  height: 54px;
}

.product-combination-card__actions .klaviyo-product-container.hidden-bis {
  display: none;
}

.product-combination-card__actions .klaviyo-product-container:not(.hidden-bis) .klaviyo-button-container {
  left: 0 !important;
  right: 0 !important;
  opacity: 1 !important;
  height: 54px;
  top: unset;
  width: 100% !important;
  margin: 0 !important;
}

.product-combination-card__actions form .klaviyo_button {
  display: inline;
  position: unset;
  float: none;
  visibility: hidden;
}

.product-combination-card__actions .klaviyo-button-container a.btn.klaviyo-bis-trigger {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-combination-card__variants .radio__inputs {
  gap: 4px !important;
}

.product-combination-card__variants .radio__button label {
  border: 1px solid var(--os-grey-250);
  width: 50px;
  height: 40px;
  align-items: center;
  font-size: 10px !important;
  line-height: normal !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  display: flex;
  position: relative;
}

.product-combination-card__variants .radio__button input:checked~label {
  color: var(--os-grey-750);
  background: var(--os-grey-250);
}

.product-combination-card__variants .radio__button:hover label {
  color: var(--text-dark);
  background-color: var(--hairline);
  border: 1px solid var(--border);
}

.product-combined-listing__wrapper details {
  margin-bottom: 48px;
}

.product-combined-listing__wrapper summary {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
  font-size: 10px;
}

.product-combined-listing__wrapper summary:after {
  border-color: var(--os-grey-500);
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  right: 5px;
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-style: solid;
  margin: -4px 0 0;
  vertical-align: middle;
  transform-origin: 50% 50%;
  transition: all 0.4s;
}

.product-combined-listing__wrapper details[open] summary:after {
  transform: rotate(-225deg);
}

product-combined-listing-availability {
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.listing-availability-product-title {
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 500;
}

.listing-availability-api-content .pickup__info__text {
  display: none;
}

@media screen and (min-width: 769px) {
  .product-combination-card {
    gap: 20px;
  }

  .product-combination-card__info {
    width: calc(50% - 10px);
  }

  .product-combination-card__media {
    width: calc(50% - 10px);
  }
}

.js-grid[data-grid-small-gutters] {
  display: grid;
  -moz-column-gap: calc(var(--gutter) / 2);
  column-gap: calc(var(--gutter) / 2);
  row-gap: var(--gutter);
}

[data-grid][data-grid-small-gutters]:not([data-grid-no-gutters]) [data-item] {
  padding: 0 calc(var(--gutter) / 4);
}

[data-carousel][data-grid-small-gutters] .flickity-button.next, [data-carousel].flickity-rtl .flickity-button.previous {
  right: -50px;
}

[data-carousel][data-grid-small-gutters] .flickity-button.previous, [data-carousel].flickity-rtl .flickity-button.next {
  left: -50px;
}

.pickup__address {
  padding-left: 0;
  border-left: none;
}

.btn--primary .svg-loader circle~circle {
  stroke: #fff;
}

.btn--primary .btn-state-complete {
  border-left-color: #fff;
  border-bottom-color: #fff;
}

.os-mt-3 {
  margin-top: 12px;
}

.os-mt-4 {
  margin-top: 16px;
}

.custom-scrollbar {
  background-color: var(--COLOR-A5);
}

/* Restored (James, regression fix): dropped in the Pipeline 8 rebuild --
   see snippets/product-grid-item-variant.liquid for the matching Liquid
   fix. font-size/line-height below were also missing here, restored to
   match the original oliverspencer-theme (7.6.0) exactly. Position kept
   at the original's top-right (James: a same-day left-placement trial
   was reverted, back to matching 7.6.0 exactly, including position). */
.product__badge--sale {
  border-radius: 2.5rem;
  z-index: 20;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--font-2);
  line-height: 18px;
  top: 10px;
  right: 10px;
}

/* Currency selector typography */
popout-select .popout__toggle {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Chevron follows toggle text colour */
popout-select .popout__toggle svg {
  stroke: currentColor !important;
}

/* Dropdown panel stays dark on white */
popout-select .popout-list {
  color: #222 !important;
  background: #fff !important;
}

/* Dropdown options stay dark - excludes .os-flag (and everything inside
   it): the universal-selector !important fill was overriding every
   individual flag path's own colour, since CSS fill always wins over an
   SVG's own fill="" presentation attribute. */
popout-select .popout-list .popout-list__option,
popout-select .popout-list .popout-list__option *:not(.os-flag, .os-flag *) {
  color: #222 !important;
  fill: #222 !important;
}

/* =========================================================
CIRCULAR-FLAG COUNTRY/CURRENCY SELECTOR (OS CUSTOM)
snippets/select-currency.liquid (country branch) + assets/os-flag-select.js.
!important carried over from the rest of this section - it's already
fighting the same popout-select !important rules above and in theme.css.

Tunable: --os-flag-gloss-opacity is the one dial for the trigger's glass
sheen (default 0.3 - a whisper of sheen, not a glossy dome; 1 = full
strength, 0 = fully flat/clean, no gloss at all) - dropdown rows use
their own fixed, much lighter value instead (see
.os-flag-options__option .os-flag::before), so 250 rows of gloss never
fight legibility.
========================================================= */

:root {
  --os-flag-gloss-opacity: 0.3;
}

/* The circular flag itself - full-bleed (the flag image IS the circle
   edge: no ring, no padding/gap) - shared base for trigger, every
   dropdown row, and the footer's expanded trigger (same markup, so the
   same fix covers all three). position:relative anchors the gloss
   ::before below AND is what the svg's absolute centring (below) is
   positioned against. */
.os-flag {
  display: inline-flex;
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
/* Root cause of flags not filling the circle: the sprite's <symbol>s are
   4:3 (viewBox="0 0 640 480"). preserveAspectRatio set on the outer
   <svg> (previously in the markup) does NOT reach content pulled in via
   <use href="#symbol-id">, since a <symbol> establishes its own nested
   viewport with its own default "xMidYMid meet" - so every 4:3 flag was
   letterboxing inside this 1:1 circle, leaving transparent gaps top/
   bottom that showed the panel through. Fixed with CSS cover instead,
   robust for every flag's aspect ratio (near-square ones included):
   height:100%, width:auto (so a wide/landscape flag overflows
   horizontally rather than being squeezed to fit), centred via
   position:absolute + transform, clipped by the circle's own
   overflow:hidden above. z-index:1 is required now that this is
   position:absolute rather than static: without it, being a real DOM
   child (later in tree order than the ::before gloss below) would let
   it paint OVER the gloss instead of under it, hiding the sheen. */
.os-flag svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  margin: 0 !important;
  display: block;
}

/* Trigger variant - smaller than the base/row size, sized to read as
   ~16px optical against the account/search/bag icons either side of it
   (17px glyphs, .navlink svg - "Header icon sizing" below; a filled
   circle needs to sit a touch under a line icon's own pixel size to
   read as the same optical weight). Deliberately NO box-shadow: an
   outer drop shadow read as a shiny floating sticker next to those flat
   matte glyphs - the flag needs to sit flush on the same plane as them,
   not appear elevated. The gloss is carried entirely by the ::before
   sheen below, so --os-flag-gloss-opacity: 0 is genuinely a fully flat,
   clean flag - no other shading left to disable. */
.os-flag--trigger {
  width: 16px;
  height: 16px;
}
.os-flag--trigger::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.28) 35%, rgba(255, 255, 255, 0) 65%);
  mix-blend-mode: soft-light;
  opacity: var(--os-flag-gloss-opacity);
  pointer-events: none;
}

/* Dropdown rows - full-bleed like the trigger, but only a hint of the
   same sheen (fixed, not the tunable trigger variable) so ~250 rows of
   gloss never compete with legibility. */
.os-flag-options__option .os-flag::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
  opacity: 0.3;
  pointer-events: none;
}

/* Trigger: flag (+ name/code when expanded - footer), no chevron. */
.popout__toggle--flag {
  gap: 10px !important;
  align-items: center !important;
}
/* Stock rotates the toggle's (only) svg 180deg open<->closed - with the
   chevron gone, that svg is now the flag itself, so cancel it here
   explicitly rather than let the flag spin on open. Re-declares the
   flag's own translate(-50%,-50%) centring transform (.os-flag svg
   above) rather than `none` - that transform is now load-bearing (it's
   what centres the cover-cropped flag inside the circle), so `none`
   would have both cancelled the unwanted rotation AND knocked the flag
   off-centre the moment the dropdown opens. */
.popout__toggle--flag[aria-expanded=true] .os-flag svg {
  transform: translate(-50%, -50%) !important;
}
.os-flag-trigger__code {
  color: var(--text-light) !important;
}

/* Quiet hairline box, not stock's heavy default and not an underline
   either - stock's input[type=text] rule (theme.css) is an
   attribute+type selector, which out-specifies a single class, so it
   was winning on every unset/overridden property here (a 1em bottom
   margin, near-black var(--text-dark) text colour). !important matches
   this file's established pattern for beating that same class of stock
   rule elsewhere in this section.
   font-size is a fixed value, not the --font-3 type scale: iOS Safari
   zooms the page on focusing any input under 16px, which is what was
   making the modal jump/zoom on open even before autofocus (markup,
   os-country-modal.liquid) was removed - 16px is a hard technical floor
   here, not a design choice, so it doesn't follow the scale.
   Declared as 17px, not 16px: with 16px declared and !important, this
   was still measuring ~15.3px computed on device (confirmed - no
   competing rule found anywhere in theme.css/os-theme.css: checked
   specificity, load order [os-theme.css loads after theme.css, so ties
   favour this rule], every other .os-flag-search__input declaration,
   and html's own font-size, which is only ever used as a REM baseline
   for padding elsewhere, never inherited into this literal-px value).
   Since the actual mechanism producing that ~4.4% shortfall couldn't be
   pinned down via static review, 17px gives enough headroom
   (17 * ~0.956 =~ 16.25px) to keep the computed size at/above the 16px
   iOS threshold regardless of its cause - a safety margin, not a
   targeted fix. Revisit if a live inspector session ever reveals the
   actual culprit.
   -webkit-text-size-adjust: 100% is the standard companion to a 16px+
   floor - stops iOS/Safari's own text-inflation heuristics from
   independently rescaling the rendered size regardless of the declared
   font-size. */
.os-flag-search__input {
  display: block;
  width: 100%;
  margin: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  font-size: 17px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  line-height: 1.3 !important;
  color: var(--text) !important;
  background: var(--bg) !important;
}
/* Placeholder text is smaller than the input's own 16px - that 16px is
   a hard technical floor (see above, iOS zoom prevention) that only
   needs to hold for what the input actually becomes on focus/typing;
   the placeholder itself is free to read at a quieter, smaller size. */
.os-flag-search__input::placeholder {
  color: var(--text-light) !important;
  font-size: 14px !important;
}
.os-flag-search__input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--text) !important;
}

/* A touch of breathing room before the first row and after the last -
   rows no longer butt straight up against the search divider/panel
   edge. */
.os-flag-options {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

/* Pinned-GB / A-Z divider (hidden during an active search - see
   os-flag-select.js's filterOptions). */
.os-flag-options__divider {
  height: 1px;
  margin: 4px 15px;
  padding: 0 !important;
  background: var(--border);
}

/* Row layout: flag left, name, currency code muted/right. Padding
   overrides stock's tighter default (.popout-list__option, theme.css)
   for a more comfortable tap/hover height - editorial rhythm, not
   cramped. Gap opened up a touch too (flag-to-name is the pairing that
   read tightest). */
.os-flag-options__option {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 12px 15px !important;
}
/* No truncation in the modal (roomy rows, full country names) - the old
   dropdown's ellipsis/nowrap made sense at 300px wide, not at the
   modal's much roomier width. */
.os-flag-options__name {
  flex: 1 1 auto;
  min-width: 0;
}
.os-flag-options__code {
  flex: none;
  color: var(--text-light) !important;
}

/* The "current/selected" state - a light background tint (var(--hairline),
   the same subtle 5%-tint token .popout-list__option:hover already uses)
   is the ONLY treatment, so a clicked-but-not-yet-confirmed selection
   reads unambiguously against ~250 other rows without doubling up as a
   highlight-plus-underline (two lines' worth of visual weight for one
   state). theme.css's own underline (targets every span inside the
   option) is explicitly cancelled - with three spans now (flag/name/
   code) instead of one, it would otherwise draw a broken line across
   the flag circle too. */
.os-flag-options__item.popout-list__item--current .popout-list__option span {
  border-bottom: none !important;
}
.os-flag-options__item.popout-list__item--current .os-flag-options__option {
  background-color: var(--hairline);
}

/* =========================================================
COUNTRY/CURRENCY SWITCHER MODAL (OS CUSTOM)
snippets/os-country-modal.liquid, a native <dialog> opened via
assets/os-flag-select.js. Reuses the row/flag/search-input rules above
(.os-flag*, .os-flag-options*, .os-flag-search__input) unchanged - only
the modal shell itself (overlay, dialog box, heading, label, Continue
button, reassurance strip) is new.

Deliberately minimal positioning CSS: showModal() centres and stacks
the dialog natively (top-layer rendering, above everything - no z-index
needed), so this only overrides sizing/spacing/colour to match the OS
register (sharp corners, charcoal/muted-grey, generous whitespace).

The <dialog> element itself (.os-country-modal) stays a bare, unpadded,
transparent sizing shell - all visual padding/background/internal layout
lives on .os-country-modal__inner instead (markup: os-country-modal.liquid).
That split is what makes the overlay-click-to-close detection in
os-flag-select.js correct (event.target === dialog): if the <dialog>
itself carried padding/background, a click landing in that padding -
inside the visible white box, near its edges - would ALSO read as
target===dialog and incorrectly close the modal.
========================================================= */

.os-country-modal {
  box-sizing: border-box;
  border: none;
  padding: 0;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  background: transparent;
  color: var(--text);
}
.os-country-modal::backdrop {
  background: rgba(45, 45, 44, 0.4);
}

/* Safari fix (macOS + iOS): no height:100% here at desktop widths. The
   <dialog> (.os-country-modal) only has max-height, never a definite
   height - Chrome resolves this inner element's height:100% + the
   nested flex:1 1 auto/min-height:0 chain against that indefinite
   ancestor anyway, Safari does not, and the box collapses with content
   overflowing outside it. Letting .os-country-modal__inner size to its
   own content instead (no height here) sidesteps the indefinite-height
   percentage resolution entirely - .os-country-modal__options' own
   max-height:40vh + overflow-y:auto (a viewport unit, not a percentage
   of an ancestor) is what caps and scrolls the list, independent of
   this element's height. height:100% comes back at mobile widths
   (below), where the dialog itself is height:100% (a definite height,
   window-relative) - only the desktop/indefinite-height case is
   affected by this Safari behaviour. */
.os-country-modal__inner {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-height: inherit;
  padding: 40px;
  background: var(--bg);
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.os-country-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px;
  line-height: 0;
  color: var(--text);
}
.os-country-modal__close .icon-theme {
  width: 16px;
  height: 16px;
}

.os-country-modal__header {
  display: flex;
  align-items: center;
  flex: none;
  gap: 16px;
  margin: 0 40px 28px 0;
}
.os-country-modal__flag {
  width: 44px;
  height: 44px;
}
.os-country-modal__heading {
  margin: 0;
  color: var(--text);
  font-size: calc(var(--font-5) * var(--FONT-ADJUST-HEADING));
  font-weight: var(--FONT-WEIGHT-HEADING);
  line-height: var(--leading-tight);
}

.os-country-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.os-country-modal__label {
  display: block;
  flex: none;
  margin: 0 0 8px;
  color: var(--text-light);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.os-country-modal__search-wrap {
  flex: none;
  margin-bottom: 4px;
}

/* The scrollable middle - everything else in the dialog (heading,
   search, Continue, reassurance strip) stays fixed in view. No
   flex:1 1 auto/min-height:0 here - with .os-country-modal__inner no
   longer stretched to an indefinite parent's height, there's no extra
   flex space to grow into at desktop widths; max-height:40vh (a
   viewport unit, self-contained regardless of ancestor height) plus
   overflow-y:auto is the only sizing this needs. See
   .os-country-modal__inner's comment for the Safari root cause. */
.os-country-modal__options {
  flex: none;
  max-height: 40vh;
  overflow-y: auto;
  margin: 0 0 24px;
}

.os-country-modal__continue {
  display: block;
  flex: none;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 0;
  background: var(--text);
  color: var(--bg);
  font-family: var(--FONT-STACK-ACCENT);
  font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.os-country-modal__continue:hover {
  opacity: 0.85;
}

/* International reassurance strip - quiet and secondary, no icons/
   badges, muted grey throughout. Policy-accurate copy lives in
   locales/en.default.json (layout.footer.reassurance_*) - do not add
   claims here (free returns/shipping, "duties included") that aren't
   already in those translation strings. */
.os-country-modal__reassurance {
  list-style: none;
  flex: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.os-country-modal__reassurance li {
  color: var(--text-light);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  line-height: var(--leading-normal);
}

@media (max-width: 767px) {
  .os-country-modal {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
  .os-country-modal__inner {
    height: 100%;
    padding: 24px;
  }
  .os-country-modal__options {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* Header icon sizing + alignment. Deliberately NO position:relative/top
   offset - .header__desktop__button .navlink (theme.css) already
   flex-centres its icon (display:flex; align-items:center); a manual
   negative top nudge here was fighting that centring rather than aiding
   it, and on the LAST icon specifically (the cart link -
   .header__desktop__bar__r .header__desktop__button:last-child > a,
   theme.css, has its own overflow:hidden to clip the hover-dot
   pseudo-element's bleed past the header edge) it pushed the icon's top
   edge outside that overflow:hidden box, clipping it. Flex centring
   alone is the robust fix - it keeps every icon inside its own box by
   construction, so nothing to clip regardless of which one happens to
   sit inside an overflow:hidden ancestor. */
.navlink svg {
  font-size: 17px;
}

/* Refine header icon stroke weight */
.navlink .icon-theme {
  stroke-width: 1.7px !important;
}

/* Cart icon filled state follows header colour */
[data-header-cart-full=true] .icon-cart-full {
  fill: currentColor !important;
}

/* =========================
   Journal: listing filters
   ========================= */

.blog__tag {
  font-size: 10px !important;
  line-height: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
  color: #6f6f6c !important;
  background: transparent !important;
  border: 1px solid #d8d6d2 !important;
  padding: 14px 18px 13px !important;
  margin: 0 12px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 92px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.blog__tag:hover {
  color: #2d2d2c !important;
  border-color: #bdb9b2 !important;
  background: #faf9f7 !important;
}

.blog__tag.blog__tag--active {
  background: #6d7555 !important;
  border-color: #6d7555 !important;
  color: #ffffff !important;
}

/* =========================
   Journal: article layout
   ========================= */

.blog__article {
  padding: 0 50px;
  max-width: 760px;
  border: 0;
  box-shadow: none;
}

.blog__article:first-child {
  padding-top: 50px;
}

/* Template article title */
.blog__article__title {
  color: #2d2d2c !important;
  margin: 0 0 18px !important;
}

/* Hide duplicate H1 added in rich text body */
.blog__article__content h1 {
  display: none !important;
}

.blog__article-products + p {
  font-size: 12px !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
}

/* Body copy */
.blog__article__content p {
  font-size: 12px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: #2d2d2c !important;
  margin: 0 0 16px !important;
  max-width: 640px;
}

/* Main section headings — size/weight now come from the global .rte h2
   rule at the top of this file; color/margin/max-width kept. */
.blog__article__content h2 {
  color: #2d2d2c !important;
  margin: 52px 0 14px !important;
  max-width: 640px;
}

/* Question / primary subheading — size/weight now come from the
   global .rte h3 rule at the top of this file; color/margin/max-width
   kept. */
.blog__article__content h3 {
  color: #2d2d2c !important;
  margin: 26px 0 8px !important;
  max-width: 640px;
}
@media only screen and (max-width: 767px) {
  body .blog__article__content.rte h3 {
    margin-bottom: 18px !important;
  }
}

/* Secondary subheading */
.blog__article__content h4 {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #2d2d2c !important;
  margin: 22px 0 8px !important;
  max-width: 640px;
}

/* Small label */
.blog__article__content h5 {
  font-size: 10px !important;
  line-height: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6f6f6c !important;
  margin: 26px 0 8px !important;
  max-width: 640px;
}

/* Caption / note */
.blog__article__content h6 {
  font-size: 11px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #8a8a87 !important;
  margin: -16px 0 24px !important;
  max-width: 640px;
}

/* Images */
.blog__article__content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 40px auto;
}

/* Links */
.blog__article__content a {
  color: #2d2d2c !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  font-weight: 400 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  transition: none !important;
}

.blog__article__content a:hover {
  color: #2d2d2c !important;
  text-decoration-thickness: 1px !important;
  background: transparent !important;
}

.blog__article__content a.cta-link {
  color: #2d2d2c !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  transition: none !important;
}

.blog__article__content a.cta-link:hover {
  color: #2d2d2c !important;
  background: transparent !important;
}

/* Lists */
.blog__article__content ul,
.blog__article__content ol {
  margin: 0 0 20px 20px;
  padding: 0;
  max-width: 640px;
}

.blog__article__content li {
  font-size: 12px !important;
  line-height: 1.65 !important;
  margin-bottom: 6px;
  color: #2d2d2c !important;
}

/* Blockquote */
.blog__article__content blockquote {
  margin: 28px 0;
  padding-left: 18px;
  border-left: 1px solid #d8d6d2;
  max-width: 640px;
}

.blog__article__content blockquote p {
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  margin: 0;
}

/* Journal: two image layout */
.journal-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 32px 0;
}

.journal-image-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile: stack */
@media only screen and (max-width: 767px) {
  .journal-image-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
/* Standfirst: ONLY the first article block on the page */
.blog__article:first-of-type .blog__article__content.rte > p:first-of-type {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #2d2d2c !important;
  margin-bottom: 18px !important;
}

/* Reset first paragraphs in later article blocks */
.blog__article:not(:first-of-type) .blog__article__content.rte > p:first-of-type {
  font-size: 12px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: #2d2d2c !important;
  margin: 0 0 16px !important;
  max-width: 640px !important;
}

@media only screen and (max-width: 767px) {
  .blog__article:first-of-type .blog__article__content.rte > p:first-of-type {
    font-size: 15px !important;
    line-height: 1.55 !important;
    max-width: none !important;
    margin-bottom: 24px !important;
  }

  .blog__article:not(:first-of-type) .blog__article__content.rte > p:first-of-type {
    font-size: 12px !important;
    line-height: 1.65 !important;
    margin: 0 0 16px !important;
    max-width: none !important;
  }
}

/* =========================
   Journal: product rows
   ========================= */

.blog__article-products {
  padding: 24px 0 40px !important;
}

/* Base cell behaviour */
.blog__article-products .slide-item,
.blog__article-products .flickity-cell {
  transition: width 0.2s ease;
}

/* Improve spacing between items */
.blog__article-products .flickity-slider {
  display: flex !important;
  gap: 24px;
}

/* Remove arrows + scrollbar when not needed */
.blog__article-products .flickity-button.hide {
  display: none !important;
}

.blog__article-products .custom-scrollbar {
  display: none !important;
}

/* =========================
   Scaling based on count
   ========================= */

/* 1 product */
.blog__article-products:has(.slide-item:first-child:last-child) .slide-item,
.blog__article-products:has(.flickity-cell:first-child:last-child) .flickity-cell {
  width: 100% !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2 products */
.blog__article-products:has(.slide-item:nth-child(2):last-child) .slide-item,
.blog__article-products:has(.flickity-cell:nth-child(2):last-child) .flickity-cell {
  width: 50% !important;
  max-width: 320px !important;
}

/* 3 products */
.blog__article-products:has(.slide-item:nth-child(3):last-child) .slide-item,
.blog__article-products:has(.flickity-cell:nth-child(3):last-child) .flickity-cell {
  width: 33.333% !important;
  max-width: 260px !important;
}

/* =========================
   Mobile
   ========================= */

@media only screen and (max-width: 767px) {
  .blog__article-products .flickity-slider {
    gap: 16px;
  }

  .blog__article-products .slide-item,
  .blog__article-products .flickity-cell {
    width: calc(50% - 8px) !important;
    max-width: none !important;
  }

  /* Single product on mobile */
  .blog__article-products:has(.slide-item:first-child:last-child) .slide-item,
  .blog__article-products:has(.flickity-cell:first-child:last-child) .flickity-cell {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================
   Journal: sidebar
   ========================= */

.blog__sidebar__title {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: #2d2d2c !important;
  margin-bottom: 14px !important;
}

.blog__rss {
  display: none !important;
}

.blog__sidebar .article__item {
  margin-bottom: 28px;
}

.blog__sidebar .article__item-image {
  margin-bottom: 10px;
}

.blog__sidebar .article__item-meta {
  margin-bottom: 4px;
}

.blog__sidebar .article__item-date {
  color: #8a8a88 !important;
}

.blog__sidebar .article__item-title {
  margin-bottom: 0 !important;
}

.blog__sidebar .article__item-title a {
  color: #2d2d2c !important;
  text-decoration: none !important;
}

/* Keep excerpt + read more in sidebar */
.blog__sidebar .rte {
  display: block !important;
}

.blog__sidebar .rte p {
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: #4a4a48 !important;
  margin: 6px 0 8px !important;
  max-width: none !important;
}

/* Sidebar "Read more" */
.blog__sidebar .article__item-content .text-link-bare,
.blog__sidebar .article__item-content a.text-link-bare {
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #2d2d2c !important;

  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;

  letter-spacing: normal !important;
  text-transform: none !important;

  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-width: auto !important;
  box-shadow: none !important;
}

.blog__sidebar .article__item-content .text-link-bare::after,
.blog__sidebar .article__item-content a.text-link-bare::after {
  display: none !important;
  content: none !important;
}

.blog__sidebar .article__item-content .text-link-bare:hover,
.blog__sidebar .article__item-content a.text-link-bare:hover {
  color: #2d2d2c !important;
  text-decoration-thickness: 1px !important;
}

/* =========================
   Journal: mobile
   ========================= */

@media only screen and (max-width: 479px) {
  .blog__article {
    padding: 0 20px;
  }

  .blog__article:first-child {
    padding-top: 20px;
  }

  .blog__article__content h2 {
    margin: 38px 0 12px !important;
  }

  .blog__article__content img {
    margin: 24px auto;
  }

  .blog__article-products [data-carousel]:has(.flickity-button.previous.hide):has(.flickity-button.next.hide) .slide-item {
    max-width: 45% !important;
  }
}
/* =========================
   OS collection header (sections/os-collection-header.liquid)
   50/50 desktop, stacked mobile. Shared, settings-driven component --
   keep this brand-neutral (uses --text/--text-light/--border/--bg like
   the rest of the theme's shared components, e.g. os-country-modal)
   rather than OS-specific values, so Favourbrook can reuse it as-is.
   ========================= */

/* display:flex unconditionally, not just at mobile -- .float-grid (the
   theme's own grid class, also used here for its large-up--one-half/
   one-whole WIDTH values, which work fine as flex-item widths too) is
   float-based, and align-items has no effect on floated elements.

   align-items: stretch (DECIDED, James's round 3 review, supersedes
   round 2's align-items: center) -- the content column stretches to
   match the (usually taller) media panel's full height again, but
   this time on purpose: "frame the image" -- breadcrumb pinned to the
   panel's top edge, the footer links pinned to its bottom edge, with
   the H1/tagline/shop-by group centred in whatever space is left
   between them. That framing is what .os-collection-header__content's
   own justify-content: space-between (below) actually does with this
   height to work with -- align-items: center (round 2) gave the
   column only its own natural height, leaving nothing for
   space-between to distribute, which is why that round centred the
   whole block instead. The mobile breakpoint below ALSO sets
   align-items: stretch, but means something different there: once the
   grid switches to flex-direction: column (stacked layout), stretch
   governs WIDTH (the cross axis flips), not height -- there's no media
   panel beside the content any more to frame against, so
   .os-collection-header__content's own mobile override
   (justify-content: flex-start, added below) is what actually turns
   off the framing behaviour at that breakpoint, not this property. */
.os-collection-header__grid {
  display: flex;
  align-items: stretch;
}
.os-collection-header__content,
.os-collection-header__media {
  float: none;
}

/* Right padding (desktop only) is deliberate extra air between the
   chips and the image edge, on top of the grid's own gutter -- without
   it the chip buttons ran right up against the media panel. Left/top/
   bottom stay on the grid's own responsive gutter (grid__item's own
   padding-left/right: calc(var(--gutter) / 2), same as every other
   grid item including the product grid below); only right gets a flat
   value added here, and only above the stacked-mobile breakpoint.

   justify-content: space-between IS back (DECIDED, James's round 3
   review, "frame the image") -- an EARLIER round had this same
   property and it read as "busy/broken" (Cowork's review, 1 Aug:
   232px void, chips -> Fit -> big gap -> Guide -> big gap -> Back),
   so a later round removed it in favour of plain top-aligned flow.
   The difference this time: that earlier version had five-plus loose
   flex children (breadcrumb, chips, Fit, Guide link, Back link all
   siblings), so space-between put a large gap between EVERY pair,
   scattering the whole column. This column now has exactly three
   direct children -- the breadcrumb <nav>, .os-collection-header__body
   (H1/tagline/shop-by rows, already grouped into one flex item), and
   .os-collection-header__foot (guide+back, already merged into one
   flex item) -- so space-between's two gaps land in exactly two
   places: above __body and below it. With only one item between two
   equal gaps, that item lands centred in the leftover space by
   construction (equal gaps either side of it), while breadcrumb and
   __foot get pinned to the very top/bottom of whatever height
   align-items: stretch (on .os-collection-header__grid, above) gives
   this column to work with. Net effect: breadcrumb level with the
   image's top edge, __foot level with its bottom edge, everything else
   centred between them -- "framing" the image, not scattering away
   from it. gap: 14px stays as a MINIMUM floor on top of whatever
   space-between distributes, so there's still real breathing room even
   when the media panel is barely taller than the content (near-zero
   leftover space to distribute). Mobile override just below turns this
   back to flex-start -- once the grid stacks, there's no media panel
   beside the content to frame against any more. */
.os-collection-header__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
@media (min-width: 1100px) {
  .os-collection-header__content {
    padding-right: 40px;
  }
}
/* Text-only headers (no media panel, see the --text-only modifier on
   the section) have nothing to stretch/centre against -- cap the line
   length instead, left-aligned, same reasoning as the tagline used to
   need before it was widened to match the (now absent, in this case)
   chip row's own column width. */
.os-collection-header--text-only .os-collection-header__content {
  max-width: 48em;
}

/* James round 6: full-width row above the grid (see the section's own
   comment for why -- moved out of .os-collection-header__content). Margin
   below separates it from the title/media row underneath; halved at the
   stacked breakpoint to match the tightened mobile rhythm already used
   elsewhere in this header (.os-collection-header__content's own 8px
   mobile gap, below). */
.os-collection-header__breadcrumb-row {
  margin-bottom: 20px;
}
@media (max-width: 1099px) {
  .os-collection-header__breadcrumb-row {
    margin-bottom: 12px;
  }
}
.os-collection-header__breadcrumb {
  margin: 0;
}

.os-collection-header__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* One group now (guide link + back link together, wrapping if both are
   present and space is tight) -- was two separate flex children
   pinned apart by the parent's old space-between (see
   .os-collection-header__content above). Whitespace-only separation
   from the row above it, NOT a hairline divider -- round 2 of James's
   review removed the rule added in round 1: floating above empty
   space with nothing else below it read as an arbitrary line, not a
   real section break. Would come back if a "framing" layout (footer
   anchored to the image's bottom edge) were adopted, since the rule
   would then be a genuine footer separator -- that layout wasn't
   chosen, so no rule. */
.os-collection-header__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 20px;
}

.os-collection-header__back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--text-light);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  text-decoration: none;
}
.os-collection-header__back-link .icon-core-chevron-left {
  width: 0.75em;
}
.os-collection-header__back-link span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.os-collection-header__title {
  margin: 0;
  color: var(--text);
}
/* .sr-only (theme utility, assets/theme.css) hides the real <h1> visually
   without removing it from the DOM/accessibility tree when a title_image
   is set -- see sections/os-collection-header.liquid. */
/* Title-height graphic, not a banner -- capped by HEIGHT (not width) so
   it sits at roughly the same visual weight as the H1 it replaces,
   left-aligned like the H1 was. The theme's own stock rule
   ".grid__item img { max-width: 100%; }" (assets/theme.css) is MORE
   specific than a single class (0,1,1 beats 0,1,0), which is what let
   the gif stretch to the full ~1180px content-column width despite the
   max-width here -- the extra ".os-collection-header__content" ancestor
   selector below is what actually wins the cascade now. width/height
   HTML attributes still come from the image-tag render itself (300px
   explicit -- see sections/os-collection-header.liquid) for CLS. */
.os-collection-header__content .os-collection-header__title-image {
  display: block;
  align-self: flex-start;
  width: auto;
  height: 56px;
  max-width: 100%;
}

/* Full collection.description, in place of the old short tagline (James,
   confirmed -- see the Liquid comment at the intro slot in
   sections/os-collection-header.liquid for the full story). Was a
   one-liner before; now genuinely multi-sentence prose, so this needs to
   hold a real paragraph gracefully, not just a single short line --
   max-width caps line length for readability (same 48em the text-only
   header variant already uses; the column itself is often narrower than
   this anyway at typical widths, so it's a safety cap more than an
   active constraint), line-height comes from the theme's own `rte`
   utility class rather than being set again here (that's the same
   mechanism the rest of the theme's rich-text blocks use, e.g. product
   descriptions -- consistent treatment, not a bespoke one). Lives INSIDE
   .os-collection-header__body now (a sibling of the H1, not a separate
   block outside the grid) -- an earlier fix attempt put it in its own
   block below the whole grid; James's review moved it back under the H1
   and retired the short tagline it used to replace only when set,
   rather than always. margin: 0, no margin-top: .os-collection-header__body's
   own flex gap (14px) already spaces it from the H1 above and the
   shop-by rows below, consistent with how every other child of that
   flex column is spaced. */
.os-collection-header__description {
  max-width: 48em;
  margin: 0;
  color: var(--text-light);
}
/* Hidden by default (desktop) -- same pattern as
   .os-collection-header__style-row-summary below: an explicit default
   rather than leaning on the ≤1099px query alone to ever set display,
   since this is a real (non sr-only) flex child of .os-collection-header__body
   and would otherwise take its browser-default `display: inline` and
   actually show up on desktop with nothing to toggle. */
.os-collection-header__desc-toggle-label {
  display: none;
}

/* Step 4 CRO fix: below ~1100px (where the layout stacks and a full
   multi-sentence description was measured as one of the things pushing
   the product grid far down the page, per James's mobile review) the
   description clamps to 2 lines with a "Read more" toggle. Checkbox
   hack, not JS -- the checkbox has to be a PRECEDING sibling of both
   the description and the label in the DOM (see the Liquid markup) for
   the ~ combinator below to reach both from one state. -webkit-line-clamp
   works the same whether the description renders as a <div> (rich
   collection.description, possibly several <p> children) or a <p> (the
   plain-text header_tagline fallback) -- it clamps total visible lines
   on the box itself regardless of internal tag structure. Desktop
   (>=1100px) is completely untouched; these rules only exist inside the
   max-width: 1099px query. */
@media (max-width: 1099px) {
  .os-collection-header__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .os-collection-header__desc-toggle-checkbox:checked ~ .os-collection-header__description {
    display: block;
    overflow: visible;
  }
  .os-collection-header__desc-toggle-label {
    display: inline-block;
    margin-top: 2px;
    color: var(--text-light);
    font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY));
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .os-collection-header__desc-toggle-checkbox:checked ~ .os-collection-header__desc-toggle-label {
    display: none;
  }
  /* The checkbox itself is .sr-only (invisible) -- a keyboard user
     tabbing to it needs a visible cue of where focus actually is, since
     the checkbox itself never renders. Focus ring lands on the visible
     "Read more" label instead, the sibling it actually toggles. */
  .os-collection-header__desc-toggle-checkbox:focus-visible ~ .os-collection-header__desc-toggle-label {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
}

/* Stacked, not side-by-side -- an earlier round put the style chips
   and Fit dropdown in one horizontal row (Fit pushed right via
   margin-left: auto). Cowork's review (1 Aug) found that read as an
   orphaned control floating in whitespace, disconnected from the
   chips. Two labelled groups, one above the other, tightly grouped
   (small gap here, same principle as the __foot divider above --
   deliberately less space than between unrelated items). */
.os-collection-header__style-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* REGRESSION FIX (James/Cowork, confirmed in Chrome: chips vanished at
   desktop widths entirely). The previous version wrapped this row in a
   <details>/<summary>, reasoning that .style-row's own unconditional
   display: flex would keep it visible at desktop regardless of the
   <details>'s open state, since a plain author `display` declaration
   should beat the browser's native "hide content when closed"
   behaviour. That's true only if that native behaviour is a plain
   `display: none` -- modern Chromium actually hides closed <details>
   content via `content-visibility: hidden`, which forces layout
   containment (sized as if empty) independently of whatever `display`
   value an author sets on the content itself, so the row's own
   display: flex never mattered and the wrapping <details> collapsed to
   height: 0 regardless, with the chips genuinely still in the DOM but
   never laid out.

   Rebuilt on the checkbox-hack pattern (same mechanism as the intro
   description's own "Read more" toggle) instead of <details> -- plain
   CSS, no native browser element with its own hidden-content semantics
   to fight. .os-collection-header__style-row-toggle-checkbox is
   .sr-only in the markup; nothing here needs to know it exists at
   desktop, since the row's display: flex above is now truly
   unconditional with nothing gating it at all. */
/* ROOT CAUSE FOUND (James/Cowork, "dead control" at desktop -- this time
   confirmed by actually loading the preview theme in a real browser and
   inspecting computed styles, not just static analysis): round 5's fix
   above was itself silently losing the cascade. Stock theme.css ships
   generic base resets for the plain HTML checkbox/label pairing this
   project's whole checkbox-hack pattern relies on:
     input[type="checkbox"], input[type="radio"] { display: inline }         (0,1,1)
     input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; margin-left: 5px }  (0,1,2)
     label, legend { display: block }                                       (0,0,1)
   Our checkbox and label here are ONE class selector each (0,1,0), and
   because this toggle's markup has the <label> as the checkbox's DIRECT
   next sibling (no wrapping element between them, unlike the intro
   description's "Read more" toggle just above, where a whole
   description block sits in between and the input[type=checkbox]+label
   selector simply never matches), stock's (0,1,1)/(0,1,2) rules
   out-specificity our (0,1,0) ones and won -- confirmed live: the
   checkbox computed display:block (not none) and stayed genuinely
   tabbable at desktop, and the summary label computed display:block
   (not none) and was genuinely visible and laid out on the page, exactly
   matching the reported symptom. This is why round 5's DOM/CSS trace
   found nothing: it checked for class-NAME collisions with grep, not
   generic-selector specificity wins, which don't show up in a
   name search at all.

   !important below is deliberate, not a shortcut: these rules exist
   specifically to override a generic base reset we don't own and don't
   want to touch (theme.css), for one specific, narrow pair of elements.
   This project already uses !important for exactly this kind of "beat a
   stock rule" case elsewhere (e.g. the mobile nav / cart drawer display
   overrides above). */
@media (min-width: 1100px) {
  .os-collection-header__style-row-toggle-checkbox {
    display: none !important;
  }
}
.os-collection-header__style-row-summary {
  display: none !important;
}
@media (max-width: 1099px) {
  /* James, device review: this toggle and the PLP's own Filter button
     (sections/collection.liquid) were competing as two equal-weight
     "refine" entries. Deliberately quiet -- no border/box, muted
     colour, smaller text -- so the hierarchy reads: quiet style/fit nav
     first, then the PLP toolbar's Filter button as the one primary
     control. min-height stays 44px for the touch target (padding, not a
     bulky box, gets it there) but nothing here should visually compete
     with "Filter" below it. display: inline-flex needs !important too,
     for the same reason as above -- confirmed live that without it, the
     same stock input[type=checkbox]+label reset was winning here as
     well, computing to display: block instead, which silently broke the
     label/chevron's flex alignment (align-items/gap/justify-content all
     present in this rule but doing nothing on a non-flex box). */
  .os-collection-header__style-row-summary {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 44px;
    /* margin-left: 0 !important below beats the same stock
       input[type=checkbox]+label reset documented above (5px leak),
       confirmed live as the cause of this control sitting out of
       alignment with the breadcrumb/title/description left edge --
       James round 6. */
    margin-left: 0 !important;
    padding: 4px 0;
    border: none;
    color: var(--text-light);
    /* Round 6: was --font-1 (measured live at 9px, too small for a
       tappable control) -- bumped to --font-3, matching the
       description text's own scale directly above it rather than a
       one-off magic number. */
    font-size: calc(var(--font-3) * var(--FONT-ADJUST-BODY));
    line-height: 1;
    cursor: pointer;
  }
  .os-collection-header__style-row-summary .icon-core-chevron-down {
    width: 0.7em;
    transition: transform 0.2s ease;
  }
  .os-collection-header__style-row-toggle-checkbox:checked ~ .os-collection-header__style-row-summary .icon-core-chevron-down {
    transform: rotate(180deg);
  }
  .os-collection-header__style-row {
    display: none;
    margin-top: 8px;
  }
  /* Round 5: two independent reports (Cowork's DOM testing, James's
     device screenshot) described this checkbox flipping state with
     ZERO visible effect on mobile. Exhaustive re-trace (CSS specificity,
     brace balance, DOM order, confirmed no stock-CSS collision, confirmed
     the deployed file matches this one exactly) found no logical fault
     in the :checked ~ rule below on its own -- it should already work.
     Rather than ship the same mechanism again on faith, added a second,
     INDEPENDENT path: os-collection-header-toggle.js mirrors the
     checkbox's state onto a plain class
     (.os-collection-header__style-row--open) on the row itself, and
     the rule below responds to EITHER mechanism. If the CSS-only
     selector has some issue this trace didn't catch (or a stale
     cached stylesheet was in play during testing), the JS class still
     opens/closes the row; if JS never runs, the original CSS-only path
     is completely unchanged and still does the job alone, exactly as
     before -- this is additive, not a replacement. */
  .os-collection-header__style-row-toggle-checkbox:checked ~ .os-collection-header__style-row,
  .os-collection-header__style-row--open {
    display: flex;
  }
  /* The checkbox is .sr-only (invisible) -- a keyboard user tabbing to
     it needs a visible cue of where focus actually is. Same pattern as
     the description's own "Read more" toggle above. */
  .os-collection-header__style-row-toggle-checkbox:focus-visible ~ .os-collection-header__style-row-summary {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
}
.os-collection-header__shop-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Small uppercase muted heading above each "Shop by" row -- charcoal/
   muted (var(--text-light)), NOT red; matches the header's existing
   kicker/small-caps treatment used elsewhere in the theme rather than
   inventing new type. Style row's label doubles as the <nav>'s own
   aria-label (same setting value, section.settings.style_nav_label);
   Fit's label is a plain static string, there's no equivalent
   merchant-editable setting for it (matches how the Fit config itself
   is code-maintained, not an editor setting -- see the section's own
   front-matter comment). */
.os-collection-header__row-label {
  margin: 0;
  color: var(--text-light);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.os-collection-header__style-nav {
  margin: 0;
}
.os-collection-header__style-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.os-collection-header__style-item {
  position: relative;
  margin: 0;
}
.os-collection-header__style-link {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
/* Neutral by default. Red is Sale-template only -- see the
   .os-collection-header--sale rule below (--COLOR-HIGHLIGHT-LINK,
   settings.color_highlight_link, #b21f29 -- confirmed this is the
   right variable: it's OS's link-highlight red, not
   --COLOR-BADGE/#ab2328 which is a different red used for sale
   badges elsewhere; corrected from an earlier round that used the
   wrong one). Do not make this global. */
.os-collection-header__style-link:hover,
.os-collection-header__style-link:focus-visible {
  border-color: var(--text);
  background: var(--bg-light);
}
.os-collection-header--sale .os-collection-header__style-link:hover,
.os-collection-header--sale .os-collection-header__style-link:focus-visible {
  border-color: var(--COLOR-HIGHLIGHT-LINK);
  background: var(--COLOR-HIGHLIGHT-LINK);
  color: #ffffff;
}

/* Fit -- James round 6: chips now render at EVERY breakpoint, matching
   "By style" above it, instead of collapsing into a bordered <details>
   dropdown below 900px. Both markup blocks (chips and the <details>
   dropdown) still render unconditionally from the section's own
   resolved arrays (see the front-matter) -- only this CSS changed, to
   always show the chip nav and always hide the dropdown, so links/
   counts/destinations are untouched. The dropdown-specific rules further
   down (.os-collection-header__fit-summary, __fit-list, __fit-item,
   __fit-link) are now dead CSS, deliberately left in place rather than
   deleted -- flagged in the handback report, not a functional issue. */
.os-collection-header__fit-nav--chips {
  display: block;
}
.os-collection-header__fit {
  display: none;
}

.os-collection-header__fit-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.os-collection-header__fit-chip-item {
  position: relative;
  margin: 0;
}
.os-collection-header__fit-chip {
  display: inline-flex;
  align-items: baseline;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.os-collection-header__fit-chip:hover,
.os-collection-header__fit-chip:focus-visible {
  border-color: var(--text);
  background: var(--bg-light);
}
/* Fit chips no longer have their own count badge -- round 3 of
   James's review merged it into the shared hover preview card (see
   .os-collection-header__chip-preview near the bottom of this file),
   the same one the style chips use. A fit chip with no preview image
   just shows no visible hover state at all beyond its own border/fill
   (see .os-collection-header__fit-chip:hover above); the count is
   still always in the DOM for screen readers via .sr-only in the
   markup either way. */
/* Dropdown count: plain, always visible -- unchanged since round 1.
   Deliberately a DIFFERENT mechanism from the chip row above: this
   only ever shows below ~900px, where the dropdown is the only Fit UI
   and hover isn't a real input, so a hover-gated reveal would just
   never be seen -- this is the touch fallback the chip row's own
   hover-only preview relies on. */
.os-collection-header__fit-count {
  color: var(--text-light);
  font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY));
}
/* Current fit: a <span>, not a link (never links to itself) -- one
   quiet cue (bold text + light fill), same "charcoal, not colour"
   principle as the Customer Care sidebar's active state. Needs its
   own :focus-visible/no-hover-only handling less than the dropdown
   items below since it's non-interactive (cursor: default, no href to
   focus), but the bold/fill treatment itself is the same either way,
   visible on tap not just mouse hover. */
.os-collection-header__fit-chip--active {
  font-weight: var(--FONT-WEIGHT-BODY-BOLD);
  background: var(--bg-light);
  cursor: default;
}

/* Dropdown (mobile only, see the 899px breakpoint above). position:
   relative on the <details> is what lets the list float as an
   absolutely-positioned popover under it. Marker removed in both
   engines deliberately -- Safari and Firefox need
   ::-webkit-details-marker AND list-style: none respectively; without
   both, Safari keeps its native disclosure triangle alongside the
   custom chevron. */
.os-collection-header__fit {
  position: relative;
}
.os-collection-header__fit-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  line-height: 1;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.os-collection-header__fit-summary::-webkit-details-marker {
  display: none;
}
.os-collection-header__fit-summary:hover,
.os-collection-header__fit-summary:focus-visible {
  border-color: var(--text);
  background: var(--bg-light);
}
.os-collection-header__fit-summary .icon-core-chevron-down {
  width: 0.7em;
  transition: transform 0.2s ease;
}
.os-collection-header__fit[open] .os-collection-header__fit-summary .icon-core-chevron-down {
  transform: rotate(180deg);
}

/* Panel: sized to its own content (not a fixed wide box), aligned to
   the trigger's LEFT edge (predictable, and avoids the previous
   right-aligned version overhanging past the trigger's left side on a
   narrow summary -- "jutting out" per the review). max-width clamps
   to the viewport with a fixed margin either side, NOT the page edge,
   so it can never overflow off-screen on a small phone regardless of
   where the trigger happens to sit in the column. */
.os-collection-header__fit-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  width: max-content;
  max-width: min(220px, calc(100vw - 40px));
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.os-collection-header__fit-item {
  margin: 0;
}
/* ~14px item type (the same token the style chips use for their own
   label, calc(var(--font-2) * var(--FONT-ADJUST-BODY))) -- was
   previously unset here and inherited a larger size from context,
   which read as oversized against the rest of the header. Compact row
   height (padding, not line-height, so the count span doesn't clip). */
.os-collection-header__fit-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  color: var(--text);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  text-decoration: none;
  white-space: nowrap;
}
.os-collection-header__fit-link:hover,
.os-collection-header__fit-link:focus-visible {
  background: var(--bg-light);
}
.os-collection-header__fit-link--active {
  font-weight: var(--FONT-WEIGHT-BODY-BOLD);
  background: var(--bg-light);
  cursor: default;
}

/* Touch targets: 44x44 minimum on the Fit dropdown's own summary and
   rows -- scoped to the same 899px breakpoint the dropdown itself
   appears at (above that width the chip row shows instead, so sizing
   the dropdown's elements for a wider viewport would be moot). The
   style chips get the equivalent treatment further down, scoped to
   the 1099px breakpoint they already go horizontal-scroll at instead
   -- that's genuinely when THEY become a touch-oriented row, not
   899px, so enforcing the same tap-target minimum there rather than
   here avoids a gap between 900-1099px where a tablet would get
   scrollable chips without yet getting touch-sized ones. min-height +
   flex centring rather than just padding, so short single-word labels
   still clear the full 44px box, not just ones long enough to wrap. */
@media (max-width: 899px) {
  .os-collection-header__fit-summary,
  .os-collection-header__fit-link {
    min-height: 44px;
    align-items: center;
  }
  .os-collection-header__fit-summary {
    justify-content: center;
    width: 100%;
  }

  /* Step 4 fix: overlay, not an anchored popover, at mobile -- James
     flagged the previous absolute-positioned panel reading as if it
     rendered open, overlapping the Back-to-Menswear link and the PLP's
     Filter/Sort bar below the header. position: fixed takes it out of
     the anchoring <details>'s own flow entirely, so it can never push
     sibling content (no layout shove, regardless of open state) and
     always paints above the rest of the page via z-index rather than
     depending on whatever stacking context the header's ancestors
     happen to create. Explicit display gating on [open] here is
     deliberate belt-and-braces on top of the browser's own native
     "hidden unless open" <details> behaviour (see the markup comment
     in sections/os-collection-header.liquid for the full reasoning) --
     makes "closed by default" a guarantee in this file rather than an
     assumption resting entirely on the UA stylesheet. z-index is
     comfortably above ordinary in-page content (the PLP's own
     .collection__nav toolbar has no explicit z-index at all) but
     clearly below the site's major drawers (header nav / PLP filter
     drawer both sit at 20050+, theme.css / os-filters.css) -- the two
     aren't expected to ever be open at once, so no need to out-rank
     them specifically. */
  .os-collection-header__fit-list,
  .os-collection-header__fit-backdrop {
    display: none;
  }
  .os-collection-header__fit[open] .os-collection-header__fit-list,
  .os-collection-header__fit[open] .os-collection-header__fit-backdrop {
    display: block;
  }
  .os-collection-header__fit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4999;
    background: rgba(45, 45, 44, 0.4);
  }
  .os-collection-header__fit-list {
    position: fixed;
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 5000;
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  }
}

/* Chip hover/focus preview -- SHARED by both "Shop by style" and
   "Shop by fit" chips (James's round 3 review: "keep them consistent"
   -- one coherent unit, not a separate floating count badge alongside
   a separate image). Desktop only, real hover-capable pointer devices;
   (hover: hover) deliberately excludes touch, including wide touch
   screens (iPad etc.) that would otherwise match a plain min-width
   query -- on those, and on anything without hover at all, this stays
   display:none and the chip is just a link with no visible count (the
   .sr-only copy in the markup still carries it for screen readers
   regardless of hover support). Pure CSS reveal, no JS: the preview is
   real server-rendered markup either way (see
   sections/os-collection-header.liquid), this only controls whether
   it's ever visible.

   Understated card, not a heavy grey frame: hairline border, the
   theme's own --bg (white) fill, generous padding, a soft (not harsh)
   shadow to lift it off the page. Caption sits BELOW the image inside
   the same card ("Drawstring · 11" / "Wide leg · 19") rather than as
   a separate detached badge -- that detached badge is exactly what
   this round's review asked to remove. */
.os-collection-header__chip-preview {
  display: none;
}
@media (hover: hover) {
  .os-collection-header__chip-preview {
    display: block;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 2;
    width: 140px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .os-collection-header__chip-preview-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
  .os-collection-header__chip-preview-count {
    display: block;
    margin-top: 8px;
    color: var(--text-light);
    font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .os-collection-header__style-item--has-preview:hover .os-collection-header__chip-preview,
  .os-collection-header__style-item--has-preview:focus-within .os-collection-header__chip-preview,
  .os-collection-header__fit-chip-item--has-preview:hover .os-collection-header__chip-preview,
  .os-collection-header__fit-chip-item--has-preview:focus-within .os-collection-header__chip-preview {
    opacity: 1;
    visibility: visible;
  }
}

/* Deliberately NOT a chip -- icon + text + arrow, no border/pill,
   visually distinct from the "Shop by style" row above it. Icons use
   the theme's own .icon-theme (1em, scales with this link's own
   font-size) so no separate sizing needed here. */
.os-collection-header__guide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  color: var(--text);
  font-size: calc(var(--font-2) * var(--FONT-ADJUST-BODY));
  text-decoration: none;
}
.os-collection-header__guide-icon {
  flex: none;
}
.os-collection-header__guide-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.os-collection-header__guide-link .icon-core-arrow-long-right {
  flex: none;
  width: 0.85em;
  transition: transform 0.2s ease;
}
.os-collection-header__guide-link:hover .icon-core-arrow-long-right,
.os-collection-header__guide-link:focus-visible .icon-core-arrow-long-right {
  transform: translateX(4px);
}

/* Aspect ratio + crop: --media-ratio is set inline per-section from the
   media_ratio setting (4:3 default, 1:1). object-fit:cover on every media
   element crops to that ratio; the object-position each element already
   carries (image-tag.liquid's own focal-point handling, or the video's
   default centring) still applies on top of the crop. */
.os-collection-header__media {
  position: relative;
  aspect-ratio: var(--media-ratio, 4 / 3);
  overflow: hidden;
}
.os-collection-header__video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.os-collection-header__poster,
.os-collection-header__video,
.os-collection-header__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* James: default crop was landing centre, losing heads on full-length
     shots on the tall desktop crop. Full top (0%) tried first, then
     dialled back to ~20% down (upper-middle) -- top was too high for
     several shots, 20% keeps head and upper body framed without the
     abruptness of a hard top-align. Accepted trade-off: very tall shots
     still lose some of the lower half. !important is required:
     snippets/image-tag.liquid always writes an inline object-position
     style on this <img> itself (defaults to "center center" whenever no
     focal point is set on the image, which is every image here), so a
     plain rule here would never win against it. One global default, no
     per-collection overrides. */
  object-position: center 20% !important;
}
/* Video sits over its own poster <img>; the poster is the loading state
   (native poster="" attribute) AND the reduced-motion fallback (below). */
.os-collection-header__video-wrap .os-collection-header__poster {
  position: absolute;
  inset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .os-collection-header__video-wrap .os-collection-header__video {
    display: none;
  }
}

/* Below the section's own 1100px desktop-split threshold (large-up--,
   matching sections/os-collection-header.liquid's grid classes): stack,
   and flip the visual position of the media panel above the text via
   `order` (grid is flex unconditionally now, see above) while it stays
   second in DOM source order throughout -- the H1/copy/links are never
   reordered in the markup, only how they paint. */
@media (max-width: 1099px) {
  .os-collection-header__grid {
    flex-direction: column;
    /* Still align-items: stretch here, same as desktop, but the axis
       flip (flex-direction: column) means it now governs WIDTH, not
       height -- see the desktop rule's own comment. */
    align-items: stretch;
  }
  .os-collection-header__content {
    /* Turn off the desktop "frame the image" behaviour (see the
       desktop rule's own comment) -- once the grid stacks, there's no
       media panel beside the content to frame against, just normal
       top-aligned document flow: breadcrumb, then body, then footer,
       spaced by the existing gap alone. */
    justify-content: flex-start;
  }
  .os-collection-header__content,
  .os-collection-header__media {
    width: 100%;
  }
  .os-collection-header__media {
    order: -1;
  }
  .os-collection-header__style-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 8px calc(var(--gutter) / -2) 0;
    padding: 0 calc(var(--gutter) / 2) 4px;
  }
  .os-collection-header__style-list::-webkit-scrollbar {
    display: none;
  }
  /* 44x44 touch target -- this is where the chip row actually becomes
     a touch-scrollable row (above), so the tap-target minimum belongs
     at this breakpoint, not the Fit-specific 899px one. */
  .os-collection-header__style-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .os-collection-header__media {
    margin-bottom: 16px;
    max-height: 32vh;
  }

  /* James, from device: the mobile header reads as too many stacked,
     over-spaced bands before the product grid -- the gaps between
     breadcrumb/body/footer were still the DESKTOP values (14px/20px),
     which is most of what makes a stacked single-column layout feel
     tall. Tightened here specifically, not by changing the desktop
     rules those values live on (.os-collection-header__content/__body/
     __foot, above) -- desktop is explicitly unchanged per the brief. */
  .os-collection-header__content {
    gap: 8px;
  }
  .os-collection-header__body {
    gap: 8px;
  }
  .os-collection-header__style-row {
    gap: 8px;
  }
  .os-collection-header__foot {
    margin-top: 8px;
    gap: 4px 16px;
  }
  /* One small quiet line instead of two secondary links given a whole
     band's worth of size/weight -- smaller text, same charcoal-light
     colour already used at desktop, just turned down further. */
  .os-collection-header__guide-link,
  .os-collection-header__back-link {
    font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY));
  }
}

/* James round 6: on true phone widths the 32vh cap above (max-width:
   1099px query) still renders a tall hero -- e.g. ~270px on a 844px-tall
   viewport -- one of the things making the mobile header feel long
   before the product grid. Capped further here, narrower breakpoint only
   (767px matches the toolbar/filter-drawer breakpoint already used
   elsewhere in this file), leaving the 1099px rule's 32vh in place for
   tablet widths between 768-1099px. object-fit: cover (already set on
   .os-collection-header__image, unconditionally) keeps the crop
   undistorted; same image, no source change. Desktop (>=1100px) untouched. */
@media (max-width: 767px) {
  .os-collection-header__media {
    max-height: 220px;
  }
}


/* =========================
   Quick-add button (snippets/product-grid-item-variant.liquid) -- James
   round 6: replaces the stock component's solid-white box (a full-width
   bar on desktop, a white square bottom-right of the image on mobile,
   both from the Tailwind-derived bg-button + settings.quick_add_button_color
   classes) with one small, understated charcoal icon button, same
   treatment at EVERY breakpoint -- "consistent OS system across desktop/
   mobile" rather than text-on-desktop/icon-on-mobile. !important is
   needed throughout: os-quick-add-btn sits alongside Tailwind utility
   classes (w-r12, md:w-full, md:aspect-auto etc) of equal selector
   specificity, so without it the cascade's source order (Tailwind's
   compiled utilities loading after this file) would win, same reasoning
   as every other !important override in this file.

   Visual-only: every functional/Alpine attribute on the two buttons this
   class is applied to (data-add-to-cart, x-data, @click.stop, :disabled,
   :aria-expanded, aria-haspopup) is untouched in the Liquid -- clicking
   still opens the exact same available-sizes panel (struck-through
   unavailable sizes, existing add-to-cart flow), only the launcher's own
   box/colour/icon change here. The slide-up size panel itself
   (.absolute...bg-button below the trigger button) does NOT carry this
   class and is not touched.

   Soft translucent + blurred backing (not a solid white square) is the
   "one consistent treatment" -- reads as a quiet chip on flat-lay/white
   shots (backing barely visible against a light ground) and still holds
   enough contrast via the blur + shadow to stay legible over busier
   on-model photos, without needing to detect image content. */
.os-quick-add-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
  color: #2d2d2c;
}
.os-quick-add-btn:hover,
.os-quick-add-btn:focus-visible {
  background: rgba(255, 255, 255, 0.75) !important;
}
/* Icon always shown, button text never shown -- overrides the markup's
   own hidden/md:block + block/md:hidden breakpoint toggle so the icon
   renders identically on desktop and mobile. */
.os-quick-add-btn__text {
  display: none !important;
}
.os-quick-add-btn__icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: currentColor;
}
.os-quick-add-btn.opacity-50 {
  background: rgba(255, 255, 255, 0.55) !important;
}

/* =========================
   Shoppable lookbook (sections/lookbook-shoppable.liquid)
   Rebuilt against "Lookbook mockup -- grid, hero, video, shoppable.html"
   (the spec). Minimal chrome between images on purpose -- reads as one
   continuous editorial sequence, not a grid of cards. Every colour/
   spacing value below is a theme variable already used elsewhere in
   this file (--text, --text-light, --border, --bg-light, --gutter,
   --header-height, --FONT-ADJUST-BODY), not a value copied verbatim
   from the mockup's own standalone --ink/--muted/--line/--soft set.
   ========================= */

/* Defensive, high-specificity: several elements below (the saved chip,
   the hero video/controls, panels, dots) are toggled by JS setting the
   native `hidden` attribute or the Liquid `hidden` boolean. The UA
   stylesheet's own [hidden]{display:none} loses to any of this file's
   later display:flex/grid/block rules on the same element -- confirmed
   the hard way (the saved chip stayed visible reading "0 looks saved"
   with hidden=true). One rule here, scoped to the section, beats
   fixing every individual selector one at a time and re-breaking on
   the next one added. */
[data-lookbook] [hidden] {
  display: none !important;
}

/* ---- Button system: solid / outline / light. One definition,
   routed to by every button this section renders (Journal CTA,
   footer CTAs, capture band submit) -- previously an ad-hoc mix of
   the theme's global .btn modifiers (a bare .btn with no modifier is
   itself a solid ink fill, not the outline cta_style promised;
   .btn--outline exists sitewide but was never applied here), which
   read as three unrelated button styles on one page. Typography
   tokens borrowed from the theme's own button system for sitewide
   consistency; colour and fill are self-contained. */
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--TYPE-STACK-BUTTON);
  font-style: var(--TYPE-STYLE-BUTTON);
  font-weight: var(--TYPE-WEIGHT-BUTTON);
  text-transform: var(--FONT-BUTTON-TRANSFORM);
  letter-spacing: var(--FONT-BUTTON-LETTER-SPACING);
  font-size: calc(var(--font-3) * var(--TYPE-ADJUST-BUTTON));
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: var(--BUTTON-RADIUS);
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* var(--text) resolves to settings.color_body_text (the grey body
   copy colour, #55585a) in this scheme, not the brand ink -- these
   want the theme's actual primary colour token regardless of scheme,
   the same one .btn--primary itself is built on. */
.lb-btn--solid {
  background: var(--COLOR-PRIMARY);
  color: var(--COLOR-PRIMARY-OPPOSITE);
  border-color: var(--COLOR-PRIMARY);
}
.lb-btn--solid:hover {
  background: var(--COLOR-PRIMARY-HOVER);
  border-color: var(--COLOR-PRIMARY-HOVER);
}
.lb-btn--outline {
  background: transparent;
  color: var(--COLOR-PRIMARY);
  border-color: var(--COLOR-PRIMARY);
}
.lb-btn--outline:hover {
  background: var(--COLOR-PRIMARY);
  color: var(--COLOR-PRIMARY-OPPOSITE);
}
.lb-btn--light {
  background: #fff;
  color: #101010;
  border-color: #fff;
}
.lb-btn--light:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* ---- Hero ---- */
.lookbook-shoppable__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-light);
}
@media (max-width: 749px) {
  .lookbook-shoppable__hero {
    aspect-ratio: 2 / 3;
  }
}
/* Height setting: an explicit height overrides the aspect-ratio above
   on browsers' own terms (aspect-ratio only sizes an axis left as
   auto), so applying settings.height's .use_screen_*/.use_pixels_*
   class (assets/theme.css, --full-screen etc) is enough for desktop
   -- no new rule needed there. Those classes carry no media query of
   their own, so height_mobile needs its own scoped block: neutralise
   whichever desktop class is present below 750px, then apply the
   mobile choice through a same-specificity .lb-hero-mobile-* class,
   reusing the exact values above rather than inventing new ones. */
@media (max-width: 749px) {
  .lookbook-shoppable__hero[class*="use_screen_"],
  .lookbook-shoppable__hero[class*="use_pixels_"] {
    height: auto;
  }
  .lookbook-shoppable__hero.lb-hero-mobile-use_screen_full { height: var(--full-screen); }
  .lookbook-shoppable__hero.lb-hero-mobile-use_screen_three_quarters { height: var(--three-quarters); }
  .lookbook-shoppable__hero.lb-hero-mobile-use_screen_two_thirds { height: var(--two-thirds); }
  .lookbook-shoppable__hero.lb-hero-mobile-use_screen_one_half { height: var(--one-half); }
  .lookbook-shoppable__hero.lb-hero-mobile-use_screen_one_third { height: var(--one-third); }
  .lookbook-shoppable__hero.lb-hero-mobile-use_screen_one_fifth { height: var(--one-fifth); }
  .lookbook-shoppable__hero.lb-hero-mobile-use_pixels_800 { height: 800px; }
  .lookbook-shoppable__hero.lb-hero-mobile-use_pixels_650 { height: 650px; }
  .lookbook-shoppable__hero.lb-hero-mobile-use_pixels_500 { height: 500px; }
}
.lookbook-shoppable__hero-media,
.lookbook-shoppable__hero-img,
.lookbook-shoppable__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lookbook-shoppable__hero-img img,
.lookbook-shoppable__hero-video {
  object-fit: cover;
}
.lookbook-shoppable__hero-media--placeholder {
  display: flex;
}
.lookbook-shoppable__hero-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 40px;
}
/* --over: scrim height and strength are both merchant settings now
   (hero_scrim_height/hero_scrim_strength -> --lb-scrim-height/
   --lb-scrim-opacity, set inline on .lookbook-shoppable__hero). The
   gradient spans the full height of that box and fades to fully
   transparent at its own top edge -- not a fixed-height box sat on
   top of the photo -- which is what removes the hard edge the spec
   flagged: previously the box's own top edge WAS the cutoff, visible
   as a seam on light photography regardless of settings. */
.lookbook-shoppable__hero-cap--over {
  height: var(--lb-scrim-height, 45%);
  justify-content: flex-end;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--lb-scrim-opacity, 0.55)) 0%,
    rgba(0, 0, 0, calc(var(--lb-scrim-opacity, 0.55) * 0.45)) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}
/* --below: no scrim at all -- it sits under the hero on the page's
   own background, so it needs the page's own text colour, not white. */
.lookbook-shoppable__hero-cap--below {
  position: static;
  height: auto;
  padding: 24px 40px 0;
  color: var(--text);
  background: none;
}
.lookbook-shoppable__hero-cap--left {
  align-items: flex-start;
  text-align: left;
}
.lookbook-shoppable__hero-cap--centre {
  align-items: center;
  text-align: center;
}
@media (max-width: 749px) {
  .lookbook-shoppable__hero-cap {
    padding: 20px 16px;
  }
  .lookbook-shoppable__hero-cap--below {
    padding: 16px 16px 0;
  }
}
.lookbook-shoppable__kicker {
  font-size: calc(var(--font-1) * var(--FONT-ADJUST-BODY));
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 9px;
}
.lookbook-shoppable__title {
  margin: 0;
  color: inherit;
  font-size: calc(var(--font-9) * var(--FONT-ADJUST-HEADING));
  font-weight: 400;
}
@media (max-width: 749px) {
  .lookbook-shoppable__title {
    font-size: calc(var(--font-7) * var(--FONT-ADJUST-HEADING));
  }
}
.lookbook-shoppable__cta--hero {
  margin-top: 20px;
}
.lookbook-shoppable__hero-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.lookbook-shoppable__hero-play,
.lookbook-shoppable__hero-mute {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 0;
  padding: 8px 12px;
}

/* ---- Intro ---- */
.lookbook-shoppable__intro {
  max-width: 660px;
  margin: 0 auto;
  padding: 58px 0 40px;
  text-align: center;
}
@media (max-width: 749px) {
  .lookbook-shoppable__intro {
    padding: 34px 0 24px;
  }
}
.lookbook-shoppable__intro-text {
  color: var(--text-light);
}
.lookbook-shoppable__intro-text p {
  margin: 0 0 14px;
}
.lookbook-shoppable__cta--intro {
  margin-top: 8px;
}

/* ---- Bar: saved chip + grid density control ---- */
.lookbook-shoppable__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.lookbook-shoppable__saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
}
.lookbook-shoppable__saved-chip svg {
  width: 15px;
  height: 15px;
  fill: var(--text);
}
/* The grid density control itself (.collection__layout, [data-toggle-
   grid], icon-fill-grid-1..4) is unstyled here on purpose -- it's
   sections/collection.liquid's own control, and its CSS already lives
   sitewide (assets/theme.css: .collection__layout, [data-toggle-grid],
   .js-grid[data-grid-large="N"]/[data-grid-small="N"], including the
   breakpoint rules that show only "2/3/4" at desktop and "1/2" at
   mobile). Adding section-scoped overrides here would be exactly the
   bespoke-component mistake this rebuild is meant to undo. */
.lookbook-shoppable__bar .collection__layout {
  margin-left: auto;
}

/* ---- Grid ---- */
/* Column COUNT comes entirely from .js-grid (assets/theme.css) via
   data-grid-large/data-grid-small -- the same mechanism sections/
   collection.liquid uses, so a shopper moving between the two sees
   identical behaviour. The compound selector below only overrides
   .js-grid's own gap, keeping this section's tighter, more editorial
   spacing rather than the collection grid's wider gutter -- a
   deliberate, narrow visual choice, not a parallel grid system. */
.lookbook-shoppable__looks.js-grid {
  gap: 10px;
  padding-bottom: 10px;
}
/* Positioned ancestor for the swipe-nav arrows -- see the section's own
   comment on why they're siblings of the scrolling grid, not children
   of it (they need to stay put as the grid scrolls under them). */
.lookbook-shoppable__swipe-wrap {
  position: relative;
}
/* Swipe layout (mobile only, a section setting) -- full-bleed looks,
   horizontal scroll-snap, dots beneath. Shopping a look always opens
   the fullscreen viewer now (see the section's own doc comment), so
   there's no inline panel to hide here any more. */
.lookbook-shoppable__looks.is-swipe {
  display: flex;
  /* Without this, flex's default align-items: stretch inflates every
     .look to the row's own cross-size rather than each look's own
     aspect-ratio height (measured live at 1732px against a natural
     ~505px -- a broken, near-page-height tile). Each look sizes to
     its own image, full stop. */
  align-items: flex-start;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) / -2);
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
  position: relative;
}
.lookbook-shoppable__looks.is-swipe::-webkit-scrollbar {
  display: none;
}
.lookbook-shoppable__looks.is-swipe .look {
  flex: 0 0 94%;
  scroll-snap-align: center;
}
/* The capture band and editorial blocks are also children of this same
   grid (rendered inline between looks, at .lookbook-shoppable__looks
   > .lookbook-band / .lookbook-editorial), so without a rule they'd
   become flex items in the swipe row too -- and a swipe carousel is
   built as one dot per look (assets/lookbook-shoppable.js), with each
   step measured off a single look tile's own width. A promotional
   card competing for a slide in that sequence desyncs the dots and
   the swipe distance for every look after it (measured live: one tap
   of "prev" moved two dots, not one, once the band's extra width was
   in the mix) -- the same content works as a pause point in a
   browsing grid, not as a slide in a one-look-per-dot carousel, so it
   simply doesn't render here rather than rendering broken. */
.lookbook-shoppable__looks.is-swipe .lookbook-band,
.lookbook-shoppable__looks.is-swipe .lookbook-editorial {
  display: none;
}
/* Swipe affordance: small arrows at opposite edges, fixed to the
   swipe row's own viewport (not scrolling with it), plus the dots
   already below. assets/lookbook-shoppable.js scrolls the row by one
   look's width per click; hidden entirely outside swipe mode/desktop
   via [hidden] rather than a second template. */
.lookbook-shoppable__swipe-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lookbook-shoppable__swipe-nav svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
}
.lookbook-shoppable__swipe-nav--prev {
  left: 8px;
}
.lookbook-shoppable__swipe-nav--next {
  right: 8px;
}
.lookbook-shoppable__swipe-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 12px 0 2px;
}
.lookbook-shoppable__swipe-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  display: block;
}
.lookbook-shoppable__swipe-dots i.is-on {
  background: var(--text);
}

/* ---- Look tile ---- */
.look {
  position: relative;
  line-height: 0;
}
.look__tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.look__image-wrap,
.look__image {
  width: 100%;
  height: 100%;
}
.look__image-wrap--placeholder {
  background: var(--bg-light);
  display: flex;
}
.look__tile img {
  transition: transform 0.6s ease;
}
.look:hover .look__tile img {
  transform: scale(1.025);
}
.look__tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  pointer-events: none;
  /* Strengthened from 0.34 -- too faint against pale photography to
     read as contrast protection for the white corner icons sitting
     on top of it. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.look__film-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 9px;
  line-height: 1;
}

/* Corner buttons: the TAP TARGET is always 40px, even where the icon
   inside is drawn much smaller -- do not shrink the button to match
   the icon. Icons are transparent, white-stroked, with a drop shadow,
   over the tile's own foot scrim (.look__tile::after above). */
.look__corner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2;
}
.look__corner:hover {
  transform: scale(1.08);
}
.look__corner svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
@media (max-width: 749px) {
  .look__corner svg {
    width: 16px;
    height: 16px;
  }
}
.look__corner--shop {
  left: 6px;
  bottom: 6px;
}
.look__corner--save {
  left: 44px;
  bottom: 6px;
}
.look__corner--expand {
  right: 6px;
  bottom: 6px;
}
@media (max-width: 749px) {
  .look__corner--shop {
    left: 2px;
    bottom: 2px;
  }
  .look__corner--save {
    left: 38px;
    bottom: 2px;
  }
  .look__corner--expand {
    right: 2px;
    bottom: 2px;
  }
}
.look__corner--save,
.look__corner--expand {
  opacity: 0;
}
.look:hover .look__corner--save,
.look:hover .look__corner--expand,
.look:focus-within .look__corner--save,
.look:focus-within .look__corner--expand {
  opacity: 1;
}
.look__corner--save[aria-pressed="true"] {
  opacity: 1;
}
.look__corner--save[aria-pressed="true"] svg {
  fill: #fff;
}
@media (hover: none) {
  .look__corner--save,
  .look__corner--expand {
    opacity: 1;
  }
}
/* ---- Rail: one look's products + note, inside the fullscreen viewer
   (snippets/lookbook-rail-look.liquid) ----
   No more inline shop panel -- opening a look always means the
   fullscreen viewer now, so there's only ever one place products
   render, at one size. See the section's own doc comment for why.
   PRODUCTS -- snippets/product-clip.liquid, the same compact card
   already used for cart/PDP upsells sitewide (it's ALREADY a
   thumbnail-left/content-right row; this only resizes it to the
   rail's own scale, it doesn't reshape a page-scale grid card the
   way an earlier pass had to). Real add-to-cart, or real quick view
   for a multi-variant product -- product-clip's own existing choice,
   not reinvented here. */
.lb__rail-look {
  display: flex;
  flex-direction: column;
}
.lb__rail-look[hidden] {
  display: none;
}
/* ---- Rail card: option 1 from "Lookbook — viewer rail, four
   options.html", decided in §4a of the rebuild spec. A compact list
   where a size is chosen inline -- no Quick View, no second surface.
   Three defects fixed here specifically: price is never the sitewide
   sale-red (a single, plain price), the button always reads "Add"
   regardless of variant count (no "Quick view" wording swap), and the
   button is deliberately quieter than the photograph (outline, not
   filled -- filled is reserved for "Add the look" alone, in the
   footer). See snippets/lookbook-rail-card.liquid for the markup. */
.lb__rail-card {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  align-items: flex-start;
}
.lb__rail-card:last-child {
  border-bottom: 0;
}
.lb.lb--white .lb__rail-card {
  border-bottom-color: var(--border);
}
.lb__rail-card__thumb {
  flex: none;
  width: 56px;
  height: 75px;
  overflow: hidden;
}
.lb__rail-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lb__rail-card__body {
  min-width: 0;
  flex: 1 1 auto;
}
.lb__rail-card__title-link {
  text-decoration: none;
}
.lb__rail-card__title {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  color: #fff;
}
.lb.lb--white .lb__rail-card__title {
  color: var(--text);
}
/* Deliberately a single price, never a compare-at/sale pair -- a red
   markdown treatment on a £720 morning coat reads as an error, not an
   offer (§4a's own reasoning). */
.lb__rail-card__price {
  margin: 2px 0 0;
  font-size: 11px;
  font-family: var(--font-body-family, sans-serif);
  color: rgba(255, 255, 255, 0.62);
}
.lb.lb--white .lb__rail-card__price {
  color: var(--text-light);
}
.lb__rail-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.lb__rail-card__chip {
  width: 26px;
  height: 23px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.26);
}
.lb.lb--white .lb__rail-card__chip {
  color: var(--text);
  border-color: var(--border);
}
.lb__rail-card__chip.is-selected {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.lb.lb--white .lb__rail-card__chip.is-selected {
  border-color: var(--text);
  background: var(--bg-light);
}
.lb__rail-card__chip:disabled {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}
.lb__rail-card__add {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 7px 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.lb.lb--white .lb__rail-card__add {
  color: var(--text);
  border-color: var(--text);
}
.lb__rail-card__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lb__rail-card__add.is-loading {
  opacity: 0.6;
}
.lb__rail-card__add.is-added {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.lb.lb--white .lb__rail-card__add.is-added {
  border-color: var(--text);
  background: var(--bg-light);
}
@media (max-width: 749px) {
  .lb__rail-card__thumb {
    width: 48px;
    height: 64px;
  }
}
/* Made to order: same compact-row treatment as product-clip above --
   there's only ever one context left for this card now (the rail),
   so its base styles are the row layout directly rather than a
   second, context-scoped override. */
.lookbook-mto-card {
  display: flex;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lb.lb--white .lookbook-mto-card {
  border-bottom-color: var(--border);
}
.lookbook-mto-card__image-link {
  flex: none;
  width: 52px;
}
.lookbook-mto-card__image {
  width: 100%;
  aspect-ratio: 52 / 69;
  background: var(--bg-light);
  margin: 0;
}
.lookbook-mto-card__content {
  min-width: 0;
}
.lookbook-mto-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
}
.lb.lb--white .lookbook-mto-card__title {
  color: var(--text);
}
.lookbook-mto-card__price {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin: 2px 0 8px;
}
.lb.lb--white .lookbook-mto-card__price {
  color: var(--text-light);
}
.lookbook-mto-card__enquire {
  width: 100%;
  max-width: none;
  height: 32px;
  min-height: 32px;
  padding: 0 14px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #111;
  border: 0;
  text-align: center;
}
.lb.lb--white .lookbook-mto-card__enquire {
  background: var(--text);
  color: #fff;
}
.lookbook-mto-card__note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
  line-height: 1.4;
}
.lb.lb--white .lookbook-mto-card__note {
  color: var(--text-light);
}
/* "Add the look" -- the only filled button in the rail (§4a); every
   per-product Add above is outline. */
.lb__rail-add-look {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 11px 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  background: #fff;
  color: #101010;
  border: 0;
}
.lb.lb--white .lb__rail-add-look {
  background: var(--text);
  color: #fff;
}
.lb__rail-add-look:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* The look's paragraph, at footnote scale -- 12px, 1.7 line height,
   sitting ABOVE its own hairline (the divider marks the end of the
   rail's content, not a break before the note). */
.lb__rail-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.7;
  margin: 20px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.lb.lb--white .lb__rail-note {
  color: #6b6d6e;
  border-bottom-color: var(--border);
}
.lb__rail-fitting {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lb.lb--white .lb__rail-fitting {
  color: var(--text);
}

/* ---- Capture band ---- */
.lookbook-band {
  grid-column: 1 / -1;
  background: var(--bg-light);
  padding: 34px 28px;
  margin: 2px 0 10px;
  text-align: center;
}
@media (max-width: 749px) {
  .lookbook-band {
    padding: 26px 16px;
  }
}
.lookbook-band__heading {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 400;
}
.lookbook-band__body {
  color: var(--text-light);
  max-width: 430px;
  margin: 0 auto 20px;
}
.lookbook-band__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 430px;
  margin: 0 auto;
}
/* Explicit shared height -- input and button previously used different
   padding models (12px all round vs the button's own vertical
   padding) and drifted out of alignment. */
.lookbook-band__row input,
.lookbook-band__row .lb-btn {
  height: 48px;
  box-sizing: border-box;
}
.lookbook-band__row input {
  max-width: 250px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: #fff;
}
.lookbook-band__row .lb-btn {
  padding: 0 24px;
}

/* ---- Editorial block ---- */
.lookbook-editorial {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin: 2px 0 10px;
}
.lookbook-editorial__image-wrap {
  flex: 1 1 320px;
}
.lookbook-editorial__content {
  flex: 1 1 320px;
}
.lookbook-editorial__heading {
  margin: 0 0 12px;
}
.lookbook-editorial__body {
  color: var(--text-light);
}

/* ---- End ----
   Tightened from 64px/88px top/bottom -- when the capture band lands
   right before this (a common position, including this campaign's
   own), the band's own bottom padding plus this top padding read as
   two disconnected blocks with a dead gap between rather than one
   closing sequence. Still enough air to separate "the pitch" (band)
   from "the sign-off" (closing line + buttons), just not a beat. */
.lookbook-shoppable__end {
  text-align: center;
  padding: 32px 0 64px;
  max-width: 620px;
  margin: 0 auto;
}
.lookbook-shoppable__closing {
  color: var(--text-light);
  margin-bottom: 24px;
}
.lookbook-shoppable__end-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 749px) {
  .lookbook-shoppable__end-btns {
    flex-direction: column;
  }
}

/* Body scroll lock while the viewer, saved drawer or email modal is
   open -- no existing sitewide class for this found to reuse (the
   cart drawer appears to handle it differently), so this is scoped
   and self-contained rather than assumed to already exist. */
body.lookbook-locked {
  overflow: hidden;
}

/* ---- Fullscreen viewer ---- */
.lb {
  position: fixed;
  inset: 0;
  /* The mockup's own z-index (100) was fine in isolation but far too
     low here -- this theme's existing fixed-position UI already runs
     well above that (cart drawer 20050, search predictive 30000,
     product-add popdown 18000, confirmed live). 40000 clears all of
     them; deliberately not trying to out-rank the Gorgias chat widget
     (2147483xxx), which is expected to float above everything. */
  z-index: 40000;
  background: #101010;
  display: none;
}
.lb.is-on {
  display: block;
}
.lb__stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Was 78px, matching the old ~100px bar -- the bar (5a below) is
     now ~56px, freeing that difference as more image. */
  bottom: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 82px 14px;
  transition: right 0.28s ease, bottom 0.28s ease;
}
.lb.is-shop-open .lb__stage {
  right: 320px;
}
@media (max-width: 749px) {
  .lb__stage {
    padding: 60px 10px 10px;
    bottom: 56px;
  }
  .lb.is-shop-open .lb__stage {
    right: 0;
    /* Was 300px (the rail's own height only) -- the stage's box needs
       to clear the bar too, sitting below the rail, or its own lower
       portion sits behind the bar. */
    bottom: 356px;
  }
}
.lb__stage img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.lb__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 8;
}
.lb__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.lb__close:hover {
  background: #fff;
  color: #101010;
}
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}
.lb__nav svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
}
.lb__nav--prev {
  left: 16px;
}
.lb__nav--next {
  right: 16px;
}
.lb.is-shop-open .lb__nav--next {
  right: 336px;
}
@media (max-width: 749px) {
  /* Smaller on mobile -- 52px read as oversized on a narrow screen.
     .lb.is-shop-open .lb__nav--next's desktop rule above (right:
     336px, clearing a 320px right-hand rail) was leaking into mobile
     too, where the rail is a full-width BOTTOM strip, not a right-
     hand column -- pushing "next" to sit ~74px from the left edge on
     a 390px screen, on top of "prev" at left:16px. That's the
     "stacked on the left" bug: both reset to their normal edges here. */
  .lb__nav {
    width: 32px;
    height: 32px;
  }
  .lb__nav svg {
    width: 14px;
    height: 14px;
  }
  .lb.is-shop-open .lb__nav {
    top: 30%;
  }
  .lb.is-shop-open .lb__nav--next {
    right: 16px;
  }
}
.lb__dots {
  position: absolute;
  left: 0;
  right: 320px;
  bottom: 66px;
  display: flex;
  gap: 7px;
  justify-content: center;
  z-index: 7;
  transition: right 0.28s ease;
  pointer-events: none;
}
.lb:not(.is-shop-open) .lb__dots {
  right: 0;
}
@media (max-width: 749px) {
  .lb__dots {
    right: 0;
  }
  .lb.is-shop-open .lb__dots {
    bottom: 366px;
  }
}
.lb__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  display: block;
}
.lb__dots i.is-on {
  background: #fff;
}
/* Was ~100px tall (16px padding + 44px min-height buttons) -- direct
   height taken off the photograph on a page whose whole purpose is
   showing it large. Now ~56px total (10px padding + 36px buttons). */
.lb__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #0b0b0b;
  z-index: 6;
}
.lb__bar-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
}
.lb__bar-btn svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  fill: none;
  flex: none;
}
.lb__bar-btn.is-on {
  background: #fff;
  color: #101010;
}
.lb__bar-btn.is-on svg {
  stroke: #101010;
  fill: #101010;
}
/* Save button: quieter than the generic .is-on treatment above, which
   inverts to a solid white fill -- the loudest thing on a dark
   screen for what's a secondary action. Stays outlined; only the
   heart itself fills, the same "outline plus a filled glyph" pattern
   already used for a saved look's corner icon on the grid tile. */
.lb__bar-btn--save.is-on {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.lb__bar-btn--save.is-on .lb__bar-btn-heart svg {
  fill: #fff;
  stroke: #fff;
}
/* Mobile: three buttons with full text labels ("Hide products" /
   "Save" / "Email this look") don't fit one line at 390px even at
   this compact sizing -- measured at ~391px of button content alone
   against ~358px available. Slideshow drops first (least essential),
   then the remaining three go icon-only: the label stays in the DOM
   (still the button's accessible name) but is visually hidden, the
   same sr-only pattern as everywhere else labels are icon-only. */
@media (max-width: 749px) {
  .lb__bar-btn {
    height: 32px;
    min-height: 32px;
    min-width: 44px;
    padding: 0 12px;
  }
  .lb__bar-btn span:not(.lb__bar-btn-heart) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .lb__bar-btn--slideshow {
    display: none;
  }
}
.lb__rail {
  position: absolute;
  top: 0;
  bottom: 56px;
  right: 0;
  width: 320px;
  background: #151515;
  color: #fff;
  overflow: auto;
  padding: 78px 18px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateX(101%);
  transition: transform 0.28s ease;
  z-index: 5;
}
.lb.is-shop-open .lb__rail {
  transform: translateX(0);
}
@media (max-width: 749px) {
  .lb__rail {
    top: auto;
    left: 0;
    right: 0;
    bottom: 56px;
    width: auto;
    height: 300px;
    padding: 14px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    transform: translateY(101%);
  }
  .lb.is-shop-open .lb__rail {
    transform: translateY(0);
  }
}

/* White viewer theme -- section.settings.viewer_background */
.lb.lb--white {
  background: #fff;
}
.lb--white .lb__top {
  color: var(--text);
}
.lb--white .lb__close {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.lb--white .lb__close:hover {
  background: var(--text);
  color: #fff;
}
.lb--white .lb__nav {
  background: rgba(0, 0, 0, 0.07);
}
.lb--white .lb__nav svg {
  stroke: var(--text);
}
.lb--white .lb__bar {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
}
.lb--white .lb__bar-btn {
  border-color: var(--text);
  color: var(--text);
}
.lb--white .lb__bar-btn svg {
  stroke: var(--text);
}
.lb--white .lb__bar-btn.is-on {
  background: var(--text);
  color: #fff;
}
.lb--white .lb__bar-btn.is-on svg {
  stroke: #fff;
  fill: #fff;
}
/* Save button override, white theme -- must come after the generic
   .lb--white .lb__bar-btn.is-on above (same specificity, source
   order decides) or that rule's solid fill wins here too. */
.lb--white .lb__bar-btn--save.is-on {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.lb--white .lb__bar-btn--save.is-on .lb__bar-btn-heart svg {
  fill: var(--text);
  stroke: var(--text);
}
.lb--white .lb__rail {
  background: #fff;
  color: var(--text);
  border-left-color: var(--border);
}
@media (max-width: 749px) {
  .lb--white .lb__rail {
    border-top-color: var(--border);
  }
}
.lb--white .lb__dots i {
  background: rgba(0, 0, 0, 0.22);
}
.lb--white .lb__dots i.is-on {
  background: var(--text);
}

/* ---- Saved drawer + email modal (shared overlay chrome) ---- */
.lb-overlay {
  position: fixed;
  inset: 0;
  /* One above .lb -- either can be opened FROM inside the fullscreen
     viewer (Email this look, from the viewer's own bottom bar), and
     needs to sit on top of it when that happens. See .lb's own
     comment for why 40000 is the baseline here. */
  z-index: 40001;
  background: rgba(20, 20, 20, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lb-overlay.is-on {
  display: flex;
}
.lb-overlay__sheet {
  background: #fff;
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 28px;
  position: relative;
}
.lb-overlay__sheet h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 400;
}
.lb-overlay__sub {
  font-size: 13px;
  color: var(--text-light);
  margin: 0 0 20px;
  line-height: 1.6;
}
.lb-overlay__btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 4px;
}
.lb-overlay__btns .lb-btn {
  height: 44px;
  padding: 0 22px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lookbook-saved-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.lookbook-saved-list figure {
  margin: 0;
}
.lookbook-saved-list .lookbook-saved-list__thumb {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-light);
}
.lookbook-saved-list button {
  width: 100%;
  background: none;
  border: 0;
  padding: 6px 0 0;
  font-size: 11px;
  color: var(--text-light);
}
.lookbook-saved-empty {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 20px;
}

.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}
.field input,
.field select {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: #fff;
}
.lookbook-email__error {
  font-size: 12px;
  color: #a32d2d;
  margin: -8px 0 12px;
}
.lookbook-email__error[hidden] {
  display: none;
}
.lookbook-email__consent-notice {
  font-size: 12px;
  color: var(--text-light);
  margin: 18px 0 0;
}
.lookbook-email__consent-notice a {
  color: inherit;
  text-decoration: underline;
}

/* Notify-me suppression (enable_notify_me off): the back-in-stock
   trigger on a sold-out product-grid-item is injected by Klaviyo's
   onsite.js as .klaviyo-bis-trigger, not something Liquid renders
   conditionally -- see assets/os-bis.js. Hidden with CSS, scoped to
   this section only, rather than touching the sitewide feature. */
[data-lookbook][data-enable-notify-me="false"] .klaviyo-bis-trigger {
  display: none !important;
}