/* EXXO category template — scoped to .exxo-cat-page so the theme's header/footer are untouched. */

.exxo-cat-page{
  --exxo-red:#CC0000; --exxo-red-dark:#990000;
  --exxo-ink:#0A0A0A; --exxo-ink-2:#3A3A3E; --exxo-muted:#74747A;
  --exxo-line:#E4E4E7; --exxo-line-2:#F0F0F2;
  --exxo-paper:#FFFFFF; --exxo-wash:#F6F6F7; --exxo-band:#0A0A0A;
  --exxo-display:Archivo,"Arial Narrow",Helvetica,sans-serif;
  --exxo-body:Rajdhani,"Segoe UI",sans-serif;
  background:var(--exxo-paper);
  color:var(--exxo-ink);
  font-family:var(--exxo-body);
  font-size:16px;
  line-height:1.5;
}
.exxo-cat-page *{box-sizing:border-box}
.exxo-cat-page a{color:inherit;text-decoration:none}
.exxo-cat-page a:hover{text-decoration:none}
.exxo-cat-page :focus-visible{outline:2px solid var(--exxo-red);outline-offset:3px}
.exxo-cat-page img{max-width:100%;height:auto}

.exxo-wrap{max-width:1440px;margin-inline:auto;padding-inline:24px}

.exxo-cat-page h1,
.exxo-cat-page h2,
.exxo-cat-page h3,
.exxo-cat-page h4{
  font-family:var(--exxo-display);font-style:italic;font-weight:800;
  margin:0;text-wrap:balance;letter-spacing:-.01em;color:inherit;
}
.exxo-rule{display:block;width:46px;height:4px;background:var(--exxo-red);border-radius:2px;flex:none}
.exxo-eyebrow{font-family:var(--exxo-display);font-style:normal;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--exxo-ink)}

/* breadcrumb */
.exxo-crumb{padding-block:14px 2px;font-size:14px;font-weight:500;color:var(--exxo-muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.exxo-crumb a:hover{color:var(--exxo-red)}
.exxo-crumb .exxo-sep{opacity:.45}
.exxo-crumb .exxo-here{color:var(--exxo-ink);font-weight:600}

/* hero */
.exxo-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:36px;align-items:center;padding-block:4px 26px}
.exxo-hero-copy .exxo-rule{margin-bottom:14px}
.exxo-hero h1{font-size:clamp(34px,4.2vw,58px);line-height:.94;text-transform:uppercase}
.exxo-tag{margin-top:10px;font-family:var(--exxo-display);font-style:normal;font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--exxo-ink-2)}
.exxo-hero p{margin:13px 0 0;max-width:54ch;font-size:16px;color:var(--exxo-ink-2)}
.exxo-hero-art{position:relative;aspect-ratio:21/9;background:var(--exxo-wash);border:1px solid var(--exxo-line);display:grid;place-items:center;overflow:hidden}
.exxo-hero-art img{width:100%;height:100%;object-fit:contain;padding:16px}
.exxo-stamp{position:absolute;right:18px;bottom:14px;font-family:var(--exxo-display);font-style:italic;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--exxo-muted)}

/* category nav */
.exxo-catnav-shell{border-top:1px solid var(--exxo-line);border-bottom:1px solid var(--exxo-line);background:var(--exxo-paper)}
.exxo-catnav{display:flex;gap:10px;overflow-x:auto;padding-block:16px;scrollbar-width:thin}
.exxo-catnav::-webkit-scrollbar{height:6px}
.exxo-catnav::-webkit-scrollbar-thumb{background:var(--exxo-line);border-radius:3px}
.exxo-catnav .exxo-cat{flex:1 0 auto;min-width:150px;display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--exxo-line);background:var(--exxo-paper);transition:border-color .15s,background .15s}
.exxo-catnav .exxo-cat:hover{border-color:var(--exxo-ink)}
.exxo-catnav .exxo-cat svg{width:24px;height:24px;flex:none;stroke:var(--exxo-ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.exxo-catnav .exxo-cat span{font-family:var(--exxo-display);font-style:normal;font-weight:700;font-size:12.5px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.exxo-catnav .exxo-cat[aria-current="page"]{background:var(--exxo-red);border-color:var(--exxo-red);color:#fff}
.exxo-catnav .exxo-cat[aria-current="page"] svg{stroke:#fff}

/* intro */
.exxo-intro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start;padding-block:44px 26px}
.exxo-intro-l{display:flex;align-items:center;gap:14px}
.exxo-intro p{margin:0;font-size:16.5px;color:var(--exxo-ink-2);max-width:70ch}

/* series rows */
.exxo-series{display:grid;grid-template-columns:232px minmax(0,1fr);border-top:1px solid var(--exxo-line)}
.exxo-series-l{padding:30px 28px 30px 0}
.exxo-series-l h3{font-size:26px;text-transform:uppercase;line-height:1.05}
.exxo-count{margin-top:8px;font-size:14px;font-weight:600;color:var(--exxo-muted);font-variant-numeric:tabular-nums}
.exxo-viewall{margin-top:18px;display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid var(--exxo-line);font-family:var(--exxo-display);font-style:normal;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:border-color .15s,color .15s}
.exxo-viewall:hover{border-color:var(--exxo-red);color:var(--exxo-red)}
.exxo-arw{color:var(--exxo-red);font-weight:800}

.exxo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--exxo-line)}
.exxo-card{border-right:1px solid var(--exxo-line);border-bottom:1px solid var(--exxo-line);padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--exxo-paper);transition:background .15s}
.exxo-card:hover{background:var(--exxo-wash)}
.exxo-shot{aspect-ratio:4/3;background:var(--exxo-paper);border:1px solid var(--exxo-line-2);display:grid;place-items:center;overflow:hidden}
.exxo-shot img{width:100%;height:100%;object-fit:contain;padding:10px}
.exxo-card h4{font-family:var(--exxo-display);font-style:italic;font-weight:800;font-size:17px}
.exxo-kind{font-size:14px;font-weight:500;color:var(--exxo-muted);margin-top:-6px}
.exxo-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}
.exxo-vp{font-family:var(--exxo-display);font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--exxo-ink-2)}
.exxo-card:hover .exxo-vp{color:var(--exxo-red)}
.exxo-card .exxo-arw{font-size:17px;transition:transform .15s}
.exxo-card:hover .exxo-arw{transform:translateX(4px)}
.exxo-filler{border-right:1px solid var(--exxo-line);border-bottom:1px solid var(--exxo-line);background:var(--exxo-paper)}

/* placeholder */
.exxo-ph{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:9px;padding:10px;text-align:center;background:repeating-linear-gradient(135deg,#FAFAFB 0 9px,#F3F3F5 9px 18px)}
.exxo-ph svg{width:30px;height:30px;stroke:#C9C9CE;stroke-width:1.5;fill:none}
.exxo-ph b{font-family:var(--exxo-display);font-style:italic;font-weight:800;font-size:15px;color:#B4B4BA;letter-spacing:.02em}
.exxo-ph i{font-family:var(--exxo-body);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C4C4CA}

.exxo-empty{padding:40px 0;color:var(--exxo-muted);font-size:16px}

/* CTA */
.exxo-cta{margin-top:56px;background:var(--exxo-band);color:#fff;overflow:hidden}
.exxo-cta-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.exxo-cta-copy{padding-block:54px}
.exxo-eyebrow-light{color:#fff;display:flex;align-items:center;gap:12px}
.exxo-cta h2{margin-top:18px;font-size:clamp(28px,3.4vw,42px);line-height:1.05;text-transform:uppercase;color:#fff}
.exxo-cta p{margin:14px 0 0;color:#C6C6CC;max-width:44ch;font-size:16.5px}
.exxo-btn{margin-top:26px;display:inline-flex;align-items:center;gap:10px;background:var(--exxo-red);color:#fff;padding:14px 26px;font-family:var(--exxo-display);font-style:normal;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:background .15s}
.exxo-btn:hover{background:var(--exxo-red-dark);color:#fff}
.exxo-cta-art{align-self:stretch;min-height:230px;background:#141416;display:grid;place-items:center;overflow:hidden}
.exxo-cta-art img{width:100%;height:100%;object-fit:cover;opacity:.82}

/* feature strip */
.exxo-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--exxo-line);border-bottom:1px solid var(--exxo-line)}
.exxo-feat{display:flex;align-items:center;gap:14px;padding:26px 22px;border-right:1px solid var(--exxo-line)}
.exxo-feat:last-child{border-right:0}
.exxo-feat svg{width:34px;height:34px;flex:none;stroke:var(--exxo-red);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.exxo-feat b{font-family:var(--exxo-display);font-style:normal;font-weight:700;font-size:13.5px;line-height:1.25;letter-spacing:.05em;text-transform:uppercase}

@media(max-width:1000px){
  .exxo-hero{grid-template-columns:1fr;gap:26px}
  .exxo-intro{grid-template-columns:1fr;gap:16px;padding-block:34px 22px}
  .exxo-series{grid-template-columns:1fr}
  .exxo-series-l{padding:26px 0 16px}
  .exxo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exxo-cta-in{grid-template-columns:1fr}
  .exxo-cta-copy{padding-block:40px}
  .exxo-cta-art{min-height:190px;order:-1}
  .exxo-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exxo-feat:nth-child(2){border-right:0}
  .exxo-feat:nth-child(-n+2){border-bottom:1px solid var(--exxo-line)}
}
@media(max-width:560px){
  .exxo-wrap{padding-inline:16px}
  .exxo-hero h1{font-size:34px}
  .exxo-grid{grid-template-columns:1fr}
  .exxo-catnav .exxo-cat{min-width:136px}
  .exxo-strip{grid-template-columns:1fr}
  .exxo-feat{border-right:0;border-bottom:1px solid var(--exxo-line)}
}
@media(prefers-reduced-motion:reduce){
  .exxo-cat-page *{transition:none!important}
}

/* ------------------------------------------------------------------
   Theme compatibility overrides.
   Astra wraps content in a flex container and sets global link colours;
   these rules re-assert the template's own layout and palette.
------------------------------------------------------------------- */
.exxo-cat-page{width:100%;min-width:0;flex:1 1 auto}
.exxo-cat-page .exxo-wrap{width:100%;max-width:1440px}

/* media must fill its frame, not its intrinsic height */
.exxo-cat-page .exxo-hero-art img{width:100%;height:100%;object-fit:contain}
.exxo-cat-page .exxo-shot img{width:100%;height:100%;object-fit:contain}
.exxo-cat-page .exxo-cta-art img{width:100%;height:100%;object-fit:cover}

/* colours: the theme styles descendant links globally */
.exxo-cat-page .exxo-catnav .exxo-cat,
.exxo-cat-page .exxo-catnav .exxo-cat span{color:var(--exxo-ink)}
.exxo-cat-page .exxo-catnav .exxo-cat[aria-current="page"],
.exxo-cat-page .exxo-catnav .exxo-cat[aria-current="page"] span{color:#fff}
.exxo-cat-page .exxo-card,
.exxo-cat-page .exxo-card h4{color:var(--exxo-ink)}
.exxo-cat-page .exxo-card .exxo-kind{color:var(--exxo-muted)}
.exxo-cat-page .exxo-card .exxo-vp{color:var(--exxo-ink-2)}
.exxo-cat-page .exxo-card:hover .exxo-vp{color:var(--exxo-red)}
.exxo-cat-page .exxo-hero p,
.exxo-cat-page .exxo-intro p{color:var(--exxo-ink-2)}
.exxo-cat-page .exxo-crumb a{color:var(--exxo-muted)}
.exxo-cat-page .exxo-crumb a:hover{color:var(--exxo-red)}
.exxo-cat-page .exxo-viewall{color:var(--exxo-ink)}
.exxo-cat-page .exxo-viewall:hover{color:var(--exxo-red)}
.exxo-cat-page .exxo-btn,
.exxo-cat-page .exxo-btn:hover,
.exxo-cat-page .exxo-btn:focus{color:#fff;text-decoration:none}
.exxo-cat-page .exxo-cta h2,
.exxo-cat-page .exxo-eyebrow-light{color:#fff}
.exxo-cat-page .exxo-cta p{color:#C6C6CC}

/* Media frames: aspect-ratio fixes the box, but an auto-sized grid track still
   grows to the image's intrinsic height. Take the image out of flow so it
   always fills its frame exactly. */
.exxo-cat-page .exxo-hero-art,
.exxo-cat-page .exxo-shot,
.exxo-cat-page .exxo-cta-art{position:relative}
.exxo-cat-page .exxo-hero-art > img,
.exxo-cat-page .exxo-shot > img,
.exxo-cat-page .exxo-cta-art > img{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
}
.exxo-cat-page .exxo-hero-art > img{object-fit:contain;padding:16px}
.exxo-cat-page .exxo-shot > img{object-fit:contain;padding:10px}
.exxo-cat-page .exxo-cta-art > img{object-fit:cover;padding:0}
.exxo-cat-page .exxo-hero-art > .exxo-ph,
.exxo-cat-page .exxo-shot > .exxo-ph{position:absolute;inset:0}
.exxo-cat-page .exxo-stamp{z-index:2}

/* The site's global stylesheet sets white headings for its dark layouts.
   This template is light, so headings are re-asserted here. */
.exxo-cat-page h1,
.exxo-cat-page h2,
.exxo-cat-page h3,
.exxo-cat-page h4,
.exxo-cat-page .exxo-series-l h3,
.exxo-cat-page .exxo-card h4{color:var(--exxo-ink)!important}
.exxo-cat-page .exxo-cta h2{color:#fff!important}
.exxo-cat-page .exxo-eyebrow{color:var(--exxo-ink)}
.exxo-cat-page .exxo-eyebrow-light{color:#fff}

/* Legacy archive banner from the header widget — superseded by this template's hero. */
.exxo-arc-hero{display:none!important}

/* ------------------------------------------------------------------
   Customer story (single product)
------------------------------------------------------------------- */
.exxo-story{margin:56px 0 0;padding:0;background:var(--exxo-wash,#F6F6F7);border-top:1px solid var(--exxo-line,#E4E4E7);border-bottom:1px solid var(--exxo-line,#E4E4E7)}
.exxo-story .exxo-story-in{max-width:1440px;margin-inline:auto;padding:34px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;align-items:center}
.exxo-story .exxo-story-art{position:relative;aspect-ratio:4/3;background:#fff;border:1px solid var(--exxo-line,#E4E4E7);overflow:hidden}
.exxo-story .exxo-story-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;max-width:none}
.exxo-story .exxo-eyebrow{display:flex;align-items:center;gap:12px}
.exxo-story .exxo-stars{display:flex;gap:4px;margin-top:16px}
.exxo-story .exxo-stars svg{width:22px;height:22px;fill:var(--exxo-red,#CC0000);stroke:none;flex:none}
.exxo-story blockquote{margin:16px 0 0;padding:0;border:0;background:none;quotes:none}
.exxo-story blockquote p{margin:0 0 6px;font-family:var(--exxo-display,Archivo),sans-serif;font-style:italic;font-weight:700;
  font-size:clamp(20px,2.3vw,28px);line-height:1.24;color:var(--exxo-ink,#0A0A0A)}
.exxo-story blockquote p:last-child{margin-bottom:0}
.exxo-story .exxo-story-by{margin-top:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.exxo-story .exxo-story-by b{font-family:var(--exxo-display,Archivo),sans-serif;font-style:italic;font-weight:800;font-size:17px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--exxo-ink,#0A0A0A)}
.exxo-story .exxo-story-by span{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--exxo-muted,#74747A)}
@media(max-width:1000px){
  .exxo-story .exxo-story-in{gap:24px;padding:30px 24px}
}
@media(max-width:560px){
  .exxo-story .exxo-story-in{padding:26px 16px}
}