* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1a1a1a; background: #fafafa; line-height: 1.6; }
a { color: #c8281c; text-decoration: none; }
a:hover { color: #8a1c12; text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.2rem; }
header.site { background: #1a1a1a; color: #fff; padding: 1rem 0; border-bottom: 3px solid #c8281c; }
header.site .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
header.site a.brand { color: #fff; font-weight: 700; font-size: 1.3rem; display:flex; align-items:center; gap:.5rem; }
header.site a.brand svg { display:block; }
header.site nav a { color: #ddd; margin-left: 1rem; font-size: .95rem; }
header.site nav a:hover { color: #fff; text-decoration: none; }
header.site nav a.active { color: #fff; }
.hero { padding: 3rem 0; text-align: center; background: linear-gradient(135deg, #fff 0%, #f3f3f3 100%); }
.hero h1 { font-size: 2.3rem; margin: 0 0 .6rem; }
.hero p { font-size: 1.1rem; color: #555; margin: 0 auto; max-width: 700px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; padding: 2rem 0; }
.card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.card .img { aspect-ratio: 16/10; background: #f0f0f0 center/cover no-repeat; background-color: #f0f0f0; }
.card .img.placeholder { background:#f5f5f5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><rect width='100' height='60' fill='%23f5f5f5'/><text x='50' y='35' text-anchor='middle' font-family='Arial' font-size='6' fill='%23999'>Product Image</text></svg>") center/cover; }
.card .body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 1.05rem; margin: 0 0 .35rem; line-height: 1.25; }
.card .cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: .4rem; }
.card p { color: #444; font-size: .9rem; flex: 1; margin: 0 0 .9rem; }
.card .price { font-weight: 600; margin-bottom: .7rem; color: #1a1a1a; }
.btn { display: inline-block; background: #c8281c; color: #fff !important; padding: .8rem 1.4rem; border-radius: 6px; font-weight: 600; text-align: center; transition: background .15s; text-decoration: none; }
.btn:hover { background: #8a1c12; }
.btn.large { font-size: 1.1rem; padding: 1rem 1.8rem; }
.btn.xl { font-size: 1.25rem; padding: 1.2rem 2.2rem; }
footer.site { background: #1a1a1a; color: #aaa; padding: 2.5rem 0; margin-top: 3rem; font-size: .9rem; }
footer.site a { color: #ddd; }
footer.site .container > div { margin-bottom: 1rem; }
.letter { padding: 2rem 0; }
.letter .hero-img-wrap { width:100%; background:#f5f5f5; border-radius:10px; margin-bottom:2rem; aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.letter .hero-img { width:100%; max-height:480px; object-fit:contain; }
.letter .hero-placeholder { color:#999; font-size:1rem; padding:2rem; }
.letter h1 { font-size: 2.4rem; margin: 0 0 .5rem; line-height: 1.2; }
.letter h2 { font-size: 1.5rem; margin: 2rem 0 1rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; }
.letter h2:first-of-type { border-top: none; padding-top: 0; }
.letter .sub { color: #555; font-size: 1.1rem; margin-bottom: 1.5rem; }
.letter p { margin-bottom: 1rem; font-size: 1.02rem; color: #2a2a2a; }
.letter ul { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.letter ul li { margin-bottom: .5rem; }
.letter .cta { background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); border: 2px solid #c8281c; border-radius: 10px; padding: 2rem; text-align: center; margin: 2rem 0; }
.letter .cta .price-big { font-size: 1.6rem; font-weight: 700; margin: 0 0 .4rem; color: #1a1a1a; }
.letter .cta .scarcity { color:#c8281c; font-weight:600; margin: 0 0 .8rem; font-size:.95rem; }
.letter .cta .btn { margin-top: .5rem; }
.letter .testimonial { background: #fff; border-left: 3px solid #c8281c; padding: 1.2rem 1.4rem; margin-bottom: 1rem; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.04); }
.letter .testimonial .who { display: block; margin-top: .5rem; font-weight: 600; color: #555; font-size: .9rem; }
.letter .guarantee { background: #fff8e1; border: 1px solid #f0c36d; border-radius: 6px; padding: 1.2rem 1.4rem; margin: 1.5rem 0; }
.breadcrumbs { font-size: .88rem; color: #777; padding: 1.2rem 0 0; }
.breadcrumbs a { color: #777; }
.category-section { padding: 1rem 0 3rem; }
.category-section h1 { font-size: 2rem; margin: 1rem 0 1rem; }
.disclosure { background: #fff8e1; border: 1px solid #f0c36d; border-radius: 6px; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: .92rem; }
.legal { padding: 2rem 0; max-width: 800px; }
.legal h1 { font-size: 1.8rem; }
.legal h2 { font-size: 1.2rem; margin-top: 1.6rem; }
.featured-hero { display:grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; background: #fff; border:1px solid #e5e5e5; border-radius:10px; padding: 1.5rem; margin: 1rem 0 2rem; align-items:center; }
.featured-hero .img { aspect-ratio: 4/3; background: #f0f0f0 center/cover no-repeat; border-radius:8px; }
.featured-hero .body h2 { font-size:1.6rem; margin:0 0 .6rem; }
.featured-hero .body .badge { display:inline-block; background:#c8281c; color:#fff; padding:.2rem .6rem; border-radius:4px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width: 720px) { .featured-hero { grid-template-columns: 1fr; } .letter h1 { font-size: 1.7rem; } .hero h1 { font-size: 1.7rem; } }
.sticky-cta { display:none; position:fixed; bottom:0; left:0; right:0; background:#1a1a1a; padding:.8rem; z-index:100; box-shadow:0 -2px 10px rgba(0,0,0,.15); }
.sticky-cta .btn { display:block; width:100%; padding: .9rem; }
@media (max-width: 720px) { .sticky-cta { display:block; } body { padding-bottom: 80px; } }
.search-box { width:100%; padding:1rem; font-size:1.1rem; border:2px solid #ddd; border-radius:8px; margin: 1.5rem 0; }
.search-box:focus { outline:none; border-color:#c8281c; }
.search-result { padding: .8rem 1rem; border-bottom: 1px solid #eee; display:flex; gap:1rem; align-items:center; }
.search-result .thumb { width:80px; height:50px; background:#f0f0f0 center/cover no-repeat; border-radius:4px; flex-shrink:0; }
.search-result .info { flex:1; }
.search-result .info h4 { margin:0 0 .2rem; font-size:1rem; }
.search-result .info small { color:#888; }
.admin-table { width:100%; border-collapse:collapse; margin: 1rem 0; }
.admin-table th, .admin-table td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid #eee; font-size:.92rem; }
.admin-table th { background:#f5f5f5; }
.admin-table .ok { color:#0a7d22; font-weight:600; }
.admin-table .fail { color:#c8281c; font-weight:600; }
.admin-table .copy-link { font-family:monospace; font-size:.8rem; background:#f5f5f5; padding:.3rem .5rem; border-radius:4px; display:inline-block; max-width:340px; overflow:hidden; text-overflow:ellipsis; }
.fourofour { text-align:center; padding: 5rem 1rem; }
.fourofour h1 { font-size: 5rem; margin: 0; color: #c8281c; }
.countdown { display:inline-block; background:#1a1a1a; color:#fff; padding:.3rem .7rem; border-radius:4px; font-family:monospace; font-size:.95rem; }