/* Base */
:root { --bg:#ffffff; --card:#ffffff; --muted:#475569; --text:#0f172a; --primary:#2563eb; --primary-700:#1d4ed8; --accent:#16a34a; --danger:#ef4444; --ring:0 0 0 3px rgba(37,99,235,.25); }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.container { width:100%; max-width:1120px; margin:0 auto; padding:0 16px; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter: blur(6px); border-bottom:1px solid #e5e7eb; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-toggle { display:none; background:transparent; border:0; padding:8px; border-radius:8px; }
.nav-toggle:focus { box-shadow: var(--ring); }
.logo { font-weight:800; letter-spacing:.3px; }
.logo span { color:var(--primary); }
.nav { display:flex; gap:16px; }
.nav a { padding:8px 10px; border-radius:8px; color:var(--muted); }
.nav a.active, .nav a:hover { color:var(--text); background:#f1f5f9; }
.badge { background:var(--primary); color:white; border-radius:999px; padding:2px 8px; font-size:12px; margin-left:6px; }
.nav .cta { padding:8px 12px; background:rgba(79,140,255,.1); border:1px solid rgba(79,140,255,.4); color:#cde2ff; border-radius:10px; }
.nav .cta:hover { background:rgba(79,140,255,.18); }

.site-footer { border-top:1px solid #e5e7eb; margin-top:48px; }
.site-footer .container { padding:24px 16px; color:var(--muted); font-size:14px; }
.footer-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; padding-top:16px; }
.link-list { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px; }
.link-list a { color:#cde2ff; }
.link-list a:hover { text-decoration:underline; }

.call-banner { background:#f1f5f9; border-bottom:1px solid #e5e7eb; color:#0f172a; }
.call-banner .container { padding:6px 12px; display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto; }
.call-banner a { color:var(--primary); font-weight:700; }

/* removed floating call button */

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; background:#ffffff; color:var(--text); border:1px solid #e5e7eb; cursor:pointer; transition:.15s ease; }
.btn:hover { background:#f8fafc; }
.btn.primary { background:var(--primary); border-color:var(--primary); color:white; }
.btn.primary:hover { background:var(--primary-700); }
.btn.full { width:100%; }

/* Home */
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:24px; padding:48px 0; align-items:center; }
.hero-content h1 { font-size:40px; line-height:1.1; margin:0 0 12px; }
.hero-content p { color:var(--muted); margin:0 0 20px; }
.hero-art { height:220px; border-radius:16px; background: radial-gradient(80% 80% at 20% 20%, rgba(37,99,235,.15), transparent), radial-gradient(60% 60% at 80% 30%, rgba(34,197,94,.12), transparent), linear-gradient(180deg, #ffffff, #f8fafc); border:1px solid #e5e7eb; }
/* Feature cards */
.features-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:16px; }
.feature { background:var(--card); border:1px solid #1f2937; border-radius:14px; padding:16px; display:grid; gap:6px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.feature:hover { transform: translateY(-2px); border-color:#2a3a52; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.feature-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background:#0f1520; border:1px solid #1f2937; font-size:20px; }

/* Products */
.page-title { margin:28px 0; }
.products-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.featured { margin-top:32px; }
.featured h2 { margin:8px 0 16px; }
.card { background:var(--card); border:1px solid #e5e7eb; border-radius:14px; }
.product-card { display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(2,6,23,.08); border-color:#cbd5e1; }
.product-card .thumb { height:200px; background:#f8fafc; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #e5e7eb; overflow:hidden; }
.product-card .thumb img { width:100%; height:100%; object-fit:contain; background:white; padding:8px; }
.product-card .content { padding:16px; display:grid; gap:8px; }
.price { color: var(--primary); font-weight:800; font-size:18px; }
.product-card .price { font-size:20px; }
.product-info .price { font-size:24px; }
.muted { color:var(--muted); }

/* Product detail */
.product-detail { display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin:28px 0; }
.product-gallery { background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; height:360px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-gallery img { width:100%; height:100%; object-fit:cover; }
.product-info { display:grid; gap:12px; }
.qty { display:flex; align-items:center; gap:8px; }
.qty input { width:72px; padding:8px; border-radius:8px; border:1px solid #1f2937; background:#0b0f14; color:var(--text); }

/* Cart */
.cart-container { display:grid; gap:12px; }
.cart-row { display:grid; grid-template-columns: 1fr auto auto auto auto; align-items:center; gap:12px; padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#ffffff; }
.cart-row .unit-price { color:var(--muted); font-size:14px; }
.cart-row .qty-input { width:72px; padding:8px; border-radius:8px; border:1px solid #e5e7eb; background:#ffffff; color:var(--text); }
.cart-row [data-remove] { justify-self:end; }
.cart-row .title { font-weight:600; }
.cart-actions { display:flex; justify-content:space-between; margin-top:16px; }

/* Checkout */
.checkout-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
.form-card { padding:16px; display:grid; gap:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full { grid-column:1 / -1; }
label span { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
input, textarea { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#ffffff; color:var(--text); outline:none; }
input:focus, textarea:focus { box-shadow: var(--ring); border-color: var(--primary); }
.card-fields { display:contents; }

/* Add-to-cart prompt */
.addcart-overlay { position:fixed; inset:0; background:rgba(15,23,42,.2); display:flex; align-items:flex-end; justify-content:center; padding:16px; z-index:50; }
.addcart-dialog { width:100%; max-width:520px; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 20px 40px rgba(2,6,23,.15); overflow:hidden; }
.addcart-body { padding:14px; display:grid; gap:10px; }
.addcart-title { font-weight:700; }
.addcart-actions { display:flex; gap:10px; }
.addcart-actions .btn { flex:1; }
.form-msg { color:var(--accent); min-height:20px; }
.order-summary { padding:16px; }
.summary-items { display:grid; gap:8px; margin-bottom:8px; }
.summary-row { display:flex; justify-content:space-between; color:var(--muted); }
.summary-row.total { color:var(--text); font-weight:700; }

/* Responsive */
@media (max-width: 900px) {
  .header-inner { height:56px; }
  .nav a { padding:8px; }
  .hero { grid-template-columns:1fr; padding:28px 0; }
  .hero-content h1 { font-size:28px; }
  .product-detail { grid-template-columns:1fr; }
  .product-gallery { height:220px; }
  .checkout-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .cart-row { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .cart-row .qty, .cart-row .price, .cart-row [data-remove] { justify-self:end; }
  .cart-actions { flex-direction:column; gap:10px; }
}

@media (max-width: 520px) {
  .container { padding:0 12px; }
  .nav-toggle { display:inline-flex; }
  .nav { display:none; position:absolute; top:56px; left:0; right:0; background:#ffffff; border-bottom:1px solid #e5e7eb; padding:8px 12px; gap:8px; flex-direction:column; }
  .nav.open { display:flex; }
  .products-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .btn { width:100%; }
  .hero { padding:16px 0; }
  .hero-content h1 { font-size:22px; }
  .hero-content p { margin-bottom:12px; }
  .hero-art { display:none; }
  .nav a { padding:10px; }
  .nav .cta { display:block; }
  .call-banner { position:sticky; top:56px; z-index:9; }
  body { padding-bottom:0; }
}