/*
 * Shared media styling for Folio-family storefront templates.
 *
 * Provides theme-agnostic rules for the operator-uploaded media slots that
 * appear in every folio-family layout: hero bag overrides, story visual
 * overrides, brew-method visuals, and the long-scroll carousel section.
 *
 * Each sibling theme links this stylesheet AFTER its own theme stylesheet so
 * these rules apply alongside the per-theme look-and-feel. Selectors are
 * un-scoped (no .sf-folio prefix) so they work in any folio-family theme, and
 * they rely on the standard folio CSS variables (--paper, --ink, --ember,
 * --rule-strong, --espresso, --paper-2, --mono, --read, --serif) which every
 * folio-family theme defines.
 */

/* ── unified product frame (athenaeum framed-art look) ──────────────────────
 * Aligns every folio-family theme's product card frame with the athenaeum
 * treatment: a thin ink border wrapped in a paper + ember double ring. Each
 * theme keeps its own look because the rings resolve against that theme's own
 * --ink / --paper / --ember tokens (fallbacks cover any theme that omits one).
 *
 * Scoped through .shop-grid so this rule's specificity (0,3,0) ties each
 * theme's `.sf-x .product .frame` rule; since this shared sheet loads AFTER the
 * theme sheet, source order wins and the unified frame applies everywhere. */
.shop-grid .product .frame {
    position: relative;
    border: 1px solid var(--ink, #1f1610);
    border-radius: 2px;
    box-shadow: 0 0 0 4px var(--paper, #f4ecdc), 0 0 0 5px var(--ember, #c0532e);
}
/* Keep the matted frame on hover too. Like athenaeum, the card only lifts —
 * its own `:hover .frame` transform is left untouched. Several themes
 * (heritage / bazaar / noir / riad) replace box-shadow on hover at specificity
 * (0,4,0); this rule ties that and, loaded later, wins — so the ink + paper +
 * ember rings never revert to a theme-specific drop shadow mid-interaction. */
.shop-grid .product:hover .frame {
    border-color: var(--ink, #1f1610);
    box-shadow: 0 0 0 4px var(--paper, #f4ecdc), 0 0 0 5px var(--ember, #c0532e);
}

/* ── hero bag media overrides ───────────────────────────────────────────── */
.bag-card.hero-bag-yt {
    position: relative;
    overflow: hidden;
    background: #1f1610;
}
.bag-card.hero-bag-yt iframe.folio-media-yt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.bag-card.hero-bag-video {
    position: relative;
    overflow: hidden;
    background: #1f1610;
}
.bag-card.hero-bag-video video.folio-media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}

/* ── story visual overrides (image background handled inline on the
       template's existing .story-visual container) ──────────────────────── */
.story-visual {
    position: relative;
}
.story-visual iframe.folio-media-yt,
.story-visual video.folio-media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    z-index: 2;
}

/* ── method card media ──────────────────────────────────────────────────── */
.method-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 24px;
    overflow: hidden;
    background: #1f1610;
    border-radius: inherit;
}
.method-media img,
.method-media video,
.method-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
}

/* ── shared (un-scoped) carousel section ────────────────────────────────── */
.folio-carousel-section {
    background: linear-gradient(180deg, var(--paper, #f4ecdc) 0%, var(--paper-2, #ebe0c8) 100%);
    position: relative;
    padding: 80px 0;
}
.folio-carousel-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(31, 22, 16, 0.04) 38px 39px);
    pointer-events: none;
    opacity: 0.6;
}
.folio-carousel-section .container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.folio-carousel-section .section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
}
.folio-carousel-section .label-mono {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ember-deep, #8a3417);
    margin-bottom: 16px;
}
.folio-carousel-section h2 {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 340;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    color: var(--ink, #1f1610);
}
.folio-carousel-section h2 em {
    font-style: italic;
    color: var(--ember-deep, #8a3417);
}
.folio-carousel-section .carousel-lead {
    font-family: var(--read, Georgia, serif);
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.55;
    color: var(--ink-soft, #4a3a2e);
    font-style: italic;
    max-width: 640px;
    margin: 24px 0 56px;
}
.folio-carousel-section .carousel-frame {
    position: relative;
    border: 1px solid var(--rule-strong, rgba(31, 22, 16, 0.3));
    background: var(--paper, #f4ecdc);
    box-shadow:
        0 30px 60px -40px rgba(31, 22, 16, 0.4),
        0 0 0 12px var(--paper, #f4ecdc) inset;
    padding: 18px 18px 64px;
}
.folio-carousel-section .carousel-frame::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 48px;
    height: 1px;
    background: var(--rule-strong, rgba(31, 22, 16, 0.3));
    opacity: 0.55;
}
.folio-carousel-section .carousel-viewport {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rule, rgba(31, 22, 16, 0.15));
    aspect-ratio: 16 / 9;
    background: var(--espresso, #2a1d14);
}
.folio-carousel-section .carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
    will-change: transform;
}
.folio-carousel-section .carousel-slide {
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
.folio-carousel-section .carousel-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--espresso, #2a1d14);
}
.folio-carousel-section .carousel-media img,
.folio-carousel-section .carousel-media video,
.folio-carousel-section .carousel-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
    filter: saturate(0.92) contrast(1.02);
}
.folio-carousel-section .carousel-media iframe {
    object-fit: contain;
    background: #000;
    filter: none;
}
.folio-carousel-section .carousel-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--paper, #f4ecdc);
    opacity: 0.55;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.folio-carousel-section .carousel-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 22px;
    background: linear-gradient(180deg, rgba(31, 22, 16, 0) 0%, rgba(31, 22, 16, 0.78) 100%);
    color: var(--paper, #f4ecdc);
    font-family: var(--read, Georgia, serif);
    font-style: italic;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.4;
    letter-spacing: -0.005em;
}
.folio-carousel-section .carousel-nav {
    position: absolute;
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--paper, #f4ecdc);
    color: var(--ink, #1f1610);
    border: 1px solid var(--rule-strong, rgba(31, 22, 16, 0.3));
    font-family: var(--serif, Georgia, serif);
    font-size: 22px;
    font-weight: 340;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.25s;
    z-index: 2;
    box-shadow: 0 6px 18px -8px rgba(31, 22, 16, 0.35);
}
.folio-carousel-section .carousel-nav.prev { left: -22px; }
.folio-carousel-section .carousel-nav.next { right: -22px; }
.folio-carousel-section .carousel-nav:hover {
    background: var(--ember, #c0532e);
    color: var(--paper, #f4ecdc);
    border-color: var(--ember, #c0532e);
    transform: translateY(-1px);
}
.folio-carousel-section .carousel-dots {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.folio-carousel-section .carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--ink, #1f1610);
    padding: 0;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}
.folio-carousel-section .carousel-dot:hover { background: var(--ink-soft, #4a3a2e); }
.folio-carousel-section .carousel-dot.is-active {
    background: var(--ember, #c0532e);
    border-color: var(--ember, #c0532e);
    transform: scale(1.15);
}
.folio-carousel-section .carousel-count {
    position: absolute;
    right: 18px;
    bottom: 18px;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft, #4a3a2e);
}
.folio-carousel-section .carousel-count .sep {
    margin: 0 6px;
    color: var(--ember, #c0532e);
}

@media (max-width: 720px) {
    .folio-carousel-section .carousel-frame { padding: 10px 10px 56px; }
    .folio-carousel-section .carousel-nav {
        width: 40px;
        height: 40px;
    }
    .folio-carousel-section .carousel-nav.prev { left: 6px; }
    .folio-carousel-section .carousel-nav.next { right: 6px; }
    .folio-carousel-section .carousel-lead { margin: -12px 0 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .folio-carousel-section .carousel-track { transition: none; }
}

/* ── Article modal ─────────────────────────────────────────────
   Opens when a guest taps an article "Read more" button. Renders
   the full image/video on the left and the article copy on the
   right. Uses the same paper/ember tokens the Folio family already
   sets globally, with fallbacks for non-Folio templates. */
:root {
    --folio-modal-paper: var(--paper, #f4ecdc);
    --folio-modal-paper-2: var(--paper-2, #ece2cc);
    --folio-modal-ink: var(--ink, #1f1610);
    --folio-modal-ink-soft: var(--ink-soft, #3b2a20);
    --folio-modal-ember: var(--ember, #c0532e);
    --folio-modal-ember-deep: var(--ember-deep, #9a3d1c);
    --folio-modal-rule: var(--rule, rgba(31, 22, 16, 0.18));
    --folio-modal-rule-strong: var(--rule-strong, rgba(31, 22, 16, 0.45));
    --folio-modal-serif: var(--serif, Georgia, "Times New Roman", serif);
    --folio-modal-read: var(--read, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
    --folio-modal-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

body.folio-modal-locked { overflow: hidden; }

.folio-article-modal {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 32px);
}
.folio-article-modal.is-open { display: flex; }
.folio-article-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(31, 22, 16, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
.folio-article-modal-card {
    position: relative;
    background: var(--folio-modal-paper);
    color: var(--folio-modal-ink);
    width: min(1100px, 100%);
    max-height: calc(100vh - 48px);
    border: 1px solid var(--folio-modal-rule-strong);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    overflow: hidden;
    animation: folio-modal-in 0.28s ease-out;
}
@keyframes folio-modal-in {
    from { transform: translateY(14px) scale(0.985); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.folio-article-modal-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(244, 236, 220, 0.92);
    color: var(--folio-modal-ink);
    border: 1px solid var(--folio-modal-rule-strong);
    font-size: 22px; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.folio-article-modal-close:hover {
    background: var(--folio-modal-ember);
    color: var(--folio-modal-paper);
    transform: rotate(90deg);
}
.folio-article-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    max-height: calc(100vh - 48px);
}
.folio-article-modal-media {
    background: var(--folio-modal-paper-2);
    position: relative;
    display: flex; align-items: stretch; justify-content: stretch;
    min-height: 320px;
    max-height: calc(100vh - 48px);
}
.folio-article-modal-media.is-empty { background: var(--folio-modal-paper-2); }
.folio-article-modal-media img,
.folio-article-modal-media video,
.folio-article-modal-media iframe {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border: 0;
}
.folio-article-modal-content {
    padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 44px) clamp(28px, 3vw, 48px);
    overflow-y: auto;
    font-family: var(--folio-modal-read);
    color: var(--folio-modal-ink);
    display: flex; flex-direction: column; gap: 16px;
}
.folio-article-modal-kicker {
    font-family: var(--folio-modal-mono);
    font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--folio-modal-ink-soft);
}
.folio-article-modal-title {
    font-family: var(--folio-modal-serif);
    font-weight: 360; font-style: normal;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.05; letter-spacing: -0.02em;
    margin: 0;
    color: var(--folio-modal-ink);
}
.folio-article-modal-title em {
    color: var(--folio-modal-ember-deep);
    font-style: italic;
}
.folio-article-modal-body p {
    margin: 0 0 14px;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.65;
    color: var(--folio-modal-ink);
}
.folio-article-modal-body p:last-child { margin-bottom: 0; }
.folio-article-modal-cta {
    align-self: flex-start;
    margin-top: 8px;
    font-family: var(--folio-modal-mono);
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--folio-modal-ember-deep);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}
.folio-article-modal-cta:hover {
    color: var(--folio-modal-ember);
    transform: translateX(3px);
}

@media (max-width: 820px) {
    .folio-article-modal-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 48vh) minmax(0, 1fr);
        max-height: calc(100vh - 32px);
    }
    .folio-article-modal-media {
        min-height: 0; max-height: 48vh;
    }
    .folio-article-modal-content { max-height: none; }
}

/* The "Read more" trigger looks like a button-styled link to match the existing inline-link
   appearance — same colour + underline behaviour across the folio template family. */
.article-link[data-folio-article-open] {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

/* ── Articles section — unscoped so every folio-family template inherits the
   same heading + card styling regardless of body class (sf-folio, sf-wok,
   sf-trattoria, …). Per-template themes can still override via the
   `.sf-* .folio-articles-section` selector. */
.folio-articles-section {
    background: var(--paper, var(--folio-modal-paper));
    padding: 88px 0 96px;
    border-top: 1px solid var(--rule-strong, var(--folio-modal-rule-strong));
}
.folio-articles-section .section-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 32px;
    margin-bottom: 48px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule-strong, var(--folio-modal-rule-strong));
}
.folio-articles-section .section-head .label-mono {
    font-family: var(--mono, var(--folio-modal-mono));
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft, var(--folio-modal-ink-soft));
    align-self: end;
    padding-bottom: 10px;
}
.folio-articles-section .section-head h2 {
    font-family: var(--serif, var(--folio-modal-serif));
    font-weight: 340;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink, var(--folio-modal-ink));
}
.folio-articles-section .section-head h2 em {
    font-style: italic;
    color: var(--ember-deep, var(--folio-modal-ember-deep));
    font-weight: 300;
}
.folio-articles-section .articles-lead {
    font-family: var(--read, var(--folio-modal-read));
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.6;
    color: var(--ink-soft, var(--folio-modal-ink-soft));
    font-style: italic;
    margin: -16px 0 40px;
}
.folio-articles-section .articles-grid {
    display: grid;
    gap: 32px 24px;
    grid-template-columns: repeat(4, 1fr);
}
.folio-articles-section .articles-grid.articles-cols-1 { grid-template-columns: minmax(0, 720px); justify-content: start; }
.folio-articles-section .articles-grid.articles-cols-2 { grid-template-columns: repeat(2, 1fr); }
.folio-articles-section .articles-grid.articles-cols-3 { grid-template-columns: repeat(3, 1fr); }
.folio-articles-section .articles-grid.articles-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Single featured article — one wide framed card; media beside the body on
 * desktop. Wears the same ink-border + paper/ember double ring as the product
 * frames so the featured story reads as a deliberate centrepiece, with roomy
 * editorial typography. */
.folio-articles-section .articles-single { display: flex; }
.folio-articles-section .articles-single .article-card {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--paper, var(--folio-modal-paper));
    border: 1px solid var(--ink, var(--folio-modal-ink));
    box-shadow:
        0 0 0 5px var(--paper, #f4ecdc),
        0 0 0 6px var(--ember, #c0532e),
        0 40px 70px -50px rgba(31, 22, 16, 0.55);
}
.folio-articles-section .articles-single .article-card:hover {
    transform: none;
    box-shadow:
        0 0 0 5px var(--paper, #f4ecdc),
        0 0 0 6px var(--ember, #c0532e),
        0 40px 70px -50px rgba(31, 22, 16, 0.55);
}
.folio-articles-section .articles-single .article-kicker { font-size: 11px; }
@media (min-width: 760px) {
    .folio-articles-section .articles-single .article-card { flex-direction: row; }
    .folio-articles-section .articles-single .article-media {
        aspect-ratio: auto;
        flex: 0 0 52%;
        min-height: 440px;
    }
    .folio-articles-section .articles-single .article-body {
        flex: 1;
        justify-content: center;
        gap: 16px;
        padding: clamp(32px, 4vw, 64px);
    }
    .folio-articles-section .articles-single .article-card h3 {
        font-size: clamp(30px, 3vw, 46px);
        line-height: 1.05;
    }
    .folio-articles-section .articles-single .article-body p {
        font-size: clamp(16px, 1.15vw, 19px);
        line-height: 1.7;
        max-width: 46ch;
    }
    .folio-articles-section .articles-single .article-link {
        margin-top: 18px;
        font-size: 12px;
    }
}

/* Articles carousel — cards grouped into slides of --per-slide (1 or 3).
 * Self-contained chrome: the generic .carousel-* rules in this sheet are scoped
 * to .folio-carousel-section, so they never reached the articles carousel (it
 * lives in .folio-articles-section). Without an overflow-clipped viewport the
 * track laid every slide out side-by-side and the next slide's cards bled into
 * view — the "I can already see slide 2" bug. Define the full frame / viewport /
 * track / nav / dots / count chrome here. */
.folio-articles-section .articles-carousel .carousel-frame { position: relative; }
.folio-articles-section .articles-carousel .carousel-viewport {
    position: relative;
    overflow: hidden;
}
.folio-articles-section .articles-carousel .carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1);
    will-change: transform;
}
.folio-articles-section .articles-carousel .carousel-slide {
    min-width: 100%;
    flex: 0 0 100%;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(var(--per-slide, 3), minmax(0, 1fr));
    align-items: stretch;
}
.folio-articles-section .articles-carousel .carousel-nav {
    position: absolute;
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--paper, #f4ecdc);
    color: var(--ink, #1f1610);
    border: 1px solid var(--rule-strong, rgba(31, 22, 16, 0.3));
    font-family: var(--serif, Georgia, serif);
    font-size: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.25s;
    z-index: 2;
    box-shadow: 0 6px 18px -8px rgba(31, 22, 16, 0.35);
}
.folio-articles-section .articles-carousel .carousel-nav.prev { left: 8px; }
.folio-articles-section .articles-carousel .carousel-nav.next { right: 8px; }
.folio-articles-section .articles-carousel .carousel-nav:hover {
    background: var(--ember, #c0532e);
    color: var(--paper, #f4ecdc);
    border-color: var(--ember, #c0532e);
    transform: translateY(-1px);
}
.folio-articles-section .articles-carousel .carousel-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}
.folio-articles-section .articles-carousel .carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--ink, #1f1610);
    padding: 0;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}
.folio-articles-section .articles-carousel .carousel-dot:hover { background: var(--ink-soft, #4a3a2e); }
.folio-articles-section .articles-carousel .carousel-dot.is-active {
    background: var(--ember, #c0532e);
    border-color: var(--ember, #c0532e);
    transform: scale(1.15);
}
.folio-articles-section .articles-carousel .carousel-count {
    margin-top: 14px;
    text-align: center;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft, #4a3a2e);
}
.folio-articles-section .articles-carousel .carousel-count .sep {
    margin: 0 6px;
    color: var(--ember, #c0532e);
}
@media (max-width: 720px) {
    .folio-articles-section .articles-carousel .carousel-slide { grid-template-columns: 1fr; }
    .folio-articles-section .articles-carousel .carousel-nav { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .folio-articles-section .articles-carousel .carousel-track { transition: none; }
}
.folio-articles-section .article-card {
    display: flex;
    flex-direction: column;
    background: var(--paper-2, var(--folio-modal-paper-2));
    border: 1px solid var(--rule-strong, var(--folio-modal-rule-strong));
    overflow: hidden;
    position: relative;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.folio-articles-section .article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -22px rgba(0, 0, 0, .45);
}
.folio-articles-section .article-media {
    aspect-ratio: 4 / 3;
    background: var(--ink, var(--folio-modal-ink));
    overflow: hidden;
}
.folio-articles-section .article-media img,
.folio-articles-section .article-media video,
.folio-articles-section .article-media iframe {
    width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.folio-articles-section .article-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.folio-articles-section .article-kicker {
    font-family: var(--mono, var(--folio-modal-mono));
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft, var(--folio-modal-ink-soft));
}
.folio-articles-section .article-card h3 {
    font-family: var(--serif, var(--folio-modal-serif));
    font-weight: 360;
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink, var(--folio-modal-ink));
}
.folio-articles-section .article-card h3 em {
    font-style: italic;
    color: var(--ember-deep, var(--folio-modal-ember-deep));
}
.folio-articles-section .article-card p {
    font-family: var(--read, var(--folio-modal-read));
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft, var(--folio-modal-ink-soft));
    margin: 0;
}
.folio-articles-section .article-link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--mono, var(--folio-modal-mono));
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-deep, var(--folio-modal-ember-deep));
    border-bottom: 1px solid currentColor;
    padding: 0 0 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border-top: 0; border-left: 0; border-right: 0;
    cursor: pointer;
    transition: color .25s, gap .25s;
}
.folio-articles-section .article-link:hover {
    color: var(--ink, var(--folio-modal-ink));
    gap: 10px;
}
.folio-articles-section .article-link .arr {
    font-family: var(--serif, var(--folio-modal-serif));
    font-style: italic;
    font-size: 14px;
}

@media (max-width: 1100px) {
    .folio-articles-section .articles-grid,
    .folio-articles-section .articles-grid.articles-cols-3,
    .folio-articles-section .articles-grid.articles-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .folio-articles-section { padding: 64px 0 72px; }
    .folio-articles-section .articles-grid,
    .folio-articles-section .articles-grid.articles-cols-2,
    .folio-articles-section .articles-grid.articles-cols-3,
    .folio-articles-section .articles-grid.articles-cols-4 {
        grid-template-columns: 1fr;
    }
    .folio-articles-section .section-head { grid-template-columns: 1fr; gap: 14px; }
    .folio-articles-section .section-head .label-mono { padding-bottom: 0; }
}

/* ── Category Highlight Section ──────────────────────────────── */
.folio-category-highlight { padding: 100px 0; }
.folio-category-highlight .container {
    max-width: var(--container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--gutter, 2rem);
}
.folio-category-highlight .category-highlight-banner {
    width: 100%;
    height: 260px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin-bottom: 2rem;
    overflow: hidden;
}
.folio-category-highlight .category-highlight-lead {
    max-width: 600px;
    font-style: italic;
    color: var(--ink-soft, #4a3a2e);
    margin-bottom: 2rem;
    line-height: 1.6;
}
.folio-category-highlight .category-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
@media (max-width: 1024px) {
    .folio-category-highlight .category-highlight-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .folio-category-highlight .category-highlight-grid { grid-template-columns: repeat(2, 1fr); }
    .folio-category-highlight .category-highlight-banner { height: 180px; }
    .folio-category-highlight { padding: 64px 0; }
}
@media (max-width: 480px) {
    .folio-category-highlight .category-highlight-grid { grid-template-columns: 1fr; }
}

/* ── shared language switcher (Google Translate + multi-language) ───────────────────
   These rules were extracted from .sf-folio so every folio-family theme can host
   the same switcher. The base look is theme-neutral; individual themes may still
   override colours/typography via more-specific selectors. */

.folio-translate {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.folio-translate-original {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 11px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    line-height: 1;
}
.folio-translate-original:hover { background: #fff; color: #1a1a1a; border-color: #fff; }
.folio-translate-original svg { flex: none; }
.folio-translate-original[hidden] { display: none; }
.folio-translate-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 10px 5px 9px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    line-height: 1;
}
.folio-translate-trigger:hover,
.folio-translate-trigger[aria-expanded="true"] {
    background: #fff;
    color: #1a1a1a;
    border-color: #fff;
}
.folio-translate-globe { flex: none; }
.folio-translate-caret { opacity: 0.7; }
.folio-translate-label { font-weight: 500; }

.folio-translate-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(20, 12, 8, 0.45), 0 4px 12px -6px rgba(20, 12, 8, 0.25);
    padding: 6px;
    z-index: 200;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-family: var(--read, system-ui, sans-serif);
    animation: folioTranslateFade .18s ease-out;
}
@keyframes folioTranslateFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.folio-translate-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.folio-translate-option:hover {
    background: rgba(160, 98, 80, 0.10);
}
.folio-translate-option.active {
    color: var(--ember-deep, #a06250);
    font-style: italic;
}
.folio-translate-option .check {
    font-family: var(--mono, monospace);
    font-size: 12px;
    opacity: 0.8;
}
.folio-translate-option .native {
    font-family: var(--mono, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-left: 12px;
}

/* Standalone floating strip for templates that don't tuck the switcher into a
   bespoke announce row. Pins to the top-right of the viewport, above all other
   chrome, regardless of theme background. */
.folio-translate-strip {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 1100;
}
.folio-translate-strip .folio-translate { position: static; transform: none; }

@media (max-width: 720px) {
    .folio-translate-strip { top: 8px; right: 8px; }
    .folio-translate-trigger { font-size: 9px; padding: 4px 8px; }
}

/* Hide Google's stock chrome — we drive translation via our own UI. */
#google_translate_element { position: absolute; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; }
.goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .skiptranslate, iframe.skiptranslate { display: none !important; visibility: hidden !important; }
body { top: 0 !important; }
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }
font[style*="background-color"] { background: transparent !important; }

/* ── category bar (above shop grid) — unscoped baseline so every folio-family
   template inherits styling. folio.js injects #folioCatBar.cat-bar for ALL
   themes; without this only the handful with bespoke .sf-* .cat-bar rules were
   styled and the rest sat unstyled against the product grid. Theme-specific
   .sf-<theme> .cat-bar overrides win on specificity. Fallbacks cover themes
   that don't define --rule-strong / --espresso. */
.cat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    margin: 12px 0 36px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule, rgba(31, 22, 16, 0.16));
}
/* Baseline pill, now aligned to the framed product-card look: squared 2px
 * corners (matching .shop-grid .product .frame) and a solid ink border instead
 * of the old fully-rounded faint-rule pill. Covers every theme that has no
 * bespoke .sf-<theme> .cat-pill rule. */
.cat-pill {
    background: transparent;
    border: 1px solid var(--ink, #1f1610);
    border-radius: 2px;
    color: var(--ink, #1f1610);
    padding: 7px 12px;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cat-pill:hover { border-color: var(--ink, #1f1610); }
.cat-pill.active {
    background: var(--espresso, var(--ink, #1f1610));
    color: var(--paper, #f4ecdc);
    border-color: var(--espresso, var(--ink, #1f1610));
}
.cat-pill .cat-count {
    margin-left: 8px;
    color: var(--ink-soft, rgba(31, 22, 16, 0.55));
    font-weight: 400;
}
.cat-pill.active .cat-count { color: var(--paper, #f4ecdc); opacity: 0.7; }

/* Geometry override for the seven themes that ship a bespoke
 * `.sf-<theme> .cat-pill` (folio / hearth / noir / smashburger / taqueria / wok
 * / pizzeria, all specificity 0,2,0). A bare `.cat-pill` (0,1,0) loses to them,
 * so they kept the old rounded pill. `.cat-bar .cat-pill` ties their specificity
 * and — since this shared sheet loads AFTER every theme sheet — wins on source
 * order. Geometry only (square corners + solid ink border to mirror that theme's
 * product frame); each theme keeps its own hover/active accent palette. */
.cat-bar .cat-pill {
    border: 1px solid var(--ink, #1f1610);
    border-radius: 2px;
}

/* ── Left-sidebar category navigation ──────────────────────────
   Enabled when folio.shop.categoryNavLayout = "sidebar". folio.js wraps the
   category bar + product grid in .folio-shop-flex; categories list down the
   left and the grid narrows to 3 columns. The .sf-3col compound selector
   (specificity 0,3,0) beats every per-theme `.sf-<theme> .shop-grid` rule
   (0,2,0), including their responsive media overrides. */
.folio-shop-flex { display: flex; gap: 28px; align-items: flex-start; }
.cat-bar--sidebar {
    flex: 0 0 180px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    margin: 12px 0 36px;
    padding: 0 18px 0 0;
    border-bottom: none;
    border-right: 1px solid var(--rule, rgba(31, 22, 16, 0.16));
    position: sticky;
    top: 88px;
}
.cat-bar--sidebar .cat-pill { text-align: left; }
.folio-shop-flex .shop-grid { flex: 1 1 0; min-width: 0; }
.folio-shop-flex .shop-grid.sf-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) {
    .folio-shop-flex { flex-direction: column; gap: 0; }
    .cat-bar--sidebar {
        flex-basis: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 6px;
        padding: 0 0 18px 0;
        border-right: none;
        border-bottom: 1px solid var(--rule, rgba(31, 22, 16, 0.16));
        position: static;
    }
    .folio-shop-flex .shop-grid.sf-3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .folio-shop-flex .shop-grid.sf-3col { grid-template-columns: 1fr; }
}

/* Secondary (other-language) product name shown when the location enables
   "show both product names". Theme-neutral: smaller, muted, italic, sits
   directly under the primary title on cards and in the product modal. */
.ptitle-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.78em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink-soft, rgba(31, 22, 16, 0.55));
}

/* ── Contact section ───────────────────────────────────────────
   Shared, theme-portable styling for the contact form rendered by
   storefront/fragments/folio-contact.html. Bare class selectors so
   every folio-family theme picks it up, using the --folio-modal-*
   token set (mapped to each theme's palette near the top of this
   file) so colours adapt per theme. The flagship `folio` theme
   keeps its own higher-specificity `.sf-folio .contact-*` rules in
   storefront-folio.css, which win there and leave it unchanged. */
.contact-section { padding: 110px 0; }
.contact-lead {
    max-width: 620px; margin: -6px auto 40px;
    text-align: center; font-family: var(--folio-modal-read); font-style: italic;
    font-size: 18px; line-height: 1.55; color: var(--folio-modal-ink-soft);
}
.contact-grid {
    display: grid; grid-template-columns: 1fr 1.6fr;
    gap: 56px; align-items: start;
}
.contact-grid:has(.contact-form:only-child) { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.contact-grid:has(.contact-aside:only-child) { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.contact-aside {
    font-family: var(--folio-modal-read); color: var(--folio-modal-ink);
    display: flex; flex-direction: column; gap: 16px;
}
.contact-aside-block { margin-bottom: 0; }
.contact-card {
    display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
    padding: 22px 22px;
    background: var(--folio-modal-paper);
    border: 1px solid var(--folio-modal-rule);
    border-radius: 4px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-card:hover {
    transform: translateY(-2px);
    border-color: var(--folio-modal-ember);
    box-shadow: 0 8px 24px -18px rgba(0,0,0,0.35);
}
.contact-card-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--folio-modal-ember-deep);
    color: var(--folio-modal-paper);
    flex-shrink: 0;
}
.contact-card-icon svg { width: 22px; height: 22px; display: block; }
.contact-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-aside-label {
    display: block; font-family: var(--folio-modal-mono); font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--folio-modal-ink-soft); margin-bottom: 0;
}
.contact-aside p,
.contact-aside address {
    margin: 0; font-size: 16px; line-height: 1.6; font-style: normal;
    word-break: break-word;
}
.contact-aside a { color: var(--folio-modal-ember-deep); border-bottom: 1px solid currentColor; }
.contact-aside a:hover { color: var(--folio-modal-ember); }

/* ── Contact map band (full-width OSM via Leaflet, lazy-loaded) ─ */
.contact-map-wrap {
    width: 100%; margin: 64px 0 0;
    border-top: 1px solid var(--folio-modal-rule);
    border-bottom: 1px solid var(--folio-modal-rule);
    background: var(--folio-modal-paper-2);
}
.contact-map {
    width: 100%; height: 380px;
    background: var(--folio-modal-paper-2);
    filter: saturate(0.85) contrast(0.96);
    cursor: pointer;
}
.contact-map-foot {
    padding: 16px 0 18px;
    display: flex; justify-content: flex-end;
}
.contact-map-link {
    font-family: var(--folio-modal-mono); font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--folio-modal-ember-deep);
    text-decoration: none; border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.contact-map-link:hover { color: var(--folio-modal-ember); }
.leaflet-container { font-family: var(--folio-modal-read); }
.leaflet-control-attribution { font-size: 10px; }
.contact-form {
    background: var(--folio-modal-paper); border: 1px solid var(--folio-modal-rule-strong);
    padding: 36px 32px;
}
/* contact-field kept as alias for legacy compatibility */
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-captcha .contact-captcha-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 2px;
}
.contact-captcha-image {
    display: inline-flex; line-height: 0; padding: 4px 10px;
    border: 1px solid var(--folio-modal-rule-strong); border-radius: 3px;
    color: var(--folio-modal-ink);
}
.contact-captcha-image svg { display: block; max-width: 100%; height: auto; }
.contact-captcha-refresh {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--folio-modal-rule-strong); border-radius: 3px;
    background: transparent; color: var(--folio-modal-ink);
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    transition: border-color 0.2s;
}
.contact-captcha-refresh:hover { border-color: var(--folio-modal-ember); }
.contact-actions {
    display: flex; align-items: center; gap: 18px; margin-top: 6px;
}
.contact-actions .btn { display: inline-flex; align-items: center; gap: 10px; }
.contact-status {
    font-family: var(--folio-modal-read); font-style: italic; font-size: 14px; color: var(--folio-modal-ember-deep);
}
.contact-status.error { color: #b73c2c; }
.contact-honeypot {
    position: absolute !important; left: -9999px !important; opacity: 0 !important;
    height: 0 !important; width: 0 !important; pointer-events: none;
}
.contact-success {
    display: none; padding: 20px; background: var(--folio-modal-paper-2);
    border: 1px solid var(--folio-modal-rule); font-family: var(--folio-modal-read); font-style: italic;
    color: var(--folio-modal-ink);
}
.contact-success.show { display: block; }
.contact-form.sent .folio-field-row,
.contact-form.sent .folio-field-row-3,
.contact-form.sent .folio-field,
.contact-form.sent .contact-actions { display: none; }

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 36px; }
    .contact-form .folio-field-row,
    .contact-form .folio-field-row-3 { grid-template-columns: 1fr; }
    .contact-map-wrap { margin-top: 48px; }
    .contact-map { height: 280px; }
    .contact-map-foot { justify-content: center; }
}
@media (max-width: 640px) {
    .contact-card { grid-template-columns: 36px 1fr; gap: 14px; padding: 18px; }
    .contact-card-icon { width: 36px; height: 36px; }
    .contact-card-icon svg { width: 18px; height: 18px; }
}

/* ── Smartphone product grid override ───────────────────────────
   Always 2 products per row on phones in portrait (≤767px), 3 in
   landscape. The `.shop-grid.shop-grid.shop-grid` compound selector
   (specificity 0,3,0) beats every per-theme `.sf-<theme> .shop-grid`
   rule (0,2,0) and ties the `.folio-shop-flex .shop-grid.sf-3col`
   sidebar rules (0,3,0) — the tie is decided by source order, so
   these rules must stay at the end of this shared sheet. The
   max-height clamp on the landscape query keeps tablets (which sit
   above ~600px tall) from picking up the phone-landscape 3-col
   layout. Themes that scope their grid to #shopGrid (ID selector,
   higher specificity) add their own phone overrides in their own CSS. */
@media (max-width: 767px) {
    .shop-grid.shop-grid.shop-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 10px;
    }
}
@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
    .shop-grid.shop-grid.shop-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 12px;
    }
}


/* ── opening hours strip ────────────────────────────────────────────────── */
/* Magazine-style vertical stack: brand mark on top, horizontal day-card     */
/* schedule in the middle, stamp + social row underneath. Shares the dark    */
/* espresso background of the surrounding footer block.                     */
.f-hours-strip {
    background: var(--espresso, #2a1810);
    color: var(--paper, #f4ecdc);
    padding: 56px 0 64px;
    position: relative;
}
.f-hours-strip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(160px, 40%);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(244, 236, 220, 0.35) 50%,
        transparent 100%);
    transform: translateX(-50%);
}
.f-hours-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
}

/* Brand head: title + tagline, centered above the schedule */
.f-brand-head {
    text-align: center;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.f-brand-head .big {
    margin: 0;
}
.f-brand-tagline {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: rgba(244, 236, 220, 0.7);
    line-height: 1.55;
    max-width: 52ch;
}

/* Hours wrap: label eyebrow on top, day cards in a horizontal grid */
.f-hours-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.f-hours-label {
    font-family: var(--mono, monospace);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(244, 236, 220, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.f-hours-label::before,
.f-hours-label::after {
    content: "";
    width: 32px;
    height: 1px;
    background: rgba(244, 236, 220, 0.25);
}
.f-hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}
.f-hours-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 16px 10px 18px;
    background: rgba(244, 236, 220, 0.03);
    border: 1px solid rgba(244, 236, 220, 0.08);
    border-radius: 4px;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.f-hours-card:hover {
    border-color: rgba(244, 236, 220, 0.18);
    background: rgba(244, 236, 220, 0.06);
}
.f-hours-day {
    font-family: var(--mono, monospace);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(244, 236, 220, 0.55);
    line-height: 1;
}
.f-hours-time {
    font-family: var(--mono, monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--paper, #f4ecdc);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.f-hours-slot {
    display: block;
    white-space: nowrap;
}
.f-hours-today {
    background: rgba(192, 83, 46, 0.12);
    border-color: var(--ember, #c0532e);
    box-shadow: 0 0 0 1px var(--ember, #c0532e) inset;
}
.f-hours-today .f-hours-day {
    color: var(--ember, #c0532e);
    font-weight: 600;
}
.f-hours-today .f-hours-time {
    color: var(--paper, #f4ecdc);
    font-weight: 600;
}

/* Brand foot: stamp + social, centered under the schedule */
.f-brand-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.f-brand-foot .stamp-mono {
    align-self: center;
}
.f-brand-foot .f-social {
    margin-top: 0;
}

/* ── Social links (theme-agnostic) ───────────────────────────────────── */
.f-social { margin-top: 28px; }
.f-social-heading {
    display: block; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(244, 236, 220, 0.45); margin-bottom: 14px;
}
.f-social-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
}
.f-social-list a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px 8px 14px;
    border-radius: 999px;
    background: rgba(244, 236, 220, 0.06);
    border: 1px solid rgba(244, 236, 220, 0.12);
    color: rgba(244, 236, 220, 0.65);
    text-decoration: none;
    transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.f-social-list a:hover {
    transform: translateY(-2px);
    border-color: transparent;
}
.f-social-list a[data-platform=INSTAGRAM]:hover {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
    color: #fff; box-shadow: 0 6px 20px rgba(221, 42, 123, 0.35);
}
.f-social-list a[data-platform=FACEBOOK]:hover {
    background: #1877f2; color: #fff; box-shadow: 0 6px 20px rgba(24, 119, 242, 0.35);
}
.f-social-list a[data-platform=TWITTER]:hover {
    background: #000; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.f-social-list a[data-platform=TIKTOK]:hover {
    background: #010101; color: #fe2c55; box-shadow: 0 6px 20px rgba(254, 44, 85, 0.3);
}
.f-social-list a[data-platform=YOUTUBE]:hover {
    background: #ff0000; color: #fff; box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3);
}
.f-social-list a[data-platform=LINKEDIN]:hover {
    background: #0a66c2; color: #fff; box-shadow: 0 6px 20px rgba(10, 102, 194, 0.35);
}
.f-social-list a[data-platform=PINTEREST]:hover {
    background: #e60023; color: #fff; box-shadow: 0 6px 20px rgba(230, 0, 35, 0.3);
}
.f-social-list a[data-platform=WHATSAPP]:hover {
    background: #25d366; color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}
.f-social-list a[data-platform=TELEGRAM]:hover {
    background: #26a5e4; color: #fff; box-shadow: 0 6px 20px rgba(38, 165, 228, 0.35);
}
.f-social-list a[data-platform=GOOGLE]:hover {
    background: #4285f4; color: #fff; box-shadow: 0 6px 20px rgba(66, 133, 244, 0.35);
}
.f-social-list a[data-platform=TRIPADVISOR]:hover {
    background: #34e0a1; color: #000; box-shadow: 0 6px 20px rgba(52, 224, 161, 0.3);
}
.f-social-list a[data-platform=YELP]:hover {
    background: #d32323; color: #fff; box-shadow: 0 6px 20px rgba(211, 35, 35, 0.3);
}
.f-social-list a[data-platform=SPOTIFY]:hover {
    background: #1db954; color: #fff; box-shadow: 0 6px 20px rgba(29, 185, 84, 0.35);
}
.f-social-list a[data-platform=GITHUB]:hover {
    background: #333; color: #fff; box-shadow: 0 6px 20px rgba(51, 51, 51, 0.4);
}
.f-social-list a[data-platform=EMAIL]:hover {
    background: rgba(244, 236, 220, 0.85); color: #1a1a1a; box-shadow: 0 6px 20px rgba(244, 236, 220, 0.25);
}
.f-social-list a[data-platform=WEBSITE]:hover {
    background: rgba(244, 236, 220, 0.85); color: #1a1a1a; box-shadow: 0 6px 20px rgba(244, 236, 220, 0.25);
}
.f-social-label {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap;
}
.f-social-icon {
    width: 18px; height: 18px; display: block; flex-shrink: 0;
    background-color: currentColor;
    mask-size: contain; mask-repeat: no-repeat; mask-position: center;
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
.f-social-icon[data-platform=INSTAGRAM]   { mask-image: url("/images/social/instagram-7160c09e1d845479bcf6a418ef7e2208.svg");   -webkit-mask-image: url("/images/social/instagram-7160c09e1d845479bcf6a418ef7e2208.svg"); }
.f-social-icon[data-platform=FACEBOOK]    { mask-image: url("/images/social/facebook-91ab1d87c0e42b9197b3475e1c6eafe0.svg");    -webkit-mask-image: url("/images/social/facebook-91ab1d87c0e42b9197b3475e1c6eafe0.svg"); }
.f-social-icon[data-platform=TWITTER]     { mask-image: url("/images/social/twitter-aeffbb5c494a11154e06591c76d93266.svg");     -webkit-mask-image: url("/images/social/twitter-aeffbb5c494a11154e06591c76d93266.svg"); }
.f-social-icon[data-platform=TIKTOK]      { mask-image: url("/images/social/tiktok-d5e463d0c0bc17a922d88f4b2d97fe44.svg");      -webkit-mask-image: url("/images/social/tiktok-d5e463d0c0bc17a922d88f4b2d97fe44.svg"); }
.f-social-icon[data-platform=YOUTUBE]     { mask-image: url("/images/social/youtube-221e4bb4d862cd5b8a7473c5149c82a5.svg");     -webkit-mask-image: url("/images/social/youtube-221e4bb4d862cd5b8a7473c5149c82a5.svg"); }
.f-social-icon[data-platform=LINKEDIN]    { mask-image: url("/images/social/linkedin-cd3ebf0a669f0237033f2712bba3b848.svg");    -webkit-mask-image: url("/images/social/linkedin-cd3ebf0a669f0237033f2712bba3b848.svg"); }
.f-social-icon[data-platform=PINTEREST]   { mask-image: url("/images/social/pinterest-3f27b925882d928b4c8797d04c67adcd.svg");   -webkit-mask-image: url("/images/social/pinterest-3f27b925882d928b4c8797d04c67adcd.svg"); }
.f-social-icon[data-platform=WHATSAPP]    { mask-image: url("/images/social/whatsapp-f95999c6322bc847c940dc08d83d9a08.svg");    -webkit-mask-image: url("/images/social/whatsapp-f95999c6322bc847c940dc08d83d9a08.svg"); }
.f-social-icon[data-platform=TELEGRAM]    { mask-image: url("/images/social/telegram-114ec4d74ef0b9821a135592d9710cab.svg");    -webkit-mask-image: url("/images/social/telegram-114ec4d74ef0b9821a135592d9710cab.svg"); }
.f-social-icon[data-platform=GOOGLE]      { mask-image: url("/images/social/google-c303a00e0c4a185a06448641299d3e20.svg");      -webkit-mask-image: url("/images/social/google-c303a00e0c4a185a06448641299d3e20.svg"); }
.f-social-icon[data-platform=TRIPADVISOR] { mask-image: url("/images/social/tripadvisor-1dba3d7e58489bc81abece199ceb0b30.svg"); -webkit-mask-image: url("/images/social/tripadvisor-1dba3d7e58489bc81abece199ceb0b30.svg"); }
.f-social-icon[data-platform=YELP]        { mask-image: url("/images/social/yelp-f29ed14fae4813fb6606862b0c9175e7.svg");        -webkit-mask-image: url("/images/social/yelp-f29ed14fae4813fb6606862b0c9175e7.svg"); }
.f-social-icon[data-platform=SPOTIFY]     { mask-image: url("/images/social/spotify-63af9d5fb3c7abcbbb9c7bb2a31b3057.svg");     -webkit-mask-image: url("/images/social/spotify-63af9d5fb3c7abcbbb9c7bb2a31b3057.svg"); }
.f-social-icon[data-platform=GITHUB]      { mask-image: url("/images/social/github-c02c647c766c11b5822fb924a4df4f20.svg");      -webkit-mask-image: url("/images/social/github-c02c647c766c11b5822fb924a4df4f20.svg"); }
.f-social-icon[data-platform=EMAIL]       { mask-image: url("/images/social/email-de0bc573f59af63591a125343eb7af74.svg");       -webkit-mask-image: url("/images/social/email-de0bc573f59af63591a125343eb7af74.svg"); }
.f-social-icon[data-platform=WEBSITE]     { mask-image: url("/images/social/website-0e997aa145034eb28fb1ae70eb19c36c.svg");     -webkit-mask-image: url("/images/social/website-0e997aa145034eb28fb1ae70eb19c36c.svg"); }
.f-social-icon:not([data-platform=INSTAGRAM]):not([data-platform=FACEBOOK]):not([data-platform=TWITTER]):not([data-platform=TIKTOK]):not([data-platform=YOUTUBE]):not([data-platform=LINKEDIN]):not([data-platform=PINTEREST]):not([data-platform=WHATSAPP]):not([data-platform=TELEGRAM]):not([data-platform=GOOGLE]):not([data-platform=TRIPADVISOR]):not([data-platform=YELP]):not([data-platform=SPOTIFY]):not([data-platform=GITHUB]):not([data-platform=EMAIL]):not([data-platform=WEBSITE]) {
    mask-image: url("/images/social/website-0e997aa145034eb28fb1ae70eb19c36c.svg"); -webkit-mask-image: url("/images/social/website-0e997aa145034eb28fb1ae70eb19c36c.svg");
}

/* ─ Responsive collapse for the day-card row ───────────────────────────── */
@media (max-width: 900px) {
    .f-hours-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .f-hours-list > .f-hours-card:nth-child(5) {
        grid-column: 1 / 3;
    }
    .f-hours-list > .f-hours-card:nth-child(6) {
        grid-column: 3 / 5;
    }
    .f-hours-list > .f-hours-card:nth-child(7) {
        grid-column: 2 / 4;
    }
}
@media (max-width: 640px) {
    .f-hours-strip {
        padding: 40px 0 48px;
    }
    .f-hours-inner {
        gap: 36px;
    }
    .f-hours-list,
    .f-hours-list > .f-hours-card:nth-child(5),
    .f-hours-list > .f-hours-card:nth-child(6),
    .f-hours-list > .f-hours-card:nth-child(7) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: auto;
    }
    .f-hours-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 12px 14px;
        gap: 14px;
    }
    .f-hours-day {
        font-size: 11px;
    }
    .f-hours-time {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px 10px;
        text-align: right;
    }
}
@media (max-width: 460px) {
    .f-hours-list,
    .f-hours-list > .f-hours-card:nth-child(5),
    .f-hours-list > .f-hours-card:nth-child(6),
    .f-hours-list > .f-hours-card:nth-child(7) {
        grid-template-columns: 1fr;
        grid-column: auto;
    }
}

/* ── Mobile nav hamburger button base (display toggled per-theme) ── */
.menu-btn {
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: none;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 7px 14px;
    cursor: pointer;
    display: none;
}

/* ── Mobile nav drawer (shared across all folio themes) ─── */
.folio-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}
.folio-nav-drawer.open {
    pointer-events: all;
}
.folio-nav-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.folio-nav-drawer.open .folio-nav-drawer-overlay {
    opacity: 1;
}
.folio-nav-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: min(300px, 85vw);
    background: var(--paper, #fff);
    color: var(--ink, #111);
    padding: 20px 24px 32px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}
.folio-nav-drawer.open .folio-nav-drawer-panel {
    transform: translateX(0);
}
.folio-nav-drawer-close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--ink, #111);
    padding: 4px 8px;
    margin-bottom: 16px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.folio-nav-drawer-close:hover { opacity: 1; }
.folio-nav-drawer-links {
    display: flex;
    flex-direction: column;
}
.folio-nav-drawer-links a {
    font-size: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.1));
    color: var(--ink, #111);
    text-decoration: none;
    transition: color 0.15s;
}
.folio-nav-drawer-links a:last-child { border-bottom: none; }
.folio-nav-drawer-links a:hover { color: var(--ember, #c0532e); }

/* ── Standalone folio form pages (reservation, login, register etc.) ─────── */
.folio-form-shell {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 24px 80px;
}
.folio-form-card {
    width: 100%;
    max-width: 580px;
    background: var(--folio-modal-paper);
    border: 1px solid var(--folio-modal-rule-strong);
    padding: 48px 44px;
}
.folio-form-head {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--folio-modal-rule);
}
.folio-form-head .kicker {
    font-family: var(--folio-modal-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--folio-modal-ink-soft);
    margin-bottom: 8px;
}
.folio-form-head .display {
    font-family: var(--folio-modal-display, var(--folio-modal-read));
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 10px;
    color: var(--folio-modal-ink);
}
.folio-form-head .lede {
    font-family: var(--folio-modal-read);
    font-size: 15px;
    color: var(--folio-modal-ink-soft);
    font-style: italic;
    margin: 0;
}
.folio-form-body {
    display: grid;
    gap: 18px;
}
.folio-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.folio-field > label,
.folio-field > span {
    font-family: var(--folio-modal-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--folio-modal-ink-soft);
}
.folio-field .folio-field-optional {
    font-family: var(--folio-modal-read);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    font-style: italic;
}
.folio-field input,
.folio-field textarea,
.folio-field select {
    padding: 12px 14px;
    background: transparent;
    border: 1px solid var(--folio-modal-rule-strong);
    border-radius: 3px;
    font-size: 15px;
    font-family: var(--folio-modal-read);
    color: var(--folio-modal-ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    color-scheme: light;
}
.folio-field input:focus,
.folio-field textarea:focus,
.folio-field select:focus {
    outline: none;
    border-color: var(--folio-modal-ember);
    box-shadow: 0 0 0 3px rgba(192, 83, 46, 0.15);
}
.folio-field textarea { resize: vertical; min-height: 88px; }
.folio-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.folio-field-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}
.folio-alert {
    padding: 14px 18px;
    font-family: var(--folio-modal-read);
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid;
    line-height: 1.5;
}
.folio-alert-info {
    background: var(--folio-modal-paper-2);
    border-color: var(--folio-modal-rule);
    color: var(--folio-modal-ink-soft);
}
.folio-alert-error {
    background: #fdf2f0;
    border-color: #e8b4ac;
    color: #b73c2c;
}
.folio-alert-success {
    background: #f0faf4;
    border-color: #9ecfb2;
    color: #276044;
}
.folio-hours-hint {
    font-family: var(--folio-modal-read);
    font-size: 13px;
    color: var(--folio-modal-ink-soft);
    font-style: italic;
    padding: 4px 0;
    min-height: 1.4em;
}
.folio-login-prompt {
    padding: 18px 20px;
    background: var(--folio-modal-paper-2);
    border: 1px solid var(--folio-modal-rule);
    border-radius: 3px;
    font-family: var(--folio-modal-read);
    font-size: 14px;
    color: var(--folio-modal-ink-soft);
}
.folio-login-prompt a {
    color: var(--folio-modal-ember);
    text-decoration: none;
}
.folio-login-prompt a:hover { text-decoration: underline; }
.folio-submit { margin-top: 6px; }
.folio-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-family: var(--folio-modal-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--folio-modal-ink-soft);
    text-decoration: none;
    transition: color 0.2s;
}
.folio-back:hover { color: var(--folio-modal-ember); }
/* Captcha inside a folio-field uses the shared contact-captcha-* classes */
.folio-field .contact-captcha-row { margin-bottom: 2px; }
@media (max-width: 640px) {
    .folio-form-shell { padding: 40px 16px 60px; }
    .folio-form-card { padding: 32px 22px; }
    .folio-field-row,
    .folio-field-row-3 { grid-template-columns: 1fr; }
}

/* ── Schedule badge on product card frame ──────────────────────────────── */
.folio-sched-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    height: 40px;
    border-radius: 999px;
    background: var(--paper, #fff);
    color: var(--ink, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    padding: 0 14px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
    transition: background 0.25s, color 0.25s;
}

/* ── Schedule line inside product sheet ────────────────────────────────── */
.folio-sheet-schedule {
    font-family: var(--folio-modal-mono, 'DM Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--folio-modal-ember, #c0532e);
    padding: 6px 10px;
    margin-bottom: 8px;
    border-left: 2px solid var(--folio-modal-ember, #c0532e);
    background: rgba(192, 83, 46, 0.06);
}