/* Self-hosted OFL fonts: expressive soft serif + clear geometric sans. */
:root {
    --body: 'Outfit', 'Arial', sans-serif;
    --display: 'Fraunces', 'Georgia', serif;
}

body {
    font-optical-sizing: auto;
}

h1, h2, h3,
.ticker-track, .round-sticker, .box-price,
.social-card p, .menu-bottom p, .product-subtitle,
.product-price, .cart-totals .total, .sticky-buy strong,
.product-art .art-word, .card-image::before, .bowlkie-visual::before {
    font-variation-settings: 'SOFT' 85, 'WONK' 1;
}

h1, h2, h3,
.woocommerce h2, .woocommerce h3, .commerce-page h1 {
    letter-spacing: -.035em;
    line-height: 1.04;
}

.hero h1 {
    font-size: clamp(58px, 16.5vw, 96px);
    letter-spacing: -.045em;
    line-height: .98;
}

.catalog-header h1 {
    font-size: clamp(52px, 14vw, 90px);
    letter-spacing: -.045em;
    line-height: 1;
}

.story-title {
    font-size: clamp(53px, 14.8vw, 110px);
    letter-spacing: -.045em;
    line-height: .98;
}

.product-info h1 {
    font-size: clamp(44px, 12vw, 72px);
    line-height: 1.03;
    overflow-wrap: break-word;
}

.card-info h3 {
    font-size: 20px;
    letter-spacing: -.035em;
    line-height: 1.12;
    overflow-wrap: break-word;
}

.card-info p {
    line-height: 1.5;
}

.product-subtitle,
.social-card p,
.menu-bottom p,
.round-sticker {
    line-height: 1.12;
}

.desktop-nav {
    font-size: 14px;
    font-weight: 600;
}

.pill, .button {
    font-weight: 600;
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
    font-family: var(--body);
}

.woocommerce table .product-price {
    font-family: var(--body);
    font-size: inherit;
    font-weight: inherit;
    font-variation-settings: normal;
    letter-spacing: normal;
    line-height: inherit;
}

.woocommerce table th.product-price {
    font-weight: 700;
}

@media (min-width: 600px) {
    .hero h1 { font-size: 104px; }
    .card-info h3 { font-size: 26px; }
}

@media (min-width: 1000px) {
    .hero h1 { font-size: clamp(104px, 8.8vw, 144px); }
    .catalog-header h1 { font-size: 104px; }
    .card-info h3 { font-size: 30px; }
    .product-info h1 { font-size: 72px; }
    .story-title { font-size: clamp(102px, 12vw, 180px); }
}

@media (max-width: 359px) {
    .hero h1 { font-size: 53px; }
    .catalog-header h1 { font-size: 47px; }
    .card-info h3 { font-size: 18px; }
    .story-title { font-size: 48px; }
    .product-info h1 { font-size: 40px; }
}