/** Shopify CDN: Minification failed

Line 106:66 Unexpected "*"

**/

/* =========================
   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;
}
/* Desktop film + optional portrait mobile cut -- same 749px breakpoint
   as the rest of this section's own JS (isMobile()). When there's no
   mobile film, --desktop stays visible throughout, letterboxed, same
   as before this pair existed. */
.lookbook-shoppable__hero-video--mobile {
  display: none;
}
@media (max-width: 749px) {
  .lookbook-shoppable__hero-video--desktop {
    display: none;
  }
  .lookbook-shoppable__hero-video--mobile {
    display: block;
  }
}

/* ---- 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;
}