/* Свій CSS, один файл. Без зовнішніх шрифтів, бібліотек і лічильників. */
:root { --ink:#1b1b1b; --dim:#6b6b6b; --line:#e2ded6; --bg:#fbfaf7; --accent:#7a5c2e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
img { max-width:100%; }
header { padding:14px 16px; border-bottom:1px solid var(--line); background:#fff; }
header a { color:var(--ink); text-decoration:none; font-weight:600; font-size:18px; }
main { max-width:960px; margin:0 auto; padding:16px; }
h1 { font-size:22px; margin:14px 0 6px; }

.sections { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.sections a { padding:6px 12px; border:1px solid var(--line); border-radius:999px;
              background:#fff; color:var(--ink); text-decoration:none; font-size:14px; }

.tiles { list-style:none; margin:0; padding:0; display:grid; gap:12px;
         grid-template-columns:repeat(2,1fr); }
@media (min-width:700px)  { .tiles { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px) { .tiles { grid-template-columns:repeat(4,1fr); } }
.tiles a { display:block; background:#fff; border:1px solid var(--line);
           border-radius:10px; overflow:hidden; color:var(--ink); text-decoration:none; }
.tiles img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.tiles .name { display:block; padding:8px 10px 0; font-size:14px; }
.tiles .price { display:block; padding:2px 10px 10px; color:var(--dim); font-size:14px; }
.nophoto { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
           margin:0; background:#f0eee9; color:var(--dim); font-size:13px; }

.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.pick { position:absolute; width:0; height:0; opacity:0; }
.slot { display:none; }
/* Знімки гортаються вбік в одному віконечку: сторінка не росте стовпчиком.
   Чисте прокручування, без жодного рядка сценарію. */
.strip { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
         scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.strip::-webkit-scrollbar { display:none; }
.strip img { flex:0 0 100%; scroll-snap-align:center; display:block;
             width:100%; aspect-ratio:3/4; object-fit:contain;
             background:#f4f2ee; border-radius:8px; }
.price { font-size:22px; font-weight:600; margin:6px 0 0; }
.switch { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.tab { padding:8px 14px; border:1px solid var(--line); border-radius:999px;
       background:#fff; cursor:pointer; font-size:15px; }
.tab.off { opacity:.45; pointer-events:none; text-decoration:line-through; }
.act { margin:14px 0 0; }
.btn { display:inline-block; padding:12px 18px; border-radius:8px; margin:0 8px 8px 0;
       background:var(--accent); color:#fff; text-decoration:none; }
.btn.phone { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn.off { background:#e8e5df; color:var(--dim); }
.specs h2 { font-size:15px; color:var(--dim); margin:22px 0 6px; }
.specs p { margin:0 0 4px; }
.back { margin-top:22px; display:flex; flex-wrap:wrap; gap:14px; font-size:15px; }
.back a { color:var(--dim); }

/* Перемикач варіантів без жодного рядка коду: позначений перемикач
   показує свій блок фото, ціни й дії. Правил рівно стільки, скільки
   варіантів у найбагатшого товару. */
.v1:checked ~ .body .s1 { display:block; }
.v1:checked ~ .body .t1 { border-color:var(--accent); font-weight:600; }
.v2:checked ~ .body .s2 { display:block; }
.v2:checked ~ .body .t2 { border-color:var(--accent); font-weight:600; }
.v3:checked ~ .body .s3 { display:block; }
.v3:checked ~ .body .t3 { border-color:var(--accent); font-weight:600; }
.v4:checked ~ .body .s4 { display:block; }
.v4:checked ~ .body .t4 { border-color:var(--accent); font-weight:600; }