/* Program portal (MVW first): layouts from Angie's "MVW SignatureSpark Portal Layouts" p3-p6, p12.
   Colours and type follow Spark: ink #24272a, gold #9e8959, panel #f7f7f7, Adelle Sans, Zahrah for display. */
.pp { --ink:#24272a; --gold:#9e8959; --muted:#8b8085; --panel:#f7f7f7; --box:#e6e6e6; color:var(--ink); }
.pp a { color:inherit; }
.pp-head { text-align:center; padding:44px 16px 6px; }
.pp-lockup { font-family:'Zahrah-Semibold',serif; font-size:34px; color:var(--gold); }
.pp-lockup b { font-family:inherit; font-weight:400; color:var(--ink); }
.pp-kicker { margin-top:26px; color:var(--gold); letter-spacing:3px; font-weight:600; text-transform:uppercase; }
.pp-lede { max-width:760px; margin:14px auto 0; letter-spacing:.6px; line-height:1.7; }
.pp-steps { margin-top:16px; font-weight:600; letter-spacing:1.2px; }

.pp-signin { max-width:760px; margin:18px auto 0; padding:12px 16px; background:var(--panel); border-radius:4px;
	display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; }
/* while gated, the sign-in line sits in the middle of the empty page below the header */
#pp-signin.pp-gated { min-height:55vh; display:flex !important; align-items:center; justify-content:center; padding:0 16px; }
#pp-signin.pp-gated .pp-signin { margin:0; }
.pp-signin .filled-button { background:var(--ink); color:#fff; border:0; padding:8px 22px; border-radius:2px; cursor:pointer; }

/* the three sorts */
.pp-sorts { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin:26px auto 8px; padding:0 16px; }
.pp-sort { width:230px; position:relative; }
.pp-sort label { display:block; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pp-sort .pp-box { background:var(--box); height:40px; display:flex; align-items:center; justify-content:space-between;
	padding:0 12px; cursor:pointer; user-select:none; }
.pp-sort .pp-box:after { content:''; border:7px solid transparent; border-top-color:var(--muted); margin-top:7px; }
.pp-menu { position:absolute; left:0; right:0; top:100%; background:#fff; z-index:20; box-shadow:0 6px 18px rgba(0,0,0,.15);
	max-height:420px; overflow:auto; display:none; }
.pp-sort.open .pp-menu { display:block; }
.pp-sort-color { width:380px; }
.pp-opt { padding:9px 12px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.pp-opt:hover, .pp-opt.on { background:var(--box); }
.pp-opt.on { font-weight:600; }
.pp-opt .pp-name { min-width:96px; }
.pp-opt small { color:var(--muted); }
.pp-chip { display:inline-block; width:38px; height:22px; margin-right:6px; vertical-align:middle; }
.pp-chip-big { width:120px; height:44px; margin:0; }

/* grid: Spark's tile shape, smaller, as in the layouts */
.pp-grid-wrap { max-width:1400px; margin:10px auto 60px; padding:0 16px; }
.pp-group { margin:18px 0 6px; font-weight:600; letter-spacing:1px; }
.pp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px 12px; }
.pp-tile { display:block; text-decoration:none; }
.pp-tile .pp-img { aspect-ratio:1/1; background:#eee center/cover no-repeat; }
.pp-tile .pp-lbl { font-size:11px; line-height:1.35; margin-top:4px; color:#555; }
.pp-tile .pp-lbl b { color:var(--gold); font-weight:600; }
.pp-empty { padding:40px; text-align:center; color:var(--muted); }
.pp-note { max-width:900px; margin:8px auto; text-align:center; font-size:12px; color:var(--muted); }

/* product page */
.pp-prod { max-width:1400px; margin:0 auto 60px; padding:18px 16px; }
.pp-back { display:flex; align-items:center; gap:12px; font-weight:600; margin-bottom:12px; }
.pp-back a { text-decoration:none; font-size:22px; }
.pp-heart { color:#bbb; cursor:pointer; user-select:none; }
.pp-heart.on { color:#c0392b; }
.pp-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
@media (max-width:860px) { .pp-cols { grid-template-columns:1fr; } .pp-sort-color { width:100%; } }
.pp-tabs { display:flex; border-bottom:1px solid #ddd; }
.pp-tabs a { flex:1; text-align:center; padding:10px 6px; cursor:pointer; text-decoration:none; color:var(--ink); }
.pp-tabs a.on { border-bottom:3px solid var(--ink); font-weight:600; }
.pp-meta { text-align:right; font-size:12px; color:var(--muted); margin:6px 0; }
.pp-view { background:#eee; aspect-ratio:1/1; position:relative; overflow:hidden; }
.pp-view img { width:100%; height:100%; object-fit:cover; display:block; }
.pp-pane { background:var(--panel); padding:16px; min-height:360px; }
.pp-yarns { display:flex; gap:16px; flex-wrap:wrap; }
.pp-yarn { text-align:center; }
.pp-yarn .pp-letter { text-align:left; font-size:13px; margin-bottom:4px; }
.pp-yarn .pp-num { margin-top:6px; font-size:13px; }
.pp-locked { margin-top:16px; font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:13px; }
.pp-rooms { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pp-rooms img { width:100%; aspect-ratio:4/3; object-fit:cover; cursor:pointer; display:block; }
.pp-cws { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.pp-cw { text-align:center; cursor:pointer; font-size:12px; }
.pp-cw .pp-cwimg { aspect-ratio:1/1; background:#ddd center/cover no-repeat; position:relative; }
.pp-cw .pp-cwstrip { position:absolute; left:0; right:0; bottom:0; display:flex; height:22%; }
.pp-cw .pp-cwstrip span { flex:1; }
.pp-cw.on { font-weight:600; outline:2px solid var(--ink); outline-offset:2px; }
.pp-coords { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }

/* program mode in Spark's product viewer (program-open.js) */
.pp-program #configure-tab { display:none !important; }
.pp-program #pattern-colors > :not(#pp-yarns) { display:none !important; }
.pp-program #colorways > :not(#pp-cws) { display:none !important; }
#pp-yarns, #pp-cws { padding:0 12px; }
.pp-cw.pp-pending { opacity:.55; cursor:default; }
.pp-notes { max-width:1100px; margin:18px auto 30px; padding:0 16px; font-size:13px; color:var(--muted); line-height:1.6; }

.pp-toggle { align-self:flex-end; display:flex; align-items:center; height:40px; cursor:pointer; }
/* Materialize draws the box on the span; the input stays hidden */
.pp-toggle span { font-size:12px; color:var(--muted); line-height:25px; }

/* PIN form (_pin_form.html): PIN first, then Spark sign-in */
.pp-pin { max-width:360px; margin:12vh auto 30vh; display:flex; flex-direction:column; gap:10px; }
.pp-pin label { font-size:14px; color:var(--muted); }
.pp-pin input { font-size:22px; letter-spacing:.3em; text-align:center; }
.pp-pin .filled-button { background:var(--ink); color:#fff; border:0; padding:10px 22px; border-radius:2px; cursor:pointer; }
.pp-pin-msg { min-height:1.4em; font-size:13px; color:var(--muted); }
/* a pattern that is not offered in the chosen colorway shows its first colorway, dimmed */
.pp-tile.pp-not-in .pp-img { opacity:.45; }