/* ==========================================================================
   Pak-Sino Electronics — "Marketplace" chrome (v3, Oneyac-inspired IA)
   Layered on top of styles.css. All new components are prefixed oy- so they
   cannot collide with the existing page components.
   ========================================================================== */

:root{
  --oy-blue:#0b75be;
  --oy-blue-dk:#0a5f9c;
  --oy-blue-soft:#eaf4fc;
  --oy-navy:#0e3d6b;
  --oy-navy-dk:#0a2f54;
  --oy-orange:#ff6a00;
  --oy-price:#e8402a;
  --oy-line:#e4e8ee;
  --oy-line-2:#eef1f5;
  --oy-bg:#f5f6f8;
  --oy-text:#1d2530;
  --oy-muted:#6b7684;
  --oy-muted-2:#8b95a3;
  --oy-green:#12805c;
  --oy-w:1240px;
}

/* ---- shells ---- */
.oy-w{max-width:var(--oy-w);margin:0 auto;padding:0 16px}

/* ==========================================================================
   1. UTILITY BAR
   ========================================================================== */
.oy-top{background:#f2f4f7;border-bottom:1px solid var(--oy-line);font-size:12px;color:var(--oy-muted)}
.oy-top-in{display:flex;align-items:center;justify-content:space-between;height:34px;gap:16px}
.oy-top-l{display:flex;align-items:center;gap:16px;min-width:0}
.oy-top-note{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oy-live{width:6px;height:6px;border-radius:50%;background:#1aa86b;box-shadow:0 0 0 3px rgba(26,168,107,.16);flex:none}
.oy-top-r{display:flex;align-items:center;gap:2px;flex:none}
.oy-top-r a,.oy-top-r button{
  color:#4a5563;background:none;border:0;font:inherit;cursor:pointer;
  padding:4px 9px;border-radius:3px;white-space:nowrap;text-decoration:none
}
.oy-top-r a:hover,.oy-top-r button:hover{color:var(--oy-blue);background:#e8edf3}
.oy-top-sep{width:1px;height:12px;background:#d3dae2;margin:0 4px}
.oy-top-cart{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--oy-blue)!important}
.oy-top-cart b{
  background:var(--oy-orange);color:#fff;border-radius:9px;padding:1px 6px;
  font-size:10.5px;line-height:1.5;font-weight:800
}

/* ==========================================================================
   2. HEADER — logo, wide search, BOM button
   ========================================================================== */
.oy-header{background:#fff;padding:14px 0 12px}
.oy-head-in{display:flex;align-items:center;gap:26px}

.oy-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.oy-logo-mark{
  width:44px;height:44px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,#0b75be,#0a4a86);
  color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:15px;letter-spacing:.4px;
  box-shadow:0 2px 8px rgba(11,117,190,.28)
}
.oy-logo-txt{display:flex;flex-direction:column;line-height:1.05}
.oy-logo-txt b{font-size:20px;letter-spacing:.6px;color:var(--oy-navy);font-weight:800}
.oy-logo-txt small{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--oy-muted-2);font-weight:600;margin-top:2px}

/* search */
.oy-search{flex:1;min-width:0}
.oy-search form{
  display:flex;height:44px;border:2px solid var(--oy-blue);border-radius:4px;
  overflow:hidden;background:#fff;position:relative
}
.oy-cat{
  flex:none;width:132px;border:0;border-right:1px solid var(--oy-line);
  background:#f7f9fb;font-size:12.5px;color:#455061;padding:0 26px 0 11px;
  cursor:pointer;appearance:none;font-weight:600;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center
}
.oy-cat:focus{outline:none;background-color:#eef3f8}
.oy-search input{
  flex:1;min-width:0;border:0;padding:0 14px;font-size:14px;color:var(--oy-text);
  font-family:inherit;background:#fff
}
.oy-search input::placeholder{color:#9aa4b1}
.oy-search input:focus{outline:none}
.oy-search-btn{
  flex:none;width:104px;border:0;background:var(--oy-blue);color:#fff;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;letter-spacing:.2px
}
.oy-search-btn:hover{background:var(--oy-blue-dk)}

.oy-hotline{
  display:flex;align-items:center;gap:9px;margin-top:7px;font-size:11.5px;
  color:var(--oy-muted-2);flex-wrap:wrap
}
.oy-hotline b{color:#8a94a1;font-weight:700;letter-spacing:.3px}
.oy-hotline a{color:#6f7b8a;text-decoration:none;border-bottom:1px dotted #c9d1da;padding-bottom:1px}
.oy-hotline a:hover{color:var(--oy-blue);border-color:var(--oy-blue)}

/* header actions */
.oy-head-acts{display:flex;align-items:center;gap:9px;flex:none}
.oy-bigbtn{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 15px;
  border-radius:4px;text-decoration:none;font-size:12.5px;font-weight:700;
  border:1px solid var(--oy-line);background:#fff;color:#3c4858;cursor:pointer;
  font-family:inherit;white-space:nowrap
}
.oy-bigbtn:hover{border-color:var(--oy-blue);color:var(--oy-blue);background:var(--oy-blue-soft)}
.oy-bigbtn .ic{color:var(--oy-blue);display:grid;place-items:center}
.oy-bigbtn-primary{
  background:linear-gradient(180deg,#1282cf,#0b6fb4);border-color:#0b6fb4;color:#fff;
  box-shadow:0 1px 3px rgba(11,111,180,.3)
}
.oy-bigbtn-primary .ic{color:#fff}
.oy-bigbtn-primary:hover{background:linear-gradient(180deg,#0b6fb4,#0a5f9c);color:#fff;border-color:#0a5f9c}
.oy-bigbtn .badge{
  background:var(--oy-orange);color:#fff;font-size:10.5px;font-weight:800;
  border-radius:9px;padding:1px 6px;margin-left:1px
}

/* ==========================================================================
   3. CATEGORY NAV STRIP
   ========================================================================== */
.oy-nav{background:var(--oy-navy);border-bottom:3px solid var(--oy-blue)}
.oy-nav-in{display:flex;align-items:stretch;gap:0;height:44px}

.oy-allcat{
  flex:none;display:inline-flex;align-items:center;gap:9px;padding:0 20px 0 16px;
  background:var(--oy-blue);color:#fff;border:0;font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;letter-spacing:.2px
}
.oy-allcat:hover{background:#0a68aa}

.oy-navlist{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;flex:1;min-width:0;overflow:hidden}
.oy-navlist>li{display:flex;align-items:stretch}
.oy-navlist>li>a{
  display:inline-flex;align-items:center;padding:0 14px;color:#dce7f2;
  text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.06);transition:background .13s
}
.oy-navlist>li>a:hover{background:rgba(255,255,255,.1);color:#fff}
.oy-navlist>li>a.on{background:var(--oy-blue);color:#fff}

.oy-nav-rt{
  flex:none;display:inline-flex;align-items:center;gap:7px;padding:0 14px 0 16px;
  color:#9fc4e4;text-decoration:none;font-size:12.5px;font-weight:600;
  border-left:1px solid rgba(255,255,255,.1);white-space:nowrap
}
.oy-nav-rt:hover{color:#fff}

/* ==========================================================================
   4. HERO — category rail | carousel | side panel
   ========================================================================== */
.oy-hero{background:var(--oy-bg);padding:14px 0 0}
.oy-hero-grid{display:grid;grid-template-columns:212px minmax(0,1fr) 244px;gap:12px;align-items:start}

/* --- 4a. category rail --- */
.oy-rail{background:#fff;border:1px solid var(--oy-line);border-radius:4px;overflow:visible;position:relative}
.oy-rail-hd{
  display:flex;align-items:center;gap:8px;padding:10px 13px;background:#f8fafc;
  border-bottom:1px solid var(--oy-line);font-size:12px;font-weight:800;
  color:var(--oy-navy);letter-spacing:.5px;text-transform:uppercase
}
.oy-rail-list{list-style:none;margin:0;padding:4px 0}
.oy-rail-list>li{position:relative}
.oy-rail-list>li>a{
  display:flex;align-items:center;gap:9px;padding:7px 12px;text-decoration:none;
  color:#3b4657;font-size:12.8px;font-weight:600;line-height:1.25;
  border-left:2px solid transparent
}
.oy-rail-list>li:hover>a{background:var(--oy-blue-soft);color:var(--oy-blue-dk);border-left-color:var(--oy-blue)}
.oy-rail-list .ic{color:#8fa0b3;flex:none;display:grid;place-items:center;width:17px}
.oy-rail-list>li:hover .ic{color:var(--oy-blue)}
.oy-rail-list .cnt{margin-left:auto;font-size:10.5px;color:#a8b3c0;font-weight:600;font-variant-numeric:tabular-nums}

/* flyout */
.oy-fly{
  position:absolute;left:100%;top:-1px;min-width:640px;max-width:740px;
  background:#fff;border:1px solid var(--oy-line);border-top:2px solid var(--oy-blue);
  box-shadow:0 10px 30px rgba(16,32,56,.14);padding:16px 18px;z-index:70;
  display:none;grid-template-columns:repeat(3,1fr);gap:6px 22px;border-radius:0 4px 4px 0
}
.oy-rail-list>li:hover .oy-fly{display:grid}
.oy-fly-col h6{
  margin:0 0 6px;font-size:11px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--oy-blue-dk);font-weight:800
}
.oy-fly-col a{
  display:block;padding:3px 0;font-size:12.3px;color:#5a6675;text-decoration:none;line-height:1.5
}
.oy-fly-col a:hover{color:var(--oy-blue);text-decoration:underline}
.oy-fly-foot{
  grid-column:1/-1;margin-top:8px;padding-top:9px;border-top:1px solid var(--oy-line-2);
  display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--oy-muted-2)
}
.oy-fly-foot a{color:var(--oy-blue);font-weight:700;text-decoration:none}

/* --- 4b. stage: carousel --- */
.oy-stage{min-width:0;display:flex;flex-direction:column;gap:12px}
.oy-carousel{position:relative;border-radius:4px;overflow:hidden;background:#0e3d6b;height:302px}
.oy-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  display:flex;align-items:center;padding:0 40px;pointer-events:none
}
.oy-slide.on{opacity:1;pointer-events:auto}
.oy-slide-bg{position:absolute;inset:0;z-index:0}
.oy-slide-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(6,26,48,.94) 0%,rgba(6,26,48,.72) 46%,rgba(6,26,48,.18) 78%,transparent 100%)
}
.oy-slide-in{position:relative;z-index:1;max-width:520px}
.oy-slide-kicker{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);color:#d9e9f8;border-radius:3px;
  padding:3px 9px;font-size:10.5px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;margin-bottom:12px
}
.oy-slide h2{
  margin:0 0 9px;font-size:31px;line-height:1.14;color:#fff;font-weight:800;letter-spacing:-.4px
}
.oy-slide h2 em{font-style:normal;color:#ffc53d}
.oy-slide p{margin:0 0 16px;font-size:13.3px;line-height:1.6;color:#c6d8e8;max-width:430px}
.oy-slide-cta{display:flex;gap:9px;flex-wrap:wrap}
.oy-btn-w{
  display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--oy-navy);
  padding:9px 17px;border-radius:3px;font-size:12.5px;font-weight:800;text-decoration:none
}
.oy-btn-w:hover{background:#eaf3fb}
.oy-btn-o{
  display:inline-flex;align-items:center;gap:7px;background:transparent;color:#fff;
  padding:9px 16px;border-radius:3px;font-size:12.5px;font-weight:700;text-decoration:none;
  border:1px solid rgba(255,255,255,.45)
}
.oy-btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff}

.oy-dots{position:absolute;bottom:13px;left:40px;display:flex;gap:6px;z-index:3}
.oy-dot{
  width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.34);border:0;
  padding:0;cursor:pointer;transition:background .2s
}
.oy-dot.on{background:#fff}
.oy-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:30px;height:46px;z-index:3;
  background:rgba(10,30,54,.4);border:0;color:#fff;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .18s
}
.oy-carousel:hover .oy-arrow{opacity:1}
.oy-arrow:hover{background:rgba(10,30,54,.72)}
.oy-arrow.prev{left:0}
.oy-arrow.next{right:0}

/* --- 4c. quick cards under carousel --- */
.oy-quickrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.oy-quick{
  background:#fff;border:1px solid var(--oy-line);border-radius:4px;padding:11px 12px;
  display:flex;align-items:center;gap:10px;text-decoration:none;transition:border-color .15s,box-shadow .15s
}
.oy-quick:hover{border-color:#b9d8ef;box-shadow:0 3px 10px rgba(11,117,190,.1)}
.oy-quick-ic{
  width:34px;height:34px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--oy-blue-soft);color:var(--oy-blue)
}
.oy-quick b{display:block;font-size:12.3px;color:var(--oy-navy);font-weight:700;line-height:1.3}
.oy-quick span{display:block;font-size:10.8px;color:var(--oy-muted-2);margin-top:2px;line-height:1.35}

/* --- 4d. right side panel --- */
.oy-side{display:flex;flex-direction:column;gap:12px}
.oy-panel{background:#fff;border:1px solid var(--oy-line);border-radius:4px;overflow:hidden}
.oy-panel-hd{
  display:flex;align-items:center;justify-content:space-between;padding:9px 12px;
  border-bottom:1px solid var(--oy-line);background:#f8fafc
}
.oy-panel-hd b{font-size:12px;color:var(--oy-navy);font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.oy-panel-hd a{font-size:11px;color:var(--oy-muted-2);text-decoration:none;font-weight:600}
.oy-panel-hd a:hover{color:var(--oy-blue)}
.oy-panel-body{padding:9px 12px}

.oy-acct-cta{
  background:linear-gradient(150deg,#0f4a80,#0a2f54);border-radius:4px;padding:14px 13px;color:#fff
}
.oy-acct-cta h4{margin:0 0 3px;font-size:13.5px;font-weight:800}
.oy-acct-cta p{margin:0 0 11px;font-size:11.5px;color:#b9d0e3;line-height:1.5}
.oy-acct-btns{display:flex;gap:7px}
.oy-acct-btns a{
  flex:1;text-align:center;padding:7px 0;border-radius:3px;font-size:11.8px;
  font-weight:700;text-decoration:none
}
.oy-acct-btns .p{background:#fff;color:var(--oy-navy)}
.oy-acct-btns .s{border:1px solid rgba(255,255,255,.4);color:#fff}
.oy-acct-btns .s:hover{background:rgba(255,255,255,.12)}

.oy-ann{list-style:none;margin:0;padding:0}
.oy-ann li{padding:6px 0;border-bottom:1px dashed var(--oy-line-2);display:flex;gap:7px;align-items:flex-start}
.oy-ann li:last-child{border-bottom:0}
.oy-ann .tag{
  flex:none;font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:2px;
  background:var(--oy-blue-soft);color:var(--oy-blue-dk);margin-top:1px;letter-spacing:.3px
}
.oy-ann .tag.hot{background:#fdece9;color:#c9412a}
.oy-ann a{font-size:11.8px;color:#4d5867;text-decoration:none;line-height:1.45;display:block}
.oy-ann a:hover{color:var(--oy-blue)}

.oy-brandmini{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.oy-brandmini a{
  border:1px solid var(--oy-line-2);border-radius:3px;padding:8px 4px;text-align:center;
  font-size:10.5px;font-weight:700;color:#5a6675;text-decoration:none;line-height:1.25;
  display:flex;align-items:center;justify-content:center;min-height:38px
}
.oy-brandmini a:hover{border-color:var(--oy-blue);color:var(--oy-blue);background:var(--oy-blue-soft)}

/* ==========================================================================
   5. TRUST BADGES
   ========================================================================== */
.oy-trust{background:var(--oy-bg);padding:14px 0}
.oy-trust-in{
  display:grid;grid-template-columns:repeat(5,1fr);background:#fff;
  border:1px solid var(--oy-line);border-radius:4px;overflow:hidden
}
.oy-trust-it{
  display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-right:1px solid var(--oy-line-2);text-decoration:none
}
.oy-trust-it:last-child{border-right:0}
.oy-trust-it:hover{background:#fafcfe}
.oy-trust-ic{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--oy-blue-soft);color:var(--oy-blue)
}
.oy-trust-it b{display:block;font-size:12.2px;color:var(--oy-navy);font-weight:700;line-height:1.3}
.oy-trust-it span{display:block;font-size:10.8px;color:var(--oy-muted-2);margin-top:2px;line-height:1.35}

/* ==========================================================================
   6. PRODUCT SECTIONS + TABS
   ========================================================================== */
.oy-sec{background:var(--oy-bg);padding:6px 0 26px}
.oy-sec-hd{
  display:flex;align-items:center;gap:0;margin-bottom:0;border-bottom:2px solid var(--oy-blue)
}
.oy-tabs{display:flex;align-items:stretch;gap:0;flex:1;min-width:0;overflow-x:auto}
.oy-tab{
  background:none;border:0;font:inherit;cursor:pointer;padding:11px 20px;
  font-size:13.5px;font-weight:700;color:#5d6877;position:relative;white-space:nowrap;
  font-family:inherit
}
.oy-tab:hover{color:var(--oy-blue)}
.oy-tab.on{color:#fff;background:var(--oy-blue);border-radius:3px 3px 0 0}
.oy-sec-more{
  flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  color:var(--oy-blue);text-decoration:none;padding:8px 2px
}
.oy-sec-more:hover{text-decoration:underline}

.oy-panelbox{background:#fff;border:1px solid var(--oy-line);border-top:0;border-radius:0 0 4px 4px;padding:14px}
.oy-demo{
  display:flex;align-items:flex-start;gap:7px;font-size:11px;color:#8a7a55;
  background:#fffcf2;border:1px solid #f2e6c4;border-radius:3px;padding:7px 10px;
  margin-bottom:12px;line-height:1.5
}
.oy-demo svg{flex:none;margin-top:1px}

/* product grid */
.oy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.oy-card{
  border:1px solid var(--oy-line);border-radius:4px;background:#fff;display:flex;
  flex-direction:column;overflow:hidden;transition:border-color .15s,box-shadow .15s;
  position:relative
}
.oy-card:hover{border-color:#a9d0eb;box-shadow:0 4px 14px rgba(16,32,56,.09)}
.oy-card-thumb{
  height:96px;background:linear-gradient(160deg,#f7f9fb,#eef3f8);display:grid;
  place-items:center;border-bottom:1px solid var(--oy-line-2);position:relative;color:#9db2c7
}
.oy-card-thumb svg{opacity:.85}
.oy-card-flag{
  position:absolute;top:7px;left:7px;font-size:9.5px;font-weight:800;letter-spacing:.4px;
  padding:2px 6px;border-radius:2px;text-transform:uppercase;background:#fff;color:var(--oy-blue);
  border:1px solid #cfe5f5
}
.oy-card-flag.new{background:#eefaf4;color:#0d7a52;border-color:#c7ebda}
.oy-card-body{padding:9px 10px 0;flex:1}
.oy-card-brand{font-size:10.5px;color:var(--oy-muted-2);font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-bottom:3px}
.oy-card-pn{
  display:block;font-family:var(--mono);font-size:12.4px;font-weight:700;color:var(--oy-navy);
  text-decoration:none;letter-spacing:-.2px;margin-bottom:4px;word-break:break-word;line-height:1.3
}
.oy-card-pn:hover{color:var(--oy-blue);text-decoration:underline}
.oy-card-desc{
  font-size:11.3px;color:#77828f;line-height:1.45;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px
}
.oy-card-specs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.oy-chip{
  font-size:10px;padding:1.5px 5px;border-radius:2px;background:#f2f5f8;color:#6b7b8c;
  font-weight:600;font-family:var(--mono);letter-spacing:-.1px
}
.oy-card-stock{display:flex;align-items:center;gap:5px;font-size:10.8px;font-weight:700;margin-bottom:7px}
.oy-card-stock .d{width:5px;height:5px;border-radius:50%;flex:none}
.oy-card-stock.in{color:var(--oy-green)}
.oy-card-stock.in .d{background:var(--oy-green)}
.oy-card-stock.low{color:#b8791a}
.oy-card-stock.low .d{background:#e8a33d}
.oy-card-stock small{color:var(--oy-muted-2);font-weight:600}
.oy-card-foot{
  padding:8px 10px 10px;border-top:1px solid var(--oy-line-2);margin-top:auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:7px
}
.oy-price{line-height:1.15}
.oy-price b{font-size:15px;color:var(--oy-price);font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.oy-price small{display:block;font-size:9.8px;color:var(--oy-muted-2);margin-top:2px;font-weight:600}
.oy-add{
  flex:none;background:var(--oy-blue);color:#fff;border:0;border-radius:3px;
  padding:6px 10px;font-size:11.3px;font-weight:700;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap
}
.oy-add:hover{background:var(--oy-blue-dk)}

/* ==========================================================================
   7. BRAND WALL
   ========================================================================== */
.oy-brands{background:#fff;padding:22px 0 26px;border-top:1px solid var(--oy-line)}
.oy-brands-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:14px}
.oy-brands-hd h3{margin:0;font-size:16px;color:var(--oy-navy);font-weight:800;letter-spacing:-.2px}
.oy-brands-hd p{margin:3px 0 0;font-size:12px;color:var(--oy-muted-2)}
.oy-brands-hd a{font-size:12px;font-weight:700;color:var(--oy-blue);text-decoration:none;flex:none}
.oy-brands-hd a:hover{text-decoration:underline}
.oy-brands-hd h3{display:flex;align-items:center;gap:8px}
.oy-brands-n,.mf-sec-n{
  display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:26px;padding:0 6px;
  border-radius:9px;background:var(--oy-blue-soft);color:var(--oy-blue);
  font-size:10.5px;font-weight:800;letter-spacing:.2px
}

/* ---- manufacturer wall: compact linecard tiles (logo over name) ----
   Fixed tile height + contained logos = an even, tidy hairline grid that
   matches the Signal HK linecard look. The full list is collapsed behind a
   pure-CSS toggle so it can never dominate the homepage.                    */
.mf-sec{margin-top:13px}
.mf-sec:first-of-type{margin-top:2px}
.mf-sec-hd{
  display:flex;align-items:center;gap:7px;margin:0 0 6px;
  font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--oy-navy)
}
.mf-sec-hd::after{content:"";flex:1;height:1px;background:var(--oy-line-2)}
.mf-sec-n{background:#eef2f7;color:#6c7a89;height:16px;min-width:22px;font-size:9.5px}

.mf-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));
  gap:1px;background:var(--oy-line-2);border:1px solid var(--oy-line-2)
}
.mf-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:#fff;padding:7px 6px 6px;height:76px;
  text-decoration:none;text-align:center;overflow:hidden;
  transition:background .13s,box-shadow .13s
}
.mf-tile:hover{background:var(--oy-blue-soft);box-shadow:inset 0 0 0 1px var(--oy-blue)}
.mf-logo{display:flex;align-items:center;justify-content:center;width:100%;height:32px;flex:none}
.mf-logo img{
  max-width:88%;max-height:32px;width:auto;height:auto;
  object-fit:contain;display:block;opacity:.92;transition:opacity .13s
}
.mf-tile:hover .mf-logo img{opacity:1}
.mf-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  width:100%;font-size:9px;font-weight:700;color:#66727f;line-height:1.16;
  letter-spacing:-.05px;overflow-wrap:anywhere;transition:color .13s
}
.mf-tile:hover .mf-name{color:var(--oy-blue)}

/* collapse everything after the first section (works without JS) */
.mf-more{display:none}
#mf-all:checked ~ .mf-more{display:block}
.mf-toggle{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:12px auto 0;padding:7px 16px;width:max-content;max-width:100%;
  border:1px solid var(--oy-line-2);border-radius:3px;background:#fafbfc;cursor:pointer;
  font-size:11.5px;font-weight:700;color:var(--oy-blue);user-select:none
}
.mf-toggle:hover{background:var(--oy-blue-soft);border-color:var(--oy-blue)}
.mf-toggle-off{display:none}
#mf-all:checked ~ .mf-toggle .mf-toggle-on{display:none}
#mf-all:checked ~ .mf-toggle .mf-toggle-off{display:inline}

/* ==========================================================================
   8. STATS BAND
   ========================================================================== */
.oy-stats{background:var(--oy-navy);color:#fff;padding:24px 0}
.oy-stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.oy-stat{text-align:center;padding:0 14px;border-right:1px solid rgba(255,255,255,.13)}
.oy-stat:last-child{border-right:0}
.oy-stat b{display:block;font-size:27px;font-weight:800;letter-spacing:-.8px;color:#fff;line-height:1.1}
.oy-stat b em{font-style:normal;color:#ffc53d;font-size:20px;margin-left:1px}
.oy-stat span{display:block;font-size:11.5px;color:#a8c4dc;margin-top:5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.oy-foot{background:#f0f2f5;border-top:1px solid var(--oy-line);padding-top:26px}
.oy-foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:26px;padding-bottom:22px}
.oy-foot-col h5{
  margin:0 0 10px;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--oy-navy);font-weight:800
}
.oy-foot-col ul{list-style:none;margin:0;padding:0}
.oy-foot-col li{margin-bottom:6px}
.oy-foot-col a{font-size:12px;color:#67727f;text-decoration:none;line-height:1.5}
.oy-foot-col a:hover{color:var(--oy-blue);text-decoration:underline}
.oy-foot-brand p{font-size:12px;color:#67727f;line-height:1.6;margin:10px 0 12px;max-width:290px}
.oy-foot-contact{display:flex;flex-direction:column;gap:6px}
.oy-foot-contact div{display:flex;gap:7px;font-size:11.8px;color:#5c6775;line-height:1.5}
.oy-foot-contact svg{flex:none;margin-top:2px;color:var(--oy-blue)}
.oy-foot-contact a{color:#5c6775;text-decoration:none}
.oy-foot-contact a:hover{color:var(--oy-blue)}

.oy-pay{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.oy-pay span{
  font-size:9.5px;font-weight:800;letter-spacing:.3px;color:#6b7684;background:#fff;
  border:1px solid #dde3ea;border-radius:2px;padding:3px 6px;line-height:1.2
}
.oy-foot-bot{
  border-top:1px solid #dee3ea;padding:13px 0 18px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap
}
.oy-foot-bot p{margin:0;font-size:11.3px;color:#8b95a3;line-height:1.55;max-width:640px}
.oy-foot-bot .lk{display:flex;gap:14px;flex-wrap:wrap}
.oy-foot-bot .lk a{font-size:11.3px;color:#8b95a3;text-decoration:none}
.oy-foot-bot .lk a:hover{color:var(--oy-blue)}

/* ==========================================================================
   10. MOBILE
   ========================================================================== */
.oy-burger{display:none;background:none;border:1px solid var(--oy-line);border-radius:4px;width:42px;height:42px;place-items:center;cursor:pointer;color:var(--oy-navy);flex:none}
.oy-mnav{display:none;background:#fff;border-top:1px solid var(--oy-line);padding:6px 0 10px}
.oy-mnav.open{display:block}
.oy-mnav a{
  display:block;padding:10px 16px;font-size:13.5px;color:#3b4657;text-decoration:none;
  font-weight:600;border-bottom:1px solid var(--oy-line-2)
}
.oy-mnav a:hover{background:var(--oy-blue-soft);color:var(--oy-blue)}
.oy-mnav-sec{padding:10px 16px 4px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--oy-muted-2);font-weight:800}

@media (max-width:1180px){
  .oy-hero-grid{grid-template-columns:200px minmax(0,1fr)}
  .oy-side{display:none}
  .oy-trust-in{grid-template-columns:repeat(3,1fr)}
  .oy-trust-it:nth-child(3){border-right:0}
  .oy-trust-it:nth-child(n+4){border-top:1px solid var(--oy-line-2)}
  .oy-foot-cols{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:20px}
  .oy-foot-col:nth-child(4){display:none}
  .oy-navlist>li>a{padding:0 11px;font-size:12.5px}
}
@media (max-width:1180px){
  .mf-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
@media (max-width:980px){
  .oy-head-in{flex-wrap:wrap;gap:12px}
  .oy-search{order:3;flex-basis:100%}
  .mf-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .oy-hero-grid{grid-template-columns:1fr}
  .oy-rail{display:none}
  .oy-quickrow{grid-template-columns:repeat(2,1fr)}
  .oy-grid{grid-template-columns:repeat(3,1fr)}
  .oy-allcat{display:none}
  .oy-navlist{display:none}
  .oy-nav-rt{display:none}
  .oy-burger{display:grid}
  .oy-carousel{height:270px}
  .oy-slide h2{font-size:24px}
  .oy-slide{padding:0 24px}
  .oy-stats-in{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .oy-stat:nth-child(2){border-right:0}
  .oy-stat:nth-child(3),.oy-stat:nth-child(4){padding-top:0}
}
@media (max-width:720px){
  .oy-logo-txt b{font-size:17px}
  .oy-logo-mark{width:38px;height:38px;font-size:13px}
  .oy-search form{height:40px}
  .oy-cat{width:104px;font-size:11.5px}
  .oy-search-btn{width:58px;font-size:0;gap:0}
  .oy-search-btn svg{display:block}
  .oy-hotline{display:none}
  .oy-bigbtn{padding:0 11px;font-size:11.5px;height:40px}
  .oy-bigbtn span.lbl{display:none}
  .oy-trust-in{grid-template-columns:1fr 1fr}
  .oy-trust-it{border-right:0!important;border-bottom:1px solid var(--oy-line-2)}
  .oy-trust-it:nth-child(odd){border-right:1px solid var(--oy-line-2)!important}
  .oy-trust-it:last-child{border-bottom:0}
  .oy-grid{grid-template-columns:repeat(2,1fr)}
  .mf-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .mf-tile{height:70px;padding:6px 4px 5px;gap:4px}
  .mf-logo{height:28px}
  .mf-logo img{max-height:28px}
  .mf-name{font-size:8.5px;-webkit-line-clamp:2}
  .oy-carousel{height:248px}
  .oy-slide h2{font-size:21px}
  .oy-slide p{font-size:12.2px;margin-bottom:12px}
  .oy-quickrow{grid-template-columns:1fr 1fr}
  .oy-foot-cols{grid-template-columns:1fr 1fr;gap:18px}
  .oy-foot-brand{grid-column:1/-1}
  .oy-foot-col:nth-child(4){display:block}
  .oy-tab{padding:10px 13px;font-size:12.5px}
  .oy-stats-in{grid-template-columns:1fr 1fr}
  .oy-stat b{font-size:22px}
  .oy-panelbox{padding:10px}
}
@media (max-width:420px){
  .oy-grid{grid-template-columns:1fr}
  .mf-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .oy-slide h2{font-size:18.5px}
}