/** Shopify CDN: Minification failed

Line 211:3 Expected identifier but found whitespace
Line 579:271 Expected ":"

**/
/* ─────────────────────────────────────────────────────────────────────────────
 * v4u-upsell.css — ALL styling for the v4 upsell (by-size-v4 "v4 upsell" block).
 * One shared file for every v4 instance. Forked 2026-10-01 from v4u-upsell-block's
 * inline CSS + by-size-blanks-tabs.css + the popup skeleton; every name is v4u-, so
 * nothing here can touch the legacy upsell (popup/cart/old pages) or vice versa.
 * Edit THIS file for v4 styling — it applies to every v4 page at once.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Shell: head, tabs, panels, card container, skeleton, band clearance ── */
/* ─────────────────────────────────────────────────────────────────────────────
 * by-size-blanks-tabs.css — inline tabbed blanks upsell for by-size-v4 PDPs.
 * Tab pills mirror the pre-checkout popup (.blanks-popup__tab). Skeletons reuse
 * .v4u-skel* from the globally-loaded blanks-upsell-popup.css.
 *
 * No reveal logic here — the wrapper sits inside .bsv4-only-uploaded, which the
 * page shows only at data-state="uploaded". Do NOT add a display gate here.
 * ───────────────────────────────────────────────────────────────────────────── */

/* contain:inline-size (Owen 2026-09-23, cart page): the card row's intrinsic width is
   huge, and inside an AUTO-sized grid track (cart's .cart-section) it inflated the
   column to the full viewport — 441px horizontal page overflow, summary pushed off.
   Containment zeroes the strip's intrinsic inline size so it only ever fills the width
   its parent gives it. No-op on by-size-v4 (already a minmax(0,…) track). Do NOT remove. */
.v4u { width: 100%; min-width: 0; contain: inline-size; }

/* Optional card wrapper (Owen 2026-09-23 — "one looks like all, just with the wrapper being
   optional"): the block's `tabs_container` checkbox adds .v4u--card (default ON for
   the cart block, OFF for the PDP / gang-sheet blocks). Same white card as the cart line items
   (.cart-form-item: #fff, 16px radius, faint shadow, 25px inset) — styled here, NOT by reusing
   .cart-form-item: cart scripts treat that class as a LINE ITEM, so reusing it would count the upsell. */
.v4u--card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 24px 25px;
  margin-top: 16px;
}

.v4u__head { margin: 0 0 12px; }
.v4u__title { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0; }
.v4u__sub { font-size: 14px; color: #6b7280; margin: 4px 0 0; }

.v4u__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 0;
}
.v4u__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
}
.v4u__meta-icon { width: 18px; height: 18px; object-fit: contain; }

.v4u__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

/* Every tab rule is scoped `.v4u .v4u__tabs …` (0,3,0) on purpose (Owen
   2026-09-23): host pages carry generic button rules that beat a single class — the gang-sheet
   PDP's `.product-text button:not(.button) { color: inherit }` (0,2,1) turned the active pill's
   text black and the inactive tabs black. The strip must look identical on every surface, so
   its tabs out-rank any host button rule. Do NOT shorten these back to a single class. */
.v4u .v4u__tabs .v4u__tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hover only where hover is a real pointer (avoids the sticky "stuck hover"
   look on touch, where :hover latches until the next tap elsewhere). */
@media (hover: hover) {
  .v4u .v4u__tabs .v4u__tab:hover { background: #f3f4f6; }
  .v4u .v4u__tabs .v4u__tab--active:hover { background: #3eaeff; }
}

.v4u .v4u__tabs .v4u__tab--active {
  background: #3eaeff;
  color: #fff;
}

.v4u .v4u__tabs .v4u__tab:focus-visible {
  outline: 2px solid #3eaeff;
  outline-offset: 2px;
}

/* No lingering focus ring after a mouse click (keyboard still gets it above). */
.v4u .v4u__tabs .v4u__tab:focus:not(:focus-visible) { outline: none; }

/* Single-row carousel: the upsell renders FULL-WIDTH below the two-column grid
   (see sections/by-size-v4.liquid). The engine's own Swiper drives the one row +
   prev/next arrows + drag — no layout override here. */

/* ── No layout shift: skeleton matches the real card, everything one height ──
   The engine keeps .v4u-product-upsell display:none until it re-measures, so a
   switched-to tab flashed an empty row then popped in. Keep the carousel laid out,
   clamp the card title to 2 lines so every card is the SAME height, size the skeleton
   to match that card exactly, and reserve the row height. Result: skeleton → cards
   and tab → tab all stay one height — no shift. Scoped to .v4u so the
   engine card + pre-checkout popup are untouched. */
.v4u .v4u-product-upsell { display: block !important; }
.v4u__panel { min-height: 294px; }

/* Uniform card height: title always occupies 2 lines. */
.v4u .v4u-product-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Skeleton == real card (~288px): 200px square image, swatch row, 2-line title,
   price. The real cards hide Yotpo stars, so hide the skeleton's stars row too or the
   skeleton would sit taller than the cards and shift on the cold-load swap. */
.v4u .v4u-skel { gap: 16px; padding: 0; }
.v4u .v4u-skel-card { flex: 0 0 200px; width: 200px; }
.v4u .v4u-skel-img { width: 200px; height: 200px; }
.v4u .v4u-skel-stars { display: none; }
.v4u .v4u-skel-title { height: 2.6em; margin-top: 8px; }
@media (max-width: 749px) {
  .v4u .v4u-skel-card { flex: 0 0 160px; width: 160px; }
  .v4u .v4u-skel-img { width: 160px; height: 160px; }
}

/* Mobile */
@media (max-width: 749px) {
  .v4u__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .v4u__tabs::-webkit-scrollbar { display: none; }
  .v4u__title { font-size: 16px; }
}

/* ── Clearance above the full-width band ───────────────────────────────────────
   The dead-space fix now lives in bysize-v4.css: the sticky size-guide + price
   columns span `grid-row: 1 / -1` (content height, no phantom rows) for EVERY v4
   page (Owen 2026-09-23), so this file no longer re-spans them — the old
   `:has(.bsv4__upsell--full)` `span 6` override was the band-aid that left ~48px
   and is gone. With `1 / -1` the grid ends exactly at its content, so the band
   would butt the grid; give the band its own top clearance instead (a
   margin-bottom on a `1 / -1` sticky column is inert, so spacing must ride the
   band). DO NOT re-add a `grid-row` override here. */
.bsv4__upsell--full { margin-top: 48px; }
/* Mobile/tablet (stacked): tighter — the band follows the last product card. */
@media (max-width: 999px) {
  .bsv4__upsell--full { margin-top: 24px; }
}


/* Skeleton base (forked from blanks-upsell-popup.css so the v4 upsell owns it) */
.v4u-skel { display: flex; gap: 16px; overflow: hidden; padding: 0 24px; }
.v4u-skel-card { flex: 0 0 200px; display: flex; flex-direction: column; }
.v4u-skel-img { width: 200px; height: 200px; border-radius: 8px; background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%); background-size: 400% 100%; animation: v4u-shimmer 1.5s ease-in-out infinite; }
.v4u-skel-swatches { display: flex; gap: 4px; margin-top: 8px; height: 18px; align-items: center; }
.v4u-skel-swatch { width: 18px; height: 18px; border-radius: 50%; background: #e8e8e8; }
.v4u-skel-stars { width: 110px; height: 14px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%); background-size: 400% 100%; animation: v4u-shimmer 1.5s ease-in-out infinite; }
.v4u-skel-title { width: 160px; height: 14px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%); background-size: 400% 100%; animation: v4u-shimmer 1.5s ease-in-out infinite; }
.v4u-skel-price { width: 80px; height: 14px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%); background-size: 400% 100%; animation: v4u-shimmer 1.5s ease-in-out infinite; }
@keyframes v4u-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .v4u-skel { padding: 0 12px; }
  .v4u-skel-card { flex: 0 0 140px; }
  .v4u-skel-img { width: 140px; height: 140px; }
  .v4u-skel-title { width: 110px; }

/* ── Cards + quick-buy modal (engine) ── */
.v4u-upsell .swiper-slide{text-align: left;}
  .v4u-product-upsell{display:none;}
  .v4u-product-upsell.active_productupsell{width:100%;}
  .v4u-upsell{min-width:0;max-width:100%;}
  .v4u-upsell .v4u-product-upsell{min-width:0;max-width:100%;}
  .v4u-upsell__wrap{width: var(--v4u-container-w);max-width:100%;min-width:0;}
  .v4u-upsell__head { margin-bottom: 12px; margin-top: 24px; }
  .v4u-upsell__title { margin: 0; font-size: 18px; font-weight: 800; }
  .v4u-upsell__sub { margin: 6px 0 0; opacity: .7; }
  .v4u-upsell__meta { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; }
  .v4u-upsell__meta-item { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; line-height:1.3; }
  .v4u-upsell__meta-icon { width:20px; height:20px; object-fit:contain; display:block; }
  .v4u-upsell__wrap { position: relative; display: flex; align-items: center; gap: 10px; }
  .v4u-upsell__track { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-left:-8px;}
  .
  .v4u-upsell .v4u-upsell__track::-webkit-scrollbar { display:none; }
  .v4u-upsell .v4u-upsell__item { scroll-snap-align:start; flex:0 0 auto; width:200px;  }


  /* Card */
  .v4u-product-layout { display:flex; width:100%; }
  .v4u-upsell-cardlink { display:block; color:inherit; text-decoration:none; width:100%; }
  .v4u-product-card { width:100%; background:#fff; display:flex; flex-direction:column; gap:1em; margin-right:8px;}
  .v4u-product-card__container { display:flex; flex-direction:column; box-sizing:border-box;}
  .v4u-product-card__media {background: #F5F5F5; display:flex; flex-direction:column; align-items:center; width:200px; border-radius:8px;}
  .v4u-product-card__main-image{width:200px; height:200px; background: #F5F5F5; overflow:hidden;border-radius:8px; display: flex; align-items: center; justify-content: center;}
  .v4u-product-card__main-image img{border-radius:8px; max-width:100%; height:auto !important; width:auto !important; display:block; max-height:100%; mix-blend-mode: multiply;}
  .v4u-product-card__img-placeholder{width:100%; aspect-ratio:1/1; background:rgba(0,0,0,.06); border-radius:.5rem; }

  .v4u-product-card__details { display:flex; flex-direction:column; gap:2px; width:100%; margin-top:2px; }
  .v4u-product-card__info { display:flex; flex-direction:column; gap:1px; }
  .v4u-product-card__title { font-size:14px; font-weight:600; line-height:20px; margin:0; }
  .v4u-product-card__price-row { display:flex; align-items:baseline; gap:4px; }
  .v4u-product-card__starting { font-size:12px; line-height:18px; white-space:nowrap; }
  .v4u-product-card__price { display:flex; gap:.5rem; align-items:baseline; font-size:14px; color:#3eaeff; font-weight:600; }
  .v4u-product-card__price-compare { text-decoration:line-through; color:#999; opacity:1; font-weight:500; }

  /* Card color swatch strip */
  .v4u-card-swatches {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 8px 5px;
    background: #fff;
  }
  .v4u-card-swatch {
    width: 16px; height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    background-color: var(--swatch-color, #ccc);
    border: 1px solid rgba(0,0,0,.18);
    padding: 0; cursor: pointer;
    transition: box-shadow .1s;
  }
  .v4u-card-swatch:hover { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(0,0,0,.4); }
  .v4u-card-swatch.is-active { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(0,0,0,.65); }
  .v4u-card-swatch-more { font-size: 10px !important; font-weight: 600; color: #333; white-space: nowrap; margin-left: 2px; }
  .v4u-product-card__yotpo .yotpo-widget-instance { position:relative; min-height:14px; }
  .v4u-product-card__yotpo .yotpo-widget-instance::after { position:absolute; content:""; inset:0; background-color:transparent; z-index:1; }
  .v4u-product-card__yotpo .yotpo-widget-instance svg { width:10px; height:10px; }
  .v4u-product-card__yotpo .yotpo-widget-instance .star-container { margin-right:2px !important; }
  .v4u-product-card__yotpo .yotpo-star-rating-reviews-summary-link { display:none !important; }
  .v4u-product-card__yotpo .yotpo-sr-bottom-line-summary { flex-direction:row !important; gap:2px !important; align-items:center !important; }
  .v4u-product-card__yotpo .yotpo-sr-bottom-line-text { font-size:10px !important; }
  .v4u-product-card__yotpo .yotpo-sr-bottom-line-button .yotpo-sr-bottom-line-text { font-size:10px !important; }

  .v4u-product-card__view-button {
    background:#000; color:#fff; border-radius:.75rem; padding:1rem;
    font-size:.875rem; font-weight:700; text-transform:uppercase;
    transition: background-color .3s ease, color .3s ease;
    border:2px solid #000; cursor:pointer;
  }
  .v4u-product-card__view-button:hover { background:#fff; color:#000; }

  /* Quick buy hover bar */
  .v4uproductcard{position:relative;}
  .v4u-card-overlay{position:absolute; top:0; bottom:0; left:0; right:0; z-index:2;}
  .v4u-qv-wrap{position:absolute;bottom:0;left:0;right:0;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;z-index:3;pointer-events:none;border-radius:0 0 8px 8px;overflow:hidden;}
  .v4u-qv-wrap .v4uqvbtn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:rgba(0,0,0,0.82);color:#fff !important;border:none;border-radius:0;padding:10px 0;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;}
  .v4u-qv-wrap .v4uqvbtn:hover{background:rgba(0,0,0,0.95);}
  .v4u-upsell__item:hover .v4u-qv-wrap{opacity:1;visibility:visible;pointer-events:auto;}


  /* Modal */
  html.v4u-modal-open, body.v4u-modal-open { overflow:hidden; overscroll-behavior:none; }
  /* Make dialog full-viewport so clicking outside the content closes it */
  .v4u-product-modal { position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; padding:12px; box-sizing:border-box; background:rgba(0,0,0,.7); border:0; border-radius:0; box-shadow:none; align-items:center; justify-content:center; overflow:visible; }
  .v4u-product-modal[open] { display:flex !important; }
  .v4u-product-modal::backdrop { display:none; }
  .v4u-product-modal.is-opening .v4u-product-modal__content { opacity:0; pointer-events:none; }
  .v4u-product-modal.is-opening .v4u-product-modal__loading { opacity:1; }
  .v4u-product-modal__container { position:relative; overflow-x:hidden;}
  .v4u-product-modal__loading {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:rgba(255,255,255,.96);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
    z-index:2;
  }
  .v4u-product-modal__container,
  .v4u-product-modal__content {
    min-height: unset;
  }
  .v4u-product-modal__loading-spinner {
    width:32px;
    height:32px;
    border:3px solid rgba(3,64,108,.18);
    border-top-color:#03406C;
    border-radius:50%;
    animation:v4uModalSpin .7s linear infinite;
  }
  .v4u-product-modal__loading-text {
    font-size:14px;
    font-weight:700;
    color:#03406C;
  }
  .v4u-product-modal__media,.v4u-product-modal__details{ padding:1.4rem;}
  .v4u-product-modal__close-container { display:grid; justify-items:end; margin-left:1.4rem; padding-bottom:0.7rem; }
  .v4u-product-modal__close,.v4u-product-modal__close:hover,.v4u-product-modal__close:focus { width:64px; height:64px; border:0; cursor:pointer; outline:none; display:flex; align-items:center; justify-content:center; background:transparent; }
  .v4u-product-modal__content { position:relative; width:100%; background:#fff; border-radius:.75rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); max-width:1014px; min-width:320px; max-height:calc(100vh - 48px); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
  .v4u-product-modal__layout { display:flex; flex-direction:column; gap:1rem; }

  .v4u-product-modal__media { display:flex; flex-direction:column; align-items:center; width:100%; justify-content:center; background:#F5F5F5;}
  .v4u-product-modal__media img { border-radius:.25rem; width:100%; height:auto; display:block; mix-blend-mode:multiply;}
  .v4u-product-modal__details { display:flex; flex-direction:column; gap:14px; width:100%; }
  .v4u-product-modal__price,.v4u-product-modal__details a{color:#3eaeff;}
  .v4u-product-modal__title { font-size:18px; font-weight:700; margin:0; margin-top:6px; line-height:26px; }
  .v4u-product-modal__full-details { margin-top:4px;}
  .v4u-product-modal__full-details a { font-size:12px; font-weight:600; text-decoration:none; }
  .v4u-product-modal__price-container { display:flex; gap:2px; font-weight:650; font-size:20px; align-items:flex-start; margin-top:4px; flex-direction:column; }
  .v4u-product-modal__compare-price { text-decoration:line-through; color:#999; opacity:1; }
  .v4u-product-modal__label { display:flex; align-items:center; gap:8px; font-weight:650; margin-bottom:4px; font-size:15px; }
  .v4u-product-modal__starting-at{ font-size:12px; font-weight:700; }

  .v4u-product-modal__buttons { position:sticky; bottom:0; z-index:10; display:flex; flex-direction:column; gap:4px; background:#fff; padding:1.4rem; box-shadow:0 -4px 12px rgba(0,0,0,.06); margin-left:-1.4rem; margin-right:-1.4rem; margin-bottom:-1.4rem; }
  .v4u-product-modal__buttons button {
    font-size:16px; font-weight:700; transition: background-color .3s ease, color .3s ease;
    cursor:pointer; text-transform:capitalize; padding:17px 10px; border-radius:.75rem;
  }
  .v4u-product-modal__add-button { background:rgba(63, 177, 250, 1); color:#fff; transition:background 0.2s ease; }
  .v4u-product-modal__add-button:hover { background:#0180c2; color:#fff; }
  .v4u-product-modal__add-button:disabled { opacity:.65; cursor:not-allowed; }
  .v4u-product-modal__add-button.v4u-btn--success { background:#22A614 !important; color:#fff; }
  @keyframes v4u-spin { to { transform:rotate(360deg); } }
  .v4u-btn-spinner { display:inline-block; width:22px; height:22px; border:2.5px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation:v4u-spin 0.65s linear infinite; vertical-align:middle; }

  .v4u-product-modal__description-text {font-weight:450; color:#717171; letter-spacing:.02em; font-size:.9rem;}
  .v4u-product-modal__more a { display:inline-block; margin-top:8px; text-decoration:underline; }

  .v4u-variant-options{display:grid; gap:13px;}
  .v4u-opt { display:grid; gap:6px; }
  .v4u__pdp-selected-color-label{text-transform:capitalize; display:inline-flex; align-items:center; gap:8px; }
  .v4u__pdp-selected-color-chip{
    width:32px;
    height:32px;
    border-radius:4px;
    border:1px solid rgba(0,0,0,.25);
    background:var(--v4u-pdp-selected-color-chip, transparent);
    display:none;
    flex:0 0 32px;
  }
  .v4u__pdp-selected-color-chip.is-visible{ display:inline-block; }

  /* Color label row — flex with count badge pushed to far right */
  .v4u-color-label-row{ flex-wrap:nowrap !important; gap:6px !important; }
  .v4u-color-count-badge{ margin-left:auto; font-size:11px; font-weight:600; color:#fff; white-space:nowrap; flex-shrink:0; background:#111; border:1px solid #111; border-radius:20px; padding:3px 10px; cursor:default; }

  /* Color picker trigger — no border box, just inline chip + name + caret */
  .v4u-mobile-cp-trigger{ display:none; align-items:center; gap:8px; background:none; border:none; padding:0; cursor:pointer; font-size:14px; font-weight:600; color:#111; }
  .v4u-mobile-cp-chip{ width:24px; height:24px; border-radius:4px; border:1px solid rgba(0,0,0,.25); background:var(--v4u-mobile-cp-chip, #ccc); flex:0 0 24px; display:block; }
  .v4u-mobile-cp-name{ text-transform:capitalize; }
  .v4u-mobile-cp-caret{ transition:transform .15s ease; flex-shrink:0; }
  .v4u-mobile-cp-trigger.is-open .v4u-mobile-cp-caret{ transform:rotate(180deg); }

  /* Color picker list — default: contained dropdown (desktop) */
  .v4u-mobile-cp-list{ display:none; }
  .v4u-color-label-row{ position:relative; }
  .v4u-mobile-cp-list.is-open{
    display:block;
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    z-index:200; background:#fff;
    border:1px solid #E0E0E0; border-radius:8px;
    box-shadow:0 6px 24px rgba(0,0,0,.12);
    max-height:300px; overflow-y:auto;
  }
  .v4u-mobile-cp-list__header{ display:none; } /* header only shown on mobile full-screen */
  .v4u-mobile-cp-list__scroll{ display:contents; } /* transparent wrapper on desktop */
  .v4u-mobile-cp-item{ display:flex; align-items:center; gap:12px; padding:10px 14px; width:100%; background:none; border:none; border-bottom:1px solid #F0F0F0; cursor:pointer; font-size:13px; color:#111; text-align:left; }
  .v4u-mobile-cp-item:last-child{ border-bottom:none; }
  .v4u-mobile-cp-item.is-active{ background:#F0F7FF; font-weight:700; }
  .v4u-mobile-cp-item__chip{ width:24px; height:24px; border-radius:4px; border:1px solid rgba(0,0,0,.2); background:var(--v4u-mobile-cp-item-chip, #ccc); flex:0 0 24px; display:block; }

  /* Both breakpoints: show trigger */
  .v4u-mobile-cp-trigger{ display:inline-flex; }

  /* Desktop: hide desktop-only static label; keep swatch grid */
  @media (min-width: 768px){
    .v4u-pdp-color-desktop-label{ display:none !important; }
  }
  /* Mobile: full-screen overlay instead of dropdown; hide static label */
  @media (max-width: 767px){
    next-element file-preview[show-dimensions]{margin:0 auto;}
    .v4u-pdp-color-desktop-label{ display:none !important; }
    .v4u-mobile-cp-list.is-open{
      display:flex; flex-direction:column;
      position:fixed; inset:0; top:0; left:0; right:0; bottom:0;
      z-index:99999; background:#fff;
      border:none; border-radius:0; box-shadow:none;
      max-height:none; overflow:hidden;
    }
    .v4u-mobile-cp-list__header{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid #E8E8E8; font-size:18px; font-weight:700; color:#111; flex-shrink:0; }
    .v4u-mobile-cp-list__close{ width:36px; height:36px; border-radius:50%; background:#F2F2F2; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#555; flex-shrink:0; }
    .v4u-mobile-cp-list__scroll{ display:block; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .v4u-mobile-cp-item{ padding:14px 20px; font-size:15px; gap:14px; }
    .v4u-mobile-cp-item__chip{ width:36px; height:36px; border-radius:6px; flex:0 0 36px; }
  }

  .v4u-opt__pills { display:flex; flex-wrap:wrap; gap:8px; }
  .v4u-variant-pill { padding:10px 14px; border-radius:8px; background:#EDEDED; border-color:transparent; cursor:pointer; font-size:.85rem; font-weight:700; transition:all .2s ease; height:44px; }
  .v4u-variant-pill.is-active { background:#000; color:#fff; }
  .v4u-variant-pill.is-disabled { opacity:.35; cursor:not-allowed; }

  /* swatch pills */
  .v4u-variant-pill.is-swatch{ padding:0; width:33px; height:33px; min-width:33px; min-height:33px; display:inline-flex; align-items:center; justify-content:center; position:relative; border-width:0; }
  .v4u-variant-pill.is-swatch .v4u-swatch{ width:100%; height:100%; border-radius:6px; background:var(--swatch, transparent); border:1px solid rgba(0,0,0,.35); display:inline-block; }
  .v4u-variant-pill.is-swatch.is-active .v4u-swatch{ outline:2px solid #000; outline-offset:2px; }
  .v4u-opt__pills--pdp-colors{ gap:6px 0px;}
  .v4u-pdp-color-pill,
  .v4u-pdp-color-pill:hover,
  .v4u-pdp-color-pill:focus,
  .v4u-pdp-color-pill:active{
    width:24px;
    height:24px;
    padding:0;
    min-width:30px;
    border:0 !important;
    border-radius:6px;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    outline-color:transparent;
  }
  .v4u-pdp-color-pill__chip{width:24px; height:24px; border-radius:3px; border:1px solid rgba(0,0,0,.35); background:var(--v4u-pdp-color-chip, transparent); display:block;}
  .v4u-pdp-color-pill__chip{outline-color:transparent;}
  .v4u-pdp-color-pill.is-active .v4u-pdp-color-pill__chip{outline:2px solid #3eaeff; outline-offset:2px;}
  .v4u-pdp-color-pill:hover .v4u-pdp-color-pill__chip{outline:2px solid rgba(0,0,0,.35); outline-offset:2px;}
  
  @keyframes v4uModalSpin {
    to { transform:rotate(360deg); }
  }
  .v4u-product-card__yotpo{margin-bottom:2px;}
  .v4u-pdp-color-pill-hidden{ display:none !important; }
  .v4u-color-pill-hidden{ display:none !important; }
  .v4u-color-see-all{padding:0; border:0; background:none; color:#3eaeff; text-decoration:underline; font-size:14px; font-weight:700; line-height:1.2; cursor:pointer; justify-self:start; padding-top:10px;}

  /* Quantity */
  .v4u-product-modal__qty { display:grid; gap:8px; margin-top:16px;}
  .v4u-qty{ display:inline-flex; align-items:center; gap:10px; }
  .v4u-qty__btn,.v4u-qty__input{ border:none; }
  .v4u-qty-box-wrapper{ display:inline-flex; border:2px solid rgba(0,0,0,.2); gap:5px; border-radius:12px; overflow:hidden; }
  .v4u-qty__btn{ width:44px; height:44px; background:#fff; cursor:pointer; font-size:22px; font-weight:850; line-height:1; display:inline-flex; align-items:center; justify-content:center; user-select:none; }
  .v4u-qty__input{ width:48px; height:44px; text-align:center; font-size:16px; font-weight:750; padding:0 8px; box-sizing:border-box; }
  .v4u-size-qty-parent-label{ margin-top:12px; }
  .v4u-pdp-size-grid{ margin-top:12px; display: flex; flex-flow: row wrap; align-items:flex-start;}

  /* Size skeleton loader */
  @keyframes v4u-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
  .v4u-size-skel { display:flex; flex-wrap:wrap; gap:7px; }
  .v4u-size-skel__card { flex:0 0 56px; width:56px; box-sizing:border-box; display:grid; gap:4px; border-radius:8px; padding:4px; background:#fff; }
  .v4u-size-skel__bar { border-radius:4px; background:linear-gradient(90deg,#efefef 25%,#e2e2e2 50%,#efefef 75%); background-size:200% 100%; animation:v4u-shimmer 1.4s ease-in-out infinite; }
  .v4u-size-skel__lbl { height:20px; }
  .v4u-size-skel__inp { height:37px; }
  .v4u-size-skel__pr  { height:11px; }
  .v4u-size-qty-grid{ margin-top:6px; display:flex; flex-wrap:wrap; gap:7px; overflow:hidden; }
  .v4u-size-qty-row{ flex:1 1 0; min-width:0; width:auto; box-sizing:border-box; display:grid; gap:4px; border-radius:8px; padding:4px; background:#fff; text-align:center; }
  .v4u-size-qty-row.is-out{ background:#f8f8f8; }
  .v4u-size-qty-row__size,.v4u-size-qty-row__qty,.v4u-size-qty-row__price-wrap,.v4u-size-qty-row__save-wrap{ display:grid; gap:4px; }
  .v4u-size-qty-row__k{ font-size:10px; font-weight:700; letter-spacing:.02em; color:#666; text-transform:uppercase; line-height:1; }
  .v4u-size-qty-row__v{ font-weight:700; font-size:12px; color:rgba(0, 0, 0, 0.6); line-height:20px; }
  .v4u-size-qty-row__compare{ font-size:12px; color:rgba(0, 0, 0, 0.6); line-height:1.2; text-decoration:line-through; }
  .v4u-size-qty-row__price{ font-weight:700; font-size:13px; color:rgba(0, 65, 112, 1); line-height:1.2; }
  .v4u-size-qty-row__save{ font-weight:700; font-size:12px; color:#2E7D32; line-height:1.2; }
  .v4u-size-qty-row__out{
    width:100%;
    height:37px;
    border:1px solid #e0e0e0;
    border-radius:6px;
    background:#e1e1e1;
    color:#000;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  /* Input + spinners side-by-side (flex, not absolute overlay) */
  .v4u-size-qty-wrap { display:flex; align-items:stretch; height:37px; border:1px solid #E0E0E0; border-radius:6px; overflow:hidden; box-sizing:border-box; background:#fff; transition:border-color 0.15s ease; }
  .v4u-size-qty-wrap:focus-within { border-color:#aaa; box-shadow:0 0 0 2px rgba(0,0,0,0.08); }
  .v4u-size-qty-input{ flex:1; min-width:0; height:100%; border:none; border-radius:0; text-align:center; font-weight:700; font-size:14px; padding:0; box-sizing:border-box; background:#fff; outline:none; }
  .v4u-size-qty-input::-webkit-outer-spin-button,
  .v4u-size-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .v4u-size-qty-input[type=number] { -moz-appearance:textfield; }
  .v4u-size-qty-spinners { display:flex; flex-direction:column; width:16px; flex-shrink:0; border-left:1px solid #E0E0E0; }
  .v4u-size-qty-spin { flex:1; border:none; background:transparent; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; color:#666; line-height:1; font-size:6px; }
  .v4u-size-qty-spin:hover { background:#f0f0f0; }
  .v4u-size-qty-spin--up { border-bottom:1px solid #E0E0E0; }
  /* Desktop only: single row, no min-width so all sizes fit; cap at 100px for few-size products */
  @media (min-width: 768px) {
    .v4u-size-qty-grid { flex-wrap:nowrap; }
    .v4u-size-qty-row { min-width:0; max-width:100px; }
  }
  /* Mobile: CSS grid forces exactly 5 equal columns; row 2 items align to same column widths */
  @media (max-width: 767px) {
    .v4u-size-qty-grid, .v4u-pdp-size-grid { display:grid; grid-template-columns:repeat(5, 1fr); }
    .v4u-size-qty-row { flex:unset; max-width:none; width:auto; }
    .v4u-size-qty-spinners { display:none; }
    /* Prevent iOS auto-zoom: font-size must be >=16px on focused inputs */
    .v4u-size-qty-input { font-size:16px !important; }
    .v4u-qty__input { font-size:16px !important; }
  }

  .v4u-upsell-toast{
    position:fixed;
    top:24px;
    right:24px;
    transform:translateX(20px);
    opacity:0;
    pointer-events:none;
    z-index:2147483647;
    background:#cffca6;
    color:#000;
    border-radius:10px;
    padding:12px 16px;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
    box-shadow:0 10px 26px rgba(0,0,0,.24);
    transition:opacity .2s ease, transform .2s ease;
    max-width:min(92vw, 320px);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .v4u-upsell-toast.is-visible{ opacity:1; transform:translateX(0); pointer-events:auto; }
  .v4u-upsell-toast__icon{ color:#000; font-size:16px; font-weight:900; line-height:1; flex:0 0 auto; }
  .v4u-upsell-toast__message{ flex:1 1 auto; min-width:0; }
  .v4u-upsell-toast__close{
    flex:0 0 auto;
    border:0;
    background:none;
    color:#000;
    font-size:18px;
    font-weight:700;
    line-height:1;
    padding:0;
    cursor:pointer;
  }
  .v4u-upsell-toast.is-error{ background:#B42318; color:#fff; border-color:#7A271A; }
  .v4u-upsell-toast.is-error .v4u-upsell-toast__icon,
  .v4u-upsell-toast.is-error .v4u-upsell-toast__close{ color:#fff; }

  .v4u-qty__input::-webkit-outer-spin-button,
  .v4u-qty__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .v4u-qty__input[type=number] { -moz-appearance:textfield; }
  .v4u-variant-pill.is-disabled,.v4u-product-modal__form #bcpo{display:none !important;}

  .v4u-upsell__track .slick-arrow,.v4u-upsell-prev,.v4u-upsell-next{z-index: 1; width:48px; height:48px; background:#8A8A8A; margin-top:0; transform:translateY(-50%) !important;}
  .v4u-upsell__track [aria-disabled=true]{opacity:0.5; pointer-events:none;}
  .v4u-upsell__track .slick-prev,.v4u-upsell-prev,.swiper-button-prev.v4u-upsell-prev{left: 0px; border-top-right-radius:8px; border-bottom-right-radius:8px;}
  .v4u-upsell__track .slick-prev::after,.v4u-upsell-prev:after{width: 12px; height: 12px; content: ""; border-left: solid 2px #fff; border-bottom: solid 2px #fff; display: block; transform: rotate(45deg); left: 50%; position: absolute; margin-left: -4px;}
  .v4u-upsell__track .slick-next::after,.v4u-upsell-next:after{width: 12px; height: 12px; content: ""; border-right: solid 2px #fff; border-top: solid 2px #fff; display: block; transform: rotate(45deg); left: 50%; position: absolute; margin-top: -6px; margin-left: -8px;x}
  .v4u-upsell__track .slick-next,.swiper-button-next.v4u-upsell-next,.v4u-upsell-next{right: 0px; border-top-left-radius:8px; border-bottom-left-radius:8px;}
  /* Swiper's navigation auto-injects .swiper-navigation-icon (an <svg> with fill:currentColor
     = swiper's default theme blue #007aff) INTO the arrow button, on top of the ::after
     chevron above -> a doubled blue arrow. The ::after IS the intended arrow; hide Swiper's
     injected icon on these buttons everywhere this snippet renders. (Owen 2026-09-30) */
  .v4u-upsell-prev .swiper-navigation-icon,.v4u-upsell-next .swiper-navigation-icon{display:none;}
  .v4u-upsell__track .slick-prev::before,.v4u-upsell__track .slick-next::before{content:none;}
  .v4u-upsell__track .slick-track{touch-action:pan-y;}

  .v4u-upsell__wrap{position:relative;}
  .v4u-upsell__track_{display:flex;}
  .v4u-swiper{overflow:hidden;}
  .v4u-swiper .swiper-slide{width:200px;flex:0 0 auto;}
  .v4u-qv-btn{cursor:pointer;}
  .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{display:none;}
  .v4u-modal__close{position: absolute; right: 0; top: 0; border-radius: 0 0.75rem 0 12px; z-index:100;}

  .v4u-product-modal__label { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; font-weight:700; font-size:14px; color:#111; margin-bottom:4px; }
  /* Inline selected color name — shown next to the label text */
  .v4u-selected-color-name {
    font-weight:400; font-size:14px; color:#555; text-transform:capitalize;
  }

  .v4u-showfull .v4u-half-desc,.v4u-full-desc{display:none}
  .v4u-showfull .v4u-full-desc{display:block;}
  .v4u-product-modal__description{overflow:hidden; overflow-y:auto; margin-top:24px;}
  .v4u-product-card__yotpo .yotpo-sr-bottom-line-summary{height:22px; overflow:hidden; }

  @media(max-width: 749px){
    .v4u-qv-wrap{ opacity:1; visibility:visible; pointer-events:auto; transform:none; display:block !important;}
  }
  @media (min-width: 768px) {
    .v4u-product-modal__container,
    .v4u-product-modal__content {
      min-height: unset;
      display: flex;
      flex-flow: column;
    }
    .v4u-product-modal__layout { flex-direction:row; flex: 1 1 auto; min-height: 100%; gap:0; }
    .v4u-product-modal__media { flex: 0 0 37.5%; width: 37.5%; }
    .v4u-product-modal__details { flex: 1 1 auto; width: auto; }
    .v4u-size-qty-parent-label{ margin-top:12px; }
  }

  /* Mobile modal adjustments */
  @media (max-width: 767px) {
    .v4u-product-modal .v4u-product-modal__media img { width:52.5%; margin:0 auto; }
    /* Price inline with "Starting at" on mobile to reduce vertical height */
    .v4u-product-modal .v4u-product-modal__price-container { flex-flow: row wrap; align-items:baseline; }
    /* Tighten vertical spacing between content blocks so size options are more in view */
    .v4u-product-modal .v4u-product-modal__details { gap: 10px; }
    /* Close gap between image and details, halve the top padding — pulls stars up */
    .v4u-product-modal .v4u-product-modal__layout { gap: 0; }
    .v4u-product-modal .v4u-product-modal__details { padding-top: 0.7rem; }
  }

  /* Mobile carousel for color swatches — modal only */
  @media (max-width: 767px) {
    .v4u-product-modal .v4u-swatch-pills,
    .v4u-product-modal .v4u-opt__pills--pdp-colors {
      flex-wrap: nowrap;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* Prevent grid-item min-width:auto from expanding to fit all pills */
      min-width: 0;
      width: 100%;
      /* Extra vertical padding so finger has room to scroll without touching adjacent rows */
      padding: 12px 0 12px 4px;
      /* Mask is controlled dynamically by JS (updateSwatchMask) */
    }
    .v4u-product-modal .v4u-swatch-pills::-webkit-scrollbar,
    .v4u-product-modal .v4u-opt__pills--pdp-colors::-webkit-scrollbar { display: none; }
    .v4u-product-modal .v4u-swatch-pills,
    .v4u-product-modal .v4u-opt__pills--pdp-colors {
      gap: 6px;
    }
    .v4u-product-modal .v4u-swatch-pills .v4u-variant-pill,
    .v4u-product-modal .v4u-opt__pills--pdp-colors .v4u-pdp-color-pill {
      flex-shrink: 0;
    }
    /* 36×36 swatches on mobile */
    .v4u-product-modal .v4u-swatch-pills .v4u-variant-pill.is-swatch {
      width: 36px; height: 36px; min-width: 36px; min-height: 36px;
    }
    .v4u-product-modal .v4u-opt__pills--pdp-colors .v4u-pdp-color-pill {
      width: 36px; height: 36px; min-width: 36px;
    }
    .v4u-product-modal .v4u-opt__pills--pdp-colors .v4u-pdp-color-pill__chip {
      width: 36px; height: 36px;
    }

  }

/* On-demand quick-buy modal (Owen 2026-10-01): a click that beats the hover prefetch waits
   for the modal fetch — show it's working instead of looking dead. */
.v4u-upsell .v4u-qv-btn.is-modal-loading { cursor: progress; }
.v4u-upsell .v4u-qv-btn.is-modal-loading .v4u-product-card__main-image { opacity: .7; transition: opacity .15s; }

/* ── Fixed tile box (Owen 2026-10-01 "tiles jump around on tab switches, each tile needs
   designated space"). Measured shifts before: cards landed 200px apart then hopped 16px
   right when Swiper applied spaceBetween; grew 259→284px when the swatch row was built;
   1-line titles 4px shorter than 2-line; the skeleton 294px vs a 288px card (and 160px wide
   on phones vs 200px cards). Every tile is now one exact box from first paint:
   200 image + 25 swatch row + 2 + 40 title (2 lines) + 1 + 20 price = 288px, 200px wide,
   16px apart. DO NOT let the swatch row collapse (empty rows keep their 25px) or drop the
   pre-init slide gap. ── */
.v4u-upsell .swiper-slide { margin-right: 16px; }            /* = Swiper spaceBetween: 16 → no hop at init */
.v4u-upsell .v4u-card-swatches { display: flex; height: 25px; box-sizing: border-box; overflow: hidden; }
.v4u .v4u-upsell .v4u-product-card__title { height: 40px; min-height: 40px; }
.v4u-upsell .v4u-product-card__price-row { height: 20px; align-items: center; }
.v4u .v4u-skel-card { flex: 0 0 200px; width: 200px; }
.v4u .v4u-skel-img { width: 200px; height: 200px; }
.v4u .v4u-skel-swatches { height: 25px; margin-top: 0; align-items: center; }
.v4u .v4u-skel-title { height: 40px; margin-top: 2px; }
.v4u .v4u-skel-price { height: 20px; margin-top: 1px; }
@media (max-width: 749px) {
  .v4u .v4u-skel-card { flex: 0 0 200px; width: 200px; }   /* real cards stay 200px on phones */
  .v4u .v4u-skel-img { width: 200px; height: 200px; }
}
/* No back-arrow flash: until Swiper initialises (and marks it swiper-button-disabled at the
   start) the prev arrow would show over the first tile for a moment. */
.v4u-upsell .v4u-swiper:not(.swiper-initialized) .v4u-upsell-prev { display: none; }

/* ── Added-to-cart card — mirrors the v4 by-size page's card (.bsv4-cartok in
   dev/bysize-v4/styles/_cta.scss, tokens resolved: blue #019aff, ink #111827, line #e2e6ea,
   Inter 14/12px). Owen 2026-10-01: "use the v4 dtf by size add to cart toast". Opened as a
   popover (top layer, above the quick-buy dialog), so the UA popover box is reset here.
   If the by-size card's look changes, change this to match. ── */
.v4u-cartok {
  position: fixed;
  inset: 16px 16px auto auto;
  z-index: 9999;
  width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(10, 26, 40, 0.22);
  font: 600 14px / 1.3 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.v4u-cartok.is-in { opacity: 1; transform: none; }
.v4u-cartok__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #e6f6ff; color: #019aff; font-weight: 700; }
.v4u-cartok__check { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #fff; color: #019aff; }
.v4u-cartok__x { margin-left: auto; border: 0; background: none; padding: 0 2px; font-size: 22px; line-height: 1; color: #019aff; cursor: pointer; }
.v4u-cartok__body { display: flex; align-items: center; gap: 12px; padding: 14px; }
.v4u-cartok__thumb { width: 56px; height: 56px; flex: none; object-fit: contain; border-radius: 10px; background: #f5f6f8; border: 1px solid #e2e6ea; padding: 4px; box-sizing: border-box; }
.v4u-cartok__meta { min-width: 0; }
.v4u-cartok__name { display: block; color: #111827; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4u-cartok__qty { display: block; margin-top: 2px; color: #6b7280; font: 500 12px / 1.2 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.v4u-cartok__price { margin-left: auto; color: #111827; font-weight: 700; white-space: nowrap; }