/*
Theme Name: Spare Mart
Description: Lightweight WooCommerce theme for Spare Mart, Perambra (appliance spare parts, tools, service). Elementor compatible.
Version: 1.0
Text Domain: sparemart
*/
:root{--b:#1550b8;--bd:#0c2f73;--o:#a8531f;--c:#1d2430;--g:#f3f6fb;--ln:#dde4ef}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--c);background:#fff}
img{max-width:100%;height:auto}a{color:var(--b)}h1,h2,h3{line-height:1.2;margin:0 0 .5em}.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
.btn,.button,button.single_add_to_cart_button{display:inline-block;background:var(--b);color:#fff!important;padding:12px 22px;border:0;border-radius:6px;font-weight:600;text-decoration:none;cursor:pointer;min-height:44px}
.btn:hover{background:var(--bd)}.btn.o{background:var(--o)}.btn.wa{background:#1f9d55}.btn.w{background:#fff;color:var(--bd)!important}
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--ln)}header.site .wrap{display:flex;align-items:center;gap:18px;min-height:70px}
header.site .logo img{height:46px;width:auto;display:block}nav{flex:1}nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0}nav li{position:relative}nav a{text-decoration:none;color:var(--c);font-weight:500;font-size:15px}
nav ul ul{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--ln);padding:10px 16px;min-width:210px;flex-direction:column;gap:8px}nav li:hover>ul{display:flex}
.hd-r{display:flex;align-items:center;gap:12px}.hd-r form input{padding:8px 10px;border:1px solid var(--ln);border-radius:6px;width:150px}.cartl{text-decoration:none;font-weight:600}
.mt{display:none;background:none;border:1px solid var(--ln);padding:8px 12px;font-size:20px;border-radius:6px}
.hero{background:linear-gradient(120deg,#0c2f73,#1550b8);color:#fff;padding:70px 0}.hero .wrap{display:grid;gap:30px;grid-template-columns:1.1fr .9fr;align-items:center}.hero h1{font-size:clamp(30px,4.5vw,48px)}.hero img{border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35)}.hero .btn{margin:4px 6px 4px 0}
section.s{padding:60px 0}section.alt{background:var(--g)}.center{text-align:center}.sub{color:#5d6879;max-width:640px;margin:0 auto 30px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.card{border:1px solid var(--ln);border-radius:8px;padding:22px;background:#fff}.card .ic{font-size:30px}.card h3{font-size:18px}
.brands{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.brands span{border:1px solid var(--ln);padding:10px 20px;border-radius:6px;font-weight:700;background:#fff}
.steps{counter-reset:s}.steps .card{position:relative;padding-top:44px}.steps .card:before{counter-increment:s;content:counter(s);position:absolute;top:-1px;left:-1px;background:var(--o);color:#fff;width:34px;height:34px;border-radius:8px 0 8px 0;text-align:center;line-height:34px;font-weight:700}
.split{display:grid;gap:30px;grid-template-columns:1fr 1fr;align-items:center}iframe{border:0;width:100%;height:340px;border-radius:8px}
.cta{background:var(--bd);color:#fff;text-align:center;padding:55px 0}.notice{background:#fff7ec;border-left:4px solid var(--o);padding:10px 14px;margin:14px 0}
footer.site{background:#10182a;color:#c5cddb;padding:46px 0 18px;font-size:15px}footer.site a{color:#c5cddb;text-decoration:none}footer.site h4{color:#fff}footer.site ul{list-style:none;padding:0}footer.site img{height:44px;background:#fff;padding:6px 10px;border-radius:6px}
.fg{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.copy{border-top:1px solid #2b3550;margin-top:24px;padding-top:14px;text-align:center}
.waf{position:fixed;right:14px;bottom:14px;z-index:99;background:#1f9d55;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.3)}.mbar{display:none}
form.enq{display:grid;gap:12px;max-width:640px}form.enq input,form.enq textarea{padding:12px;border:1px solid var(--ln);border-radius:6px;font:inherit;width:100%}.ok{background:#e8f3ea;border-left:4px solid #2e7d4f;padding:14px}
.woocommerce ul.products li.product{border:1px solid var(--ln);border-radius:8px;padding:12px}
@media(max-width:900px){.hero .wrap,.split{grid-template-columns:1fr}.mt{display:block;margin-left:auto}nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:14px 18px;border-bottom:1px solid var(--ln)}nav.open{display:block}nav ul{flex-direction:column}nav ul ul{display:flex;position:static;border:0;padding:6px 0 0 14px}.hd-r form,.hd-r .btn{display:none}.hero{padding:44px 0}
.mbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:98;background:#fff;border-top:1px solid var(--ln)}.mbar a{flex:1;text-align:center;padding:13px 4px;font-weight:600;text-decoration:none;color:var(--c)}.mbar a:nth-child(2){background:#1f9d55;color:#fff}.mbar a:nth-child(3){background:var(--b);color:#fff}body{padding-bottom:48px}.waf{bottom:64px}}
/* Animated product banner (banner.php): left side static, right side animates - 4 slides x 5s */
.sm-bn{position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,#0c2f73,#1550b8);padding:70px 0}
.sm-bn-gear{position:absolute;right:-120px;top:-120px;width:440px;height:440px;opacity:.1;animation:smrot 70s linear infinite}.sm-bn-gear circle{fill:none;stroke:#fff}
.sm-bn-main{position:relative;display:grid;gap:30px;grid-template-columns:1.1fr .9fr;align-items:center}
.sm-bn h1{font-size:clamp(30px,4.5vw,48px)}.sm-bn .btn{margin:4px 6px 4px 0}
.sm-bn-stage{display:grid}
.sm-bn-slide{grid-area:1/1;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;animation:smslide 20s infinite both;animation-delay:calc(var(--i)*5s)}
.sm-bn-art{width:100%}.sm-bn-art svg{display:block;width:100%;max-width:380px;height:auto;margin:0 auto;overflow:visible}
.sm-bn-cap{margin:6px 0 0;font-size:20px;font-weight:700;animation:smtxt 20s infinite both;animation-delay:calc(var(--i)*5s)}
.sm-bn-app{animation:smapp 20s infinite both;animation-delay:calc(var(--i)*5s)}
.sm-bn-part{animation:smpull 20s infinite both;animation-delay:calc(var(--i)*5s)}
.sm-bn-ln,.sm-bn-lb{opacity:0;animation:smfade 20s infinite both;animation-delay:calc(var(--i)*5s)}
.sm-bn-ln{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:4 5}.sm-bn-lb{fill:#fff;font:700 15px system-ui,sans-serif}
.sm-bn-spin{transform-box:fill-box;transform-origin:center;animation:smrot 3s linear infinite}
.sm-bn-pg{display:flex;gap:6px;margin-top:14px}.sm-bn-pg i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.sm-bn-pg i:after{content:"";position:absolute;inset:0;background:#f4a259;transform-origin:left;transform:scaleX(0);animation:smfill 20s linear infinite both;animation-delay:calc(var(--i)*5s)}
.sm-bn-right:hover,.sm-bn-right:hover *,.sm-bn-right:hover *:after{animation-play-state:paused}
@keyframes smslide{0%{opacity:0;visibility:hidden}3%,22%{opacity:1;visibility:visible}25%,100%{opacity:0;visibility:hidden}}
@keyframes smtxt{0%,3%{opacity:0;transform:translateY(10px)}8%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:none}}
@keyframes smapp{0%{transform:translateX(30px)}6%,22%{transform:none}25%,100%{transform:translateX(-20px)}}
@keyframes smpull{0%{transform:translate(0,0)}8%{transform:translate(0,0);animation-timing-function:cubic-bezier(.3,1.3,.5,1)}15%,21%{transform:translate(var(--dx),var(--dy))}25%,100%{transform:translate(0,0)}}
@keyframes smfade{0%,13%{opacity:0}18%,21%{opacity:1}24%,100%{opacity:0}}
@keyframes smfill{0%{transform:scaleX(0)}24.5%{transform:scaleX(1)}25%,100%{transform:scaleX(0)}}
@keyframes smrot{to{transform:rotate(360deg)}}
@media(max-width:900px){.sm-bn{padding:44px 0}.sm-bn-main{grid-template-columns:1fr}.sm-bn-art svg{max-width:280px}.sm-bn-gear{width:280px;height:280px}}
@media(prefers-reduced-motion:reduce){.sm-bn *,.sm-bn *:after{animation:none!important}.sm-bn-slide:first-child{opacity:1;visibility:visible}.sm-bn-slide:first-child .sm-bn-part{transform:translate(var(--dx),var(--dy))}.sm-bn-slide:first-child .sm-bn-ln,.sm-bn-slide:first-child .sm-bn-lb,.sm-bn-slide:first-child .sm-bn-cap{opacity:1}.sm-bn-pg{display:none}}
/* Category cards with background art, brand logos, coloured feature cards */
.card.cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;border:0;color:#fff;background:linear-gradient(180deg,rgba(8,28,70,0) 25%,rgba(8,28,70,.92) 62%),var(--bg) center top/cover}
.card.cat .ic{position:absolute;top:12px;left:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(255,255,255,.92);border-radius:50%}
.card.cat h3{color:#fff;margin-bottom:.3em}.card.cat p{color:#dbe6fa;margin:0 0 10px;font-size:15px}.card.cat a{color:#ffd2ad;font-weight:600}
.brands span{display:flex;align-items:center;justify-content:center;height:78px;min-width:132px;padding:8px 16px}.brands img{display:block;height:46px;width:auto;max-width:130px;object-fit:contain}
.why .card{border:0;border-top:5px solid var(--k);background:var(--t)}.why .card h3{color:var(--k)}
.why .card:nth-child(6n+1){--k:#1550b8;--t:#e6efff}.why .card:nth-child(6n+2){--k:#a8531f;--t:#fff0e3}.why .card:nth-child(6n+3){--k:#1d7a4f;--t:#e3f5ea}
.why .card:nth-child(6n+4){--k:#6a3fa0;--t:#efe9fb}.why .card:nth-child(6n+5){--k:#0e6e78;--t:#def3f4}.why .card:nth-child(6n){--k:#8a6200;--t:#fff4cf}
.pro .card{border:0;color:#fff;background:var(--k);display:flex;align-items:center;justify-content:center;min-height:84px}.pro .card h3{color:#fff;font-size:17px}
.pro .card:nth-child(6n+1){--k:#0c2f73}.pro .card:nth-child(6n+2){--k:#1550b8}.pro .card:nth-child(6n+3){--k:#a8531f}.pro .card:nth-child(6n+4){--k:#1d6b4f}.pro .card:nth-child(6n+5){--k:#6a3fa0}.pro .card:nth-child(6n){--k:#0e6e78}
/* ===== Inner pages: thin banner, reveal animation, About / Services / Brands / Contact ===== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}.rv.in{opacity:1;transform:none}
.pg-bn{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;min-height:210px;padding:30px 0;background:linear-gradient(120deg,#0c2f73,#1550b8,#0c2f73);background-size:200% 100%;animation:pgbg 14s ease-in-out infinite alternate}
.pg-bn .sm-bn-gear{width:320px;height:320px;right:-80px;top:-110px}
.pg-bn-in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;width:100%}
.pg-bn h1{font-size:clamp(28px,4vw,42px);margin:0 0 6px;animation:pgin .8s .1s both}.pg-bn p{margin:0;color:#dbe6fa;max-width:560px;animation:pgin .8s .25s both}
.crumb{font-size:14px;color:#ffd2ad;margin-bottom:8px;animation:pgin .8s both}.crumb a{color:#fff;text-decoration:none}.crumb span{margin:0 6px;opacity:.6}
.pg-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#f4a259;opacity:.5;animation:pgfloat 5s ease-in-out infinite;animation-delay:calc(var(--i,0)*1s)}
.pg-bn-art{display:flex;justify-content:center;align-items:center;height:150px}
.pg-fr{height:150px;width:auto;max-width:100%;border-radius:12px;border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 26px rgba(0,0,0,.35);animation:pgfloat 5s ease-in-out infinite}
.pg-chips{display:flex;gap:12px}.pg-chips span{display:flex;align-items:center;height:64px;padding:10px 14px;background:#fff;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:pgfloat 4s ease-in-out infinite;animation-delay:calc(var(--i)*.6s)}.pg-chips img{height:38px;width:auto}
.pg-pin{width:140px;height:150px}.pg-pin .r{fill:none;stroke:#f4a259;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pgpulse 2.4s ease-out infinite}.pg-pin .r2{animation-delay:1.2s}.pg-pin .pn{animation:pgfloat 3s ease-in-out infinite}
@keyframes pgbg{to{background-position:100% 0}}@keyframes pgin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pgfloat{50%{transform:translateY(-8px)}}@keyframes pgpulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.7);opacity:0}}@keyframes pgmq{to{transform:translateX(-50%)}}
.eyebrow{display:inline-block;color:var(--o);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin-bottom:8px}.ttl{font-size:clamp(24px,3vw,34px)}
.ab-img{position:relative}.ab-img img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 14px 34px rgba(12,47,115,.22)}
.ab-badge{position:absolute;left:-12px;bottom:22px;background:var(--o);color:#fff;font-weight:700;padding:10px 16px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:pgfloat 4s ease-in-out infinite}
.ofr{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin-top:20px}
.ofr .card{display:flex;align-items:center;gap:14px;transition:transform .25s,box-shadow .25s,opacity .7s}.ofr .card:hover,.why .card:hover,.ci .card:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(12,47,115,.14)}
.ofr h3{margin:0;font-size:17px}.ic2{flex:none;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--t,#e6efff)}
.hl{position:relative;overflow:hidden;color:#fff;text-align:center;padding:64px 0;background:linear-gradient(120deg,#0c2f73,#1550b8)}.hl:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-180px;background:rgba(255,255,255,.06)}
.hl .wrap{position:relative;max-width:860px}.hl-t{font-size:clamp(26px,4vw,40px)}.hl-t span{display:inline-block;margin:0 6px;border-bottom:4px solid #f4a259;padding-bottom:2px}.hl p{color:#dbe6fa}
.why .card{transition:transform .25s,box-shadow .25s,opacity .7s}
.svc{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sv{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--ln);border-radius:14px;transition:transform .3s,box-shadow .3s,opacity .7s}.sv:hover{transform:translateY(-7px);box-shadow:0 16px 34px rgba(12,47,115,.18)}
.sv .im{overflow:hidden;aspect-ratio:8/5}.sv .im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}.sv:hover .im img{transform:scale(1.08)}
.sv .bd{position:relative;display:flex;flex-direction:column;flex:1;padding:34px 20px 20px}.sv .bg{position:absolute;top:-26px;left:20px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:26px;background:#fff;border:3px solid var(--o);border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.15)}
.sv h3{font-size:19px}.sv p{flex:1;margin:0 0 12px;color:#5d6879;font-size:15px}.sv .lk{font-weight:700;text-decoration:none}.sv .lk:hover{color:var(--o)}
.fm{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:28px;box-shadow:0 10px 28px rgba(12,47,115,.08)}.fm form.enq{max-width:none}
.mq{overflow:hidden;margin:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-t{display:flex;width:max-content;animation:pgmq 30s linear infinite}.mq:hover .mq-t{animation-play-state:paused}
.mq-t span{display:flex;align-items:center;justify-content:center;flex:none;height:78px;min-width:140px;margin-right:16px;padding:8px 18px;background:#fff;border:1px solid var(--ln);border-radius:8px}.mq-t img{display:block;height:46px;width:auto;max-width:130px;object-fit:contain}
.bg9{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bc{display:block;padding:24px 16px 18px;text-align:center;text-decoration:none;color:var(--c);background:#fff;border:1px solid var(--ln);border-radius:14px;transition:transform .3s,box-shadow .3s,border-color .3s,opacity .7s}
.bc .lg{display:flex;align-items:center;justify-content:center;height:80px}.bc img{max-height:56px;width:auto;max-width:150px;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s,transform .3s}
.bc b{display:block;margin-top:6px}.bc small{color:var(--b)}.bc:hover{transform:translateY(-6px);border-color:var(--b);box-shadow:0 14px 28px rgba(12,47,115,.16)}.bc:hover img{filter:none;opacity:1;transform:scale(1.1)}
.ct{display:grid;gap:26px;grid-template-columns:1fr 1fr;align-items:stretch}
.mp{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--ln);border-radius:14px;box-shadow:0 10px 28px rgba(12,47,115,.08)}.mp iframe{flex:1;min-height:420px;height:100%;border-radius:0;display:block}
.mp-b{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--ln)}
.ci{margin-top:26px}.ci .card{text-align:center;transition:transform .25s,box-shadow .25s,opacity .7s}.ic3{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:8px;font-size:26px;background:#e6efff;border-radius:50%}.ci h3{margin-bottom:.3em}.ci p{margin:0;word-break:break-word}
@media(max-width:900px){.pg-bn{min-height:150px;padding:24px 0}.pg-bn-in{grid-template-columns:1fr}.pg-bn-art{display:none}.ct{grid-template-columns:1fr}.mp iframe{min-height:320px}.ab-badge{left:8px}}
@media(prefers-reduced-motion:reduce){.pg-bn,.pg-bn *,.mq-t,.ab-badge{animation:none!important}.rv{opacity:1;transform:none;transition:none}}