/* ============================================================================ Katalóg výkladov — nábytok stránky /osobny-horoskop/ (osobny-horoskop.html). Lišta kategórií, hero pás, sekcie, zoznam a jeho mriežka, poznámka. Dlaždicu samotnú (riadok, hrdina, cena) kreslí product.css, aby sa dala použiť aj mimo katalógu. Načítava to iba táto stránka: zmena tu nemá ako pokaziť rozcestník ani články. Tokeny prichádzajú zo styles.css — tu sa žiadne nedefinujú. ========================================================================== */ /* ── Lišta kategórií ─────────────────────────────────────────────────────── */ /* Ten istý vzor, aký má detail znamenia (.daybar): prilepený prúžok tesne pod hlavičkou. Výšku hlási do --daybar-h — styles.css z neho počíta --sticky-h a scroll-padding-top na , takže kotva sekcie zastane POD oboma pásmi bez toho, aby o katalógu globálne CSS vedelo. */ html:has(.shop-catbar) { --daybar-h: 3.5rem; } /* Vodorovné rolovanie je tu v poriadku, lebo ide o NAVIGÁCIU, nie o obsah: aktívny čip si stránka sama posunie do zorného poľa (shop.js). Pri obsahu by to isté znamenalo, že polovicu ponuky nikto neuvidí. */ .shop-catbar { position: sticky; top: var(--header-h); z-index: 40; background: var(--bg-hero); border-bottom: 1px solid var(--line); } .shop-catbar__inner { width: min(calc(100% - 2 * var(--gutter)), var(--max-width)); margin-inline: auto; display: flex; gap: 0.4rem; align-items: center; min-height: var(--daybar-h); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .shop-catbar__inner::-webkit-scrollbar { display: none; } .shop-catbar a { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; /* 44 px je najmenší cieľ, ktorý sa dá spoľahlivo trafiť palcom. */ min-height: 2.75rem; padding: 0.3rem 0.9rem; border-radius: 999px; color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .shop-catbar a:hover { background: rgba(109, 74, 174, 0.09); color: var(--brand); } .shop-catbar a.is-current { background: var(--brand-deep); color: #fff; } .shop-catbar a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ── Stránka ─────────────────────────────────────────────────────────────── */ .shop { width: min(calc(100% - 2 * var(--gutter)), var(--max-width)); margin-inline: auto; padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem); } .shop-hero { max-width: 44rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); } .shop-hero h1 { margin: 0.35rem 0 0.5rem; font-size: clamp(2.15rem, 7vw, 3.1rem); } .shop-hero .lead { max-width: 38ch; margin: 0; } /* Hrdina: hero karta je zaoblená len hore, jej variant (p-hero__alt) len dole — spolu tvoria jeden blok. */ .shop-leadin { margin-bottom: clamp(2rem, 5vw, 3rem); } .shop-leadin .p-hero { border-radius: var(--r-lg) var(--r-lg) 0 0; } .shop-leadin .p-hero:last-child { border-radius: var(--r-lg); } /* ── Sekcia ──────────────────────────────────────────────────────────────── */ .shop-sec { margin-bottom: clamp(2rem, 5vw, 3rem); } .shop-sec__head { margin-bottom: 0.9rem; } .shop-sec__title { margin: 0 0 0.3rem; font-size: clamp(1.35rem, 3.4vw, 1.65rem); color: var(--brand-deep); } /* Veta pod nadpisom nesie HODNOTU sekcie, nie cenu. */ .shop-sec__note { margin: 0; max-width: 52ch; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } /* Stav sekcie stojí pri nadpise, nie v texte pod ním: inak by dve sekcie „zatiaľ nič" niesli tú istú vetu dvakrát a stránka by sa opakovala. */ .shop-sec__state { display: inline-block; margin-left: 0.6rem; vertical-align: 0.22em; font-style: normal; padding: 0.12em 0.6em; border: 1px solid var(--warm); border-radius: 999px; color: var(--amber); font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ── Zoznam výkladov ─────────────────────────────────────────────────────── */ /* Jeden kontajner na sekciu, nie kontajner na produkt. Sekcia je jedna plocha a výklady sú jej riadky — tým prestane byť stránka stenou nesúvisiacich kariet a začne sa dať prebehnúť očami. Linky kreslí border bunky, nie medzera v mriežke. Medzera vyzerá elegantne, kým je mriežka plná: pri štyroch položkách v troch stĺpcoch by sa z dvoch prázdnych buniek stali béžové obdĺžniky cez pol sekcie. */ .shop-list { display: grid; grid-template-columns: 1fr; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; list-style: none; margin: 0; padding: 0; } /* Bunka nesie plochu a linky, odkaz vnútri nesie rozloženie. Delí sa to preto, že nedostupný výklad odkaz nie je — a plocha aj linka musia vyzerať rovnako pre obidva prípady. */ .shop-cell { display: grid; background: var(--surface); } .shop-cell + .shop-cell { border-top: 1px solid var(--line); } /* Viac stĺpcov = iné hrany medzi riadkami. Pravidlá sú písané na počet stĺpcov daného zlomu, takže sa linka nikdy nenakreslí tam, kde riadok nie je — ragged posledný riadok ostane bez visiacich čiar. */ @media (min-width: 56rem) { .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-list .shop-cell + .shop-cell { border-top: 0; } .shop-list .shop-cell:nth-child(n + 3) { border-top: 1px solid var(--line); } .shop-list .shop-cell:nth-child(even) { border-left: 1px solid var(--line); } .shop-hero h1 { font-size: 3.4rem; } } @media (min-width: 76rem) { /* Tri stĺpce až tu: pod touto šírkou by riadok nemal miesto na meno aj vetu pod ním a z popisu by ostala skratka. */ .shop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop-list .shop-cell:nth-child(n + 3) { border-top: 0; } .shop-list .shop-cell:nth-child(even) { border-left: 0; } .shop-list .shop-cell:nth-child(n + 4) { border-top: 1px solid var(--line); } .shop-list .shop-cell:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); } } /* Neúplný posledný riadok sa NEnaťahuje — poslednú reálnu položku sme kedysi naťahovali cez zvyšné stĺpce, ale to z jednej dlaždice v sekcii spravilo plný riadok a rozbíjalo mriežku pri štyroch položkách v troch stĺpcoch. Riadok teraz skončí presne na poslednej položke; zvyšok dopĺňajú tiché prázdne bunky (producttiles_row_padding) vo farbe stránky (--bg), nie zoznamu (--surface) — vyzerajú ako výrez do karty, nie ako ďalšia bunka. Počet potrebných buniek je iný pri 2 a pri 3 stĺpcoch, preto má každá dopĺňacia bunka svoj vlastný atribút na zlom — mimo neho ostáva skrytá. */ .shop-cell--pad { display: none; background: var(--bg); } @media (min-width: 56rem) and (max-width: 75.99rem) { .shop-cell--pad[data-pad2="1"] { display: grid; } } @media (min-width: 76rem) { .shop-cell--pad[data-pad3="1"] { display: grid; } } /* ── Poznámka ────────────────────────────────────────────────────────────── */ .shop-note { max-width: 46rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.65; } .shop-note__title { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--brand-deep); } .shop-note p { margin: 0; } .shop-note a { color: var(--brand); text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .shop-catbar a { transition: none; } }