/* PowderedPurple catalogue - "shop the catalogue" layout.
 *
 * Layout and behaviour adopted from the Fragrifiscents catalogue (30 Sep 2026):
 * a large serif title, a row of category tiles, a left filter column with live
 * counts, a toolbar (count / per-row / sort) and removable filter chips.
 * Colour, type and corner radii stay PowderedPurple's own - only the structure
 * is borrowed.
 *
 * products.html only (every selector is scoped to .pp-refresh, like premium.css).
 * Load order: after premium.css, so equal-specificity rules here win.
 *
 * The catalogue <div class="container"> is itself the layout grid. The product
 * grid, its static no-JS fallback and the pager are emitted by
 * tools/generate-static-catalogue.mjs, which closes a fixed set of wrappers, so
 * no extra wrapper <div> can go around them: the sidebar sits in column 1 and
 * everything else is placed in column 2 instead.
 */

.pp-refresh .cs-layout .sr-only,.pp-refresh .cs-head .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- head --------------------------------------------------------------- */
.pp-refresh .cs-head{padding:clamp(34px,5vw,64px) 0 clamp(18px,2.4vw,30px);background:linear-gradient(180deg,#fffdf9,var(--pp-cream))}
.pp-refresh .cs-crumb{margin:0 0 clamp(14px,2vw,26px);font:600 .72rem/1.4 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--pp-ink-2)}
.pp-refresh .cs-crumb a{color:var(--pp-violet)}.pp-refresh .cs-crumb a:hover{text-decoration:underline}
.pp-refresh .cs-title{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(18px,4vw,64px);align-items:end}
.pp-refresh .cs-title h1{margin:0;font-weight:500;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1.02;max-width:14ch;text-wrap:balance}
.pp-refresh .cs-lead{margin:0;max-width:46ch;color:var(--pp-ink-2);font-size:1.02rem;line-height:1.6}

/* ---- layout ------------------------------------------------------------- */
.pp-refresh .catalogue-products-section{padding-top:clamp(10px,1.6vw,22px)}
.pp-refresh .cs-layout{display:grid;grid-template-columns:268px minmax(0,1fr);column-gap:clamp(20px,2.6vw,36px);align-items:start}
.pp-refresh .cs-layout>*{grid-column:2;min-width:0}
.pp-refresh .cs-layout>.cs-filters{grid-column:1;grid-row:1 / span 40}
.pp-refresh .cs-layout>.top-disclosure,.pp-refresh .cs-layout>.catalogue-eyewear-route{margin:0 0 12px}
.pp-refresh .cs-layout>.catalogue-result-head{margin:8px 0 14px}
.pp-refresh .cs-layout .catalogue-result-head h2{margin:0;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:500}

/* ---- category tiles ----------------------------------------------------- */
.pp-refresh .cs-fams{display:flex;gap:12px;overflow-x:auto;padding:4px 0 18px;margin-bottom:6px;scrollbar-width:thin;scroll-snap-type:x proximity}
.pp-refresh .cs-fam{flex:1 1 124px;min-width:118px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 10px 12px;text-align:center;cursor:pointer;
  border:1px solid var(--pp-line);border-radius:18px;background:#fff;color:var(--pp-ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.pp-refresh .cs-fam:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(33,22,49,.5);border-color:var(--pp-lilac)}
.pp-refresh .cs-fam:focus-visible,.pp-refresh .cs-chip:focus-visible,.pp-refresh .cs-link:focus-visible,.pp-refresh .cs-density button:focus-visible,.pp-refresh .cs-filter-toggle:focus-visible,.pp-refresh .cs-sort select:focus-visible,.pp-refresh .cs-search input:focus-visible,.pp-refresh .cs-opt input:focus-visible+.cs-check{outline:3px solid var(--pp-violet);outline-offset:2px}
.pp-refresh .cs-fam.is-active{border-color:var(--pp-ink);box-shadow:0 0 0 2px var(--pp-ink)}
.pp-refresh .cs-fam-img{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--tone,var(--pp-lilac)) 16%,#fff)}
.pp-refresh .cs-fam-img img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply}
.pp-refresh .cs-fam strong{font:600 .86rem/1.25 Inter,system-ui,sans-serif}
.pp-refresh .cs-fam small{font:500 .68rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--pp-ink-2)}

/* ---- filter sidebar ----------------------------------------------------- */
.pp-refresh .cs-filters{margin-top:4px;position:sticky;top:96px;max-height:calc(100dvh - 116px);overflow:auto;padding:18px 18px 10px;border:1px solid var(--pp-line);border-radius:18px;background:#fff;scrollbar-width:thin}
.pp-refresh .cs-filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pp-refresh .cs-filters-head strong{font:600 1.05rem Fraunces,Georgia,serif}
.pp-refresh .cs-link{border:0;background:none;padding:4px 0;color:var(--pp-violet);font:600 .8rem Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pp-refresh .cs-link:hover{color:var(--pp-plum)}
.pp-refresh .cs-search input{width:100%;height:44px;padding:0 14px;border:1px solid var(--pp-line);border-radius:999px;background:var(--pp-cream);color:var(--pp-ink);font-size:.9rem}
.pp-refresh .cs-group{margin:0;padding:0;border:0;border-top:1px solid var(--pp-line)}
.pp-refresh .cs-group:first-of-type{margin-top:14px}
.pp-refresh .cs-group summary{display:flex;align-items:center;justify-content:space-between;padding:13px 0;cursor:pointer;list-style:none;font:700 .72rem Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-ink-2)}
.pp-refresh .cs-group summary::-webkit-details-marker{display:none}
.pp-refresh .cs-group summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-right:3px;transition:transform .2s}
.pp-refresh .cs-group details[open]>summary::after{transform:rotate(-135deg)}
.pp-refresh .cs-opts{display:grid;gap:2px;padding:0 0 12px}
.pp-refresh .cs-opts.cs-scroll{max-height:236px;overflow:auto;padding-right:4px;scrollbar-width:thin}
.pp-refresh .cs-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:34px;padding:4px 2px;cursor:pointer;font-size:.88rem;color:var(--pp-ink)}
.pp-refresh .cs-opt input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
.pp-refresh .cs-check{flex:0 0 auto;width:16px;height:16px;border:1.5px solid #b9aec6;border-radius:50%;background:#fff;display:grid;place-items:center}
.pp-refresh .cs-opt input:checked+.cs-check{border-color:var(--pp-ink);background:var(--pp-ink)}
.pp-refresh .cs-opt input:checked+.cs-check::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.pp-refresh .cs-opt-l{flex:1;min-width:0;overflow-wrap:anywhere}
.pp-refresh .cs-n{font-style:normal;font-size:.72rem;color:var(--pp-ink-2);background:var(--pp-cream);border-radius:999px;padding:2px 8px}
.pp-refresh .cs-opt.dim{opacity:.4;cursor:default}
.pp-refresh .cs-opt:not(.dim):hover .cs-opt-l{color:var(--pp-violet)}
/* The sidebar holds the facet group directly; premium.css styles the old bar. */
.pp-refresh .cs-filters .catalogue-attribute-filters{display:block;margin:0;padding:0;border:0;background:none;box-shadow:none}
.pp-refresh .cs-filters .catalogue-attribute-filters[hidden]{display:none}

/* ---- toolbar, chips ----------------------------------------------------- */
.pp-refresh .cs-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.pp-refresh .cs-count{flex:1;margin:0;min-width:160px;font:600 .82rem/1.4 Inter,system-ui,sans-serif;color:var(--pp-ink-2)}
.pp-refresh .cs-filter-toggle{display:none;align-items:center;gap:6px;min-height:42px;padding:0 16px;border:1px solid var(--pp-ink);border-radius:999px;background:transparent;color:var(--pp-ink);font-weight:700;font-size:.85rem;cursor:pointer}
.pp-refresh .cs-density{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--pp-line);border-radius:999px;background:#fff}
.pp-refresh .cs-density button{width:34px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--pp-ink);font-weight:700;font-size:.82rem;cursor:pointer}
.pp-refresh .cs-density button[aria-pressed="true"]{background:var(--pp-ink);color:#fff}
.pp-refresh .cs-sort{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--pp-ink-2)}
.pp-refresh .cs-sort select{height:42px;padding:0 34px 0 14px;border:1px solid var(--pp-line);border-radius:999px;background:#fff;color:var(--pp-ink);font-size:.85rem}
.pp-refresh .cs-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.pp-refresh .cs-chips:empty{display:none}
.pp-refresh .cs-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border:1px solid var(--pp-lilac);border-radius:999px;background:#f2eafb;color:var(--pp-plum);font-size:.8rem;font-weight:600;cursor:pointer}
.pp-refresh .cs-chip:hover{background:var(--pp-lilac)}

/* ---- results grid ------------------------------------------------------- */
.pp-refresh #catalogGrid{scroll-margin-top:96px}
.pp-refresh .cs-layout .catalogue-grid:not(.catalogue-grid-grouped),.pp-refresh .cs-layout .catalogue-subcategory .catalogue-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pp-refresh .cs-layout #catalogGrid[data-cols="3"]:not(.catalogue-grid-grouped),.pp-refresh .cs-layout #catalogGrid[data-cols="3"] .catalogue-subcategory .catalogue-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* Card plate: a softly tinted ground behind the packshot, as on the Fragrifiscents cards. */
.pp-refresh .cs-layout .catalogue-product-card{border-radius:18px;border:1px solid var(--pp-line);background:#fff;overflow:hidden;transition:transform .2s,box-shadow .2s}
.pp-refresh .cs-layout .catalogue-product-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -24px rgba(33,22,49,.55)}
.pp-refresh .cs-layout .catalogue-product-card .catalog-card-media-frame{background:#f6f1fb}
.pp-refresh .cs-layout .catalogue-subcategory{border-radius:18px}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:1180px){
  .pp-refresh .cs-layout{grid-template-columns:236px minmax(0,1fr)}
  .pp-refresh .cs-layout .catalogue-grid:not(.catalogue-grid-grouped),.pp-refresh .cs-layout .catalogue-subcategory .catalogue-grid,.pp-refresh .cs-layout #catalogGrid[data-cols]:not(.catalogue-grid-grouped),.pp-refresh .cs-layout #catalogGrid[data-cols] .catalogue-subcategory .catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .pp-refresh .cs-title{grid-template-columns:1fr}
  .pp-refresh .cs-layout{display:block}
  .pp-refresh .cs-filter-toggle{display:inline-flex}
  .pp-refresh .cs-filters{display:none;position:static;max-height:none;margin:0 0 14px}
  .pp-refresh .cs-filters.is-open{display:block}
  .pp-refresh .cs-density-wrap{display:none}
  .pp-refresh .cs-layout .catalogue-grid:not(.catalogue-grid-grouped),.pp-refresh .cs-layout .catalogue-subcategory .catalogue-grid,.pp-refresh .cs-layout #catalogGrid[data-cols]:not(.catalogue-grid-grouped),.pp-refresh .cs-layout #catalogGrid[data-cols] .catalogue-subcategory .catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:520px){
  .pp-refresh .cs-fam{flex-basis:118px}
  .pp-refresh .cs-sort span{display:none}
  .pp-refresh .cs-layout .catalogue-grid:not(.catalogue-grid-grouped),.pp-refresh .cs-layout .catalogue-subcategory .catalogue-grid,.pp-refresh .cs-layout #catalogGrid[data-cols]:not(.catalogue-grid-grouped),.pp-refresh .cs-layout #catalogGrid[data-cols] .catalogue-subcategory .catalogue-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.pp-refresh .cs-fam,.pp-refresh .cs-layout .catalogue-product-card{transition:none}.pp-refresh .cs-fam:hover,.pp-refresh .cs-layout .catalogue-product-card:hover{transform:none}}

/* Card buttons stack: "View Product Details" above "Shop", each full width.
   (Side by side they were ~90px wide in a four-up grid and the label wrapped
   to three lines.) Beats the premium.css column-flow rules by scoping to .cs-layout. */
.pp-refresh .cs-layout .catalog-actions{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;gap:10px}
.pp-refresh .cs-layout .catalog-actions > a,.pp-refresh .cs-layout .catalog-actions > button{width:100%;min-height:46px}

/* Filter accordion, matched to the Fragrifiscents one: borderless white panel,
   muted group titles and chevrons, square ticks, counts on a page-coloured pill.
   "Muted" is PowderedPurple's --pp-ink-2 here, in place of their warm grey. */
.pp-refresh .cs-filters{border:0;box-shadow:0 1px 2px rgba(33,22,49,.05),0 6px 18px -10px rgba(33,22,49,.16)}
.pp-refresh .cs-group summary{color:var(--pp-ink-2);font-weight:600;letter-spacing:.1em}
.pp-refresh .cs-group summary::after{width:8px;height:8px;border-color:var(--pp-ink-2)}
.pp-refresh .cs-check{flex-basis:18px;width:18px;height:18px;border:1.5px solid var(--pp-ink-2);border-radius:5px}
.pp-refresh .cs-opt input:checked+.cs-check{background:var(--pp-ink);border-color:var(--pp-ink)}
.pp-refresh .cs-opt input:checked+.cs-check::after{width:9px;height:5px;border-radius:0;background:none;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.pp-refresh .cs-n{background:var(--pp-cream)}

/* Filter accordion in the product page's colour theme (pdp-product-accordion in
   premium.css): lilac bar with a plum serif title, the orange ramp on hover,
   the deeper orange with ink text while open. Same tokens, so the two stay in step. */
.pp-refresh .cs-group{border-top:0;margin-top:8px}
.pp-refresh .cs-group:first-of-type{margin-top:14px}
.pp-refresh .cs-group summary{padding:12px 14px;border-radius:12px;background:#f4edfb;color:#4b246f;font:700 1rem/1.25 Fraunces,Georgia,serif;letter-spacing:-.01em;text-transform:none;transition:background .15s ease,color .15s ease}
.pp-refresh .cs-group summary:hover{background:var(--pp-orange-face);color:var(--pp-orange-ink)}
.pp-refresh .cs-group details[open]>summary{background:var(--pp-orange-face-open);color:var(--pp-orange-ink)}
.pp-refresh .cs-group summary::after{border-color:#6b3fa0}
.pp-refresh .cs-group summary:hover::after,.pp-refresh .cs-group details[open]>summary::after{border-color:var(--pp-orange-ink)}
.pp-refresh .cs-opts{padding:8px 4px 10px}

/* Columns selector label (1 Oct 2026), styled like the Sort by label beside it. */
.pp-refresh .cs-density-wrap{display:inline-flex;align-items:center;gap:8px}
.pp-refresh .cs-density-label{font-size:.78rem;font-weight:600;color:var(--pp-ink-2)}

/* Filter block: a clearer lift off the page (1 Oct 2026). */
.pp-refresh .cs-filters{box-shadow:0 2px 6px rgba(33,22,49,.08),0 16px 36px -14px rgba(33,22,49,.38)}

/* Drawn from the HTML, so the column has its shape while the catalogue index (8 MB) downloads. */
.pp-refresh .cs-skeleton{display:grid;gap:10px;margin-top:14px}
.pp-refresh .cs-skeleton span{display:block;height:44px;border-radius:12px;background:linear-gradient(90deg,#f4edfb 25%,#ebe0f7 50%,#f4edfb 75%);background-size:200% 100%;animation:cs-shimmer 1.4s linear infinite}
@keyframes cs-shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.pp-refresh .cs-skeleton span{animation:none}}