/*
Theme Name: I K Electrical
Theme URI: https://ikelectrical.com
Author: I K Electrical
Description: Custom catalog theme for I K Electrical — manufacturer & exporter of motor and pump components. Built from the Concept A (Minimal Corporate) mockups.
Version: 1.0.0
Text Domain: ik-electrical
*/

:root{
  --ink:#161616;
  --ink-2:#3B3B3B;
  --gray-600:#6E6E6E;
  --gray-400:#A6A6A6;
  --gray-300:#D6D6D6;
  --gray-200:#E7E7E7;
  --gray-100:#F5F5F5;
  --white:#FFFFFF;
  --brand:#7A1F45;
  --brand-dark:#54142F;
  --brand-tint:#F7ECF0;
  --green:#1E7A4C;
  --display:'Inter', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); background:var(--white); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; opacity:0; animation:ike-page-in .45s ease forwards;}
a{color:inherit; text-decoration:none; transition:color .15s ease;}
img{max-width:100%; display:block;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
@media (max-width:700px){ .wrap{padding:0 20px;} }

/* ---------- motion ---------- */
@keyframes ike-page-in{from{opacity:0;} to{opacity:1;}}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  body{opacity:1; animation:none;}
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- utility bar ---------- */
.utility-bar{background:var(--gray-100); border-bottom:1px solid var(--gray-200); font-size:12.5px; color:var(--gray-600);}
.utility-bar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 32px; flex-wrap:wrap; gap:6px 24px;}
.utility-bar .u-right{display:flex; gap:22px;}
.utility-bar a:hover{color:var(--brand);}
@media (max-width:700px){ .utility-bar .u-right{display:none;} }

/* ---------- nav ---------- */
.nav{background:var(--white); border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:50;}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:100px;}
.logo{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; color:var(--ink);}
.logo .mark{width:32px; height:32px; border-radius:6px; background:var(--brand); color:var(--white); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;}
.logo-img{height:80px; width:auto; display:block;}
nav.links{display:flex; align-items:center;}
nav.links ul{display:flex; align-items:center; gap:34px; list-style:none;}
nav.links li{list-style:none;}

/* ---------- mega menu ---------- */
.has-mega-menu{position:relative;}
.mega-menu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); width:min(680px, 90vw); background:var(--white); border:1px solid var(--gray-200); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.12); padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:60;}
.has-mega-menu:hover .mega-menu,
.has-mega-menu:focus-within .mega-menu{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.mega-menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.mega-menu-item{display:flex; flex-direction:column; gap:10px; border-radius:8px; padding:8px; transition:background .15s ease;}
.mega-menu-item:hover{background:var(--gray-100);}
.mega-menu-thumb{width:100%; aspect-ratio:1.3/1; background:var(--gray-100); border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.mega-menu-thumb img{width:100%; height:100%; object-fit:cover;}
.mega-menu-thumb svg{width:40%; stroke:var(--ink-2);}
.mega-menu-label{font-size:13.5px; font-weight:600; color:var(--ink);}
.mega-menu-viewall{display:block; margin-top:18px; padding-top:16px; border-top:1px solid var(--gray-200); font-size:13px; font-weight:600; color:var(--brand); text-align:center;}
@media (prefers-reduced-motion:reduce){ .mega-menu{transition:none;} }
@media (max-width:900px){ .mega-menu{display:none;} }
nav.links a{font-size:14.5px; font-weight:500; color:var(--ink-2);}
nav.links a:hover, nav.links a.current, nav.links li.current-menu-item > a{color:var(--brand);}
@media (max-width:900px){ nav.links{display:none;} }
.btn{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:12px 22px; border-radius:6px; border:1px solid transparent; white-space:nowrap; cursor:pointer; background:none; font-family:var(--display);}
.btn-solid{background:var(--brand); color:var(--white);}
.btn-solid:hover{background:var(--brand-dark);}
.btn-outline{border-color:var(--gray-300); color:var(--ink); background:var(--white);}
.btn-outline:hover{border-color:var(--ink);}
.mobile-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0;}
@media (max-width:900px){
  .mobile-toggle{display:flex;}
  .nav-cta{display:none;}
}
.search-toggle{background:none; border:none; cursor:pointer; padding:6px; display:flex; align-items:center; flex-shrink:0;}
.search-toggle:hover svg{stroke:var(--brand);}

/* ---------- search modal ---------- */
.search-modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:80;}
.search-modal-backdrop.open{opacity:1; visibility:visible;}
.search-modal{position:fixed; top:0; left:0; right:0; background:var(--white); z-index:81; opacity:0; visibility:hidden; transform:translateY(-16px); transition:opacity .25s ease, transform .25s ease, visibility .25s ease; box-shadow:0 12px 32px rgba(0,0,0,.15); max-height:85vh; overflow-y:auto;}
.search-modal.open{opacity:1; visibility:visible; transform:translateY(0);}
.search-modal-inner{padding-top:28px; padding-bottom:28px; max-width:720px;}
.search-modal-form{display:flex; align-items:center; gap:12px; border:1.5px solid var(--gray-300); border-radius:8px; padding:14px 18px;}
.search-modal-form:focus-within{border-color:var(--brand);}
.search-modal-form svg{flex-shrink:0;}
.search-modal-form input{flex:1; border:none; outline:none; font-size:16px; font-family:var(--display); color:var(--ink); background:none;}
.search-modal-close{background:none; border:none; cursor:pointer; padding:4px; flex-shrink:0;}
.search-modal-hint{color:var(--gray-400); font-size:13px; margin-top:14px;}
.search-modal-results{margin-top:12px; display:flex; flex-direction:column; gap:2px;}
.search-result-item{display:flex; align-items:center; gap:14px; padding:10px 8px; border-radius:8px; transition:background .15s ease;}
.search-result-item:hover{background:var(--gray-100);}
.search-result-thumb{width:44px; height:44px; border-radius:6px; background:var(--gray-100); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.search-result-thumb img{width:100%; height:100%; object-fit:cover;}
.search-result-thumb svg{width:50%; stroke:var(--ink-2);}
.search-result-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.search-result-title{font-size:14.5px; font-weight:600; color:var(--ink);}
.search-result-meta{font-size:12.5px; color:var(--gray-600);}
.search-view-all{display:block; text-align:center; padding:14px; font-size:13.5px; font-weight:600; color:var(--brand); border-top:1px solid var(--gray-200); margin-top:8px;}
.search-no-results{padding:20px 8px; color:var(--gray-600); font-size:14px;}
@media (prefers-reduced-motion:reduce){ .search-modal, .search-modal-backdrop{transition:none;} }

/* ---------- search results page ---------- */
.search-refine-form{display:flex; gap:12px; margin-bottom:40px; max-width:600px;}
.search-refine-form input{flex:1; border:1px solid var(--gray-300); border-radius:6px; padding:12px 16px; font-family:var(--display); font-size:14.5px; color:var(--ink);}
.search-refine-form input:focus{outline:none; border-color:var(--brand);}
.search-pages-list{display:flex; flex-direction:column; gap:8px; margin-bottom:32px;}
.search-page-item{display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--gray-200); border-radius:8px; transition:border-color .15s ease;}
.search-page-item:hover{border-color:var(--ink);}
.search-page-tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); background:var(--brand-tint); border-radius:100px; padding:3px 10px; flex-shrink:0;}
.search-page-title{font-size:14.5px; font-weight:600; color:var(--ink);}

/* ---------- mobile off-canvas menu ---------- */
.mobile-menu-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:70;}
.mobile-menu-backdrop.open{opacity:1; visibility:visible;}
.mobile-menu{position:fixed; top:0; right:0; height:100%; width:82%; max-width:340px; background:var(--white); z-index:71; display:flex; flex-direction:column; padding:20px 24px; gap:4px; transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); box-shadow:-8px 0 24px rgba(0,0,0,.12); overflow-y:auto;}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; margin-bottom:10px; border-bottom:1px solid var(--gray-200);}
.mobile-menu-head .logo-mini{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.01em;}
.mobile-close{background:none; border:none; cursor:pointer; padding:4px;}
.mobile-menu a{padding:14px 0; font-size:16px; font-weight:500; border-bottom:1px solid var(--gray-100);}
.mobile-menu-cta{justify-content:center; margin-top:20px; width:100%;}
@media (prefers-reduced-motion:reduce){ .mobile-menu, .mobile-menu-backdrop{transition:none;} }

/* ---------- hero ---------- */
.hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-top:88px; padding-bottom:88px;}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr; padding-top:56px; padding-bottom:56px; gap:40px;} }
.eyebrow{font-size:13px; font-weight:600; color:var(--brand); letter-spacing:.02em; margin-bottom:18px; display:flex; align-items:center; gap:8px;}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(36px,4.6vw,54px); line-height:1.08; letter-spacing:-.02em; color:var(--ink); margin-bottom:22px;}
.hero h1 span{color:var(--brand);}
.hero p.lead{font-size:17px; color:var(--gray-600); max-width:460px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
.hero-meta{display:flex; gap:32px; font-size:13.5px; color:var(--gray-600); flex-wrap:wrap; border-top:1px solid var(--gray-200); padding-top:24px;}
.hero-meta b{color:var(--ink); font-weight:700; display:block; font-size:16px; margin-bottom:2px;}

.tech-fig{position:relative; background:var(--gray-100); border-radius:16px; aspect-ratio:1/0.92; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.tech-fig .tag{position:absolute; bottom:20px; left:20px; font-family:var(--mono); font-size:11px; color:var(--gray-400);}
.tech-fig svg{width:56%; height:56%;}
.tech-fig-img{width:100%; height:100%; object-fit:cover;}

/* ---------- stats ---------- */
.stats{background:var(--gray-100); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200);}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media (max-width:700px){ .stats .wrap{grid-template-columns:repeat(2,1fr);} }
.stat{padding:36px 24px; border-left:1px solid var(--gray-200);}
.stat:first-child{border-left:none;}
@media (max-width:700px){ .stat:nth-child(2n+1){border-left:none;} .stat{border-top:1px solid var(--gray-200);} .stat:nth-child(-n+2){border-top:none;} }
.stat .num{font-family:var(--display); font-size:32px; font-weight:800; color:var(--ink); line-height:1;}
.stat .label{font-size:13px; color:var(--gray-600); margin-top:8px;}

/* ---------- section heading ---------- */
.section{padding:96px 0;}
@media (max-width:700px){ .section{padding:60px 0;} }
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:48px; flex-wrap:wrap;}
.sec-tag{font-size:13px; font-weight:600; color:var(--brand); margin-bottom:10px;}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:clamp(26px,3.2vw,36px); letter-spacing:-.02em; color:var(--ink);}
.sec-head p{color:var(--gray-600); max-width:360px; font-size:14.5px;}

/* ---------- capability cards ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:800px){ .cap-grid{grid-template-columns:1fr;} }
.cap-card{border:1px solid var(--gray-200); border-radius:12px; padding:32px 28px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.cap-card:hover{border-color:var(--ink); box-shadow:0 4px 16px rgba(0,0,0,.06); transform:translateY(-3px);}
.cap-card-img{width:100%; aspect-ratio:1.6/1; border-radius:8px; overflow:hidden; margin-bottom:20px;}
.cap-card-img img{width:100%; height:100%; object-fit:cover;}
.cap-card .idx{width:36px; height:36px; border-radius:8px; background:var(--brand-tint); color:var(--brand); font-family:var(--mono); font-size:12px; font-weight:500; display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.cap-card h3{font-family:var(--display); font-weight:700; font-size:20px; margin-bottom:10px; letter-spacing:-.01em;}
.cap-card p{font-size:14.5px; color:var(--gray-600);}

/* ---------- product categories ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:500px){ .cat-grid{grid-template-columns:1fr;} }

.major-products-grid{grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){ .major-products-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .major-products-grid{grid-template-columns:1fr;} }
.major-products-grid .icon-box{aspect-ratio:1.2/1; position:relative;}
.major-product-summary{font-size:13.5px; line-height:1.5; margin-top:2px;}
.placeholder-badge-sm{position:absolute; top:10px; left:10px; z-index:2; background:#B3273F; color:var(--white); font-size:10px; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:100px; text-transform:uppercase;}
.cat-card{border:1px solid var(--gray-200); border-radius:12px; background:var(--white); padding:22px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.cat-card:hover{border-color:var(--ink); box-shadow:0 4px 16px rgba(0,0,0,.06); transform:translateY(-3px);}
.cat-card .icon-box{width:100%; aspect-ratio:1.4/1; background:var(--gray-100); border-radius:8px; margin:0 0 16px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cat-card .icon-box img{width:100%; height:100%; object-fit:cover;}
.cat-card .icon-box svg{width:42%; stroke:var(--ink-2);}
.cat-card h3{font-family:var(--display); font-weight:700; font-size:16.5px; margin-bottom:4px; letter-spacing:-.01em;}
.cat-card .count{font-size:12.5px; color:var(--gray-600);}

/* ---------- about split ---------- */
.about{background:var(--gray-100);}
.about .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;}
@media (max-width:900px){ .about .wrap{grid-template-columns:1fr;} }
.about-figure{border:1px solid var(--gray-200); background:var(--white); border-radius:12px; padding:8px 28px;}
.about-figure .row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:14px; padding:15px 0; border-bottom:1px solid var(--gray-200); color:var(--gray-600);}
.about-figure .row:last-child{border-bottom:none;}
.about-figure .row b{color:var(--ink); font-weight:600; text-align:right;}
@media (max-width:520px){
  .about-figure .row{flex-direction:column; align-items:flex-start; gap:4px;}
  .about-figure .row b{text-align:left;}
}
.about-copy h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; margin-bottom:20px;}
.about-copy p{color:var(--gray-600); font-size:15.5px; margin-bottom:18px; max-width:520px;}

.about-story-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
@media (max-width:900px){ .about-story-grid{grid-template-columns:1fr; gap:32px;} }
.about-story-img{border-radius:12px; overflow:hidden; aspect-ratio:4/3;}
.about-story-img img{width:100%; height:100%; object-fit:cover; display:block;}
.cert-row{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}
.cert-pill{font-size:13px; font-weight:500; border:1px solid var(--gray-300); border-radius:100px; padding:8px 14px; display:flex; align-items:center; gap:7px; background:var(--white);}
.cert-pill .dot{width:6px; height:6px; background:var(--green); border-radius:50%;}

/* ---------- global reach ---------- */
.reach{background:var(--ink); color:var(--white);}
.reach .sec-tag{color:#D9A9BE;}
.reach .sec-head p{color:#A0A0A0;}
.reach .sec-head h2{color:var(--white);}
.region-list{display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
.region{flex:1 1 200px; max-width:280px; padding:22px 26px; border:1px solid #333; border-radius:14px; background:rgba(255,255,255,.02); display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px; font-weight:500;}
.region .rc{font-size:12px; color:#9A9A9A; font-weight:400; white-space:nowrap;}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--white); border-top:1px solid var(--gray-200);}
.cta-banner .wrap{padding:72px 32px; text-align:center;}
.cta-banner h3{font-family:var(--display); font-weight:800; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.02em; max-width:600px; margin:0 auto 28px;}
.cta-banner .btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#B5B5B5; padding:64px 0 24px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid #333;}
@media (max-width:800px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-grid h4{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#888; margin-bottom:16px;}
.foot-grid a, .foot-grid p{display:block; font-size:13.5px; margin-bottom:10px; color:#B5B5B5;}
.foot-grid a:hover{color:var(--white);}
.foot-logo{font-family:var(--display); font-weight:800; font-size:19px; color:var(--white); margin-bottom:14px; display:flex; align-items:center; gap:9px;}
.foot-logo .mark{width:26px; height:26px; border-radius:6px; background:var(--brand); display:inline-block;}
.foot-logo-img{height:52px; width:auto; display:block;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; color:#949494; flex-wrap:wrap; gap:10px;}

/* ---------- scroll to top ---------- */
.scroll-top{position:fixed; right:24px; bottom:24px; width:44px; height:44px; border-radius:50%; background:var(--brand); color:var(--white); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, background .2s ease; z-index:60;}
.scroll-top.visible{opacity:1; visibility:visible; transform:translateY(0);}
.scroll-top:hover{background:var(--brand-dark);}
@media (prefers-reduced-motion:reduce){ .scroll-top{transition:opacity .25s ease;} }

/* ---------- breadcrumb ---------- */
.crumb{font-size:13px; color:var(--gray-600); padding:22px 0;}
.crumb a:hover{color:var(--brand);}
.crumb span.sep{color:var(--gray-300); margin:0 6px;}
.crumb .current{color:var(--ink); font-weight:500;}

/* ---------- listing page ---------- */
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; padding:22px 0 32px;}
.page-head h1{font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,38px); letter-spacing:-.02em;}
.page-head p{color:var(--gray-600); font-size:13.5px; margin-top:6px;}
.sort-select{border:1px solid var(--gray-300); border-radius:6px; padding:10px 14px; font-size:13.5px; font-family:var(--display); color:var(--ink); background:var(--white);}

.filter-toggle-btn{display:none; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:11px 18px; border-radius:6px; border:1px solid var(--gray-300); background:var(--white); color:var(--ink); cursor:pointer;}

.listing-grid{display:grid; grid-template-columns:250px 1fr; gap:40px; padding-bottom:80px;}
@media (max-width:800px){ .listing-grid{grid-template-columns:1fr;} }

.filters-head{display:none; align-items:center; justify-content:space-between; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--gray-200);}
.filters-backdrop{display:none;}
.filters-apply-btn{display:none;}

@media (max-width:800px){
  .filter-toggle-btn{display:inline-flex;}
  .filters-head{display:flex;}
  .filters-apply-btn{display:flex; justify-content:center; width:100%; margin-top:8px;}
  .filters-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:70;}
  .filters-backdrop.open{opacity:1; visibility:visible;}
  .filters{position:fixed; top:0; left:0; height:100%; width:85%; max-width:340px; background:var(--white); z-index:71; padding:20px 24px; overflow-y:auto; transform:translateX(-100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); box-shadow:8px 0 24px rgba(0,0,0,.12);}
  .filters.open{transform:translateX(0);}
}
@media (max-width:800px) and (prefers-reduced-motion:reduce){ .filters, .filters-backdrop{transition:none;} }

.filters h3{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); margin:0 0 14px;}
.filter-group{margin-bottom:32px;}
.filter-opt{display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:14px; color:var(--ink-2); cursor:pointer;}
.filter-opt input{position:absolute; opacity:0; width:16px; height:16px; cursor:pointer;}
.filter-opt .box{width:16px; height:16px; border:1.5px solid var(--gray-300); border-radius:4px; flex-shrink:0; position:relative;}
.filter-opt input:checked + .box, .filter-opt.active .box{background:var(--brand); border-color:var(--brand);}
.filter-opt input:checked + .box::after{content:''; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--white); border-width:0 2px 2px 0; transform:rotate(45deg);}
.filter-opt-left{display:flex; align-items:center; gap:10px;}
.filter-opt .n{color:var(--gray-400); font-size:12px;}
.clear-link{font-size:12.5px; color:var(--brand); font-weight:600; cursor:pointer; background:none; border:none;}

.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:1000px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:500px){
  .product-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .pcard{padding:12px;}
  .pcard h3{font-size:13.5px;}
  .pcard .pn{font-size:10px; margin-bottom:10px;}
  .pcard .btn{padding:8px; font-size:11.5px;}
}
.pcard{border:1px solid var(--gray-200); border-radius:12px; padding:20px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.pcard:hover{border-color:var(--ink); box-shadow:0 4px 16px rgba(0,0,0,.06); transform:translateY(-3px);}
.pcard .thumb{width:100%; aspect-ratio:1.15/1; background:var(--gray-100); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; position:relative; overflow:hidden;}
.pcard .thumb img{width:100%; height:100%; object-fit:cover;}
.pcard .thumb svg{width:44%; stroke:var(--ink-2);}
.pcard .stock{position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:700; color:var(--green); background:#EAF6EF; border-radius:100px; padding:3px 9px;}
.pcard .stock.made-to-order{background:#F5F5F5; color:#A6A6A6;}
.pcard .cat{font-size:11.5px; color:var(--gray-600); margin-bottom:5px;}
.pcard h3{font-weight:700; font-size:15px; margin-bottom:4px; letter-spacing:-.01em;}
.pcard .pn{font-family:var(--mono); font-size:11px; color:var(--gray-400); margin-bottom:14px;}
.pcard .btn{width:100%; justify-content:center; padding:9px; font-size:12.5px;}

.no-results{border:1px solid var(--gray-200); border-radius:12px; padding:60px 30px; text-align:center; color:var(--gray-600);}

.pagination{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:48px;}
.page-btn{min-width:38px; height:38px; border-radius:8px; border:1px solid var(--gray-300); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:600; flex-shrink:0;}
.page-btn.active{background:var(--ink); color:var(--white); border-color:var(--ink);}
.page-btn.wide{width:auto; padding:0 16px;}
.page-btn.disabled{opacity:.4; pointer-events:none;}
.page-btn.page-gap{border:none; color:var(--gray-400); cursor:default;}
@media (max-width:480px){
  .pagination{gap:6px;}
  .page-btn{min-width:34px; height:34px; font-size:13px;}
  .page-btn.wide{padding:0 12px;}
  .page-btn-label{display:none;}
}

/* ---------- single product page ---------- */
.product-main{padding-bottom:88px;}
.product-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
@media (max-width:900px){ .product-detail-grid{grid-template-columns:1fr; gap:36px;} }
@media (min-width:901px){ .product-gallery-col{position:sticky; top:116px; align-self:start;} }

.gallery-main{background:var(--gray-100); border-radius:16px; position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.gallery-main .zoom-tag{position:absolute; top:18px; right:20px; font-size:12px; color:var(--gray-400);}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.gallery-main svg{width:48%; height:48%;}
.thumb-row{display:flex; gap:10px; margin-top:12px;}
.thumb-row .thumb{width:64px; height:64px; border-radius:8px; border:1px solid var(--gray-200); background:var(--gray-100); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;}
.thumb-row .thumb.active{border-color:var(--brand);}
.thumb-row .thumb img{width:100%; height:100%; object-fit:cover;}
.thumb-row .thumb svg{width:58%; height:58%; stroke:var(--gray-600);}

/* ---------- major products ---------- */
.major-product-hero{aspect-ratio:1.1/1;}
.placeholder-badge{position:absolute; top:14px; left:14px; z-index:2; background:#B3273F; color:var(--white); font-size:11px; font-weight:700; letter-spacing:.02em; padding:6px 12px; border-radius:100px; text-transform:uppercase;}
.major-product-copy{color:var(--gray-600); font-size:15.5px; margin-bottom:26px;}
.major-product-copy p{margin-bottom:14px;}

.part-no{font-family:var(--mono); font-size:12.5px; color:var(--gray-600); margin-bottom:10px;}
.prod-cat{font-size:12.5px; font-weight:600; color:var(--brand); background:var(--brand-tint); border-radius:100px; display:inline-block; padding:5px 12px; margin-bottom:18px;}
h1.prod-title{font-family:var(--display); font-weight:800; font-size:clamp(28px,3.2vw,38px); letter-spacing:-.02em; margin-bottom:14px; line-height:1.1;}
.prod-desc{color:var(--gray-600); font-size:15.5px; max-width:480px; margin-bottom:26px;}

.stock-row{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; margin-bottom:28px;}
.stock-dot{width:7px; height:7px; border-radius:50%; background:var(--green);}
.stock-row.made-to-order .stock-dot{background:var(--gray-400);}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px;}

.spec-table{border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; margin-bottom:28px;}
.spec-table .row{display:grid; grid-template-columns:180px 1fr; border-bottom:1px solid var(--gray-200); font-size:14px;}
.spec-table .row:last-child{border-bottom:none;}
.spec-table .row > div{padding:14px 18px;}
.spec-table .row .k{font-size:12.5px; color:var(--gray-600); background:var(--gray-100);}
.spec-table .row .v{color:var(--ink); font-weight:500;}

.wire-standards h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; color:var(--ink); margin-bottom:8px;}
.wire-standards-note{color:var(--gray-600); font-size:14.5px; margin-bottom:32px;}
.wire-standards-block{margin-bottom:32px;}
.wire-standards-block:last-child{margin-bottom:0;}
.wire-standards-block h3{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); margin-bottom:12px;}
.wire-standards-scroll{overflow-x:auto; border:1px solid var(--gray-200); border-radius:12px;}
.wire-standards-table{width:100%; border-collapse:collapse; font-size:13.5px; white-space:nowrap;}
.wire-standards-table th,.wire-standards-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--gray-200);}
.wire-standards-table thead th{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-600); background:var(--gray-100);}
.wire-standards-table tbody tr:last-child td{border-bottom:none;}
.wire-standards-table td{color:var(--ink);}
.wire-standards-table td:first-child{font-weight:600;}

.seal-materials h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; color:var(--ink); margin-bottom:8px;}
.seal-materials-note{color:var(--gray-600); font-size:14.5px; margin-bottom:32px;}
.seal-materials-block{margin-bottom:32px;}
.seal-materials-block:last-child{margin-bottom:0;}
.seal-materials-block h3{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); margin-bottom:12px;}
.seal-materials-scroll{overflow-x:auto; border:1px solid var(--gray-200); border-radius:12px;}
.seal-materials-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.seal-materials-table th,.seal-materials-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--gray-200);}
.seal-materials-table thead th{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-600); background:var(--gray-100);}
.seal-materials-table tbody tr:last-child td{border-bottom:none;}
.seal-materials-table td{color:var(--ink);}
.seal-materials-table td:first-child{font-weight:600; white-space:nowrap; width:80px;}
.seal-materials-trademark{color:var(--gray-400); font-size:12px; margin-top:8px;}

.accordion{border:1px solid var(--gray-200); border-radius:12px; overflow:hidden;}
.acc-item{border-bottom:1px solid var(--gray-200);}
.acc-item:last-child{border-bottom:none;}
.acc-head{padding:16px 18px; font-size:14px; font-weight:600; display:flex; justify-content:space-between; color:var(--ink); cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:var(--display);}
.acc-body{padding:0 18px 16px; font-size:14px; color:var(--gray-600); display:none; white-space:pre-line; line-height:1.7;}
.acc-item.open .acc-body{display:block;}

.related{background:var(--gray-100); padding:80px 0;}
.related h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; margin-bottom:36px;}
.rel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .rel-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:500px){ .rel-grid{grid-template-columns:1fr;} }
.rel-card{border:1px solid var(--gray-200); border-radius:12px; background:var(--white); padding:20px; transition:border-color .2s ease, transform .2s ease;}
.rel-card:hover{border-color:var(--ink); transform:translateY(-3px);}
.rel-card .icon-box{width:100%; aspect-ratio:1.3/1; background:var(--gray-100); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; overflow:hidden;}
.rel-card .icon-box img{width:100%; height:100%; object-fit:cover;}
.rel-card .icon-box svg{width:44%; stroke:var(--ink-2);}
.rel-card h3{font-family:var(--display); font-weight:700; font-size:16px; margin-bottom:4px; letter-spacing:-.01em;}
.rel-card .pn{font-family:var(--mono); font-size:11.5px; color:var(--gray-600);}

/* ---------- generic content pages (About / Contact / Catalogues) ---------- */
.page-hero{padding:64px 0 40px; border-bottom:1px solid var(--gray-200);}
.page-hero h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,44px); letter-spacing:-.02em; margin-bottom:14px;}
.page-hero p{color:var(--gray-600); font-size:16px; max-width:600px;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contact-left h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,44px); letter-spacing:-.02em; margin-bottom:14px;}
.contact-left .page-hero-lead{color:var(--gray-600); font-size:16px; max-width:520px; margin-bottom:32px;}
.contact-right{display:flex; flex-direction:column; gap:28px;}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr; gap:36px;}
  .contact-left{order:2;}
  .contact-right{order:1;}
}
.contact-form label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink);}
.contact-form .field{margin-bottom:20px;}
.contact-form input, .contact-form textarea{width:100%; border:1px solid var(--gray-300); border-radius:6px; padding:12px 14px; font-family:var(--display); font-size:14.5px; color:var(--ink); background:var(--white);}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--brand);}
.contact-form textarea{min-height:140px; resize:vertical;}
.contact-info .row{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--gray-200);}
.contact-info .row:last-child{border-bottom:none;}
.contact-info .row .k{font-size:12.5px; color:var(--gray-600); text-transform:uppercase; letter-spacing:.04em; min-width:120px;}
.contact-info .row .v{font-size:14.5px; color:var(--ink); font-weight:500;}
.form-msg{border-radius:8px; padding:14px 16px; font-size:14px; margin-bottom:20px;}
.form-msg.success{background:#EAF6EF; color:var(--green);}
.form-msg.error{background:#FBEAEE; color:#B3273F;}

.contact-map{border-radius:12px; overflow:hidden; border:1px solid var(--gray-200); height:380px;}
.contact-map iframe{width:100%; height:100%; border:0; display:block;}

.catalogue-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:1000px){ .catalogue-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .catalogue-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .catalogue-grid{grid-template-columns:1fr;} }
.cat-doc{border:1px solid var(--gray-200); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:14px;}
.cat-doc:hover{border-color:var(--ink);}
.cat-doc .icon{width:44px; height:44px; border-radius:8px; background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:600;}
.cat-doc h3{font-family:var(--display); font-weight:700; font-size:16px;}
.cat-doc .meta{font-size:12.5px; color:var(--gray-600);}

/* ---------- mechanical seal range ---------- */
.seal-range h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; color:var(--ink); margin-bottom:8px;}
.seal-range-note{color:var(--gray-600); font-size:14.5px; max-width:820px; margin-bottom:24px;}
.seal-range-index{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.seal-range-index a{font-size:13px; font-weight:600; color:var(--ink); background:var(--gray-100); border:1px solid var(--gray-200); border-radius:100px; padding:6px 14px; text-decoration:none;}
.seal-range-index a:hover{color:var(--brand); border-color:var(--brand);}
.seal-range-list{display:flex; flex-direction:column; gap:10px;}
.seal-item{border:1px solid var(--gray-200); border-radius:12px; background:var(--white); scroll-margin-top:120px;}
.seal-item > summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; padding:16px 20px; position:relative; padding-right:48px;}
.seal-item > summary::-webkit-details-marker{display:none;}
.seal-item > summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--gray-600);}
.seal-item[open] > summary::after{content:"\2212";}
.seal-item[open] > summary{border-bottom:1px solid var(--gray-200);}
.seal-title{font-family:var(--display); font-weight:800; font-size:18px; color:var(--ink);}
.seal-std{font-size:12px; font-weight:600; color:var(--brand); background:var(--brand-tint); border-radius:100px; padding:3px 10px; white-space:nowrap;}
.seal-tag{font-size:13px; color:var(--gray-600); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.seal-body{padding:20px;}
.seal-body h4{font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); margin:22px 0 10px;}
.seal-body h4:first-child{margin-top:0;}
.seal-h-note{font-weight:400; font-size:12px; color:var(--gray-600);}
.seal-features{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 4px;}
.seal-features li{font-size:12.5px; color:var(--ink); background:var(--gray-100); border-radius:100px; padding:5px 12px;}
.seal-cols{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:18px;}
@media (max-width:900px){ .seal-cols{grid-template-columns:1fr; gap:8px;} }
.seal-col-text p,.seal-col-text li{font-size:14px; color:var(--gray-600); line-height:1.65;}
.seal-col-text p{margin-bottom:10px;}
.seal-col-text ul{padding-left:20px; margin-bottom:10px;}
.seal-table-scroll{overflow-x:auto; border:1px solid var(--gray-200); border-radius:10px;}
.seal-table{width:100%; border-collapse:collapse; font-size:13px;}
.seal-table th,.seal-table td{padding:8px 12px; text-align:left; border-bottom:1px solid var(--gray-200);}
.seal-table thead th{font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--gray-600); background:var(--gray-100); white-space:nowrap;}
.seal-table tbody tr:last-child td{border-bottom:none;}
.seal-table td{color:var(--ink);}
.seal-table td:first-child{font-weight:600;}
.seal-table-dims td,.seal-table-dims th{white-space:nowrap; text-align:right;}
.seal-table-dims td:first-child,.seal-table-dims th:first-child{text-align:left;}
.seal-legend{list-style:none; padding:0; margin:0; columns:2; column-gap:32px; font-size:13.5px; color:var(--ink);}
.seal-legend li{break-inside:avoid; padding:2px 0;}
.seal-legend li span{display:inline-block; min-width:28px; color:var(--gray-600);}
@media (max-width:600px){ .seal-legend{columns:1;} .seal-tag{display:none;} }
.seal-fn{font-size:12px; color:var(--gray-600); margin-top:10px;}