/* Brand palette from elainklinikkasaari.fi (css/style.css :root) */
:root { --brand:#E58DB4; --brand2:#c97a9d; --brand-light:#fdf2f7; --bg:#ffffff; --bg-alt:#f8f9fa;
        --ink:#1a1a2e; --mut:#888; --line:#e5e7eb; --ok:#1c7a4c; }
* { box-sizing:border-box; margin:0; }
body { font:16px/1.55 'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand2); text-decoration:none; }
img { max-width:100%; }
main { max-width:1080px; margin:0 auto; padding:16px; }
h1 { font-size:1.6rem; margin:.6em 0 .4em; } h2 { font-size:1.2rem; margin:1.2em 0 .5em; }

.top { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { white-space:nowrap; display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); }
.brand img { height:38px; width:auto; }
.brand .shopword { color:var(--brand2); font-size:1.05rem; }
.search { flex:1 1 180px; } .search input { width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:20px; font-size:.95rem; }
.top nav { display:flex; gap:14px; align-items:center; font-weight:600; }
.lang { border:1px solid var(--line); border-radius:6px; padding:2px 8px; font-size:.85rem; }
.phone-bar { text-align:center; font-size:.85rem; background:var(--brand-light); padding:5px 10px; color:var(--mut); }
.phone-bar a { font-weight:700; color:var(--ink); }

.hero { background:linear-gradient(120deg,var(--brand),var(--brand2)); color:#fff; border-radius:14px; padding:28px 24px; margin:14px 0 20px; }
.hero h1 { margin:0 0 8px; } .hero p { opacity:.95; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:8px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; font-weight:700; }
.tile img { height:110px; object-fit:contain; display:block; margin:0 auto 8px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; transition:box-shadow .15s; }
.card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); }
.card img { height:130px; object-fit:contain; margin-bottom:8px; }
.card-name { font-size:.9rem; font-weight:600; flex:1; }
.card-size { color:var(--mut); font-size:.85rem; }
.card-price { font-weight:700; margin-top:4px; }
.unit { color:var(--mut); font-weight:400; font-size:.8rem; }

.product { display:grid; gap:24px; grid-template-columns:1fr; }
@media(min-width:760px){ .product { grid-template-columns:380px 1fr; } }
.p-images img { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; width:100%; object-fit:contain; max-height:380px; }
.p-images .kibble { max-height:120px; width:auto; margin-top:8px; }
.p-size { font-size:1.15rem; margin:6px 0; }
.p-sizes a { display:inline-block; border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 10px; margin:2px 4px 10px 0; font-size:.9rem; }
button, .add { background:var(--brand); color:#fff; border:0; border-radius:10px; padding:12px 22px; font-size:1rem; font-weight:700; cursor:pointer; }
button:hover { background:var(--brand2); }
.add:disabled { background:var(--ok); }
.pickup { background:var(--brand-light); border-radius:10px; padding:10px 14px; font-size:.9rem; margin:12px 0; }
.svnote { font-size:.85rem; color:var(--mut); font-style:italic; }
details { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:10px 0; }
details summary { font-weight:700; cursor:pointer; }
details table { border-collapse:collapse; margin-top:8px; font-size:.9rem; }
details td, details th { border:1px solid var(--line); padding:4px 8px; }
.askvet textarea { width:100%; min-height:80px; margin:8px 0; }
.askvet input { width:100%; margin:8px 0 0; }
.askvet input, .askvet textarea { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; }

#cart-items table { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; }
#cart-items td { padding:10px; border-bottom:1px solid var(--line); }
#cart-items input[type=number] { width:60px; padding:6px; border:1px solid var(--line); border-radius:6px; }
.checkout { max-width:440px; display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.checkout input { padding:11px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.checkout fieldset { border:1px solid var(--line); border-radius:8px; }
.err { color:#b00020; }

.legal { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px; max-width:760px; }
footer { text-align:center; color:var(--mut); font-size:.85rem; padding:26px 16px; border-top:1px solid var(--line); margin-top:34px; }
footer div { margin:4px 0; }

.admin table { width:100%; border-collapse:collapse; background:#fff; font-size:.9rem; }
.admin td, .admin th { border:1px solid var(--line); padding:6px 10px; text-align:left; }
.admin .warn { background:#fdecec; }
.admin form { display:inline; } .admin button { padding:6px 12px; font-size:.85rem; }
.badge { display:inline-block; border-radius:6px; padding:1px 8px; font-size:.8rem; font-weight:700; background:#eee; }
.badge.paid { background:#fff3cd; } .badge.ordered_from_rc { background:#cfe2ff; }
.badge.ready_for_pickup { background:#d1e7dd; } .badge.picked_up { background:#e2e3e5; }