@layer components {

/* ============================================================================
   The catalogue components. The same class names on all four sites, so a change
   to the shape of a slider or a product card is one edit per site rather than a
   rediscovery. The look is per brand and lives in the block at the foot of this
   file; everything above it is structure.

   Load order: this file is appended to the lifted page chrome to make
   theme/products.css for the generated catalogue pages, and it is linked on its
   own by the hand-written home page.
   ========================================================================= */

/* --- the showcase banner ---------------------------------------------------
   The thing in use, before anything is claimed about it. Video where there is
   one, the still where there is not, and a drawn scene until either exists. */
.showcase{border-bottom:1px solid var(--rule);padding-block:var(--sp-7) var(--sp-8)}
.showcase-in{max-width:var(--max-content);margin-inline:auto;padding-inline:var(--margin);
  display:grid;gap:var(--sp-5)}
@media(min-width:1024px){
  .showcase-in{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
    align-items:center}
  .showcase-in>.prod-slogan{grid-column:1/-1;grid-row:1}
  .showcase-media{grid-column:7/13;grid-row:2}
  .showcase-copy{grid-column:1/6;grid-row:2}
}
.showcase-media{display:grid;gap:var(--sp-3);margin:0}
.showcase-video,.showcase-img,.showcase-ph{display:block;width:100%;aspect-ratio:16/9;
  border:1px solid var(--rule);background:var(--surface-2)}
.showcase-video,.showcase-img{object-fit:cover;height:auto}
.showcase-ph{position:relative;overflow:hidden}
.showcase-ph-scene{margin:0;font-family:var(--font-mono);font-size:var(--t-caption);
  line-height:1.25rem;letter-spacing:0.04em;color:var(--ink-3);max-width:52ch}
.showcase-cap{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3);margin:0}

.prod-slogan{font-family:var(--font-display);font-size:var(--t-h4);line-height:var(--lh-h4);
  color:var(--ink);margin:0;display:flex;align-items:baseline;gap:var(--sp-3)}
.prod-slogan::before{content:"";flex:none;width:22px;height:2px;background:var(--accent);
  translate:0 -0.28em}
.showcase-copy .prod-eyebrow,.showcase-copy .prod-code{margin-bottom:var(--sp-3)}
.prod-h1{margin-top:var(--sp-2);max-width:20ch}
.prod-lede{margin-top:var(--sp-4);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
  color:var(--ink-2);max-width:44ch}
.prod-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.prod-eyebrow{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.prod-eyebrow a{color:inherit}
.prod-code{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0}

/* --- the media slider ------------------------------------------------------
   Without slider.js this is a grid and every frame is visible. With it, one
   frame at a time and a row of dots. Nothing here needs JavaScript to read. */
.slider{position:relative}
.slider-track{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.slider.is-on .slider-track{grid-template-columns:minmax(0,1fr);gap:0}
.slider.is-on .slider-slide{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-standard)}
.slider.is-on .slider-slide[data-active]{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.slider.is-on .slider-slide{transition:none}}
.slider-fig{margin:0;display:grid;gap:var(--sp-2)}
.slider-img,.slider-ph{display:block;width:100%;aspect-ratio:1/1;border:1px solid var(--rule);
  background:var(--surface-2)}
.slider-img{object-fit:cover;height:auto}
.slider-ph{position:relative;overflow:hidden;display:grid;align-content:end;padding:var(--sp-3)}
.slider-ph-tag{position:relative;z-index:1;font-family:var(--font-mono);font-size:10px;line-height:1rem;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3)}
.slider-cap{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3);margin:0}
.slider-dots{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-3)}
.slider-dot{appearance:none;background:none;border:0;padding:0;width:22px;height:22px;
  cursor:pointer;position:relative}
.slider-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px solid var(--ink-3);background:transparent;
  transition:background var(--dur-1) var(--ease-standard)}
.slider-dot[aria-current]::after{background:var(--ink);border-color:var(--ink)}
.slider-dot:hover::after{border-color:var(--ink)}

/* --- the category grid ---------------------------------------------------- */
.cat-grid{grid-column:1/-1;display:grid;gap:var(--sp-8) var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.cat-card{display:flex;flex-direction:column;gap:var(--sp-4)}
.cat-card-media{display:block;text-decoration:none;color:inherit}
.cat-card-h{font-size:var(--t-h4);line-height:var(--lh-h4);font-weight:var(--w-medium)}
.cat-card-h a{text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.cat-card-h a:hover{border-bottom-color:var(--accent)}
.cat-card-p{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.cat-card-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);
  font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.cat-card-list a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.cat-card-list a:hover{border-bottom-color:var(--ink)}
.cat-grid-teaser{display:grid;gap:var(--sp-5) var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.cat-teaser{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--ink);
  padding-top:var(--sp-3)}
.cat-teaser strong{display:block;font-family:var(--font-display);font-size:var(--t-h4);
  line-height:var(--lh-h4);font-weight:var(--w-medium)}
.cat-teaser p{margin-top:var(--sp-2);font-size:var(--t-caption);line-height:1.25rem;
  color:var(--ink-3)}
.cat-teaser:hover strong{color:var(--accent)}

/* --- the product list and one product ------------------------------------- */
.prod-list{grid-column:1/-1;display:grid;gap:var(--sp-8) var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.prod-item{display:flex;flex-direction:column;gap:var(--sp-4)}
.prod-item-media{display:block;text-decoration:none;color:inherit}
.prod-item-h{font-size:var(--t-h4);line-height:var(--lh-h4);font-weight:var(--w-medium);
  margin-top:var(--sp-2)}
.prod-item-h a{text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.prod-item-h a:hover{border-bottom-color:var(--accent)}
.prod-item-p{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.prod-item-more{font-size:var(--t-caption);line-height:1.25rem}
.prod-item-more a{color:var(--ink)}

.prod-detail{grid-column:1/-1;display:grid;gap:var(--sp-7)}
@media(min-width:1024px){
  .prod-detail{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
    align-items:start}
  .prod-detail-media{grid-column:1/7}
  .prod-detail-spec{grid-column:8/13}
}
.prod-told{grid-column:1/-1;max-width:var(--max-text)}
.prod-body{margin-top:var(--sp-4);font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink-2)}
.prod-h2{margin-top:var(--sp-7);font-size:var(--t-h4);line-height:var(--lh-h4)}
.prod-use{margin:var(--sp-4) 0 0;padding:0;list-style:none;display:grid;gap:0}
.prod-use li{border-top:1px solid var(--rule);padding:var(--sp-3) 0;font-size:var(--t-caption);
  line-height:1.35rem;color:var(--ink-2)}
.prod-note{grid-column:1/-1;margin-top:var(--sp-5);font-size:var(--t-caption);line-height:1.25rem;
  color:var(--ink-3);max-width:var(--max-text)}

.prod-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
  gap:var(--sp-3) var(--sp-5);margin:var(--sp-4) 0 0}
.prod-spec>div{border-top:1px solid var(--rule);padding-top:var(--sp-2)}
.prod-spec dt{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3)}
.prod-spec dd{margin:0;font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.prod-spec-tight{grid-template-columns:minmax(0,1fr)}

.section-onward{padding-block:0 var(--section-y)}
.band-soft{background:var(--cat-band,var(--surface-2));border-block:1px solid var(--rule)}

/* --- make yours ------------------------------------------------------------ */
.makeyours{background:var(--cat-band,var(--surface-2));border-top:1px solid var(--ink)}
.makeyours-in{max-width:var(--max-content);margin-inline:auto;padding:var(--sp-8) var(--margin);
  display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--gutter);justify-content:space-between;
  align-items:flex-end}
.makeyours-h{margin-top:var(--sp-3);font-size:var(--t-h3);line-height:var(--lh-h3);max-width:22ch}
.makeyours-p{margin-top:var(--sp-3);font-size:var(--t-caption);line-height:1.35rem;
  color:var(--ink-2);max-width:46ch}
.makeyours-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

}


@layer components {
/* ---- Cone6 look -----------------------------------------------------------
   The placeholder tiles borrow the home page's plan-view idiom: a drawn sheet of
   clay-grey on the card ground, the same shape the tool index already uses. The
   band is white here like the page, so a pair of hairlines does the separating
   rather than a tone step. */
.band-soft,.makeyours{--cat-band:var(--surface-band)}
.slider-ph::after{content:"";position:absolute;inset:18% 12%;
  background:linear-gradient(104deg,#F2F2EE 0%,#DCDCD6 44%,#B9B9B2 100%);
  clip-path:polygon(0 22%,100% 0,100% 78%,0 100%)}
.showcase-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,#F7F7F4 0%,#E9E9E4 46%,#D2D2CC 100%)}
.showcase-ph::before{content:"";position:absolute;inset:16% 10% 22% 8%;z-index:1;
  background:linear-gradient(100deg,#EFEFEB 0%,#D6D6D0 46%,#B2B2AB 100%);
  clip-path:polygon(0 30%,100% 0,100% 74%,0 100%);opacity:.9}
.prod-h1,.cat-card-h,.prod-item-h,.makeyours-h,.prod-h2{text-transform:uppercase;
  font-stretch:var(--wdth-display);font-weight:var(--w-display);letter-spacing:0.022em}
.prod-slogan{text-transform:uppercase;font-stretch:var(--wdth-display);
  font-weight:var(--w-display);letter-spacing:0.05em}
}