/* ═══════════════════════════════════════════════════════════════════════════
   STITCHA LOOKBOOK — shared Step-2 (product selection) treatment
   ───────────────────────────────────────────────────────────────────────────
   The premium editorial catalogue for #page2 (cream surfaces, borderless serif
   cards, tiny swatches, right-hand Collection rail). Promoted out of the
   yachting skin so EVERY niche gets it. Yachting's warm --lb-* palette is kept
   as the default, so its flagship is unchanged; the gold already themes per
   niche (--lb-gold:var(--dk-accent)). A niche skin can override --lb-pg/ink to
   recolour the paper. Loaded after components.css, before the niche skin.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Step-2 base layout (#page2) ── */
/* ═══════════════════════════════════════════════════════
   STEP 2 — Premium fashion catalogue overrides
   References: Loro Piana / Acne Studios / Toteme / Net-a-Porter
   Cream background, borderless cards, refined typography,
   tiny outlined swatches, generous whitespace.
   ═══════════════════════════════════════════════════════ */

#page2{background:var(--dk-paper);}

/* Page heading area */
#page2 .workspace{background:var(--dk-paper);}
#page2 .right-panel,#page2 .center-panel,#page2 .main-panel{background:var(--dk-paper);}

/* Generous grid spacing */
#page2 .product-grid,#page2 .products-grid,#page2 #productGrid,#page2 #productsGrid{gap:2rem 1.5rem;padding:1.5rem 2rem;background:var(--dk-paper);}

/* ── Product card: borderless, generous, premium ── */
#page2 .product-card{background:transparent;border:none;border-radius:0;box-shadow:none;overflow:visible;padding:0;transition:transform 0.3s ease;}
#page2 .product-card:hover{box-shadow:none;transform:none;}
#page2 .product-card:hover .product-card-img{transform:scale(1.025);}
#page2 .product-card.selected{border:none;box-shadow:none;}

/* Selected card: keep name colour cue only — the floating bar shows the basket */
#page2 .product-card.selected .product-card-name{color:var(--red);}

/* Image: clean cream wrap with hover zoom */
#page2 .product-card-img-wrap{background:#f3f0eb;border-radius:0;aspect-ratio:3/4;overflow:hidden;}
#page2 .product-card-img{object-position:center;transition:transform 0.5s ease;}

/* Hover-back image stays available */
#page2 .product-card .product-card-img-wrap .p2-hover-back{transition:opacity 0.4s ease;}

/* ── Body: editorial typography ── */
#page2 .product-card-body{padding:1rem 0 0.35rem;background:transparent;}
#page2 .product-card-name{font-family:var(--dk-serif);font-size:14.5px;font-weight:500;color:var(--dk-ink);letter-spacing:-0.005em;line-height:1.3;margin-bottom:6px;min-height:0;-webkit-line-clamp:initial;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#page2 .product-card-meta{font-family:var(--dk-sans);font-size:10.5px;color:var(--dk-paper-dim);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}

/* Hide the noisy "Print ✓ Embroidery ✓" line — implicit in being on this site */
#page2 .product-card-deco{display:none;}

/* ── Footer: no top border, just swatches ── */
#page2 .product-card-footer{border-top:none;padding:0.4rem 0 0;background:transparent;min-height:0;justify-content:flex-start;}
#page2 .product-card-footer>span:first-child{display:none;}

/* Price tucked elegantly */
#page2 .product-card-price,#page2 .product-card-body .product-card-price{font-family:var(--dk-sans);font-size:12.5px;color:var(--dk-ink);font-weight:500;letter-spacing:0.01em;}

/* ── Swatches: tiny outlined dots ── */
#page2 .p2-swatch-row{gap:6px;padding:0;align-items:center;}
#page2 .p2-swatch{width:11px;height:11px;border-width:1px;border-color:rgba(0,0,0,0.12);transition:transform 0.15s,box-shadow 0.15s;}
#page2 .p2-swatch:hover{transform:scale(1.25);}
#page2 .p2-swatch.swatch-selected{box-shadow:0 0 0 1.5px var(--dk-paper),0 0 0 2.5px var(--dk-ink);border-color:transparent;}
#page2 .p2-swatch-more{width:11px;height:11px;border-width:1px;border-color:rgba(0,0,0,0.12);}
#page2 .p2-swatch-label{display:none;}

/* ── Duplicate-product corner button: refined ── */
#page2 .p2-dup-btn{width:28px;height:28px;background:rgba(255,255,255,0.95);border-color:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 1px 3px rgba(0,0,0,0.08);}
#page2 .p2-dup-btn:hover{background:var(--dk-ink);}

/* ── Auto-hide topnav + centre-header on scroll down ── */
#page2 .topnav{transition:transform 0.3s cubic-bezier(.4,0,.2,1),opacity 0.22s ease,height 0.3s ease;flex-shrink:0;overflow:hidden;}
#page2 .centre-header{transition:transform 0.3s cubic-bezier(.4,0,.2,1),opacity 0.22s ease,max-height 0.3s ease,padding-top 0.3s ease,padding-bottom 0.3s ease,border-bottom-width 0.3s ease;overflow:hidden;}
#page2.yh-headers-hidden .topnav{transform:translateY(-100%);height:0;opacity:0;}
#page2.yh-headers-hidden .centre-header{transform:translateY(-100%);max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom-width:0;}

/* ── Page 2 top heading area — minimal, just the view switcher (max space for cards) ── */
#page2 .centre-header{background:var(--dk-paper);padding:0.5rem 2rem;border-bottom:1px solid rgba(0,0,0,0.05);align-items:center;justify-content:flex-end;height:auto;min-height:0;}
#page2 .centre-title,#page2 .centre-sub{display:none;}
#page2 .centre-body{background:var(--dk-paper);padding:0;}
#page2 .product-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

/* View switcher (".view-all-bar" + ".view-all-btn") — refined pill row */
#page2 .view-all-bar{gap:0.35rem;align-items:center;padding:0;background:transparent;border:none;}
#page2 .view-all-bar > span{font-family:var(--dk-sans);font-size:10px;font-weight:600;color:var(--dk-paper-dim);text-transform:uppercase;letter-spacing:0.1em;margin-right:0.35rem;}
#page2 .view-all-btn{font-family:var(--dk-sans);font-size:11px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;padding:0.5rem 0.95rem;border:1px solid rgba(0,0,0,0.12);background:transparent;color:#5a5550;border-radius:2px;transition:all 0.15s;cursor:pointer;}
#page2 .view-all-btn:hover{border-color:rgba(0,0,0,0.35);color:var(--dk-ink);}
#page2 .view-all-btn.active{background:var(--dk-ink);color:#fff;border-color:var(--dk-ink);}

/* (Selected-state corner dot removed — the floating collection bar communicates basket state) */

/* Smooth grid on slightly larger min screens */
@media (min-width:1280px){
  #page2 .product-grid,#page2 .products-grid,#page2 #productGrid,#page2 #productsGrid{gap:2.5rem 1.75rem;padding:2rem 2.5rem;}
}

/* Mobile: tighter but still premium */
@media (max-width:768px){
  #page2 .product-grid,#page2 .products-grid,#page2 #productGrid,#page2 #productsGrid{gap:1.5rem 1rem;padding:1rem;}
  #page2 .product-card-name{font-size:13px;}
}

/* ── Card hover-revealed "Add to Collection" pill (CSS-only, no JS) ── */
#page2 .product-card .product-card-img-wrap::after{content:'Add to Collection';position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateY(8px);font-family:var(--dk-sans);font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:#fff;background:rgba(var(--dk-ink-rgb),0.92);padding:0.55rem 1.1rem;border-radius:2px;opacity:0;transition:opacity 0.2s ease,transform 0.2s ease;pointer-events:none;z-index:6;white-space:nowrap;}
#page2 .product-card:hover .product-card-img-wrap::after{opacity:1;transform:translateX(-50%) translateY(0);}
#page2 .product-card.selected .product-card-img-wrap::after{content:'\2713  In Collection';opacity:1;transform:translateX(-50%) translateY(0);background:var(--red);color:#fff;}

/* ── Floating yachting collection bar (sits at body level) ── */
.yh-collection-bar{position:fixed;bottom:0;left:0;right:0;background:var(--dk-ink);border-top:1px solid rgba(255,255,255,0.08);padding:1rem 2rem;z-index:100;transform:translateY(110%);transition:transform 0.4s cubic-bezier(.16,.84,.44,1);box-shadow:0 -10px 40px rgba(0,0,0,0.25);pointer-events:none;visibility:hidden;}
.yh-collection-bar.yh-bar-visible{transform:translateY(0);pointer-events:auto;visibility:visible;}
.yh-collection-bar-inner{display:flex;align-items:center;gap:1.75rem;max-width:1400px;margin:0 auto;}
.yh-collection-bar-info{display:flex;flex-direction:column;flex-shrink:0;line-height:1.1;}
.yh-collection-bar-label{font-family:var(--dk-sans);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.5);}
.yh-collection-bar-count{font-family:var(--dk-serif);font-size:18px;font-weight:500;color:#fff;margin-top:4px;letter-spacing:-0.005em;}
.yh-collection-bar-thumbs{display:flex;gap:0.5rem;flex:1;overflow-x:auto;align-items:center;min-width:0;}
.yh-collection-bar-thumbs::-webkit-scrollbar{display:none;}
.yh-collection-thumb{width:44px;height:56px;background-size:cover;background-position:center top;background-color:#1a1f26;border-radius:1px;flex-shrink:0;outline:1px solid rgba(255,255,255,0.06);}
.yh-collection-thumb-more{font-family:var(--dk-sans);font-size:12px;font-weight:600;color:rgba(255,255,255,0.6);min-width:38px;letter-spacing:0.04em;padding:0 0.3rem;}
.yh-collection-bar-cta{background:#fff;border:none;color:var(--dk-ink);font-family:var(--dk-sans);font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:0.9rem 1.6rem;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:0.6rem;transition:all 0.18s;flex-shrink:0;}
.yh-collection-bar-cta:hover{background:#f5f5f5;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.35);}
.yh-collection-bar-cta svg{transition:transform 0.18s;}
.yh-collection-bar-cta:hover svg{transform:translateX(3px);}

/* Leave room for the bar so the last row isn't covered (only matters on Step 2) */
#page2 .product-grid,#page2 #productGrid{padding-bottom:7rem;}

/* Hide on mobile — mobile has its own .mob-p2-sticky-bar */
@media (max-width:768px){
  .yh-collection-bar{display:none;}
  #page2 .product-grid,#page2 #productGrid{padding-bottom:4.5rem;}
}

/* ══════════════════════════════════════════════════════════════════════
   STEP 2 — YACHTING LAYOUT v2
   3-column workspace: filter sidebar | grid | collection sidebar
   Hides original brief/chat panels + floating bar; keeps all code intact.
   To revert: restore css/yachting-pre-filters-backup.css over this file.
   ══════════════════════════════════════════════════════════════════════ */

/* Hide original left + right panels on Step 2 (kept in DOM for restore) */
#page2 .left-panel,#page2 .right-panel{display:none !important;}

/* Hide floating bar while on Step 2 — the sidebar replaces it */
#page2.active ~ .yh-collection-bar{display:none !important;}

/* New workspace grid — FIXED pixel sidebar so its width literally cannot shift.
   Center column fills remaining viewport. min-width:0 prevents intrinsic content
   from pushing either column. */
#page2 .workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"center collection";gap:0;background:var(--dk-paper);width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;}
#page2 .centre-panel{grid-area:center;min-width:0;width:100%;box-sizing:border-box;}
#page2 .yh-collection-panel{grid-area:collection;min-width:0;width:320px;box-sizing:border-box;flex-shrink:0;}

/* No bottom padding needed any more — sidebar replaces floating bar */
#page2 .product-grid,#page2 #productGrid{padding-bottom:1.5rem;}

/* Filter trigger / drawer / sort promoted to css/components.css (shared engine). */

/* Push VIEW switcher to the left, Filter button stays on the right */
#page2 #p2ViewBarDesktop{margin-right:auto;}

/* Filter drawer styles promoted to css/components.css. */

/* ── Collection sidebar (right column, fixed 320px) ── */
.yh-collection-panel{background:var(--dk-paper);border-left:1px solid rgba(0,0,0,0.06);overflow-y:auto;scrollbar-gutter:stable;padding:1.5rem 1.25rem 2rem;display:flex;flex-direction:column;gap:1rem;box-sizing:border-box;}

/* Reserve scrollbar space on the product-grid scroll container so adding/removing
   items in the right sidebar (or growing rows in the grid) doesn't shift columns. */
#page2 .centre-body{scrollbar-gutter:stable;min-width:0;}
#page2 .workspace{min-width:0;}
/* Force a vertical scrollbar on the document at all times so adding content
   anywhere on the page can never trigger a viewport-width change. */
html{overflow-y:scroll;scrollbar-gutter:stable;}
/* Hide the secondary "Why crews choose this kit" card */
.yh-collection-secondary{display:none !important;}
.yh-collection-panel::-webkit-scrollbar{width:3px;}
.yh-collection-card{background:#fff;border:1px solid rgba(0,0,0,0.05);border-radius:3px;padding:1.1rem 1.1rem 1rem;}
.yh-collection-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.85rem;}
.yh-collection-card-title{font-family:var(--dk-serif);font-size:15px;font-weight:500;color:var(--dk-ink);margin:0;letter-spacing:-0.005em;line-height:1.2;}
.yh-collection-card-count{font-family:var(--dk-sans);font-size:12.5px;font-weight:500;color:var(--dk-paper-dim);letter-spacing:0;}
.yh-collection-items{display:flex;flex-direction:column;gap:0.7rem;min-height:60px;max-height:340px;overflow-y:auto;padding-right:2px;}
.yh-collection-items::-webkit-scrollbar{width:2px;}
.yh-collection-items::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);}
.yh-collection-empty{font-family:var(--dk-sans);font-size:11.5px;color:var(--dk-paper-dim);line-height:1.45;padding:0.5rem 0;}
.yh-collection-item{display:flex;align-items:center;gap:0.7rem;padding:0.4rem 0;}
.yh-collection-item-thumb{width:42px;height:54px;background-size:cover;background-position:center top;background-color:#f3f0eb;border-radius:1px;flex-shrink:0;}
.yh-collection-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.yh-collection-item-name{font-family:var(--dk-sans);font-size:11.5px;font-weight:500;color:var(--dk-ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.yh-collection-item-meta{font-family:var(--dk-sans);font-size:9.5px;color:var(--dk-paper-dim);text-transform:uppercase;letter-spacing:0.06em;}
.yh-collection-item-remove{background:none;border:none;color:var(--dk-paper-dim);cursor:pointer;padding:4px;line-height:1;font-size:14px;transition:color 0.15s;flex-shrink:0;}
.yh-collection-item-remove:hover{color:#b91c1c;}
.yh-collection-continue{margin-top:1rem;width:100%;background:var(--dk-ink);color:#fff;border:none;font-family:var(--dk-sans);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.95rem 1rem;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.18s;}
.yh-collection-continue:disabled{background:rgba(var(--dk-ink-rgb),0.25);cursor:not-allowed;}
.yh-collection-continue:not(:disabled):hover{background:#1f2937;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,0.18);}
.yh-collection-continue svg{transition:transform 0.18s;}
.yh-collection-continue:not(:disabled):hover svg{transform:translateX(3px);}

/* Secondary info card (Why crews choose this kit) */
.yh-collection-secondary .yh-collection-card-title{font-family:var(--dk-serif);font-size:14px;margin-bottom:1rem;}
.yh-info-row{display:flex;gap:0.7rem;padding:0.65rem 0;align-items:flex-start;}
.yh-info-row + .yh-info-row{border-top:1px solid rgba(0,0,0,0.05);}
.yh-info-icon{width:30px;height:30px;border-radius:50%;background:rgba(var(--dk-accent-rgb),0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);}
.yh-info-icon svg{width:14px;height:14px;}
.yh-info-name{font-family:var(--dk-sans);font-size:11.5px;font-weight:600;color:var(--dk-ink);line-height:1.25;}
.yh-info-desc{font-family:var(--dk-sans);font-size:11px;color:var(--dk-paper-dim);line-height:1.4;margin-top:2px;}

/* Sort dropdown styles promoted to css/components.css. */

/* ── Smaller card sizing for the narrower grid ── */
#page2 .product-grid,#page2 #productGrid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;padding:1rem 1.25rem 1.5rem;gap:1.5rem 1rem;}
#page2 .product-card-name{font-size:13px;}
#page2 .product-card-meta{font-size:9.5px;}
#page2 .product-card-deco{font-size:8.5px;}
#page2 .product-card-footer{padding:0.45rem 0 0;gap:0.35rem;}
#page2 .p2-swatch{width:11px;height:11px;border-width:1px;}
#page2 .p2-swatch-more{font-size:9.5px;}
#page2 .product-card-body{padding:0.7rem 0 0.4rem;}

/* Mobile: filters as a horizontal drawer or hidden — collection bar handles selection */
@media (max-width:768px){
  #page2 .workspace{grid-template-columns:1fr;grid-template-areas:"center";}
  #page2 .yh-filters-panel,#page2 .yh-collection-panel{display:none;}
}


/* ── B. Lookbook editorial restyle (#page2.p2-lookbook) ── */
/* ════════════════════════════════════════════════════════════════════════════
   PAGE 2 — LOOKBOOK RESTYLE (#page2.p2-lookbook)
   Editorial/warm-paper take on the products catalogue. Scoped under #page2.p2-lookbook
   so it only applies to the default-flow Page 2 (refined/cinematic variants
   skip Page 2 entirely). Ports prototype/css/products.css (.pv-lookbook rules).
   ════════════════════════════════════════════════════════════════════════════ */
#page2.p2-lookbook{
  --lb-pg:#efeae1; --lb-surface:#f6f1e9; --lb-side:#f3eee5;
  --lb-tile:#efece6; --lb-ink:#1a1714; --lb-sub:#8c8478;
  --lb-line:rgba(0,0,0,.08); --lb-line2:rgba(0,0,0,.16);
  --lb-gold:var(--dk-accent); --lb-gold-d:var(--dk-accent-deep); --lb-gold-b:#b89653;
  --lb-gold-tint:rgba(var(--dk-accent-rgb),.13); --lb-gold-line:rgba(var(--dk-accent-rgb),.32);
  --lb-danger:#b8472f;
  background:var(--lb-pg);
}
/* Topnav kept as the default dark/white treatment (per user request — Lookbook
   page bg is warm-paper but the header bar stays the existing black band). */
/* Hide the existing left journey aside — the top step bar already conveys
   progress and the Lookbook layout is grid + right rail only. */
#page2.p2-lookbook .workspace > .left-panel{display:none !important;}
#page2.p2-lookbook .workspace{grid-template-columns:minmax(0,1fr) 344px;}
#page2.p2-lookbook .centre-panel{background:var(--lb-pg);}
#page2.p2-lookbook .centre-body{background:var(--lb-pg);padding:0;}
/* Sticky toolbar so View/Filter/Sort stay reachable as the grid scrolls. */
#page2.p2-lookbook .centre-header{position:sticky;top:0;z-index:30;background:var(--lb-pg);padding:1rem 3rem;border-bottom:1px solid var(--lb-line);}

/* ── Product card ──
   Image area is now JUST the image — no cream tile, no padding, no multiply.
   The garment photos already include the model + studio backdrop, so we let
   them fill the card edge-to-edge. */
#page2.p2-lookbook #productGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2.4rem;padding:2.2rem 3rem 6rem;}
#page2.p2-lookbook .product-card{background:transparent;border:none;padding:0;border-radius:0;box-shadow:none;}
#page2.p2-lookbook .product-card-img-wrap{position:relative;aspect-ratio:4/5;background:transparent;border:none;border-radius:0;overflow:hidden;}
#page2.p2-lookbook .product-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;mix-blend-mode:normal;transition:opacity .35s ease,transform .6s ease;}
#page2.p2-lookbook .p2-hover-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;mix-blend-mode:normal;opacity:0;transition:opacity .35s ease;display:block !important;}
#page2.p2-lookbook .product-card:hover .product-card-img{opacity:0;transform:scale(1.035);}
#page2.p2-lookbook .product-card:hover .p2-hover-back{opacity:1;transform:scale(1.035);}
/* Suppress the chrome inherited from base product-card styles */
#page2.p2-lookbook .product-card .product-badge,
#page2.p2-lookbook .product-card .suggested-badge,
#page2.p2-lookbook .product-card .p2-dup-btn,
#page2.p2-lookbook .product-card .card-select-btn,
#page2.p2-lookbook .product-card .card-view-switch,
#page2.p2-lookbook .product-card .card-tap-prev,
#page2.p2-lookbook .product-card .card-tap-next,
#page2.p2-lookbook .product-card .product-card-deco,
#page2.p2-lookbook .product-card .lookbook-corner-tick{display:none !important;}

/* "Ready-made design" tag — products that ship with an editable preset design.
   Deliberately NOT in the suppression list above: it's the one badge we keep on
   the Lookbook. Top-left dark chip with an accent sparkle, so it never clashes
   with the bottom gold quick-add / 'In collection' bar. Themes per niche via the
   --lb-* tokens (--lb-gold falls back to --dk-accent). */
#page2.p2-lookbook .product-card .preset-badge{position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:.34rem;background:var(--lb-ink);color:var(--lb-pg);font-family:var(--dk-sans);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.42rem .6rem;border-radius:5px;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,0.16);}
#page2.p2-lookbook .product-card .preset-badge svg{width:11px;height:11px;fill:var(--lb-gold);stroke:var(--lb-gold);flex-shrink:0;}
@media (max-width:768px){#page2.p2-lookbook .product-card .preset-badge{top:8px;left:8px;font-size:8.5px;padding:.34rem .48rem;gap:.28rem;}}

/* Quick-add (hover) + persistent In-collection bar */
#page2.p2-lookbook .product-card .p2-quickadd{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--lb-ink);color:var(--lb-pg);border:none;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.7rem;border-radius:6px;opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s,background .2s,color .2s;cursor:pointer;font-family:var(--dk-sans);}
#page2.p2-lookbook .product-card:hover .p2-quickadd{opacity:1;transform:none;}
#page2.p2-lookbook .product-card .p2-quickadd:hover{background:var(--lb-gold);color:#fff;}
#page2.p2-lookbook .product-card .p2-incol-bar{display:none;position:absolute;left:12px;right:12px;bottom:12px;z-index:4;align-items:center;justify-content:center;gap:.4rem;background:var(--lb-gold);color:#fff;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.7rem;border-radius:6px;font-family:var(--dk-sans);pointer-events:none;}
#page2.p2-lookbook .product-card.selected .p2-quickadd{display:none;}
#page2.p2-lookbook .product-card.selected .p2-incol-bar{display:inline-flex;}
/* Selection refinements (the .p2-incol-bar above is the only indicator on the
   Lookbook): hide the generic '✓ In Collection' ::after overlay (line ~107), the
   red name swap, and the red outline glow inherited from styles.css's
   .product-card.selected. Promoted from the yachting skin so every niche gets them. */
#page2.p2-lookbook .product-card.selected .product-card-img-wrap::after{display:none !important;content:none !important;}
#page2.p2-lookbook .product-card.selected .product-card-name{color:var(--lb-ink) !important;}
#page2.p2-lookbook .product-card.selected{border:none !important;box-shadow:none !important;}

/* Card body — centred, Playfair name, colour+price beneath */
#page2.p2-lookbook .product-card-body{padding:1.1rem 0 0;text-align:center;background:transparent;border:none;}
/* Allow product names to wrap to 2 lines instead of nowrap+ellipsis-cutoff
   (was truncating long ones like 'Unisex Fine Jersey Tank Top'). */
#page2.p2-lookbook .product-card-name{font-family:var(--dk-serif);font-size:17px;font-weight:500;color:var(--lb-ink);line-height:1.25;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:2.5em;}
#page2.p2-lookbook .product-card-meta{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--lb-sub);margin:6px 0 0;font-family:var(--dk-sans);}
/* Inline the price beside the colour for a centered sub-row */
#page2.p2-lookbook .product-card-body{display:flex;flex-direction:column;align-items:center;gap:0;}
#page2.p2-lookbook .product-card-meta + .product-card-meta{margin-top:0;font-weight:500;color:var(--lb-ink);font-size:12.5px;letter-spacing:.02em;text-transform:none;}

/* Swatches centred, with the active one ringed in gold */
#page2.p2-lookbook .product-card-footer{background:transparent;border:none;padding:0;}
#page2.p2-lookbook .p2-swatch-row{justify-content:center;margin-top:9px;flex-wrap:wrap;gap:7px;display:flex;}
#page2.p2-lookbook .p2-swatch{width:14px;height:14px;border-radius:50%;border:1px solid var(--lb-line2);}
#page2.p2-lookbook .p2-swatch.active{box-shadow:0 0 0 2px var(--lb-pg),0 0 0 3.5px var(--lb-gold);border-color:transparent;}

/* ── Collection sidebar (right rail) ── */
#page2.p2-lookbook .yh-collection-panel{background:var(--lb-side);border-left:1px solid var(--lb-line);padding:1.5rem 1.35rem 1.8rem;}
#page2.p2-lookbook .yh-collection-card{background:transparent;border:none;padding:0;box-shadow:none;}
#page2.p2-lookbook .yh-collection-card-head{padding:0;margin-bottom:1rem;}
#page2.p2-lookbook .yh-collection-card-title{font-family:var(--dk-serif);font-size:19px;font-weight:500;color:var(--lb-ink);margin:0;display:flex;align-items:center;gap:.55rem;}
#page2.p2-lookbook .yh-collection-card-count{font-family:var(--dk-sans);font-size:12px;font-weight:600;color:var(--lb-gold-d);background:var(--lb-gold-tint);padding:2px 10px;border-radius:999px;}
#page2.p2-lookbook .yh-collection-card-title.lookbook-pulse{animation:lookbookPulse .6s ease;}
@keyframes lookbookPulse{0%,100%{transform:none;}40%{transform:scale(1.05);}}
#page2.p2-lookbook .yh-collection-empty{text-align:center;color:var(--lb-sub);font-size:12.5px;line-height:1.6;padding:2.5rem 1rem;background:transparent;border:none;}
#page2.p2-lookbook .yh-collection-empty-ic{display:flex;justify-content:center;margin-bottom:.8rem;color:var(--lb-line2);}
#page2.p2-lookbook .yh-collection-items{display:flex;flex-direction:column;gap:0;}
#page2.p2-lookbook .yh-collection-item{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--lb-line);}
#page2.p2-lookbook .yh-collection-item-thumb{width:46px;height:58px;background:var(--lb-tile);border-radius:3px;overflow:hidden;flex-shrink:0;background-size:contain;background-position:center;background-repeat:no-repeat;mix-blend-mode:multiply;}
#page2.p2-lookbook .yh-collection-item-info{flex:1;min-width:0;}
#page2.p2-lookbook .yh-collection-item-name{font-family:var(--dk-serif);font-size:13px;color:var(--lb-ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Per design rule — no colour name + no price visible on the sidebar item */
#page2.p2-lookbook .yh-collection-item-meta{display:none !important;}
#page2.p2-lookbook .yh-collection-item .lookbook-remove{background:none;border:none;color:var(--lb-sub);padding:4px;cursor:pointer;opacity:.55;transition:opacity .15s,color .15s;flex-shrink:0;}
#page2.p2-lookbook .yh-collection-item .lookbook-remove:hover{opacity:1;color:var(--lb-danger);}

/* Undo row */
#page2.p2-lookbook .yh-collection-undo{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--lb-gold-tint);border:1px solid var(--lb-gold-line);border-radius:8px;padding:.6rem .85rem;font-size:12px;color:var(--lb-ink);margin-top:.8rem;}
#page2.p2-lookbook .yh-collection-undo button{background:none;border:none;color:var(--lb-gold-d);font-weight:600;font-size:12px;cursor:pointer;}

/* Foot: Continue + What happens next */
#page2.p2-lookbook .yh-collection-foot{margin-top:auto;display:flex;flex-direction:column;gap:1.1rem;padding-top:1rem;}
#page2.p2-lookbook .yh-collection-continue{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--lb-ink);color:var(--lb-pg);border:none;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.95rem;border-radius:8px;cursor:pointer;width:100%;transition:transform .15s,box-shadow .2s,opacity .2s;font-family:var(--dk-sans);}
#page2.p2-lookbook .yh-collection-continue:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.18);}
#page2.p2-lookbook .yh-collection-continue:disabled{opacity:.35;cursor:not-allowed;}
#page2.p2-lookbook .yh-collection-continue svg{transition:transform .2s;}
#page2.p2-lookbook .yh-collection-continue:hover:not(:disabled) svg{transform:translateX(3px);}
#page2.p2-lookbook .yh-collection-nextsteps{border-top:1px solid var(--lb-line);padding-top:1.1rem;}
#page2.p2-lookbook .yh-collection-nextsteps-lbl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lb-sub);margin-bottom:.8rem;}
#page2.p2-lookbook .yh-nextstep-row{display:flex;align-items:center;gap:.6rem;font-size:11.5px;color:var(--lb-sub);line-height:1.3;margin-bottom:.55rem;white-space:nowrap;}
#page2.p2-lookbook .yh-nextstep-row b{width:18px;height:18px;border-radius:50%;background:var(--lb-gold-tint);color:var(--lb-gold-d);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}

/* Fly-to-basket ghost (cloned image animates from card -> sidebar header) */
#page2.p2-lookbook .lookbook-fly{position:fixed;pointer-events:none;z-index:9999;object-fit:contain;mix-blend-mode:multiply;transition:transform .72s cubic-bezier(.4,0,.3,1),opacity .72s cubic-bezier(.4,0,.3,1);}

/* Responsive: collapse to single column under 1180px (matches prototype) */
@media (max-width:1180px){
  #page2.p2-lookbook #productGrid{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem;padding:1.4rem 1.4rem 4rem;}
}
@media (max-width:768px){
  /* 2-up on phones — !important to beat the repeat(4) !important grid above (~line 210),
     which otherwise forces 4 cramped columns at every width. */
  #page2.p2-lookbook #productGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:1.4rem 1rem;padding:1rem 1rem 3rem;}
  #page2.p2-lookbook .product-card-name{font-size:14.5px;}
}


/* ── C. Lookbook patch rules (also still in skin; harmless dup) ── */
#page2.p2-lookbook .product-card.selected .product-card-img-wrap::after{display:none !important;content:none !important;}
#page2.p2-lookbook .product-card.selected .product-card-name{color:var(--lb-ink) !important;}
#page2.p2-lookbook .product-card.selected{border:none !important;box-shadow:none !important;}

/* ── D. Lookbook view-switcher buttons (also still in skin; harmless dup) ── */
#page2 .view-all-bar > span{font-family:var(--dk-sans);font-size:9.5px;font-weight:600;color:var(--dk-paper-dim);text-transform:uppercase;letter-spacing:0.1em;margin-right:0.4rem;}
#page2 .view-all-btn{font-family:var(--dk-sans);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:0.35rem 0.7rem;border:1px solid rgba(0,0,0,0.12);background:transparent;color:#5a5550;border-radius:2px;white-space:nowrap;line-height:1.1;}
#page2 .view-all-btn:hover{border-color:rgba(0,0,0,0.35);color:var(--dk-ink);}
#page2 .view-all-btn.active{background:var(--dk-ink);color:#fff;border-color:var(--dk-ink);}