/* Sparkling Pro — glossy finish + animated cleaning-tools background + hero emblem.
   Loaded LAST so it only restyles. Keeps the navy / sky-blue theme. */
:root{--fx-navy:#0f2c50;--fx-deep:#081c36;--fx-sky:#38bdf8;--fx-sky2:#0b86c4}

/* ---------- animated cleaning-tools background (whole site) ---------- */
.sp-bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background:url(sp-tools-navy.png) 0 0/460px 460px repeat;animation:fxdrift 70s linear infinite}
@keyframes fxdrift{to{background-position:460px 460px}}

/* ---------- hero: layout with emblem ---------- */
html body .sp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,430px);align-items:center;gap:8px;isolation:isolate;
  background:
    radial-gradient(circle at 78% 40%,rgba(56,189,248,.35),transparent 46%),
    linear-gradient(135deg,#0a2243 0,#0f2c50 40%,#14508f 78%,#1aa6e6 140%)}
html body .sp-hero__inner{max-width:none;z-index:3}
.sp-hero__pat{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.11;
  background:url(sp-tools-white.png) 0 0/400px 400px repeat;animation:fxdrift2 55s linear infinite}
@keyframes fxdrift2{to{background-position:-400px 400px}}
.sp-hero__stars{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sp-hero:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 40%)}
.sp-hero:after{content:"";position:absolute;top:0;left:-45%;width:30%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);animation:fxsheen 8s ease-in-out infinite}
@keyframes fxsheen{0%,50%{left:-45%}100%{left:140%}}
html body .sp-hero h1{text-shadow:0 2px 0 rgba(0,0,0,.22),0 10px 22px rgba(0,0,0,.25);
}

/* ---------- emblem ---------- */
.sp-emblem-w{position:relative;z-index:3;display:grid;place-items:center;padding:56px 44px 56px 0}
.sp-emblem{position:relative;width:min(270px,66vw);aspect-ratio:1/1}
.sp-emblem i{position:absolute;display:block;pointer-events:none}
.sp-emblem .g1{inset:-24%;border-radius:50%;background:rgba(56,189,248,.45);filter:blur(46px);animation:fxfloat 7s ease-in-out infinite}
.sp-emblem .g2{inset:-6%;border-radius:50%;background:rgba(255,255,255,.22);filter:blur(30px)}
.sp-emblem .rg{border-radius:50%}
.sp-emblem .r1{inset:-7%;background:conic-gradient(from 0deg,transparent 0 10%,#bdeaff 22%,transparent 34% 52%,#38bdf8 66%,transparent 80%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));animation:fxspin 9s linear infinite}
.sp-emblem .r2{inset:-15%;border:1.5px dashed rgba(190,234,255,.55);animation:fxspin 46s linear infinite reverse}
.sp-emblem .r3{inset:-25%;border:1px solid rgba(255,255,255,.14)}
.sp-emblem .r4{inset:-25%;background:conic-gradient(from 90deg,transparent 0 70%,rgba(255,255,255,.55) 86%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:fxspin 14s linear infinite reverse}
.sp-emblem .orb{inset:-15%;border-radius:50%;animation:fxspin 20s linear infinite}
.sp-emblem .orb.o2{inset:-25%;animation-duration:30s;animation-direction:reverse}
.sp-emblem .orb.o3{inset:-6%;animation-duration:13s}
.sp-emblem .orb b{position:absolute;top:0;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;filter:drop-shadow(0 0 7px rgba(190,234,255,.95));animation:fxtwk 2.4s ease-in-out infinite}
.sp-emblem .orb b:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#fff,#9fdcff);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.sp-emblem .orb.o2 b{width:18px;height:18px;margin:-9px 0 0 -9px;animation-delay:-1s}
.sp-emblem .orb.o3 b{width:14px;height:14px;margin:-7px 0 0 -7px;animation-delay:-.5s}
.sp-emblem .orb.o4{inset:-15%;animation-duration:20s}
.sp-emblem .orb.o4 b{top:100%}
.sp-emblem .disc{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:#fff;overflow:hidden;z-index:2;
  border:5px solid rgba(255,255,255,.9);box-shadow:0 0 0 4px rgba(56,189,248,.35),0 16px 40px rgba(0,0,0,.35),0 -6px 14px rgba(15,44,80,.12) inset;
  animation:fxpulse 3.6s ease-in-out infinite,fxbreathe 7s ease-in-out infinite}
.sp-emblem .disc img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);display:block}
.sp-emblem .disc:before{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;background:linear-gradient(160deg,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 36%)}
.sp-emblem .disc:after{content:"";position:absolute;inset:0;border-radius:50%;z-index:3;background:linear-gradient(115deg,transparent 35%,rgba(56,189,248,.5) 50%,transparent 65%);
  background-size:250% 100%;background-position:150% 0;animation:fxshimmer 5s ease-in-out infinite}
.sp-badge{position:absolute;z-index:4;display:flex;gap:8px;align-items:center;padding:7px 12px 7px 8px;white-space:nowrap;border-radius:16px;background:linear-gradient(180deg,#fff,#e8f4fb);
  color:var(--fx-navy);font:700 .8rem/1.2 inherit;box-shadow:0 1px 0 #fff inset,0 3px 0 #bcd3e3,0 14px 24px rgba(0,0,0,.28);animation:fxfloat 6s ease-in-out infinite}
.sp-badge small{display:block;font-weight:600;color:#5b6f85;font-size:.72rem}
.sp-badge .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#6fd3fc,#0e92d2);box-shadow:0 2px 0 #0a6fa0;font-size:.95rem}
.sp-badge.b1{top:-12%;left:-30%}.sp-badge.b2{bottom:-16%;right:-30%;animation-delay:-2.5s}
@keyframes fxspin{to{transform:rotate(360deg)}}
@keyframes fxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes fxtwk{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.6}}
@keyframes fxpulse{0%,100%{box-shadow:0 0 0 4px rgba(56,189,248,.3),0 16px 40px rgba(0,0,0,.35),0 -6px 14px rgba(15,44,80,.12) inset}50%{box-shadow:0 0 0 9px rgba(56,189,248,.18),0 0 56px rgba(120,214,255,.7),0 -6px 14px rgba(15,44,80,.12) inset}}
@keyframes fxbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes fxshimmer{0%,60%{background-position:150% 0}100%{background-position:-50% 0}}

/* ---------- glossy finish: buttons, headings, cards, header ---------- */
.btn,.sp-btn,.nav-cta,.shop-card__add,.shop-card__enquire,.shop-card__size-btn.is-active,.trolley-count{position:relative;overflow:hidden}
.btn:before,.sp-btn:before,.nav-cta:before,.shop-card__add:before,.shop-card__enquire:before{content:"";position:absolute;left:0;right:0;top:0;height:52%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08));border-radius:inherit;border-bottom-left-radius:60% 40%;border-bottom-right-radius:60% 40%}
.btn:after,.sp-btn:after,.nav-cta:after,.shop-card__add:after,.shop-card__enquire:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover:after,.sp-btn:hover:after,.nav-cta:hover:after,.shop-card__add:hover:after,.shop-card__enquire:hover:after{left:130%}
.sp-btn--ghost:before,.btn--secondary:before,.shop-card__enquire:before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.1))}
.site-header{background:linear-gradient(180deg,rgba(255,255,255,.98) 0,rgba(236,247,253,.92) 100%)!important;backdrop-filter:blur(10px) saturate(1.4)}
.site-header{isolation:isolate}
.site-header:before{content:"";z-index:-1;position:absolute;left:14px;right:14px;top:2px;height:42%;border-radius:22px 22px 60% 60%/22px 22px 14px 14px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
.section-heading h2,.section h2{background:linear-gradient(180deg,#2b5a93 0,#0f2c50 46%,#06162b 54%,#1c4d86 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.9))}
.section--navy h2,.footer h2,.footer h3{background:linear-gradient(180deg,#fff,#bfe6fb 55%,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:none}
.shop-card{position:relative;overflow:hidden;isolation:isolate}
.shop-card:before{content:"";position:absolute;left:0;right:0;top:0;height:46%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.footer{background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  html body .sp-hero{grid-template-columns:1fr}
  .sp-emblem-w{padding:44px 0 56px}.sp-emblem{width:min(250px,64vw)}
  .sp-badge{font-size:.72rem;padding:7px 10px 7px 8px}.sp-badge.b1{left:-8%}.sp-badge.b2{right:-8%}
  .sp-hero .sp-btn{width:100%}.sp-hero__actions{gap:12px}
  .sp-bgfx{opacity:.04;background-size:340px 340px;animation-name:fxdrift3}
}
@keyframes fxdrift3{to{background-position:340px 340px}}
@media (prefers-reduced-motion:reduce){
  .sp-bgfx,.sp-hero__pat,.sp-hero:after,.sp-emblem *,.sp-emblem .disc,.sp-emblem .disc:after,.sp-badge{animation:none!important}
  .btn:after,.sp-btn:after{transition:none}
}

/* ---------- background fills the whole page ---------- */
.sp-bgfx{opacity:.045}
html body,html body .section,html body .section--soft,html body .approved-catalogue{background-color:transparent!important}
html body .section:not(.section--navy),html body .approved-catalogue{background-image:none!important}
html body{background:linear-gradient(180deg,#e9f6fd 0,#f6fbfe 100%) fixed!important}

/* ---------- compact, sortable product grid ---------- */
html body .shop-browser{grid-template-columns:240px minmax(0,1fr)!important;gap:22px!important}
html body .shop-sidebar{position:sticky;top:104px;max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain}
html body .shop-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))!important;gap:14px!important}
html body .shop-card__image{aspect-ratio:4/3!important}
html body .shop-card__image img{padding:6px}
html body .shop-card__desc{display:none!important}
html body .shop-card__body{padding:10px 12px 12px!important;gap:4px!important}
html body .shop-card__category{font-size:.62rem!important}
html body .shop-card__name{font-size:.84rem!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
html body .shop-card__variant{margin-top:2px}
html body .shop-card__size-btn{padding:3px 9px!important;font-size:.7rem!important}
html body .shop-card__footer{flex-wrap:wrap;gap:6px!important;margin-top:auto}
html body .shop-card__price{font-size:1rem!important}
html body .shop-card__add,html body .shop-card__enquire{padding:7px 12px!important;font-size:.78rem!important;min-height:0!important}
.sp-hide{display:none!important}
.sp-toolbar{display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sp-sort{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--fx-navy);font-size:.84rem}
.sp-sort select{appearance:none;-webkit-appearance:none;padding:9px 34px 9px 14px;border-radius:999px;border:1px solid #c9dcea;font:700 .84rem inherit;color:var(--fx-navy);cursor:pointer;
  background:linear-gradient(180deg,#fff,#e8f3fa) no-repeat;box-shadow:0 1px 0 #fff inset,0 3px 0 #bcd3e3,0 8px 12px rgba(15,44,80,.1);
  background-image:linear-gradient(180deg,#fff,#e8f3fa),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f2c50' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 0,right 13px center}
.sp-more{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:22px 0 4px}
.sp-more span{color:#5b6f85;font-weight:600;font-size:.88rem;width:100%;text-align:center}
.sp-more button{cursor:pointer;border:0;border-radius:999px;padding:12px 26px;font:800 .92rem inherit;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#5cccfb,#1aa6e6);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 0 #0a6fa0,0 10px 16px rgba(15,44,80,.18)}
.sp-more button:active{transform:translateY(3px);box-shadow:0 1px 0 #0a6fa0}
.sp-more button.alt{color:var(--fx-navy);background:linear-gradient(180deg,#fff,#e8f3fa);box-shadow:0 1px 0 #fff inset,0 4px 0 #bcd3e3,0 10px 16px rgba(15,44,80,.1)}
.sp-more button:before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05));pointer-events:none}
@media (max-width:900px){html body .shop-browser{grid-template-columns:1fr!important}html body .shop-sidebar{position:static;max-height:none}}
@media (max-width:600px){html body .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}html body .shop-card__footer{flex-direction:column;align-items:stretch}html body .shop-card__add,html body .shop-card__enquire{width:100%}}
/* phone: categories open/close with one tap, and never scroll inside themselves */
@media (max-width:900px){
  html body .shop-sidebar{position:static!important;max-height:none!important;overflow:visible!important}
  html body #shop-category-list{max-height:none!important;overflow:visible!important;display:none!important}
  html body .shop-categories.sp-open #shop-category-list{display:grid!important}
  html body .shop-categories h3{display:flex;align-items:center;justify-content:space-between;margin:0!important;padding:12px 14px;border-radius:12px;background:#eaf6fd;color:#0f2c50!important;font-size:.9rem!important;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
  html body .shop-categories h3:after{content:"\25BE  Tap to choose";font-size:.74rem;font-weight:700;color:#0a6a9c;text-transform:none;letter-spacing:0}
  html body .shop-categories.sp-open h3:after{content:"\25B4  Close"}
  html body .shop-categories.sp-open h3{margin-bottom:10px!important}
  html body .shop-search input{margin-bottom:12px!important}
}

.sp-badge{display:none!important}

/* ---------- dark sections keep their own background + white text ---------- */
html body .section--navy{position:relative;overflow:hidden;background-color:#0f2c50!important;
  background-image:radial-gradient(circle at 85% 20%,rgba(56,189,248,.28),transparent 45%),linear-gradient(135deg,#0a2243,#0f2c50 45%,#14508f)!important;color:#fff}
html body .section--navy:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;background:url(sp-tools-white.png) 0 0/400px 400px repeat;animation:fxdrift2 60s linear infinite}
html body .section--navy>.container{position:relative;z-index:1}
html body .section--navy h2,html body .section--navy h3,html body .section--navy .service-card h3,
html body .contact-panel h2,html body .footer h2,html body .footer h3{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#fff!important;color:#fff!important;filter:none!important;text-shadow:0 2px 0 rgba(0,0,0,.18)}
html body .section--navy p,html body .section--navy .section-heading p,html body .section--navy .service-card p{color:#d6ebf8!important}
html body .section--navy .eyebrow,html body .contact-panel .eyebrow{color:#7ad8fb!important}
html body .section--navy .service-card{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px rgba(0,0,0,.18)}
html body .contact-panel{position:relative;overflow:hidden;color:#fff}
html body .contact-panel p{color:#d6ebf8}
html body .contact-panel:before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background:url(sp-tools-white.png) 0 0/340px 340px repeat;animation:fxdrift2 60s linear infinite}
html body .contact-panel>*{position:relative}
html body .footer{background-color:#0f2c50}
/* light sections: readable text on the faint pattern */
html body .section:not(.section--navy) .section-heading p,html body .contact-card dd,html body .contact-card dt{color:#2a3b52}
html body .contact-card{background:#fff}
html body .eyebrow{color:#0a6a9c!important}html body .section--navy .eyebrow,html body .contact-panel .eyebrow{color:#7ad8fb!important}

/* mobile menu fix: backdrop-filter made the header trap the fixed menu panel */
html body .site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body .site-header,html body .site-header .nav-wrap{transform:none!important;filter:none!important;contain:none!important;will-change:auto!important;perspective:none!important}

/* ---------- homepage banner: white panel behind the writing ---------- */
html body .sp-hero__inner{background:linear-gradient(180deg,#fff 0,#f3faff 100%);border-radius:28px;margin:clamp(18px,3vw,34px) 0 clamp(18px,3vw,34px) clamp(16px,3vw,40px);padding:clamp(24px,3.4vw,40px) clamp(22px,3.4vw,42px);box-shadow:0 1px 0 #fff inset,0 6px 0 #c9dcea,0 22px 40px rgba(4,16,32,.38)}
html body .sp-hero h1{color:#0f2c50!important;-webkit-text-fill-color:#0f2c50!important;text-shadow:none!important}
html body .sp-hero p{color:#3d5a75!important}
html body .sp-hero .sp-btn--ghost{background:#fff!important;border:2px solid #0f2c50!important;color:#0f2c50!important}
html body .sp-hero__facts li{background:#e6f4fb!important;border:1px solid #bfdff0!important;color:#0f2c50!important;backdrop-filter:none!important}
@media (max-width:900px){html body .sp-hero__inner{margin:14px}}

/* v13 fonts: bold Georgia-style serif headings + brand name */
html body,html body :root{--sp-display:Georgia,"Times New Roman",Times,serif}
html body h1,html body h2,html body h3,html body h4,html body .hero-title,html body .sp-hero h1,html body .page-hero h1,html body .section-title,html body .shop-card__name,html body .shop-card__price,html body .sp-stat strong,html body .page-hero .stat strong,html body .brand-copy strong,html body .footer-brand strong{font-family:Georgia,"Times New Roman",Times,serif!important;font-weight:700!important;letter-spacing:-.01em!important}
html body .sp-hero h1,html body .page-hero h1{font-weight:700!important;letter-spacing:-.02em!important;line-height:1.1}
html body .brand-copy strong,html body .footer-brand strong{font-weight:700!important;letter-spacing:.02em!important;text-transform:none}