/* ═══════════════════════════════════════════════════════════════
   JAROX PARTNERS — Lubricants catalogue
   Paper ground throughout: the catalogue belongs to the world
   of the document, not the world of capital.
   ═══════════════════════════════════════════════════════════════ */

body.catalogue{background:var(--paper-100);color:var(--on-paper)}
body.catalogue .ftr{background:var(--ink-900);color:var(--on-ink)}

/* ── PAGE HEAD ──────────────────────────────────────────────── */
.pagehead{
  padding:calc(var(--header-h) + var(--s9)) 0 var(--s8);
  border-bottom:1px solid var(--rule-paper);
}
.pagehead .eyebrow{color:var(--gold-deep)}
.pagehead .eyebrow::after{background:linear-gradient(to right,var(--rule-paper-2),transparent)}
.pagehead h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02}
.pagehead h1 em{color:var(--gold-deep);font-style:italic}
.pagehead .lede{margin-top:var(--s5);color:var(--on-paper)}
.crumb{
  font-family:var(--f-u);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-paper-2);margin:0 0 var(--s6);
}
.crumb a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--rule-paper-2)}
.crumb a:hover{border-bottom-color:var(--gold-deep)}

/* ── CATEGORY TABS ──────────────────────────────────────────── */
.cats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--rule-paper);border:1px solid var(--rule-paper);margin:var(--s8) 0 var(--s7);
}
.cat-btn{
  background:var(--paper-100);border:0;border-radius:0;cursor:pointer;
  padding:var(--s5) var(--s5);text-align:left;font-family:inherit;color:inherit;
  display:flex;flex-direction:column;gap:5px;position:relative;
  transition:background var(--m-micro) var(--ease-io);
}
.cat-btn:hover{background:var(--paper-200)}
.cat-btn[aria-selected="true"]{background:var(--on-paper);color:var(--paper-100)}
.cat-btn__l{font-family:var(--f-d);font-size:1.2rem;font-weight:400;line-height:1.2}
.cat-btn__n{font-size:.8rem;color:var(--on-paper-2);line-height:1.4}
.cat-btn[aria-selected="true"] .cat-btn__n{color:var(--paper-300)}
.cat-btn__c{
  font-family:var(--f-m);font-size:.7rem;color:var(--gold-deep);margin-top:var(--s2);
  font-variant-numeric:tabular-nums;
}
.cat-btn[aria-selected="true"] .cat-btn__c{color:var(--gold)}

/* ── PRODUCT GRID ───────────────────────────────────────────── */
.products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:1px;background:var(--rule-paper);border:1px solid var(--rule-paper);
}
.product{background:var(--paper-100);display:flex;flex-direction:column}
.product__media{
  background:var(--ink-900);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.product__media img{
  width:100%;height:100%;object-fit:contain;padding:var(--s5);display:block;
  transition:transform 500ms var(--ease-out);
}
.product:hover .product__media img{transform:scale(1.03)}
/* Typographic fallback where no clean pack render exists */
.product__media--type{
  aspect-ratio:4/3;background:var(--ink-900);color:var(--on-ink);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
  padding:var(--s6);border-bottom:1px solid var(--rule-paper);
}
.product__media--type .g{
  font-family:var(--f-m);font-size:.74rem;color:var(--gold);letter-spacing:.06em;
}
.product__media--type .n{
  font-family:var(--f-d);font-size:1.7rem;font-weight:300;line-height:1.12;color:var(--on-ink);
}
.product__body{padding:var(--s5);display:flex;flex-direction:column;flex:1;gap:var(--s3)}
.product__name{font-family:var(--f-d);font-size:1.25rem;font-weight:400;line-height:1.2;margin:0;color:var(--on-paper)}
.product__grade{
  font-family:var(--f-u);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0;line-height:1.4;
}
.product__short{font-size:.88rem;line-height:1.6;color:var(--on-paper-2);margin:0;flex:1}
.product__actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s2)}
.linkbtn{
  font-family:var(--f-u);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);background:none;border:0;border-bottom:1px solid var(--rule-paper-2);
  padding:0 0 3px;cursor:pointer;text-decoration:none;
  transition:border-color var(--m-micro) var(--ease-io),color var(--m-micro) var(--ease-io);
}
.linkbtn:hover{border-bottom-color:var(--gold-deep);color:var(--on-paper)}

.emptystate{
  grid-column:1/-1;background:var(--paper-100);padding:var(--s9) var(--s5);text-align:center;
  color:var(--on-paper-2);font-size:.95rem;
}

/* ── DIALOG ─────────────────────────────────────────────────── */
dialog.tds{
  border:1px solid var(--rule-paper-2);background:var(--paper-100);color:var(--on-paper);
  max-width:720px;width:calc(100% - 2 * var(--s5));padding:0;
  box-shadow:0 30px 90px rgba(20,16,8,.4);
}
dialog.tds::backdrop{background:rgba(8,8,6,.82)}
.tds__inner{padding:clamp(28px,4vw,52px);max-height:82vh;overflow-y:auto}
.tds__close{
  position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;
  font-size:1.3rem;line-height:1;color:var(--on-paper-2);padding:8px;
}
.tds__close:hover{color:var(--gold-deep)}
.tds h2{font-family:var(--f-d);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;margin:0 0 var(--s2);color:var(--on-paper)}
.tds__grade{
  font-family:var(--f-u);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 var(--s5);
}
.tds__desc{font-size:.96rem;line-height:1.7;color:var(--on-paper-2);margin:0 0 var(--s6)}
.tds h3{
  font-family:var(--f-u);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 var(--s3);
}
.tds table{width:100%;border-collapse:collapse;font-size:.88rem}
.tds td{padding:10px 0;border-bottom:1px solid var(--rule-paper);vertical-align:top}
.tds td:first-child{color:var(--on-paper-2);width:52%;padding-right:var(--s4)}
.tds td:last-child{
  color:var(--on-paper);font-family:var(--f-m);font-size:.84rem;font-variant-numeric:tabular-nums;
}
.tds tr:last-child td{border-bottom:0}
.tds__foot{
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule-paper-2);
  display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between;
}
.tds__dist{font-size:.8rem;color:var(--on-paper-2);line-height:1.55}
.tds__dist strong{color:var(--on-paper)}

/* ── ION PARTNER BLOCK ──────────────────────────────────────── */
.ion{
  margin-top:var(--s9);border:1px solid var(--rule-paper);background:var(--paper-200);
  display:grid;grid-template-columns:4fr 8fr;
}
.ion__mark{
  padding:var(--s7) var(--s6);border-right:1px solid var(--rule-paper);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4);text-align:center;
}
.ion__logo{font-family:var(--f-u);font-size:2.6rem;font-weight:700;line-height:1;color:var(--copper)}
.ion__logo span{color:var(--on-paper)}
.ion__sub{
  font-family:var(--f-u);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--on-paper-2);
}
.ion__certs{border:1px solid var(--rule-paper-2);padding:var(--s4);margin-top:var(--s2)}
.ion__certs dt{
  font-family:var(--f-u);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-paper-2);line-height:1.5;
}
.ion__certs dd{margin:6px 0 0;font-family:var(--f-m);font-size:.74rem;color:var(--on-paper)}
.ion__body{padding:var(--s7) var(--s6)}
.ion__body h2{font-family:var(--f-d);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:300;margin:0 0 var(--s4)}
.ion__body h2 em{font-style:italic;color:var(--gold-deep)}
.ion__body p{font-size:.94rem;line-height:1.75;color:var(--on-paper-2);max-width:62ch}
.ion__tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0;padding:0;list-style:none}
.ion__tags li{
  font-family:var(--f-u);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);border:1px solid var(--rule-paper-2);padding:5px 12px;
}

/* ── DOWNLOAD BAND ──────────────────────────────────────────── */
.download{
  margin-top:var(--s8);border:1px solid var(--rule-paper-2);padding:var(--s7) var(--s6);
  display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between;
}
.download h2{font-family:var(--f-d);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:300;margin:0 0 var(--s2)}
.download p{margin:0;font-size:.92rem;color:var(--on-paper-2);max-width:48ch}
.download .meta{font-family:var(--f-m);font-size:.76rem;color:var(--on-paper-2);margin-top:var(--s2)}

.enquiry-band{
  margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--rule-paper);
  display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between;
}

@media(max-width:900px){
  .ion{grid-template-columns:1fr}
  .ion__mark{border-right:0;border-bottom:1px solid var(--rule-paper)}
}
@media(max-width:640px){
  .cats{grid-template-columns:1fr 1fr}
  .products{grid-template-columns:1fr}
}