/** Shopify CDN: Minification failed

Line 219:14 Unexpected ")"
Line 309:2 Unexpected ")"

**/
/* Kit module ("Complete the set / kit"), make-room panel and kit offer dialog, ported from the clone
   (pdp-nuori/kit/complete-the-kit.css and bogo/second-item-offer.css); the dialog runs on a native <dialog>. */

.nu-kit__stage--plain {
  grid-template-columns: minmax(0, 1fr);
}

.nu-offer__options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* "Complete the set / kit" (pdp-nuori/kit/CompleteTheKit.tsx), between the size picker and Add to cart.
   Built from the template's pieces: the small caps label of "See it worn" for the title (12/13.2, +0.3, caps, 0.6),
   the --an-surface tile with the 8px radius for the drawing, the an-t-30 price step, the 14/17.5 body and the 1px
   black focus outline at 2px; the rows open with the accordions' grid-rows easing (--an-pdp-dur / --an-pdp-ease).
   Contrast (WCAG, computed from the values): 0.6 black on white = #666, 5.74:1; on the surface rgb(242) = #616161,
   5.45:1; black on white 21:1, on the surface 18.8:1; unticked box border 0.6 black = 5.74:1 (3:1 needed for a
   control's edge); ticked box white check on black 21:1. Hit areas: every row header is ≥ 44px tall and spans the
   column; the swatches and chips are the OptionPicker's 44px. */

.nu-kit {
  --nu-kit-muted: var(--nu-muted);
  /* Inner height of the drawing tile; the figure fits it (KitComposite sets --nu-kit-aspect). */
  --nu-kit-h: 236px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nu-kit :where(h2, p, ul) {
  margin: 0;
}

.nu-kit__title {
  font-size: 12px;
  line-height: 13.2px;
  letter-spacing: 0.3px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--nu-kit-muted);
}

/* ---------- The drawing and the live price ---------- */

.nu-kit__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--nu-radius);
  background: var(--nu-surface);
}

/* The outfit box: as tall as the tile allows, as wide as its pieces (never distorted: the width is clamped and the
   height follows the aspect ratio). */
.nu-kit__figure {
  position: relative;
  justify-self: center;
  width: min(100%, calc(var(--nu-kit-h) * var(--nu-kit-aspect, 0.5)));
  aspect-ratio: var(--nu-kit-aspect, 0.5);
  max-height: var(--nu-kit-h);
}

.nu-kit__piece {
  position: absolute;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.575s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* An unticked piece stays in place, faint: the full kit reads at a glance, ticking it fills it in. */
.nu-kit__piece.is-off {
  opacity: 0.28;
}

.nu-kit__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.nu-kit__summary-label {
  font-size: 12px;
  line-height: 13.2px;
  letter-spacing: 0.3px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--nu-kit-muted);
}

.nu-kit__summary-price {
  font-size: 30px;
  line-height: 31.5px;
  letter-spacing: -1.25px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.nu-kit__summary-gift {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 500;
}

.nu-kit__summary-full,
.nu-kit__summary-hint {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 400;
  color: var(--nu-kit-muted);
}

.nu-kit__summary-hint {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.4px;
  text-wrap: balance;
}

/* ---------- Rows ---------- */

.nu-kit__rows {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.nu-kit__row + .nu-kit__row {
  border-top: 1px solid var(--nu-line);
}

/* The whole header is the checkbox's label: one 44px+ target across the column. */
.nu-kit__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 0 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nu-kit__row.is-current .nu-kit__head {
  cursor: default;
}

/* The native checkbox keeps the semantics and the keyboard (Space); it sits invisibly over the drawn box. */
.nu-kit__check {
  position: absolute;
  left: 0;
  top: calc(50% + 4px);
  width: 20px;
  height: 20px;
  margin: -10px 0 0;
  opacity: 0;
  cursor: inherit;
}

.nu-kit__box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--nu-kit-muted);
  color: var(--nu-white);
  transition: background-color 0.2s var(--nu-ease), box-shadow 0.2s var(--nu-ease);
}

.nu-kit__box svg {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--nu-ease), transform 0.2s var(--nu-ease);
}

.nu-kit__check:checked + .nu-kit__box {
  background: var(--nu-black);
  box-shadow: inset 0 0 0 1px var(--nu-black);
}

.nu-kit__check:checked + .nu-kit__box svg {
  opacity: 1;
  transform: none;
}

.nu-kit__check[aria-disabled='true'] {
  cursor: default;
}

.nu-kit__check:focus-visible + .nu-kit__box {
  outline: 1px solid var(--nu-black);
  outline-offset: 2px;
}

@media (hover: hover) {
  .nu-kit__row:not(.is-current) .nu-kit__head:hover .nu-kit__check:not(:checked) + .nu-kit__box {
    background: rgb(233, 233, 233);
  }
}

.nu-kit__price) {
  opacity: 0.4;
}

.nu-kit__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 500;
}

/* The engine's price for the piece in its group, and its own price under it when they differ (words, not a
   strike-through: "€52 in the kit" / "€98 on its own"). */
.nu-kit__price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nu-kit__price-now {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 500;
  white-space: nowrap;
}

.nu-kit__price-alone {
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: -0.4px;
  color: var(--nu-kit-muted);
  white-space: nowrap;
}

/* "This item · Pink · S", "Pink · S", or the reason a piece cannot be added; aligned with the name. */
.nu-kit__meta {
  padding: 2px 0 10px 32px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.4px;
  color: var(--nu-kit-muted);
}

.nu-kit__meta.is-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A ticked piece's colour and size, opening like the template's accordions. */
.nu-kit__opts {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.575s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nu-kit__opts.is-open {
  grid-template-rows: 1fr;
}

.nu-kit__opts-inner {
  min-height: 0;
  overflow: hidden;
}

.nu-kit__opts-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0 16px 32px;
}

.nu-kit__note {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.4px;
  color: var(--nu-kit-muted);
}

ul) {
  margin: 0;
}

/* ---------- Phones ---------- */

@media (max-width: 809.98px) {
  .nu-kit {
    --nu-kit-h: 220px;
    padding: 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nu-kit__piece,
  .nu-kit__box,
  .nu-kit__box svg,
  .nu-kit__opts {
    transition: none;
  }
}

/* Add-to-cart offer dialog ("Get a second legging for €60", "Complete the set: Ruched Top for €40"; numbers from the
   pricing engine, bogo/offer.ts), in the template's modal language (sections/welcome-popup.css: 0.25 black
   backdrop, white card with a 10px radius, 800px max width, 24px from the viewport, 0.3s cubic-bezier(0.4, 0, 0.2, 1)
   fade + 20px rise, the 14px "x" close) and the product section's controls (its OptionPicker for colour and size,
   the Add to cart fill and hover, the underlined text link).
   Changes for the HIG floor, all on purpose: controls are 44px (the PDP buy row is 40px), muted text is 0.6 black
   (5.7:1 on white, 5.5:1 on the surface) instead of the template's 0.4 (2.9:1), and the primary button is the cart
   drawer's 48px Checkout height. Desktop/tablet: copy left, packshot right on --an-surface. ≤809px: a sheet docked to
   the bottom edge, packshot on top. Everything is reset here because the dialog is portalled to <body>. */

.nu-offer {
  --nu-offer-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nu-offer-muted: var(--nu-muted);
  width: calc(100% - 48px);
  max-width: 800px;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nu-black);
  overflow: visible;
  outline: none;
}

.nu-offer::backdrop {
  background: rgb(0 0 0 / 0.25);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nu-offer.is-open::backdrop {
  opacity: 1;
}

.nu-offer :where(h2, p, figure) { margin: 0; }

/* Only the dialog's own buttons: the option buttons keep the OptionPicker's styles. */
.nu-offer :where(.nu-offer__close, .nu-offer__primary, .nu-offer__secondary) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


.nu-offer__card {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 10px;
  background: var(--nu-white);
  outline: none;
  transform: translateY(20px);
  transition: transform 0.3s var(--nu-offer-ease);
}

.nu-offer.is-open .nu-offer__card { transform: none; }

.nu-offer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.nu-offer__card {
  opacity: 0;
  transition: transform 0.3s var(--nu-offer-ease), opacity 0.3s var(--nu-offer-ease);
}

.nu-offer.is-open .nu-offer__card {
  opacity: 1;
}

/* Close: the template's 14px "x" (two 16×1 lines) in a 44px hit area; it turns 90° on hover like the drawer's. */
.nu-offer :where(.nu-offer__close) {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--nu-radius);
}

.nu-offer__x {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 0.67s linear(0, 0.117, 0.302, 0.465, 0.593, 0.692, 0.767, 0.824, 0.867, 0.899, 0.924, 0.943, 0.957, 0.967, 0.975, 0.981, 0.986, 0.989, 0.992, 0.994, 0.995, 0.997, 0.997, 0.998, 1);
}

.nu-offer__x > span {
  position: absolute;
  top: 6.5px;
  left: -1px;
  width: 16px;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
}

.nu-offer__x > span + span { transform: rotate(45deg); }

@media (hover: hover) {
  .nu-offer__close:hover .nu-offer__x { transform: rotate(90deg); }
}

/* ── Copy column ───────────────────────────────────────────────────────── */
.nu-offer__content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 40px;
}

.nu-offer__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 24px;
}

/* The popup's 30px title (an-t-30). */
.nu-offer__title {
  font-size: 30px;
  line-height: 31.5px;
  letter-spacing: -1.25px;
  font-weight: 500;
}

/* The product description's 14px regular. */
.nu-offer__lead {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 400;
}

/* The offer figure, then its comparison in words at 0.6 ("€78 on its own", "€176 separately"; never struck), an-t-18. */
.nu-offer__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -0.9px;
  font-weight: 500;
  white-space: nowrap;
}

.nu-offer__price-was {
  color: var(--nu-offer-muted);
  font-size: 14px;
  letter-spacing: -0.5px;
}

.nu-offer__options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.nu-offer__close:focus-visible,
.nu-offer__primary:focus-visible,
.nu-offer__secondary:focus-visible {
  outline: 1px solid var(--nu-black);
  outline-offset: 2px;
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.nu-offer__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

/* Add to cart's black fill and measured hover (rgb(46,46,46) in ~0.5s), at the cart Checkout's 48px. */
.nu-offer :where(.nu-offer__primary) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--nu-radius);
  background: var(--nu-black);
  color: var(--nu-white);
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.55s cubic-bezier(0.25, 0.8, 0.5, 1);
}

@media (hover: hover) {
  .nu-offer :where(.nu-offer__primary:hover) {
    background: rgb(46, 46, 46);
    transition: background-color 0.5s cubic-bezier(0.15, 0.8, 0.2, 1);
  }
}

/* Press state, as the popup's Sign up button. */
.nu-offer :where(.nu-offer__primary:active) { background: rgb(51, 51, 51); }

.nu-offer :where(.nu-offer__primary:disabled) {
  opacity: 0.4;
  cursor: default;
}

/* "No thanks": the template's underlined link (the 0.2 line slides out on hover) at 14px black, 44px tall. */
.nu-offer :where(.nu-offer__secondary) {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
}

.nu-offer__secondary-text {
  position: relative;
  display: block;
  padding-bottom: 4px;
  overflow: hidden;
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.nu-offer__secondary-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--nu-line);
  transition: transform 0.65s cubic-bezier(0.7, 0, 0.3, 1);
}

.nu-offer__secondary:focus-visible .nu-offer__secondary-line { transform: translateX(calc(100% + 3px)); }

@media (hover: hover) {
  .nu-offer__secondary:hover .nu-offer__secondary-line { transform: translateX(calc(100% + 3px)); }
}

.nu-offer__secondary:active .nu-offer__secondary-text { opacity: 0.6; }

/* ── Packshot column ───────────────────────────────────────────────────── */
.nu-offer__media {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--nu-surface);
}

.nu-offer__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
}

.nu-offer__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* The garment alone sits inside the surface with air around it; a photo (no packshot yet) fills the stage. */
.nu-offer__img--packshot {
  padding: 56px 32px 16px;
  object-fit: contain;
}

.nu-offer__img--photo {
  object-fit: cover;
  object-position: 50% 30%;
}

/* The product card's badge: white, 7px radius, 11px. */
.nu-offer__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 7px;
  background: var(--nu-white);
  color: var(--nu-black);
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.nu-offer__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}

.nu-offer__name {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
}

.nu-offer__colour {
  flex: none;
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: -0.4px;
  color: var(--nu-offer-muted);
}

/* ── The kit offer (KitOfferModal): price line with the gift, one block per piece, the kit drawing ── */
.nu-offer__total {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nu-offer__gift {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 500;
}

.nu-offer__note {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.4px;
  color: var(--nu-offer-muted);
  font-variant-numeric: tabular-nums;
}

/* One block per piece offered, on the kit module's hairlines: name and price, then its colour and size. */
.nu-offer__pieces {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nu-offer__piece {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--nu-line);
}

.nu-offer__piece:last-child {
  border-bottom: 1px solid var(--nu-line);
}

.nu-offer__piece-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.nu-offer__piece-name {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 500;
}

.nu-offer__piece-price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nu-offer__piece-now {
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: -0.5px;
  font-weight: 500;
  white-space: nowrap;
}

.nu-offer__piece-alone {
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: -0.4px;
  color: var(--nu-offer-muted);
  white-space: nowrap;
}

.nu-offer--kit .nu-offer__options {
  gap: 16px;
}

/* The kit drawing (kit/KitComposite) centred on the surface, as tall as the column allows. */
.nu-offer__stage--kit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 24px;
}

.nu-offer__kit {
  --nu-kit-h: 380px;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nu-offer__body { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ── Phone: a sheet on the bottom edge, packshot band on top (clone bogo/second-item-offer.css) ───────────── */
@media (max-width: 809.98px) {
  .nu-offer {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: auto 0 0;
  }

  .nu-offer__card {
    max-height: calc(100dvh - 12px);
    border-radius: 10px 10px 0 0;
  }

  .nu-offer__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .nu-offer__media {
    order: -1;
    min-height: 0;
  }

  .nu-offer__stage {
    flex: none;
    height: 200px;
    min-height: 0;
  }

  .nu-offer__img--packshot { padding: 20px 20px 8px; }

  .nu-offer__stage--kit { padding: 44px 20px 12px; }

  .nu-offer__kit { --nu-kit-h: 144px; }

  .nu-offer__caption { padding: 12px 20px; }

  .nu-offer__content {
    gap: 20px;
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom));
  }

  .nu-offer__text { padding-right: 0; }

  .nu-offer__title {
    font-size: 24px;
    line-height: 25.2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nu-offer,
  .nu-offer__card,
  .nu-offer__x,
  .nu-offer__secondary-line {
    transition-duration: 0.01s;
  }

  .nu-offer__card { transform: none; }
}