/* Olympic Pool & Spa shop design system */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:wght@500;600&display=swap');
:root{
  --navy:#07182b; --deep:#0a2540; --aqua:#19b8d8; --aqua-soft:#5fd3ea;
  --gold:#d4a94e; --sand:#f6f4ef; --ink:#13293d; --mut:#5b7186; --line:#e5eaef;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#fafbfc;line-height:1.6}
h1,h2,h3,h4{font-family:'Sora',sans-serif;color:var(--navy)}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.kicker{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--aqua)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:700;font-size:.92rem;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;font-family:'Inter'}
.btn-gold{background:linear-gradient(135deg,#e6c26e,var(--gold));color:var(--navy)}
.btn-navy{background:var(--navy);color:#fff}
.btn-line{border:1.5px solid var(--navy);color:var(--navy);background:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(7,24,43,.18)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
@media (prefers-reduced-motion: reduce){.btn:hover,.p-card:hover,.cat-tile:hover{transform:none!important}}

/* NAV, thicker glass bar carrying the living Reflection mark */
nav{position:sticky;top:0;z-index:50;background:rgba(7,22,32,.42);backdrop-filter:blur(24px);border-bottom:1px solid rgba(201,168,106,.18)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:125px;max-width:none;padding:0 clamp(24px, calc(25vw - 271px), 400px)}
.logo{display:flex;align-items:center}
.logo svg{display:block}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{color:#e9e2d4;font-size:1.53rem;font-weight:400;font-family:'Marcellus',serif;letter-spacing:.07em;transition:color .2s,letter-spacing .25s}
.navlinks a:hover{color:#c9a86a;letter-spacing:.1em}
.cart-link{position:relative;background:linear-gradient(135deg,#dfc494,#c9a86a);color:#0b1620!important;padding:12px 26px;border-radius:999px;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:1.32rem!important;letter-spacing:.02em!important}
.cart-link:hover{letter-spacing:.02em!important}
.cart-badge{background:#0b1620;color:#f5f2ec;border-radius:999px;font-size:.85rem;padding:1px 9px;margin-left:7px}
@media(max-width:760px){.navlinks a:not(.cart-link){display:none}}

/* CLICK-TO-GO animations: distinct from hover, plays before the page changes */
nav a.going{animation:navGo .26s ease both}
@keyframes navGo{
  0%{transform:translateY(0)}
  55%{transform:translateY(3px);color:#c9a86a;text-shadow:0 6px 14px rgba(201,168,106,.5)}
  100%{transform:translateY(-2px);opacity:.5}
}
.going:not(nav a){animation:pressGo .24s ease both}
@keyframes pressGo{
  0%{transform:scale(1)}
  50%{transform:scale(.962);box-shadow:0 0 0 3px rgba(201,168,106,.45);filter:brightness(1.18)}
  100%{transform:scale(.985);opacity:.72}
}

/* PAGE HEAD */
.page-head{background:linear-gradient(160deg,var(--navy),#0e3a52);color:#fff;padding:48px 0 40px}
.page-head h1{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:8px 0 6px}
.page-head p{color:#a7c6da;font-size:.95rem;max-width:640px}
.crumb{font-size:.8rem;color:#9fc2d8;margin-bottom:6px}
.crumb a{color:var(--aqua-soft)}

/* SEARCH */
.searchband{background:#fff;border-bottom:1px solid var(--line);padding:18px 0}
.searchband .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.search-input{flex:1;min-width:240px;padding:13px 22px;border-radius:999px;border:1.5px solid var(--line);font-size:.98rem;font-family:'Inter'}
.search-input:focus{outline:none;border-color:var(--aqua)}

/* CATEGORY TILES */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:26px 0 8px}
.cat-tile{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center;cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s}
.cat-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(7,24,43,.09)}
.cat-tile.active{border-color:var(--navy);background:var(--navy);color:#fff}
.cat-tile.active h4{color:#fff}
.cat-tile .ico{font-size:1.5rem}
.cat-tile h4{font-size:.78rem;margin-top:6px;line-height:1.25}
.cat-tile .cnt{font-size:.68rem;color:var(--mut)}
.cat-tile.active .cnt{color:#9fc2d8}

/* PRODUCT GRID */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px;padding:26px 0 60px}
.p-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.p-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(7,24,43,.1)}
.p-img{aspect-ratio:1.3;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:linear-gradient(150deg,#eef6f9,#e3eff4);overflow:hidden;cursor:pointer}
.p-img img{width:100%;height:100%;object-fit:contain;background:#fff;padding:10px}
.p-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.p-cat{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua);font-weight:600}
.p-body h4{font-size:.95rem;margin:3px 0 8px;font-weight:600;cursor:pointer}
.p-body h4:hover{color:var(--aqua)}
.p-row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.p-price{font-weight:700;font-family:'Sora';color:var(--navy);font-size:1.05rem}
.stock{font-size:.68rem;font-weight:600;padding:4px 10px;border-radius:999px;background:#e2f6e9;color:#177245;white-space:nowrap}
.add-btn{width:100%;margin-top:12px;padding:10px;border-radius:999px;border:none;background:var(--navy);color:#fff;font-weight:700;font-size:.82rem;cursor:pointer;font-family:'Inter'}
.add-btn:hover{background:var(--aqua)}

/* QTY STEPPER */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:36px;height:36px;border:none;background:#fff;font-size:1.05rem;cursor:pointer;color:var(--navy)}
.qty button:hover{background:var(--sand)}
.qty span{min-width:34px;text-align:center;font-weight:700;font-family:'Sora';font-size:.92rem}

/* TOAST */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 26px;border-radius:999px;font-size:.88rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:99;box-shadow:0 12px 30px rgba(7,24,43,.35)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* FOOT */
.foot{background:var(--navy);color:#9fc2d8;padding:34px 0;font-size:.82rem;margin-top:40px}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot a{color:var(--aqua-soft)}