/* SHOP EASY - design tokens. Adjust palette here only. */
:root{
  --c-primary:#4c2a85; --c-primary-dark:#3a1f68; --c-lavender:#f3eefb; --c-bg:#ffffff; --c-text:#1f1b2b; --c-muted:#6b6580;
  --c-gold:#d4b25c; --c-border:#e4dcf2; --c-danger:#b3261e; --c-ok:#1b7a43;
  --radius:12px; --shadow:0 4px 18px rgba(76,42,133,.10); --space:1rem;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--c-text);background:var(--c-bg);line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary)} :focus-visible{outline:3px solid var(--c-gold);outline-offset:2px}
.container{width:min(1160px,100% - 2rem);margin-inline:auto} .section{padding:2.5rem 0}
.skip{position:absolute;left:-999px} .skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:100}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border)}
.bar{display:flex;align-items:center;gap:1rem;padding:.6rem 0} .brand{display:flex;gap:.5rem;align-items:center;font-weight:700;text-decoration:none;color:var(--c-primary)}
.nav{display:flex;gap:1.25rem;margin-left:auto} .nav a{text-decoration:none;color:var(--c-text)} .nav a:hover{color:var(--c-primary)}
.nav-toggle{display:none;margin-left:auto;font-size:1.4rem;background:none;border:0} .cart-link{text-decoration:none}
.cart-count{background:var(--c-primary);color:#fff;border-radius:99px;padding:0 .5rem;font-size:.8rem}
.btn{display:inline-block;background:var(--c-primary);color:#fff;border:0;border-radius:var(--radius);padding:.7rem 1.4rem;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:var(--c-primary-dark);transform:translateY(-1px)}
.hero{background:linear-gradient(180deg,var(--c-lavender),#fff)} .hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding:3rem 0}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;color:var(--c-primary)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem} @media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--c-border);border-radius:var(--radius);padding:.75rem;background:#fff;box-shadow:var(--shadow);transition:transform .2s} .card:hover{transform:translateY(-3px)}
.card-img{position:relative;display:block;aspect-ratio:1/1;background:var(--c-lavender);border-radius:8px;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover} .noimg{display:grid;place-items:center;height:100%;font-size:3rem}
.badge{position:absolute;top:.5rem;left:.5rem;background:var(--c-gold);color:#2b2208;font-size:.75rem;padding:.1rem .5rem;border-radius:99px}
.card h3{font-size:1rem;margin:.6rem 0 .2rem} .card h3 a{text-decoration:none;color:inherit} .price{font-weight:700;color:var(--c-primary);margin:0}
.big{font-size:1.6rem} .stock.in{color:var(--c-ok)} .stock.out{color:var(--c-danger)} .empty{color:var(--c-muted)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0} input,select,textarea{padding:.6rem;border:1px solid var(--c-border);border-radius:8px;font:inherit}
.pager{display:flex;gap:.4rem;justify-content:center;margin-top:1.5rem} .pager a{padding:.4rem .8rem;border:1px solid var(--c-border);border-radius:8px;text-decoration:none} .pager [aria-current]{background:var(--c-primary);color:#fff}
.product{display:grid;grid-template-columns:1fr;gap:2rem} @media(min-width:800px){.product{grid-template-columns:1fr 1fr}}
.thumbs{display:flex;gap:.5rem;margin-top:.5rem} .thumbs img{cursor:pointer;border:1px solid var(--c-border);border-radius:6px}
.qty{display:inline-flex;gap:.25rem;margin-right:.75rem} .qty input{width:4rem;text-align:center}
.cart{width:100%;border-collapse:collapse} .cart th,.cart td{padding:.6rem;border-bottom:1px solid var(--c-border);text-align:left}
.alert{color:var(--c-danger)} .site-footer{background:var(--c-lavender);margin-top:3rem;padding:2rem 0 1rem}
.grid-footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem} .grid-footer a{display:block;text-decoration:none;color:var(--c-text);padding:.15rem 0} .copy{text-align:center;color:var(--c-muted)}
/* motion: subtle, and fully disabled for users who ask */
.reveal{animation:rise .6s ease both} .float{animation:float 6s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes float{50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr}.nav-toggle{display:block}.nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:1rem;border-bottom:1px solid var(--c-border)}.nav.open{display:flex}}
/* admin */
.admin{background:#faf9fd} .admin-bar{display:flex;gap:1rem;align-items:center;background:var(--c-primary);color:#fff;padding:.7rem 1rem} .admin-bar nav{display:flex;gap:1rem;margin-right:auto} .admin-bar a{color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem} .stats div{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem} .stats span{display:block;font-size:1.6rem;font-weight:700;color:var(--c-primary)}
.login-box{max-width:380px;margin:10vh auto;background:#fff;padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow)} .login-box label{display:block;margin:.8rem 0} .login-box input{width:100%}