/* =========================================================
   MULTI STAR EXIM — CATALOGUE EXTENSIONS
   New components for product sub-categories, weight charts,
   price lists, grades, brands and terms.
   Uses ONLY the existing theme variables from style.css
   (--gold, --gold-light, --panel, --line, --text, --muted)
   so the original colours stay exactly the same.
   ========================================================= */

/* ---------- Products dropdown: 2 columns on desktop (more items) ---------- */
@media (min-width:781px){
  .drop .menu{width:470px;display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;}
  .drop .menu a.menu-hl{grid-column:1/-1;border-top:1px solid var(--line);margin-top:4px;color:var(--gold-light,#f4d477);font-weight:800;}
}

/* ---------- Section helpers ---------- */
.sec-white{background:#fff;}
.sec-tight{padding:85px 0;}
.center{text-align:center;}
.note{font-size:12px;color:var(--muted);margin-top:14px;}
.note i{color:var(--gold,#d8a52b);margin-right:6px;}

/* ---------- Highlight strip ---------- */
.hl-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.hl{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 22px;display:flex;gap:16px;align-items:flex-start;transition:.35s;}
.hl:hover{transform:translateY(-5px);border-color:var(--gold,#d8a52b);box-shadow:0 14px 34px rgba(13,27,42,.10);}
.hl i{font-size:22px;color:var(--gold,#d8a52b);width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--gold,#d8a52b) 14%,transparent);}
.hl b{display:block;font:700 22px/1 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;color:var(--text);margin-bottom:6px;}
.hl span{font-size:13px;color:var(--muted);line-height:1.5;display:block;}

/* ---------- Split block (image + text) ---------- */
.xsplit{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.xsplit .ximg{border-radius:20px;overflow:hidden;box-shadow:0 22px 55px rgba(13,27,42,.16);position:relative;}
.xsplit .ximg img{width:100%;height:460px;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.xsplit .ximg:hover img{transform:scale(1.05);}
.xsplit .ximg .stamp{font-size:20px;padding:12px 18px;}
.xsplit h2{font-size:clamp(40px,5vw,64px);margin:12px 0 18px;}

.xsplit>*,.subcats>*,.grades>*,.brands>*,.xcta>*{min-width:0;}
.xtable.compact{min-width:0;}
.xtable.spec{min-width:0;}
.xtable.spec td{white-space:normal;}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
.step{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);position:relative;}
.step em{font:700 34px/1 "Barlow Condensed",Arial,sans-serif;color:var(--gold,#d8a52b);font-style:normal;display:block;margin-bottom:6px;}
.step b{display:block;font:700 19px/1.1 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;color:var(--text);}
.step span{font-size:12.5px;color:var(--muted);line-height:1.5;display:block;margin-top:6px;}

/* ---------- Sub-category cards ---------- */
.subcats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.subcats.three{grid-template-columns:repeat(3,1fr);}
.subcat{background:#fff;border:1px solid #e4ded2;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;}
.subcat:hover{transform:translateY(-8px);border-color:var(--gold,#d8a52b);box-shadow:0 26px 55px rgba(0,0,0,.22);}
.subcat .sc-pic{height:190px;overflow:hidden;position:relative;border-bottom:3px solid var(--gold,#d8a52b);background:#fff;}
.subcat .sc-pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s;}
.subcat:hover .sc-pic img{transform:scale(1.08);}
.subcat .sc-tag{position:absolute;top:12px;left:12px;background:#111315;color:var(--gold-light,#f4d477);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:6px 10px;border-radius:30px;}
.subcat .sc-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.subcat h3{font-size:26px;color:#1d1f22 !important;}
.subcat p{font-size:13px;color:#5b6065 !important;margin:0;}
.subcat ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13px;color:#1d1f22;}
.subcat ul li::before{content:"✓";color:var(--gold,#d8a52b);font-weight:900;margin-right:8px;}
.subcat .sc-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed #e4ded2;}
.subcat .sc-foot a{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#9b6a08;}
.subcat .sc-foot a:hover{color:var(--gold,#d8a52b);}

/* ---------- Chips (sizes / grades / brands) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:30px;border:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:700;color:var(--text);transition:.25s;}
.chip:hover{border-color:var(--gold,#d8a52b);color:var(--gold,#d8a52b);}
.subcat .chip{background:#f4f2ed;border-color:#e4ded2;color:#1d1f22;font-size:11px;padding:5px 10px;}

/* ---------- Grade cards ---------- */
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.grade{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--panel);transition:.35s;position:relative;overflow:hidden;}
.grade::after{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--gold,#d8a52b);transition:width .4s;}
.grade:hover::after{width:100%;}
.grade:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(13,27,42,.10);}
.grade strong{font:700 36px/1 "Barlow Condensed",Arial,sans-serif;color:var(--text);display:block;}
.grade small{display:block;color:var(--orange2,#9b6a08);font-weight:800;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin:6px 0 8px;}
.grade span{font-size:13px;color:var(--muted);line-height:1.5;display:block;}

/* ---------- Data tables (spec / weight / chemical / prices) ---------- */
.tbl-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:var(--panel);box-shadow:0 18px 45px rgba(13,27,42,.08);-webkit-overflow-scrolling:touch;}
.xtable{width:100%;border-collapse:collapse;min-width:620px;font-size:14px;}
.xtable thead th{background:#15181a;color:var(--gold-light,#f4d477);font:700 15px/1.2 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;letter-spacing:.8px;text-align:left;padding:16px 16px;white-space:nowrap;}
.xtable td{padding:13px 16px;white-space:nowrap;border-top:1px solid var(--line);color:var(--text);}
.xtable tbody tr{transition:background .2s;}
.xtable tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--gold,#d8a52b) 5%,transparent);}
.xtable tbody tr:hover td{background:color-mix(in srgb,var(--gold,#d8a52b) 14%,transparent);}
.xtable td:first-child{font-weight:800;}
.xtable td.k{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.6px;width:34%;}
.xtable .por{display:inline-block;padding:4px 10px;border-radius:30px;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--gold,#d8a52b) 20%,transparent);color:var(--text);white-space:nowrap;}
.xtable .price{font-weight:800;color:var(--text);white-space:nowrap;}
.xtable .up{color:#1f9d55;font-weight:800;}
.xtable .down{color:#d64545;font-weight:800;}
.xtable .enq{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:30px;background:#25d366;color:#fff !important;font-size:11px;font-weight:800;text-transform:uppercase;white-space:nowrap;transition:.25s;}
.xtable .enq:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(37,211,102,.35);}
.dark .xtable thead th{background:#0f1113;}
.tbl-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.tbl-cap h3{font-size:30px;}
.tbl-cap span{font-size:12px;color:var(--muted);}

/* ---------- Tabs / filters ---------- */
.xtabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 34px;}
.xtab{cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:11px 18px;border-radius:40px;font:800 11px/1 Inter,Arial;text-transform:uppercase;letter-spacing:1px;transition:.25s;}
.xtab:hover{border-color:var(--gold,#d8a52b);}
.xtab.on{background:var(--gold,#d8a52b);border-color:var(--gold,#d8a52b);color:#111;box-shadow:0 10px 24px rgba(216,165,43,.28);}
.is-hidden{display:none !important;}

/* ---------- Brands ---------- */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.brand{border:1px solid var(--line);border-radius:16px;padding:26px 16px;text-align:center;background:var(--panel);transition:.3s;}
.brand:hover{border-color:var(--gold,#d8a52b);transform:translateY(-5px);}
.brand b{display:block;font:700 34px/1 "Barlow Condensed",Arial,sans-serif;color:var(--text);letter-spacing:1px;}
.brand span{display:block;font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4;}

.brands.six{grid-template-columns:repeat(6,1fr);}
@media (max-width:1100px){.brands.six{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.brands.six{grid-template-columns:1fr 1fr;}}

/* ---------- Approvals / badges ---------- */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;}
.badge{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;border:1px solid var(--line);background:var(--panel);}
.badge i{color:var(--gold,#d8a52b);font-size:22px;margin-top:3px;}
.badge b{display:block;font:700 20px/1.1 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;color:var(--text);}
.badge span{font-size:13px;color:var(--muted);line-height:1.5;display:block;margin-top:4px;}

/* ---------- Terms & conditions ---------- */
.terms{counter-reset:t;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;}
.terms li{counter-increment:t;position:relative;padding:12px 14px 12px 52px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:13.5px;color:var(--text);line-height:1.5;}
.terms li::before{content:counter(t,decimal-leading-zero);position:absolute;left:14px;top:11px;font:700 20px/1 "Barlow Condensed",Arial,sans-serif;color:var(--gold,#d8a52b);}
details.xacc{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:6px 22px;margin-top:18px;}
details.xacc summary{font-size:24px;padding:14px 0;align-items:center;list-style:none;color:var(--text);}
details.xacc summary::-webkit-details-marker{display:none;}
details.xacc summary::after{content:"+";color:var(--gold,#d8a52b);font-size:30px;transition:.3s;}
details.xacc[open] summary::after{transform:rotate(45deg);}
details.xacc > div{padding:4px 0 22px;}

/* ---------- Size tiles ---------- */
.sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.size{border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center;background:var(--panel);transition:.25s;}
.size:hover{background:var(--gold,#d8a52b);border-color:var(--gold,#d8a52b);}
.size:hover b,.size:hover span{color:#111;}
.size b{display:block;font:700 26px/1 "Barlow Condensed",Arial,sans-serif;color:var(--text);}
.size span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}

/* ---------- CTA band ---------- */
.xcta{display:grid;grid-template-columns:1.2fr .8fr;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#15181a;box-shadow:0 26px 60px rgba(13,27,42,.22);}
.xcta .xc-body{padding:48px;}
.xcta .xc-body h2{color:#f8f6f1;font-size:clamp(38px,4.6vw,60px);margin:10px 0 14px;}
.xcta .xc-body p{color:#c9ccce;}
.xcta .xc-body .btn{color:#f8f6f1;}
.xcta .xc-body .btn.primary{color:#111;}
.xcta .xc-img img{width:100%;height:100%;min-height:320px;object-fit:cover;}
.xcta .kicker{color:var(--gold-light,#f4d477);}
.btn.wa-btn{background:#25d366;border-color:#25d366;color:#fff !important;}

/* ---------- Product-page anchor nav ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.jump a{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;padding:8px 13px;border-radius:30px;border:1px solid var(--line);background:var(--panel);transition:.25s;}
.jump a:hover{border-color:var(--gold,#d8a52b);color:var(--gold,#d8a52b);}
section[id]{scroll-margin-top:110px;}

/* ---------- Products catalogue: category label on cards ---------- */
.card .pic .cat-label{position:absolute;top:14px;left:14px;z-index:2;background:#111315;color:var(--gold-light,#f4d477);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:6px 11px;border-radius:30px;}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .subcats{grid-template-columns:repeat(2,1fr);}
  .brands{grid-template-columns:repeat(3,1fr);}
  .grades{grid-template-columns:repeat(2,1fr);}
  .hl-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .head.xhead{grid-template-columns:1fr;gap:14px;}
  .xsplit,.xcta{grid-template-columns:1fr;}
  .xsplit{gap:34px;}
  .xsplit .ximg img{height:320px !important;}
  .subcats.three{grid-template-columns:1fr 1fr;}
  .badges{grid-template-columns:1fr;}
  .terms{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .xcta .xc-body{padding:34px 26px;}
}
@media (max-width:600px){
  .xcta .xc-body h2{font-size:9vw;overflow-wrap:break-word;}
  .np-rel .card h3{font-size:8vw;overflow-wrap:break-word;}
  .np-head h2{font-size:9vw !important;overflow-wrap:break-word;}
  .subcat h3{font-size:22px;overflow-wrap:break-word;}
  h1.long-title,h2.long-title{font-size:10vw !important;overflow-wrap:break-word;}
  .sizes{grid-template-columns:repeat(3,1fr);}
  .subcats,.subcats.three,.grades,.hl-strip{grid-template-columns:1fr;}
  .brands{grid-template-columns:1fr 1fr;}
  .xtable{font-size:13px;}
  .xtable td,.xtable thead th{padding:11px 12px;}
}

/* ---------- Brand cards with logo + name (+ capacity) ---------- */
.brands.four{grid-template-columns:repeat(4,1fr);}
.brands.three{grid-template-columns:repeat(3,1fr);}
.brand-logo{padding:20px 16px 22px;display:flex;flex-direction:column;align-items:center;}
.brand-logo img{display:block;height:62px;width:auto;max-width:100%;margin:6px auto 16px;}
.brand-logo b{font-size:24px;}
.brand-logo span{margin-top:6px;}
.brand-cap{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.brand-cap em{flex-basis:100%;font-style:normal;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light,#9b6a08);}
.brand-cap i{font-style:normal;font-size:12px;font-weight:700;color:var(--text);background:rgba(216,165,43,.14);border:1px solid rgba(216,165,43,.45);border-radius:999px;padding:4px 10px;}
@media (max-width:1100px){.brands.four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.brands.three{grid-template-columns:1fr;}.brand-logo img{height:52px;}}