/* ============================================================
   Fluidtech — Webshop Design System
   Grounded in the existing brand: crimson red, condensed
   bold headers (Oswald), clean white layout, gray body text.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root{
  --brand:        #A92037;   /* primary crimson (from logo plate) */
  --brand-dark:   #8a1a2d;
  --brand-darker: #6f1424;
  --ink:          #1d1d1f;
  --ink-soft:     #3a3a3c;
  --muted:        #6a6a70;
  --muted-2:      #8c8c92;
  --line:         #e4e4e7;
  --line-soft:    #eeeef0;
  --bg:           #ffffff;
  --bg-alt:       #f6f6f7;
  --bg-alt-2:     #f0f0f2;
  --shadow-sm:    0 1px 3px rgba(20,20,25,.08);
  --shadow-md:    0 6px 22px rgba(20,20,25,.10);
  --shadow-lg:    0 16px 48px rgba(20,20,25,.16);
  --head: 'Oswald', system-ui, sans-serif;
  --body: 'Open Sans', system-ui, sans-serif;
  --maxw: 1200px;
  --header-h: 78px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink-soft);
  background:var(--bg);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4,h5{
  font-family:var(--head);
  color:var(--ink);
  font-weight:600;
  line-height:1.08;
  margin:0;
  letter-spacing:.01em;
}
.h-eyebrow{
  font-family:var(--head); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--brand); font-size:13px;
}
.section-title{
  font-size:34px; text-transform:uppercase; letter-spacing:.02em;
  font-weight:600; color:var(--ink);
}
.lead{ color:var(--muted); font-size:17px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ padding:72px 0; }
.section--alt{ background:var(--bg-alt); }
.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--head); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:14px; white-space:nowrap;
  padding:13px 24px; border:none; border-radius:3px;
  background:var(--brand); color:#fff; transition:background .16s ease, transform .16s ease;
}
.btn:hover{ background:var(--brand-dark); }
.btn:active{ transform:translateY(1px); }
.btn .chev{ display:inline-flex; }
.btn--ghost{ background:transparent; color:var(--brand); border:1.5px solid var(--brand); }
.btn--ghost:hover{ background:var(--brand); color:#fff; }
.btn--dark{ background:var(--ink); }
.btn--dark:hover{ background:#000; }
.btn--lg{ padding:16px 30px; font-size:15px; }
.btn--block{ width:100%; justify-content:center; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:200; background:#fff;
  border-bottom:1px solid var(--line);
}
.header-bar{
  height:var(--header-h);
  display:flex; align-items:center; gap:20px;
  max-width:1340px; margin:0 auto; padding:0 28px;
}
.hamburger{
  width:52px; height:50px; flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:4px; background:#fff;
}
.hamburger span{ width:24px; height:2.5px; background:var(--brand); border-radius:2px; }
.brand-logo img{ height:42px; width:auto; border-radius:5px; }
.header-search{
  flex:1 1 auto; display:flex; max-width:640px; min-width:0;
}
.header-search input{
  flex:1; min-width:0; border:1px solid var(--line); border-right:none;
  border-radius:4px 0 0 4px; padding:0 18px; height:48px;
  font-family:var(--body); font-size:15px; color:var(--ink); background:#fff;
}
.header-search input::placeholder{ color:var(--muted-2); }
.header-search input:focus{ outline:none; border-color:var(--brand); }
.header-search button{
  width:60px; border:none; background:var(--brand); color:#fff;
  border-radius:0 4px 4px 0; display:grid; place-items:center;
}
.header-search button:hover{ background:var(--brand-dark); }
.header-actions{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.lang-switch{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:7px; background:none; border:none;
  color:var(--ink-soft); font-family:var(--body); font-size:15px; padding:8px 4px;
}
.lang-btn b{ font-weight:600; }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); background:#fff;
  border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-md);
  min-width:170px; padding:6px; display:none;
}
.lang-menu.open{ display:block; }
.lang-menu button{
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:9px 12px; border-radius:4px; font-size:14px; color:var(--ink-soft);
}
.lang-menu button:hover{ background:var(--bg-alt); }
.icon-btn{
  position:relative; background:none; border:none; color:var(--brand);
  display:grid; place-items:center; padding:6px;
}
.icon-btn:hover{ color:var(--brand-dark); }
.cart-count{
  position:absolute; top:-4px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  background:var(--ink); color:#fff; border-radius:9px; font-family:var(--body);
  font-size:11px; font-weight:700; display:grid; place-items:center; line-height:1;
}
.cart-count[data-empty="true"]{ display:none; }

/* ---------- Primary nav ---------- */
.primary-nav{ border-bottom:1px solid var(--line); background:#fff; position:relative; }
.nav-inner{ max-width:1340px; margin:0 auto; padding:0 28px; display:flex; gap:6px; }
.nav-link{
  font-family:var(--head); font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  font-size:16px; color:var(--muted); padding:18px 22px; position:relative; white-space:nowrap;
  border-bottom:3px solid transparent; transition:color .15s;
  display:inline-flex; align-items:center; gap:8px; background:none; border-top:none; border-left:none; border-right:none;
}
.nav-link:hover{ color:var(--ink); }
.nav-link[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--brand); }
.nav-link.has-mega[aria-expanded="true"]{
  color:var(--ink); background:#fff; border-bottom-color:transparent;
  box-shadow:0 -1px 0 var(--line), -1px 0 0 var(--line), 1px 0 0 var(--line);
  z-index:181;
}

/* ---------- Mega menu ---------- */
.mega{
  position:absolute; left:0; right:0; top:100%; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
  z-index:180; display:none;
}
.mega.open{ display:block; }
.mega-inner{
  max-width:1340px; margin:0 auto; padding:40px 28px 48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:36px;
}
.mega-col h4{
  font-size:18px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink);
  padding-bottom:14px; margin-bottom:10px; border-bottom:2px solid var(--line); font-weight:600;
}
.mega-col ul{ list-style:none; margin:0; padding:0; }
.mega-col li a{
  display:flex; gap:8px; padding:7px 0; color:var(--ink-soft); font-size:14.5px; line-height:1.4;
  transition:color .12s, transform .12s;
}
.mega-col li a:hover{ color:var(--brand); transform:translateX(2px); }
.mega-col li a .arr{ color:var(--brand); font-weight:700; flex:0 0 auto; }
.mega-overlay{
  position:fixed; inset:var(--header-h) 0 0 0; background:rgba(20,20,25,.28);
  z-index:170; display:none;
}
.mega-overlay.open{ display:block; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; }
.hero .ph{ height:clamp(360px,46vw,560px); }
.hero-band{ background:var(--bg-alt); }

/* ============================================================
   PLACEHOLDER blocks (tasteful, labeled)
   ============================================================ */
.ph{
  position:relative; background:
    linear-gradient(135deg, #3a4047 0%, #2a2f35 55%, #20242a 100%);
  display:grid; place-items:center; overflow:hidden; color:#fff;
}
.ph::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 22px),
    radial-gradient(circle at 30% 20%, rgba(169,32,55,.35), transparent 45%);
}
.ph-label{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:13px;
  color:rgba(255,255,255,.82); text-align:center; padding:16px;
}
.ph-label svg{ opacity:.7; }
.ph--light{ background:linear-gradient(135deg,#e9ebee,#dfe2e6 60%,#d6d9de); }
.ph--light .ph-label{ color:var(--muted); }
.ph--light::before{ opacity:.6; background-image:
    repeating-linear-gradient(45deg, rgba(20,20,25,.04) 0 2px, transparent 2px 22px),
    radial-gradient(circle at 30% 20%, rgba(169,32,55,.10), transparent 45%); }
.ratio-4-3{ aspect-ratio:4/3; }
.ratio-16-9{ aspect-ratio:16/9; }
.ratio-1-1{ aspect-ratio:1/1; }
.ratio-3-2{ aspect-ratio:3/2; }

/* ============================================================
   HOME — industry grid
   ============================================================ */
.industry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.industry-card .ph{ box-shadow:var(--shadow-md); border-radius:2px; }
.industry-card h3{
  font-size:21px; text-transform:uppercase; letter-spacing:.02em; margin:20px 0 12px; font-weight:600;
}
.industry-card ul{ list-style:none; padding:0; margin:0; }
.industry-card li{
  position:relative; padding-left:18px; color:var(--muted); font-size:15px; margin-bottom:7px; line-height:1.45;
}
.industry-card li::before{
  content:""; position:absolute; left:0; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--brand);
}

/* ---------- feature trio ---------- */
.feature-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; text-align:center; }
.feature .ficon{
  width:60px; height:60px; margin:0 auto 18px; background:var(--brand);
  border-radius:6px; display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-sm);
}
.feature h3{ font-size:20px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.feature p{ color:var(--muted); font-size:15.5px; max-width:330px; margin:0 auto; }

/* ---------- supplier strip ---------- */
.supplier-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.supplier{
  height:96px; border:1px solid var(--line); border-radius:6px; background:#fff;
  display:grid; place-items:center; transition:box-shadow .16s, border-color .16s;
}
.supplier:hover{ box-shadow:var(--shadow-md); border-color:transparent; }
.supplier b{
  font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); font-size:18px;
}
.supplier span{ color:var(--brand); }

/* ============================================================
   PRODUCTS listing
   ============================================================ */
.crumbs{ font-size:13.5px; color:var(--muted); padding:18px 0; display:flex; gap:8px; align-items:center; }
.crumbs a:hover{ color:var(--brand); }
.crumbs .sep{ color:var(--muted-2); }
.page-head{ background:var(--bg-alt); border-bottom:1px solid var(--line); }
.page-head .wrap{ padding-top:34px; padding-bottom:34px; }
.page-head h1{ font-size:40px; text-transform:uppercase; }
.page-head p{ color:var(--muted); margin:10px 0 0; max-width:680px; }

.shop-layout{ display:grid; grid-template-columns:262px 1fr; gap:40px; align-items:start; }
.facet{ border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.facet h4{
  font-size:15px; text-transform:uppercase; letter-spacing:.05em; background:var(--bg-alt);
  padding:14px 16px; border-bottom:1px solid var(--line); font-weight:600;
}
.facet ul{ list-style:none; margin:0; padding:8px 0; }
.facet li label{
  display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:14.5px;
  color:var(--ink-soft); cursor:pointer;
}
.facet li label:hover{ color:var(--brand); }
.facet input[type=checkbox]{ accent-color:var(--brand); width:16px; height:16px; }
.facet .count{ margin-left:auto; color:var(--muted-2); font-size:13px; }

.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.shop-toolbar .result-n{ color:var(--muted); font-size:14.5px; }
.shop-toolbar select{
  border:1px solid var(--line); border-radius:5px; padding:9px 12px; font-family:var(--body);
  font-size:14px; color:var(--ink-soft); background:#fff;
}
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.product-card{
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s;
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.product-card .ph{ aspect-ratio:4/3; }
.product-card .pc-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.product-card .pc-brand{ font-family:var(--head); text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; color:var(--brand); margin-bottom:6px; }
.product-card h3{ font-size:18px; line-height:1.2; margin-bottom:6px; }
.product-card .pc-sku{ font-size:12.5px; color:var(--muted-2); margin-bottom:14px; }
.product-card .pc-price{ font-family:var(--head); font-weight:700; font-size:21px; color:var(--ink); margin-bottom:14px; }
.product-card .pc-price small{ font-family:var(--body); font-weight:400; font-size:11px; color:var(--muted-2); display:block; letter-spacing:0; }
.product-card .pc-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-card .pc-stock{ font-size:12.5px; color:#1d7a44; display:flex; align-items:center; gap:6px; font-weight:600; }
.product-card .pc-stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:#1d9a52; }
.btn-add{
  display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff; border:none;
  border-radius:4px; padding:10px 14px; font-family:var(--head); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:12.5px; transition:background .15s;
}
.btn-add:hover{ background:var(--brand-dark); }
.btn-add.added{ background:#1d7a44; }

/* category tiles (products landing) */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.cat-tile{
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff;
  transition:box-shadow .18s, transform .18s, border-color .18s; display:block;
}
.cat-tile:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.cat-tile .ph{ aspect-ratio:16/10; }
.cat-tile .ct-body{ padding:18px 20px 22px; }
.cat-tile h3{ font-size:19px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px; }
.cat-tile p{ color:var(--muted); font-size:14px; margin:0; }
.cat-tile .ct-link{ color:var(--brand); font-family:var(--head); font-weight:600; text-transform:uppercase; font-size:12.5px; letter-spacing:.05em; margin-top:14px; display:inline-flex; gap:6px; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp{ display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:start; }
.pdp-gallery .ph{ aspect-ratio:4/3; border-radius:10px; }
.pdp-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.pdp-thumbs .ph{ aspect-ratio:1/1; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.pdp-thumbs .ph.active{ border-color:var(--brand); }
.pdp-brand{ font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; color:var(--brand); font-size:13px; font-weight:600; }
.pdp h1{ font-size:34px; margin:8px 0 10px; line-height:1.1; }
.pdp .pdp-sku{ color:var(--muted-2); font-size:14px; margin-bottom:18px; }
.pdp-price{ font-family:var(--head); font-weight:700; font-size:32px; color:var(--ink); line-height:1; margin-bottom:4px; }
.pdp-price-note{ font-size:12.5px; color:var(--muted-2); margin-bottom:20px; }
.pdp-desc{ color:var(--muted); font-size:16px; margin-bottom:22px; }
.pdp-specs{ list-style:none; margin:0 0 26px; padding:0; border-top:1px solid var(--line); }
.pdp-specs li{ display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.pdp-specs li span:first-child{ color:var(--muted); }
.pdp-specs li span:last-child{ color:var(--ink); font-weight:600; text-align:right; white-space:nowrap; }
.pdp-buybar{ display:flex; align-items:stretch; gap:14px; margin-bottom:18px; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.qty button{ width:46px; height:50px; background:var(--bg-alt); border:none; font-size:20px; color:var(--ink-soft); }
.qty button:hover{ background:var(--bg-alt-2); }
.qty input{ width:54px; height:50px; border:none; text-align:center; font-family:var(--body); font-size:16px; font-weight:600; color:var(--ink); }
.qty input:focus{ outline:none; }
.pdp-stock{ display:flex; align-items:center; gap:8px; color:#1d7a44; font-size:14px; font-weight:600; margin-bottom:24px; }
.pdp-stock::before{ content:""; width:9px; height:9px; border-radius:50%; background:#1d9a52; }

/* tabs */
.tabs{ border-top:1px solid var(--line); margin-top:8px; }
.tab-list{ display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tab-list button{
  font-family:var(--head); font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  font-size:16px; color:var(--muted); padding:18px 26px; background:none; border:none;
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.tab-list button:hover{ color:var(--ink); }
.tab-list button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--brand); }
.tab-panel{ display:none; padding:34px 0; }
.tab-panel.active{ display:block; }
.tab-panel h3{ font-size:22px; text-transform:uppercase; margin-bottom:14px; }
.tab-panel p{ color:var(--muted); margin:0 0 16px; }
.tab-panel ul{ color:var(--muted); padding-left:20px; }
.tab-panel li{ margin-bottom:8px; }

/* inline PDF viewer (product tabs) */
.pdf-embed{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; max-width:100%; }
.pdf-bar{ display:flex; align-items:center; gap:14px; background:#2a2f35; color:#e8e9ec; padding:11px 16px; font-size:13px; }
.pdf-bar .pdf-file{ display:flex; align-items:center; gap:9px; font-weight:600; }
.pdf-bar .pdf-file svg{ color:#ff7a8a; }
.pdf-bar .pdf-pages{ color:#aeb2b9; font-size:12.5px; }
.pdf-bar .pdf-tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.pdf-bar .pdf-tool{ background:rgba(255,255,255,.08); border:none; color:#e8e9ec; width:30px; height:30px; border-radius:5px; display:grid; place-items:center; }
.pdf-bar .pdf-tool:hover{ background:rgba(255,255,255,.18); }
.pdf-bar .pdf-dl{ background:var(--brand); color:#fff; border:none; border-radius:5px; padding:7px 13px; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; display:inline-flex; align-items:center; gap:7px; }
.pdf-bar .pdf-dl:hover{ background:var(--brand-dark); }
.pdf-viewport{ background:#54585e; padding:30px; max-height:560px; overflow-y:auto; }
.pdf-doc{ width:100%; max-width:680px; margin:0 auto; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.3); padding:56px 60px; }
.pdf-doc + .pdf-doc{ margin-top:26px; }
.pdf-doc .pd-eyebrow{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; color:var(--brand); font-size:11px; font-weight:600; }
.pdf-doc h2{ font-size:24px; text-transform:uppercase; margin:8px 0 18px; }
.pdf-doc h4{ font-size:15px; text-transform:uppercase; letter-spacing:.03em; margin:24px 0 10px; }
.pdf-doc p{ color:#4a4a4f; font-size:14px; line-height:1.7; margin:0 0 14px; }
.pdf-doc ul{ color:#4a4a4f; font-size:14px; line-height:1.7; padding-left:20px; margin:0 0 14px; }
.pdf-doc li{ margin-bottom:6px; }
.pdf-doc .pd-rule{ height:1px; background:var(--line); margin:22px 0; }
.pdf-doc .pd-specs{ width:100%; border-collapse:collapse; font-size:13.5px; }
.pdf-doc .pd-specs td{ padding:9px 0; border-bottom:1px solid var(--line-soft); color:#4a4a4f; }
.pdf-doc .pd-specs td:last-child{ text-align:right; font-weight:600; color:var(--ink); }
.pdf-doc .pd-foot{ margin-top:34px; padding-top:16px; border-top:2px solid var(--ink); display:flex; justify-content:space-between; font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; font-family:var(--head); }

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-overlay{ position:fixed; inset:0; background:rgba(20,20,25,.4); z-index:300; opacity:0; pointer-events:none; transition:opacity .25s; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:#fff; z-index:301;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-size:20px; text-transform:uppercase; letter-spacing:.04em; }
.cart-head .x{ background:none; border:none; font-size:26px; color:var(--muted); line-height:1; }
.cart-head .x:hover{ color:var(--ink); }
.cart-items{ flex:1; overflow-y:auto; padding:8px 24px; }
.cart-empty{ text-align:center; color:var(--muted); padding:60px 20px; }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--line-soft); align-items:start; }
.cart-item .ph{ width:64px; height:64px; border-radius:6px; }
.cart-item .ci-name{ font-weight:600; color:var(--ink); font-size:14.5px; line-height:1.3; }
.cart-item .ci-brand{ color:var(--brand); font-family:var(--head); text-transform:uppercase; font-size:10.5px; letter-spacing:.08em; margin-bottom:3px; }
.cart-item .ci-meta{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.cart-item .ci-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:4px; }
.cart-item .ci-qty button{ width:28px; height:28px; background:none; border:none; color:var(--muted); font-size:15px; }
.cart-item .ci-qty span{ width:30px; text-align:center; font-size:13px; font-weight:600; }
.cart-item .ci-remove{ background:none; border:none; color:var(--muted-2); font-size:12px; text-decoration:underline; }
.cart-item .ci-remove:hover{ color:var(--brand); }
.cart-item .ci-price{ font-family:var(--head); font-weight:600; color:var(--ink); font-size:15px; white-space:nowrap; }
.cart-foot{ border-top:1px solid var(--line); padding:22px 24px; }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.cart-total span{ color:var(--muted); }
.cart-total b{ font-family:var(--head); font-size:26px; color:var(--ink); }
.cart-note{ font-size:12px; color:var(--muted-2); text-align:center; margin-top:10px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#fff; border-top:1px solid var(--line); padding-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:46px; }
.footer-col h4{ font-size:16px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; color:var(--ink); }
.footer-contact p{ margin:0 0 8px; color:var(--muted); font-size:14.5px; }
.footer-contact a:hover{ color:var(--brand); }
.footer-nav{ display:grid; grid-template-columns:1fr 1fr; gap:6px 28px; }
.footer-nav a{ color:var(--muted); font-size:14.5px; padding:5px 0; }
.footer-nav a:hover{ color:var(--brand); }
.footer-news p{ color:var(--muted); font-size:14.5px; margin:0 0 16px; }
.news-form{ display:flex; }
.news-form input{ flex:1; min-width:0; border:1px solid var(--line); border-right:none; border-radius:4px 0 0 4px; padding:0 16px; height:48px; font-family:var(--body); font-size:14px; }
.news-form input:focus{ outline:none; border-color:var(--brand); }
.news-form button{ border-radius:0 4px 4px 0; }
.news-ok{ color:#1d7a44; font-size:13.5px; margin-top:10px; display:none; }
.news-ok.show{ display:block; }
.footer-logo img{ height:40px; border-radius:5px; margin-bottom:18px; }
.footer-tag{ color:var(--muted); font-size:14px; max-width:320px; }
.footer-bottom{ border-top:1px solid var(--line); padding:22px 0; display:flex; align-items:center; justify-content:space-between; }
.footer-bottom p{ margin:0; color:var(--muted-2); font-size:13.5px; }
.footer-bottom nav{ display:flex; gap:22px; }
.footer-bottom nav a{ color:var(--muted-2); font-size:13.5px; }
.footer-bottom nav a:hover{ color:var(--brand); }
.back-top{
  position:fixed; right:26px; bottom:26px; width:46px; height:46px; border-radius:50%;
  background:var(--brand); color:#fff; border:none; display:grid; place-items:center; z-index:150;
  box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .2s, background .15s;
}
.back-top.show{ opacity:1; pointer-events:auto; }
.back-top:hover{ background:var(--brand-dark); }

/* ============================================================
   Misc page components
   ============================================================ */
.prose{ max-width:760px; }
.prose p{ color:var(--muted); margin:0 0 18px; }
.prose h2{ font-size:26px; text-transform:uppercase; margin:36px 0 14px; }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.stat{ text-align:center; padding:30px 20px; border:1px solid var(--line); border-radius:10px; }
.stat .num{ font-family:var(--head); font-weight:700; font-size:46px; color:var(--brand); line-height:1; }
.stat .lab{ text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--muted); margin-top:10px; font-family:var(--head); }

/* webtools */
.tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.tool-card{ border:1px solid var(--line); border-radius:10px; padding:30px 28px; background:#fff; transition:box-shadow .18s, transform .18s, border-color .18s; }
.tool-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.tool-card .ti{ width:54px; height:54px; border-radius:8px; background:var(--brand); display:grid; place-items:center; color:#fff; margin-bottom:18px; }
.tool-card h3{ font-size:20px; text-transform:uppercase; margin-bottom:10px; }
.tool-card p{ color:var(--muted); font-size:14.5px; margin:0 0 16px; }
.tool-card a.more{ color:var(--brand); font-family:var(--head); font-weight:600; text-transform:uppercase; font-size:12.5px; letter-spacing:.05em; display:inline-flex; gap:6px; }

/* webtools — folder PDFs */
.folder-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.folder-row{ display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:8px; padding:15px 18px; background:#fff; transition:box-shadow .16s, border-color .16s; }
.folder-row:hover{ box-shadow:var(--shadow-md); border-color:transparent; }
.folder-row .fr-ic{ width:42px; height:42px; border-radius:8px; background:rgba(169,32,55,.08); display:grid; place-items:center; color:var(--brand); flex:0 0 auto; }
.folder-row .fr-name{ font-weight:600; color:var(--ink); font-size:14.5px; line-height:1.3; }
.folder-row .fr-meta{ color:var(--muted-2); font-size:12px; }
.folder-row .fr-open{ margin-left:auto; color:var(--brand); display:grid; place-items:center; flex:0 0 auto; }
.folder-row:hover .fr-open{ transform:translateX(2px); }

/* webtools — software downloads */
.dl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dl-card{ border:1px solid var(--line); border-radius:10px; padding:28px 26px; background:#fff; display:flex; flex-direction:column; transition:box-shadow .16s, transform .16s, border-color .16s; }
.dl-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.dl-card .dl-ic{ width:50px; height:50px; border-radius:8px; background:var(--brand); display:grid; place-items:center; color:#fff; margin-bottom:18px; }
.dl-card h3{ font-size:18px; line-height:1.25; text-transform:none; margin-bottom:8px; }
.dl-card .dl-cat{ font-family:var(--head); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:var(--muted-2); margin-bottom:18px; }
.dl-card .dl-link{ margin-top:auto; align-self:flex-start; }

/* webtools — brand logo wall */
.brand-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; }
.brand-tile{ text-align:center; }
.brand-tile .bt-card{ background:#fff; border:1px solid var(--line-soft); box-shadow:var(--shadow-md); border-radius:3px; aspect-ratio:4/3; display:grid; place-items:center; padding:22px; transition:transform .16s, box-shadow .16s; }
.brand-tile a:hover .bt-card{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.brand-tile .bt-mark{ font-family:var(--head); font-weight:700; font-size:clamp(15px,2vw,21px); letter-spacing:.02em; color:var(--muted); text-transform:uppercase; line-height:1.1; text-wrap:balance; }
.brand-tile .bt-cap{ font-weight:700; color:var(--ink); font-size:14px; margin-top:14px; }

.download-list{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.download-row{ display:flex; align-items:center; gap:18px; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.download-row:last-child{ border-bottom:none; }
.download-row:hover{ background:var(--bg-alt); }
.download-row .dr-ic{ width:40px; height:40px; border-radius:6px; background:var(--bg-alt); display:grid; place-items:center; color:var(--brand); flex:0 0 auto; }
.download-row .dr-name{ font-weight:600; color:var(--ink); font-size:15px; }
.download-row .dr-meta{ color:var(--muted-2); font-size:12.5px; }
.download-row .dr-dl{ margin-left:auto; }

/* news */
.news-feature{ display:grid; grid-template-columns:1.2fr 1fr; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.news-feature .ph{ min-height:340px; }
.news-feature .nf-body{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.news-feature .nf-tag, .news-card .nc-tag{ font-family:var(--head); text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-size:12px; font-weight:600; }
.news-feature h2{ font-size:30px; text-transform:uppercase; margin:12px 0 14px; line-height:1.1; }
.news-feature p{ color:var(--muted); margin:0 0 22px; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.news-card{ display:flex; flex-direction:column; }
.news-card .ph{ aspect-ratio:16/10; border-radius:10px; }
.news-card .nc-date{ color:var(--muted-2); font-size:12.5px; margin:14px 0 6px; }
.news-card h3{ font-size:20px; text-transform:none; line-height:1.2; margin-bottom:8px; }
.news-card .nc-tag{ margin-top:14px; }
.news-card h3 a:hover{ color:var(--brand); }

/* contact */
.contact-layout{ display:grid; grid-template-columns:1fr 1.1fr; gap:54px; align-items:start; }
.contact-info .ci-block{ display:flex; gap:16px; margin-bottom:28px; }
.contact-info .ci-ic{ width:46px; height:46px; flex:0 0 auto; border-radius:8px; background:var(--brand); display:grid; place-items:center; color:#fff; }
.contact-info h4{ font-size:16px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.contact-info p{ color:var(--muted); margin:0; font-size:15px; }
.contact-info a:hover{ color:var(--brand); }
.form-card{ border:1px solid var(--line); border-radius:12px; padding:36px; background:#fff; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; text-transform:uppercase; letter-spacing:.04em; }
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); border-radius:5px; padding:12px 14px; font-family:var(--body);
  font-size:15px; color:var(--ink); background:#fff;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(169,32,55,.1); }
.field textarea{ min-height:130px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.map-ph{ height:300px; border-radius:12px; margin-top:30px; }
.form-ok{ background:#eef8f1; border:1px solid #bfe3cb; color:#1d7a44; border-radius:8px; padding:16px 18px; font-size:14.5px; margin-top:18px; display:none; }
.form-ok.show{ display:block; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:14px 22px; border-radius:8px; z-index:400;
  font-size:14.5px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  display:flex; align-items:center; gap:12px;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .t-ic{ color:#5fd08a; display:grid; place-items:center; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .industry-grid{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .mega-inner{ grid-template-columns:repeat(2,1fr); }
  .pdp, .contact-layout{ grid-template-columns:1fr; gap:34px; }
  .news-feature{ grid-template-columns:1fr; }
  .shop-layout{ grid-template-columns:1fr; }
  .product-grid, .cat-grid, .tool-grid{ grid-template-columns:repeat(2,1fr); }
  .dl-grid{ grid-template-columns:repeat(2,1fr); }
  .brand-grid{ grid-template-columns:repeat(3,1fr); }
  .folder-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .header-search{ display:none; }
  .feature-trio, .supplier-strip, .stat-row, .news-grid{ grid-template-columns:1fr; gap:30px; }
  .product-grid, .cat-grid, .tool-grid, .industry-grid{ grid-template-columns:1fr; }
  .dl-grid{ grid-template-columns:1fr; }
  .brand-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .nav-inner{ overflow-x:auto; }
  .field-row{ grid-template-columns:1fr; }
  .section-title{ font-size:27px; }
}