:root {
    --fz-ink: #191919;
    --fz-ink-soft: #333333;
    --fz-muted: #5c5c5c;
    --fz-line: #d8d8d8;
    --fz-paper: #ffffff;
    --fz-soft: #f2f2f2;
    --fz-soft-2: #eaeaea;
    --fz-teal: #4f7380;
    --fz-teal-dark: #2f6578;
    --fz-green: #54770f;
    --fz-radius: 0px;   /* sisaltopinnat teravareunaisia; napit pitavat pillerinsa */
    --fz-shadow: 0 18px 48px rgba(25, 25, 25, 0.09);
    --fz-max: 1180px;
    --fz-font-sans: 'Karla', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fz-font-display: 'Fraunces', Georgia, "Times New Roman", Times, serif;

    /* Pyöristys vain interaktiivisiin elementteihin. Sisältöpinnat ovat
       teräväreunaisia - se sopii menun paperimaailmaan ja erottaa sivuston
       geneerisestä korttiulkoasusta. */
    --fz-radius-surface: 0px;
    --fz-radius-control: 999px;
    --fz-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --fz-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.fz-phase1 {
    margin: 0;
    background: var(--fz-paper);
    color: var(--fz-ink);
    font-family: var(--fz-font-sans);
    font-size: 16px;
    line-height: 1.6;
}

body.nav-open,
body.cart-open {
    overflow: hidden;
}

@keyframes fz-rise-in {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fz-soft-scale-in {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.js .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 560ms var(--fz-ease-out), transform 560ms var(--fz-ease-out);
    transition-delay: calc(var(--motion-order, 0) * 42ms);
    will-change: opacity, transform;
}

.js .motion-reveal.is-visible,
.motion-reduced .motion-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--fz-ink);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 1000;
    padding: 10px 14px;
    background: var(--fz-ink);
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    top: 16px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(230, 230, 230, 0.86);
    backdrop-filter: blur(12px);
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled {
    box-shadow: 0 10px 34px rgba(25, 25, 25, 0.07);
}

.site-header__inner {
    width: min(var(--fz-max), calc(100% - 40px));
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    transition: min-height 220ms var(--fz-ease-out);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.brand img {
    width: 188px;
    max-height: 38px;
    object-fit: contain;
    transition: width 220ms var(--fz-ease-out), transform 220ms var(--fz-ease-out);
}

.site-header.is-scrolled .site-header__inner {
    min-height: 70px;
}

.site-header.is-scrolled .brand img {
    width: 172px;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    order: 3;
}

.header-cart {
    min-height: 44px;
    padding: 6px 12px 6px 8px;
    border: 1px solid var(--fz-line);
    border-radius: 999px;
    background: #fff;
    color: var(--fz-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: inherit;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.header-cart:hover,
.header-cart:focus {
    border-color: rgba(69, 126, 149, 0.55);
    box-shadow: 0 10px 24px rgba(25, 25, 25, 0.08);
    transform: translateY(-1px);
}

.header-cart:active,
.button:active,
.primary-nav__cta:active,
.product-card__cart:active {
    transform: translateY(1px) scale(0.985);
}

.header-cart__icon {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--fz-soft);
    color: var(--fz-teal-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-cart__icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-cart__badge {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--fz-teal);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 14px;
    text-align: center;
}

.header-cart__text {
    display: grid;
    gap: 0;
    text-align: left;
}

.header-cart__label {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
}

.header-cart__meta {
    color: var(--fz-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.header-cart--preview .header-cart__meta {
    color: var(--fz-teal-dark);
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    order: 2;
}

.primary-nav__list {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav a {
    position: relative;
    color: var(--fz-ink-soft);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.primary-nav__list a::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--fz-teal);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: opacity 180ms ease, transform 180ms var(--fz-ease-out);
}

.primary-nav__list a:hover::before,
.primary-nav__list a:focus::before {
    opacity: 1;
    transform: scaleX(1);
}

.primary-nav a:hover,
.primary-nav a:focus {
    color: var(--fz-teal-dark);
}

.primary-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--fz-teal);
    color: #fff !important;
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--fz-line);
    border-radius: 999px;
    background: #fff;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.nav-toggle span:not(.screen-reader-text) {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: var(--fz-ink);
    transform-origin: center;
    transition: transform 180ms ease, opacity 180ms ease, background 180ms ease;
}

.nav-toggle[aria-expanded="true"] {
    background: var(--fz-ink);
    border-color: var(--fz-ink);
    box-shadow: 0 12px 28px rgba(25, 25, 25, 0.18);
}

.nav-toggle[aria-expanded="true"] span:not(.screen-reader-text) {
    background: #fff;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.site-main {
    overflow: hidden;
}

.hero,
.page-hero,
.section,
.contact-band {
    width: min(var(--fz-max), calc(100% - 40px));
    margin: 0 auto;
}

.hero {
    min-height: min(760px, calc(100svh - 140px));
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1fr);
    gap: 56px;
    align-items: center;
    padding: 62px 0 54px;
}

.hero__content {
    max-width: 610px;
}

.section-note {
    margin: 0 0 14px;
    color: var(--fz-teal-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--fz-ink);
    line-height: 1.05;
}

h1 {
    max-width: 640px;
    font-family: var(--fz-font-display);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.98;
}

h2 {
    font-family: var(--fz-font-display);
    font-size: 46px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.04;
}

h3 {
    font-size: 20px;
    font-weight: 800;
}

.hero__lead,
.page-hero p,
.section__header p,
.section--split p,
.section--story p,
.contact-band p {
    color: var(--fz-muted);
    font-size: 19px;
    line-height: 1.55;
}

.hero__lead {
    margin: 24px 0 0;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero__assurance {
    margin: 14px 0 0;
    color: var(--fz-ink-soft);
    font-size: 14px;
    font-weight: 700;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.button--primary {
    background: var(--fz-teal);
    color: #fff;
}

.button--primary:hover,
.button--primary:focus,
.primary-nav__cta:hover,
.primary-nav__cta:focus {
    background: var(--fz-teal-dark);
    box-shadow: 0 12px 26px rgba(69, 126, 149, 0.18);
    transform: translateY(-1px);
}

.button--secondary {
    border-color: var(--fz-line);
    background: #fff;
    color: var(--fz-ink);
}

.button--secondary:hover,
.button--secondary:focus {
    border-color: var(--fz-teal);
    color: var(--fz-teal-dark);
    box-shadow: 0 10px 22px rgba(25, 25, 25, 0.06);
    transform: translateY(-1px);
}

.hero__media {
    position: relative;
    --hero-shift: 0px;
    --media-scale: 1;
    aspect-ratio: 3 / 2;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--fz-radius);
    background: var(--fz-soft);
    box-shadow: var(--fz-shadow);
    transform: translateZ(0);
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: inherit;
    pointer-events: none;
}

.hero__media picture,
.story-image picture,
.hero__media img,
.story-image img {
    width: 100%;
    height: 100%;
}

.hero__media picture,
.story-image picture {
    display: block;
}

.hero__media img,
.story-image img {
    object-fit: cover;
    object-position: center center;
    transition: transform 900ms var(--fz-ease-soft);
}

.hero__media img {
    transform: translate3d(0, var(--hero-shift), 0) scale(var(--media-scale));
}

.hero__media:hover {
    --media-scale: 1.025;
}

.hero__media:hover img,
.story-image:hover img {
    transform: scale(1.025);
}

.hero__media:hover img {
    transform: translate3d(0, var(--hero-shift), 0) scale(var(--media-scale));
}

.section {
    padding: 88px 0;
}

.section__header {
    max-width: 720px;
    margin-bottom: 36px;
}

.section__header p {
    margin: 18px 0 0;
}

.path-grid,
.content-grid,
.shop-grid,
.contact-grid {
    display: grid;
    gap: 18px;
}

.path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.path-card,
.content-card,
.product-card,
.contact-card,
.mini-product {
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
}

.path-card {
    min-height: 340px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.path-card__media,
.content-card__media,
.product-card__media {
    margin: 0;
    overflow: hidden;
    background: var(--fz-soft);
}

.path-card__media {
    aspect-ratio: 16 / 10;
}

.content-card__media {
    aspect-ratio: 16 / 10;
    margin: -28px -28px 22px;
    border-bottom: 1px solid var(--fz-line);
}

.product-card__media {
    aspect-ratio: 16 / 11;
    margin: -22px -22px 18px;
    border-bottom: 1px solid var(--fz-line);
}

.path-card__media picture,
.content-card__media picture,
.product-card__media picture,
.path-card__media img,
.content-card__media img,
.product-card__media img {
    width: 100%;
    height: 100%;
}

.path-card__media picture,
.content-card__media picture,
.product-card__media picture {
    display: block;
}

.path-card__media img,
.content-card__media img,
.product-card__media img {
    object-fit: cover;
    transition: transform 600ms var(--fz-ease-soft);
}

.path-card__body {
    min-height: 188px;
    padding: 22px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.path-card__detail {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    color: var(--fz-ink-soft);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.path-card span,
.contact-card span,
.product-card span,
.mini-product span {
    color: var(--fz-teal-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.path-card p,
.content-card p,
.product-card p,
.contact-card p {
    color: var(--fz-muted);
}

.path-card strong {
    margin-top: 8px;
    color: var(--fz-teal-dark);
    font-size: 14px;
}

.path-card:hover,
.content-card:hover,
.product-card:hover {
    border-color: rgba(96, 125, 139, 0.55);
    box-shadow: 0 14px 34px rgba(25, 25, 25, 0.08);
    transform: translateY(-4px);
}

.path-card:hover .path-card__media img,
.content-card:hover .content-card__media img,
.product-card:hover .product-card__media img {
    transform: scale(1.035);
}

.path-card,
.content-card,
.product-card {
    transition: transform 210ms var(--fz-ease-out), box-shadow 210ms ease, border-color 210ms ease;
}

.section--reassurance,
.section--faq {
    border-top: 1px solid var(--fz-line);
}

.reassurance-grid,
.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.reassurance-card,
.faq-card {
    min-height: 190px;
    padding: 26px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
}

.reassurance-card {
    border-color: #cfcfcf;
    background: linear-gradient(180deg, #fff 0%, #f7f7f5 100%);
    box-shadow: 0 12px 30px rgba(25, 25, 25, 0.055);
}

.reassurance-card h3,
.faq-card h3 {
    position: relative;
    padding-top: 24px;
    font-size: 21px;
    line-height: 1.15;
}

.reassurance-card h3 {
    padding-top: 0;
}

.reassurance-card h3::before,
.faq-card h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: var(--fz-teal);
}

.reassurance-card h3::before {
    content: none;
}

.reassurance-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(96, 125, 139, 0.1);
    color: var(--fz-teal-dark);
}

.icon {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.reassurance-card p,
.faq-card p {
    margin: 16px 0 0;
    color: var(--fz-muted);
}

.section--split,
.section--story {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
    gap: 46px;
    align-items: center;
    border-top: 1px solid var(--fz-line);
}

.section--story {
    grid-template-columns: minmax(360px, 1fr) minmax(0, 0.9fr);
}

.section--split p,
.section--story p {
    margin: 20px 0 26px;
}

.trust-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.trust-list li {
    padding: 14px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: var(--fz-soft);
}

.trust-list strong,
.trust-list span {
    display: block;
}

.trust-list strong {
    color: var(--fz-ink);
    font-size: 14px;
    line-height: 1.25;
}

.trust-list span {
    margin-top: 5px;
    color: var(--fz-muted);
    font-size: 12px;
    line-height: 1.35;
}

.product-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mini-product {
    min-height: 126px;
    padding: 20px;
    background: var(--fz-soft);
}

.mini-product h3 {
    margin-top: 12px;
    font-size: 18px;
}

.story-image {
    min-height: 430px;
    overflow: hidden;
    border-radius: var(--fz-radius);
    background: var(--fz-soft);
    box-shadow: var(--fz-shadow);
}

.page-hero {
    display: flex;
    align-items: center;
    min-height: 430px;
    padding: 76px 0 54px;
    border-bottom: 1px solid var(--fz-line);
}

.page-hero > div {
    max-width: 820px;
}

.page-hero p {
    margin: 22px 0 28px;
}

.content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-card {
    min-height: 360px;
    overflow: hidden;
    padding: 28px;
}

.content-card h2 {
    font-size: 24px;
}

.section--menus {
    border-top: 1px solid var(--fz-line);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 20px;
}

.menu-grid--count-1 {
    max-width: 820px;
}

.menu-card {
    overflow: hidden;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
    box-shadow: 0 16px 38px rgba(25, 25, 25, 0.055);
}

.menu-card__header {
    padding: 28px 30px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--fz-line);
    background: linear-gradient(135deg, rgba(96, 125, 139, 0.1), rgba(255, 255, 255, 0.98));
}

.menu-card__header h3 {
    max-width: 420px;
    font-size: 28px;
    line-height: 1.08;
}

.menu-card__price {
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--fz-teal-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.menu-card__group {
    padding: 26px 30px 0;
}

.menu-card__group + .menu-card__group {
    margin-top: 8px;
}

.menu-card__group h4 {
    margin-bottom: 12px;
    color: var(--fz-teal-dark);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-card__group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-card__group li {
    padding: 13px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(25, 25, 25, 0.08);
}

.menu-card__item {
    color: var(--fz-ink-soft);
    font-size: 15px;
    line-height: 1.52;
}

.menu-card__diets {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.menu-card__diets > span {
    min-width: 29px;
    padding: 5px 7px;
    border: 1px solid rgba(69, 126, 149, 0.26);
    border-radius: 999px;
    background: rgba(96, 125, 139, 0.08);
    color: var(--fz-teal-dark);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.menu-card__note {
    margin: 24px 30px 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--fz-soft);
    color: var(--fz-ink-soft);
    font-size: 14px;
    font-weight: 700;
}

.menu-card__cta {
    margin: 24px 30px 30px;
    display: inline-flex;
    color: var(--fz-teal-dark);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.menu-card__cta::after {
    margin-left: 8px;
    content: "→";
    transition: transform 180ms ease;
}

.menu-card__cta:hover::after,
.menu-card__cta:focus::after {
    transform: translateX(4px);
}

.menu-legend {
    margin: 22px 0 0;
    color: var(--fz-muted);
    font-size: 13px;
    line-height: 1.55;
}

.step-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: steps;
}

.step-list li {
    position: relative;
    min-height: 150px;
    padding: 56px 24px 24px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    color: var(--fz-muted);
    counter-increment: steps;
}

.step-list li::before {
    content: counter(steps);
    position: absolute;
    top: 20px;
    left: 24px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--fz-teal);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.category-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.category-rail span {
    padding: 9px 12px;
    border: 1px solid var(--fz-line);
    border-radius: 999px;
    color: var(--fz-ink-soft);
    font-size: 13px;
    font-weight: 800;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.category-rail span:hover {
    border-color: rgba(69, 126, 149, 0.48);
    background: rgba(96, 125, 139, 0.08);
    color: var(--fz-teal-dark);
    transform: translateY(-1px);
}

.shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-status {
    max-width: 720px;
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: var(--fz-soft);
    display: grid;
    gap: 4px;
}

.shop-status strong {
    color: var(--fz-ink);
}

.shop-status span {
    color: var(--fz-muted);
    font-size: 14px;
}

.product-card {
    min-height: 390px;
    overflow: hidden;
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.product-card h2 {
    margin-top: 12px;
    font-size: 20px;
    line-height: 1.15;
}

.product-card h2 a {
    color: inherit;
    text-decoration: none;
}

.product-card__price {
    margin-top: 10px;
    color: var(--fz-ink);
    font-size: 16px;
    font-weight: 900;
}

.product-card__price del {
    color: var(--fz-muted);
    font-weight: 700;
}

.product-card__price ins {
    text-decoration: none;
}

.product-card p {
    margin: 14px 0 20px;
    font-size: 14px;
    line-height: 1.55;
}

.product-card > a,
.product-card__cart {
    margin-top: auto;
    color: var(--fz-teal-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.product-card__cart {
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid var(--fz-line);
    border-radius: 999px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.product-card__cart:hover,
.product-card__cart:focus,
.product-card__cart.added {
    border-color: var(--fz-teal);
    background: var(--fz-soft);
    color: var(--fz-teal-dark);
    box-shadow: 0 10px 22px rgba(25, 25, 25, 0.06);
    transform: translateY(-1px);
}

.product-card .added_to_cart {
    margin-top: 10px;
    color: var(--fz-ink);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-card {
    min-height: 164px;
    padding: 28px;
}

.contact-card a {
    display: block;
    margin-top: 12px;
    color: var(--fz-ink);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.section--contact-form {
    border-top: 1px solid var(--fz-line);
}

.contact-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr);
    gap: 48px;
    align-items: start;
}

.contact-form-intro {
    position: sticky;
    top: 120px;
}

.contact-form-intro p {
    margin: 20px 0 22px;
    color: var(--fz-muted);
    font-size: 19px;
    line-height: 1.55;
}

.contact-form-intro a {
    color: var(--fz-teal-dark);
    font-weight: 800;
    text-decoration: none;
}

.contact-form-panel {
    padding: 30px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
    box-shadow: 0 16px 38px rgba(25, 25, 25, 0.06);
}

.contact-form {
    display: grid;
    gap: 20px;
}

.contact-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-note {
    margin: 0;
    color: var(--fz-muted);
    font-size: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.form-grid > *,
.contact-form label {
    min-width: 0;
}

.form-grid--required {
    padding-bottom: 4px;
}

.form-optional {
    min-width: 0;
    margin: 0;
    padding: 22px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: var(--fz-soft);
}

.form-optional > legend {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--fz-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.form-optional__note {
    clear: both;
    margin: 2px 0 16px;
    color: var(--fz-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.form-submit-note {
    margin: -8px 0 0;
    color: var(--fz-muted);
    font-size: 13px;
    line-height: 1.5;
}

.form-submit-note a {
    color: var(--fz-teal-dark);
    font-weight: 800;
}

.contact-form label {
    display: grid;
    gap: 8px;
    color: var(--fz-ink-soft);
    font-size: 14px;
    font-weight: 800;
}

.field--full,
.consent-field {
    grid-column: 1 / -1;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
    color: var(--fz-ink);
    font: inherit;
    font-weight: 500;
}

.contact-form textarea {
    min-height: 116px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--fz-teal);
    box-shadow: 0 0 0 3px rgba(96, 125, 139, 0.16);
    outline: none;
}

.consent-field {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: var(--fz-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.consent-field input {
    min-height: 0;
    margin-top: 3px;
}

.form-status {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: var(--fz-radius);
    font-size: 14px;
    font-weight: 800;
}

.form-status--success {
    background: rgba(84, 119, 15, 0.12);
    color: var(--fz-green);
}

.form-status--error {
    background: rgba(96, 125, 139, 0.13);
    color: var(--fz-ink);
}

.cancellation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cancellation-summary article,
.order-cancel-notice {
    padding: 24px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
    box-shadow: 0 14px 34px rgba(25, 25, 25, 0.05);
}

.cancellation-summary span,
.order-cancel-notice strong {
    display: block;
    color: var(--fz-teal-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cancellation-summary p,
.order-cancel-notice p {
    margin: 12px 0 0;
    color: var(--fz-muted);
    line-height: 1.55;
}

.order-cancel-notice {
    margin: 28px 0;
}

.order-cancel-notice .button {
    margin-top: 16px;
}

.contact-band {
    margin-top: 26px;
    margin-bottom: 90px;
    padding: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    border-radius: var(--fz-radius);
    background: var(--fz-ink);
    color: #fff;
}

.contact-band h2,
.contact-band p,
.contact-band .section-note {
    color: #fff;
}

.contact-band h2 {
    font-size: 44px;
}

.contact-band p {
    max-width: 680px;
    margin: 12px 0 0;
    opacity: 0.86;
}

.contact-band .button {
    flex: 0 0 auto;
    background: #fff;
    color: var(--fz-ink);
}

.site-footer {
    background: var(--fz-soft);
    border-top: 1px solid var(--fz-line);
}

.site-footer__inner {
    width: min(var(--fz-max), calc(100% - 40px));
    margin: 0 auto;
    padding: 46px 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 34px;
    color: var(--fz-muted);
}

.site-footer__logo {
    width: 170px;
    margin-bottom: 16px;
}

.site-footer strong {
    display: block;
    margin-bottom: 10px;
    color: var(--fz-ink);
}

.site-footer a,
.site-footer span {
    display: block;
    color: var(--fz-muted);
    text-decoration: none;
}

.site-footer a,
.site-footer__button {
    transition: color 180ms ease, transform 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus,
.site-footer__button:hover,
.site-footer__button:focus {
    color: var(--fz-teal-dark);
    transform: translateX(2px);
}

.site-footer__button {
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fz-teal-dark);
    cursor: pointer;
    display: block;
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    justify-items: end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.cart-drawer[hidden] {
    display: none;
}

.cart-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer__overlay {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(25, 25, 25, 0.32);
    cursor: pointer;
}

.cart-drawer__panel {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    height: 100dvh;
    padding: 24px;
    background: #fff;
    box-shadow: -18px 0 52px rgba(25, 25, 25, 0.18);
    display: flex;
    flex-direction: column;
    gap: 22px;
    transform: translate3d(24px, 0, 0);
    transition: transform 260ms var(--fz-ease-soft);
    will-change: transform;
}

.cart-drawer.is-open .cart-drawer__panel {
    transform: translate3d(0, 0, 0);
}

.cart-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--fz-line);
}

.cart-drawer__header h2 {
    font-size: 30px;
}

.cart-drawer__close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--fz-line);
    border-radius: 999px;
    background: #fff;
    color: var(--fz-ink);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.cart-drawer__empty {
    min-height: 330px;
    padding: 34px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.cart-drawer__empty strong {
    color: var(--fz-ink);
    font-size: 22px;
}

.cart-drawer__empty p {
    margin: 0;
    color: var(--fz-muted);
}

.cart-drawer__items {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 14px;
}

.cart-item {
    padding: 12px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    animation: fz-rise-in 360ms var(--fz-ease-out) both;
}

.cart-item:nth-child(2) {
    animation-delay: 45ms;
}

.cart-item:nth-child(3) {
    animation-delay: 90ms;
}

.cart-item:nth-child(4) {
    animation-delay: 135ms;
}

.cart-item__media {
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--fz-radius);
    background: var(--fz-soft);
}

.cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item__body {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 5px;
}

.cart-item h3 {
    font-size: 15px;
    line-height: 1.25;
}

.cart-item h3 a,
.cart-item__remove {
    color: inherit;
    text-decoration: none;
}

.cart-item span,
.cart-item__remove {
    color: var(--fz-muted);
    font-size: 13px;
}

.cart-item strong {
    color: var(--fz-ink);
    font-size: 14px;
}

.cart-drawer__footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--fz-line);
    display: grid;
    gap: 10px;
}

.cart-drawer__subtotal {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cart-drawer__subtotal span {
    color: var(--fz-muted);
    font-size: 14px;
}

.cart-drawer__subtotal strong {
    color: var(--fz-ink);
    font-size: 18px;
}

.section--woocommerce {
    width: min(var(--fz-max), calc(100% - 40px));
    padding-top: 58px;
    padding-bottom: 86px;
}

.woocommerce-shell {
    max-width: 100%;
}

.shop-category-filter {
    clear: both;
    margin: 24px 0 32px;
    padding: 20px;
    border: 1px solid rgba(69, 126, 149, 0.22);
    border-radius: calc(var(--fz-radius) + 2px);
    background: linear-gradient(135deg, rgba(96, 125, 139, 0.09), rgba(255, 255, 255, 0.96) 62%);
    box-shadow: 0 14px 34px rgba(25, 25, 25, 0.055);
}

.shop-category-filter__heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-category-filter__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--fz-teal);
    box-shadow: 0 10px 22px rgba(69, 126, 149, 0.22);
    color: #fff;
}

.shop-category-filter__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.shop-category-filter__label {
    margin: 0;
    color: var(--fz-ink);
    font-family: var(--fz-font-display);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}

.shop-category-filter__help {
    margin: 4px 0 0;
    color: var(--fz-muted);
    font-size: 14px;
    line-height: 1.4;
}

.shop-category-filter__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.shop-category-filter__links a {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--fz-line);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--fz-ink-soft);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.shop-category-filter__links a:hover,
.shop-category-filter__links a:focus,
.shop-category-filter__links a[aria-current="page"] {
    border-color: var(--fz-teal);
    background: var(--fz-teal);
    color: #fff;
    transform: translateY(-1px);
}

.shop-category-filter__links a span {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(96, 125, 139, 0.12);
    text-align: center;
}

.shop-category-filter__links a:hover span,
.shop-category-filter__links a:focus span,
.shop-category-filter__links a[aria-current="page"] span {
    background: rgba(255, 255, 255, 0.2);
}

.shop-category-filter__mobile {
    display: none;
}

.js .shop-category-filter__submit {
    display: none !important;
}

.section--woocommerce .woocommerce-products-header {
    margin-bottom: 8px;
}

.section--woocommerce .woocommerce-products-header__title {
    max-width: 100%;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    margin-bottom: 24px;
}

.woocommerce .woocommerce-result-count {
    color: var(--fz-muted);
    font-size: 15px;
}

.woocommerce .woocommerce-ordering select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .variations select {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
    color: var(--fz-ink);
    font: inherit;
}

.woocommerce .woocommerce-ordering select {
    min-width: 220px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce div.product form.cart .button {
    border-radius: 999px;
    background: var(--fz-teal) !important;
    color: #fff !important;
    font-weight: 800;
    line-height: 1.2;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.woocommerce div.product form.cart .button:hover {
    background: var(--fz-teal-dark) !important;
    color: #fff !important;
}

.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce div.product form.cart .button.disabled {
    background: var(--fz-teal) !important;
    color: #fff !important;
    opacity: 0.58;
}

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 28px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 0 22px !important;
    overflow: hidden;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff 68%, rgba(96, 125, 139, 0.055) 100%);
    box-shadow: 0 16px 38px rgba(25, 25, 25, 0.07);
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within,
.woocommerce-page ul.products li.product:hover,
.woocommerce-page ul.products li.product:focus-within {
    border-color: rgba(69, 126, 149, 0.42);
    box-shadow: 0 24px 54px rgba(25, 25, 25, 0.12);
    transform: translateY(-4px);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
}

.woocommerce ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 4 / 3;
    height: auto !important;
    max-height: 260px;
    margin: 0 0 18px !important;
    object-fit: cover;
    transition: filter 420ms ease, transform 600ms var(--fz-ease-soft);
}

.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product:focus-within a img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.035);
}

.woocommerce ul.products li.product .product-category-badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
    padding: 7px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(25, 25, 25, 0.13);
    color: var(--fz-teal-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
    margin-right: 22px !important;
    margin-left: 22px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 2.6em;
    padding: 0 !important;
    color: var(--fz-ink);
    font-family: var(--fz-font-display);
    font-size: 24px !important;
    line-height: 1.08;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--fz-teal-dark) !important;
    font-size: 17px;
    font-weight: 800;
}

.woocommerce ul.products li.product .price {
    margin-top: auto !important;
    padding-top: 10px;
}

.woocommerce ul.products li.product .button {
    display: inline-flex;
    width: calc(100% - 44px);
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px !important;
    padding: 12px 18px !important;
}

.woocommerce ul.products li.product .button::after {
    content: "\2192";
    margin-left: 12px;
    font-size: 18px;
    line-height: 1;
    transition: transform 180ms ease;
}

.woocommerce ul.products li.product .button:hover::after,
.woocommerce ul.products li.product .button:focus::after {
    transform: translateX(3px);
}

.woocommerce div.product {
    color: var(--fz-ink);
}

.woocommerce div.product div.images img {
    border-radius: var(--fz-radius);
}

.woocommerce div.product div.summary {
    padding-top: 12px;
}

.woocommerce div.product .product_title {
    max-width: 720px;
    font-family: var(--fz-font-display);
    font-size: 60px;
    line-height: 0.98;
}

.woocommerce div.product form.cart {
    margin-top: 28px;
}

.woocommerce div.product form.cart .variations {
    margin-bottom: 18px;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
    display: block;
    padding: 0 0 10px;
    line-height: 1.3;
}

.woocommerce div.product form.cart .variations label {
    color: var(--fz-ink);
    font-size: 14px;
    font-weight: 800;
}

.woocommerce div.product form.cart div.quantity {
    margin-right: 10px;
}

.woocommerce div.product form.cart .button {
    min-height: 50px;
    padding: 14px 22px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin-top: 42px;
    padding: 0;
    border-bottom: 1px solid var(--fz-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-color: var(--fz-line);
    border-radius: var(--fz-radius) var(--fz-radius) 0 0;
    background: var(--fz-soft);
}

.woocommerce div.product .woocommerce-tabs .panel {
    max-width: 880px;
    padding-top: 26px;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 42px;
}

.woocommerce .related.products {
    clear: both;
    padding-top: 54px;
}

.woocommerce table.shop_table,
.woocommerce-cart-form,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details,
.woocommerce .cart_totals {
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: #fff;
}

.woocommerce table.shop_table {
    border-collapse: separate;
    overflow: hidden;
}

.woocommerce-cart-form,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details,
.woocommerce .cart_totals {
    padding: 22px;
}

.section--privacy {
    padding-top: 72px;
}

.privacy-layout {
    display: grid;
    gap: 28px;
    max-width: 900px;
}

.privacy-section {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--fz-line);
}

.privacy-section h2 {
    max-width: 720px;
    font-size: 34px;
}

.privacy-section p {
    max-width: 820px;
    margin: 16px 0 0;
    color: var(--fz-muted);
    font-size: 17px;
    line-height: 1.65;
}

.cookie-banner {
    position: fixed;
    right: 24px;
    bottom: 24px;
    left: 24px;
    z-index: 80;
    width: min(980px, calc(100% - 48px));
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(230, 230, 230, 0.95);
    border-radius: var(--fz-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 70px rgba(25, 25, 25, 0.18);
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
    transition: opacity 220ms ease, transform 260ms var(--fz-ease-soft);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.cookie-banner__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: 24px;
}

.cookie-banner h2 {
    font-size: 28px;
}

.cookie-banner p {
    margin: 12px 0 0;
    color: var(--fz-muted);
    font-size: 15px;
    line-height: 1.55;
}

.cookie-banner a {
    display: inline-block;
    margin-top: 14px;
    color: var(--fz-teal-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.cookie-banner__settings {
    display: grid;
    gap: 12px;
}

.cookie-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    background: var(--fz-soft);
    color: var(--fz-muted);
    font-size: 14px;
    line-height: 1.45;
}

.cookie-option input {
    margin-top: 3px;
}

.cookie-option strong {
    display: block;
    color: var(--fz-ink);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .motion-reveal,
    .js .motion-reveal,
    .cart-drawer__panel,
    .cookie-banner,
    .path-card:hover,
    .content-card:hover,
    .product-card:hover,
    .hero__media:hover img,
    .story-image:hover img,
    .path-card:hover .path-card__media img,
    .content-card:hover .content-card__media img,
    .product-card:hover .product-card__media img {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 1050px) {
    .site-header {
        --fz-mobile-header-height: 75px;
    }

    .site-header.is-scrolled {
        --fz-mobile-header-height: 71px;
    }

    .site-header__inner {
        min-height: 74px;
        gap: 14px;
    }

    .nav-toggle {
        display: block;
        flex: 0 0 auto;
    }

    .primary-nav {
        position: fixed;
        inset: var(--fz-mobile-header-height) 0 0;
        z-index: 45;
        min-height: calc(100dvh - var(--fz-mobile-header-height));
        max-height: calc(100dvh - var(--fz-mobile-header-height));
        padding: 0 20px max(34px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        background: linear-gradient(180deg, #fff 0%, #fff 68%, var(--fz-paper) 100%);
        border-top: 1px solid var(--fz-line);
        box-shadow: inset 0 14px 28px rgba(25, 25, 25, 0.035);
        opacity: 0;
        overflow: auto;
        pointer-events: none;
        transform: translateY(-10px);
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .primary-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    .primary-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .primary-nav__list li,
    .primary-nav__cta {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
        transition: opacity 220ms ease, transform 260ms var(--fz-ease-out), background 180ms ease, box-shadow 180ms ease;
    }

    .primary-nav.is-open .primary-nav__list li,
    .primary-nav.is-open .primary-nav__cta {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .primary-nav.is-open .primary-nav__list li:nth-child(1) {
        transition-delay: 30ms;
    }

    .primary-nav.is-open .primary-nav__list li:nth-child(2) {
        transition-delay: 60ms;
    }

    .primary-nav.is-open .primary-nav__list li:nth-child(3) {
        transition-delay: 90ms;
    }

    .primary-nav.is-open .primary-nav__list li:nth-child(4) {
        transition-delay: 120ms;
    }

    .primary-nav.is-open .primary-nav__list li:nth-child(5) {
        transition-delay: 150ms;
    }

    .primary-nav.is-open .primary-nav__list li:nth-child(6) {
        transition-delay: 180ms;
    }

    .primary-nav.is-open .primary-nav__list li:nth-child(7),
    .primary-nav.is-open .primary-nav__cta {
        transition-delay: 210ms;
    }

    .primary-nav__list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 54px;
        padding: 0 14px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--fz-ink);
        font-size: 22px;
        line-height: 1.1;
        -webkit-tap-highlight-color: transparent;
        transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
    }

    .primary-nav__list a::before {
        display: none;
    }

    .primary-nav__list a:hover,
    .primary-nav__list a:focus {
        background: rgba(96, 125, 139, 0.09);
        color: var(--fz-teal-dark);
    }

    .primary-nav__list a:active {
        background: rgba(96, 125, 139, 0.18);
        transform: scale(0.985);
    }

    .primary-nav__list .current-menu-item > a,
    .primary-nav__list a[aria-current="page"] {
        background: var(--fz-soft);
        box-shadow: inset 4px 0 0 var(--fz-teal);
        color: var(--fz-teal-dark);
    }

    .primary-nav__list a::after {
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--fz-teal);
        border-right: 2px solid var(--fz-teal);
        content: "";
        opacity: 0.58;
        transform: rotate(45deg);
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .primary-nav__list a:hover::after,
    .primary-nav__list a:focus::after {
        opacity: 1;
        transform: translateX(3px) rotate(45deg);
    }

    .primary-nav__cta {
        min-height: 54px;
        margin-top: auto;
        border-radius: 999px;
        font-size: 17px;
        box-shadow: 0 16px 32px rgba(84, 119, 132, 0.22);
    }

    .hero,
    .section--split,
    .section--story,
    .contact-form-layout,
    .cookie-banner__content {
        grid-template-columns: 1fr;
    }

    .cart-drawer__panel {
        width: min(430px, 100%);
    }

    .contact-form-intro {
        position: static;
    }

    h1 {
        font-size: 52px;
    }

    h2,
    .contact-band h2 {
        font-size: 40px;
    }

    .hero {
        min-height: 0;
        padding-top: 46px;
    }

    .hero__media {
        min-height: 0;
    }

    .story-image {
        min-height: 340px;
    }

    .path-grid,
    .content-grid,
    .menu-grid,
    .shop-grid,
    .contact-grid,
    .cancellation-summary,
    .reassurance-grid,
    .faq-grid,
    .step-list,
    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce div.product .product_title {
        font-size: 48px;
    }
}

@media (max-width: 680px) {
    .site-header__inner,
    .hero,
    .page-hero,
    .section,
    .contact-band,
    .site-footer__inner {
        width: min(100% - 28px, var(--fz-max));
    }

    .brand img {
        width: 162px;
    }

    .header-cart {
        padding: 6px;
    }

    .header-cart__text {
        display: none;
    }

    .cart-drawer__panel {
        width: 100%;
        padding: 20px;
    }

    .cart-drawer__header h2 {
        font-size: 26px;
    }

    .cart-item {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .hero {
        padding: 34px 0 40px;
        gap: 26px;
    }

    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 30px;
    }

    .hero__lead,
    .page-hero p,
    .section__header p,
    .section--split p,
    .section--story p,
    .contact-band p {
        font-size: 16px;
    }

    .contact-band h2 {
        font-size: 30px;
    }

    .hero__lead {
        margin-top: 20px;
    }

    .hero__actions {
        margin-top: 24px;
    }

    .hero__actions,
    .contact-band {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero__media {
        aspect-ratio: 3 / 2;
        min-height: 0;
    }

    .story-image {
        min-height: 240px;
    }

    .section {
        padding: 48px 0;
    }

    .page-hero {
        min-height: 0;
        padding: 52px 0 42px;
    }

    .path-grid,
    .content-grid,
    .menu-grid,
    .shop-grid,
    .contact-grid,
    .cancellation-summary,
    .reassurance-grid,
    .faq-grid,
    .step-list,
    .site-footer__inner,
    .product-strip {
        grid-template-columns: 1fr;
    }

    .path-card,
    .content-card,
    .product-card,
    .contact-card,
    .reassurance-card,
    .faq-card {
        min-height: 0;
        padding: 22px;
    }

    .path-card {
        padding: 0;
    }

    .path-card__body {
        min-height: 0;
    }

    .content-card__media {
        margin: -22px -22px 20px;
    }

    .menu-card__header {
        padding: 22px;
        flex-direction: column;
        gap: 14px;
    }

    .menu-card__header h3 {
        font-size: 24px;
    }

    .menu-card__group {
        padding: 22px 22px 0;
    }

    .menu-card__group li {
        flex-direction: column;
        gap: 8px;
    }

    .menu-card__diets {
        justify-content: flex-start;
    }

    .menu-card__note {
        margin: 22px 22px 0;
    }

    .menu-card__cta {
        margin: 22px;
    }

    .contact-card a {
        font-size: 20px;
    }

    .contact-form-panel {
        padding: 22px;
    }

    .form-optional {
        padding: 18px 16px;
    }

    .trust-list {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 16px;
    }

    .contact-form input[type="date"] {
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        float: none;
        width: 100%;
    }

    .shop-category-filter {
        margin: 20px 0 26px;
        padding: 18px;
    }

    .shop-category-filter__links {
        display: none;
    }

    .shop-category-filter__heading {
        align-items: flex-start;
    }

    .shop-category-filter__label {
        font-size: 19px;
    }

    .shop-category-filter__help {
        font-size: 13px;
    }

    .shop-category-filter__mobile {
        display: grid;
        gap: 8px;
        margin-top: 18px;
    }

    .shop-category-filter__mobile label {
        color: var(--fz-ink);
        font-size: 15px;
        font-weight: 800;
    }

    .shop-category-filter__controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .shop-category-filter__controls select,
    .shop-category-filter__controls .button {
        min-height: 48px;
        margin: 0;
    }

    .shop-category-filter__controls select {
        width: 100%;
        min-width: 0;
        padding: 0 40px 0 14px;
        border: 1px solid rgba(69, 126, 149, 0.42);
        border-radius: var(--fz-radius);
        background-color: #fff;
        color: var(--fz-ink);
        font: inherit;
        box-shadow: 0 8px 20px rgba(25, 25, 25, 0.045);
    }

    .shop-category-filter__controls select:focus {
        border-color: var(--fz-teal);
        outline: 3px solid rgba(69, 126, 149, 0.16);
        outline-offset: 1px;
    }

    .shop-category-filter__controls .button {
        width: 100% !important;
        padding: 12px 18px !important;
    }

    .shop-category-filter__reset {
        min-height: 48px;
        padding: 11px 18px;
        border: 1px solid rgba(69, 126, 149, 0.42);
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        background: #fff;
        color: var(--fz-teal-dark);
        font-weight: 800;
        line-height: 1.2;
        text-decoration: none;
        transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .shop-category-filter__reset::before {
        content: "\21BA";
        font-size: 18px;
        line-height: 1;
    }

    .shop-category-filter__reset:hover,
    .shop-category-filter__reset:focus {
        border-color: var(--fz-teal);
        background: var(--fz-soft);
        color: var(--fz-teal-dark);
        transform: translateY(-1px);
    }

    .shop-category-filter__mobile.is-loading select {
        cursor: progress;
        opacity: 0.68;
    }

    .woocommerce .woocommerce-ordering select {
        width: 100%;
    }

    .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        min-height: 0;
        font-size: 23px !important;
    }

    .woocommerce div.product .product_title {
        font-size: 38px;
    }

    .woocommerce div.product div.summary {
        margin-bottom: 0;
        padding-top: 0;
    }

    .woocommerce div.product div.summary > p.price {
        margin: 12px 0 0;
    }

    .woocommerce div.product .woocommerce-product-details__short-description {
        margin-top: 18px;
    }

    .woocommerce div.product .woocommerce-product-details__short-description > :first-child {
        margin-top: 0;
    }

    .woocommerce div.product .woocommerce-product-details__short-description > :last-child {
        margin-bottom: 0;
    }

    .woocommerce div.product form.cart {
        margin: 22px 0 18px;
    }

    .woocommerce div.product form.cart .variations {
        margin-bottom: 14px;
    }

    .woocommerce div.product form.cart .variations th {
        padding-bottom: 8px;
    }

    .woocommerce div.product form.cart .variations td {
        padding-bottom: 0;
    }

    .woocommerce div.product form.cart .variations select {
        margin-right: 0;
        width: 100%;
    }

    .woocommerce div.product form.cart .reset_variations {
        display: none !important;
    }

    .woocommerce div.product form.cart .variations_button {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
        align-items: stretch;
    }

    .woocommerce div.product form.cart .variations_button .quantity,
    .woocommerce div.product form.cart .variations_button .single_add_to_cart_button {
        width: 100%;
        height: 52px;
        min-height: 52px;
        margin: 0;
        float: none;
    }

    .woocommerce div.product form.cart .variations_button .quantity .qty {
        width: 100%;
        height: 52px;
        min-height: 52px;
        padding: 0 10px;
        border-radius: 999px;
        background: var(--fz-soft);
    }

    .woocommerce div.product form.cart .variations_button .single_add_to_cart_button {
        padding: 0 18px;
    }

    .woocommerce div.product .product_meta {
        margin-top: 0;
        padding-top: 18px;
        border-top: 1px solid var(--fz-line);
        display: grid;
        gap: 4px;
        font-size: 15px;
        line-height: 1.45;
    }

    .woocommerce div.product .product_meta > span {
        display: block;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        margin: 24px 0 0;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding-top: 20px;
    }

    .woocommerce div.product .woocommerce-tabs .panel h2 {
        font-size: 30px;
    }

    .privacy-section h2 {
        font-size: 28px;
    }

    .cookie-banner {
        right: 14px;
        bottom: 14px;
        left: 14px;
        width: calc(100% - 28px);
        max-height: calc(100dvh - 28px);
        padding: 18px;
        overflow: auto;
    }

    .cookie-banner h2 {
        font-size: 24px;
    }

    .cookie-banner__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-band {
        margin-bottom: 58px;
        padding: 26px;
    }
}

/* Buffetkone (DealCater-upotus). Palvelu tuo omat tyylinsa iframen sisalle;
   tassa vain containerin sovitus teeman leveyteen. */
.section--buffet .fz-dealcater {
    width: 100%;
    max-width: var(--fz-max);
    margin: 0 auto;
    min-height: 480px;
}

.section--buffet .fz-dealcater iframe {
    width: 100%;
    border: 0;
}

/* Linkitetyt sisaltokortit. Vain naissa on hover-nosto ja "katso lisaa"
   -vihje - staattiset kortit eivat saa nayttaa klikattavilta. */
.content-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s var(--fz-ease-out), box-shadow 0.25s var(--fz-ease-out);
}

.content-card--link:hover,
.content-card--link:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--fz-shadow);
}

.content-card--link:focus-visible {
    outline: 2px solid var(--fz-teal);
    outline-offset: 3px;
}

.content-card__cue {
    display: inline-block;
    margin-top: 4px;
    color: var(--fz-teal);
    font-weight: 600;
}

.content-card--link:hover .content-card__cue::after,
.content-card--link:focus-visible .content-card__cue::after {
    transform: translateX(3px);
}

.content-card__cue::after {
    content: " \2192";
    display: inline-block;
    transition: transform 0.25s var(--fz-ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .content-card--link,
    .content-card__cue::after {
        transition: none;
    }

    .content-card--link:hover,
    .content-card--link:focus-visible {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Typografia: Bodoni Moda otsikoissa, Karla leipatekstissa.

   Bodoni on korkeakontrastinen didone - sen ohuet viivat katoavat pienessa
   koossa, joten sita kaytetaan vain isoissa otsikoissa. Optinen koko saataa
   viivan paksuutta automaattisesti koon mukaan.
   --------------------------------------------------------------------------- */

h1,
h2,
h3,
.woocommerce div.product .product_title {
    font-family: var(--fz-font-display);
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
    font-synthesis: none;       /* ei selaimen tekemaa valelihavointia */

    /* SOFT pyoristaa kulmia, WONK ottaa kayttoon eloisammat kursiivimaiset
       kirjainmuodot. Nama tekevat Frauncesista lampiman - ilman niita se on
       vain tavallinen antiikva. */
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

/* Nestemainen kokoasteikko: mobiilissa 64px otsikko olisi luettavuudeltaan
   kelvoton, joten koko skaalautuu ruudun mukaan. */
h1 {
    font-size: clamp(2.5rem, 6vw + 0.5rem, 4rem);
}

h2 {
    font-size: clamp(1.875rem, 3.5vw + 0.5rem, 2.875rem);
}

/* Alle taman koon Bodoni ei kesta - naissa kaytetaan leipatekstin kirjasinta. */
h4,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--fz-font-sans);
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* Leipateksti: Karlan oletusrivivali on tiukka pitkille kappaleille. */
body {
    font-feature-settings: 'kern' 1, 'liga' 1;
    /* Ei -webkit-font-smoothing: antialiased - se ohentaa tekstia macOS:lla
       ja heikentaa luettavuutta erityisesti pienissa koissa. */
}

p {
    line-height: 1.65;
}

/* Silmailtava pikkuotsikko - kapiteelit ja vali tekevat siita rakenteen
   merkin, ei koristeen. */
.section-note {
    font-family: var(--fz-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Menukortti.

   Pitopalvelu, ei ravintola: koko menu on yksi kokonaisuus jolla on yksi hinta
   per henkilo. Siksi ei hintasaraketta, ei pisterivia ruoan ja hinnan valilla
   eika luettelomerkkeja - ne kaikki viestisivat a la carte -listasta.
   Malli on juhlapoydan menukortti: nimi, kokonaishinta, kurssit ryhmiteltyina.
   --------------------------------------------------------------------------- */

.menu-card {
    box-shadow: none;                      /* paperi, ei kelluva kortti */
    border: 1px solid var(--fz-line);
    background: var(--fz-paper);
}

.menu-card__header {
    display: block;                        /* pois flex: hinta ei ole rinnalla oleva merkki */
    padding: 40px 40px 28px;
    text-align: center;
}

.menu-card__header h3 {
    font-family: var(--fz-font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* Hinta kuuluu kokonaisuudelle, ei yksittaiselle ruoalle - siksi se on
   luettava rivi eika hintalappu. */
.menu-card__price {
    margin: 14px 0 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--fz-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.menu-card__group,
.menu-card__body {
    padding: 0 40px;
}

/* Kurssin nimi: hiusviiva erottaa osiot ilman laatikoita. */
.menu-card__group h4,
.menu-card__body h3,
.menu-card__body h4 {
    margin: 28px 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--fz-line);
    color: var(--fz-muted);
    font-family: var(--fz-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

.menu-card__group:first-of-type h4,
.menu-card__body > h3:first-child,
.menu-card__body > h4:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* Ei luettelomerkkeja: menukortissa ruoat ovat rivejä, eivät tehtavalista. */
.menu-card ul,
.menu-card__body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-card li,
.menu-card__body li {
    display: block;
    margin: 0;
    padding: 9px 0;
    color: var(--fz-ink-soft);
    line-height: 1.6;
    /* Ruokarivit vasemmalle: keskitetty monirivinen teksti pakottaa silman
       etsimaan rivin alun joka kerta. Otsikot ja hinta pysyvat keskella. */
    text-align: left;
}

.menu-card li + li,
.menu-card__body li + li {
    border-top: 1px solid color-mix(in srgb, var(--fz-line) 45%, transparent);
}

.menu-card__item {
    display: inline;
}

/* Ruokavaliomerkinnat: tieto, ei koriste - pienina kapiteeleina ruoan perassa. */
.menu-card__diets {
    display: inline;
    margin-left: 8px;
    color: var(--fz-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.menu-card__diets span + span::before {
    content: ", ";
}

.menu-card__note {
    margin: 24px 40px 0;
    padding-top: 18px;
    border-top: 1px solid var(--fz-line);
    color: var(--fz-muted);
    font-size: 0.875rem;
    text-align: center;
}

.menu-card__cta {
    display: block;
    margin: 28px 40px 40px;
    text-align: center;
}

@media (max-width: 640px) {
    .menu-card__header {
        padding: 28px 22px 20px;
    }

    .menu-card__group,
    .menu-card__body {
        padding: 0 22px;
    }

    .menu-card__note,
    .menu-card__cta {
        margin-left: 22px;
        margin-right: 22px;
    }
}

/* ---------------------------------------------------------------------------
   Luettavuuskorjaukset.

   Karlan x-korkeus on jarjestelmafonttia pienempi, joten sama pikselikoko
   nayttaa optisesti pienemmalta. Nostetaan perusaskelta ja rivivalia.
   --------------------------------------------------------------------------- */

/* Sama valitsin kuin alkuperaisessa saannossa (body.fz-phase1): pelkka
   body haviaisi spesifisyydessa eika astuisi voimaan. */
body.fz-phase1 {
    font-size: 1.0625rem;      /* 17px - Karlan x-korkeus on jarjestelmafonttia pienempi */
    line-height: 1.65;
}

p,
li {
    text-wrap: pretty;         /* ei yksinaisia sanoja rivin lopussa */
}

/* Leipatekstin mitta: yli 75 merkin rivi vasyttaa silman. */
.hero__lead,
.section__header p,
.content-card p,
.contact-card p {
    max-width: 68ch;
}

/* Kapiteelit tarvitsevat enemman painoa ja valia pysyakseen luettavina. */
.section-note,
.menu-card__price,
.menu-card__group h4,
.menu-card__body h3,
.menu-card__body h4 {
    font-weight: 800;
}

/* Vaimennettu teksti oli kontrastiltaan rajalla harmaalla pohjalla. */
.menu-card__note,
.menu-card__diets {
    color: var(--fz-ink-soft);
}

/* ---------------------------------------------------------------------------
   Vuorottelevat rivit.

   Kolme rinnakkaista korttia on oikea muoto kun lukija valitsee niiden
   valilta. Kuvailevalla sivulla se on vain sama rytmi uudelleen, ja silma
   oppii sen sekunnissa. Naissa kuva ja teksti vuorottelevat puolin ja
   toisin, mika pakottaa lukemaan yhden asian kerrallaan.
   --------------------------------------------------------------------------- */

.content-grid--rows {
    display: block;
    max-width: var(--fz-max);
    margin: 0 auto;
}

.content-grid--rows .content-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    padding: clamp(36px, 5vw, 64px) 0;
    border: 0;
    border-top: 1px solid var(--fz-line);
    background: none;
}

.content-grid--rows .content-card:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Joka toinen rivi kaannetaan: kuva vaihtaa puolta. */
.content-grid--rows .content-card:nth-child(even) .content-card__media {
    order: 2;
}

.content-grid--rows .content-card__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.content-grid--rows .content-card__media img,
.content-grid--rows .content-card__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rivilla on tilaa isommalle otsikolle kuin ahtaassa kortissa. */
.content-grid--rows .content-card h2 {
    margin-bottom: 12px;
    font-size: clamp(1.5rem, 2.5vw, 2.125rem);
}

.content-grid--rows .content-card p {
    max-width: 52ch;
}

.content-grid--rows .content-card__cue {
    margin-top: 16px;
}

/* Hover-nosto ei sovi taysleveaan riviin - se nayttaisi sivun tarahtavan.
   Linkkirivilla korostuu sen sijaan vihje ja kuva. */
.content-grid--rows .content-card--link:hover,
.content-grid--rows .content-card--link:focus-visible {
    transform: none;
    box-shadow: none;
}

.content-grid--rows .content-card--link:hover .content-card__media img,
.content-grid--rows .content-card--link:focus-visible .content-card__media img {
    transform: scale(1.03);
}

.content-grid--rows .content-card__media img {
    transition: transform 0.5s var(--fz-ease-out);
}

@media (max-width: 780px) {
    .content-grid--rows .content-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Mobiilissa kuva aina ensin - vuorottelu ei nay yhdessa sarakkeessa
       ja jattaisi joka toisen rivin tekstin alkamaan kuvan alta. */
    .content-grid--rows .content-card:nth-child(even) .content-card__media {
        order: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-grid--rows .content-card__media img {
        transition: none;
    }

    .content-grid--rows .content-card--link:hover .content-card__media img {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Verkkokaupan nopea mobiililista.

   Desktopin korttiruudukko sailyy ennallaan. Uudet listatyylit aktivoituvat
   vain WooCommerce-arkiston nykyisessa 680 px mobiilibreakpointissa.
   --------------------------------------------------------------------------- */

.shop-category-filter__count,
.shop-category-filter__link-label--mobile,
.shop-mobile-toolbar,
.shop-filter-toggle,
.shop-sort-control,
.product-status-badge,
.product-row-chevron,
.shop-back-link,
.shop-service-strip,
.shop-load-more {
    display: none;
}

.shop-category-filter__links a .shop-category-filter__link-label {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.shop-category-filter__links a .shop-category-filter__link-count {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(96, 125, 139, 0.12);
    text-align: center;
}

.shop-category-filter__links a:hover .shop-category-filter__link-label,
.shop-category-filter__links a:focus .shop-category-filter__link-label,
.shop-category-filter__links a[aria-current="page"] .shop-category-filter__link-label {
    background: transparent;
}

@media (max-width: 680px) {
    .section--woocommerce {
        padding-top: 24px;
        padding-bottom: 58px;
    }

    .section--woocommerce .woocommerce-products-header {
        margin-bottom: 0;
    }

    .section--woocommerce .woocommerce-products-header__title {
        margin-bottom: 0;
        font-size: clamp(44px, 12.8vw, 52px);
        line-height: 0.95;
    }

    .shop-category-filter {
        margin: 12px 0 22px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .shop-category-filter__heading {
        display: none;
    }

    .shop-category-filter__count {
        display: block;
        margin: 0 0 16px;
        color: var(--fz-muted);
        font-size: 17px;
        line-height: 1.3;
    }

    .shop-category-filter__links {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        margin: 0;
        padding: 0 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .shop-category-filter__links::-webkit-scrollbar {
        display: none;
    }

    .shop-category-filter__links a {
        min-height: 44px;
        flex: 0 0 auto;
        padding: 10px 14px;
        border-color: transparent;
        background: transparent;
        color: var(--fz-ink);
        font-size: 15px;
        scroll-snap-align: start;
        transform: none;
    }

    .shop-category-filter__links a:hover,
    .shop-category-filter__links a:focus,
    .shop-category-filter__links a[aria-current="page"] {
        border-color: var(--fz-teal);
        background: var(--fz-teal);
        color: #fff;
        transform: none;
    }

    .shop-category-filter__link-label--desktop,
    .shop-category-filter__link-count {
        display: none;
    }

    .shop-category-filter__link-label--mobile {
        display: inline;
    }

    .shop-mobile-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        margin-top: 8px;
    }

    .js .shop-filter-toggle,
    .shop-sort-control {
        position: relative;
        min-height: 54px;
        border: 1px solid rgba(69, 126, 149, 0.42);
        border-radius: 3px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #fff;
        color: var(--fz-ink);
        font: inherit;
        font-size: 16px;
        font-weight: 700;
    }

    .js .shop-filter-toggle {
        display: flex;
        cursor: pointer;
    }

    .shop-filter-toggle:hover,
    .shop-filter-toggle:focus-visible,
    .shop-filter-toggle[aria-expanded="true"],
    .shop-sort-control:focus-within {
        border-color: var(--fz-teal);
        background: var(--fz-soft);
        outline: 0;
    }

    .shop-filter-toggle .dashicons,
    .shop-sort-control > .dashicons {
        width: 22px;
        height: 22px;
        color: var(--fz-ink);
        font-size: 22px;
        line-height: 1;
    }

    .shop-sort-control {
        display: flex;
        padding: 0 14px;
    }

    .shop-sort-control > .dashicons-arrow-down-alt2 {
        width: 18px;
        height: 18px;
        margin-left: auto;
        font-size: 18px;
    }

    .section--woocommerce .woocommerce-result-count,
    .section--woocommerce .woocommerce-ordering {
        display: none;
    }

    .shop-sort-control .woocommerce-ordering {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: block;
        margin: 0;
        opacity: 0;
    }

    .shop-sort-control .woocommerce-ordering select {
        width: 100%;
        height: 100%;
        min-width: 0;
        cursor: pointer;
    }

    .shop-category-filter__mobile[hidden] {
        display: none !important;
    }

    .shop-category-filter__mobile:not([hidden]) {
        display: grid;
        gap: 10px;
        margin-top: 12px;
        padding: 14px;
        border: 1px solid var(--fz-line);
        border-radius: 12px;
        background: var(--fz-soft);
        animation: shop-filter-reveal 180ms var(--fz-ease-out) both;
    }

    .shop-category-filter__mobile label {
        font-size: 14px;
    }

    .shop-category-filter__controls select {
        box-shadow: none;
    }

    body.post-type-archive-product.woocommerce ul.products,
    body.tax-product_cat.woocommerce ul.products {
        display: block !important;
        margin: 14px 0 0 !important;
    }

    body.post-type-archive-product.woocommerce ul.products li.product,
    body.tax-product_cat.woocommerce ul.products li.product {
        --fz-shop-thumb: clamp(124px, 35vw, 136px);
        position: relative;
        min-height: 150px;
        padding: 14px 0 !important;
        overflow: visible;
        border: 0;
        border-bottom: 1px solid var(--fz-line);
        border-radius: 0;
        display: block;
        background: #fff;
        box-shadow: none;
        transform: none;
    }

    body.post-type-archive-product.woocommerce ul.products li.product[hidden],
    body.tax-product_cat.woocommerce ul.products li.product[hidden] {
        display: none !important;
    }

    body.post-type-archive-product.woocommerce ul.products li.product:first-child,
    body.tax-product_cat.woocommerce ul.products li.product:first-child {
        padding-top: 0 !important;
    }

    body.post-type-archive-product.woocommerce ul.products li.product:hover,
    body.post-type-archive-product.woocommerce ul.products li.product:focus-within,
    body.tax-product_cat.woocommerce ul.products li.product:hover,
    body.tax-product_cat.woocommerce ul.products li.product:focus-within {
        border-color: var(--fz-line);
        box-shadow: none;
        transform: none;
    }

    body.post-type-archive-product.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
    body.tax-product_cat.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        position: relative;
        box-sizing: border-box;
        min-height: 136px;
        padding: 0 30px 0 0;
        display: grid;
        grid-template-columns: var(--fz-shop-thumb) minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        column-gap: 15px;
        color: inherit;
        text-decoration: none;
    }

    body.post-type-archive-product.woocommerce ul.products li.product a img,
    body.tax-product_cat.woocommerce ul.products li.product a img {
        grid-column: 1;
        grid-row: 1 / 4;
        width: var(--fz-shop-thumb) !important;
        height: var(--fz-shop-thumb) !important;
        max-height: none;
        margin: 0 !important;
        border-radius: 12px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        transform: none;
    }

    body.post-type-archive-product.woocommerce ul.products li.product:hover a img,
    body.post-type-archive-product.woocommerce ul.products li.product:focus-within a img,
    body.tax-product_cat.woocommerce ul.products li.product:hover a img,
    body.tax-product_cat.woocommerce ul.products li.product:focus-within a img {
        filter: none;
        transform: none;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .product-category-badge,
    body.tax-product_cat.woocommerce ul.products li.product .product-category-badge {
        top: 10px;
        left: 10px;
        max-width: calc(var(--fz-shop-thumb) - 20px);
        padding: 6px 9px;
        border: 0;
        box-shadow: none;
        font-size: 11px;
        backdrop-filter: none;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .woocommerce-loop-product__title,
    body.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        overflow: hidden;
        color: var(--fz-ink);
        font-family: var(--fz-font-display) !important;
        font-size: clamp(17px, 5.5vw, 22px) !important;
        line-height: 1.08;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .price,
    body.tax-product_cat.woocommerce ul.products li.product .price {
        grid-column: 2;
        grid-row: 2;
        margin: 9px 0 0 !important;
        padding: 0;
        align-self: start;
        font-size: 17px;
        line-height: 1.25;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .product-row-chevron,
    body.tax-product_cat.woocommerce ul.products li.product .product-row-chevron {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 2;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--fz-ink);
        font-size: 24px;
        line-height: 1;
        transform: translateY(-50%);
    }

    body.post-type-archive-product.woocommerce ul.products li.product .product-status-badge,
    body.tax-product_cat.woocommerce ul.products li.product .product-status-badge {
        grid-column: 2;
        grid-row: 1;
        width: fit-content;
        min-height: 28px;
        padding: 5px 9px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        align-self: start;
        background: var(--fz-ink-soft);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
    }

    body.post-type-archive-product.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title,
    body.tax-product_cat.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title {
        grid-row: 2;
        margin-top: 7px !important;
        color: var(--fz-muted);
    }

    body.post-type-archive-product.woocommerce ul.products li.product.outofstock .price,
    body.tax-product_cat.woocommerce ul.products li.product.outofstock .price {
        grid-row: 3;
        color: var(--fz-muted) !important;
    }

    body.post-type-archive-product.woocommerce ul.products li.product.outofstock a img,
    body.tax-product_cat.woocommerce ul.products li.product.outofstock a img {
        filter: grayscale(1);
        opacity: 0.52;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .button,
    body.tax-product_cat.woocommerce ul.products li.product .button {
        position: absolute;
        z-index: 3;
        right: 30px;
        bottom: 14px;
        left: calc(var(--fz-shop-thumb) + 15px);
        width: fit-content;
        max-width: calc(100% - var(--fz-shop-thumb) - 45px);
        min-height: 38px;
        margin: 0 !important;
        padding: 8px 14px !important;
        justify-content: center;
        font-size: 14px;
        white-space: nowrap;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .button::after,
    body.tax-product_cat.woocommerce ul.products li.product .button::after {
        display: none;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .product_type_variable.button,
    body.post-type-archive-product.woocommerce ul.products li.product.outofstock .button,
    body.tax-product_cat.woocommerce ul.products li.product .product_type_variable.button,
    body.tax-product_cat.woocommerce ul.products li.product.outofstock .button {
        min-height: 36px;
        padding: 0 !important;
        background: transparent !important;
        color: var(--fz-muted) !important;
        font-weight: 500;
        justify-content: flex-start;
    }

    body.post-type-archive-product.woocommerce ul.products li.product.outofstock .button,
    body.tax-product_cat.woocommerce ul.products li.product.outofstock .button {
        color: var(--fz-ink-soft) !important;
        font-weight: 700;
    }

    body.post-type-archive-product.woocommerce-pagination,
    body.tax-product_cat.woocommerce-pagination {
        margin-top: 20px;
    }

    body.post-type-archive-product.woocommerce-pagination ul.page-numbers,
    body.tax-product_cat.woocommerce-pagination ul.page-numbers {
        display: flex;
        justify-content: center;
        gap: 6px;
        border: 0;
    }

    body.post-type-archive-product.woocommerce-pagination .page-numbers li,
    body.tax-product_cat.woocommerce-pagination .page-numbers li {
        border: 0;
    }

    body.post-type-archive-product.woocommerce-pagination a.page-numbers,
    body.post-type-archive-product.woocommerce-pagination span.page-numbers,
    body.tax-product_cat.woocommerce-pagination a.page-numbers,
    body.tax-product_cat.woocommerce-pagination span.page-numbers {
        min-width: 44px;
        min-height: 44px;
        border: 1px solid var(--fz-line);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .shop-load-more {
        width: 100%;
        min-height: 50px;
        padding: 11px 18px;
        border: 1px solid rgba(69, 126, 149, 0.5);
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        background: #fff;
        color: var(--fz-teal-dark);
        font: inherit;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
    }

    .shop-load-more:hover,
    .shop-load-more:focus-visible {
        border-color: var(--fz-teal);
        background: var(--fz-soft);
        outline: 3px solid rgba(69, 126, 149, 0.14);
        outline-offset: 2px;
    }

    .shop-load-more:disabled {
        cursor: default;
        opacity: 0.72;
    }

    .shop-load-more.is-loading .dashicons {
        animation: shop-load-more-pulse 720ms ease-in-out infinite alternate;
    }

    .shop-service-strip {
        margin: 26px -14px -16px;
        padding: 16px 14px 0;
        border-top: 1px solid var(--fz-line);
        display: flex;
        justify-content: space-between;
        gap: 10px;
        list-style: none;
    }

    .shop-service-strip li {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--fz-muted);
        font-size: 10px;
        line-height: 1.2;
    }

    .shop-service-strip .dashicons {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        color: var(--fz-teal-dark);
        font-size: 18px;
    }

    .shop-back-link {
        min-height: 44px;
        margin-bottom: 16px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--fz-teal-dark);
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
    }

    .shop-back-link:hover,
    .shop-back-link:focus-visible {
        color: var(--fz-ink);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (max-width: 340px) {
    body.post-type-archive-product.woocommerce ul.products li.product,
    body.tax-product_cat.woocommerce ul.products li.product {
        --fz-shop-thumb: 110px;
    }

    body.post-type-archive-product.woocommerce ul.products li.product .woocommerce-loop-product__title,
    body.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 17px !important;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@keyframes shop-filter-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shop-load-more-pulse {
    from {
        opacity: 0.45;
        transform: translateY(-1px);
    }
    to {
        opacity: 1;
        transform: translateY(1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-category-filter__mobile:not([hidden]),
    .shop-load-more.is-loading .dashicons {
        animation: none;
    }
}