@font-face {
    font-family: Manrope;
    src: url('../fonts/Manrope.woff') format('woff'), url('../fonts/Manrope.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

/* Foundations and project-owned Gutenberg normalization. */
.zrno-site {
    --zrno-paper: var(--wp--preset--color--paper);
    --zrno-ink: #f5eee5;
    --zrno-surface: #38261d;
    --zrno-muted: #d0baaa;
    --zrno-accent: #ddb18d;
    --zrno-espresso: var(--wp--preset--color--espresso);
    --zrno-roast: var(--wp--preset--color--roast);
    --zrno-line: rgb(255 247 236 / 24%);
    --zrno-gutter: var(--wp--custom--gutter);
    margin: 0;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}
.zrno-site * {
    box-sizing: border-box;
}
.zrno-site .wp-site-blocks {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.zrno-site .wp-site-blocks > main {
    flex: 1;
}
.zrno-site .wp-site-blocks > * {
    margin-block: 0;
}
.zrno-main,
.zrno-main > .wp-block-post-content {
    margin: 0;
    padding: 0;
    position: relative;
    isolation: isolate;
}
.zrno-main > .wp-block-post-content {
    isolation: auto;
}
.zrno-site .zrno-shell {
    width: min(calc(100% - var(--zrno-gutter) * 2), var(--wp--custom--rail--shell));
    max-width: none;
    margin-inline: auto;
}
.zrno-site .zrno-shell > *,
.zrno-site .zrno-grid > *,
.zrno-site .zrno-split > * {
    min-width: 0;
}
.zrno-site :where(.zrno-section, .zrno-hero, .zrno-opening, .zrno-card, .zrno-copy, .zrno-grid, .zrno-split) > * {
    margin-block-start: 0;
}
.zrno-site :where(h1,h2,h3,p,figure,ul,ol) {
    margin-block-start: 0;
}
.zrno-site h1,
.zrno-site h2,
.zrno-site h3 {
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.12;
    text-wrap: balance;
}
.zrno-site h1 {
    font-size: clamp(2.5rem, 4.2vw, 4.5rem);
    margin-bottom: 24px;
}
.zrno-site h2 {
    font-size: clamp(1.85rem, 2.8vw, 2.75rem);
    margin-bottom: 26px;
}
.zrno-site h3 {
    font-size: 1.5rem;
    margin-bottom: 14px;
}
.zrno-site p {
    margin-bottom: 20px;
}
.zrno-site img {
    display: block;
    max-width: 100%;
    height: auto;
}
.zrno-site a {
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}
.zrno-site button,
.zrno-site input,
.zrno-site select {
    font: inherit;
}
.zrno-site button,
.zrno-site select {
    cursor: pointer;
}
.zrno-site :focus-visible {
    outline: 3px solid #b77b50;
    outline-offset: 5px;
}
.zrno-site [hidden] {
    display: none !important;
}
.zrno-site button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.zrno-skip {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 14px 22px;
    background: var(--zrno-paper);
    color: #291b14;
    transform: translateY(-160%);
}
.zrno-skip:focus {
    transform: none;
}

/* Header, shared navigation and readable, permanent demo disclosure. */
.zrno-header {
    position: relative;
    z-index: 20;
    background: var(--zrno-espresso);
    color: var(--wp--preset--color--white);
}
.zrno-site .zrno-notice {
    margin: 0;
    padding: 9px 20px;
    color: #e3c7b5;
    border-bottom: 1px solid rgb(255 253 249 / 12%);
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.01em;
    line-height: 1.5;
}
.zrno-header-row {
    display: flex;
    align-items: center;
    gap: 36px;
    min-height: 96px;
}
.zrno-brand {
    margin: 0;
    width: 150px;
    flex: 0 0 150px;
}
.zrno-brand img {
    width: 150px;
    height: auto;
}
.zrno-site nav.zrno-navigation {
    margin-left: auto;
}
.zrno-navigation .wp-block-navigation__container {
    gap: 27px;
    font-size: 13px;
    font-weight: 500;
}
.zrno-navigation a {
    padding-block: 12px;
    text-decoration: none;
    position: relative;
}
.zrno-navigation a::after {
    content: '';
    height: 1px;
    background: #d9af91;
    position: absolute;
    inset: auto 0 6px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms;
}
.zrno-navigation a:hover::after,
.zrno-navigation a[aria-current='page']::after {
    transform: scaleX(1);
}
.zrno-cart-link {
    white-space: nowrap;
    font-size: 13px;
    border: 1px solid rgb(255 253 249 / 35%);
    border-radius: 999px;
    min-height: 44px;
    padding: 10px 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.zrno-cart-link::before {
    content: '';
    width: 17px;
    height: 19px;
    background: currentColor;
    mask: url('../icons/shopping-bag.svg') center/contain no-repeat;
}
.zrno-menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
}
.zrno-menu-toggle img {
    width: 24px;
    filter: invert(1);
}

/* Buttons: one component for native blocks and interactive controls. */
.zrno-site .wp-block-button__link,
.zrno-button {
    background: #f0e4d5;
    color: #291b14;
    border: 1px solid transparent;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 15px 25px;
    min-height: 52px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.zrno-site .wp-block-button__link::after,
.zrno-button-arrow::after {
    content: '';
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    background: currentColor;
    mask: url('../icons/arrow-up-right.svg') center/contain no-repeat;
    transition: transform 180ms;
}
.zrno-button-secondary {
    color: var(--zrno-ink);
    border-color: var(--zrno-line);
    background: transparent;
}
.zrno-link-button {
    background: none;
    border: 0;
    padding: 10px 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 13px;
}

/* Home: centered content rails, with physical scenes in their own section gaps. */
.zrno-dark {
    background: var(--zrno-espresso);
    color: var(--zrno-paper);
}
.zrno-hero {
    padding-block: 84px 100px;
    min-height: 740px;
    background: radial-gradient(ellipse at 85% 30%, #543426 0, #2b1b14 38%, var(--zrno-espresso) 70%);
}
.zrno-hero h1 {
    font-size: clamp(4rem, 6.3vw, 6.6rem);
    line-height: 1.035;
    letter-spacing: -0.065em;
    margin-bottom: 34px;
}
.zrno-hero h1 em {
    font-style: normal;
    color: #c39676;
}
.zrno-hero .zrno-shell {
    position: relative;
    z-index: 2;
}
.zrno-hero .zrno-copy {
    width: min(65%, 660px);
    text-shadow: 0 2px 20px rgb(24 12 7 / 55%);
}
.zrno-hero .zrno-copy > p {
    max-width: 540px;
    font-size: 16px;
    color: #d9c9bc;
    line-height: 1.85;
    margin-bottom: 32px;
}
.zrno-home-lane,
.zrno-section > .zrno-shell,
.zrno-stage > .zrno-shell {
    width: 100%;
    position: relative;
    z-index: 2;
}
.zrno-site .zrno-section > .zrno-shell,
.zrno-site .zrno-stage > .zrno-shell {
    width: min(calc(100% - var(--zrno-gutter) * 2), var(--wp--custom--rail--shell));
}
.zrno-section {
    padding-block: var(--wp--custom--space--section);
}
.zrno-formats {
    border-bottom: 1px solid var(--zrno-line);
}
.zrno-formats h2,
.zrno-home-products .zrno-home-lane > h2 {
    text-align: center;
}
.zrno-format-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 40px;
    margin-top: 44px;
}
.zrno-format {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--zrno-line);
    padding-top: 26px;
}
.zrno-format h3 {
    font-size: 24px;
}
.zrno-format p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--zrno-muted);
}
.zrno-format .wp-block-buttons {
    margin-top: auto;
}
.zrno-format .wp-block-button__link {
    color: var(--zrno-ink);
    background: transparent;
    border-radius: 0;
    padding: 8px 0;
    text-align: left;
    justify-content: flex-start;
    font-size: 12px;
    gap: 10px;
}
.zrno-home-products .zrno-home-lane > p {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    color: var(--zrno-muted);
}
.zrno-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 32px;
    align-items: stretch;
    margin-top: 40px;
}
.zrno-card {
    display: flex;
    flex-direction: column;
}
.zrno-card-media {
    margin: 0 0 24px;
    overflow: hidden;
    background: var(--zrno-surface);
    aspect-ratio: 1 / 1.05;
}
.zrno-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms cubic-bezier(.2,.6,.2,1);
}
.zrno-card:hover .zrno-card-media img {
    transform: scale(1.035);
}
.zrno-card h3 {
    font-size: clamp(21px,2vw,28px);
    margin-bottom: 12px;
}
.zrno-card h3 a {
    text-decoration: none;
}
.zrno-card p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--zrno-muted);
    margin-bottom: 16px;
}
.zrno-card .zrno-format-line {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--zrno-accent);
}
.zrno-card .zrno-price {
    margin-top: auto;
    font-size: 15px;
    color: var(--zrno-ink);
    font-weight: 600;
}
.zrno-card .wp-block-buttons {
    margin-top: 0;
    padding-top: 8px;
}
.zrno-card .wp-block-button__link {
    background: transparent;
    color: var(--zrno-ink);
    border-radius: 0;
    border-top: 1px solid var(--zrno-line);
    padding: 16px 0;
    width: 100%;
    justify-content: space-between;
    font-size: 12px;
    gap: 8px;
}
.zrno-card .wp-block-button {
    width: 100%;
}
.zrno-story {
    background: #35241b;
    border-block: 1px solid var(--zrno-line);
}
.zrno-story .zrno-split {
    align-items: center;
}
.zrno-story .zrno-split > * {
    border: 1px solid var(--zrno-line);
    border-radius: 16px;
    overflow: hidden;
}
.zrno-story .zrno-feature-media {
    aspect-ratio: 1.2;
}
.zrno-story .zrno-copy {
    max-width: 540px;
    padding: clamp(24px,3vw,44px);
    background: #302119;
}
.zrno-story h2 {
    font-size: clamp(32px,3.5vw,52px);
}
.zrno-story p {
    font-size: 15px;
    color: var(--zrno-muted);
}
.zrno-stage {
    padding-top: 68px;
    position: relative;
}
.zrno-grind {
    background: radial-gradient(ellipse at 50% 35%, #513526, #302018 75%);
}
.zrno-pour {
    background: radial-gradient(ellipse at 50% 65%, #4b2e20, var(--zrno-espresso) 68%);
}
.zrno-stage-heading {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
    position: relative;
    z-index: 3;
}
.zrno-stage-heading p {
    color: var(--zrno-muted);
    font-size: 14px;
}
.zrno-stage-heading h2 {
    font-size: clamp(32px,3.8vw,56px);
}
.zrno-dark .zrno-stage-heading p {
    color: #c6af9c;
}
.zrno-scene-track {
    height: auto;
    position: relative;
}
.zrno-scene-frame {
    position: relative;
    top: 0;
    width: 100%;
    height: 550px;
    margin-inline: auto;
}
.zrno-scene-frame canvas,
.zrno-scene-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
}
.zrno-scene-poster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.zrno-scene-frame canvas {
    opacity: 0;
    transition: opacity 250ms;
}
.zrno-scene-ready canvas {
    opacity: 1;
}
.zrno-scene-ready .zrno-scene-poster {
    opacity: 0;
    transition: opacity 300ms;
}
.zrno-closing {
    padding-block: 54px 88px;
    text-align: center;
}
.zrno-closing h2 {
    max-width: 850px;
    margin-inline: auto;
    font-size: clamp(2.25rem,3.7vw,3.65rem);
}
.zrno-closing p {
    max-width: 720px;
    margin-inline: auto;
    color: #d9c9bc;
}
.zrno-closing .wp-block-buttons {
    margin-top: 28px;
    justify-content: center;
}
.zrno-motion {
    position: absolute;
    inset: 0;
    overflow: clip;
    z-index: 1;
    pointer-events: none;
}
.zrno-bean {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    transform-origin: center;
    will-change: transform;
}
.zrno-inner-beans {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: clip;
}
.zrno-inner-beans img {
    position: absolute;
    width: 150px;
    opacity: .16;
}
.zrno-inner-beans img:first-child {
    top: 40px;
    right: 4%;
    transform: rotate(-32deg);
    width: 220px;
}
.zrno-inner-beans img:nth-child(2) {
    top: 580px;
    left: -45px;
    transform: rotate(50deg);
}
.zrno-inner-beans img:nth-child(3) {
    bottom: 70px;
    right: 4%;
    transform: rotate(110deg);
}

/* Inner route owners: browsing, product, concept and compact utilities. */
.zrno-opening {
    padding-block: 64px 42px;
}
.zrno-opening p {
    max-width: 700px;
    color: var(--zrno-muted);
}
.zrno-route-shop .zrno-opening {
    padding-bottom: 28px;
}
.zrno-shop-controls {
    padding-block: 0;
}
.zrno-shop-controls h2 {
    font-size: 24px;
    margin-bottom: 20px;
}
.zrno-shop-products {
    padding-top: 24px;
}
.zrno-shop-products > .zrno-shell > h2 {
    font-size: 30px;
    margin-bottom: 18px;
}
.zrno-breadcrumb {
    font-size: 12px;
    color: var(--zrno-muted);
    margin-bottom: 30px;
}
.zrno-breadcrumb a {
    text-decoration: none;
}
.zrno-breadcrumb span {
    padding-inline: 12px;
    opacity: 0.6;
}
.zrno-prose {
    max-width: var(--wp--custom--rail--prose);
}
.zrno-prose > p:last-child {
    margin-bottom: 0;
}
.zrno-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 68px;
}
.zrno-product-stage {
    padding-block: 32px 80px;
}
.zrno-feature-media {
    margin: 0;
    overflow: hidden;
    background: var(--zrno-surface);
    aspect-ratio: 1 / 1.08;
}
.zrno-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zrno-product-copy {
    padding-top: 18px;
}
.zrno-product-copy h1 {
    font-size: clamp(2.7rem,4vw,4rem);
}
.zrno-product-copy .zrno-format-line {
    font-size: 13px;
    color: var(--zrno-muted);
}
.zrno-product-copy .zrno-price {
    font-size: 22px;
    margin-bottom: 26px;
}
.zrno-disclaimer {
    color: var(--zrno-muted);
    font-size: 12px;
    border-left: 2px solid #ba967b;
    padding-left: 16px;
}
.zrno-site .zrno-product-copy .zrno-feature-title {
    font-size: clamp(30px,3vw,42px);
    margin-top: 0;
    margin-bottom: 22px;
}
.zrno-feature-title a {
    text-decoration: none;
}
.zrno-product-copy h2 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 16px;
}
.zrno-details {
    border-top: 1px solid var(--zrno-line);
}
.zrno-details .zrno-copy {
    max-width: 760px;
}
.zrno-details table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 32px;
    font-size: 14px;
}
.zrno-details td,
.zrno-details th {
    text-align: left;
    padding: 15px 12px;
    border: 0;
    border-bottom: 1px solid var(--zrno-line);
}
.zrno-details th {
    color: var(--zrno-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.zrno-faq .wp-block-details {
    border-bottom: 1px solid var(--zrno-line);
    padding-block: 23px;
}
.zrno-faq .wp-block-details summary {
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding-right: 32px;
}
.zrno-faq .wp-block-details p {
    color: var(--zrno-muted);
    margin-top: 18px;
    max-width: 680px;
}
.zrno-faq .wp-block-buttons {
    margin-top: 32px;
}
.zrno-about-opening {
    padding-block: 80px;
}
.zrno-about-opening .zrno-copy {
    padding-top: 0;
}
.zrno-about-opening .zrno-split {
    align-items: center;
}
.zrno-about-opening .zrno-feature-media {
    aspect-ratio: 1.1;
    border-radius: 45% 45% 0 0;
}
.zrno-contact-layout {
    padding-block: 65px 90px;
}
.zrno-panel {
    background: var(--zrno-surface);
    padding: 36px;
    border: 1px solid var(--zrno-line);
}
.zrno-panel h2 {
    font-size: 27px;
}
.zrno-panel p {
    font-size: 14px;
}
.zrno-utility {
    min-height: 480px;
    padding-bottom: 90px;
}
.zrno-utility .zrno-opening {
    padding-bottom: 24px;
}
.zrno-empty {
    background: var(--zrno-surface);
    padding: 46px;
    max-width: 850px;
}
.zrno-empty h2 {
    font-size: 30px;
}
.zrno-empty .zrno-button {
    margin-top: 8px;
}

/* Catalog, quantities and strictly local demo interactions. */
.zrno-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 24px;
    padding-block: 12px 24px;
    border-bottom: 1px solid var(--zrno-line);
}
.zrno-field-label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 10px;
}
.zrno-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zrno-filter-options button {
    border: 1px solid var(--zrno-line);
    color: var(--zrno-ink);
    background: transparent;
    border-radius: 100px;
    padding: 11px 17px;
    min-height: 44px;
    font-size: 12px;
}
.zrno-filter-options button[aria-pressed='true'] {
    background: #d7ad8c;
    color: #291b14;
    border-color: #d7ad8c;
}
.zrno-sort-wrap {
    margin-left: auto;
}
.zrno-site select {
    appearance: none;
    border: 1px solid var(--zrno-line);
    border-radius: 0;
    padding: 12px 42px 12px 14px;
    min-height: 46px;
    max-width: 100%;
    color: var(--zrno-ink);
    background: #38261d url('../icons/chevron-down.svg') right 13px center/16px no-repeat;
    font-size: 13px;
}
.zrno-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--zrno-muted);
    padding-block: 14px;
}
.zrno-quantity-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.zrno-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--zrno-line);
    height: 52px;
    background: var(--zrno-surface);
}
.zrno-quantity button {
    border: 0;
    background: transparent;
    width: 43px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
}
.zrno-quantity button img {
    width: 16px;
    height: 16px;
    filter: invert(1);
}
.zrno-quantity input {
    border: 0;
    border-radius: 0;
    text-align: center;
    width: 43px;
    height: 48px;
    background: transparent;
    color: var(--zrno-ink);
    appearance: textfield;
    padding: 0;
}
.zrno-quantity input::-webkit-inner-spin-button,
.zrno-quantity input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
.zrno-help {
    font-size: 12px;
    line-height: 1.7;
    color: var(--zrno-muted);
    margin: 14px 0 0;
}
.zrno-status {
    font-size: 13px;
    color: var(--zrno-muted);
    line-height: 1.65;
}
.zrno-status:not(:empty) {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--zrno-surface);
    border-left: 2px solid #95704b;
}
.zrno-status[data-error='true'] {
    color: #ffcab6;
    background: #542c22;
}
.zrno-success-link {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
}
.zrno-contact-form select {
    width: 100%;
}
.zrno-message-example {
    background: #2b1d17;
    border: 1px solid var(--zrno-line);
    padding: 20px;
    min-height: 100px;
    font-size: 14px;
}
.zrno-contact-form .zrno-field {
    margin-bottom: 22px;
}
.zrno-contact-form .zrno-help {
    margin-top: 8px;
}
.zrno-cart-layout {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(300px,1fr);
    gap: 48px;
}
.zrno-cart-items h2,
.zrno-summary h2 {
    font-size: 27px;
}
.zrno-cart-item {
    display: grid;
    grid-template-columns: 88px minmax(0,1fr) auto;
    gap: 22px;
    padding-block: 24px;
    border-top: 1px solid var(--zrno-line);
}
.zrno-cart-thumb {
    width: 88px;
    height: 100px;
    object-fit: cover;
    background: var(--zrno-surface);
}
.zrno-cart-item h3 {
    font-size: 20px;
    margin-bottom: 8px;
}
.zrno-cart-item h3 a {
    text-decoration: none;
}
.zrno-cart-item p {
    font-size: 12px;
    color: var(--zrno-muted);
    margin-bottom: 12px;
}
.zrno-cart-item .zrno-quantity {
    height: 44px;
}
.zrno-cart-item .zrno-quantity input,
.zrno-cart-item .zrno-quantity button {
    height: 40px;
    width: 38px;
}
.zrno-line-total {
    text-align: right;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}
.zrno-line-total .zrno-link-button {
    display: block;
    margin-left: auto;
    margin-top: 20px;
    font-weight: 400;
}
.zrno-summary {
    padding: 30px;
    background: var(--zrno-surface);
    align-self: start;
}
.zrno-summary .zrno-totals p {
    font-size: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--zrno-line);
}
.zrno-summary .zrno-totals p:last-of-type {
    font-size: 20px;
    font-weight: 600;
    border: 0;
}
.zrno-summary .zrno-button {
    width: 100%;
    margin-top: 22px;
}
.zrno-checkout-lines {
    list-style: none;
    padding: 0;
    margin-bottom: 28px;
}
.zrno-checkout-lines li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--zrno-line);
    padding-block: 14px;
    font-size: 13px;
}
.zrno-sample-data dl {
    margin: 0 0 24px;
}
.zrno-sample-data dt {
    font-size: 12px;
    color: var(--zrno-muted);
    margin-top: 18px;
}
.zrno-sample-data dd {
    margin: 0;
    border-bottom: 1px solid var(--zrno-line);
    padding-block: 6px 16px;
    font-size: 15px;
}
.zrno-success {
    max-width: 830px;
    background: var(--zrno-surface);
    padding: 46px;
}
.zrno-success::before {
    content: '';
    display: block;
    height: 34px;
    width: 34px;
    margin-bottom: 22px;
    background: var(--zrno-roast);
    mask: url('../icons/check.svg') center/contain no-repeat;
}

/* Footer intentionally shares the shell's functional edges. */
.zrno-footer {
    background: var(--zrno-espresso);
    color: var(--zrno-paper);
    padding-block: 60px 35px;
    border-top: 1px solid rgb(255 253 249 / 15%);
}
.zrno-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 60px;
}
.zrno-footer .zrno-brand {
    width: 210px;
    margin-bottom: 23px;
}
.zrno-footer .zrno-brand img {
    width: 210px;
}
.zrno-footer p {
    font-size: 12px;
    color: #bda998;
    max-width: 250px;
}
.zrno-footer h3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 22px;
}
.zrno-footer .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}
.zrno-footer a {
    text-decoration: none;
}
.zrno-footer a:hover {
    text-decoration: underline;
}

/* Responsive transformations keep motion visible without compromising reading. */
@media (min-width: 1600px) {
    .zrno-hero h1 {
        font-size: 98px;
    }
}
@media (max-width: 1100px) {
    .zrno-header-row {
        gap: 20px;
        min-height: 84px;
    }
    .zrno-brand {
        width: 125px;
        flex-basis: 125px;
    }
    .zrno-navigation .wp-block-navigation__container {
        gap: 16px;
        font-size: 11px;
    }
    .zrno-hero {
        min-height: 680px;
    }
    .zrno-hero h1 {
        font-size: 68px;
    }
    .zrno-format-grid {
        gap: 24px;
    }
    .zrno-grid {
        gap: 22px;
    }
    .zrno-hero .zrno-copy {
        width: 67%;
    }
    .zrno-split {
        gap: 40px;
    }
    .zrno-cart-layout {
        gap: 28px;
    }
}
@media (max-width: 900px) {
    .zrno-menu-toggle {
        display: grid;
        place-items: center;
    }
    .zrno-header-row > .zrno-cart-link {
        margin-left: auto;
    }
    .zrno-site nav.zrno-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--zrno-espresso);
        padding: 20px var(--zrno-gutter) 32px;
        border-top: 1px solid rgb(255 253 249 / 15%);
        border-bottom: 1px solid rgb(255 253 249 / 25%);
        box-shadow: 0 22px 40px rgb(0 0 0 / 18%);
    }
    .zrno-site .zrno-header[data-menu='open'] nav.zrno-navigation {
        display: block;
    }
    .zrno-navigation .wp-block-navigation__container {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        font-size: 20px;
    }
    .zrno-navigation a {
        display: block;
        padding: 16px 0;
    }
    .zrno-cart-layout {
        grid-template-columns: 1fr;
    }
    .zrno-summary {
        max-width: 680px;
    }
    .zrno-sort-wrap {
        margin-left: 0;
    }
}
@media (max-width: 760px) {
    .zrno-site {
        --zrno-gutter: 20px;
        --wp--custom--space--section: 48px;
    }
    .zrno-notice {
        font-size: 10px;
        padding-block: 7px;
        line-height: 1.45;
    }
    .zrno-header-row {
        gap: 13px;
        min-height: 76px;
    }
    .zrno-brand,
    .zrno-brand img {
        width: 112px;
        flex-basis: 112px;
    }
    .zrno-cart-link {
        padding: 9px 12px;
        font-size: 11px;
        gap: 7px;
    }
    .zrno-menu-toggle {
        padding: 8px;
    }
    .zrno-site h1 {
        font-size: 41px;
        margin-bottom: 22px;
    }
    .zrno-site h2 {
        font-size: 30px;
    }
    .zrno-site h3 {
        font-size: 22px;
    }
    .zrno-hero {
        padding-block: 44px 340px;
        min-height: 790px;
        background: radial-gradient(ellipse at 80% 85%,#4a2b1e,var(--zrno-espresso) 65%);
    }
    .zrno-hero h1 {
        font-size: clamp(46px,10.5vw,68px);
        letter-spacing: -0.06em;
        line-height: 1.04;
        margin-bottom: 26px;
        max-width: 600px;
    }
    .zrno-hero .zrno-copy > p {
        font-size: 14px;
        line-height: 1.8;
        max-width: 450px;
        margin-bottom: 26px;
    }
    .zrno-home-lane {
        width: 100%;
    }
    .zrno-format-grid {
        margin-top: 32px;
        gap: 20px;
    }
    .zrno-format {
        gap: 0;
        padding-top: 20px;
    }

    .zrno-format p {
        max-width: 440px;
        margin-bottom: 10px;
    }
    .zrno-home-products .zrno-grid,
    .zrno-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .zrno-home-products .zrno-card,
    .zrno-card {
        display: grid;
        grid-template-columns: 130px minmax(0,1fr);
        gap: 0 18px;
        padding: 0 0 24px;
        border-bottom: 1px solid var(--zrno-line);
    }
    .zrno-card-media,
    .zrno-home-products .zrno-card-media {
        grid-row: 1 / 5;
        aspect-ratio: 1;
        height: 130px;
        margin: 0;
    }
    .zrno-card-media img,
    .zrno-feature-media img {
        object-fit: contain;
    }
    .zrno-card h3 {
        font-size: 21px;
        margin-bottom: 8px;
    }
    .zrno-card p {
        font-size: 12px;
        line-height: 1.65;
        margin-bottom: 10px;
    }
    .zrno-card .zrno-format-line {
        font-size: 9px;
    }
    .zrno-card .zrno-price {
        font-size: 13px;
    }
    .zrno-card .wp-block-buttons {
        grid-column: 1 / -1;
        padding-top: 12px;
    }
    .zrno-card .wp-block-button__link {
        font-size: 12px;
        padding-block: 10px;
    }
    .zrno-hero .zrno-copy {
        width: 100%;
    }
    .zrno-stage {
        padding-top: 48px;
    }
    .zrno-stage-heading h2 {
        font-size: 34px;
    }
    .zrno-scene-frame {
        height: 470px;
    }
    .zrno-story .zrno-feature-media {
        aspect-ratio: 1.25;
    }
    .zrno-story h2 {
        font-size: 34px;
    }
    .zrno-closing {
        padding-block: 45px 65px;
    }
    .zrno-closing h2 {
        font-size: 36px;
    }
    .zrno-closing p {
        font-size: 14px;
    }
    .zrno-opening {
        padding-block: 40px 25px;
    }
    .zrno-opening p {
        font-size: 14px;
    }
    .zrno-breadcrumb {
        font-size: 11px;
        margin-bottom: 23px;
    }
    .zrno-split {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .zrno-product-stage {
        padding-block: 25px 45px;
    }
    .zrno-feature-media {
        aspect-ratio: 1.15;
        max-height: 400px;
    }
    .zrno-product-copy {
        padding-top: 0;
    }
    .zrno-product-copy h1 {
        font-size: 39px;
    }
    .zrno-product-copy > p {
        font-size: 14px;
    }
    .zrno-product-copy .zrno-price {
        font-size: 20px;
    }
    .zrno-product-copy .zrno-disclaimer {
        font-size: 12px;
    }
    .zrno-details p,
    .zrno-prose p {
        font-size: 14px;
    }
    .zrno-faq .wp-block-details summary {
        font-size: 17px;
    }
    .zrno-panel {
        padding: 24px 20px;
    }
    .zrno-contact-layout {
        padding-block: 40px 55px;
    }
    .zrno-contact-layout h1 {
        font-size: 39px;
    }
    .zrno-contact-layout p {
        font-size: 14px;
    }
    .zrno-about-opening {
        padding-block: 40px 45px;
    }
    .zrno-about-opening .zrno-copy {
        padding: 0;
    }
    .zrno-about-opening .zrno-feature-media {
        max-height: 330px;
    }
    .zrno-filter-bar {
        gap: 22px;
    }
    .zrno-filter-options {
        gap: 6px;
    }
    .zrno-filter-options button {
        padding-inline: 13px;
        font-size: 11px;
    }
    .zrno-count-row {
        font-size: 11px;
    }
    .zrno-empty,
    .zrno-success {
        padding: 30px 24px;
    }
    .zrno-empty h2,
    .zrno-success h2 {
        font-size: 28px;
    }
    .zrno-cart-item {
        grid-template-columns: 64px minmax(0,1fr);
        gap: 15px;
    }
    .zrno-cart-thumb {
        width: 64px;
        height: 84px;
    }
    .zrno-cart-item h3 {
        font-size: 18px;
    }
    .zrno-line-total {
        grid-column: 2;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .zrno-line-total .zrno-link-button {
        margin: 0;
    }
    .zrno-summary {
        padding: 24px;
    }
    .zrno-footer {
        padding-block: 44px;
    }
    .zrno-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 20px;
    }
    .zrno-footer-brand {
        grid-column: 1 / -1;
    }
    .zrno-footer .zrno-brand,
    .zrno-footer .zrno-brand img {
        width: 170px;
    }
    .zrno-inner-beans img:first-child {
        width: 120px;
        right: -40px;
        opacity: 0.1;
    }
}
@media (max-width: 360px) {
    .zrno-site {
        --zrno-gutter: 16px;
    }
    .zrno-header-row {
        gap: 4px;
    }
    .zrno-brand,
    .zrno-brand img {
        width: 95px;
        flex-basis: 95px;
    }
    .zrno-hero h1 {
        font-size: 43px;
    }
    .zrno-card,
    .zrno-home-products .zrno-card {
        grid-template-columns: 105px minmax(0,1fr);
        column-gap: 15px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .zrno-site *,
    .zrno-site *::before,
    .zrno-site *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Native navigation remains usable when script enhancement is unavailable. */
@media (max-width: 900px) {
    html:not(.zrno-js) .zrno-header-row {
        flex-wrap: wrap;
        padding-block: 20px;
    }
    html:not(.zrno-js) .zrno-site nav.zrno-navigation {
        display: block;
        position: static;
        flex-basis: 100%;
        order: 3;
        padding: 10px 0;
        border: 0;
        box-shadow: none;
    }
    html:not(.zrno-js) .zrno-menu-toggle {
        display: none;
    }
}

html:not(.zrno-js) .zrno-scene-track {
    height: auto;
}

/* Connected coffee scenes: one grinder, one filter, one cup. */
.zrno-formats,
.zrno-home-products {
    background: #291c16;
}
.zrno-grind {
    border-top: 0;
    background: linear-gradient(#21140f,transparent 180px),radial-gradient(at 50% 35%,#513526,#302018 75%);
}
.zrno-grind-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(300px,440px) minmax(0,1fr);
    gap: 32px;
    align-items: center;
    margin-top: 50px;
}
.zrno-process-copy {
    max-width: 290px;
    padding-bottom: 80px;
}
.zrno-process-right {
    justify-self: end;
}
.zrno-process-copy h3,
.zrno-extract-copy h3 {
    font-size: clamp(25px,2.2vw,34px);
    max-width: 290px;
}
.zrno-process-copy p {
    font-size: 14px;
    color: var(--zrno-muted);
    line-height: 1.85;
}
.zrno-site .zrno-eyebrow {
    color: var(--zrno-accent);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 20px;
}
.zrno-extract {
    padding-block: 55px 0;
    background: linear-gradient(#35241b, #291c16);
    position: relative;
}
.zrno-extract-layout {
    position: relative;
    z-index: 2;
}
.zrno-extract-copy {
    position: absolute;
    top: 68px;
    left: 0;
    width: 27%;
}
.zrno-extract .zrno-scene-track,
.zrno-extract .zrno-scene-frame {
    height: 340px;
}
.zrno-home-products {
    padding-top: 24px;
    padding-bottom: 110px;
}
.zrno-home-products .zrno-grid {
    gap: clamp(30px,4.2vw,64px);
}
.zrno-home-products .zrno-card-media {
    border: 1px solid rgb(255 247 236 / 15%);
}
.zrno-pour {
    border-top: 1px solid var(--zrno-line);
}
.zrno-pour .zrno-scene-frame {
    height: 540px;
}
.zrno-journey-canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
.zrno-scene-poster,
.zrno-scene-frame canvas {
    filter: drop-shadow(0 22px 25px rgb(5 2 0 / 13%));
}
@media (max-width: 1100px) and (min-width: 761px) {
    .zrno-grind-layout {
        grid-template-columns: minmax(0,1fr) 340px minmax(0,1fr);
        gap: 18px;
    }
    .zrno-process-copy h3 {
        font-size: 25px;
    }
    .zrno-process-copy p {
        font-size: 13px;
    }
}
@media (max-width: 760px) {
    .zrno-grind-layout {
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
        margin-top: 30px;
    }
    .zrno-grind-layout .zrno-scene-track {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .zrno-grind .zrno-scene-frame {
        height: 450px;
    }
    .zrno-process-copy {
        padding-bottom: 38px;
        max-width: none;
    }
    .zrno-process-copy h3 {
        font-size: 23px;
    }
    .zrno-process-copy p {
        font-size: 12px;
        line-height: 1.8;
    }
    .zrno-site .zrno-eyebrow {
        font-size: 8px;
        letter-spacing: .08em;
    }
    .zrno-format-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .zrno-format {
        padding-top: 18px;
    }
    .zrno-extract {
        padding-top: 35px;
    }
    .zrno-extract-copy {
        position: static;
        width: 100%;
        text-align: center;
    }
    .zrno-extract-copy h3 {
        margin-inline: auto;
        font-size: 28px;
        max-width: 330px;
    }
    .zrno-extract .zrno-scene-track,
    .zrno-extract .zrno-scene-frame {
        height: 245px;
    }
    .zrno-pour .zrno-scene-frame {
        height: 410px;
    }
    .zrno-home-products {
        padding-bottom: 65px;
    }
}

/* Foreground reading surfaces and document-stationary fixtures. */
.zrno-formats .zrno-format {
    border: 1px solid var(--zrno-line);
    background: #302119;
    border-radius: 16px;
    padding: clamp(20px,2vw,30px);
}
.zrno-home-products .zrno-card {
    border: 1px solid var(--zrno-line);
    background: #302119;
    border-radius: 16px;
    padding: 18px;
}
.zrno-home-products .zrno-card-media {
    overflow: hidden;
    border-radius: 7px;
}
@media (max-width: 760px) {
    .zrno-home-products .zrno-card {
        padding: 14px;
        grid-template-columns: 105px minmax(0,1fr);
        column-gap: 14px;
    }
    .zrno-home-products .zrno-card-media {
        height: 105px;
    }
}
@media (max-width: 360px) {
    .zrno-home-products .zrno-card {
        grid-template-columns: 85px minmax(0,1fr);
    }
    .zrno-home-products .zrno-card-media {
        height: 85px;
    }
}

/* Section headings remain plain text; product/format cards own visible borders. */
.zrno-flow-obstacle {
    border: 1px solid transparent;
    border-radius: 0;
    padding: 24px 30px;
    background: transparent;
    max-width: 800px;
    margin-inline: auto;
    position: relative;
}
.zrno-flow-obstacle > :last-child {
    margin-bottom: 0;
}
.zrno-format-heading {
    width: fit-content;
}
.zrno-products-heading {
    margin-bottom: 38px;
}
.zrno-pour .zrno-stage-heading {
    position: absolute;
    left: 0;
    top: 70px;
    max-width: 310px;
    width: 27%;
    text-align: left;
    padding: 24px;
}
.zrno-pour .zrno-stage-heading h2 {
    font-size: clamp(30px,2.8vw,42px);
}
@media (max-width: 1100px) and (min-width: 761px) {
    .zrno-pour .zrno-stage-heading {
        max-width: 240px;
        width: 25%;
        padding: 18px;
    }
    .zrno-pour .zrno-stage-heading h2 {
        font-size: 28px;
    }
    .zrno-pour .zrno-stage-heading p {
        font-size: 12px;
    }
}
@media (max-width: 760px) {
    .zrno-flow-obstacle {
        padding: 20px;
        border-radius: 0;
    }
    .zrno-pour .zrno-stage-heading {
        position: relative;
        width: 100%;
        max-width: 440px;
        top: 0;
        text-align: center;
        margin-bottom: 42px;
    }
    .zrno-pour .zrno-stage-heading h2 {
        font-size: 32px;
    }
}

/* Existing breathing space above the stationary cup. */
.zrno-pour .zrno-scene-track {
    padding-top: 160px;
}
@media (max-width: 760px) {
    .zrno-pour .zrno-scene-track {
        padding-top: 110px;
    }
}
html:not(.zrno-js) .zrno-pour .zrno-scene-track {
    padding-top: 0;
}
@media (prefers-reduced-motion: reduce) {
    .zrno-pour .zrno-scene-track {
        padding-top: 0;
    }
}

/* The homepage's native footer completes the cup scene; all links remain real blocks. */
.zrno-route-home .zrno-pour .zrno-stage-heading .wp-block-buttons {
    justify-content: flex-start;
    margin-top: 24px;
}
.zrno-route-home footer.zrno-coffee-footer {
    position: relative;
    z-index: 8;
}
.zrno-route-home .zrno-coffee-footer .zrno-footer {
    background: transparent;
    border-top: 0;
    padding: 0 0 28px;
}
.zrno-route-home .zrno-coffee-footer .zrno-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--zrno-footer-column)) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: var(--zrno-footer-gap, 36px);
    align-items: start;
}
.zrno-route-home .zrno-coffee-footer .zrno-footer-links:nth-child(2) { grid-column: 2; grid-row: 1; }
.zrno-route-home .zrno-coffee-footer .zrno-footer-links:nth-child(3) { grid-column: 3; grid-row: 1; }
.zrno-route-home .zrno-coffee-footer .zrno-footer-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--zrno-line);
}
.zrno-route-home .zrno-coffee-footer .zrno-footer-brand .zrno-brand,
.zrno-route-home .zrno-coffee-footer .zrno-footer-brand p { margin: 0; }
.zrno-route-home .zrno-coffee-footer .zrno-footer-brand p { max-width: none; text-align: right; }

/* Mobile story: native horizontal cards and a compact, centered coffee path. */
@media (max-width:760px), (hover:none) and (pointer:coarse) {
 .zrno-route-home .zrno-shell { max-width:600px; }
 .zrno-route-home .zrno-grind { padding-top:36px; }
 .zrno-route-home .zrno-grind .zrno-stage-heading h2 { font-size:clamp(29px,7.7vw,38px); }
 .zrno-route-home .zrno-grind-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 46px; margin-top:24px; }
 .zrno-route-home .zrno-grind-layout .zrno-scene-track { grid-column:1/-1; grid-row:1; }
 .zrno-route-home .zrno-grind .zrno-scene-frame { height:clamp(330px,100vw,460px); }
 .zrno-route-home .zrno-process-copy { padding-bottom:26px; position:relative; z-index:5; }
 .zrno-route-home .zrno-process-copy h3 { font-size:clamp(19px,5vw,25px); line-height:1.15; }
 .zrno-route-home .zrno-process-copy p { font-size:12px; line-height:1.6; }
 .zrno-route-home .zrno-eyebrow { margin-bottom:14px; }
 .zrno-route-home .zrno-formats { padding-block:36px 28px; }
 .zrno-route-home .zrno-flow-obstacle { padding:12px 0; }
 .zrno-route-home .zrno-format-heading { width:100%; text-align:left; }
 .zrno-route-home .zrno-format-heading h2 { font-size:clamp(22px,6.2vw,28px); line-height:1.14; width:calc(50% - 24px); max-width:260px; margin:0; text-align:left; }
 .zrno-route-home .zrno-format-grid {
   display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc(100% - 24px);
   overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
   scrollbar-width:none; gap:12px; margin-top:22px; padding:2px 1px 8px; scroll-padding-inline:1px;
 }
 .zrno-route-home .zrno-format-grid::-webkit-scrollbar { display:none; }
 .zrno-route-home .zrno-format { scroll-snap-align:start; min-width:0; padding:22px; display:flex; flex-direction:column; }
 .zrno-route-home .zrno-format h3 { font-size:23px; }
 .zrno-route-home .zrno-format p { font-size:13px; line-height:1.75; margin-bottom:18px; }
 .zrno-route-home .zrno-format .wp-block-buttons { margin-top:auto; }
 .zrno-mobile-pagination { display:flex; align-items:center; gap:0; min-height:44px; }
 .zrno-mobile-pagination button { width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--zrno-muted); cursor:pointer; }
 .zrno-mobile-pagination button::after { content:""; display:block; margin:auto; width:6px; height:6px; border-radius:100%; background:currentColor; }
 .zrno-mobile-pagination button[aria-current="true"] { color:#f1e5d4; }
 .zrno-mobile-pagination button[aria-current="true"]::after { width:22px; border-radius:4px; }
 .zrno-mobile-pagination span { margin-left:auto; color:var(--zrno-muted); font-size:11px; }
 .zrno-route-home .zrno-story { padding-block:28px 36px; }
 .zrno-route-home .zrno-story .zrno-split { display:block; }
 .zrno-route-home .zrno-story .zrno-feature-media { width:100%; height:180px; aspect-ratio:auto; margin:0; border-radius:16px 16px 0 0; }
 .zrno-route-home .zrno-story .zrno-feature-media img { width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
 .zrno-route-home .zrno-story .zrno-copy { padding:24px; border-radius:0 0 16px 16px; border-top:0; }
 .zrno-route-home .zrno-story h2 { font-size:30px; margin-bottom:18px; }
 .zrno-route-home .zrno-story p { font-size:13px; line-height:1.75; margin-bottom:16px; }
 .zrno-route-home .zrno-story .wp-block-buttons { margin-top:18px; }
 .zrno-route-home .zrno-extract { padding-top:24px; overflow-x:clip; }
 .zrno-route-home .zrno-extract-copy { position:relative; top:auto; width:calc(50% - 24px); text-align:left; z-index:5; }
 .zrno-route-home .zrno-extract-copy h3 { font-size:clamp(22px,6.2vw,28px); line-height:1.14; margin:0 0 18px; max-width:none; }
 .zrno-route-home .zrno-extract .zrno-scene-track,
 .zrno-route-home .zrno-extract .zrno-scene-frame { height:clamp(260px,74vw,360px); }
 .zrno-route-home .zrno-home-products { padding-block:12px 0; }
 .zrno-route-home .zrno-products-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; margin-bottom:24px; }
 .zrno-route-home .zrno-products-heading h2 { font-size:clamp(22px,6.2vw,28px); line-height:1.14; margin:0; text-align:left; }
 .zrno-route-home .zrno-products-heading p { font-size:11px; line-height:1.7; margin:0; text-align:left; }
 .zrno-route-home .zrno-home-products .zrno-grid { display:grid; grid-template-columns:1fr; gap:18px; }
 .zrno-route-home .zrno-home-products .zrno-card { position:relative; z-index:5; display:grid; grid-template-columns:105px minmax(0,1fr); gap:0 14px; padding:14px; }
 .zrno-route-home .zrno-home-products .zrno-card-media { grid-row:1/5; width:105px; height:105px; margin:0; position:relative; }
 .zrno-route-home .zrno-home-products .zrno-card h3 { font-size:21px; }
 .zrno-route-home .zrno-home-products .zrno-card .wp-block-buttons { grid-column:1/-1; }
 .zrno-route-home .zrno-home-products .zrno-sku-2 { order:3; display:block; padding:14px; border:1px solid var(--zrno-line); background:#302119; border-radius:16px; margin-top:18px; }
 .zrno-route-home .zrno-home-products .zrno-sku-3 { order:2; }
 .zrno-route-home .zrno-home-products .zrno-sku-2 .zrno-card-media { height:auto; width:100%; aspect-ratio:1.9; border:1px solid var(--zrno-line); border-radius:7px; margin-bottom:0; position:relative; background:#291c16; }
 .zrno-route-home .zrno-home-products .zrno-sku-2 .zrno-card-media img { width:100%; height:100%; object-fit:cover; object-position:50% 55%; border-radius:12px; }
 .zrno-route-home .zrno-home-products .zrno-sku-2 > :not(.zrno-card-media) { position:relative; z-index:2; background:transparent; margin:0; padding:0 0 14px; }
 .zrno-route-home .zrno-home-products .zrno-sku-2 > h3 { padding-top:22px; border-radius:0; font-size:25px; }
 .zrno-route-home .zrno-home-products .zrno-sku-2 > .wp-block-buttons { padding-bottom:0; border-radius:0; }
 .zrno-route-home .zrno-pour { padding:0; border:0; background:#291c16; }
 .zrno-route-home .zrno-pour .zrno-stage-heading { position:relative; left:auto; top:auto; width:100%; max-width:none; padding:0 14px 32px; margin:0; text-align:center; background:transparent; z-index:5; }
 .zrno-route-home .zrno-pour .zrno-stage-heading h2 { font-size:30px; margin-bottom:14px; }
 .zrno-route-home .zrno-pour .zrno-stage-heading p { font-size:13px; line-height:1.7; margin-bottom:16px; }
 .zrno-route-home .zrno-pour .zrno-stage-heading .wp-block-buttons { justify-content:center; margin-top:18px; }
 .zrno-route-home .zrno-pour .zrno-scene-track { padding:0; }
 .zrno-route-home .zrno-pour .zrno-scene-frame { height:clamp(280px,86vw,390px); }
 .zrno-route-home .zrno-footer { background:#291c16; border-top:0; padding:12px 0 32px; }
 .zrno-route-home .zrno-footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; }
 .zrno-route-home .zrno-footer-brand { grid-column:1/-1; grid-row:2; border-top:1px solid var(--zrno-line); padding-top:26px; text-align:center; }
 .zrno-route-home .zrno-footer-brand .zrno-brand,
 .zrno-route-home .zrno-footer-brand .zrno-brand img { width:clamp(180px,52vw,240px); }
 .zrno-route-home .zrno-footer-brand .zrno-brand { margin-inline:auto; }
 .zrno-route-home .zrno-footer-brand p { font-size:11px; margin:14px 0 0; max-width:none; text-align:center; }
 .zrno-route-home .zrno-footer-links h3 { font-size:17px; margin-bottom:14px; }
 .zrno-route-home .zrno-footer-links a { font-size:13px; }
 .zrno-mobile-footer { position:relative; }
 /* A resized desktop document retains its media family; never stretch those plates into a mobile layout. */
 html[data-motion-layout="desktop"] .zrno-route-home [class*="zrno-cinema-"] { display:none!important; }
}

@media (max-width:360px) { .zrno-route-home .zrno-home-products .zrno-card { grid-template-columns:85px minmax(0,1fr); } .zrno-route-home .zrno-home-products .zrno-card-media { width:85px; height:85px; } .zrno-route-home .zrno-home-products .zrno-sku-2 .zrno-card-media { width:100%; height:auto; } }

/* Mobile product pictures meet the central stream at their filmed inlet.
   Labels occupy the free side of each picture to keep the cards compact. */
@media (max-width:760px), (hover:none) and (pointer:coarse) {
 .zrno-route-home .zrno-home-products .zrno-card.zrno-flow-product { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
 .zrno-route-home .zrno-home-products .zrno-flow-product .zrno-card-media { grid-column:1; grid-row:1/4; width:100%; height:clamp(168px,44vw,210px); aspect-ratio:auto; margin:0; border:0; border-radius:0; background:transparent; overflow:visible; }
 .zrno-route-home .zrno-home-products .zrno-flow-product .zrno-card-media img { max-width:none; object-fit:contain; border-radius:7px; }
 .zrno-route-home .zrno-home-products .zrno-flow-product > :not(.zrno-card-media):not(canvas) { position:relative; z-index:2; }
 .zrno-route-home .zrno-home-products .zrno-flow-product > h3,
 .zrno-route-home .zrno-home-products .zrno-flow-product > .zrno-format-line,
 .zrno-route-home .zrno-home-products .zrno-flow-product > .zrno-price { grid-column:1; left:var(--zrno-product-copy-x,0px); width:var(--zrno-product-copy-width,90px); margin:0; }
 .zrno-route-home .zrno-home-products .zrno-flow-product > h3 { grid-row:1; align-self:end; font-size:clamp(18px,4.8vw,21px); line-height:1.15; }
 .zrno-route-home .zrno-home-products .zrno-flow-product > .zrno-format-line { grid-row:2; align-self:center; line-height:1.65; }
 .zrno-route-home .zrno-home-products .zrno-flow-product > .zrno-price { grid-row:3; align-self:start; font-size:12px; line-height:1.6; }
 .zrno-route-home .zrno-home-products .zrno-flow-product > p:not(.zrno-format-line):not(.zrno-price) { grid-row:4; grid-column:1; margin:18px 0 10px; }
 .zrno-route-home .zrno-home-products .zrno-flow-product > .wp-block-buttons { grid-row:5; grid-column:1; }
}