/* ==================================================================
   KingKrete UI kit on www.kingkrete.com (Batch W, Kashif 12 Oct 2026).
   The same look as SpecWorld (specify.kingkrete.com/ui-kit.php): square corners, one red accent,
   red capital labels with no boxes, the same buttons. Loaded after style.css and systems3.css.
   The KingKrete City styles (city-1.css) are the reference and are not changed.
   ================================================================== */

/* ---------- labels: red capitals, no boxes, no lines ---------- */
.section-eyebrow{gap:0;font-size:12px;font-weight:800;letter-spacing:.09em;margin-bottom:10px}
.section-eyebrow::before{display:none}
.hero-badge{padding:0;background:none;border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;font-size:12px;font-weight:800;letter-spacing:.09em;gap:9px}
.hero-badge::before{width:8px;height:8px;border-radius:0;animation:none}
.hubtag,.sys-badge,.pdp-gband{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red);background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.pdp-gband i{display:none}
.type-tile .tt-kicker{border-radius:0}

/* ---------- buttons: the kit buttons ---------- */
.btn,.btn-pill{border-radius:0;min-height:44px;padding:0 20px;font-size:15px;font-weight:700;justify-content:center;letter-spacing:0}
.btn-primary{border-color:var(--red)}
.btn-primary:hover{background:var(--red-strong);border-color:var(--red-strong);transform:none;box-shadow:none}
.btn-secondary{background:#fff;color:var(--black);border-color:var(--black)}
.btn-secondary:hover{background:var(--black);color:#fff;border-color:var(--black)}
.btn-ghost{border-color:#fff}
.btn-login{border-radius:0;background:#fff;border:1.5px solid var(--black);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px;padding:10px 18px}
.btn-login:hover{background:var(--black);border-color:var(--black);color:#fff;box-shadow:none}
.pdp-btn{min-height:44px;padding:0 20px;font-size:15px;justify-content:center}
.pdp-btn.red:hover{filter:none;transform:none;background:var(--red-strong)}
.pdp-btn.line{border:1.5px solid var(--black);color:var(--black)}
.pdp-btn.line:hover{background:var(--black);border-color:var(--black);color:#fff}
.hero-search button{border-radius:0}

/* ---------- cards: no lift, a quiet border change (as in SpecWorld) ---------- */
.lib-gcard:hover,.lib-pcard:hover,.sys-card:hover,.hubcard:hover{transform:none}

/* ---------- the page header and hero (as SpecWorld and KingKrete City) ---------- */
:root{--k-red:#E4181C;--k-ink:#1A1719;--k-grey:#656A6F;--k-grey-2:#969B9F;--k-line:#E2E4E7;--k-light:#F7F8F9}
.k-head{position:relative;background:var(--k-light);padding:30px 0 34px;box-shadow:0 0 0 100vmax var(--k-light),0 1px 0 100vmax var(--k-line);clip-path:inset(0 -100vmax -1px -100vmax)}
.k-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--k-grey);margin:0 0 22px}
.k-crumb a{color:var(--k-grey);text-decoration:none}.k-crumb a:hover{color:var(--k-red)}.k-crumb i{font-style:normal;color:var(--k-grey-2)}
.k-crumb>span{color:var(--k-ink);font-weight:600}
.k-kicker{display:block;font-size:13.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--k-red);margin:0 0 12px}
.k-h1{font-size:clamp(32px,3.2vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0 0 14px;color:var(--k-ink)}
.k-h1 em{font-style:normal;color:var(--k-red)}
.k-lead{font-size:17px;line-height:1.55;color:var(--k-grey);margin:0;max-width:62ch}
.k-hero{display:block;width:100%;aspect-ratio:3/1;background:var(--k-light) center/cover no-repeat;margin:34px 0 0}
.k-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- home: the words in the band, two photos at 3:1, the search under them ---------- */
.hm-head{display:grid}
.hm-head .hero-caption{grid-area:1/1;position:static;top:auto;opacity:0;visibility:hidden;transition:opacity .5s ease}
.hm-head .hero-caption.active{opacity:1;visibility:visible}
.hm-hero{position:relative;overflow:hidden}
.hm-hero .hero-slides{position:absolute;inset:0}
.hm-hero .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease;transform:none;animation:none}
.hm-hero .hero-slide.active{opacity:1}
.hm-hero .hero-dots{position:absolute;right:20px;bottom:18px;top:auto;transform:none;display:flex;flex-direction:row;gap:8px}
.hm-hero .hero-dot{width:26px;height:4px;border-radius:0;background:rgba(255,255,255,.55);border:0;padding:0}
.hm-hero .hero-dot.active{background:#fff}
.hm .hero-search{max-width:820px;margin:-34px auto 0;position:relative;z-index:2;border-radius:0}

/* ---------- library and product headers: the same light band and path ---------- */
.lib-head{background:var(--k-light);border-bottom:1px solid var(--k-line);padding:30px 0 34px}
.lib-head::before{display:none}
.lib-head .breadcrumb,.pdp-crumb{font-size:14px;color:var(--k-grey);gap:8px;margin-bottom:22px}
.lib-head .breadcrumb a,.pdp-crumb a{color:var(--k-grey)}.lib-head .breadcrumb a:hover,.pdp-crumb a:hover{color:var(--k-red)}
.lib-head .breadcrumb .sep,.pdp-crumb .sep{color:var(--k-grey-2)}
.lib-head .breadcrumb .current,.pdp-crumb .cur{color:var(--k-ink);font-weight:600}
.lib-head h1{font-size:clamp(32px,3.2vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.lib-sub{font-size:17px;max-width:62ch;margin-top:14px}
.pdp-head{background:var(--k-light)}
.pdp-head h1{font-size:clamp(32px,3.2vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:10px 0 12px}
.pdp-gband{margin-bottom:0}
.pdp-spec{flex:1 1 100%;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:13px 18px;margin-top:4px;
  border:1.5px solid var(--k-ink);background:#fff;color:var(--k-ink);font-size:15px;font-weight:700;text-decoration:none}
.pdp-spec small{font-size:13.5px;font-weight:400;color:var(--k-grey)}
.pdp-spec:hover{background:var(--k-ink);color:#fff}.pdp-spec:hover small{color:rgba(255,255,255,.75)}

@media(max-width:760px){
  .k-head{padding:22px 0 26px}
  .k-hero{aspect-ratio:16/9}            /* a 3:1 strip is too thin on a phone */
  .hm .hero-search{margin:-24px 0 0}
}

/* ---------- readable file badges, and nothing wider than a phone (Batch W) ---------- */
.lib-pthumb .tdsdot{font-size:10px}
.doc-card .dic{font-size:10px}
@media(max-width:760px){
  .hm .hero-search{margin:-24px 0 0;max-width:none;width:100%;box-sizing:border-box;padding-left:14px}
  .hm .hero-search input{min-width:0}
  .sys3d,.sys3d>div{min-width:0;max-width:100%;overflow:hidden}
  .csx-tools{min-width:0;max-width:100%;flex-wrap:wrap}.csx-tools input{min-width:0;width:100%}
}