/* ==========================================================================
   Kingenta Global · Structural Minimalism (all languages)
   Implements Kingenta_Web_Design_Standard.md + Kingenta_Design_Template.html.
   Loaded LAST on every page of every language; per-language font stacks at the end of the file.
   Rules: 1px hairlines instead of shadows/colour blocks, <=2px radius,
   left-aligned section heads, Plus Jakarta Sans (display) + Inter (body),
   motion limited to arrow shift / image 1.03 zoom / soft reveal.
   ========================================================================== */
:root{
  --color-bg:#ffffff;
  --color-surface:#f5f6f3;
  --color-primary:#c30d23;
  --color-primary-hover:#a30b1e;
  --color-accent:#1f7a4d;
  --color-text:#16181d;
  --color-text-muted:#5b606b;
  --color-border:#e2e4df;
  --color-dark:#12251b;
  --color-footer:#eceeea;
  --color-dark-text:#eef1ec;
  --color-dark-muted:#9aa89c;
  --font-display:'Plus Jakarta Sans','Plus Jakarta Display',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hairline:1px solid var(--color-border);
  --k2-accent:var(--color-primary);
  --k2-accent-hover:var(--color-primary-hover);
  --k2-shadow-btn:none;
  --k2-shadow-btn-hover:none;
}

/* ---------- Typography (§2) ---------- */
html body *:not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]){font-family:var(--font-body)!important}
html body :is(h1,h2,h3,h4):not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]),
html body .sec-title:not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]),html body .hero-h:not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]),html :is(:is(#kgm,#kg),body) .partner-title:not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]),html :is(:is(#kgm,#kg),body) .kg-grow-title:not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]),
html body .stat-num:not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]){font-family:var(--font-display)!important}
body{color:var(--color-text);-webkit-font-smoothing:antialiased}
:is(#kgm,#kg) h1,:is(#kgm,#kg) .hero-inner h1{font-weight:600!important;letter-spacing:-.025em!important;line-height:1.08!important;font-size:clamp(40px,6vw,64px)!important}
:is(#kgm,#kg) .sec-title,:is(#kgm,#kg) h2{font-weight:600!important;letter-spacing:-.02em!important;line-height:1.15!important;font-size:clamp(30px,4vw,44px)!important;color:var(--color-text)!important;text-align:left!important}
:is(#kgm,#kg) h3{font-weight:500!important;letter-spacing:-.01em!important;line-height:1.3!important}
:is(#kgm,#kg) .sec-sub,:is(#kgm,#kg) .hero-inner p{font-weight:400!important;letter-spacing:0!important;line-height:1.6!important;color:var(--color-text-muted)!important;max-width:42rem;font-size:clamp(17px,1.4vw,20px)!important;text-align:left!important}
:is(#kgm,#kg) p{line-height:1.65}
:is(#kgm,#kg) .hero-inner p{color:rgba(255,255,255,.88)!important}

/* ---------- Header (§3): 80px, 1px rule, no shadow ---------- */
#kgh .header,#kgh .header.is-floating{
  height:80px!important;min-height:80px!important;
  background:rgba(255,255,255,.95)!important;
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
  border:0!important;border-bottom:var(--hairline)!important;box-shadow:none!important}
#kgh .header .wrap{height:80px!important;max-width:1440px!important;margin:0 auto!important;padding:0 24px!important;box-sizing:border-box}
@media(min-width:768px){#kgh .header .wrap{padding:0 48px!important}}
#kgh .logo img{max-height:32px!important;width:auto!important}
#kgh .nav .menu>li>a{font-family:var(--font-body)!important;font-size:14px!important;font-weight:500!important;color:var(--color-text)!important;letter-spacing:0!important}
#kgh .nav .menu>li>a:hover,#kgh .nav .menu>li:hover>a,#kgh .nav .menu>li:focus-within>a{color:var(--color-primary)!important}
#kgh .header-cta .btn{border-radius:2px!important;box-shadow:none!important;font-size:14px!important;font-weight:500!important;padding:10px 20px!important;min-height:0!important;height:auto!important;background:var(--color-primary)!important;color:#fff!important}
#kgh .kgh-search-toggle,#kgh .kgh-lang-toggle,#kgh .menu-toggle{border-radius:2px!important;box-shadow:none!important;background:transparent!important;border:var(--hairline)!important}
#kgh .kgh-search-panel,#kgh .kgh-lang-panel,#kgh .gcse-search{border-radius:2px!important;box-shadow:none!important;border:var(--hairline)!important}
#kgh .kgh-search input{border-radius:2px!important}
body.demo251-body>main{margin-top:80px!important}
@media (max-width:980px){body.demo251-body>main{margin-top:80px!important}}
#kgh{--kg-header-h:80px}

/* ---------- Mega menu (§4): full-width tray, hairline, no float ---------- */
#kgh .nav .menu li ul,#kgh .nav .menu li ul.kgh-mega{
  border-radius:0!important;box-shadow:none!important;background:var(--color-bg)!important;
  border:0!important;border-bottom:var(--hairline)!important;border-top:var(--hairline)!important}
#kgh .nav .menu li ul li a{font-size:15px!important;font-weight:500!important;border-radius:0!important;transition:transform .2s ease,color .2s ease!important}
#kgh .nav .menu li ul li a:hover{background:transparent!important;color:var(--color-primary)!important;transform:translateX(4px)}
@media (min-width:1151px){
  #kgh .nav .menu li ul.kgh-mega,#kgh .nav .menu li ul.kgh-mega.kgh-mega-3{
    position:fixed!important;top:80px!important;left:0!important;right:0!important;
    width:100%!important;max-width:none!important;margin:0!important;
    padding:44px max(48px,calc((100vw - 1440px)/2 + 48px))!important}
}
#kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a,#kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a em{
  font-size:12px!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--color-primary)!important;white-space:normal!important;line-height:1.4!important}
#kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a:hover,#kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a:hover em{color:var(--color-primary-hover)!important}
#kgh .nav .menu li ul.kgh-mega{column-gap:44px!important}
/* Compact the expanded panel: the page-embedded mega-menu style (same block
   on every page) gives each link 8px/12px padding and a 21px line-height,
   and the category title a 5px bottom margin -- comfortable but visibly
   loose once the panel is open, especially in the >=1151px full-width tray
   above. Tighten both without shrinking the hit target below the 1em text. */
#kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a{padding-bottom:8px!important;margin-bottom:8px!important}
#kgh .nav .menu li ul.kgh-mega ul li a{padding:9px 12px!important;line-height:21px!important}
/* Submenu text: one size (14px) for column titles and links, beating the page-embedded 12/13px rules */
html #kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a:not(#_),html #kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a em:not(#_),html #kgh .nav .menu li ul.kgh-mega ul li a:not(#_),html #kgh .nav .menu li ul.kgh-mega ul li a em:not(#_),html #kgh .nav .menu li ul li a:not(#_),html #kgh .nav .menu li ul li a em:not(#_){font-size:14px!important}

/* ---------- Buttons (§3, §5): sharp, flat, one primary + arrow link ---------- */
#kgh .header-cta .btn,:is(#kgm,#kg) .btn,:is(#kgm,#kg) .kg-grow-btn,:is(#kgm,#kg) a.btn,:is(#kgm,#kg) button.btn,.kg-grow-btn,#kgf .btn-pill-sm,.kgc .btn,.kp .btn,.kp-btn{
  border-radius:2px!important;box-shadow:none!important;
  font-family:var(--font-body)!important;font-size:14px!important;font-weight:500!important;
  min-height:44px!important;padding:11px 22px!important;line-height:20px!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease!important;transform:none!important}
:is(#kgm,#kg) .btn:hover,.kg-grow-btn:hover,#kgf .btn-pill-sm:hover{transform:none!important;box-shadow:none!important}
:is(#kgm,#kg) .btn-primary,:is(#kgm,#kg) .btn-cta-accent,.kg-grow-btn,#kgf .btn-pill-sm{background:var(--color-primary)!important;border:1px solid var(--color-primary)!important;color:#fff!important}
:is(#kgm,#kg) .btn-primary:hover,:is(#kgm,#kg) .btn-cta-accent:hover,.kg-grow-btn:hover,#kgf .btn-pill-sm:hover{background:var(--color-primary-hover)!important;border-color:var(--color-primary-hover)!important}
:is(#kgm,#kg) .btn-secondary,:is(#kgm,#kg) .sec-action .btn{background:transparent!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important}
:is(#kgm,#kg) .btn-secondary:hover,:is(#kgm,#kg) .sec-action .btn:hover{border-color:var(--color-text)!important;background:transparent!important}
/* secondary hero action → text arrow link (one solid CTA per hero) */
:is(#kgm,#kg) .hero .btn-outline-white{width:fit-content!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.85)!important;border-radius:0!important;color:#fff!important;padding:4px 0!important;min-height:0!important;margin-left:8px}
:is(#kgm,#kg) .hero .btn-outline-white:hover{border-bottom-color:#fff!important}
:is(#kgm,#kg) .btn .arrow,:is(#kgm,#kg) .pmore .arrow,:is(#kgm,#kg) .card-action .arrow{transition:transform .2s ease!important}
:is(#kgm,#kg) .btn:hover .arrow,:is(#kgm,#kg) a:hover .pmore .arrow,:is(#kgm,#kg) a:hover .card-action .arrow{transform:translateX(4px)}

/* ---------- Hero L1 (§5.1): left-aligned, sharp, 1 solid CTA ---------- */
:is(#kgm,#kg) .hero{border-radius:0!important;min-height:640px}
:is(#kgm,#kg) .hero-inner{text-align:left!important;margin-left:0!important}
:is(#kgm,#kg) .hero-cta{gap:20px 28px!important;align-items:center}
:is(#kgm,#kg) .hero-dots button,:is(#kgm,#kg) .hero-dots span{border-radius:0!important}

/* ---------- Sections (§9): hairline partition, generous rhythm, left heads ---------- */
:is(#kgm,#kg) .section{padding:96px 0!important;background:var(--color-bg)!important;border-top:var(--hairline)}
@media(min-width:768px){:is(#kgm,#kg) .section{padding:128px 0!important}}
:is(#kgm,#kg) .section.solutions-brands{border-top:0}
:is(#kgm,#kg) .section.products,:is(#kgm,#kg) .section.news-section{background:var(--color-bg)!important}
:is(#kgm,#kg) .section.tech{background:var(--color-surface)!important}
/* Some pages (products overview, biological/specialty-fertilizer/nutrient-
   management-solutions hubs, brands, technology) wrap their body content in
   <div id="kg"> instead of <main id="kgm">. The shared header's own inline
   style sets #kgh .wrap / #kg .wrap / #kgf .wrap to max-width:1440px!important
   as their base value; this 1440px canonical must therefore also cover #kg,
   or pages using #kg as the body container would diverge from the #kgm pages.
   Selector targets :is(#kgm,#kg) .wrap so both body containers stay 1440px
   and align with the 1440px header/footer. */
html :is(#kgm,#kg) .wrap{max-width:1440px!important;padding-left:24px!important;padding-right:24px!important}
@media(min-width:768px){html :is(#kgm,#kg) .wrap{padding-left:48px!important;padding-right:48px!important}}
/* kg-category.css gives .pcat-stack its own padding:24px!important (it's
   normally a plain .pcat-stack with no .wrap class, so there's no conflict).
   On /products/index.html specifically, that same element also carries the
   .wrap class (class="wrap pcat-stack"), so the two padding rules collide on
   one element and the 24px one wins at desktop width -- the row content then
   sits ~24px further left than the .wrap-only title/header above it, visibly
   misaligned. Force the combined-class case back to .wrap's own padding. */
html body .wrap.pcat-stack:not(#_){padding-left:24px!important;padding-right:24px!important}
@media(min-width:768px){html body .wrap.pcat-stack:not(#_){padding-left:48px!important;padding-right:48px!important}}
@media(max-width:680px){html body .wrap.pcat-stack:not(#_){padding-left:16px!important;padding-right:16px!important}}
/* Same collision, different element: nutrient-management-solutions/index.html
   combines class="wrap nm-stack", and .nm-stack has its own competing
   padding in kg-link-cards.css (24px) and kg-spacing.css (32px), either of
   which beats .wrap's 48px and shifts that page's product rows left of the
   title above them. */
html body .wrap.nm-stack:not(#_){padding-left:24px!important;padding-right:24px!important}
@media(min-width:768px){html body .wrap.nm-stack:not(#_){padding-left:48px!important;padding-right:48px!important}}
@media(max-width:680px){html body .wrap.nm-stack:not(#_){padding-left:16px!important;padding-right:16px!important}}
/* Breakpoint mismatch: shared-e25008ba.css drops .k2-crumb .wrap to 16px
   at max-width:768px, but kg-category.css only drops .pcat-intro/.pcat-stack
   to 16px at max-width:680px. In the 681-767px gap the breadcrumb sits at
   16px while the title/row content above and below it is still at 24px,
   so the breadcrumb link looks indented less than everything else. Re-widen
   the breadcrumb to match in that gap.
   Below 680px the breadcrumb SHOULD drop to 16px (matching everything else),
   but on #kg/#kgm pages (products/index.html, nutrient-management-solutions)
   it doesn't: the generic ":is(#kgm,#kg) .wrap" rule above picks up an ID in
   its selector, which outranks shared-e25008ba.css's plain ".k2-crumb .wrap"
   on specificity even though both are !important, so the breadcrumb follows
   the generic wrap's var(--m-pad) tiering (24/20/16) instead of its own
   680px cutover. Pin both tiers explicitly so it can't lose that fight. */
@media (min-width:681px) and (max-width:767px) {
  html body .k2-crumb .wrap:not(#_){padding-left:24px!important;padding-right:24px!important}
}
@media (min-width:768px) {
  html body .k2-crumb .wrap:not(#_){padding-left:48px!important;padding-right:48px!important}
}
@media (max-width:680px) {
  html body .k2-crumb .wrap:not(#_){padding-left:16px!important;padding-right:16px!important}
}
/* Same gap, a third system this time: the generic mobile ".wrap" rule
   above (max-width:767px, var(--m-pad)=20px) is !important and applies to
   EVERY .wrap on the page, including .pcat-intro .wrap, overriding
   kg-category.css's 24px (which only drops to 16px at max-width:680px).
   So the title sits at 20px while the breadcrumb/media above and below it
   (already pinned to 24px) don't. Pin the title's wrap to match. */
@media (min-width:681px) and (max-width:767px) {
  html body :is(#kg,#kgm,.product-category-main) .pcat-intro .wrap:not(#_){padding-left:24px!important;padding-right:24px!important}
  html body :is(#kg,#kgm) .nm-intro .wrap:not(#_){padding-left:24px!important;padding-right:24px!important}
}
/* Same root cause, one tier down: var(--m-pad) only drops from 20px to
   16px below max-width:380px, so between 381-680px .pcat-intro .wrap is
   stuck at 20px via the generic rule above while the breadcrumb (16px,
   its own !important rule) and the product rows (16px, kg-category.css
   #kg .pcat-stack) have already dropped to 16px. Pin the title to match. */
@media (max-width:680px) {
  html body :is(#kg,#kgm,.product-category-main) .pcat-intro .wrap:not(#_){padding-left:16px!important;padding-right:16px!important}
  html body :is(#kg,#kgm) .nm-intro .wrap:not(#_){padding-left:16px!important;padding-right:16px!important}
}
/* The actual, sitewide-relevant bug behind every "still misaligned" report
   on crop-nutrition and specialty-fertilizer: these are the only two pages
   whose <main> literally has the .product-category-main class (every other
   product-category page uses a plain <main> with a #kg/#kgm div inside, and
   gets the desktop-48px tier for free from the generic :is(#kgm,#kg) .wrap
   rule above). .product-category-main has no such generic rule, so its
   breadcrumb (shared-e25008ba.css), title wrap (kg-category.css) and
   .page-container (this page's own embedded <style>) all stay flat at 24px
   padding at EVERY width >= 680px -- they never pick up the 48px desktop
   tier the header/footer and every #kg/#kgm page use. Confirmed by direct
   comparison: on a #kg page (products/index.html) logo/crumb/title/media
   all land on 48px at 1440px; on crop-nutrition and specialty-fertilizer
   the logo is 48px but crumb/title/media stay at 24px -- a visible,
   permanent 24px left-indent on the whole content column versus the header,
   at every desktop width, not just one breakpoint gap. */
@media (min-width:768px) {
  html body:has(.product-category-main) .k2-crumb .wrap:not(#_){padding-left:48px!important;padding-right:48px!important}
  html body .product-category-main .pcat-intro .wrap:not(#_){padding-left:48px!important;padding-right:48px!important}
  html body :is(.product-list-template,.product-category-main) .page-container:not(#_):not(#__){padding-left:48px!important;padding-right:48px!important}
}
:is(#kgm,#kg) .sec-title{margin-bottom:20px!important}
:is(#kgm,#kg) .sec-sub{margin-bottom:56px!important}

/* ---------- Brand showcase cards (§7): top rule, no fill ---------- */
:is(#kgm,#kg) .brand-card{background:transparent!important;border:0!important;border-top:2px solid var(--color-text)!important;border-radius:0!important;box-shadow:none!important;padding-top:24px;transition:none!important}
:is(#kgm,#kg) .brand-card .card-media{background:transparent!important;border-radius:0!important;padding:0 0 24px!important;justify-content:flex-start!important}
:is(#kgm,#kg) .brand-card .card-media img{max-height:56px!important;width:auto!important;margin:0!important;object-fit:contain}
:is(#kgm,#kg) .brand-card .card-body{padding:0!important}
:is(#kgm,#kg) .brand-card h3{font-size:clamp(20px,2.4vw,24px)!important}
:is(#kgm,#kg) .btag{background:transparent!important;border:var(--hairline)!important;border-radius:2px!important;color:var(--color-text)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;padding:6px 12px!important}

/* ---------- Tabs (§6): hairline underline, red active ---------- */
:is(#kgm,#kg) .tabs{border-bottom:var(--hairline)!important;gap:0!important}
:is(#kgm,#kg) .tab{font-family:var(--font-body)!important;font-size:14px!important;font-weight:500!important;color:var(--color-text-muted)!important;padding:16px 24px 14px!important;border-radius:0!important;border-bottom:2px solid transparent!important;background:none!important}
:is(#kgm,#kg) .tab:hover{color:var(--color-text)!important}
:is(#kgm,#kg) .tab.active{color:var(--color-text)!important;border-bottom-color:var(--color-primary)!important}

/* ---------- Product cards (§7 Hairline Grid Card): max 3 per row ---------- */
:is(#kgm,#kg) .pgrid{gap:0!important;column-gap:0!important;row-gap:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;border-top:var(--hairline);border-left:var(--hairline)}
:is(#kgm,#kg) .pcard{background:transparent!important;border:0!important;border-right:var(--hairline)!important;border-bottom:var(--hairline)!important;border-radius:0!important;box-shadow:none!important;transition:background .2s ease!important;transform:none!important}
:is(#kgm,#kg) .pcard:hover{background:var(--color-surface)!important;box-shadow:none!important;transform:none!important}
:is(#kgm,#kg) .pcard .pimg{background:transparent!important;border-radius:0!important;padding:32px 32px 0!important;overflow:hidden}
:is(#kgm,#kg) .pcard .pimg img{border-radius:0!important;transition:transform .7s ease-out!important}
:is(#kgm,#kg) .pcard:hover .pimg img{transform:scale(1.03)!important}
:is(#kgm,#kg) .pcard .pbody{padding:24px 32px 32px!important}
:is(#kgm,#kg) .pcard .item-title,:is(#kgm,#kg) .pcard h3{font-size:clamp(18px,2vw,22px)!important}
:is(#kgm,#kg) .pcard .pmore{color:var(--color-primary)!important;font-size:14px!important;font-weight:500!important}
:is(#kgm,#kg) .sec-action{margin-top:32px}

/* ---------- Technology cards: flat, hairline, no radius ---------- */
:is(#kgm,#kg) .tech-grid{gap:0!important;column-gap:0!important;row-gap:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;border-top:var(--hairline);border-left:var(--hairline)}
:is(#kgm,#kg) .tech-card{background:transparent!important;border:0!important;border-right:var(--hairline)!important;border-bottom:var(--hairline)!important;border-radius:0!important;box-shadow:none!important;transform:none!important;transition:background .2s ease!important}
:is(#kgm,#kg) .tech-card:hover{background:var(--color-bg)!important;box-shadow:none!important;transform:none!important}
:is(#kgm,#kg) .tech-img{border-radius:0!important;overflow:hidden}
:is(#kgm,#kg) .tech-img img{border-radius:0!important;transition:transform .7s ease-out!important}
:is(#kgm,#kg) .tech-card:hover .tech-img img{transform:scale(1.03)!important}
:is(#kgm,#kg) .tech-body{padding:32px!important}
:is(#kgm,#kg) .tech-item{font-size:14px!important;color:var(--color-text-muted)!important;border-top:var(--hairline);padding-top:10px;margin-top:10px;background:transparent!important}

/* ---------- Why / news / partner (§12: no text over image; split on clean surface) ---------- */
html body .why-media,html body .why-media img{border-radius:0!important;box-shadow:none!important}
html :is(:is(#kgm,#kg),body) .wrap.kg-grow-wrap,html :is(:is(#kgm,#kg),body) .kg-grow-wrap{max-width:1440px!important;padding:0 24px 96px!important}
@media(min-width:768px){html :is(:is(#kgm,#kg),body) .wrap.kg-grow-wrap,html :is(:is(#kgm,#kg),body) .kg-grow-wrap{padding:0 48px 128px!important}}
html :is(:is(#kgm,#kg),body) .kg-grow-partner{display:grid!important;grid-template-columns:5fr 7fr;align-items:stretch!important;background:var(--color-surface)!important;border:var(--hairline)!important;border-radius:0!important;box-shadow:none!important;min-height:0!important}
html :is(:is(#kgm,#kg),body) .kg-grow-partner::after{content:'';order:2;background:url('../img/shared/kingenta-international-home-page-2.webp') center/cover no-repeat;min-height:420px;display:block}
html :is(:is(#kgm,#kg),body) .kg-grow-partner .partner-bg{display:none!important}
html :is(:is(#kgm,#kg),body) .kg-grow-inner{order:1;min-height:0!important;padding:56px 48px!important;justify-content:center!important}
html :is(:is(#kgm,#kg),body) .kg-grow-inner::before,html :is(:is(#kgm,#kg),body) .kg-grow-inner::after{display:none!important;content:none!important}
html :is(:is(#kgm,#kg),body) .kg-grow-panel{border:0!important;color:var(--color-text)!important;max-width:none!important}
html :is(:is(#kgm,#kg),body) .kg-grow-title .kg-grow-main{font-family:var(--font-display)!important;font-size:clamp(30px,3.6vw,44px)!important;font-weight:600!important;letter-spacing:-.02em!important;color:var(--color-text)!important;text-shadow:none!important}
html :is(:is(#kgm,#kg),body) .kg-grow-title .kg-grow-sub{font-weight:500!important;color:var(--color-text-muted)!important;text-shadow:none!important;font-size:18px!important}
html :is(:is(#kgm,#kg),body) .kg-grow-desc{color:var(--color-text-muted)!important;text-shadow:none!important;font-size:16px!important}
@media(max-width:900px){html :is(:is(#kgm,#kg),body) .kg-grow-partner{grid-template-columns:1fr}html :is(:is(#kgm,#kg),body) .kg-grow-partner::after{order:0;min-height:260px}}
html :is(:is(#kgm,#kg),body) .partner-title,html :is(:is(#kgm,#kg),body) .kg-grow-title{font-weight:600!important;letter-spacing:-.02em!important}

/* ---------- Global geometry (§7, §12): <=2px radius, no shadows on content ---------- */
main img,main video,main iframe,main figure,main picture{border-radius:0!important}
main :is(article,aside,details,summary,table,.card,.box,.panel,[class*="-card"],[class*="card-"],[class*="-box"],[class*="tile"],[class*="chip"],[class*="tag"],[class*="badge"],[class*="pill"],[class*="item"],input,select,textarea,.btn,button):not([class*="dot"]):not([class*="toggle"]){border-radius:2px!important}
main :is(article,aside,details,section,div,a,li,table,img,[class*="card"],[class*="box"],[class*="tile"],[class*="item"],[class*="panel"],[class*="wrap"]){box-shadow:none!important}
.kgc :is(div,a,li,section,article,img,table,button){box-shadow:none!important}
.kp :is(div,a,li,section,article,img,table,button){box-shadow:none!important}

/* ---------- Spec tables & accordions (§10) ---------- */
main table{border-collapse:collapse!important;border:0!important}
main table th,main table td{border-left:0!important;border-right:0!important;border-top:0!important;border-bottom:var(--hairline)!important;padding:14px 12px 14px 0;font-variant-numeric:tabular-nums}
main table tbody tr:nth-child(even),main table tbody tr:nth-child(even) td{background:transparent!important}
main table thead th,main table th{background:transparent!important;color:var(--color-text)!important;font-weight:600}
main details{border:0!important;border-top:var(--hairline)!important;border-radius:0!important;background:transparent!important}
main details:last-of-type{border-bottom:var(--hairline)!important}
main details>summary{padding:20px 0!important;font-size:18px;font-weight:500}

/* ---------- Forms (§14): bottom-border inputs ---------- */
.inquiry-form input,.inquiry-form select,.inquiry-form textarea,
main form input:not([type=checkbox]):not([type=radio]):not([type=submit]),main form select,main form textarea{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--color-border)!important;border-radius:0!important;padding-left:0!important;padding-right:0!important;box-shadow:none!important}
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus,main form input:focus,main form select:focus,main form textarea:focus{border-bottom-color:var(--color-primary)!important;outline:none!important}

/* ---------- Footer (§8): light grey base, 3 tiers, hairlines ---------- */
html body #kgf{background:var(--color-footer)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--color-text)!important;padding-top:96px!important;border-top:var(--hairline)}
#kgf .wrap{max-width:1440px!important;padding-left:24px!important;padding-right:24px!important}
@media(min-width:768px){#kgf .wrap{padding-left:48px!important;padding-right:48px!important}}
#kgf .foot-brand-row{border-bottom:var(--hairline)!important;padding-bottom:36px!important;margin-bottom:36px!important}
#kgf .foot-main{border-bottom:var(--hairline)!important;padding-bottom:36px!important;row-gap:24px!important}
#kgf .foot-bottom{padding-top:20px!important;padding-bottom:20px!important}
#kgf .foot-title{font-family:var(--font-body)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--color-text-muted)!important;margin-bottom:24px!important}
#kgf .foot-desc,#kgf .foot-contact-item,#kgf .foot-bottom,#kgf .foot-copy{color:var(--color-text-muted)!important}
#kgf .foot-nav a{color:var(--color-text)!important;opacity:1;font-size:14px!important}
#kgf .foot-legal a{color:var(--color-text-muted)!important;font-size:12px!important}
#kgf .foot-nav a:hover,#kgf .foot-legal a:hover,#kgf .foot-contact-item a:hover{color:var(--color-primary)!important;opacity:1;transform:none!important}
#kgf .foot-logo:hover{transform:none!important}
#kgf .foot-contact-item svg{fill:var(--color-text-muted)!important}
#kgf .foot-bottom{border-top:0}
#kgf .foot-logo img{filter:none!important}

/* ---------- Floating dock: sharp, flat ---------- */
.k2-float-btn,.k2-floating-dock a,.k2-floating-dock button{border-radius:2px!important;box-shadow:none!important}

/* ---------- Motion (§13): soft reveal only; no scale/bounce on cards ---------- */
@media (prefers-reduced-motion:no-preference){
  :is(#kgm,#kg) .section,:is(#kgm,#kg) .hero{animation:kgmin-in .5s ease-out both}
  @keyframes kgmin-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ==========================================================================
   Inner pages (category / product / technology / brands / about / contact):
   same geometry as the home page. Scoped under page roots so ID rules lose.
   ========================================================================== */
html body :is(#kgm,#kg,.kgc,.kp,main) *:not(svg):not(svg *):not([class*="dot"]):not(.vp-btn):not(.mech-step):not(.hero-dots *){border-radius:2px!important}
html body :is(#kgm,#kg,.kgc,.kp,main) *{box-shadow:none!important;text-shadow:none!important}
html body :is(#kgm,#kg,.kgc,.kp,main) :is(img,video,iframe,.pcat-media,.intro-media,.overview-media,.kp-photo,.video-wrap,.map-canvas-wrap){border-radius:0!important}
/* tinted bands → one neutral surface; cards → hairline, no fill */
html body :is(.section-alt,.section.alt,.pcat-row.pcat-flip,.kp-band--soft,.pfs,.contact-offices,.map-canvas-wrap){background:var(--color-surface)!important}
html body :is(.chip,.tag,.office-ic,.fi,.tech-img,.offices-contact-bar){background:transparent!important}
html body :is(.chip,.tag){border:var(--hairline)!important;color:var(--color-text)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important}
html body :is(.feature-card,.benefit-item,.kp-fact,.kp-feature,.feat,.pcat-link,.pfs-card,.mech-product,.mech-cmp,.specs-table-wrap,.kp-tablewrap,.mech-eq){background:var(--color-bg)!important;border:var(--hairline)!important;transition:none!important;transform:none!important}
html body :is(.feature-card,.pcat-link,.pfs-card,.mech-product):hover{background:var(--color-surface)!important;transform:none!important}
html body :is(.pcat-link,.pfs-card) img{transition:transform .7s ease-out}
html body :is(.pcat-link,.pfs-card):hover img{transform:scale(1.03)}
html body .mech-cmp-good{background:var(--color-bg)!important;border-color:var(--color-accent)!important}
html body main th{background:transparent!important}
html body main tr{background:transparent!important}
/* inner-page headings: left aligned, display font, sentence case, same scale */
html body :is(#kg,.kgc,.kp) h1{font-size:clamp(40px,6vw,64px)!important;font-weight:600!important;letter-spacing:-.025em!important;line-height:1.08!important}
html body :is(#kg,.kgc,.kp) h2{font-size:clamp(30px,4vw,44px)!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.15!important;text-align:left!important}
html body :is(#kg,.kgc,.kp) h3{font-weight:500!important;letter-spacing:-.01em!important}
html body :is(#kg,.kgc,.kp) :is(h1,h2,h3){color:var(--color-text)!important}
html body .kgc :is(p,li){line-height:1.65}

/* ==========================================================================
   MOBILE & TABLET (Standard §15) — mobile-first sizes, 44px targets,
   one column for text cards, scroll-safe tables, compact header
   ========================================================================== */
/* fix cascade: tech grid must follow the mobile rules below (declared late) */
@media (max-width:1023px){
  html body :is(#kgm,#kg) .tech-grid{grid-template-columns:1fr!important}
  html body :is(#kgm,#kg) .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:767px){
  :root{--m-pad:20px;--m-section:64px}
  html body :is(#kgm,#kg) .wrap,html body .wrap,html body #kgf .wrap,
  html :is(:is(#kgm,#kg),body) .wrap.kg-grow-wrap,html :is(:is(#kgm,#kg),body) .kg-grow-wrap{padding-left:var(--m-pad)!important;padding-right:var(--m-pad)!important}
  html :is(:is(#kgm,#kg),body) .wrap.kg-grow-wrap,html :is(:is(#kgm,#kg),body) .kg-grow-wrap{padding-bottom:var(--m-section)!important}

  /* header: 64px, 44px touch targets */
  #kgh .header,#kgh .header.is-floating{height:64px!important;min-height:64px!important}
  #kgh .header .wrap{height:64px!important;padding:0 var(--m-pad)!important;gap:8px!important}
  #kgh .logo img{max-height:28px!important}
  #kgh .menu-toggle,#kgh .kgh-search-toggle,#kgh .kgh-lang-toggle{min-width:44px!important;min-height:44px!important;width:44px!important;height:44px!important;display:inline-flex!important;align-items:center;justify-content:center;padding:0!important}
  body.demo251-body>main{margin-top:64px!important}
  #kgh{--kg-header-h:64px}
  #kgh .nav .menu{background:var(--color-bg)!important;border-top:var(--hairline)}
  #kgh .nav .menu>li>a{min-height:52px!important;display:flex!important;align-items:center;font-size:16px!important;border-bottom:var(--hairline)}
  #kgh .nav .menu li ul li a{min-height:44px!important;display:flex!important;align-items:center}

  /* rhythm */
  :is(#kgm,#kg) .section,html body .section{padding:var(--m-section) 0!important}
  :is(#kgm,#kg) .sec-title,:is(#kgm,#kg) h2{margin-bottom:12px!important}
  :is(#kgm,#kg) .sec-sub{margin-bottom:32px!important;font-size:17px!important}
  :is(#kgm,#kg) .hero{min-height:560px!important}
  :is(#kgm,#kg) .hero-inner p{font-size:17px!important}

  /* hero CTA: one full-width primary + inline arrow link */
  :is(#kgm,#kg) .hero-cta{flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
  :is(#kgm,#kg) .hero-cta .btn-primary{width:100%!important;justify-content:center}
  :is(#kgm,#kg) .hero .btn-outline-white{width:fit-content!important;display:inline-flex!important;align-self:flex-start;margin-left:0!important;min-height:44px!important;align-items:center;padding:0 0 2px!important}

  /* tabs: swipeable single row with snap */
  :is(#kgm,#kg) .tabs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin-right:calc(var(--m-pad)*-1);padding-right:var(--m-pad);scrollbar-width:none}
  :is(#kgm,#kg) .tabs::-webkit-scrollbar{display:none}
  :is(#kgm,#kg) .tab{flex:0 0 auto!important;white-space:nowrap;min-height:48px;padding:14px 18px 12px!important;scroll-snap-align:start}

  /* all text-card grids → 1 column */
  html body :is(:is(#kgm,#kg) .pgrid,:is(#kgm,#kg) .tech-grid,:is(#kgm,#kg) .sol-grid,.kp-features,.mech-grid-4,.card-grid-3,.card-grid-2,.kp-facts,.kp-grid,.feature-grid,.benefits-grid,.benefit-grid,.pcat-links,.flow-branch-container,.office-grid){grid-template-columns:1fr!important}
  html body .kp-tech{grid-template-columns:1fr!important;flex-direction:column!important;align-items:flex-start!important}
  html body :is(.pcat-row,.kp-split,.kp-hero-grid,.overview-grid,.intro-grid,.about-base-grid){grid-template-columns:1fr!important}
  html body #kg .about-base-grid{grid-template-columns:minmax(0,1fr)!important}
  html body div[style*="repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important;gap:12px!important}
  :is(#kgm,#kg) .pcard .pimg{padding:24px 24px 0!important}
  :is(#kgm,#kg) .pcard .pbody,:is(#kgm,#kg) .tech-body{padding:20px 20px 28px!important}
  :is(#kgm,#kg) .tech-img{aspect-ratio:16/10;overflow:hidden}
  :is(#kgm,#kg) .tech-img img{width:100%;height:100%;object-fit:cover}
  html body .benefit-item{flex-direction:row;gap:14px}

  /* tables: scroll inside their frame, with edge shadows as the affordance */
  html body :is(.kp-tablewrap,.specs-table-wrap,.table-wrap){overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,
      linear-gradient(to right,rgba(22,24,29,.12),rgba(22,24,29,0)),linear-gradient(to left,rgba(22,24,29,.12),rgba(22,24,29,0)) 100% 0;
    background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
  html body :is(.kp-tablewrap,.specs-table-wrap,.table-wrap) table{min-width:520px}

  /* tap targets (WCAG 2.5.5 / 44px) */
  html body main :is(.btn,.kp-btn,button.btn,.kg-grow-btn){min-height:48px!important;width:auto}
  html body main :is(.kp-btn,.kg-grow-btn){width:100%;justify-content:center}
  html body main nav[aria-label*="readcrumb" i] a,html body main .breadcrumb a,html body main [class*="crumb"] a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  html body main :is(.gmap-type-btn,.kp-thumb,.pcard .pmore){min-height:44px}
  #kgf .foot-nav a,#kgf .foot-legal a{min-height:44px;display:inline-flex!important;align-items:center}
  #kgf .foot-nav{gap:0!important}
  #kgf .foot-main{grid-template-columns:1fr 1fr!important;gap:32px 20px!important}
  #kgf .foot-main>.foot-col:last-child{grid-column:1/-1}
  #kgf{padding-top:64px!important}
  #kgf .foot-brand-row{padding-bottom:40px!important;margin-bottom:40px!important}
  #kgf .foot-bottom{gap:4px!important}

  html body .mech-refs a{display:inline-block;padding:12px 0;word-break:break-all}
  #kgh .logo{display:inline-flex;align-items:center;min-height:44px}

  /* readable minimum text */
  html body main :is(.btag,.chip,.tag,.caption,small){font-size:12px!important}
  html body main p,html body main li{font-size:max(15px,1em)}

  /* floating dock: compact, bottom-right, never over content headings */
  html body .k2-floating-dock{right:12px!important;bottom:12px!important;top:auto!important;gap:8px!important;transform:none!important}
  html body .k2-float-btn,html body .k2-float-top{width:44px!important;height:44px!important}

  /* Grow band: image on top, copy on clean surface */
  html :is(:is(#kgm,#kg),body) .kg-grow-partner{grid-template-columns:1fr!important}
  html :is(:is(#kgm,#kg),body) .kg-grow-partner{display:grid!important}
  html :is(:is(#kgm,#kg),body) .kg-grow-partner::after{order:0!important;min-height:220px!important}
  html :is(:is(#kgm,#kg),body) .kg-grow-inner{padding:32px 20px!important}
  html :is(:is(#kgm,#kg),body) .kg-grow-btn{width:100%!important}
}
@media (max-width:380px){
  :root{--m-pad:16px}
  html body :is(#kgm,#kg) h1,#kgm .hero-inner h1{font-size:36px!important}
}
/* tablet 768–1023: 2 columns max, 56px header rhythm */
@media (min-width:768px) and (max-width:1023px){
  :is(#kgm,#kg) .tab{padding:14px 20px 12px!important}
  html body :is(.kp-features,.mech-grid-4){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* mobile extras: dots hit area, consent bar targets (Standard §15.6, §15.11) */
@media (max-width:767px){
  :is(#kgm,#kg) .hero-dots button,:is(#kgm,#kg) .hero-dots span{position:relative;min-width:28px;min-height:44px}
  :is(#kgm,#kg) .hero-dots button::after,:is(#kgm,#kg) .hero-dots span::after{content:'';position:absolute;inset:-6px -4px}
  .kg-cc-reject,.kg-cc-accept{min-height:44px!important;border-radius:2px!important;font-size:14px!important;font-weight:500!important}
  .kg-cc-actions{gap:8px!important}
  [class*="kg-cc"]{box-shadow:none!important}
}
@media (max-width:767px){
  html body :is(.kp-all,.pcat-all,.nm-all){display:inline-flex!important;align-items:center;min-height:44px}
  html body .tds-modal-close{min-width:44px!important;min-height:44px!important;display:inline-flex!important;align-items:center;justify-content:center}
  html body main :is(.kp-section-link,.link-arrow,.pmore){display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:767px){html body .nue-more a{display:inline-flex!important;align-items:center;min-height:44px}}

/* Desktop mega menu: keep it open while the pointer travels from the link to the panel.
   Nav items fill the full 80px header height (no gap above the panel), closing is delayed
   250ms only when the pointer leaves the whole menu, and hovering a different item swaps
   the panel instantly. (No overlay bridge: it would block hover on the neighbouring items.) */
@media (min-width:1151px){
  #kgh .nav .menu>li{height:80px!important;display:flex!important;align-items:center}
  #kgh .nav .menu li ul{transition:opacity .15s ease-out,transform .15s ease-out,visibility 0s linear .25s!important}
  #kgh .nav .menu li:hover>ul,#kgh .nav .menu li:focus-within>ul{transition-delay:0s!important}
  #kgh .nav .menu:has(>li:hover)>li:not(:hover)>ul{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition-delay:0s!important}
}

/* Arrow buttons on link cards — minimal: hairline square, red arrow at rest;
   on card hover it fills red, the arrow turns white and "breathes" (slow 3px nudge). */
html body :is(.pcat-link,.nm-link,.pfs-card) > svg{
  background:transparent!important;border:1px solid var(--color-border)!important;border-radius:2px!important;box-shadow:none!important;
  fill:var(--color-primary)!important;color:var(--color-primary)!important;
  transition:background-color .35s ease,border-color .35s ease!important;transform:none!important}
html body :is(.pcat-link,.nm-link,.pfs-card) > svg path{fill:var(--color-primary)!important;transition:fill .35s ease;transform-box:fill-box;transform-origin:center}
html body :is(.pcat-link,.nm-link,.pfs-card):hover > svg,
html body :is(.pcat-link,.nm-link,.pfs-card):focus-visible > svg{background:var(--color-primary)!important;border-color:var(--color-primary)!important}
html body :is(.pcat-link,.nm-link,.pfs-card):hover > svg path,
html body :is(.pcat-link,.nm-link,.pfs-card):focus-visible > svg path{fill:#fff!important}
@media (prefers-reduced-motion:no-preference){
  html body :is(.pcat-link,.nm-link,.pfs-card):hover > svg path{animation:kgmin-breathe 1.8s ease-in-out infinite}
}
@keyframes kgmin-breathe{0%,100%{transform:translateX(-2px)}50%{transform:translateX(4px)}}
@keyframes kgmin-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(.86)}}
@keyframes kgmin-pulse-bg{0%,100%{background-color:var(--color-primary)}50%{background-color:var(--color-primary-hover)}}

/* One arrow button for every link to a product detail page (home cards, product overview
   cards, mechanism-page product cards). Same square as the category link cards above. */
:root{--kg-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12l-5-5 1.4-1.4L20 12l-7.6 7.4L11 18l5-5H4z'/%3E%3C/svg%3E")}
/* home product cards: "Read more →" text → square arrow button, bottom right */
html body :is(#kgm,#kg) .pcard .pmore{
  font-size:0!important;line-height:0!important;color:transparent!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;margin:20px 0 0 auto!important;align-self:flex-end;
  border:1px solid var(--color-border)!important;border-radius:2px!important;background:transparent!important;
  transition:background-color .35s ease,border-color .35s ease!important}
html body :is(#kgm,#kg) .pcard .pmore::after{content:'';display:block;width:20px;height:20px;background:var(--color-primary);
  -webkit-mask:var(--kg-arrow) center/contain no-repeat;mask:var(--kg-arrow) center/contain no-repeat;transition:background-color .35s ease}
html body :is(#kgm,#kg) .pcard:hover .pmore,html body :is(#kgm,#kg) .pcard:focus-visible .pmore{background:var(--color-primary)!important;border-color:var(--color-primary)!important}
html body :is(#kgm,#kg) .pcard:hover .pmore::after,html body :is(#kgm,#kg) .pcard:focus-visible .pmore::after{background:#fff}
/* product overview cards (.pfs-card): add the button (::before = square, ::after = arrow) */
html body .pfs-card{position:relative}
html body .pfs-card .pfs-body{padding-bottom:76px!important}
html body .pfs-card::before{content:'';position:absolute;right:20px;bottom:20px;width:44px;height:44px;box-sizing:border-box;
  border:1px solid var(--color-border);border-radius:2px;background:transparent;transition:background-color .35s ease,border-color .35s ease}
html body .pfs-card::after{content:'';position:absolute;right:32px;bottom:32px;width:20px;height:20px;background:var(--color-primary);
  -webkit-mask:var(--kg-arrow) center/contain no-repeat;mask:var(--kg-arrow) center/contain no-repeat;transition:background-color .35s ease}
html body .pfs-card:hover::before,html body .pfs-card:focus-visible::before{background:var(--color-primary);border-color:var(--color-primary)}
html body .pfs-card:hover::after,html body .pfs-card:focus-visible::after{background:#fff}
/* mechanism pages: "View product →" → same button */
html body .mech-product{position:relative}
html body .mech-product .mech-product-link{
  font-size:0!important;line-height:0!important;color:transparent!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  width:44px;height:44px;margin-top:16px;border:1px solid var(--color-border)!important;border-radius:2px!important;background:transparent!important;
  transition:background-color .35s ease,border-color .35s ease!important}
html body .mech-product .mech-product-link svg{width:20px;height:20px;fill:var(--color-primary)!important;transition:fill .35s ease}
html body .mech-product .mech-product-link svg path{fill:var(--color-primary)!important;transition:fill .35s ease;transform-box:fill-box}
html body .mech-product:hover .mech-product-link,html body .mech-product:focus-visible .mech-product-link{background:var(--color-primary)!important;border-color:var(--color-primary)!important}
html body .mech-product:hover .mech-product-link svg path,html body .mech-product:focus-visible .mech-product-link svg path{fill:#fff!important}
@media (prefers-reduced-motion:no-preference){
  html body :is(#kgm,#kg) .pcard:hover .pmore::after{animation:kgmin-breathe 1.8s ease-in-out infinite}
  html body .mech-product:hover .mech-product-link svg path{animation:kgmin-breathe 1.8s ease-in-out infinite}
  html body .pfs-card:hover::after{animation:kgmin-breathe 1.8s ease-in-out infinite}
}

/* Font pairing (Standard §2): headings = Plus Jakarta Sans, everything else = Inter.
   ID-strength rules so inline page styles (Readex Pro etc.) cannot win. */
html :is(#kgm,#kg,#kgh,#kgf,body) :is(p,li,a,th,td,span,strong,em,label,button,input,select,textarea,small,figcaption,summary,div,dt,dd,blockquote,caption):not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.las):not(.lab):not(.la):not([class*="swiper-button"]){font-family:var(--font-body)!important}
html :is(#kgm,#kg,#kgh,#kgf,body) :is(h1,h2,h3,h4,h5,h6,.sec-title,.pcat-title,.hero-h,.partner-main,.kg-grow-main,.stat-num,.mech-step-num,.kp-pct):not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.las):not(.lab):not(.la):not([class*="swiper-button"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.las):not(.lab):not(.la):not([class*="swiper-button"]){font-family:var(--font-display)!important}
html body :is(.pfs-card,.mech-product,.pcard){box-shadow:none!important;transform:none!important;border-radius:2px!important}

/* breathing: arrow glides (-2px..+4px) while the red square gently deepens, 1.8s loop */
@media (prefers-reduced-motion:no-preference){
  html body :is(.pcat-link,.nm-link):hover > svg{animation:kgmin-pulse 1.8s ease-in-out infinite}
  html body :is(#kgm,#kg) .pcard:hover .pmore{animation:kgmin-pulse 1.8s ease-in-out infinite}
  html body .mech-product:hover .mech-product-link{animation:kgmin-pulse 1.8s ease-in-out infinite}
  html body .pfs-card:hover::before{animation:kgmin-pulse-bg 1.8s ease-in-out infinite}
}

/* home product cards: card body fills the card so the arrow button sits at the same height in every card */
html body :is(#kgm,#kg) .pcard{display:flex!important;flex-direction:column}
html body :is(#kgm,#kg) .pcard .pbody{flex:1 1 auto}

/* product link cards on listing pages: no outer frame, transparent base (white image backdrops blend in) */
html body :is(.pcat-link,.nm-link,.pfs-card){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body :is(.pcat-link,.nm-link,.pfs-card):hover{background:transparent!important}
html body :is(.pcat-link,.nm-link) .nm-link-img,html body .pfs-card .pfs-img{background:transparent!important;border:0!important}
html body :is(.pcat-link,.nm-link) .nm-link-img img,html body .pfs-card .pfs-img img{mix-blend-mode:multiply;background:transparent!important}
html body :is(.pcat-link,.nm-link,.pfs-card){padding-left:0!important;padding-right:0!important}
html body .pfs-card .pfs-body{padding-left:0!important}
html body .pfs-card::before{right:0}
html body .pfs-card::after{right:12px}
html body .pfs-card :is(.pfs-img,.pfs-body){background:transparent!important}
html body .pfs-card .pfs-body{padding-bottom:84px!important;padding-right:0!important}
html body .pfs-card::before{right:0!important;bottom:12px!important}
html body .pfs-card::after{right:12px!important;bottom:24px!important}

/* ID-strength copies (page inline rules like "#kg .pfs-card{background:#fff!important}" must not win) */
html :is(#kgm,#kg,body) :is(.pcat-link,.nm-link,.pfs-card){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html :is(#kgm,#kg,body) :is(.pcat-link,.nm-link,.pfs-card):hover{background:transparent!important}
html :is(#kgm,#kg,body) .pfs-card :is(.pfs-img,.pfs-body){background:transparent!important}
html :is(#kgm,#kg,body) .pfs-card{overflow:visible!important}
html :is(#kgm,#kg,body) :is(.pfs,.section-alt,.pcat-row.pcat-flip,.nm-row.nm-flip,.kp-band--soft){background:var(--color-surface)!important}
/* .pcat-row rows sit inside a max-width .wrap, so a plain background only
   fills that narrow column. Pages whose <main> carries #kg/#kgm/
   .product-category-main already get a full-bleed treatment for alternating
   rows from kg-category.css; this extends the same bleed to .pcat-flip rows
   on any page (e.g. the bare <main> products overview), without touching
   .pfs/.section-alt/.kp-band--soft, which are already full-width <section>
   elements and don't need it. */
html :is(#kgm,#kg,body) .pcat-row.pcat-flip:not(#_){box-shadow:0 0 0 100vmax var(--color-surface)!important;clip-path:inset(0 -100vmax)!important}

/* No hairline frames on card grids (home product cards, technology cards, mechanism product cards) */
html :is(#kgm,#kg,body) .pgrid{border:0!important;column-gap:32px!important;row-gap:56px!important}
html :is(#kgm,#kg,body) .pcard{border:0!important;background:transparent!important;border-radius:0!important}
html :is(#kgm,#kg,body) .pcard:hover{background:transparent!important}
html :is(#kgm,#kg,body) .pcard .pimg{padding:0!important;background:transparent!important}
html :is(#kgm,#kg,body) .pcard .pimg img{mix-blend-mode:multiply}
html :is(#kgm,#kg,body) .pcard .pbody{padding:28px 0 0!important}
html :is(#kgm,#kg,body) .tech-grid{border:0!important;column-gap:32px!important;row-gap:56px!important}
html :is(#kgm,#kg,body) .tech-card{border:0!important;background:transparent!important}
html :is(#kgm,#kg,body) .tech-card:hover{background:transparent!important}
html :is(#kgm,#kg,body) .tech-body{padding:28px 0 0!important}
html :is(#kgm,#kg,body) .mech-product{border:0!important;background:transparent!important;border-radius:0!important}
html :is(#kgm,#kg,body) .mech-product:hover{background:transparent!important}
html :is(#kgm,#kg,body) .mech-product .mech-product-img{background:transparent!important;border:0!important}
html :is(#kgm,#kg,body) .mech-product .mech-product-img img{mix-blend-mode:multiply}
html :is(#kgm,#kg,body) .mech-product .mech-product-body{padding-left:0!important;padding-right:0!important}
@media (max-width:767px){
  html :is(#kgm,#kg,body) .pgrid,html :is(#kgm,#kg,body) .tech-grid{row-gap:48px!important}
  html :is(#kgm,#kg,body) .pcard .pbody,html :is(#kgm,#kg,body) .tech-body{padding:24px 0 0!important}
}

/* Text + arrow links ("Explore solutions and brands →", "View base →" …): brand red */
html :is(#kgm,#kg,body) :is(.card-action,.nt-link,.clink,.pcat-all,.nm-all,.kp-all){color:var(--color-primary)!important;font-weight:500!important;transition:color .2s ease!important}
html :is(#kgm,#kg,body) :is(.card-action,.nt-link,.clink,.pcat-all,.nm-all,.kp-all) svg,
html :is(#kgm,#kg,body) :is(.card-action,.nt-link,.clink,.pcat-all,.nm-all,.kp-all) svg path{fill:currentColor!important;color:inherit!important;transition:transform .2s ease}
html :is(#kgm,#kg,body) :is(a:hover,.brand-card:hover,.nt-card:hover,.clink:hover) :is(.card-action,.nt-link,.clink) svg,
html :is(#kgm,#kg,body) :is(.pcat-all,.nm-all,.kp-all):hover svg{transform:translateX(4px)}
html :is(#kgm,#kg,body) :is(.pcat-all,.nm-all,.kp-all):hover,html :is(#kgm,#kg,body) a:hover :is(.card-action,.nt-link,.clink){color:var(--color-primary-hover)!important}

/* Fewer hairlines: no section dividers, no footer tier rules, no list separators inside cards.
   Kept: header underline, tab underline, table rows, accordion rows, framed cards/tables, form field lines. */
html :is(#kgm,#kg,body) :is(.section,section,.kp-band,.pcat-row,.nm-row,.pcat-intro,.net){border-top:0!important;border-bottom:0!important}
/* The platform default vertically centers the two pcat-row columns, so a
   shorter image column floats mid-height instead of lining up with the
   category title at the top of the copy column. Rather than just top-align
   a fixed-aspect-ratio image (which left a tall blank gap under it on rows
   with a lot of copy, e.g. the /products/ overview's 3-card teaser rows),
   stretch the image to fill the row's full height and crop from the top of
   the source photo, so it lines up with the title AND has no dead space. */
html body .pcat-row:not(#_){align-items:stretch!important}
/* Removing aspect-ratio so the image stretches to the row's height only
   makes sense in the 2-column desktop layout (>=981px, see kg-category.css).
   Below that the grid collapses to 1 column and media/copy stack instead of
   sitting side by side in the same row -- there is then nothing for the
   image to "stretch" against, so an unconstrained aspect-ratio:auto collapses
   it to 0 height (image disappears entirely). Keep a real aspect-ratio there. */
@media (min-width: 981px) {
  html body .pcat-row:not(#_) > .pcat-media:not(#_){aspect-ratio:auto!important;background-position:center top!important;align-self:stretch!important}
}
@media (max-width: 980px) {
  html body .pcat-row:not(#_) > .pcat-media:not(#_){aspect-ratio:4/3!important;background-position:center top!important}
}
html body #kgf{border-top:0!important}
html body #kgf :is(.foot-brand-row,.foot-main,.foot-bottom){border-top:0!important;border-bottom:0!important}
html :is(#kgm,#kg,body) :is(.tech-item,.mech-product-body,.brand-card){border-top:0!important}
html :is(#kgm,#kg,body) .tech-item{padding-top:0!important;margin-top:6px!important}
html :is(#kgm,#kg,body) .brand-card{padding-top:0!important}

/* ==========================================================================
   UNIFIED PRODUCT CARD  (Standard §7.1)
   image  →  [ name ........ arrow button ]  →  one-line description
   Applies to: home product cards, product overview cards, category/brand link
   cards, Nutrient Management cards, mechanism-page product cards.
   ========================================================================== */
:root{--kg-arrow-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c30d23' d='M4 11h12l-5-5 1.4-1.4L20 12l-7.6 7.4L11 18l5-5H4z'/%3E%3C/svg%3E")}

/* 1) category / brand / nm link cards (.pcat-link, .nm-link) */
html :is(#kgm,#kg,body) :is(.pcat-link,.nm-link){
  display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;column-gap:16px!important;row-gap:0!important;
  align-items:start!important;align-content:start!important;text-align:left!important}
html :is(#kgm,#kg,body) :is(.pcat-link,.nm-link) .nm-link-img{grid-column:1/-1!important;grid-row:1!important;margin:0 0 24px!important;width:100%!important;display:flex!important;justify-content:center}
html :is(#kgm,#kg,body) :is(.pcat-link,.nm-link) .nm-link-name{grid-column:1!important;grid-row:2!important;align-self:center!important;margin:0!important}
html :is(#kgm,#kg,body) :is(.pcat-link,.nm-link) > svg{grid-column:2!important;grid-row:2!important;align-self:center!important;justify-self:end!important;flex:none}
html :is(#kgm,#kg,body) :is(.pcat-link,.nm-link) .nm-link-desc{
  grid-column:1/-1!important;grid-row:3!important;margin:12px 0 0!important;
  font-size:15px!important;font-weight:400!important;line-height:1.55!important;color:var(--color-text-muted)!important;
  display:block}

/* Product-category link cards: the photo row needs a real height (the card-level grid above collapses it to 0). */
html body :is(#kg,#kgm,.product-category-main) .pcat-links .pcat-link .nm-link-img{height:auto!important;min-height:0!important;aspect-ratio:1/1!important;margin-bottom:12px!important}
/* Text-only image rows (technology pages): give the photo real height so sections don't feel cramped. */
@media (min-width:981px){
  html body .pcat-row:not(#_):not(:has(.pcat-links)){padding-top:72px!important;padding-bottom:72px!important}
  html body .pcat-row:not(#_):not(:has(.pcat-links)) > .pcat-media:not(#_){min-height:420px!important}
}
@media (max-width:980px){
  html body .pcat-row:not(#_):not(:has(.pcat-links)) > .pcat-media:not(#_){min-height:260px!important}
}
/* Product card photos: keep the whole bag visible with breathing room (no edge-to-edge crop). */
html body :is(#kg,#kgm,.product-category-main) .pcat-links .pcat-link .nm-link-img img{inset:6% 10%!important;width:80%!important;height:88%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
/* 1b) product category/hub pages (.pcat-link only, not home .pcard): drop the
   one-line description row, leaving just series name + product name (2 lines).
   Cards with no series (.kg-sm absent) collapse to a single product-name line. */
html body :is(#kg,#kgm,.product-category-main) .pcat-link .nm-link-desc:not(#_){display:none!important}
/* Scoped opt-in only (see .kg-single-line below) — a blanket "no .kg-sm ->
   hide .kg-brand" rule here wrongly assumed .kg-sub always holds the real
   product name. On Biological Solutions and Specialty Fertilizer cards,
   .kg-brand IS the product name and .kg-sub is just a category tag, so that
   rule deleted every product name on those pages. */
html body :is(#kg,#kgm,.product-category-main) .pcat-link .nm-link-name.kg-single-line .kg-brand:not(#_){display:none!important}

/* 2) home product cards (.pcard): title + arrow in one row, description below */
html :is(#kgm,#kg,body) .pcard .pbody{display:grid!important;grid-template-columns:minmax(0,1fr) 44px;column-gap:16px;align-content:start;align-items:start}
html :is(#kgm,#kg,body) .pcard .pbody .item-title{grid-column:1;grid-row:1;align-self:center;margin:0!important}
html :is(#kgm,#kg,body) .pcard .pbody .pmore{grid-column:2!important;grid-row:1!important;margin:0!important;align-self:center!important;justify-self:end}
html :is(#kgm,#kg,body) .pcard .pbody .item-intro{grid-column:1/-1;grid-row:2;margin:12px 0 0!important;font-size:15px!important;line-height:1.55!important;
  display:block}

/* 3) product overview cards (.pfs-card): button moves to the title row */
html :is(#kgm,#kg,body) .pfs-card .pfs-body{position:relative!important;padding:28px 0 0!important}
html :is(#kgm,#kg,body) .pfs-card .pfs-name{padding-right:60px!important;margin:0 0 12px!important}
html :is(#kgm,#kg,body) .pfs-card::before,html :is(#kgm,#kg,body) .pfs-card::after{content:none!important;display:none!important}
html :is(#kgm,#kg,body) .pfs-card .pfs-body::before{content:'';position:absolute;right:0;top:26px;width:44px;height:44px;box-sizing:border-box;border:1px solid var(--color-border);border-radius:2px;transition:background-color .35s ease,border-color .35s ease}
html :is(#kgm,#kg,body) .pfs-card .pfs-body::after{content:'';position:absolute;right:12px;top:38px;width:20px;height:20px;background:var(--color-primary);-webkit-mask:var(--kg-arrow) center/contain no-repeat;mask:var(--kg-arrow) center/contain no-repeat;transition:background-color .35s ease}
html :is(#kgm,#kg,body) .pfs-card:hover .pfs-body::before{background:var(--color-primary);border-color:var(--color-primary)}
html :is(#kgm,#kg,body) .pfs-card:hover .pfs-body::after{background:#fff}
@media (prefers-reduced-motion:no-preference){
  html :is(#kgm,#kg,body) .pfs-card:hover .pfs-body::before{animation:kgmin-pulse-bg 1.8s ease-in-out infinite}
  html :is(#kgm,#kg,body) .pfs-card:hover .pfs-body::after{animation:kgmin-breathe 1.8s ease-in-out infinite}
}
html :is(#kgm,#kg,body) .pfs-card .pfs-body p{font-size:15px!important;line-height:1.55!important;display:block}

/* 4) mechanism-page product cards (.mech-product) */
html :is(#kgm,#kg,body) .mech-product .mech-product-body{display:grid!important;grid-template-columns:minmax(0,1fr) 44px;column-gap:16px;align-content:start;align-items:center;padding:28px 0 0!important}
html :is(#kgm,#kg,body) .mech-product .mech-product-name{grid-column:1;grid-row:1;margin:0!important}
html :is(#kgm,#kg,body) .mech-product .mech-product-link{grid-column:2!important;grid-row:1!important;margin:0!important;justify-self:end}
html :is(#kgm,#kg,body) .mech-product .mech-product-desc{grid-column:1/-1;grid-row:2;margin:12px 0 0!important;font-size:15px!important;line-height:1.55!important;
  display:block}
@media (max-width:767px){
  html body :is(#kgm,#kg,main) :is(.pcat-links,.nm-links):not(#_){grid-template-columns:1fr!important;display:grid!important;row-gap:40px!important}
}
@media (min-width:768px) and (max-width:1023px){
  html body :is(#kgm,#kg,main) .pcat-links-3:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Outlined "View all …" / "More about us" buttons → same red text + arrow link as card links (no frame) */
html :is(#kgm,#kg,body) .btn.btn-secondary:not(.kp-btn),
html :is(#kgm,#kg,body) .btn.btn-outline:not(.kp-btn){
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:var(--color-primary)!important;font-weight:500!important;padding:0!important;min-height:44px!important;
  transition:color .2s ease!important}
html :is(#kgm,#kg,body) .btn.btn-secondary:not(.kp-btn):hover,
html :is(#kgm,#kg,body) .btn.btn-outline:not(.kp-btn):hover{background:transparent!important;color:var(--color-primary-hover)!important;border:0!important}
html :is(#kgm,#kg,body) .btn.btn-secondary:not(.kp-btn) svg,html :is(#kgm,#kg,body) .btn.btn-secondary:not(.kp-btn) svg path,
html :is(#kgm,#kg,body) .btn.btn-outline:not(.kp-btn) svg,html :is(#kgm,#kg,body) .btn.btn-outline:not(.kp-btn) svg path{fill:currentColor!important}
html :is(#kgm,#kg,body) .btn.btn-secondary:not(.kp-btn):hover svg,html :is(#kgm,#kg,body) .btn.btn-outline:not(.kp-btn):hover svg{transform:translateX(4px)}

/* Floating dock (inquiry + back to top): same hover "breathing" as the arrow buttons — no scale/lift */
html body .k2-floating-dock .k2-float-btn{box-shadow:none!important;border-radius:2px!important;transition:filter .3s ease!important}
html body .k2-floating-dock .k2-float-btn:hover,html body .k2-floating-dock .k2-float-btn:focus-visible{transform:none!important;box-shadow:none!important}
html body .k2-floating-dock .k2-float-btn svg{transition:transform .3s ease}
@media (prefers-reduced-motion:no-preference){
  html body .k2-floating-dock .k2-float-btn:hover{animation:kgmin-pulse 1.8s ease-in-out infinite}
  html body .k2-floating-dock .k2-float-top:hover svg{animation:kgmin-breathe-up 1.8s ease-in-out infinite}
  html body .k2-floating-dock .k2-float-btn:not(.k2-float-top):hover svg{animation:kgmin-breathe-mail 1.8s ease-in-out infinite}
}
@keyframes kgmin-breathe-up{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@keyframes kgmin-breathe-mail{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ==========================================================================
   PRODUCT TITLE FORMAT (Standard §7.2)
   Series name (red) [+ product model]  /  or product name (red)  +  type line
   Series: KingNitra · KingKorn · KingCote · KingNOP · DeltaLent · DeltaStim.
   Everything else is shown by its own product name.
   ========================================================================== */
html :is(#kgm,#kg,body) .kg-brand{color:var(--color-primary)!important;font-weight:700!important}
html :is(#kgm,#kg,body) .kg-sm{font-size:inherit!important;font-weight:700!important;color:var(--color-text)!important}
html :is(#kgm,#kg,body) .kg-rest{color:var(--color-text)!important;font-weight:inherit!important}
html :is(#kgm,#kg,body) .kg-sub{display:block!important;font-size:max(.6em,13px)!important;font-weight:500!important;line-height:1.35!important;margin-top:4px!important;color:var(--color-text)!important;letter-spacing:0!important}
/* names are never truncated; sub line has a fixed small size */
html body :is(#kg,#kgm,.product-category-main,main) :is(.pcat-link,.nm-link) .nm-link-name:not(#_){display:block!important;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;max-height:none!important}
html body :is(#kg,#kgm,.product-category-main,main) .nm-link-name .kg-sub:not(#_){font-size:13px!important;font-weight:500!important;letter-spacing:0!important;line-height:1.35!important;color:var(--color-text)!important}

/* series + product name: only the series name is red; the rest has the same font, size and weight */
html :is(#kgm,#kg,body) .kg-rest{font-size:inherit!important;font-weight:700!important;color:var(--color-text)!important}

/* "Series" suffix: same font, size and weight as the series name (dark) */
html body :is(#kg,#kgm,.product-category-main,main) .kg-sm:not(#_){font-size:inherit!important;font-weight:700!important}

/* product detail pages: series name in red, rest of the title the same font/size/weight */
html body h1.kp-title .kg-brand{color:var(--color-primary)!important;font-weight:inherit!important}
html body h1.kp-title .kg-sm,html body h1.kp-title .kg-rest{color:inherit!important;font-weight:inherit!important;font-size:inherit!important}

/* Main navigation + dropdown category headings: Plus Jakarta Sans (sub-items stay Inter) */
html #kgh .nav .menu>li>a:not(#_),
html #kgh .nav .menu>li>a em:not(#_),
html #kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a:not(#_),
html #kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a em:not(#_){font-family:var(--font-display)!important}

/* ==========================================================================
   GROW WITH KINGENTA BAND — one design on every page (Standard §12.1)
   Left: copy on light-grey surface · Right: factory photo · attached directly
   under the main content (no blank space above), same width as the content.
   ========================================================================== */
/* kill the home page's own dark panel */
html :is(#kgm,#kg,body) .partner{background:transparent!important;padding:0!important;border-radius:0!important}
html :is(#kgm,#kg,body) .partner .partner-inner{background:transparent!important;color:var(--color-text)!important;border-radius:0!important;overflow:visible!important;min-height:0!important;padding:56px 48px!important;max-width:none!important;margin:0!important;order:1}
html :is(#kgm,#kg,body) .partner .partner-inner::before,html :is(#kgm,#kg,body) .partner .partner-inner::after{content:none!important;display:none!important}
html :is(#kgm,#kg,body) .partner .partner-panel,html :is(#kgm,#kg,body) .partner .partner-text{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;max-width:none!important}
html :is(#kgm,#kg,body) .partner .partner-main,html :is(#kgm,#kg,body) .partner .kg-grow-main{font-family:var(--font-display)!important;font-size:clamp(30px,3.6vw,44px)!important;font-weight:600!important;line-height:1.1!important;letter-spacing:-.02em!important;color:var(--color-text)!important;text-shadow:none!important}
html :is(#kgm,#kg,body) .partner .partner-sub,html :is(#kgm,#kg,body) .partner .kg-grow-sub{font-size:18px!important;font-weight:500!important;color:var(--color-text-muted)!important;text-shadow:none!important}
html :is(#kgm,#kg,body) .partner .partner-text p,html :is(#kgm,#kg,body) .partner .kg-grow-desc{font-size:16px!important;font-weight:400!important;line-height:1.6!important;color:var(--color-text-muted)!important;text-shadow:none!important}
/* identical band on every page */
html :is(#kgm,#kg,body) .kg-grow-partner{display:grid!important;grid-template-columns:5fr 7fr!important;background:var(--color-surface)!important;border:0!important;border-left:var(--hairline)!important;border-radius:0!important;min-height:0!important;margin:0!important;overflow:hidden!important}
html :is(#kgm,#kg,body) .kg-grow-partner::after{min-height:434px!important}
/* no blank space between the main content and the band */
html :is(#kgm,#kg,body) .wrap.kg-grow-wrap,html :is(#kgm,#kg,body) .kg-grow-wrap{padding-top:0!important;margin-top:0!important}
html :is(#kgm,#kg,body) :is(section,div,main):has(+ .kg-grow-wrap):not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
html :is(#kgm,#kg,body) .kp:has(+ .kg-grow-wrap) > :last-child:not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
html :is(#kgm,#kg,body) :is(section,div):has(+ .kg-grow-wrap) > :is(.wrap,.kp-sec,.container):last-child:not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
@media (max-width:900px){html :is(#kgm,#kg,body) .kg-grow-partner{grid-template-columns:1fr!important}html :is(#kgm,#kg,body) .kg-grow-partner::after{min-height:240px!important}html :is(#kgm,#kg,body) .partner .partner-inner{padding:32px 20px!important}}
/* same, when <style>/<script> elements sit between the content and the band */
html :is(#kgm,#kg,body) :is(section,div,main):has(~ .kg-grow-wrap):not(:has(~ :not(style,script,link,template,.tds-modal-overlay,.kg-grow-wrap) ~ .kg-grow-wrap)):not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
html :is(#kgm,#kg,body) :is(section,div):has(~ .kg-grow-wrap):not(:has(~ :not(style,script,link,template,.tds-modal-overlay,.kg-grow-wrap) ~ .kg-grow-wrap)) > :last-child:not(#_):not(#__){margin-bottom:0!important}
html :is(#kgm,#kg,body) :is(.category-content,div,section):has(~ .kg-grow-wrap) > .page-container:last-child:not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
html :is(#kgm,#kg,body) .page-container:has(~ .kg-grow-wrap):not(#_):not(#__){padding-bottom:0!important}
html :is(#kgm,#kg,body) .category-content:has(~ .kg-grow-wrap) .page-container:not(#_):not(#__),html :is(#kgm,#kg,body) :is(div,main) > .page-container:not(#_):not(#__):has(+ .kg-grow-wrap){padding-bottom:0!important}
html :is(#kgm,#kg,body) .category-content:has(~ .kg-grow-wrap):not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
html :is(#kgm,#kg,body) :is(.category-container,.category-content):has(~ .kg-grow-wrap) :is(.category-content,.page-container):not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
html :is(#kgm,#kg,body) .category-container:has(~ .kg-grow-wrap):not(#_):not(#__){padding-bottom:0!important;margin-bottom:0!important}
/* trailing margins of the last content block must not open a gap above the band */
html :is(#kgm,#kg,body) :is(section,div,main):has(~ .kg-grow-wrap):not(:has(~ :not(style,script,link,template,.tds-modal-overlay,.kg-grow-wrap) ~ .kg-grow-wrap)) :last-child:not(#_):not(#__){margin-bottom:0!important}
html :is(#kgm,#kg,body) :is(.category-container,.category-content):has(~ .kg-grow-wrap) :last-child:not(#_):not(#__){margin-bottom:0!important}
/* category/hub pages: the alternating pcat-row bands end flush (their own
   :last-child zeroes padding-bottom too), so the "no blank space" rule above
   leaves literally zero gap before the CTA band. Restore breathing room there. */
/* Some category/hub pages don't carry the .product-category-main class on
   <main> at all (a pre-existing inconsistency in this codebase), so detect
   the page type structurally instead: any page with a .pcat-stack-wrap
   (the alternating-row category grid) gets the same breathing room. */
html body:has(.pcat-stack-wrap) .wrap.kg-grow-wrap:not(#_),
html body:has(.pcat-stack-wrap) .kg-grow-wrap:not(#_){padding-top:64px!important}
@media (max-width:680px){
  html body:has(.pcat-stack-wrap) .wrap.kg-grow-wrap:not(#_),
  html body:has(.pcat-stack-wrap) .kg-grow-wrap:not(#_){padding-top:40px!important}
}

/* ==========================================================================
   MULTILINGUAL (Standard §17)
   Latin glyphs always use Plus Jakarta Sans (headings) / Inter (text); CJK and Thai
   fall back to the language's Noto family. Negative tracking and uppercase are
   dropped where the script does not use them.
   ========================================================================== */
html[lang^="zh"]{--font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;--font-display:'Plus Jakarta Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif}
html[lang="ja"]{--font-body:'Inter','Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;--font-display:'Plus Jakarta Sans','Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif}
html[lang="ko"]{--font-body:'Inter','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;--font-display:'Plus Jakarta Sans','Noto Sans KR','Malgun Gothic',system-ui,sans-serif}
html[lang="th"]{--font-body:'Inter','Noto Sans Thai','Leelawadee UI',system-ui,sans-serif;--font-display:'Plus Jakarta Sans','Noto Sans Thai','Leelawadee UI',system-ui,sans-serif}
html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"]) :is(#kgm,#kg,#kgh,#kgf,body) :is(h1,h2,h3,h4,.sec-title,.hero-h,.kg-grow-main,.partner-main,.stat-num,.kp-title){letter-spacing:0!important}
html:is([lang^="zh"],[lang="ja"],[lang="ko"]) :is(#kgm,#kg,#kgh,#kgf,body) :is(h1,h2,h3,h4,.sec-title,.hero-h,.kg-grow-main,.partner-main){line-height:1.3!important}
html[lang="th"] :is(#kgm,#kg,#kgh,#kgf,body) :is(h1,h2,h3,h4,.sec-title,.hero-h,.kg-grow-main,.partner-main){line-height:1.45!important}
html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"]) :is(#kgm,#kg,#kgh,#kgf,body) :is(p,li,td,.kg-sub,.nm-link-desc,.item-intro){line-height:1.75!important}
html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"]) :is(#kgm,#kg,#kgh,#kgf,body) :is(.btag,.chip,.tag,.eyebrow,.foot-title,.kgh-mega-col>a,.kgh-mega-col>a em){letter-spacing:.02em!important;text-transform:none!important}
html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"]) #kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a:not(#_),html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"]) #kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a em:not(#_){font-size:14px!important;letter-spacing:.02em!important;text-transform:none!important}
html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"]) #kgf .foot-title:not(#_){font-size:13px!important;letter-spacing:.04em!important;text-transform:none!important}
html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"]) :is(#kgm,#kg,body) .kg-sub:not(#_){font-size:14px!important}
html:is([lang="vi"],[lang="id"],[lang="ms"]) #kgh .nav .menu li ul.kgh-mega>li.kgh-mega-col>a:not(#_){letter-spacing:.04em!important}

/* Tablet header: keep the 48px page edge and fit the nav in every language (it overflowed below ~960px). */
@media (min-width:768px) and (max-width:1150px){
  #kgh .header .wrap:not(#_){padding:0 48px!important;gap:12px!important}
  html #kgh .logo:not(#_){flex:0 0 150px!important;width:150px!important;min-width:150px!important}
  html #kgh .logo img:not(#_){width:100%!important;height:auto!important;max-width:100%!important}
  html #kgh .nav:not(#_){flex:1 1 auto!important;min-width:0!important}
  html #kgh .nav .menu:not(#_){gap:0!important;justify-content:center!important}
  html #kgh .nav .menu>li>a:not(#_),html #kgh .nav .menu>li>a em:not(#_){font-size:13px!important;white-space:nowrap!important}
  html #kgh .nav .menu>li>a:not(#_){padding-left:6px!important;padding-right:6px!important}
}
@media (min-width:768px) and (max-width:959px){
  html #kgh .logo:not(#_){flex-basis:120px!important;width:120px!important;min-width:120px!important}
  html #kgh .nav .menu>li>a:not(#_),html #kgh .nav .menu>li>a em:not(#_){font-size:12px!important}
  html #kgh .nav .menu>li>a:not(#_){padding-left:4px!important;padding-right:4px!important}
  html #kgh .nav .menu>li>a::after{display:none!important}
}
/* Contact hero title follows the sitewide page edge. */
html body .kgc.contact-hero .page-title .hero-inner:not(#_){padding-left:48px!important;padding-right:48px!important}
@media (max-width:767px){html body .kgc.contact-hero .page-title .hero-inner:not(#_){padding-left:24px!important;padding-right:24px!important}}
@media (max-width:680px){html body .kgc.contact-hero .page-title .hero-inner:not(#_){padding-left:16px!important;padding-right:16px!important}}
/* Wide comparison table and simulator must scroll or wrap inside the page on small screens. */
@media (max-width:980px){
  html body table.dc-compare:not(#_){display:block!important;min-width:0!important;max-width:100%!important;width:100%!important;overflow-x:auto!important}
  html body .simulator-content:not(#_)>*{min-width:0!important}
}
/* 681-767px: the inline nav is still active here, so hide the drawer toggle, fit the nav, and use one 24px page edge. */
@media (min-width:681px) and (max-width:767px){
  html body .wrap:not(#_):not(.x){padding-left:24px!important;padding-right:24px!important}
  #kgh .header .wrap:not(#_):not(.x){padding:0 24px!important;gap:8px!important}
  html #kgh .menu-toggle:not(#_){display:none!important}
  html #kgh .logo:not(#_){flex:0 0 104px!important;width:104px!important;min-width:104px!important;min-height:0!important}
  html #kgh .logo img:not(#_){width:100%!important;height:auto!important;max-width:100%!important}
  html #kgh .nav:not(#_){flex:1 1 auto!important;min-width:0!important}
  html #kgh .nav .menu:not(#_){gap:0!important;justify-content:center!important}
  html #kgh .nav .menu>li>a:not(#_),html #kgh .nav .menu>li>a em:not(#_){font-size:12px!important;white-space:nowrap!important}
  html #kgh .nav .menu>li>a:not(#_){padding-left:3px!important;padding-right:3px!important;min-height:0!important;border-bottom:0!important}
  html #kgh .nav .menu>li>a::after{display:none!important}
}
/* Phones: one 16px page edge for header, breadcrumb, content and footer. */
@media (max-width:680px){:root{--m-pad:16px}}
/* Grid children must be allowed to shrink, or product cards stretch rows far beyond small screens. */
html body :is(.pcat-row,.nm-row):not(#_)>*{min-width:0!important}
/* Row photos: cap the height next to long product lists and keep the photo in view while scrolling. */
@media (min-width:981px){
  html body :is(.pcat-row,.nm-row):not(#_)>:is(.pcat-media,.nm-media):not(#_){max-height:560px!important;position:sticky!important;top:100px!important}
}
/* Hub and category templates keep their offset below the fixed header. main#kgm's zero margin is only for product detail pages, whose breadcrumb carries its own 88px padding. */
html body.demo251-body>main#kgm:is(.product-category-main,:has(>.kgm-inner),:has(>#kg)):not(:has(#sectionIdhuy4658)){margin-top:80px!important}
html body.demo251-body>main#kgm:is(:has(>.kgm-inner),:has(>#kg)):has(.phero,>.kgm-inner>.hero):not(:has(#sectionIdhuy4658)){margin-top:72px!important}
@media (max-width:767px){
  html body.demo251-body>main#kgm:is(.product-category-main,:has(>.kgm-inner),:has(>#kg)):not(:has(#sectionIdhuy4658)){margin-top:64px!important}
}
@media (max-width:680px){
  html body.demo251-body>main#kgm:is(:has(>.kgm-inner),:has(>#kg)):has(.phero,>.kgm-inner>.hero):not(:has(#sectionIdhuy4658)){margin-top:62px!important}
}
/* Dropdowns read as a menu panel: grey surface, slightly narrower than the 1440px page, centred on wide screens. */
@media (min-width:681px){
  html #kgh .nav .menu>li>ul:not(#_){background:var(--color-surface,#f5f6f3)!important;border:1px solid #dfe3e8!important;border-radius:4px!important;box-shadow:0 12px 28px rgba(22,24,29,.12)!important}
}
@media (min-width:1151px){
  html #kgh .nav .menu li ul.kgh-mega:not(#_),html #kgh .nav .menu li ul.kgh-mega.kgh-mega-3:not(#_){left:0!important;right:0!important;width:calc(100% - 48px)!important;max-width:1392px!important;margin:0 auto!important;padding:28px 40px!important}
}