@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560;9..144,640&family=Outfit:wght@400;500;600&display=swap");
:root { --ink:#241910; --paper:#f3ece3; --card:#fffaf4; --line:#e3d5c4; --wood:#8a4e32; --muted:#6d5f53; --ok:#1f6b3a; --bad:#8d2b2b; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 Outfit, sans-serif; color:var(--ink); background:radial-gradient(900px 420px at 100% -10%, #f7e2cf, transparent 60%), var(--paper); }
h1, h2, .brand { font-family:Fraunces, Georgia, serif; font-weight:560; }
a { color:inherit; }
.bar { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; position:sticky; top:0; background:rgba(243,236,227,.92); backdrop-filter:blur(8px); z-index:2; border-bottom:1px solid transparent; }
.brand { letter-spacing:-.03em; text-decoration:none; font-size:1.35rem; }
.lang { position:fixed; top:14px; right:16px; display:flex; gap:6px; z-index:5; }
.lang a { text-decoration:none; border:1px solid var(--line); padding:5px 9px; border-radius:999px; font:12px/1 Outfit, sans-serif; background:var(--card); }
.lang a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.wrap { max-width:1040px; margin:0 auto; padding:18px 18px 96px; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; margin:12px 0 34px; }
.hero h1 { font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:.95; margin:0 0 12px; letter-spacing:-.04em; }
.hero p { margin:0; color:var(--muted); max-width:38ch; font-size:1.05rem; }
.hero img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:18px 18px 48px 18px; box-shadow:18px 18px 0 #e7d3bf; }
.kicker { font:600 .72rem/1 Outfit, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--wood); margin-bottom:10px; }
.cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.card { display:block; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; height:100%; }
.card img, .product .shot { width:100%; aspect-ratio:4/3; object-fit:cover; background:#efe4d6; display:block; }
.card h2, .card p, .card .price { margin:0; padding:0 14px; }
.card h2 { padding-top:14px; font-size:1.25rem; }
.card p { color:var(--muted); font-size:.94rem; min-height:4.4em; }
.card .price, .price { color:var(--wood); font-weight:600; }
.card .price { padding:8px 14px 16px; }
.product { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.product .copy { padding-top:8px; }
.product h1 { margin:8px 0; font-size:clamp(2rem, 4vw, 3.2rem); line-height:1; letter-spacing:-.03em; }
.lead, .notice { color:var(--muted); }
.notice { background:#fff; border-left:3px solid var(--wood); padding:10px 12px; }
.back { font-size:.9rem; }
form label, .choice { display:block; margin:12px 0; font-size:.92rem; }
input, select, textarea, button { width:100%; font:1rem/1.3 Outfit, sans-serif; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
button, .ghost { background:var(--ink); color:#fff; border:0; cursor:pointer; text-align:center; }
.ghost { display:inline-block; text-decoration:none; background:transparent; color:var(--ink); border:1px solid var(--line); }
.steps { display:flex; gap:8px; }
.steps button { width:auto; }
small { color:var(--muted); }
.ok { background:#e7f6ec; color:var(--ok); padding:10px 12px; border-radius:8px; }
.bad { background:#fdecec; color:var(--bad); padding:10px 12px; border-radius:8px; }
.dock { display:none; }
fieldset { border:1px solid var(--line); border-radius:12px; margin:0 0 12px; background:var(--card); }
legend { padding:0 6px; }
table { width:100%; border-collapse:collapse; font-size:.9rem; background:var(--card); }
td, th { border-bottom:1px solid var(--line); text-align:left; padding:8px 6px; vertical-align:top; }
.admin select, .admin input[type=number] { width:auto; min-width:140px; }
.admin-card { display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:start; margin:0 0 8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.admin-card img { width:160px; height:120px; object-fit:cover; border-radius:10px; background:#efe4d6; }
.admin .ghost { margin-top:8px; background:transparent; color:var(--ink); border:1px solid var(--line); }
.size-row { display:grid; grid-template-columns:1fr 1fr 120px; gap:8px; margin-bottom:8px; }
.row a { font-size:.9rem; }
footer { max-width:1040px; margin:0 auto; padding:8px 18px 28px; color:var(--muted); font-size:.85rem; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.admin-link { display:inline-block; background:var(--ink); color:#fff; border-radius:999px; padding:9px 16px; text-decoration:none; font-weight:600; }
@media (max-width:800px) {
  .hero, .product, .cards, .admin-card { grid-template-columns:1fr; }
  .hero img { aspect-ratio:4/3; }
  .dock { display:block; position:fixed; left:0; right:0; bottom:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(243,236,227,.96); border-top:1px solid var(--line); z-index:4; }
  .product form > button { display:none; }
  .size-row { grid-template-columns:1fr; }
  footer { padding-bottom:88px; }
}