/* ═══ THE CATALOGUE PAGES ═══════════════════════════════════════════════════
   /products/ and the two collection indexes (reach-in-closets,
   wardrobe-cabinets). One design, scoped to main.pp;
   assets/products-catalog.js drives it; scripts/catalog_page.py writes the
   collection indexes.

   Classic White throughout. The hero board chooses between the two closet
   lines; a sticky bar says the finish, carries the tabs and, for wardrobes,
   switches the doors open or closed.

   Tiles: each spans four rows of its grid and shares them with its
   neighbours (subgrid), so the label, name, price and Configure of every tile
   in a row sit on one line even when a name wraps.

   Mobile first. Phones: a two-row bar - the finish, then the tabs spread
   evenly - with the doors switch just under it. From 881 the bar is one row.
   ═══════════════════════════════════════════════════════════════════════════ */
.pp{--pp-paper:#f7f6f3;--pp-hr:rgba(var(--hair-rgb),.14);--pp-ease:cubic-bezier(.16,1,.3,1)}
.pp .label{display:block;font:700 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pp h1,.pp h2,.pp h3{font-family:var(--font-serif);font-weight:600;letter-spacing:-.025em;color:var(--ink);margin:0}
.pp h1 em,.pp h2 em{font-style:italic;font-weight:500;color:var(--brand-deep)}
.pp .arw{width:12px;height:12px;flex:none;transition:transform .2s}
/* The controls only do anything with the script; without it the page is
   every piece, unfiltered. */
html:not(.js) .pp-rail,html:not(.js) .pp-show{display:none}

/* ── Hero ───────────────────────────────────────────────────────────── */
.pp-hero-in{display:grid;gap:26px;padding-block:22px 10px}
.pp-copy{display:grid;gap:16px;align-content:start}
.pp-copy h1{font-size:40px;line-height:1.02;text-wrap:balance}
.pp-copy .lede{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
.pp-more{justify-self:start;font:600 14px var(--font-sans);color:var(--brand-deep);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.pp-more:hover .arw{transform:translateX(3px)}

/* The line card for this page, ringed and ticked. */
.pp-line[aria-current="page"]{box-shadow:0 0 0 2px var(--ink),0 14px 22px -12px rgba(var(--shade-rgb),.5)}
.pp-line[aria-current="page"]::after{content:"";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1815' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 1px 3px rgba(var(--shade-rgb),.3)}
.pp-seg button:focus-visible,.pp-tab:focus-visible,.pp-line:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* The closets' board: the two lines as two cards, this page's one ticked. */
.pp-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.pp-line{position:relative;display:grid;text-decoration:none;color:inherit;background:var(--bg);
  box-shadow:0 0 0 1px rgba(var(--hair-rgb),.12),0 1px 2px rgba(var(--shade-rgb),.06);transition:transform .3s var(--pp-ease),box-shadow .3s}
.pp-line img{display:block;width:100%;height:auto;background:var(--pp-paper)}
.pp-line span{display:grid;gap:3px;padding:8px 10px 10px}
.pp-line b{font:600 13.5px/1.2 var(--font-sans);color:var(--ink)}
.pp-line small{font:600 9.5px/1.3 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pp-line:not([aria-current]):hover{transform:translateY(-2px)}

.pp-fig{margin:0 -22px;display:grid;gap:10px}
.pp-room{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-sunk)}
.pp-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pp-room.is-studio{background:var(--pp-paper)}
.pp-room.is-studio img{object-fit:contain;padding:4%}
.pp-fig figcaption{padding:0 22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:13px;color:var(--ink-soft)}
.pp-fig figcaption b{color:var(--ink);font-weight:600}
.pp-fig figcaption a{color:var(--brand-deep);font-weight:600;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.pp-fig figcaption a:hover .arw{transform:translateX(3px)}

/* ── The bar ────────────────────────────────────────────────────────── */
.pp-cat{padding:22px 0 90px;outline:0}
.pp-rail{position:sticky;top:var(--pp-top,0px);z-index:20;margin-bottom:28px;transition:top .3s ease;
  background:rgba(var(--band-rgb),.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block:1px solid var(--pp-hr)}
.pp-rail .wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:4px;padding-top:10px}
/* The closets' finish: one swatch that says what they are made in. */
.pp-finish{flex:1;display:flex;align-items:center;gap:10px;min-height:34px;font:italic 600 16px/1 var(--font-serif);color:var(--ink);white-space:nowrap}
.pp-finish i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(var(--hair-rgb),.2);flex:none}
.pp-seg{flex:none;display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-hard);background:var(--bg)}
.pp-seg button{appearance:none;border:0;background:none;cursor:pointer;min-height:28px;padding:5px 11px;border-radius:1px;
  font:600 12.5px var(--font-sans);letter-spacing:.01em;color:var(--ink-soft);white-space:nowrap;transition:background-color .18s,color .18s}
.pp-seg button:hover{color:var(--ink)}
.pp-seg button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink)}
.pp-tabs{flex:1 1 100%;display:grid;grid-auto-flow:column;justify-content:space-between}
.pp-tab{appearance:none;border:0;background:none;cursor:pointer;padding:10px 2px;border-bottom:2px solid transparent;margin-bottom:-1px;
  font:500 13.5px var(--font-sans);color:var(--ink-soft);white-space:nowrap;transition:color .15s,border-color .15s}
.pp-tab:hover{color:var(--ink)}
.pp-tab[aria-pressed="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.pp-tab .sm{display:none}
/* Doors open / closed is a set-once choice: on phones and tablets it sits
   just under the bar and scrolls away, so the bar never scrolls sideways. */
.pp-show{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-12px 0 22px;font:500 13px var(--font-sans);color:var(--ink-soft)}

/* ── Groups and tiles ───────────────────────────────────────────────── */
.pp-group{margin-top:44px}
.pp-group:first-of-type{margin-top:0}
.pp-group[hidden],.pp-tile[hidden]{display:none}
.pp-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--pp-hr)}
.pp-gh h2{font-size:26px;line-height:1.1}
.pp-gh h2 em{font-size:.8em}
.pp-gh p{margin:0;font-size:13px;color:var(--ink-soft)}
.pp-gh a{margin-left:auto;font:600 13px var(--font-sans);color:var(--brand-deep);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.pp-gh a:hover .arw{transform:translateX(3px)}

.pp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px}
.pp-tile{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0;text-decoration:none;color:inherit}
.pp-tile:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.pp-well{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--pp-paper)}
.pp-well img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s var(--pp-ease),opacity .35s ease}
.pp-tile:hover .pp-well img{transform:scale(1.04)}
/* The second picture: the doors closed (wardrobes). */
.pp-well img.pp-alt{opacity:0;transform:none}
.pp-well img.pp-alt.is-studio{object-fit:contain;padding:5%}
.pp-tile:hover .pp-well img.pp-alt,.pp.alt .pp-well img.pp-alt{opacity:1}
.pp-in{position:absolute;left:8px;bottom:8px;z-index:2;padding:4px 7px;font:600 10px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
  background:var(--chip-bg);color:var(--chip-ink);opacity:0;transition:opacity .3s}
.pp-tile:hover .pp-in.on{opacity:1}
.pp.alt .pp-in{opacity:0 !important}
.pp-sub{position:relative;margin-top:14px;padding-top:11px;border-top:1px solid var(--pp-hr);
  font:600 9.5px/1.35 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.pp-sub::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--brand);transition:width .6s var(--pp-ease)}
.pp-tile:hover .pp-sub::before,.pp-tile:focus-visible .pp-sub::before{width:100%}
.pp-tile h3{align-self:start;padding-top:6px;font-size:16px;line-height:1.22;letter-spacing:-.012em;text-wrap:balance}
.pp-foot{align-self:end;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px}
.pp-foot .price{font:500 13.5px/1 var(--font-sans);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em;color:var(--ink)}
.pp-foot .price b{font-weight:500}
.pp-go{margin-left:auto;display:inline-flex;align-items:center;gap:9px;flex:none;font:600 10.5px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep)}
.pp-go span{display:none}
.pp .pp-go svg{box-sizing:border-box;width:28px;height:28px;padding:8px;border-radius:50%;border:1px solid rgba(var(--brand-rgb),.35);
  transition:background-color .25s,border-color .25s,color .25s}
.pp-tile:hover .pp-go svg{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink)}

@media (max-width:599px){
  .pp-tab .lg{display:none}.pp-tab .sm{display:inline}
  .pp-finish{font-size:15px;gap:8px}
  .pp-seg button{padding:5px 9px;font-size:12px}
  /* A closet page's collage is already on its line card above. */
  .pp-fig:has(.pp-room.is-studio){display:none}
}
@media (min-width:600px){
  .pp-fig{margin:0}.pp-fig figcaption{padding:0}
  .pp-cat{padding-top:48px}
  .pp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 18px}
  .pp-sub{font-size:10px;letter-spacing:.14em}
  .pp-tile h3{font-size:17px}
  .pp-foot .price{font-size:14px}
  .pp-line b{font-size:14.5px}
}
@media (min-width:881px){
  .pp-hero-in{grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:44px;align-items:start;padding-block:34px 10px}
  .pp-copy h1{font-size:52px}
  .pp-room{aspect-ratio:1/1}
  .pp-rail .wrap{flex-wrap:nowrap;column-gap:0;padding-top:0}
  .pp-finish{flex:none;align-self:stretch;padding-right:22px;border-right:1px solid var(--pp-hr)}
  .pp-rail .pp-seg{display:inline-flex;margin:0 22px}
  .pp-show{display:none}
  .pp-tabs{flex:none;display:flex;gap:24px;margin-left:auto}
  .pp-tab{padding:19px 0 17px}
}
@media (min-width:881px) and (max-width:1099px){.pp-tabs{gap:16px}}
@media (min-width:1100px){.pp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pp-go span{display:inline}}
@media (prefers-reduced-motion:reduce){
  .pp *,.pp *::before,.pp *::after{transition:none !important;animation:none !important}
  .pp-tile:hover .pp-well img{transform:none}
}