/* SupplyKit — officecrave-style storefront (shared) */
/* ---- officecrave-style storefront (namespaced oc-) — aligned to brand blue ---- */
:root{--oc-blue:#1a56db;--oc-navy:#12315f;--oc-navy2:#173a70;--oc-amber:#f6a01a;--oc-amber-ink:#a9660a;
--oc-green:#057a55;--oc-red:#e02424;--oc-ink:#16202e;--oc-mut:#5c6674;--oc-line:#e4e8ee;--oc-bg:#f4f6f9;}
body{background:var(--oc-bg)!important}
.oc a{text-decoration:none;color:inherit}
.oc{font-family:Inter,system-ui,Arial,sans-serif;color:var(--oc-ink)}
.oc-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.oc-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border:0;border-radius:8px;cursor:pointer;font-family:Inter}
.oc-amber{background:var(--oc-amber);color:#3a2600;padding:11px 18px}.oc-amber:hover{background:#ffb02e}
.oc-ghost{background:#fff;color:var(--oc-navy);border:1.5px solid var(--oc-line);padding:9px 14px}
/* utility bar */
.oc-util{background:var(--oc-navy);color:#cfe0f5;font-size:13px}
.oc-util .oc-wrap{display:flex;align-items:center;justify-content:space-between;height:38px}
.oc-util a{color:#eaf2fd}.oc-util span{margin-right:16px}.oc-util strong{color:#fff}.oc-util .r span{margin:0 0 0 16px}
/* masthead */
.oc-mast{background:#fff;border-bottom:1px solid var(--oc-line)}
.oc-mast .oc-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:82px}
.oc-logo{font-weight:800;font-size:25px;letter-spacing:-.5px;color:var(--oc-navy);display:flex;align-items:center;gap:9px}
.oc-logo .m{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--oc-blue),var(--oc-navy));display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800}
.oc-logo small{display:block;font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oc-amber-ink)}
.oc-search{display:flex;max-width:640px;width:100%;border:2px solid var(--oc-navy);border-radius:9px;overflow:hidden}
.oc-search input{flex:1;border:0;padding:12px 16px;font-size:15px;outline:none}
.oc-search button{background:var(--oc-navy);color:#fff;border:0;padding:0 20px;font-weight:700;cursor:pointer}
.oc-acct{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:600;color:var(--oc-navy)}
.oc-acct .ic{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}.oc-acct .ic span:first-child{font-size:18px}
.oc-cart{background:var(--oc-amber);color:#3a2600;border-radius:8px;padding:8px 14px;display:flex;gap:7px;align-items:center;font-weight:700;position:relative}
.oc-cart .cnt{background:var(--oc-red);color:#fff;border-radius:20px;font-size:11px;padding:1px 6px;font-weight:800}
/* nav */
.oc-nav{background:var(--oc-navy);position:sticky;top:0;z-index:60}
.oc-nav .oc-wrap{display:flex;align-items:stretch;gap:2px}
.oc-nav a,.oc-nav .all{color:#eaf2fd;font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;padding:0 15px;height:48px;white-space:nowrap}
.oc-nav a:hover,.oc-all:hover{background:var(--oc-navy2)}
.oc-all{background:var(--oc-blue);color:#fff!important;font-weight:800;cursor:pointer}.oc-all:hover{background:#1444b8}
.oc-nav .sp{flex:1}.oc-nav .deal{color:#ffd88a!important}
.oc-mw{position:relative}
.oc-mega{position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--oc-line);border-top:3px solid var(--oc-amber);border-radius:0 0 12px 12px;box-shadow:0 12px 30px rgba(16,32,57,.14);width:940px;padding:20px 24px;display:none;grid-template-columns:repeat(3,1fr);gap:4px 30px;z-index:70}
.oc-mw:hover .oc-mega{display:grid}
.oc-mega .col .hd{display:block;font-weight:700;font-size:14px;color:var(--oc-navy);margin:8px 0 3px}
.oc-mega .col a{color:var(--oc-ink);font-weight:500;font-size:13px;padding:4px 0;height:auto;display:block}
.oc-mega .col a:hover{color:var(--oc-blue)}
/* coupon */
.oc-coup{background:linear-gradient(90deg,#12315f,#1a56db);color:#fff;text-align:center;font-weight:600;font-size:14.5px;padding:10px 16px;display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}
.oc-coup .code{background:#fff;color:var(--oc-navy);font-weight:800;letter-spacing:.05em;padding:4px 12px;border-radius:6px;border:2px dashed var(--oc-amber)}
/* hero */
.oc-hero{background:radial-gradient(1100px 380px at 85% -10%,rgba(26,86,219,.16),transparent 60%),linear-gradient(180deg,#fff,#eef3f9);border-bottom:1px solid var(--oc-line)}
.oc-hero .oc-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:46px 20px}
.oc-eyebrow{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--oc-amber-ink);background:#fef2dd;border:1px solid #f6dca2;padding:5px 11px;border-radius:20px}
.oc-hero h1{font-size:clamp(28px,4.2vw,46px);line-height:1.05;letter-spacing:-1px;color:var(--oc-navy);margin:15px 0 12px;font-weight:800}
.oc-hero p{font-size:16.5px;color:var(--oc-mut);max-width:520px;margin:0 0 20px}
.oc-cta{display:flex;gap:12px;flex-wrap:wrap}
.oc-stat{display:flex;gap:26px;margin-top:24px;padding-top:20px;border-top:1px solid var(--oc-line)}
.oc-stat b{font-size:21px;color:var(--oc-navy);display:block;font-weight:800}.oc-stat span{font-size:12px;color:var(--oc-mut)}
.oc-panel{background:#fff;border:1px solid var(--oc-line);border-radius:16px;box-shadow:0 8px 24px rgba(16,32,57,.08);padding:22px}
.oc-panel h3{font-size:16px;color:var(--oc-navy);margin:0 0 12px}
.oc-panel .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--oc-line);font-size:14px;font-weight:600}
.oc-panel .row:last-child{border-bottom:0}.oc-panel .row .i{width:34px;height:34px;border-radius:8px;background:#eef3f9;display:grid;place-items:center;font-size:17px}
/* trust */
.oc-trust{background:#fff;border-bottom:1px solid var(--oc-line)}
.oc-trust .oc-wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.oc-trust .t{display:flex;align-items:center;gap:12px;padding:18px 14px;border-right:1px solid var(--oc-line)}.oc-trust .t:last-child{border-right:0}
.oc-trust .t .i{font-size:23px}.oc-trust .t b{display:block;font-size:14px;color:var(--oc-navy)}.oc-trust .t span{font-size:12px;color:var(--oc-mut)}
/* sections */
.oc-blk{padding:38px 0}
.oc-sh{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.oc-sh h2{font-size:25px;color:var(--oc-navy);letter-spacing:-.5px;font-weight:800;margin:0}
.oc-sh a{color:var(--oc-blue);font-weight:700;font-size:14px}
.oc-catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.oc-cat{background:#fff;border:1px solid var(--oc-line);border-radius:10px;padding:18px 14px;text-align:center;box-shadow:0 1px 2px rgba(16,32,57,.05);transition:.15s}
.oc-cat:hover{transform:translateY(-3px);border-color:#c9d6e8}
.oc-cat .e{font-size:28px;display:block;margin-bottom:9px}.oc-cat b{font-size:13.5px;font-weight:700;display:block;line-height:1.25}
/* products */
.oc-pg{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.oc-p{background:#fff;border:1px solid var(--oc-line);border-radius:10px;padding:14px;display:flex;flex-direction:column;position:relative;box-shadow:0 1px 2px rgba(16,32,57,.05);transition:.15s}
.oc-p:hover{transform:translateY(-3px);border-color:#c9d6e8}
.oc-p .tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:5px;background:#fef2dd;color:var(--oc-amber-ink)}
.oc-p .ph{height:130px;border-radius:8px;background:linear-gradient(135deg,#eef3f9,#e3ebf5);display:grid;place-items:center;font-size:30px;margin-bottom:12px;overflow:hidden}
.oc-p .ph img{width:100%;height:100%;object-fit:contain}
.oc-p .nm{font-size:13px;font-weight:600;line-height:1.3;min-height:50px}
.oc-p .nm a:hover{color:var(--oc-blue)}
.oc-p .px{display:flex;align-items:baseline;gap:8px;margin:8px 0 2px}.oc-p .px .now{font-weight:800;font-size:19px;color:var(--oc-navy)}
.oc-p .each{font-size:11px;color:var(--oc-green);font-weight:700;margin-bottom:10px}
.oc-p .add{background:var(--oc-amber);color:#3a2600;border:0;border-radius:7px;padding:9px;font-weight:800;cursor:pointer;font-family:Inter;width:100%}
.oc-p .add:hover{background:#ffb02e}.oc-p .ship{font-size:11px;color:var(--oc-mut);margin-top:8px;text-align:center}
/* facility */
.oc-fac{background:var(--oc-navy);color:#fff}.oc-fac .oc-wrap{padding:40px 20px}
.oc-fac h2{color:#fff;font-size:23px;margin:0 0 4px}.oc-fac p{color:#b9cbe6;margin:0 0 20px;font-size:14px}
.oc-fg{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.oc-f{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:16px 12px;text-align:center;font-weight:600;font-size:13px}
.oc-f:hover{background:rgba(255,255,255,.13)}.oc-f .e{font-size:23px;display:block;margin-bottom:7px}
/* footer */
.oc-foot{background:#0b243f;color:#a9c0dd;font-size:13.5px}
.oc-foot .oc-wrap{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding:44px 20px 28px}
.oc-foot h5{color:#fff;font-size:13px;letter-spacing:.04em;margin:0 0 12px;text-transform:uppercase}
.oc-foot a{display:block;color:#a9c0dd;padding:5px 0}.oc-foot a:hover{color:#fff}
.oc-foot .brand .oc-logo{color:#fff}.oc-foot .brand p{margin:12px 0;max-width:280px;line-height:1.6}
.oc-fbar{border-top:1px solid rgba(255,255,255,.1)}.oc-fbar .oc-wrap{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;font-size:12.5px}
.oc-fbar .pays span{background:rgba(255,255,255,.1);border-radius:5px;padding:4px 9px;font-weight:700;color:#dbe7f6;margin-left:6px}
@media(max-width:1024px){.oc-catgrid,.oc-pg{grid-template-columns:repeat(3,1fr)}.oc-fg{grid-template-columns:repeat(3,1fr)}
.oc-hero .oc-wrap{grid-template-columns:1fr}.oc-panel{display:none}.oc-mega{width:640px;grid-template-columns:repeat(2,1fr)}.oc-foot .oc-wrap{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.oc-mast .oc-wrap{grid-template-columns:auto auto;gap:12px;height:auto;padding:12px 0}.oc-search{grid-column:1/-1;order:3}
.oc-trust .oc-wrap{grid-template-columns:1fr 1fr}.oc-catgrid,.oc-pg,.oc-fg{grid-template-columns:repeat(2,1fr)}.oc-util span:not(:first-child){display:none}.oc-nav .oc-wrap{overflow-x:auto}}

/* ---- moving trust marquee (seamless loop, pauses on hover) ---- */
.oc-marquee{background:#fff;border-bottom:1px solid var(--oc-line);overflow:hidden;position:relative}
.oc-marquee::before,.oc-marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.oc-marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.oc-marquee::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.oc-mqtrack{display:flex;width:max-content;animation:oc-marq 32s linear infinite}
.oc-marquee:hover .oc-mqtrack{animation-play-state:paused}
.oc-mqtrack .t{display:flex;align-items:center;gap:11px;padding:16px 30px;border-right:1px solid var(--oc-line);white-space:nowrap}
.oc-mqtrack .t .i{font-size:22px}
.oc-mqtrack .t b{display:block;font-size:14px;color:var(--oc-navy)}
.oc-mqtrack .t span{font-size:12px;color:var(--oc-mut)}
@keyframes oc-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---- scroll reveal for sections ---- */
.oc-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.oc-reveal.oc-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.oc-mqtrack{animation:none}.oc-reveal{opacity:1;transform:none;transition:none}}