/* Sparkling Pro revamp: glossy 3D navigation, buttons and cards.
   Loaded after the page's own styles, so it only overrides looks. */
:root{
  --sp-navy:#0f2c50; --sp-navy-deep:#081c36; --sp-sky:#38bdf8; --sp-sky-deep:#0b86c4;
  --sp-foam:#eaf7fd; --sp-ink:#14213d;
  --sp-display:"Bricolage Grotesque",Inter,system-ui,sans-serif;
}
body{background:linear-gradient(180deg,#eef8fd 0,#fff 520px)}
h1,h2,h3,.brand-copy strong,.hero-title{font-family:var(--sp-display);letter-spacing:-.02em}

/* ---------- floating 3D navigation bar ---------- */
.site-header{
  position:sticky;top:10px;z-index:100;margin:10px auto 0;width:min(calc(100% - 24px),1240px);
  border:1px solid rgba(255,255,255,.9);border-radius:26px;
  background:linear-gradient(180deg,#fff 0,#f0f8fd 100%);
  box-shadow:0 1px 0 #fff inset,0 -3px 0 rgba(15,44,80,.07) inset,0 6px 0 #cfe3ef,0 18px 38px rgba(15,44,80,.18);
  backdrop-filter:none;transition:box-shadow .25s ease,transform .25s ease;
}
.site-header.is-scrolled{box-shadow:0 1px 0 #fff inset,0 -3px 0 rgba(15,44,80,.07) inset,0 4px 0 #cfe3ef,0 10px 24px rgba(15,44,80,.2)}
.site-header .nav-wrap{min-height:76px;width:calc(100% - 28px)}
.site-header .brand-mark{width:54px!important;height:54px!important;box-shadow:0 3px 0 #cfe3ef,0 8px 14px rgba(15,44,80,.18);background:#fff}
.site-header .brand-copy strong{font-size:1.15rem;color:var(--sp-navy);text-transform:none}
.site-header .brand-copy small{display:none}
.primary-nav{gap:6px}
.primary-nav a:not(.nav-cta){
  position:relative;padding:10px 15px;border-radius:14px;font-weight:700;color:var(--sp-navy);text-decoration:none;
  background:linear-gradient(180deg,#fff,#eef6fb);border:1px solid #d6e6f0;
  box-shadow:0 3px 0 #c5dbe9,0 6px 10px rgba(15,44,80,.08);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
}
.primary-nav a:not(.nav-cta):hover{transform:translateY(-2px);box-shadow:0 5px 0 #c5dbe9,0 10px 16px rgba(15,44,80,.14);color:var(--sp-sky-deep)}
.primary-nav a:not(.nav-cta):active,.primary-nav a.is-active:not(.nav-cta){
  transform:translateY(3px);box-shadow:0 0 0 #c5dbe9,0 2px 6px rgba(15,44,80,.18) inset;
}
.primary-nav a.is-active:not(.nav-cta){background:linear-gradient(180deg,#5cccfb,#1aa6e6);color:#fff;border-color:#0e8fcc;text-shadow:0 1px 0 rgba(0,0,0,.18)}

/* ---------- glossy 3D buttons ---------- */
.nav-cta,.btn--primary,.shop-card__add,.sp-btn{position:relative;overflow:hidden}
.trolley-trigger--icon,.mobile-trolley-trigger{position:relative;overflow:visible}
.nav-cta,.btn--primary,.sp-btn--navy{
  background:linear-gradient(180deg,#235a99 0,#0f2c50 55%,#0a2142 100%)!important;color:#fff!important;border:1px solid #071a33!important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 5px 0 #06152a,0 12px 20px rgba(8,28,54,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.nav-cta::after,.btn--primary::after,.shop-card__add::after,.sp-btn::after{
  content:"";position:absolute;left:8%;right:8%;top:2px;height:46%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none;
}
.nav-cta:hover,.btn--primary:hover,.sp-btn--navy:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 7px 0 #06152a,0 16px 24px rgba(8,28,54,.38)}
.nav-cta:active,.btn--primary:active,.sp-btn--navy:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 #06152a,0 4px 8px rgba(8,28,54,.3)}
.shop-card__add,.sp-btn--sky{
  background:linear-gradient(180deg,#6fd3fc 0,#2bb3f0 52%,#0e92d2 100%)!important;color:#fff!important;border:1px solid #0b7fb8!important;border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 4px 0 #0a6fa0,0 9px 14px rgba(14,146,210,.35);text-shadow:0 1px 0 rgba(0,0,0,.2);font-weight:800;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.shop-card__add:hover:not(:disabled),.sp-btn--sky:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 6px 0 #0a6fa0,0 14px 20px rgba(14,146,210,.4)}
.shop-card__add:active:not(:disabled),.sp-btn--sky:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 #0a6fa0,0 3px 6px rgba(14,146,210,.3)}
.shop-card__add:disabled{background:#d5dee6!important;border-color:#c1ccd6!important;box-shadow:0 3px 0 #b5c1cc;text-shadow:none}
.btn--secondary,.sp-btn--ghost,.shop-card__enquire{
  background:linear-gradient(180deg,#fff,#eaf3f9)!important;color:var(--sp-navy)!important;border:1px solid #c9dcea!important;
  box-shadow:0 1px 0 #fff inset,0 4px 0 #bcd3e3,0 8px 12px rgba(15,44,80,.1);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn--secondary:hover,.sp-btn--ghost:hover,.shop-card__enquire:hover{transform:translateY(-2px);box-shadow:0 1px 0 #fff inset,0 6px 0 #bcd3e3,0 12px 16px rgba(15,44,80,.14)}
.btn--secondary:active,.sp-btn--ghost:active,.shop-card__enquire:active{transform:translateY(3px);box-shadow:0 1px 0 #fff inset,0 1px 0 #bcd3e3}
.trolley-trigger--icon,.mobile-trolley-trigger{
  background:linear-gradient(180deg,#fff,#e8f3fa)!important;border:1px solid #c9dcea!important;border-radius:50%!important;
  box-shadow:0 1px 0 #fff inset,0 4px 0 #bcd3e3,0 8px 12px rgba(15,44,80,.12);
}
.trolley-count{background:linear-gradient(180deg,#6fd3fc,#0e92d2)!important;color:#fff!important;box-shadow:0 2px 0 #0a6fa0}
.btn:focus-visible,.nav-cta:focus-visible,.shop-card__add:focus-visible,.primary-nav a:focus-visible,.sp-btn:focus-visible{outline:3px solid #0f2c50;outline-offset:3px}

/* ---------- hero ---------- */
.sp-hero{width:min(calc(100% - 24px),1240px);margin:26px auto 0;border-radius:34px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 82% 22%,rgba(255,255,255,.28) 0 54px,transparent 55px),
    radial-gradient(circle at 90% 62%,rgba(255,255,255,.18) 0 90px,transparent 91px),
    radial-gradient(circle at 70% 84%,rgba(255,255,255,.22) 0 34px,transparent 35px),
    radial-gradient(circle at 96% 12%,rgba(255,255,255,.16) 0 26px,transparent 27px),
    linear-gradient(135deg,#0f2c50 0,#14508f 58%,#1aa6e6 130%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 0 #081c36,0 28px 50px rgba(8,28,54,.3);color:#fff}
.sp-hero__inner{padding:clamp(28px,4.2vw,52px) clamp(22px,5vw,64px);max-width:860px;position:relative}
.sp-hero h1{margin:0 0 16px;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.04;font-weight:800;color:#fff}
.sp-hero p{margin:0 0 22px;font-size:1.1rem;line-height:1.6;color:#d6ebf8;max-width:56ch}
.sp-hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.sp-hero .sp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:999px;font-weight:800;text-decoration:none;font-size:1rem;cursor:pointer}
.sp-hero .sp-btn--ghost{color:var(--sp-navy)!important}
.sp-hero__facts{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.sp-hero__facts li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);font-size:.88rem;font-weight:600;color:#fff;backdrop-filter:blur(6px)}

/* ---------- catalogue ---------- */
#product-catalogue{padding-top:54px}
#product-catalogue .eyebrow{display:none}
.section-heading h2{font-size:clamp(2rem,4vw,3rem);color:var(--sp-navy)}
.shop-sidebar{border-radius:22px!important;background:linear-gradient(180deg,#fff,#f3f9fd)!important;border:1px solid #d6e6f0!important;
  box-shadow:0 1px 0 #fff inset,0 5px 0 #d3e5f0,0 14px 26px rgba(15,44,80,.1)}
.shop-search input{border-radius:14px!important;border:1px solid #c9dcea!important;box-shadow:0 2px 5px rgba(15,44,80,.1) inset;background:#fff!important}
.shop-search input:focus{outline:3px solid rgba(56,189,248,.5);outline-offset:1px}
.shop-category-item{border-radius:12px}
.shop-card{border-radius:20px!important;border:1px solid #d6e6f0!important;
  box-shadow:0 1px 0 #fff inset,0 4px 0 #d3e5f0,0 12px 22px rgba(15,44,80,.08);
  transition:transform .18s ease,box-shadow .18s ease!important}
.shop-card:hover{transform:translateY(-6px)!important;box-shadow:0 1px 0 #fff inset,0 8px 0 #c3dcec,0 26px 36px rgba(15,44,80,.18)!important}
.shop-card__image{background:radial-gradient(circle at 50% 38%,#fff 0,#e3f4fc 100%)!important}
.shop-card__image img{transition:transform .25s ease}
.shop-card:hover .shop-card__image img{transform:scale(1.05)}
.shop-card__category{letter-spacing:.02em!important;text-transform:none!important;color:var(--sp-sky-deep)!important;font-weight:700}
.shop-card__name{font-family:var(--sp-display);color:var(--sp-navy)}
.shop-card__price{font-family:var(--sp-display);font-size:1.15rem!important}
.shop-card__size-btn{border-radius:999px!important;box-shadow:0 2px 0 #c9dcea;transition:transform .1s ease,box-shadow .1s ease}
.shop-card__size-btn:active{transform:translateY(2px);box-shadow:none}
.shop-card__size-btn.is-active{background:linear-gradient(180deg,#5cccfb,#1aa6e6)!important;color:#fff!important;border-color:#0e8fcc!important;box-shadow:0 2px 0 #0a6fa0}

/* ---------- footer ---------- */
.footer{border-radius:34px 34px 0 0;margin-top:30px}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .site-header{top:6px;border-radius:20px;width:calc(100% - 16px)}
  .primary-nav.is-open a:not(.nav-cta){display:block;margin:6px 0}
  .sp-hero{border-radius:24px;margin-top:16px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}