/* =========================================================
   KEMPRO PAINTS — THEME STYLESHEET
   Navy & gold industrial-coatings theme.
   Loaded on every page after the page's own inline <style>
   block (which handles header/footer/grid basics), so this
   file covers everything else: colour system, typography,
   buttons, hero slider text, section bands, cards, forms,
   product lists, and small UI components.
   ========================================================= */

:root{
  --kp-navy:#1f1c58;
  --kp-navy-deep:#131037;
  --kp-navy-soft:#2c2874;
  --kp-gold:#f2b84b;
  --kp-gold-deep:#b9791b;
  --kp-ink:#1c1c28;
  --kp-muted:#5c5c6e;
  --kp-line:#e6e4ec;
  --kp-wash:#f6f5fb;
  --kp-white:#ffffff;
  --kp-radius:10px;
  --kp-shadow:0 14px 34px rgba(31,28,88,.10);
  --kp-shadow-sm:0 4px 14px rgba(31,28,88,.08);
}

/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */

body{
  font-family:'Source Sans 3',Arial,sans-serif;
  color:var(--kp-ink);
  font-size:16px;
  line-height:1.65;
  background:var(--kp-white);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,.elementor-heading-title{
  font-family:'Playfair Display',serif;
  color:var(--kp-navy);
  line-height:1.18;
  margin:0 0 10px;
  font-weight:700;
}

h1.elementor-heading-title{font-size:40px}
h2.elementor-heading-title{font-size:30px}
h3.elementor-heading-title{font-size:19px;margin-bottom:8px}
h4.elementor-heading-title{font-size:16px}
h6.elementor-heading-title{
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--kp-gold-deep);
  margin:0;
}

.kp-section p,.kp-wash p,.kp-pagehero p{color:var(--kp-muted);font-size:16px}

a{color:var(--kp-navy)}

/* =========================================================
   BUTTONS
   ========================================================= */

.kp-btn{
  font-family:'Jost',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:14px 28px;
  border-radius:6px;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  border:2px solid transparent;
}

.kp-btn--gold{
  background:var(--kp-gold);
  color:var(--kp-navy-deep);
}
.kp-btn--gold:hover{
  background:#e8a933;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(242,184,75,.35);
}

.kp-btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
  margin-left:10px;
}
.kp-btn--ghost:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
}

/* gold/navy CTA blocks used inside kp-navy bands */
.kp-cta-gold .kp-btn--gold{display:inline-block}
.kp-cta-navy .kp-btn{
  background:var(--kp-navy);
  color:#fff;
}
.kp-cta-navy .kp-btn:hover{background:var(--kp-navy-soft)}

/* =========================================================
   ANNOUNCEMENT TICKER
   ========================================================= */

.kp-announce{
  background:var(--kp-navy-deep);
  color:rgba(255,255,255,.85);
  overflow:hidden;
  white-space:nowrap;
  padding:8px 0;
}
.kp-ann__track{
  display:inline-flex;
  animation:kp-marquee-scroll 26s linear infinite;
}
.kp-ann__item{
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:0 36px;
  color:var(--kp-gold);
}
@keyframes kp-marquee-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .kp-ann__track{animation:none}
}

/* =========================================================
   FLOATING QUICKBAR (mobile call / whatsapp)
   ========================================================= */

.kp-quickbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  display:none;
  gap:1px;
  background:var(--kp-line);
}
.kp-quickbar__item{
  flex:1;
  text-align:center;
  padding:13px 10px;
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
}
.kp-quickbar__call{background:var(--kp-navy)}
.kp-quickbar__wa{background:#218838}
@media (max-width:760px){
  .kp-quickbar{display:flex}
  body{padding-bottom:52px}
}

/* =========================================================
   HERO SLIDER — HEIGHT FIX
   The Elementor markup nests the slider several levels deep
   (.elementor-container > .elementor-column >
   .elementor-widget-wrap > .elementor-widget > .kp-slider),
   and the slider's own CSS uses height:100% at each level to
   fill the 600px-tall .kp-hero-slider section. A percentage
   height only resolves against an ancestor with a DEFINITE
   height, and none of the intermediate Elementor wrapper
   divs had a height rule — so the chain broke at
   .elementor-container (auto height) and everything below it
   collapsed to 0px, hiding the slide text entirely. This
   forces every wrapper in that one chain to actually be
   100% tall, without touching how .elementor-container etc.
   behave anywhere else on the site.
   ========================================================= */

.kp-hero-slider .elementor-container,
.kp-hero-slider .elementor-column,
.kp-hero-slider .elementor-widget-wrap,
.kp-hero-slider .elementor-widget{
  height:100%;
  margin-bottom:0;
}
/* =========================================================
   HERO SLIDER — WIDTH FIX
   .elementor-container is capped at max-width:1200px and
   centered everywhere else on the site (by design, for
   normal content sections). But inside the hero slider, the
   slide background image lives inside that same capped box,
   so on screens wider than ~1240px the navy section behind
   it shows through on both sides. This removes the cap only
   inside .kp-hero-slider so the slider image spans the full
   width, while every other section on the site keeps its
   normal 1200px centered layout untouched.
   ========================================================= */

.kp-hero-slider .elementor-container{
  max-width:none;
  padding:0;
}

/* =========================================================
   HERO SLIDER — TEXT TYPOGRAPHY
   (positioning/backgrounds are set by the per-page <style>
   block; this covers font sizing and spacing only)
   ========================================================= */

.kp-slide__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:70px;
  max-width:640px;
}
.kp-slide__tag{
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--kp-gold);
  margin-bottom:16px;
  display:inline-block;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.kp-slide__title{
  font-size:46px;
  line-height:1.15;
  margin-bottom:18px;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.kp-slide__sub{
  font-size:17px;
  line-height:1.6;
  max-width:480px;
  margin-bottom:30px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.kp-slide__cta{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .kp-slide__inner{padding:0 20px;max-width:100%}
  .kp-slide__title{font-size:32px}
  .kp-slide__sub{font-size:15px;max-width:100%}
}
@media (max-width:480px){
  .kp-slide__title{font-size:26px}
  .kp-btn--ghost{margin-left:0}
}

/* =========================================================
   STATIC PAGE HERO (inner pages)
   ========================================================= */

.kp-pagehero{
  background:linear-gradient(120deg,var(--kp-navy) 0%,var(--kp-navy-soft) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.kp-pagehero .elementor-heading-title{color:#fff}
.kp-pagehero h6.elementor-heading-title{color:var(--kp-gold)}
.kp-pagehero h1.elementor-heading-title{font-size:38px;margin-top:10px}
.kp-pagehero p{color:rgba(255,255,255,.82);max-width:640px;font-size:17px}

/* =========================================================
   EYEBROW / RULED / BRUSH HEADING DECORATION
   ========================================================= */

.kp-eyebrow h6{color:var(--kp-gold-deep)}
.kp-eyebrow-line{position:relative;padding-left:34px}
.kp-eyebrow-line::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  width:24px;height:2px;
  background:var(--kp-gold-deep);
  transform:translateY(-50%);
}
.kp-navy .kp-eyebrow-line::before,.kp-herobg .kp-eyebrow-line::before{background:var(--kp-gold)}

.kp-ruled{border-top:1px solid var(--kp-line);padding-top:16px;margin-top:6px}
.kp-navy .kp-ruled,.kp-herobg .kp-ruled{border-top-color:rgba(255,255,255,.18)}

.kp-brush{position:relative}

/* =========================================================
   SECTION BACKGROUNDS
   ========================================================= */

.kp-section{background:var(--kp-white)}
.kp-wash{background:var(--kp-wash)}

.kp-navy{
  background:linear-gradient(120deg,var(--kp-navy) 0%,var(--kp-navy-soft) 100%);
  color:rgba(255,255,255,.88);
  position:relative;
  overflow:hidden;
}
.kp-navy .elementor-heading-title{color:#fff}
.kp-navy h6.elementor-heading-title{color:var(--kp-gold)}
.kp-navy p{color:rgba(255,255,255,.78)}
.kp-navy a:not(.kp-btn){color:var(--kp-gold)}

.kp-herobg{position:relative;overflow:hidden;background:var(--kp-navy)}

/* paint-drip decoration injected by kempro-motion.js into
   .kp-navy / .kp-herobg / .kp-pagehero bands */
.kp-drips{
  position:absolute;
  left:0;right:0;bottom:0;
  height:0;
  pointer-events:none;
  z-index:2;
  overflow:visible;
}
.kp-drip{
  position:absolute;
  bottom:0;
  border-radius:0 0 6px 6px;
  background:var(--kp-gold);
  opacity:.7;
}

/* =========================================================
   MILESTONES / STATS STRIP
   ========================================================= */

.kp-mile{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.kp-mile__num{
  font-family:'Playfair Display',serif;
  font-size:38px;
  font-weight:800;
  color:var(--kp-gold);
  line-height:1;
  margin-bottom:8px;
}
.kp-mile__lbl{
  font-family:'Jost',sans-serif;
  font-size:13px;
  letter-spacing:.05em;
  color:rgba(255,255,255,.75);
}
@media (max-width:700px){
  .kp-mile{grid-template-columns:repeat(2,1fr);gap:28px 20px}
}

/* =========================================================
   CLIENT LOGO MARQUEE
   ========================================================= */

.kp-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.kp-marquee__track{
  display:flex;
  align-items:center;
  gap:52px;
  width:max-content;
  animation:kp-marquee-scroll 22s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .kp-marquee__track{animation:none;flex-wrap:wrap}
}
.kp-client{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:.85;
}
.kp-client__logo{
  width:64px;height:64px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--kp-line);
  padding:8px;
}
.kp-client__name{
  font-family:'Jost',sans-serif;
  font-size:12px;
  color:var(--kp-muted);
  white-space:nowrap;
}

/* =========================================================
   LEAD PARAGRAPH + COMPANY SPEC CARD (About page)
   ========================================================= */

.kp-lead p{
  font-size:17px;
  line-height:1.75;
  color:var(--kp-ink);
}
.kp-lead p:first-child::first-letter{
  font-family:'Playfair Display',serif;
  font-size:52px;
  font-weight:700;
  color:var(--kp-gold-deep);
  float:left;
  line-height:.85;
  margin:6px 8px 0 0;
}

.kp-spec{
  background:var(--kp-wash);
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  padding:26px;
}
.kp-spec__head{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--kp-line);
}
.kp-spec__code{
  font-family:'Jost',sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kp-gold-deep);
}
.kp-spec__name{
  font-family:'Playfair Display',serif;
  font-size:20px;
  color:var(--kp-navy);
  font-weight:700;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
table th,table td{
  text-align:left;
  padding:10px 0;
  vertical-align:top;
  border-bottom:1px solid var(--kp-line);
}
table th{
  width:42%;
  font-family:'Jost',sans-serif;
  font-weight:600;
  color:var(--kp-navy);
  padding-right:14px;
}
table td{color:var(--kp-muted)}
table tr:last-child th,table tr:last-child td{border-bottom:none}

/* =========================================================
   ICON-BOX FEATURE CARDS
   ========================================================= */

.kp-card{
  background:#fff;
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  padding:30px 26px;
  height:100%;
  box-shadow:var(--kp-shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.kp-card:hover{transform:translateY(-4px);box-shadow:var(--kp-shadow)}
.elementor-icon-box-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--kp-wash);
  color:var(--kp-navy);
  font-size:20px!important;
  margin-bottom:16px!important;
}
.elementor-icon-box-title{margin-bottom:8px;font-size:18px}
.elementor-icon-box-description{color:var(--kp-muted);font-size:15px;margin:0}

/* =========================================================
   PRODUCT NAV / LISTS (Products page)
   ========================================================= */

.kp-prodnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-bottom:24px;
  margin-bottom:8px;
  border-bottom:1px solid var(--kp-line);
}
.kp-prodnav a{
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--kp-navy);
  background:var(--kp-wash);
  border:1px solid var(--kp-line);
  border-radius:30px;
  padding:9px 18px;
  transition:background .18s ease,color .18s ease;
}
.kp-prodnav a:hover{background:var(--kp-navy);color:#fff;border-color:var(--kp-navy)}

.kp-prodgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:36px;
  margin-top:24px;
}
.kp-prodcat{padding-top:4px}
.kp-prodcat__title{
  font-size:20px;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:2px solid var(--kp-gold);
  display:inline-block;
}
.kp-prodcat__sub{
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--kp-gold-deep);
  margin:18px 0 8px;
}
.kp-prodlist{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.kp-prodlist li{
  position:relative;
  padding-left:18px;
  color:var(--kp-ink);
  font-size:15px;
}
.kp-prodlist li::before{
  content:'';
  position:absolute;
  left:0;top:9px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--kp-gold-deep);
}
@media (max-width:760px){
  .kp-prodgrid{grid-template-columns:1fr}
}

/* =========================================================
   SECTORS — APPLICATION ICON GRID
   ========================================================= */

.kp-apps{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.kp-app{
  background:#fff;
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  padding:22px 14px;
  text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.kp-app:hover{
  transform:translateY(-3px);
  box-shadow:var(--kp-shadow-sm);
  border-color:var(--kp-gold);
}
.kp-app__ic{
  width:46px;height:46px;
  margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--kp-wash);
  color:var(--kp-navy);
  font-size:18px;
}
.kp-app__name{
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--kp-ink);
  line-height:1.35;
}
@media (max-width:1000px){.kp-apps{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.kp-apps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:460px){.kp-apps{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   CONTACT CARD + FORM
   ========================================================= */

.kp-contactcard{
  margin-top:18px;
  border-top:1px solid var(--kp-line);
}
.kp-contactcard__row{
  display:flex;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--kp-line);
}
.kp-contactcard__label{
  width:130px;
  flex-shrink:0;
  font-family:'Jost',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--kp-gold-deep);
}
.kp-contactcard__value{color:var(--kp-ink);font-size:15px;line-height:1.6}
.kp-contactcard__value a{color:var(--kp-navy);text-decoration:none}
.kp-contactcard__value a:hover{text-decoration:underline}

.kp-form{
  background:var(--kp-wash);
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  padding:28px;
}
.kp-form__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.kp-field{margin:0}
.kp-field--full{grid-column:1/-1}
.kp-field label{
  display:block;
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--kp-navy);
  margin-bottom:6px;
}
.kp-opt{color:var(--kp-muted);font-weight:400;text-transform:none;font-size:12px}
.kp-field input,.kp-field select,.kp-field textarea{
  width:100%;
  font-family:'Source Sans 3',sans-serif;
  font-size:15px;
  padding:11px 13px;
  border:1px solid var(--kp-line);
  border-radius:6px;
  background:#fff;
  color:var(--kp-ink);
  box-sizing:border-box;
}
.kp-field input:focus,.kp-field select:focus,.kp-field textarea:focus{
  outline:none;
  border-color:var(--kp-gold-deep);
}
.kp-field textarea{resize:vertical}
.kp-form__aside{
  margin-left:16px;
  font-size:14px;
  color:var(--kp-muted);
}
.kp-form__aside a{color:var(--kp-navy)}
@media (max-width:600px){
  .kp-form__grid{grid-template-columns:1fr}
  .kp-form__aside{display:block;margin:12px 0 0}
}

/* =========================================================
   EMPTY STATE (Blogs page placeholder)
   ========================================================= */

.kp-empty{
  text-align:center;
  padding:60px 20px;
  border:1px dashed var(--kp-line);
  border-radius:var(--kp-radius);
  color:var(--kp-muted);
  font-size:16px;
  background:var(--kp-wash);
}

/* =========================================================
   GENERAL CONTAINER WIDTH FIXES FOR NARROW SCREENS
   ========================================================= */

@media (max-width:900px){
  .kp-mile{gap:20px}
  h1.elementor-heading-title{font-size:30px}
  h2.elementor-heading-title{font-size:24px}
}

/* =========================================================
   PRODUCT CATALOG EXPLORER (Products page drill-down)
   Category bar -> breadcrumb -> grid of cards (branch or
   leaf) -> leaf detail panel (image + description).
   ========================================================= */

.kp-catalog{
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  overflow:hidden;
  background:#fff;
}

.kp-catalog__categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:18px;
  background:var(--kp-wash);
  border-bottom:1px solid var(--kp-line);
}
.kp-catalog__cat{
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--kp-navy);
  background:#fff;
  border:1px solid var(--kp-line);
  border-radius:30px;
  padding:9px 18px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.kp-catalog__cat:hover{border-color:var(--kp-gold)}
.kp-catalog__cat.is-active{background:var(--kp-navy);color:#fff;border-color:var(--kp-navy)}

.kp-catalog__crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:14px 20px;
  font-family:'Jost',sans-serif;
  font-size:13px;
  border-bottom:1px solid var(--kp-line);
}
.kp-catalog__crumb-item{
  background:none;
  border:none;
  padding:2px 4px;
  cursor:pointer;
  color:var(--kp-muted);
  font-family:inherit;
  font-size:inherit;
}
.kp-catalog__crumb-item:hover{color:var(--kp-gold-deep)}
.kp-catalog__crumb-item.is-current{color:var(--kp-navy);font-weight:600;cursor:default}
.kp-catalog__crumb-sep{color:var(--kp-line)}

.kp-catalog__body{
  padding:24px;
  min-height:220px;
  outline:none;
}

.kp-catalog__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.kp-catalog__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  text-align:left;
  background:var(--kp-wash);
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  padding:18px;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  font-family:inherit;
}
.kp-catalog__card:hover{
  transform:translateY(-3px);
  box-shadow:var(--kp-shadow-sm);
  border-color:var(--kp-gold);
}
.kp-catalog__card-ic{
  width:38px;height:38px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--kp-line);
  display:flex;align-items:center;justify-content:center;
  color:var(--kp-navy);
  font-size:15px;
}
.kp-catalog__card--leaf .kp-catalog__card-ic{color:var(--kp-gold-deep)}
.kp-catalog__card-name{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:16px;
  color:var(--kp-navy);
  line-height:1.3;
}
.kp-catalog__card-cta{
  margin-top:auto;
  font-family:'Jost',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--kp-gold-deep);
  display:flex;
  align-items:center;
  gap:6px;
}

.kp-catalog__detail{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}
.kp-catalog__detail-img{
  flex:0 0 260px;
  width:260px;
  height:260px;
  border-radius:var(--kp-radius);
  overflow:hidden;
  background:var(--kp-wash);
  border:1px solid var(--kp-line);
}
.kp-catalog__detail-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.kp-catalog__detail-body{
  flex:1 1 320px;
  min-width:280px;
}
.kp-catalog__detail-body h3{
  font-size:24px;
  margin-bottom:12px;
}
.kp-catalog__detail-body p{
  color:var(--kp-muted);
  font-size:16px;
  line-height:1.7;
  margin-bottom:22px;
}
.kp-catalog__detail-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.kp-catalog__back{
  background:#fff;
  color:var(--kp-navy);
  border-color:var(--kp-line);
}
.kp-catalog__back:hover{border-color:var(--kp-navy)}

/* =========================================================
   SPLIT LIST + DETAIL (list of individual products, e.g. the
   7 Primers) — list on the left, image/description on the
   right, updating in place on hover or click instead of
   navigating to a separate screen for each product.
   ========================================================= */

.kp-catalog__split{
  display:flex;
  gap:22px;
  align-items:flex-start;
}
.kp-catalog__split-list{
  flex:0 0 260px;
  width:260px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:520px;
  overflow-y:auto;
}
.kp-catalog__split-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  background:var(--kp-wash);
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  padding:12px 14px;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease,border-color .15s ease;
}
.kp-catalog__split-item .kp-catalog__card-name{
  font-size:14px;
  flex:1;
}
.kp-catalog__split-item .kp-catalog__arrow{
  color:var(--kp-line);
  font-size:13px;
  opacity:0;
  transition:opacity .15s ease;
}
.kp-catalog__split-item:hover{border-color:var(--kp-gold)}
.kp-catalog__split-item.is-active{
  background:#fff;
  border-color:var(--kp-gold);
  box-shadow:var(--kp-shadow-sm);
}
.kp-catalog__split-item.is-active .kp-catalog__arrow{
  opacity:1;
  color:var(--kp-gold-deep);
}
.kp-catalog__split-detail{
  flex:1;
  min-width:280px;
  background:var(--kp-wash);
  border:1px solid var(--kp-line);
  border-radius:var(--kp-radius);
  padding:22px;
}
.kp-catalog__split-detail .kp-catalog__detail-img{
  flex:0 0 200px;
  width:200px;
  height:200px;
}

@media (max-width:760px){
  .kp-catalog__split{flex-direction:column}
  .kp-catalog__split-list{width:100%;flex:none;max-height:none}
}

@media (max-width:460px){
  .kp-catalog__split-detail .kp-catalog__detail-img{width:100%;height:180px}
}

@media (max-width:760px){
  .kp-catalog__grid{grid-template-columns:repeat(2,1fr)}
  .kp-catalog__detail{flex-direction:column}
  .kp-catalog__detail-img{width:100%;flex:none;height:220px}
}
@media (max-width:460px){
  .kp-catalog__grid{grid-template-columns:1fr}
}

/* =========================================================
   HEADER "PRODUCTS" HOVER DROPDOWN — 2 LEVELS
   Level 1 (.kp-navdrop__panel): the 5 categories, built by
   kempro-navmenu.js from KEMPRO_CATALOG. Level 2
   (.kp-navdrop__sub): each category's own children, shown as
   a flyout to the right when that category row is hovered.
   Clicking a level-2 item navigates to the Products page.
   ========================================================= */

.kp-navdrop{position:relative;display:flex;align-items:center}
.kp-navdrop__panel{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:260px;
  background:#fff;
  border:1px solid var(--kp-line);
  border-radius:10px;
  box-shadow:var(--kp-shadow);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:60;
}
.kp-navdrop:hover .kp-navdrop__panel,
.kp-navdrop:focus-within .kp-navdrop__panel{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(2px);
}

.kp-navdrop__item{position:relative}
.kp-navdrop .kp-navdrop__item > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-family:'Jost',sans-serif;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:none;
  font-weight:500;
  color:var(--kp-ink);
  text-decoration:none;
  padding:11px 14px;
  border-radius:6px;
  white-space:nowrap;
}
.kp-navdrop .kp-navdrop__item > a:hover,
.kp-navdrop .kp-navdrop__item:hover > a,
.kp-navdrop .kp-navdrop__item:focus-within > a{background:var(--kp-wash);color:var(--kp-gold-deep)}
.kp-navdrop__arrow{color:var(--kp-line);font-size:16px;line-height:1}
.kp-navdrop__item:hover .kp-navdrop__arrow,
.kp-navdrop__item:focus-within .kp-navdrop__arrow{color:var(--kp-gold-deep)}

.kp-navdrop__sub{
  position:absolute;
  top:-8px;
  left:100%;
  margin-left:8px;
  min-width:260px;
  max-height:360px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--kp-line);
  border-radius:10px;
  box-shadow:var(--kp-shadow);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateX(4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  z-index:61;
}
.kp-navdrop__item:hover > .kp-navdrop__sub,
.kp-navdrop__item:focus-within > .kp-navdrop__sub{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
.kp-navdrop .kp-navdrop__sub a{
  display:block;
  font-family:'Jost',sans-serif;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:none;
  font-weight:500;
  color:var(--kp-ink);
  text-decoration:none;
  padding:10px 14px;
  border-radius:6px;
  white-space:nowrap;
}
.kp-navdrop .kp-navdrop__sub a:hover{background:var(--kp-wash);color:var(--kp-gold-deep)}

@media (max-width:900px){
  .kp-navdrop__sub{
    position:static;
    margin:4px 0 4px 14px;
    box-shadow:none;
    border-color:var(--kp-line);
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
  }
  .kp-navdrop__item:hover > .kp-navdrop__sub,
  .kp-navdrop__item:focus-within > .kp-navdrop__sub{display:block}
}
/* =========================================================
   FOOTER LOGO — VISIBILITY FIX
   The logo file's own navy shape blends into the footer's
   dark navy background, leaving only faint text floating
   with no visible logo shape. Giving it a light backdrop
   card makes it read clearly against the dark footer, the
   same way it already reads clearly against the white
   header. Scoped to .ft .ft__in img specifically so nothing
   else on the site is affected.
   ========================================================= */

.ft .ft__in img{
  background:#fff;
  padding:10px 16px;
  border-radius:10px;
  display:inline-block;
}

/* =========================================================
   MOBILE HAMBURGER MENU
   Hidden on desktop. Below 900px, the nav links collapse
   behind a hamburger button; tapping it slides the full nav
   open as a panel under the header. kempro-hamburger.js
   handles the open/close toggle.
   ========================================================= */

.kp-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px;
  height:34px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.kp-hamburger span{
  display:block;
  width:100%;
  height:2px;
  background:var(--kp-navy);
  border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.kp-hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kp-hamburger.is-active span:nth-child(2){opacity:0}
.kp-hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .kp-hamburger{display:flex}

  .hd .nv{
    display:none;
    width:100%;
    flex-direction:column;
    gap:0;
    background:#fff;
    border-top:1px solid var(--kp-line);
    padding:8px 0;
  }
  .hd .nv.is-open{display:flex}

  .hd .nv > a{width:100%;padding:14px 20px;box-sizing:border-box}

  .kp-navdrop{width:100%;display:flex;flex-direction:column;align-items:stretch}
  .kp-navdrop > a{width:100%;padding:14px 20px;box-sizing:border-box}
}