/* style.css — tema premium bianco/blu con stoodi morbidi */
:root{
  --bg: #ffffff;
  --bg-muted: #f5f7fb;
  --text: #0d1b2a;
  --muted: #6b7280;
  --primary: #0a2a6b;
  --primary-weak: #e6eefc;
  --ring: rgba(10,42,107,0.25);
  --card-radius: 20px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --container: 1120px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.site-header{
  position: sticky; top:0; z-index:50; background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px); border-bottom: 1px solid #eef2f7;
}
.header-inner{ display:flex; align-items:center; gap:20px; padding: 14px 0; }
.logo img{ height: 34px; display:block; }
.main-nav{ display:flex; gap: 18px; margin: 0 auto; }
.nav-link{
  text-decoration:none; color: var(--muted); padding: 8px 12px; border-radius: 12px;
}
.nav-link:hover{ background: var(--bg-muted); color: var(--text); }
.nav-link.is-active{ background: var(--primary-weak); color: var(--primary); }

.site-main{ padding: 28px 0 48px; }
.site-footer{ background: var(--bg-muted); margin-top: 40px; }
.footer-inner{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); padding: 22px 0; color: var(--muted); }
.footer-col a{ color: inherit; text-decoration: none; }
.small{ font-size: 14px; }

.card{
  background: var(--bg); border-radius: var(--card-radius); box-shadow: var(--shadow);
  padding: 22px; border: 1px solid #eef2f7;
}
.hero{
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  padding: 40px 28px;
}
.hero-content h1{ font-size: 40px; margin: 0 0 8px; letter-spacing: -0.02em; }
.hero-content p{ color: var(--muted); margin: 0 0 18px; }

.section-title{ margin: 8px 0 18px; }

.grid{
  display:grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }

.product-card{
  display:flex;
  flex-direction: column;
  height: 100%;
}

/* Hover animation for product cards */
.product-card{
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12), 0 0 20px rgba(10,42,107,0.15);
}
.product-card:active{
  transform: translateY(-2px);
}
.product-card .product-image{
  transition: transform 0.3s ease;
}
.product-card:hover .product-image{
  transform: scale(1.03);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .product-card,
  .product-card .product-image{
    transition: none;
  }
}
.product-image{
  width:100%; height: 220px; object-fit: cover; border-radius: 16px;
}
.product-body{
  padding-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-title{ margin:0; font-size: 20px; }
.product-short{ margin:0; color: var(--muted); }
.product-bottom{
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.price{ font-weight: 700; }

.chip-list{ list-style:none; margin: 6px 0 0; padding:0; display:flex; flex-wrap: wrap; gap:8px; }
.chip{ background: var(--bg-muted); border: 1px solid #e7ecf6; padding: 6px 10px; border-radius: 999px; font-size: 13px; color: var(--muted); }

.inline-form{ display:flex; align-items:center; gap: 10px; }
.qty-input{
  width: 72px; padding: 10px 12px; border-radius: 12px; border:1px solid #e5e7eb; outline: none;
}
.qty-input:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }

.cart-list{ list-style:none; padding:0; margin: 12px 0; display:flex; flex-direction: column; gap: 12px; }
.cart-item{ display:flex; gap:14px; align-items:center; }
.cart-thumb{ width:72px; height:72px; object-fit: cover; border-radius: 12px; }
.cart-info{ display:grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; width:100%; }
.cart-name{ font-weight:600; }
.cart-meta{ color: var(--muted); }
.cart-line{ justify-self: end; font-weight:600; }
.cart-total-row{ display:flex; justify-content: space-between; align-items:center; padding-top: 8px; border-top:1px solid #eef2f7; margin-top: 12px; }

.btn{
  appearance:none; border:0; cursor:pointer; padding: 12px 16px; border-radius: 14px;
  font-weight: 600; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn-primary{
  background: var(--primary); color: white;
  box-shadow: 0 8px 20px rgba(10,42,107,0.18);
}
.btn-primary:hover{ filter: brightness(1.08); }
.btn-ghost{
  background: transparent; border: 1px solid #dbe3f3; color: var(--primary);
}
.btn-ghost:hover{ background: var(--primary-weak); }

.link{ color: var(--primary); text-decoration:none; }
.link:hover{ text-decoration: underline; }

.form{ display:flex; flex-direction: column; gap: 12px; }
.form-row{ display:flex; flex-direction: column; gap: 6px; }
.form-row input, .form-row textarea{
  padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 14px; outline: none;
}
.form-row input:focus, .form-row textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }

.notice{
  padding: 12px 14px; border-radius: 12px; margin-bottom: 10px; font-size: 14px;
}
.notice.success{ background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }

/* Make cards stretch to equal height inside grids */
.grid .card{ height: 100%; }