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

:root {
  --blue: #0D2240;
  --red: #AF1E2D;
  --white: #FFFFFF;
  --ice: #EEF3FF;
  --ink: #0B0E14;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--ice); color:var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

a { color: var(--blue); text-decoration: none; }
a.button, button.button {
  display:inline-block; padding:12px 20px; border:2px solid var(--blue);
  color: var(--white); background: var(--red);
  text-transform:uppercase; font-weight:700; letter-spacing:1px; transition: all .15s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
a.button:hover, button.button:hover { background: #c82a39; border-color:#c82a39; }

.container { width:100%; max-width: 1200px; margin:0 auto; padding: 0 20px; }

header.nav {
  position:sticky; top:0; z-index:10; background: var(--blue); color:var(--white);
  border-bottom: 6px solid var(--red);
}
header .inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; }
.brand { display:flex; align-items:center; gap:14px; }
.brand img { height:52px; width:auto; border-radius:6px; }
.brand .name { font-family: Oswald, Impact, sans-serif; font-size: 26px; letter-spacing:2px; font-weight:700; color:var(--white); }
nav a { margin-left:16px; opacity:.95; color:var(--white); padding:8px 10px; border-radius:8px; }
nav a.active, nav a:hover { background:rgba(255,255,255,.12); }

.cart { display:flex; align-items:center; gap:12px; padding-left:16px; }
.cart .count { font-weight:700; padding:6px 10px; border:2px solid var(--white); color:var(--blue); background:var(--white); border-radius:8px; }
.cart .snipcart-total-price { color: var(--white); font-weight:700; }

.hero {
  background:
    radial-gradient(1000px 300px at 50% 0%, rgba(13,34,64,.18), transparent),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(13,34,64,.06)),
    repeating-linear-gradient(90deg, rgba(13,34,64,.08) 0 2px, rgba(255,255,255,0) 2px 16px);
  padding: 110px 0 130px; text-align:center; position:relative;
  border-bottom: 6px solid var(--red);
}
.hero h1 { font-family: Oswald, Impact, sans-serif; font-size: 56px; margin:0 0 14px; letter-spacing:1px; color:var(--blue); }
.hero p { font-size: 20px; margin: 0 0 18px; color: var(--ink); }
.hero .cta { margin-top: 14px; }

.section { padding: 60px 0; }
.grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.card {
  background: var(--white);
  border:1px solid rgba(13,34,64,.15);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: 0 4px 10px rgba(13,34,64,.06);
}
.card img { width:100%; height:260px; object-fit:cover; background:#0e0f10; }
.card .pad { padding:16px; }
.card h3 { font-family: Oswald, Impact, sans-serif; letter-spacing:1px; margin:0 0 6px; color:var(--blue); }
.price { color: var(--red); font-weight:800; margin: 8px 0 12px; }

footer {
  margin-top:60px; padding:30px 0; border-top:6px solid var(--red); background:var(--blue); color:var(--white);
  font-size:14px;
}

form label { display:block; margin:10px 0 6px; color:var(--blue); }
form input, form textarea {
  width:100%; padding:12px; border-radius:10px; background:#F7FAFF; border:1px solid rgba(13,34,64,.25); color:var(--ink);
}
form button { margin-top: 10px; }

.rink-lines { height:8px; background:linear-gradient(90deg, var(--blue) 0 33%, var(--white) 33% 66%, var(--red) 66% 100%); border-radius:8px; margin: 16px 0; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 38px; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  header .inner { flex-wrap: wrap; }
}