/* Hide native cart sections except our set cart view (reviews block hidden too) */
  .setcart-v2-active #MainContent > *:not([id$="__set-cart-view"]) {
    display: none !important;
  }
  /* Kill site chrome on the cart for a focused checkout experience */
  .setcart-v2-active header,
  .setcart-v2-active footer,
  .setcart-v2-active .shopify-section-group-header-group,
  .setcart-v2-active .shopify-section-group-footer-group,
  .setcart-v2-active .announcement-bar-section,
  .setcart-v2-active #shopify-section-announcement-bar,
  .setcart-v2-active #shopify-section-header,
  .setcart-v2-active [id*="announcement-bar"],
  .setcart-v2-active [id*="header-group"] { display: none !important; }
  body.setcart-v2-active { margin: 0; padding: 0; }

  /* X close button — top-right, fixed, big + thin */
  #scv-close-btn {
    position: fixed;
    top: max(8px, env(safe-area-inset-top, 8px));
    right: 8px;
    z-index: 99999;
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #scv-close-btn svg { width: 36px; height: 36px; }

  /* Cart title — responsive so long stage labels never collide with the fixed X button.
     X reserves the right-most 64px (right:8 + width:56). We pad both sides equally so
     the centered title stays clear at every width, and clamp the font on narrow phones. */
  .scv-bag-title {
    font-size: clamp(14px, 5vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1f2937;
    text-align: center;
    padding: 0 64px;
    margin: 0;
    line-height: 1.15;
    word-break: break-word;
    hyphens: auto;
  }
  @media (min-width: 768px) {
    .scv-bag-title {
      font-size: 22px;
      letter-spacing: 0.05em;
      padding: 0 80px;
    }
  }

  @keyframes mesTilePulse{0%,100%{background:#C4908A;}50%{background:#D4A59E;}}

  /* Inline express checkout block sits at bottom of cart content, default Shopify layout */
  #scv-express-mount {
    max-width: 1100px;
    margin: 8px auto 32px;
    padding: 0 20px;
  }
  #scv-express-mount .cart__dynamic-checkout-buttons {
    max-width: 480px;
    margin: 0 auto;
  }
  /* Mobile: 2 wallet buttons per row, smaller height. Scoped to #scv-express-mount only. */
  @media (max-width: 768px) {
    #scv-express-mount {
      /* Wallet web-components read these CSS vars for their internal button heights */
      --apple-pay-button-height: 40px;
      --shop-pay-button-height: 40px;
      --google-pay-button-height: 40px;
    }
    #scv-express-mount .wallet-cart-grid,
    #scv-express-mount .wallet-button-wrapper > ul {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    #scv-express-mount .wallet-cart-button-container {
      width: auto !important;
      min-width: 0 !important;
      margin: 0 !important;
    }
    /* Lone trailing button (e.g. PayPal when only 3 wallets render) spans both columns */
    #scv-express-mount .wallet-cart-button-container:last-child:nth-child(odd) {
      grid-column: 1 / -1 !important;
    }
    #scv-express-mount .wallet-cart-button,
    #scv-express-mount .wallet-cart-button__skeleton {
      width: 100% !important;
      height: 40px !important;
      min-height: 40px !important;
    }
  }

  /* Upsell horizontal carousel */
  [data-row-upsell-track] { scrollbar-width: none; }
  [data-row-upsell-track]::-webkit-scrollbar { display: none; }

  /* OUR POLICIES accordions */
  .scv-policy summary { list-style: none; }
  .scv-policy summary::-webkit-details-marker { display: none; }

  /* Locked-set frame: header sits cleanly ABOVE the cream container instead
     of riding the border (the old fieldset/legend trick).  The .scv-set-box
     fieldset still wraps the content for semantics + hosts the cream bg. */
  .scv-set-frame { margin: 12px 0 14px; }
  .scv-set-header {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 0.18em;
    font-variant: small-caps;
    text-transform: lowercase;
    padding: 0 4px 0;
    line-height: 1;
    margin-bottom: 0;
  }
  @media (min-width: 768px) {
    .scv-set-header { font-size: 20px; }
  }

  /* First sub-group inside the locked-set: title on the left, price block
     overlaid absolutely on the right (big sale total + crossed-out RRP
     underneath).  Absolute positioning keeps the row's intrinsic height to
     just the title line so the item rows below sit close to the title, not
     pushed down by the taller price column. */
  .scv-pack-subgroup--with-price {
    position: relative;
    padding-right: 96px;
  }
  .scv-pack-subgroup--with-price .scv-pack-subgroup-title { display: block; }
  .scv-pack-subgroup-price {
    position: absolute;
    top: -4px;
    right: 0;
    text-align: right;
    line-height: 1;
  }
  .scv-pack-subgroup-price-now {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.01em;
    line-height: 1;
  }
  .scv-pack-subgroup-price-rrp {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
    margin-top: 2px;
    line-height: 1;
  }
  @media (min-width: 768px) {
    .scv-pack-subgroup--with-price { padding-right: 110px; }
    .scv-pack-subgroup-price-now { font-size: 28px; }
    .scv-pack-subgroup-price-rrp { font-size: 14px; }
  }

  /* Hide the journey-counts summary block when the locked-set is collapsed.
     :has() lets us condition on a descendant's [open] state with no JS. */
  #set-cart-inner:has(.scv-pack-details:not([open])) .scv-journey-counts {
    display: none;
  }

  /* Bundle-set collapsed pack view (fanned images + concise list) */
  .scv-pack-details summary { list-style: none; cursor: pointer; padding: 6px 4px 4px; }
  /* Browser default for <fieldset> is `min-inline-size: min-content`, which
     means it sizes to its widest child. With `white-space: nowrap` inside,
     the fieldset grows past its parent and the page scrolls horizontally.
     Override here so the fieldset respects its parent width — every child
     constraint downstream (min-width:0, overflow:hidden, JS font auto-fit)
     only works once this is set. */
  fieldset[data-set-box] { min-inline-size: 0; min-width: 0; }
  .scv-pack-details summary::-webkit-details-marker { display: none; }
  .scv-pack-details[open] .scv-pack-collapsed-content { display: none; }
  .scv-pack-details:not([open]) .t-expanded { display: none; }
  .scv-pack-details[open] .t-collapsed { display: none; }
  .scv-pack-side-by-side { display: flex; gap: 24px; align-items: flex-start; }
  .scv-pack-fan { position: relative; width: 110px; height: 138px; flex-shrink: 0; margin-top: 6px; }
  .scv-pack-fan img { position: absolute; top: 0; left: 50%; width: 96px; height: 120px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.12); transform-origin: 50% 95%; margin-left: -48px; }
  /* Product list now sits below the side-by-side block (was the right column).
     Full-width, no padding-left since the fan no longer sits beside it. */
  .scv-pack-text { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
  .scv-pack-row { padding: 1px 0; }
  .scv-pack-row .r1 { font-family: var(--font-heading-family,system-ui,-apple-system,sans-serif); font-size: 13px; font-weight: 500; color: #1f2937; line-height: 1.15; letter-spacing: -0.01em; }
  .scv-pack-row .r2 { font-size: 11px; font-weight: 400; color: #6b7280; line-height: 1.25; letter-spacing: 0.02em; text-transform: lowercase; margin-top: 0; }
  /* Sub-group title — moment-framed CTA above each cluster of items. Italic
     + warm accent so it reads as voice, not category. Top margin separates
     groups; first one has no margin so it hugs the fan-image baseline. */
  /* Locked-set collapsed summary section header — descriptive copy in
     uppercase eyebrow style. Letter-spacing tightened so the long copy
     (e.g. "FOR EVERY DAY UNTIL YOUR DUE DATE →") fits one row. */
  .scv-pack-subgroup {
    font-family: var(--font-heading-family,system-ui,-apple-system,sans-serif);
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-top: 5px;
  }
  /* Sub-group title sits closer to the first item under it (almost touching). */
  .scv-pack-subgroup + .scv-pack-row { margin-top: 1px; }
  /* Single-row subgroups (no price) keep their nowrap+ellipsis treatment so
     long copy doesn't blow the row out.  The with-price variant lays out as
     flex (above) and must allow normal wrapping for the price column. */
  .scv-pack-subgroup:not(.scv-pack-subgroup--with-price) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scv-pack-subgroup:first-child { margin-top: 0; }
  /* Desktop: scale fan + text generously, more gap, breathing room */
  @media (min-width: 768px) {
    .scv-pack-side-by-side { gap: 56px; align-items: center; padding: 8px 16px; }
    .scv-pack-fan { width: 200px; height: 250px; margin-top: 10px; }
    .scv-pack-fan img { width: 170px; height: 215px; margin-left: -85px; border-width: 3px; }
    .scv-pack-text { gap: 0; margin-top: 12px; }
    .scv-pack-row .r1 { font-size: 15px; line-height: 1.2; }
    .scv-pack-row .r2 { font-size: 13px; line-height: 1.25; }
    .scv-pack-subgroup { font-size: 12px; letter-spacing: 0.05em; margin-top: 7px; }
    .scv-set-row-subgroup { font-size: 12px; letter-spacing: 0.05em; }
    .scv-pack-preorder { font-size: 12px; }
  }
  @media (min-width: 1024px) {
    .scv-pack-side-by-side { gap: 88px; padding: 12px 28px; }
    .scv-pack-fan { width: 260px; height: 325px; }
    .scv-pack-fan img { width: 220px; height: 275px; margin-left: -110px; }
    .scv-pack-text { margin-top: 20px; }
    .scv-pack-row .r1 { font-size: 18px; }
    .scv-pack-row .r2 { font-size: 14px; }
  }
  .scv-pack-preorder { font-size: 10px; color: #E8846C; line-height: 1.3; padding-top: 2px; }
  /* Bottom-of-fieldset preorder variant — last line in the set box.
     Acts as the urgency closer; centered, tight. */
  .scv-pack-preorder-bottom { padding: 4px 12px 8px; text-align: center; font-size: 11px; line-height: 1.25; margin-top: 0; }
  @media (min-width: 768px) { .scv-pack-preorder-bottom { font-size: 12px; padding: 4px 16px 10px; } }
  /* "Why mums choose this set" — rational close after the emotional sub-groups.
     Soft cream band, uppercase muted heading, tight teal-check bullet list. */
  .scv-pack-why { padding: 12px 16px 10px; margin-top: 12px; background: #fafaf7; border-radius: 4px; }
  /* When the why-mums block lives inside .scv-pack-side-by-side (right flex
     column), drop the top margin and let it stretch to fill remaining width. */
  .scv-pack-side-by-side .scv-pack-why { margin-top: 0; flex: 1; min-width: 0; }

  .scv-pack-why-title { font-family: var(--font-heading-family,system-ui,-apple-system,sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; margin: 0 0 6px; }
  .scv-pack-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
  .scv-pack-why-list li { font-size: 12px; font-weight: 400; color: #1f2937; line-height: 1.35; padding-left: 18px; position: relative; }
  .scv-pack-why-list li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: #3D9A8B; font-weight: 700; }
  @media (min-width: 768px) {
    .scv-pack-why { padding: 14px 20px 12px; margin-top: 16px; }
    .scv-pack-why-title { font-size: 11px; margin-bottom: 8px; }
    .scv-pack-why-list { gap: 5px; }
    .scv-pack-why-list li { font-size: 13px; padding-left: 22px; }
  }
  /* UGC pitch row: rotating-clip circle (left) + headline + sub (right).
     Layout is constrained at every level (overflow:hidden + max-width:100% +
     min-width:0 on the flex item) so nowrap can't push the parent past the
     viewport. Font is auto-fit by JS — see fitMumsTextOneLine() below — which
     reads the actual rendered width and shrinks the font until it fits one row. */
  .scv-pack-mums { display: flex; align-items: center; gap: 12px; padding: 14px 12px 8px; cursor: pointer; overflow: hidden; max-width: 100%; box-sizing: border-box; }
  .scv-pack-mums[hidden] { display: none; }
  .scv-pack-details[open] .scv-pack-mums { display: none; }
  .scv-mums-circle { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: #f3f4f6; overflow: hidden; position: relative; }
  .scv-mums-circle video, .scv-mums-circle img { display: block; }
  .scv-mums-text { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
  .scv-mums-copy { font-size: 14px; font-weight: 500; color: #1f2937; line-height: 1.3; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(31,41,55,0.35); white-space: nowrap; overflow: hidden; }
  .scv-mums-sub { font-size: 12px; font-weight: 400; color: #9ca3af; letter-spacing: 0.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; }
  @media (min-width: 768px) {
    .scv-pack-mums { gap: 14px; padding: 16px 16px 10px; }
    .scv-mums-circle { width: 64px; height: 64px; }
  }
  /* Forming-set UGC row — circle + gap match the per-item product rows above
     (32/38px circle, no horizontal padding) so this row aligns underneath the
     items list. Text style/colour unchanged. */
  .scv-pack-mums-forming { margin-top: 16px; padding: 20px 0 8px !important; gap: 0 !important; }
  .scv-pack-mums-forming .scv-mums-circle { width: 32px !important; height: 32px !important; }
  .scv-pack-mums-forming .scv-mums-text { padding-left: 12px; }
  @media (min-width: 768px) {
    .scv-pack-mums-forming .scv-mums-circle { width: 38px !important; height: 38px !important; }
  }
  .scv-pack-toggle { font-size: 11px; color: #4b5563; text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0.02em; padding: 2px 0 6px; text-align: center; }
  /* "100-day perfect fit guarantee" reassurance link directly under the
     checkout CTA. Underlined, small, muted — opens the same modal as the
     PDP shield badge. */
  .scv-fit-guarantee-link { display: block; text-align: center; margin-top: 8px; font-size: 11px; font-weight: 400; color: #6b7280; text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0.02em; cursor: pointer; }
  .scv-fit-guarantee-link:hover { color: #1f2937; }
  /* Locked-set expanded view section divider — same tightened eyebrow
     style as .scv-pack-subgroup so the descriptive copy stays one row. */
  .scv-set-row-subgroup {
    font-family: var(--font-heading-family,system-ui,-apple-system,sans-serif);
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 14px 0 6px;
    margin-top: 0;
    border-top: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Forming-set sub-group accordion. Items always render in rows; the
     [data-open] state controls per-row appearance:
       closed → image shrinks to a circle; qty stepper, size, and per-item
       UGC row all hide; row spacing tightens.
       open   → full layout (image 140×175, qty stepper, size, UGC row).
     Click on the red heading (toggle button) flips the state. */
  .scv-subgroup-acc { margin: 0; }
  .scv-subgroup-acc + .scv-subgroup-acc { margin-top: 4px; }
  /* Empty sub-group row — eyebrow header, then "items: 0" stacked below.
     No chevron, no expandable body. The "items: 0" sits like a filled-item
     row would, just without the image-circle indent (there's no circle to
     leave room for). Renders for missing canonical journey stages so the
     bag reads as a journey-with-gaps the user can fill in. */
  .scv-subgroup-acc-empty .scv-subgroup-empty-row {
    display: block;
    padding: 14px 0 6px;
  }
  .scv-subgroup-acc-empty .scv-subgroup-eyebrow { display: block; opacity: 0.55; }
  .scv-subgroup-empty-count {
    display: block;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-top: 4px;
  }
  @media (min-width: 768px) {
    .scv-subgroup-empty-count { font-size: 13px; }
  }

  /* Journey-row "see the X range →" and "add the [other] too" augmentations.
     Layout mirrors a product row in collapsed mode: circle on the left at the
     same indent + size as the image-circle, title-style text on the right.
     The circle becomes either:
       - "see range" → left-arrow glyph (empty stage CTA → SPA-swap to seed)
       - "add the other too" → plus glyph (paired stage missing one kind → SPA-swap)
     Both are <button>s for keyboard reachability; clicks routed via data-attrs. */
  /* Sized to exactly match a collapsed cart row: 32px circle on mobile,
     38px on tablet (mirror of [data-row-imgcol] img rules); title size
     mirrors the closed-accordion item-title rule above. */
  .scv-journey-aug-row {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    font-family: var(--font-heading-family,system-ui,-apple-system,sans-serif);
  }
  .scv-journey-aug-circle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
  }
  .scv-journey-aug-circle svg { width: 20px; height: 20px; stroke-width: 1.75; }
  .scv-journey-aug-label {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1.2;
    letter-spacing: 0.06em;
  }
  /* Price + RRP on the same row as the "add the X too" label. Same colour
     as the label; a bit smaller than the 15px label, RRP smaller again. */
  .scv-journey-aug-price {
    flex-shrink: 0;
    padding-left: 10px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .scv-journey-aug-price s {
    margin-left: 5px;
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
  }
  /* Long breastfeeding empty-stage variants (cart-aware copy) — drops to a
     smaller font + tighter line-height so multi-clause text fits cleanly. */
  .scv-journey-aug-label--long {
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.02em;
  }
  /* Empty-stage row: replace the old "items: 0" treatment with the see-range
     left-arrow CTA. Keep the eyebrow visible above as before. */
  .scv-subgroup-acc-empty {
    border-top: 1px solid #f3f4f6;
    padding: 4px 0 0;
  }
  .scv-subgroup-acc-empty .scv-subgroup-empty-row {
    padding: 14px 0 0;
  }
  .scv-subgroup-acc-empty .scv-journey-aug-row { padding-top: 6px; padding-bottom: 14px; }

  /* Small "+" pip next to the ×N qty suffix, shown only when the journey has
     both kinds in the cart (handled in render — see __journeyKinds). Tap →
     increments the line's quantity. The fade-in animation runs once on first
     paint so adding the 2nd kind feels reactive. */
  /* +qty pip: same colour + weight as the ×N suffix (#9ca3af), no background.
     Acts as inline text glyph rather than a chip. */
  .scv-row-qty-suffix-plus {
    display: inline;
    margin-left: 4px;
    background: none;
    border: none;
    padding: 0;
    color: #9ca3af;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    vertical-align: baseline;
    animation: scvQtyPlusFadeIn 320ms ease forwards;
    opacity: 0;
  }
  @keyframes scvQtyPlusFadeIn { to { opacity: 1; } }
  .scv-row-qty-suffix-plus:active { color: #6b7280; }
  @media (min-width: 768px) {
    .scv-journey-aug-circle { width: 38px; height: 38px; }
    .scv-journey-aug-circle svg { width: 22px; height: 22px; }
  }

  .scv-subgroup-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 8px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
  .scv-subgroup-toggle .scv-set-row-subgroup { padding: 0; border-top: none; margin-top: 0; flex: 1; min-width: 0; }
  /* Lucide chevron-down SVG — uses currentColor so it inherits the
     stage-colour rule below. Larger + visible vs the text glyph triangle. */
  .scv-subgroup-chevron { width: 20px; height: 20px; flex-shrink: 0; display: block; transition: transform 220ms ease, color 220ms ease; }
  @media (min-width: 768px) { .scv-subgroup-chevron { width: 22px; height: 22px; } }
  .scv-subgroup-acc[data-open="true"] .scv-subgroup-chevron { transform: rotate(-180deg); }
  /* Stage-colour palette — wardrobe-muted, distinguishable. All on the
     warm/muted side of the wheel so the cart still feels unified. Recovery
     uses slate-blue (not green) — sage felt clinical. Applied to any element
     with data-stage-color so child text inherits via var(--stage-color). */
  [data-stage-color="pregnancy"]     { --stage-color: #B26B5C; }
  [data-stage-color="recovery"]      { --stage-color: #6B7C95; }
  [data-stage-color="breastfeeding"] { --stage-color: #9C6B7E; }
  [data-stage-color="mum-uniform"]   { --stage-color: #7B6644; }
  [data-stage-color="shapewear"]     { --stage-color: #5C5470; }
  [data-stage-color="default"]       { --stage-color: #374151; }
  /* Forming-set accordion headings + chevron + title */
  .scv-subgroup-eyebrow,
  .scv-subgroup-acc .scv-subgroup-chevron { color: var(--stage-color, #374151) !important; }
  .scv-subgroup-acc [data-meta-row][data-meta-idx="0"] { color: var(--stage-color, #374151) !important; }
  /* Locked-set collapsed summary headings + per-item titles */
  .scv-pack-subgroup[data-stage-color] { color: var(--stage-color, #b42318) !important; }
  .scv-pack-row[data-stage-color] .r1 { color: var(--stage-color, #1f2937) !important; }
  /* Locked-set expanded view section dividers + per-item titles */
  .scv-set-row-subgroup[data-stage-color] { color: var(--stage-color, #b42318) !important; }
  [data-cart-row][data-stage-color] [data-meta-row][data-meta-idx="0"] { color: var(--stage-color, #1f2937) !important; }
  /* Closed: editorial eyebrow label (uppercase, wide-tracked, muted). Hide the
     long descriptive heading. Open: hide eyebrow, show the long heading. */
  .scv-subgroup-eyebrow {
    font-family: var(--font-heading-family,system-ui,-apple-system,sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #78716c;
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.2;
  }
  /* Inside the forming-set accordion, the eyebrow IS the heading in both
     closed and open states — the verbose `.scv-set-row-subgroup` long form
     never shows here. (It's still used outside the accordion for the locked
     5+ set view, where existing red-italic styling applies.) */
  .scv-subgroup-acc .scv-set-row-subgroup { display: none !important; }
  @media (min-width: 768px) {
    .scv-subgroup-eyebrow { font-size: 12px; letter-spacing: 0.24em; }
  }

  /* Compact row state (when section is closed). Override the inline-style
     image dims (140×175) via !important + reshape into a small circle.
     Hide qty stepper, size row, per-item UGC row, modifier row, any discount
     message rows. Vertically center the row so the title sits next to the
     circle's centre — needs !important since the inline data-cart-row style
     sets align-items: flex-start. */
  .scv-subgroup-acc[data-open="false"] [data-cart-row] {
    padding: 6px 0 !important;
    border-top: none !important;
    align-items: center !important;
    cursor: pointer;
  }
  .scv-subgroup-acc[data-open="false"] [data-row-imgcol] { width: 32px !important; gap: 0 !important; align-self: center !important; }
  .scv-subgroup-acc[data-open="false"] [data-row-imgcol] img { width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover; }
  /* "×N" qty suffix appended to the title in closed state. Slight tint + tight
     space before so it reads as a qualifier, not part of the product name. */
  .scv-row-qty-suffix { color: #9ca3af; font-weight: 500; margin-left: 4px; letter-spacing: 0.02em; }
  .scv-subgroup-acc[data-open="false"] [data-row-imgcol] a { cursor: pointer; }
  .scv-subgroup-acc[data-open="false"] [data-row-qty],
  .scv-subgroup-acc[data-open="false"] [data-row-qty-static],
  .scv-subgroup-acc[data-open="false"] [data-row-size],
  .scv-subgroup-acc[data-open="false"] [data-row-price-inline],
  .scv-subgroup-acc[data-open="false"] [data-discount-msg],
  .scv-subgroup-acc[data-open="false"] [data-ship-note],
  .scv-subgroup-acc[data-open="false"] [data-meta-row][data-meta-idx="1"],
  .scv-subgroup-acc[data-open="false"] .scv-set-row-ugc { display: none !important; }
  /* Title: wider letter-spacing, larger feel. Colour comes from the
     stage-colour rule above so each section's titles match its eyebrow. */
  .scv-subgroup-acc[data-open="false"] [data-meta-row][data-meta-idx="0"] {
    font-size: 15px !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  /* Smooth fade when transitioning to open. */
  .scv-subgroup-acc[data-open="true"] [data-cart-row] {
    animation: scv-acc-row-expand 220ms ease-out;
  }
  @keyframes scv-acc-row-expand {
    from { opacity: 0.6; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (min-width: 768px) {
    .scv-subgroup-acc[data-open="false"] [data-row-imgcol],
    .scv-subgroup-acc[data-open="false"] [data-row-imgcol] img { width: 38px !important; }
    .scv-subgroup-acc[data-open="false"] [data-row-imgcol] img { height: 38px !important; }
  }

  /* Stage price column — shown to the LEFT of the rows in a closed
     accordion only.  Vertically centered relative to the row stack.
     Two lines stacked: charcoal sale total + strikethrough RRP under it. */
  .scv-subgroup-body { display: block; }
  .scv-stage-price-col { display: none; }
  .scv-stage-rows-col { display: block; flex: 1; min-width: 0; }
  .scv-subgroup-acc[data-open="false"] .scv-subgroup-body {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  /* Stage price sits to the RIGHT of the row stack — use flex order to flip
     visual position without reordering the DOM (rows-col stays first in markup
     so screen readers and tab order read item titles before the summary). */
  .scv-subgroup-acc[data-open="false"] .scv-stage-rows-col { order: 1; }
  .scv-subgroup-acc[data-open="false"] .scv-stage-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 52px;
    order: 2;
    line-height: 1.1;
  }
  .scv-stage-price-total {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.01em;
  }
  .scv-stage-price-rrp {
    font-size: 11px;
    color: #9ca3af;
    text-decoration: line-through;
    margin-top: 2px;
    letter-spacing: 0.01em;
  }
  @media (min-width: 768px) {
    .scv-subgroup-acc[data-open="false"] .scv-stage-price-col { min-width: 60px; }
    .scv-stage-price-total { font-size: 15px; }
    .scv-stage-price-rrp { font-size: 12px; }
  }

  /* "Locked-in" state — every pair-product for this journey is in the cart,
     so the row needs less screen real estate.  Circles, title text and row
     padding all shrink one step smaller than the regular closed state.  The
     CSS transitions fire when the data-locked attribute flips from "false"
     to "true" (the add-other click handler does that optimistically before
     the drawer re-renders, so the user sees an actual lock-in animation). */
  .scv-subgroup-acc [data-row-imgcol],
  .scv-subgroup-acc [data-row-imgcol] img {
    transition: width 320ms ease-out, height 320ms ease-out;
  }
  .scv-subgroup-acc [data-cart-row] {
    transition: padding 320ms ease-out;
  }
  .scv-subgroup-acc [data-meta-row][data-meta-idx="0"] {
    transition: font-size 320ms ease-out, letter-spacing 320ms ease-out;
  }
  .scv-subgroup-acc {
    transition: opacity 320ms ease-out;
  }

  .scv-subgroup-acc[data-locked="true"] {
    opacity: 0.92;
  }
  .scv-subgroup-acc[data-locked="true"][data-open="false"] [data-row-imgcol],
  .scv-subgroup-acc[data-locked="true"][data-open="false"] [data-row-imgcol] img {
    width: 22px !important;
    height: 22px !important;
  }
  .scv-subgroup-acc[data-locked="true"][data-open="false"] [data-cart-row] {
    padding: 4px 0 !important;
  }
  .scv-subgroup-acc[data-locked="true"][data-open="false"] [data-meta-row][data-meta-idx="0"] {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
  }
  /* Less vertical whitespace in the heading too — the toggle gets pulled in
     so the whole journey block reads as visually "settled". */
  .scv-subgroup-acc[data-locked="true"] .scv-subgroup-toggle {
    padding: 8px 0 4px;
    transition: padding 320ms ease-out;
  }
  @media (min-width: 768px) {
    .scv-subgroup-acc[data-locked="true"][data-open="false"] [data-row-imgcol],
    .scv-subgroup-acc[data-locked="true"][data-open="false"] [data-row-imgcol] img {
      width: 26px !important;
      height: 26px !important;
    }
  }
  /* Per-item UGC row under the qty stepper (in-set rows only): rotating
     circle + "see real mums in this →" link side-by-side. Smaller circle
     than the set-level pitch since this is item-scoped. */
  .scv-set-row-ugc { display: flex; align-items: center; gap: 10px; margin-top: 8px; cursor: pointer; }
  .scv-mini-circle { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #f3f4f6; overflow: hidden; position: relative; }
  .scv-mini-circle video, .scv-mini-circle img { display: block; }
  .scv-set-row-ugc .scv-mums-wearing { background: none; border: none; padding: 0; margin: 0; font: inherit; color: #6b7280; font-size: 11px; line-height: 1.3; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0.02em; text-align: left; }
  @media (min-width: 768px) {
    .scv-set-row-subgroup { font-size: 14px; padding-top: 16px; }
    .scv-mini-circle { width: 44px; height: 44px; }
    .scv-set-row-ugc .scv-mums-wearing { font-size: 12px; }
  }
  .scv-policy-chevron svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
  .scv-policy[open] .scv-policy-chevron svg { transform: rotate(180deg); }

  /* UGC modal — per-product list with badges */
  .scv-ugc-prodlist { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,0.92); line-height: 1.45; }
  .scv-ugc-prodlist-heading { font-size: 13px; opacity: 0.85; margin-bottom: 2px; }
  .scv-ugc-prodlist-row { margin-top: 2px; }
  .scv-ugc-prodname { white-space: normal; }
  .scv-ugc-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; line-height: 1.4; color: #fff; border-radius: 0; }
  .scv-ugc-inset { background: #3D9A8B; }
  .scv-ugc-soldout { background: #6b7280; }
  .scv-ugc-add { background: #E8846C; cursor: pointer; }
  .scv-ugc-resolving { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
  .scv-ugc-overlay { scrollbar-width: none; }
  .scv-ugc-overlay::-webkit-scrollbar { display: none; }

  /* Lifestage journey counts — 4 lines under the progress circles showing
     how many items of each stage are in the bag. Subtle, single-line each,
     count rendered bold for at-a-glance scanning. */
  .scv-journey-counts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 12px;
    text-align: center;
  }
  .scv-journey-row {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
  .scv-journey-row strong { font-weight: 600; color: #1f2937; }
  @media (min-width: 768px) {
    .scv-journey-counts { padding: 18px 16px 14px; }
    .scv-journey-row { font-size: 13px; }
  }

  /* Unlock prompt — "X/5 added. 5 items unlocks set pricing". Sits under
     the header (the title spacer is above), then a bit of breathing room
     before the orange progress circles below. */
  .scv-set-unlock-prompt {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    line-height: 1.45;
    letter-spacing: 0.01em;
    padding: 6px 16px 12px;
  }
  @media (min-width: 768px) {
    .scv-set-unlock-prompt { font-size: 15px; padding: 8px 16px 14px; }
  }

  /* ── Set-progress visual (70s coral track — 5 chunky circles on a uniform bar) ──
     No backgrounds, single colour throughout. 3px stroke on circles + bar. Slight
     per-slot rotation gives a hand-stamped feel without losing geometric clarity.
     At ≥5 items the row fades to 32% opacity (DOM stays — no layout shift). */
  .scv-progress-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0 18px;
    transition: opacity 0.4s ease;
    background: transparent;
  }
  /* At 5+ items the set is locked in — hide the progress circles entirely
     in the cart drawer. They've done their job; keeping them visible adds
     redundant image noise above the set box. */
  .scv-progress-row.complete { display: none; }
  .scv-progress-row .scv-pg-slot {
    width: 32px;
    height: 32px;
    border: 3px solid #E8846C;
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
    flex: 0 0 auto;
    overflow: hidden;
  }
  .scv-progress-row .scv-pg-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .scv-progress-row .scv-pg-bar {
    width: 16px;
    height: 0;
    border-top: 3px solid #E8846C;
    flex: 0 0 auto;
  }
  /* PDP / collection progress sticky — frosted iOS-Safari-pill at bottom-left.
     Pill fades in; each circle + the label slide in from off-screen right, staggered. */
  #scv-progress-sticky {
    position: fixed;
    left: 14px;
    right: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    /* Must sit BEHIND both overlays: cart drawer scrim (99997) and the
       pack-builder slideout scrim (9995)/panel (9996). 9990 is below the
       pack-builder scrim yet still far above normal page content, so the
       pill stays visible + clickable whenever no overlay is open. */
    z-index: 9990;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* Never exceed the viewport — left:14px anchor + 14px right gutter.
       Two-column: circles fixed, label wraps in its own column (it does
       NOT wrap under the circles — no flex-wrap), JS shrinks the label
       font so pill height stays ≈ the circle row. */
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transition: opacity .28s ease;
    overflow: hidden; /* clip in-flight elements while they're off the right edge */
  }
  #scv-progress-sticky.scv-show { opacity: 1; }
  /* In sticky context: hide the connector bars and tighten the slot row */
  #scv-progress-sticky .scv-pg-bar { display: none; }
  #scv-progress-sticky .scv-progress-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    flex-shrink: 0;   /* circles never squish or change */
  }
  /* Each slot + the label start fully off-screen right and slide back to natural position */
  #scv-progress-sticky .scv-pg-slot,
  #scv-progress-sticky .scv-progress-label {
    transform: translateX(110vw);
    opacity: 0;
    transition: transform .5s cubic-bezier(.16,.84,.44,1), opacity .3s ease;
  }
  #scv-progress-sticky.scv-show .scv-pg-slot,
  #scv-progress-sticky.scv-show .scv-progress-label {
    transform: translateX(0);
    opacity: 1;
  }
  /* Slots at nth-child 1/3/5/7/9 (bars at 2/4/6/8 are display:none) */
  #scv-progress-sticky.scv-show .scv-pg-slot:nth-child(1) { transition-delay: 0ms; }
  #scv-progress-sticky.scv-show .scv-pg-slot:nth-child(3) { transition-delay: 90ms; }
  #scv-progress-sticky.scv-show .scv-pg-slot:nth-child(5) { transition-delay: 180ms; }
  #scv-progress-sticky.scv-show .scv-pg-slot:nth-child(7) { transition-delay: 270ms; }
  #scv-progress-sticky.scv-show .scv-pg-slot:nth-child(9) { transition-delay: 360ms; }
  #scv-progress-sticky.scv-show .scv-progress-label { transition-delay: 460ms; }
  .scv-progress-label {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.3;
    flex: 1 1 0;
    min-width: 0;     /* allow the column to shrink + wrap, not overflow */
    overflow: hidden; /* extreme fallback after JS hits the font floor */
  }
  /* Empty-cart entry CTA — replaces the "0/5 items" label when cart is empty.
     Bold uppercase headline that doubles as the click target for opening the
     pack-builder slideout. Stage word is interpolated by JS. */
  .scv-progress-label.scv-pg-empty-cta {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: normal;
  }
  /* Hide the circle row in empty-cart mode — the headline IS the entry CTA. */
  #scv-progress-sticky.scv-empty .scv-progress-row { display: none; }

  /* Hand-stamped imperfection — deterministic per-position so it doesn't shimmer between renders */
  .scv-progress-row .scv-pg-slot:nth-child(1) { transform: rotate(-1.4deg); }
  .scv-progress-row .scv-pg-slot:nth-child(3) { transform: rotate(0.9deg); }
  .scv-progress-row .scv-pg-slot:nth-child(5) { transform: rotate(-0.6deg); }
  .scv-progress-row .scv-pg-slot:nth-child(7) { transform: rotate(1.5deg); }
  .scv-progress-row .scv-pg-slot:nth-child(9) { transform: rotate(-1.1deg); }

  /* ── Phase 2 visibility gate ────────────────────────────────────────────
     Section is mounted globally now. Hide its surface elements unless we're
     on /cart (.setcart-v2-active is added by the inline script there) OR the
     drawer is active (html.scv-mode-drawer). Without this, "Loading your
     set..." renders at the top of every page above the announcement bar. */
  #set-cart-view { display: none; }
  #scv-close-btn { display: none; }
  .setcart-v2-active #set-cart-view { display: block; }
  .setcart-v2-active #scv-close-btn { display: flex; }
  html.scv-mode-drawer #set-cart-view { display: block; }
  html.scv-mode-drawer #scv-close-btn { display: flex; }

  /* ── Drawer mode (Phase 1 dark test) ──────────────────────────────────────
     Activates ONLY when sessionStorage.em_slideout==='1' (set via ?slideout=1).
     All rules scoped to html.scv-mode-drawer so default cart UX is unaffected
     when the flag is absent. !important is required to beat the inline style
     on #set-cart-view (margin/max-width/padding). */
  html.scv-mode-drawer.scv-open { overflow: hidden; }
  html.scv-mode-drawer.scv-open body { overflow: hidden; }
  html.scv-mode-drawer #set-cart-view {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 480px !important;
    max-width: 92vw !important;
    margin: 0 !important;
    padding: 0 16px 32px !important;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 99998;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  html.scv-mode-drawer.scv-open #set-cart-view { transform: translateX(0); }
  .scv-scrim {
    /* display:block !important defeats the theme's `div:empty { display:none }` reset
       that would otherwise collapse this empty scrim div to 0×0 and break click-outside. */
    display: block !important;
    position: fixed; inset: 0; z-index: 99997;
    background: rgba(0,0,0,0);
    transition: background .28s ease;
    pointer-events: none;
  }
  html.scv-mode-drawer.scv-open .scv-scrim {
    background: rgba(0,0,0,0.4);
    pointer-events: auto;
  }
  /* Fade close button with the panel so it doesn't sit alone on screen during slide-out */
  html.scv-mode-drawer #scv-close-btn {
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
  }
  html.scv-mode-drawer.scv-open #scv-close-btn {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer is ~480px wide on desktop, but the @media (min-width: 768px) and
     (min-width: 1024px) rules above fire based on VIEWPORT width, not container.
     Inside the drawer those scale-ups overflow horizontally. Force mobile-baseline
     sizes whenever drawer mode is active, regardless of viewport size. */
  html.scv-mode-drawer .scv-bag-title {
    font-size: clamp(14px, 5vw, 22px) !important;
    letter-spacing: 0.04em !important;
    padding: 0 64px !important;
  }
  html.scv-mode-drawer .scv-pack-side-by-side {
    gap: 24px !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }
  html.scv-mode-drawer .scv-pack-fan {
    width: 110px !important;
    height: 138px !important;
    margin-top: 6px !important;
  }
  html.scv-mode-drawer .scv-pack-fan img {
    width: 96px !important;
    height: 120px !important;
    margin-left: -48px !important;
    border-width: 2px !important;
  }
  html.scv-mode-drawer .scv-pack-text {
    gap: 8px !important;
    margin-top: 14px !important;
  }
  html.scv-mode-drawer .scv-pack-row .r1 {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  html.scv-mode-drawer .scv-pack-row .r2 {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  html.scv-mode-drawer .scv-pack-preorder {
    font-size: 10px !important;
  }