/* products.css. GENERATED by build-catalogue.py. Do not edit.

   The first half is lifted verbatim from site/order/index.html, so the masthead,
   the buttons and the footer on a catalogue page can never drift from the rest of
   the site. The second half is theme/catalogue.css. Edit one of those two, then
   re-run the script. */

@layer components {
h1,h2,h3{font-family:var(--font-display)}
.nav{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
          flex-wrap:wrap;
  max-width:var(--max-content);margin-inline:auto;padding:var(--sp-3) var(--margin)}
.wordmark{font-family:var(--font-display);font-size:var(--t-h4);letter-spacing:0.06em;
  text-decoration:none;text-transform:uppercase;color:inherit}
.wordmark span{color:var(--ink-3)}
.nav-links{display:none;gap:var(--sp-6)}
  @media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:var(--t-caption);letter-spacing:0.04em;color:var(--ink-2);
  text-decoration:none;padding-block:var(--sp-1);border-bottom:1px solid transparent;
  transition:border-color var(--dur-1) var(--ease-standard)}
.nav-links a:hover,.nav-links a[aria-current]{border-bottom-color:var(--accent)}
.btn{display:inline-flex;align-items:center;border:1px solid var(--ink);background:transparent;
  color:var(--ink);font:inherit;font-size:var(--t-caption);letter-spacing:0.06em;
  text-transform:uppercase;padding:calc(var(--sp-3) + 1px) var(--sp-5) var(--sp-3);
  text-decoration:none;transition:background var(--dur-1) var(--ease-standard),
  color var(--dur-1) var(--ease-standard)}
.btn:hover{background:var(--ink);color:var(--on-fill)}
.btn-primary{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.btn-primary:hover{background:var(--fill-h);border-color:var(--fill-h);color:var(--on-fill)}
.mono{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3)}
.wt{grid-column:1/-1;max-width:var(--max-text)}
.full{grid-column:1/-1}
.lede{margin-top:var(--sp-5);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
  color:var(--ink-2);max-width:46ch}
.hh{margin-top:var(--sp-10);max-width:24ch}
.p{margin-top:var(--sp-4);color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6);align-items:center}
.cta small{flex-basis:100%;font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3)}
.list{margin:var(--sp-6) 0 0;padding:0;list-style:none;max-width:var(--max-text)}
.list li{border-top:1px solid var(--rule);padding:var(--sp-4) 0;color:var(--ink-2);
  font-size:var(--t-caption);line-height:1.35rem}
.list li b{display:block;color:var(--ink);font-weight:var(--w-medium);
  font-size:var(--t-body);line-height:var(--lh-body);margin-bottom:var(--sp-2)}
.onward{grid-column:1/-1;display:grid;gap:var(--sp-5) var(--gutter);margin-top:var(--sp-10);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));border-top:1px solid var(--ink);
  padding-top:var(--sp-5)}
.onward a{text-decoration:none;color:inherit;display:block}
.onward a strong{display:block;font-family:var(--font-display);font-size:var(--t-h4);
  line-height:var(--lh-h4);font-weight:var(--w-medium)}
.onward a p{margin-top:var(--sp-2);font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3)}
.onward a:hover strong{color:var(--accent)}
.foot{background:var(--surface-2);border-top:1px solid var(--rule);margin-top:var(--sp-10)}
.foot-in{max-width:var(--max-content);margin-inline:auto;padding:var(--sp-8) var(--margin);
  display:flex;flex-wrap:wrap;gap:var(--sp-7);justify-content:space-between;
  font-size:var(--t-caption);line-height:1.35rem;color:var(--ink-2)}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{text-decoration:underline}
.srcs{grid-column:1/-1;columns:2 320px;column-gap:var(--gutter);margin-top:var(--sp-5);
  font-size:var(--t-caption);line-height:1.35rem}
.sources li{break-inside:avoid;color:var(--ink-2)}
.sources a{color:var(--ink);word-break:break-word}
.sources b{font-weight:var(--w-medium);color:var(--ink)}
.srcs-h{grid-column:1/-1;margin-top:var(--sp-10);border-top:1px solid var(--rule);
  padding-top:var(--sp-4)}
}

@layer components {
h1{font-size:var(--t-h1);line-height:var(--lh-h1)}
h2{font-size:var(--t-h3);line-height:var(--lh-h3)}
.wordmark{text-transform:none;letter-spacing:0.01em}
.lede{line-height:1.7}
.btn{border-radius:var(--r-pill)}
}

@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 {
/* ---- OtterDen look --------------------------------------------------------
   Placeholder tiles borrow the home page's shot idiom: two blocks and an arch in
   the colour world, on warm paper, with rounded corners like everything else on
   this site. */
.band-soft,.makeyours{--cat-band:var(--surface-2)}
.slider-ph,.slider-img,.showcase-ph,.showcase-img,.showcase-video{border-radius:var(--r-3)}
.slider-ph{--c1:var(--vivid-vermilion);--c2:var(--vivid-petrol);--c3:var(--vivid-ochre);--u:58px}
.slider-ph::after{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--c1),var(--c1)) 36% 58% /var(--u) var(--u) no-repeat,
  linear-gradient(var(--c2),var(--c2)) 64% 58% /var(--u) var(--u) no-repeat,
  radial-gradient(circle at 50% 100%,var(--c3) 0 calc(var(--u) / 2),transparent 51%)
    50% 32% /var(--u) calc(var(--u) / 2) no-repeat,
  radial-gradient(58% 7% at 50% 72%,rgb(27 36 82 / .17),transparent 70%),
  linear-gradient(#FDFCF9,#F4F2EC)}
.showcase-ph{--c1:var(--vivid-moss);--c2:var(--vivid-ochre);--c3:var(--vivid-petrol);--u:86px}
.showcase-ph::after{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--c1),var(--c1)) 30% 52% /var(--u) var(--u) no-repeat,
  linear-gradient(var(--c2),var(--c2)) 58% 52% /var(--u) var(--u) no-repeat,
  radial-gradient(circle at 50% 100%,var(--c3) 0 calc(var(--u) / 2),transparent 51%)
    44% 26% /var(--u) calc(var(--u) / 2) no-repeat,
  repeating-linear-gradient(96deg,#EFE7DA 0 22px,#F3ECE0 22px 46px)}
}