/* BEAUTYLABS — catalog.css : container catalog (filter grid, lightbox, selection tray) */

.cc-hero{padding-block-end:var(--space-6)}
.cc-section{padding-block-start:var(--space-6)}

/* ---------------------------------------------------------------- toolbar */
.cc-toolbar{position:sticky;top:var(--hdr-h);z-index:40;background:var(--color-neutral-000);
  padding-block:var(--space-5) var(--space-4);margin-block-end:var(--space-6);
  border-block-end:1px solid var(--color-neutral-200)}
.cc-search{position:relative;max-width:520px;margin-block-end:var(--space-4)}
.cc-search svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--color-neutral-500);pointer-events:none}
.cc-search input{width:100%;min-height:48px;padding:10px 16px;padding-inline-start:44px;
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);
  font-family:var(--font);font-size:var(--fs-body);background:var(--color-neutral-000);color:var(--color-primary-900)}
.cc-search input:focus-visible{outline:2px solid var(--color-accent-blue);outline-offset:2px;border-color:transparent}
.cc-search input::-webkit-search-cancel-button{cursor:pointer}

.cc-ftoggle{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 18px;
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);
  background:var(--color-neutral-000);font-size:var(--fs-body-s);font-weight:600;color:var(--color-primary-700)}
.cc-ftoggle svg{width:20px;height:20px}
.cc-ftoggle-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:var(--radius-pill);background:var(--color-accent-coral);color:#fff;
  font-size:12px;font-variant-numeric:tabular-nums}
.cc-filters{display:flex;flex-direction:column;gap:var(--space-3)}
.cc-fgroup{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.cc-flabel{flex:0 0 66px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--color-neutral-700)}
.cc-fgroup .chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.cc-fgroup .chip{min-height:38px;padding:6px 12px;font-size:var(--fs-body-s)}
.cc-fgroup .chip .n{margin-inline-start:5px;font-weight:500;opacity:.62;font-variant-numeric:tabular-nums}

.cc-status{display:flex;align-items:center;gap:var(--space-4);margin-block-start:var(--space-4);min-height:24px}
.cc-status p{margin:0;font-size:var(--fs-body-s);color:var(--color-neutral-700)}
.cc-status strong{color:var(--color-primary-900)}
.cc-reset{font-size:var(--fs-body-s);min-height:0;padding:0}

/* ------------------------------------------------------------------- grid */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:var(--grid-gap)}
.cc-card{position:relative;display:flex;flex-direction:column;text-align:start;
  background:var(--color-neutral-000);border:1px solid var(--color-neutral-200);
  border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;
  transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.cc-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-accent-peach)}
.cc-card:focus-visible{outline:2px solid var(--color-accent-blue);outline-offset:2px}
.cc-card.is-picked{border-color:var(--color-accent-coral);box-shadow:0 0 0 1px var(--color-accent-coral) inset}

.cc-fig{position:relative;aspect-ratio:1/1;background:var(--color-neutral-100);overflow:hidden}
.cc-fig img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
/* transparent layer above every photo: blocks drag, long-press save and right-click targeting */
.cc-shield{position:absolute;inset:0;z-index:2;display:block;background:transparent;
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

.cc-body{padding:var(--space-4) var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.cc-code{font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--color-primary-900);
  font-variant-numeric:tabular-nums;margin:0}
.cc-code-lg{font-size:30px;line-height:1.15;margin-block:2px var(--space-4)}
.cc-cap{font-size:var(--fs-body-s);color:var(--color-primary-700);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-mat{font-size:var(--fs-micro);color:var(--color-neutral-700);margin:0;letter-spacing:.03em}
.cc-pick{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--color-neutral-300);
  background:rgba(255,255,255,.92);color:var(--color-primary-700);
  display:flex;align-items:center;justify-content:center;line-height:1;font-size:19px;font-weight:600;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.cc-pick:hover{background:var(--color-neutral-000);color:var(--color-accent-coral)}
.cc-card.is-picked .cc-pick{background:var(--color-accent-coral);border-color:var(--color-accent-coral);color:#fff}

/* closing note: the page's call to action lives in the sticky footer band, so this stays text only */
.cc-help{text-align:center}
.cc-help h2{margin-block-end:var(--space-4)}
.cc-help p{margin-inline:auto;max-width:62ch;color:var(--color-neutral-700)}
/* each sentence has to hold its own line, so this note runs at body size and sets its own width */
.cc-help p.cc-help-note{margin-block-start:var(--space-5);padding-block-start:var(--space-5);
  border-block-start:1px solid var(--color-neutral-200);
  font-size:var(--fs-body);max-width:none}

.cc-empty{text-align:center;color:var(--color-neutral-700);padding-block:var(--space-9)}
.cc-more{text-align:center;margin-block-start:var(--space-7)}

/* ------------------------------------------------------------- group head */
.cc-ghead{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--space-3);
  margin-block-start:var(--space-5);padding-block-end:var(--space-2);
  border-block-end:1px solid var(--color-neutral-200)}
.cc-ghead:first-child{margin-block-start:0}
.cc-ghead h3{font-size:var(--fs-h3);margin:0}
.cc-ghead span{font-size:var(--fs-body-s);color:var(--color-neutral-700);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- lightbox */
/* above the mobile sticky CTA band (z-index 880) so nothing overlaps the detail view */
.cc-lb{position:fixed;inset:0;z-index:960;background:var(--color-overlay-dark);
  display:flex;align-items:center;justify-content:center;padding:var(--space-5);
  overflow:hidden;backdrop-filter:blur(3px)}
.cc-lb[hidden]{display:none}
body.cc-lb-open .sticky-cta,body.cc-lb-open .cc-tray{display:none}
/* iOS keeps scrolling the page behind an overlay unless the body itself is pinned */
body.cc-lb-open{position:fixed;inset-inline:0;width:100%;overflow:hidden}
.cc-lb-box{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:0;width:min(940px,100%);max-height:88vh;background:var(--color-neutral-000);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.cc-lb-fig{position:relative;aspect-ratio:1/1;background:var(--color-neutral-100)}
/* the whole container has to stay visible here, so the photo fits inside the frame */
.cc-lb-fig img{width:100%;height:100%;object-fit:contain;display:block;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.cc-lb-meta{padding:var(--space-7) var(--space-6);display:flex;flex-direction:column;
  min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cc-lb-sec{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-accent-coral);margin:0}
.cc-lb-dl{margin:0 0 var(--space-6);display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px var(--space-4)}
.cc-lb-dl dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-neutral-700);margin:0}
.cc-lb-dl dd{margin:0;font-size:var(--fs-body);color:var(--color-primary-900)}
.cc-lb-share{display:flex;gap:var(--space-2);margin-block-start:var(--space-3)}
.cc-lb-url{flex:1 1 auto;min-width:0;min-height:44px;padding:8px 14px;
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);
  background:var(--color-neutral-100);color:var(--color-neutral-700);
  font-family:var(--font);font-size:13px;text-overflow:ellipsis}
.cc-lb-share .btn{flex:0 0 auto;min-height:44px;padding:10px 16px;font-size:var(--fs-body-s);white-space:nowrap}
.cc-lb-note{color:var(--color-neutral-700);margin-block-start:var(--space-4)}
.cc-lb-x{position:absolute;top:14px;inset-inline-end:16px;z-index:3;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--color-primary-900);
  font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center}
.cc-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--color-primary-900);font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.cc-lb-prev{inset-inline-start:max(12px,calc(50% - 530px))}
.cc-lb-next{inset-inline-end:max(12px,calc(50% - 530px))}
[dir="rtl"] .cc-lb-prev,[dir="rtl"] .cc-lb-next{transform:translateY(-50%) scaleX(-1)}
/* product codes, capacities and material lists are Latin data: keep their own order inside RTL pages */
[dir="rtl"] :is(.cc-code,.cc-cap,.cc-mat,.cc-tray-codes,#catLbCap,#catLbMat){direction:ltr;text-align:right}

/* ------------------------------------------------------------------- tray */
.cc-tray{position:fixed;inset-inline:0;bottom:0;z-index:110;
  background:var(--color-neutral-000);border-block-start:1px solid var(--color-neutral-200);
  box-shadow:0 -6px 24px rgba(31,27,36,.10)}
.cc-tray[hidden]{display:none}
.cc-tray-in{display:flex;align-items:center;gap:var(--space-5);padding-block:var(--space-4)}
.cc-tray-txt{margin:0;font-size:var(--fs-body-s);white-space:nowrap}
.cc-tray-txt strong{font-size:19px}
.cc-tray-codes{margin:0;flex:1 1 auto;min-width:0;font-size:var(--fs-body-s);color:var(--color-neutral-700);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-tray-act{display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto}
.cc-tray-act .btn{min-height:44px;padding:10px 18px}

/* ----------------------------------------------------------------- mobile */
@media (max-width:1023px){
  /* one column: the photo takes the space it needs, the details take the rest and scroll on their own */
  .cc-lb-box{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    max-height:92dvh;height:auto}
  /* the square photo fills the sheet's width until the viewport height becomes the limit */
  .cc-lb-fig{aspect-ratio:auto;width:100%;height:min(100%,46dvh)}
  .cc-lb-meta{padding:var(--space-5)}
  .cc-code-lg{font-size:26px}
}
/* below 1024px the facet rows are too tall to sit above the grid: collapse them behind a toggle */
@media (max-width:1023px){
  .cc-ftoggle{display:inline-flex}
  .cc-search{max-width:none;margin-block-end:0}
  .cc-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:center}
  .cc-ftoggle{grid-column:2;justify-self:end}
  .cc-filters{grid-column:1/-1;display:none}
  .cc-toolbar.is-open .cc-filters{display:flex}
  .cc-status{grid-column:1/-1;margin-block-start:0}
}
@media (max-width:767px){
  .cc-toolbar{top:56px;padding-block:var(--space-4) var(--space-3)}
  .cc-flabel{flex-basis:100%}
  .cc-fgroup{gap:var(--space-2)}
  .cc-fgroup .chip{min-height:34px;padding:5px 12px;font-size:13px}
  .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cc-body{padding:10px 12px 14px}
  .cc-code{font-size:15px}
  .cc-cap{font-size:12px}
  .cc-mat{font-size:11px}
  .cc-pick{width:30px;height:30px;font-size:17px;inset-block-start:7px;inset-inline-end:7px}
  .cc-tray-in{flex-wrap:wrap;gap:var(--space-3);padding-block:var(--space-3)}
  .cc-tray-codes{flex-basis:100%;order:3}
  .cc-tray-act{flex:1 1 auto;justify-content:flex-end}
  .cc-tray-act .btn{padding:10px 14px;font-size:14px}
  .cc-lb{padding:0;align-items:stretch}
  /* the box fills the fixed overlay exactly, so nothing can push past the viewport */
  .cc-lb-box{border-radius:0;width:100%;height:100%;max-height:100%;
    grid-template-rows:auto minmax(0,1fr)}
  /* full viewport width with a capped height: the square photo letterboxes instead of cropping */
  .cc-lb-fig{aspect-ratio:auto;width:100%;height:min(100vw,52dvh);max-height:none}
  .cc-lb-meta{padding-block-end:calc(var(--space-6) + env(safe-area-inset-bottom))}
  .cc-lb-nav{display:none}
}
/* short phones: give the photo a smaller share so the details still fit without scrolling */
@media (max-width:767px) and (max-height:700px){
  .cc-lb-fig{height:min(100vw,42dvh)}
}
@media (prefers-reduced-motion:reduce){
  .cc-card,.cc-card:hover{transition:none;transform:none}
}

/* ------------------------------------------------------------ reference note */
.cc-refnote{margin-block-start:var(--space-4);font-size:var(--fs-body-s);color:var(--color-neutral-700);max-width:none}
.cc-refnote .link{margin-inline-start:6px;white-space:nowrap}

/* ------------------------------------------------------------ variants table (lightbox) */
.cc-lb-var{margin:0 0 var(--space-5);border-collapse:collapse;width:100%;font-size:var(--fs-body-s)}
.cc-lb-var caption{text-align:start;font-size:var(--fs-micro);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--color-neutral-700);padding-block-end:6px}
.cc-lb-var td{padding:5px 0;border-block-end:1px solid var(--color-neutral-200);font-variant-numeric:tabular-nums}
.cc-lb-var td:first-child{font-weight:700;color:var(--color-primary-900)}
.cc-lb-var td:last-child{text-align:end;color:var(--color-primary-700)}
[dir="rtl"] .cc-lb-var td{direction:ltr}