@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e6e8ee;
  --border-strong: #d1d5db;
  --brand: #fa6742;
  --link: #fa6742;
  --header-bg: #0f172a;
  --header-text: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10);
  --radius: 12px;
  --radius-sm: 8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

.site-header{background:var(--header-bg);color:var(--header-text);position:sticky;top:0;z-index:10;box-shadow:var(--shadow)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.logo{color:var(--header-text);text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-0.01em}

.site-footer{background:var(--surface);border-top:1px solid var(--border);margin-top:64px;color:var(--text-muted);font-size:14px}
.site-footer .container{padding-top:24px;padding-bottom:24px}

.hero{padding:40px 0 16px}
.hero h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);letter-spacing:-0.02em;font-weight:700}
.hero p{margin:0;color:var(--text-muted);font-size:16px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin:28px 0}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.card-image-link{display:block}
.card-image-wrap{width:100%;aspect-ratio:1 / 1;overflow:hidden;background:#f3f4f7}
.card-image{width:100%;height:100%;display:block;object-fit:cover;object-position:center 20%;transform:scale(1.45);transform-origin:center 53%;transition:transform 0.3s ease}
.card:hover .card-image{transform:scale(1.72)}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.card-title{margin:0 0 12px;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-0.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-title a{color:var(--text);text-decoration:none}
.card-title a:hover{color:var(--brand)}
.card .btn{margin-top:auto;text-align:center}

.btn{display:inline-block;border:1px solid var(--brand);background:transparent;color:var(--brand);padding:9px 16px;border-radius:var(--radius-sm);text-decoration:none;font-weight:600;font-size:14px;transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;cursor:pointer}
.btn:hover{background:var(--brand);color:#fff}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(0.95)}

.pager{display:flex;justify-content:center;align-items:center;gap:16px;padding:16px 0 32px;font-size:14px}
.pager a{color:var(--brand);text-decoration:none;font-weight:600;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);transition:background 0.15s ease,border-color 0.15s ease}
.pager a:hover{background:var(--surface);border-color:var(--brand)}
.pager .muted{color:var(--text-muted)}

.product{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:28px;padding-top:32px}
.product-main,.product-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.product-main-title{font-size:clamp(22px,3vw,30px);margin:0 0 16px;line-height:1.3;letter-spacing:-0.015em;font-weight:700}
.product-image-link{display:block;border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:#f3f4f7}
.product-image{width:100%;max-width:620px;border-radius:var(--radius-sm);background:#fff;border:0;display:block;margin:0 auto}
.lead{color:#334155;line-height:1.7;font-size:15px;margin:20px 0 0}
.product-price{font-size:38px;line-height:1;font-weight:800;margin:0 0 10px;letter-spacing:-0.02em}
.product-side-title{font-size:20px;line-height:1.3;font-weight:600;margin:0 0 14px;letter-spacing:-0.01em}
.product-side-title a{color:var(--text);text-decoration:none}
.product-side-title a:hover{color:var(--brand)}
.product-side h2{margin:24px 0 10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted)}
.brand-line{margin:0 0 8px;color:var(--text-muted);font-size:14px}
.pill-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.pill-list li{margin:0}
.pill-link{display:inline-block;background:#f1f3f7;border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:12px;color:#475569;text-decoration:none;transition:border-color 0.15s ease,color 0.15s ease,background 0.15s ease}
.pill-link:hover{border-color:var(--brand);color:var(--brand);background:#fff}
.product-buy{margin-top:18px}
.product-buy .btn{width:100%;text-align:center;padding:13px 16px;font-size:16px}
.bullet-list{margin:14px 0 0;padding-left:18px;color:#334155}
.bullet-list li{margin-bottom:10px;line-height:1.55}
.back-link{margin-top:24px}
.back-link a{text-decoration:none;color:var(--brand);font-weight:600;font-size:14px}
.back-link a:hover{text-decoration:underline}

@media (max-width:980px){.product{grid-template-columns:1fr}}
@media (max-width:560px){.hero{padding:28px 0 8px}.grid{gap:14px}.product-main,.product-side{padding:18px}}