/* HOWAT 2026: styles of the theme itself (server-rendered content, WordPress pages). Storefront styles are in assets/. */

/* server-rendered content in main#app: hidden while the storefront starts, shown after 4 s if it does not */
.hw-js #app > .hw-ssr{visibility:hidden;animation:hw-ssr-show 0s linear 4s forwards}
@keyframes hw-ssr-show{to{visibility:visible}}
.hw-ssr{max-width:var(--max,1360px);margin:0 auto;padding:32px var(--gut,16px) 64px;font-family:var(--font,system-ui,sans-serif)}
.hw-ssr h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 12px}
.hw-ssr h2{font-size:22px;margin:32px 0 12px}
.hw-ssr p{margin:0 0 12px;max-width:65ch}
.hw-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px;font-size:14px}
.hw-crumbs li+li::before{content:"›";margin-right:8px;color:#84878C}
.hw-product{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.hw-product{grid-template-columns:1fr 1fr;align-items:start}}
.hw-product-img{display:block;width:100%;height:auto;border-radius:18px;background:#fff}
.hw-products,.hw-links{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hw-price{font-weight:600}

/* WordPress pages: the HOWAT header is sticky, so anchors land below it */
body.howat-wp{overflow-x:hidden}
body.howat-wp #wrapper{position:relative}