@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --green:#7cb342; --blue:#1565c0; --blue-light:#1976d2; --dark:#0d4a8a;
  --text:#ffffff; --muted:#b3d4fc; --card:rgba(255,255,255,.06); --line:rgba(255,255,255,.15);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;color:var(--text);line-height:1.6;
  background:radial-gradient(1000px 520px at 50% -10%,rgba(64,156,255,.18),transparent 60%),linear-gradient(180deg,#041a33 0%,#0a3a6b 55%,#06305e 100%);
  background-attachment:fixed;min-height:100vh;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 5%;}

/* header */
.shop-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 5%;background:rgba(4,20,40,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--blue-light);}
.shop-nav .brand{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--green);text-decoration:none;font-size:1.15rem;}
.shop-nav .right{display:flex;align-items:center;gap:22px;}
.shop-nav .back{color:var(--muted);text-decoration:none;font-weight:600;font-size:.85rem;}
.shop-nav .back:hover{color:var(--green);}
.cart-btn{position:relative;background:none;border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:700 .85rem 'Inter';}
.cart-btn .count{position:absolute;top:-8px;right:-10px;background:var(--green);color:#06305e;font-size:.66rem;font-weight:900;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* hero */
.shop-hero{text-align:center;padding:70px 5% 40px;}
.shop-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;}
.shop-hero h1 .green{color:var(--green);}
.shop-hero p{color:var(--muted);max-width:560px;margin:12px auto 0;}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding:20px 0 70px;}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr);}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s;}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(0,0,0,.4);border-color:rgba(124,179,66,.5);}
.card .ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
  background:linear-gradient(150deg,#0a3a6b,#06305e);color:rgba(255,255,255,.45);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;}
.card .ph img{width:100%;height:100%;object-fit:cover;}
.card .body{padding:18px;text-align:center;display:flex;flex-direction:column;flex:1;}
.card h3{font-size:1.02rem;font-weight:800;}
.card .desc{color:var(--muted);font-size:.82rem;margin:4px 0 10px;flex:1;}
.card .price{color:var(--green);font-weight:900;font-size:1.25rem;margin-bottom:12px;}

/* buttons */
.btn{background:var(--green);color:#fff;border:none;border-radius:6px;padding:12px 22px;font-weight:900;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.02em;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s;box-shadow:0 8px 22px rgba(124,179,66,.35);}
.btn:hover{transform:translateY(-2px);}
.btn.block{width:100%;}
.btn.ghost{background:transparent;border:1.5px solid var(--line);box-shadow:none;color:#fff;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* cart drawer */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;}
.overlay.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(92vw,400px);background:#07294d;border-left:1px solid var(--blue-light);
  z-index:70;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;}
.drawer.open{transform:none;}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line);}
.drawer .dh h2{font-size:1.1rem;text-transform:uppercase;font-weight:900;}
.drawer .close{background:none;border:none;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;}
.drawer .items{flex:1;overflow-y:auto;padding:12px 20px;}
.ci{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.ci .ci-name{font-weight:700;font-size:.92rem;}
.ci .ci-price{color:var(--muted);font-size:.8rem;}
.ci .qty{display:flex;align-items:center;gap:8px;margin-left:auto;}
.ci .qty button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:1rem;line-height:1;}
.ci .qty span{min-width:20px;text-align:center;font-weight:700;}
.cart-empty{color:var(--muted);text-align:center;padding:40px 0;}
.drawer .foot{padding:20px;border-top:1px solid var(--line);}
.drawer .foot .row{display:flex;justify-content:space-between;font-weight:800;margin-bottom:14px;}
.drawer .foot .row .tot{color:var(--green);font-size:1.3rem;}
.drawer .note{color:var(--muted);font-size:.72rem;text-align:center;margin-top:10px;}

/* simple pages */
.msg{max-width:600px;margin:0 auto;text-align:center;padding:90px 5%;}
.msg h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;text-transform:uppercase;}
.msg h1 .green{color:var(--green);}
.msg p{color:var(--muted);margin:14px 0 26px;}

.foot-note{text-align:center;color:var(--muted);font-size:.85rem;padding:0 5% 50px;}