:root{--ink:#173747;--ink2:#254a58;--sand:#f7f1e7;--paper:#fffdf9;--gold:#bd9760;--coral:#c9654d;--line:#ddd3c3;--muted:#6c7777;--green:#246f59;--shadow:0 16px 48px rgba(17,44,52,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sand);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.1;margin:0 0 .65rem;letter-spacing:-.025em}h1{font-size:clamp(2.4rem,5vw,5.5rem)}h2{font-size:clamp(1.9rem,3.2vw,3.3rem)}h3{font-size:1.45rem}p{margin:.1rem 0 1rem}a{color:inherit;text-decoration:none}.topbar{height:79px;background:rgba(23,55,71,.98);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.1rem,5vw,6rem);position:relative;z-index:8}.brand{height:60px;display:flex;align-items:center;gap:.7rem;text-transform:uppercase;font-family:Georgia,serif;letter-spacing:.16em;font-size:.82rem}.brand img{width:51px;height:51px;object-fit:contain;filter:brightness(0) invert(1)}.brand small{font:600 .56rem/1.5 Inter,sans-serif;letter-spacing:.17em;opacity:.75}.topbar nav{display:flex;align-items:center;gap:1.15rem;font-size:.84rem;font-weight:600}.topbar nav>a{opacity:.92}.topbar nav>a:hover{color:#f7d6a2}.language-select{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;padding:.45rem .55rem;border-radius:3px;max-width:115px}.language-select option{color:#173747}.button,button{display:inline-flex;justify-content:center;align-items:center;border:0;background:var(--coral);color:#fff;padding:.86rem 1.25rem;font:700 .82rem Inter,sans-serif;letter-spacing:.04em;border-radius:2px;cursor:pointer;transition:.2s}.button:hover,button:hover{background:#ad513e;transform:translateY(-1px)}.button.small{padding:.58rem .9rem;font-size:.73rem}.text-link{font-size:.84rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:.16rem}.hero{height:min(780px,calc(100vh - 79px));min-height:600px;position:relative;overflow:hidden;background:#173747}.hero-photo,.hero-overlay{position:absolute;inset:0}.hero-photo{background-image:url('gallery/yuzubig.webp');background-position:center;background-size:cover;transition:opacity 1s ease}.hero-overlay{background:linear-gradient(90deg,rgba(9,29,38,.81) 0%,rgba(9,29,38,.55) 40%,rgba(9,29,38,.04) 78%),linear-gradient(0deg,rgba(9,29,38,.32),transparent 45%)}.hero-content{position:relative;z-index:2;color:#fff;width:min(720px,78%);padding:clamp(4rem,10vw,9rem) clamp(1.5rem,9vw,10rem)}.eyebrow{font:800 .69rem Inter,sans-serif;letter-spacing:.2em;margin:0 0 1.1rem;color:#f7d6a2}.eyebrow.dark{color:var(--gold)}.hero h1{font-weight:400}.hero-copy{font-size:clamp(1rem,1.55vw,1.2rem);line-height:1.65;max-width:560px;color:#edf0ea}.hero-actions{display:flex;gap:1.25rem;align-items:center;margin-top:2rem}.hero-counter{position:absolute;right:clamp(1.5rem,8vw,8rem);bottom:2rem;z-index:2;color:#fff;font:1rem Georgia,serif;letter-spacing:.15em}.gallery-count{font-size:2.6rem}.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,8vw,8rem);max-width:1220px;margin:0 auto;padding:clamp(4rem,10vw,9rem) clamp(1.5rem,5vw,3rem)}.intro-grid p:last-child{font-size:1.12rem;color:#546261;align-self:end}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);max-width:1220px;margin:0 auto clamp(4rem,8vw,8rem);border:1px solid var(--line)}.feature-grid article{background:var(--paper);padding:2.2rem}.feature-grid span{display:block;font:1.2rem Georgia,serif;color:var(--gold);margin-bottom:3.5rem}.feature-grid p{color:#60706e;font-size:.93rem}footer{background:#173747;color:#dce5e1;display:flex;justify-content:space-between;padding:1.4rem clamp(1.5rem,6vw,7rem);font-size:.73rem;letter-spacing:.08em}.flash{padding:.95rem 1.3rem;text-align:center;font-weight:600}.flash.success{background:#dcefe7;color:#174e40}.flash.error{background:#f8ded8;color:#7a241c}.auth-shell{min-height:calc(100vh - 143px);display:grid;place-items:center;padding:3rem 1.5rem;background:linear-gradient(135deg,rgba(23,55,71,.06),rgba(189,151,96,.12))}.auth-card{background:var(--paper);width:min(100%,510px);padding:clamp(2rem,6vw,4.3rem);box-shadow:var(--shadow);border-top:4px solid var(--gold)}.auth-card h1{font-size:2.55rem}.auth-card>p:not(.eyebrow):not(.form-foot){color:#5d6b6b}.form-stack{display:grid;gap:1.05rem;margin-top:1.7rem}.form-stack label,.recipe-form label{display:grid;gap:.35rem;color:#394a4e;font-size:.82rem;font-weight:700}input,textarea,select{width:100%;border:1px solid #cdd4d0;border-radius:2px;background:#fff;padding:.73rem .78rem;color:#173747;font:inherit}textarea{resize:vertical}.optional{font-weight:400;color:#76817e}.form-foot{font-size:.86rem;color:#627170;margin-top:1.4rem}.form-foot a{color:var(--coral);font-weight:700}.portal-main,.recipe-page{width:min(1440px,100%);margin:0 auto;padding:clamp(2.5rem,5vw,5rem) clamp(1rem,4vw,4.5rem)}.portal-heading{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:2.5rem}.portal-heading h1{font-size:clamp(2.8rem,5vw,4.4rem)}.portal-heading p{color:#5a6867}.recipe-filter{display:grid;grid-template-columns:1fr 220px auto;gap:.8rem;background:#ece8de;padding:1rem;margin-bottom:2rem}.recipe-filter button{padding-inline:1.4rem}.recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem}.recipe-card{background:var(--paper);box-shadow:0 5px 20px rgba(17,44,52,.08);overflow:hidden;transition:.25s}.recipe-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.recipe-card img{display:block;width:100%;height:220px;object-fit:cover}.recipe-card-content{padding:1.2rem 1.25rem 1.35rem}.recipe-meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}.recipe-card h2{font-size:1.65rem;margin-top:.65rem;margin-bottom:.35rem}.recipe-card p{font-size:.8rem;color:#6b7877;margin:0}.recipe-card .yield{margin-top:.65rem;color:var(--ink);font-weight:700}.status{display:inline-block;font:800 .64rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:.38rem .53rem;background:#dce5e1;color:#315e56}.status.concept{background:#f6e8c5;color:#82621b}.status.approved{background:#dcefe7;color:#226149}.status.pending{background:#f6e8c5;color:#82621b}.status.rejected{background:#f6ded8;color:#8c3128}.status.activated{background:#dfe9ef;color:#235772}.empty{padding:2rem;background:#fff}.back-link{font-size:.85rem;font-weight:800;color:var(--coral);display:inline-block;margin-bottom:1.7rem}.recipe-hero{display:grid;grid-template-columns:42% 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;background:var(--paper);margin-bottom:1.5rem}.recipe-hero img{width:100%;height:360px;object-fit:cover}.recipe-hero>div{padding:2rem 2rem 2rem 0}.recipe-hero h1{font-size:clamp(2.4rem,4vw,4rem)}.info-pills{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.2rem}.info-pills>span{font-size:.72rem;font-weight:700;background:#e7ece9;padding:.45rem .6rem}.scale-bar{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.5rem;margin-bottom:1.5rem}.scale-bar form{display:flex;align-items:end;gap:.6rem}.scale-bar label{font-size:.72rem;font-weight:700;display:grid;gap:.2rem}.scale-bar input{max-width:140px;padding:.5rem}.scale-bar button{padding:.62rem .9rem}.scale-bar small{display:block;color:#b8c8c5}.recipe-columns{display:grid;grid-template-columns:1.4fr .9fr;gap:1.5rem}.ingredients-panel,.recipe-side section{background:var(--paper);padding:1.7rem}.ingredients-panel h2,.recipe-side h2{font-size:1.7rem}.ingredients-panel h3{font-size:1.08rem;margin:1.7rem 0 .55rem;padding-top:1.2rem;border-top:1px solid var(--line)}.ingredients-panel h2+.subtle{margin-top:-.5rem}.subtle{color:#687676;font-size:.8rem}table{border-collapse:collapse;width:100%;font-size:.86rem}th{text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#687676;border-bottom:1px solid var(--line);padding:.55rem}td{padding:.7rem .55rem;border-bottom:1px solid #eee8dd;vertical-align:top}td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}.component-note,.method-text{font-size:.9rem;color:#495858}.recipe-side{display:grid;align-content:start;gap:1.5rem}.recipe-side section{border-left:3px solid var(--gold)}.recipe-side p{font-size:.9rem;color:#4e5e5d}.admin-section,.activation-notice{background:var(--paper);padding:1.5rem;margin-bottom:1.5rem}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.section-title h2{font-size:1.7rem;margin:0}.section-title span{font-size:.75rem;font-weight:700;background:#e7ece9;padding:.3rem .5rem}.table-wrap{overflow-x:auto}.table-wrap table{min-width:700px}.table-wrap small{display:block;color:#6a7977;font-size:.75rem}.table-actions{display:flex;gap:.3rem;justify-content:flex-end}.compact{font-size:.7rem;padding:.42rem .55rem}.danger{background:#a64437}.role-form select{padding:.38rem;font-size:.8rem}.activation-notice{border:1px solid var(--gold);background:#fff8e8}.activation-notice h2{font-size:1.3rem}.activation-notice input{font-size:.76rem}.new-recipe{background:#f0eee6;border:1px solid #e1dccf;padding:1rem;margin-bottom:1rem}.new-recipe summary{cursor:pointer;font-weight:800}.recipe-form{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}.recipe-form .wide{grid-column:span 3}.recipe-form button{justify-self:start}.install-card{width:min(100%,600px)}code{background:#eee9de;padding:.12rem .25rem}@media(max-width:850px){.topbar{height:auto;min-height:68px;padding:.5rem 1rem}.topbar nav{gap:.7rem}.topbar nav>a:not(.button){display:none}.brand{height:54px}.hero{height:660px;min-height:0}.hero-content{width:100%;padding:6rem 1.6rem}.intro-grid,.recipe-columns{grid-template-columns:1fr}.feature-grid,.recipe-grid{grid-template-columns:1fr 1fr}.recipe-filter{grid-template-columns:1fr 1fr}.recipe-filter button{grid-column:span 2}.recipe-hero{grid-template-columns:1fr}.recipe-hero img{height:290px}.recipe-hero>div{padding:0 1.5rem 1.7rem}.recipe-form{grid-template-columns:1fr 1fr}.recipe-form .wide{grid-column:span 2}}@media(max-width:520px){body{font-size:15px}.topbar nav{gap:.45rem}.language-select{max-width:94px;font-size:.7rem}.brand span{display:none}.feature-grid,.recipe-grid{grid-template-columns:1fr}.hero{height:610px}.hero h1{font-size:2.85rem}.hero-actions{flex-wrap:wrap}.intro-grid{padding-top:3.5rem}.portal-heading{align-items:start;flex-direction:column}.recipe-filter{grid-template-columns:1fr}.recipe-filter button{grid-column:auto}.scale-bar{align-items:stretch;flex-direction:column}.scale-bar form{align-items:stretch;flex-wrap:wrap}.scale-bar form>span{display:none}.scale-bar input{max-width:none}.recipe-form{grid-template-columns:1fr}.recipe-form .wide{grid-column:auto}footer{gap:.7rem;flex-direction:column}.table-wrap{margin:0 -1.5rem}.table-wrap table{margin:0 1.5rem;width:calc(100% - 3rem)}}
/* Grotere invoervelden voor deelrecepten en werkwijze */

.form-stack input,
.form-stack select,
.form-stack textarea {
    min-height: 44px;
    font-size: 16px;
}

.form-stack textarea {
    min-height: 110px;
    resize: vertical;
}

.step-row input[name*="action"],
.step-row textarea[name*="action"] {
    min-width: 320px;
}

.step-row input[name*="critical"],
.step-row textarea[name*="critical"] {
    min-width: 260px;
}

.step-row input,
.step-row select {
    padding: 10px 12px;
}

@media (min-width: 1000px) {
    .step-row {
        display: grid;
        grid-template-columns:
            50px
            minmax(320px, 2.2fr)
            minmax(110px, 0.7fr)
            minmax(120px, 0.8fr)
            minmax(150px, 1fr)
            minmax(260px, 1.6fr)
            32px;
        gap: 10px;
        align-items: start;
    }
}
/* Grotere velden in het deelrecept-formulier */

.recipe-form input,
.recipe-form select,
.recipe-form textarea {
    min-height: 44px;
    font-size: 16px;
}

.recipe-form textarea {
    min-height: 110px;
    resize: vertical;
}

/* Werkwijze: extra ruimte voor tekstvelden */
.recipe-form input[type="text"] {
    min-width: 120px;
}
/* =========================================
   PYRMONT PASTRY - BREDERE WERKOMGEVING
   ========================================= */

/* Gebruik veel meer van het beeldscherm */
.portal-main,
.recipe-page {
    width: min(1850px, 98vw);
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

/* Formulieren over volle beschikbare breedte */
.recipe-form {
    width: 100%;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Algemene invoervelden */
.recipe-form input,
.recipe-form select,
.recipe-form textarea {
    min-height: 46px;
    font-size: 16px;
    padding: 10px 12px;
}

/* Tekstvakken duidelijk groter */
.recipe-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Werkwijze-regels veel breder */
.step-row {
    width: 100%;
    display: grid !important;
    grid-template-columns:
        52px
        minmax(520px, 4fr)
        minmax(100px, .8fr)
        minmax(120px, .9fr)
        minmax(160px, 1.2fr)
        minmax(360px, 2.5fr)
        32px;
    gap: 12px;
    align-items: start;
}

/* Handeling */
.step-row input[name*="action"],
.step-row textarea[name*="action"] {
    width: 100%;
    min-width: 0;
}

/* Kritisch punt / resultaat */
.step-row input[name*="critical"],
.step-row textarea[name*="critical"] {
    width: 100%;
    min-width: 0;
}

/* Kleinere velden mogen compact blijven */
.step-row input,
.step-row select,
.step-row textarea {
    min-height: 46px;
}

/* Zorg dat formulierblokken niet onnodig smal blijven */
.panel,
.admin-section,
.new-recipe,
.recipe-form {
    max-width: none;
}

/* Grote schermen: optimaal gebruik van ruimte */
@media (min-width: 1500px) {
    .portal-main,
    .recipe-page {
        width: 96vw;
        max-width: 1900px;
    }
}

/* =========================================================
   PYRMONT PASTRY — BRAND REFINEMENT
   Quiet header, discreet management access, no decorative numbering.
   ========================================================= */

.topbar {
    min-height: 82px;
    border-bottom: 1px solid rgba(189, 151, 96, .34);
}

.brand {
    gap: .8rem;
    font-size: .82rem;
    letter-spacing: .19em;
}

.brand img {
    width: 46px;
    height: 46px;
    filter: none;
}

.brand small {
    color: #d7bd88;
    font-size: .55rem;
    letter-spacing: .2em;
    opacity: 1;
}

.topbar nav {
    gap: 1rem;
}

.topbar nav > a {
    padding: .42rem 0;
}

.topbar nav > .admin-link {
    border-left: 1px solid rgba(255, 255, 255, .22);
    color: #d7bd88;
    font-size: .74rem;
    letter-spacing: .08em;
    margin-left: .2rem;
    padding-left: 1rem;
    text-transform: uppercase;
}

.topbar nav > .admin-link:hover {
    color: #fff4df;
}

.feature-grid {
    border: 0;
    gap: clamp(1rem, 3vw, 2.6rem);
    background: transparent;
}

.feature-grid article {
    border-top: 1px solid var(--gold);
    padding: 1.5rem 0 0;
}

.feature-grid span {
    display: none;
}

.feature-grid h3 {
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    font-weight: 400;
    margin-bottom: .65rem;
}

.feature-grid p {
    max-width: 31ch;
}

@media (max-width: 850px) {
    .topbar nav > .admin-link {
        display: inline-block;
        margin-left: 0;
        padding-left: .7rem;
    }
}

@media (max-width: 520px) {
    .brand img {
        height: 41px;
        width: 41px;
    }

    .topbar nav > .admin-link {
        font-size: .66rem;
    }
}


/* =========================================================
   PYRMONT PASTRY SYSTEM — RESORT DESIGN SYSTEM v1
   Visuele richting gebaseerd op The Pyrmont Curaçao:
   restored heritage, contemporary ease, material warmth.
   Alleen schermweergave; print blijft onaangetast.
   ========================================================= */

@media screen {

    :root {
        --pyrmont-ink: #123743;
        --pyrmont-ink-deep: #0b2b35;
        --pyrmont-sea: #345d63;
        --pyrmont-sand: #f3ede3;
        --pyrmont-limestone: #fbf8f2;
        --pyrmont-paper: #fffdf8;
        --pyrmont-gold: #b99763;
        --pyrmont-gold-soft: #d9c39d;
        --pyrmont-coral: #c8644c;
        --pyrmont-coral-dark: #a84d3a;
        --pyrmont-sage: #788c7b;
        --pyrmont-line: #d8cdbd;
        --pyrmont-muted: #667675;
        --pyrmont-success: #315f50;
        --pyrmont-danger: #9b4638;
        --pyrmont-shadow-soft: 0 12px 34px rgba(18, 55, 67, .07);
        --pyrmont-shadow-hover: 0 20px 44px rgba(18, 55, 67, .12);
    }

    body.portal-body {
        background:
            radial-gradient(circle at 85% 0%, rgba(185,151,99,.09), transparent 30rem),
            linear-gradient(180deg, #f7f2e9 0%, var(--pyrmont-sand) 100%);
        color: var(--pyrmont-ink);
    }

    .topbar {
        min-height: 88px;
        height: auto;
        padding:
            0 clamp(1.25rem, 4vw, 5rem);
        background:
            linear-gradient(
                90deg,
                var(--pyrmont-ink-deep) 0%,
                #123b46 55%,
                #173f48 100%
            );
        border-bottom:
            1px solid rgba(217,195,157,.35);
        box-shadow:
            0 8px 24px rgba(11,43,53,.12);
    }

    .brand {
        gap: .95rem;
        min-height: 72px;
        letter-spacing: .18em;
    }

    .brand img {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }

    .brand span {
        font-family:
            Georgia,
            "Times New Roman",
            serif;
        font-size: .86rem;
        line-height: 1.35;
        letter-spacing: .18em;
    }

    .brand small {
        display: inline-block;
        margin-top: .18rem;
        color: var(--pyrmont-gold-soft);
        font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            sans-serif;
        font-size: .54rem;
        font-weight: 600;
        letter-spacing: .23em;
        text-transform: uppercase;
    }

    .topbar nav {
        gap:
            clamp(.65rem, 1.5vw, 1.25rem);
    }

    .topbar nav > a {
        position: relative;
        padding: .7rem .1rem;
        color: rgba(255,255,255,.9);
        font-size: .76rem;
        font-weight: 650;
        letter-spacing: .075em;
        text-transform: uppercase;
    }

    .topbar nav > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: .45rem;
        height: 1px;
        background: var(--pyrmont-gold-soft);
        transition: right .2s ease;
    }

    .topbar nav > a:hover {
        color: #fff;
    }

    .topbar nav > a:hover::after {
        right: 0;
    }

    .topbar button.small,
    .topbar .button.small {
        border:
            1px solid rgba(255,255,255,.25);
        background:
            transparent;
        color: white;
    }

    .topbar button.small:hover,
    .topbar .button.small:hover {
        border-color:
            rgba(217,195,157,.8);
        background:
            rgba(255,255,255,.08);
    }

    .portal-main {
        width:
            min(1660px, calc(100vw - 48px));
        max-width: none;
        margin: 0 auto;
        padding:
            clamp(2rem, 4vw, 4.5rem)
            0
            clamp(4rem, 7vw, 7rem);
    }

    .portal-heading {
        position: relative;
        align-items: flex-end;
        gap: 2rem;
        margin-bottom:
            clamp(1.75rem, 3vw, 3rem);
        padding-bottom:
            clamp(1.25rem, 2.5vw, 2rem);
        border-bottom:
            1px solid var(--pyrmont-gold-soft);
    }

    .portal-heading::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 88px;
        height: 2px;
        background:
            var(--pyrmont-ink);
    }

    .portal-heading h1 {
        max-width: 18ch;
        margin-bottom: .55rem;
        color: var(--pyrmont-ink-deep);
        font-size:
            clamp(2.6rem, 5vw, 5.7rem);
        font-weight: 400;
        letter-spacing: -.035em;
        line-height: .98;
    }

    .portal-heading p:not(.eyebrow) {
        max-width: 70ch;
        color: var(--pyrmont-muted);
        line-height: 1.72;
    }

    .eyebrow,
    .eyebrow.dark {
        margin-bottom: .8rem;
        color: var(--pyrmont-gold);
        font-size: .65rem;
        font-weight: 750;
        letter-spacing: .24em;
        text-transform: uppercase;
    }

    .panel,
    .admin-section,
    .activation-notice,
    .new-recipe {
        background:
            rgba(255,253,248,.92);
        border:
            1px solid var(--pyrmont-line);
        border-radius: 2px;
        box-shadow:
            var(--pyrmont-shadow-soft);
    }

    .panel {
        position: relative;
        margin:
            clamp(1.15rem, 2vw, 1.75rem)
            0;
        padding:
            clamp(1.35rem, 2.4vw, 2.25rem);
    }

    .panel::before {
        content: "";
        position: absolute;
        top: -1px;
        left: clamp(1.35rem, 2.4vw, 2.25rem);
        width: 52px;
        height: 2px;
        background:
            var(--pyrmont-gold);
        opacity: .75;
    }

    .panel h2 {
        margin-bottom: 1.15rem;
        color: var(--pyrmont-ink-deep);
        font-size:
            clamp(1.55rem, 2.2vw, 2.35rem);
        font-weight: 400;
        letter-spacing: -.025em;
    }

    .panel h3 {
        color: var(--pyrmont-ink);
        font-weight: 400;
    }

    .panel p,
    .panel li {
        line-height: 1.7;
    }

    .button,
    button {
        min-height: 42px;
        border:
            1px solid transparent;
        border-radius: 1px;
        background:
            var(--pyrmont-coral);
        box-shadow: none;
        color: #fff;
        font-size: .73rem;
        font-weight: 700;
        letter-spacing: .065em;
        text-transform: uppercase;
        transition:
            background .18s ease,
            border-color .18s ease,
            color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

    .button:hover,
    button:hover {
        background:
            var(--pyrmont-coral-dark);
        box-shadow:
            0 8px 20px rgba(168,77,58,.16);
        transform:
            translateY(-1px);
    }

    .button.small,
    button.small {
        min-height: 36px;
        padding:
            .58rem .82rem;
        font-size: .67rem;
    }

    .portal-heading .button {
        background:
            transparent;
        border-color:
            var(--pyrmont-ink);
        color:
            var(--pyrmont-ink);
    }

    .portal-heading .button:hover {
        background:
            var(--pyrmont-ink);
        border-color:
            var(--pyrmont-ink);
        color:
            white;
    }

    .danger,
    .remove-row {
        background:
            transparent !important;
        border:
            1px solid rgba(155,70,56,.55) !important;
        color:
            var(--pyrmont-danger) !important;
    }

    .danger:hover,
    .remove-row:hover {
        background:
            var(--pyrmont-danger) !important;
        color:
            white !important;
    }

    input,
    select,
    textarea {
        border:
            1px solid #cfc4b5;
        border-radius: 1px;
        background:
            rgba(255,255,255,.82);
        color:
            var(--pyrmont-ink);
        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            background .18s ease;
    }

    input:hover,
    select:hover,
    textarea:hover {
        border-color:
            #b9a98f;
    }

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color:
            var(--pyrmont-gold);
        background:
            white;
        box-shadow:
            0 0 0 3px rgba(185,151,99,.13);
    }

    label {
        color:
            #40575b;
        font-size: .78rem;
        font-weight: 650;
        letter-spacing: .035em;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        background:
            transparent;
    }

    thead th {
        padding:
            .8rem .7rem;
        border-top:
            1px solid var(--pyrmont-line);
        border-bottom:
            1px solid var(--pyrmont-line);
        color:
            var(--pyrmont-muted);
        font-size: .62rem;
        font-weight: 750;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    tbody td {
        padding:
            .82rem .7rem;
        border-bottom:
            1px solid rgba(216,205,189,.65);
    }

    tbody tr {
        transition:
            background .15s ease;
    }

    tbody tr:hover {
        background:
            rgba(185,151,99,.055);
    }

    .recipe-grid {
        gap:
            clamp(1rem, 2vw, 1.6rem);
    }

    .recipe-card {
        overflow: hidden;
        border:
            1px solid var(--pyrmont-line);
        border-radius: 2px;
        background:
            var(--pyrmont-paper);
        box-shadow:
            0 8px 24px rgba(18,55,67,.055);
        transition:
            transform .22s ease,
            box-shadow .22s ease,
            border-color .22s ease;
    }

    .recipe-card:hover {
        border-color:
            #c5b38f;
        box-shadow:
            var(--pyrmont-shadow-hover);
        transform:
            translateY(-3px);
    }

    .recipe-card-content {
        padding:
            clamp(1.15rem, 2vw, 1.65rem) !important;
    }

    .recipe-card h2 {
        margin-bottom: .7rem;
        color:
            var(--pyrmont-ink-deep);
        font-size:
            clamp(1.35rem, 1.8vw, 1.8rem);
        font-weight: 400;
    }

    .recipe-meta {
        margin-bottom: .7rem;
        color:
            var(--pyrmont-muted);
        font-size: .66rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .status,
    [class*="status"] {
        border-radius: 999px;
    }

    .status.goedgekeurd,
    .status.approved {
        background:
            rgba(49,95,80,.1);
        color:
            var(--pyrmont-success);
    }

    .status.concept {
        background:
            rgba(185,151,99,.14);
        color:
            #755b2e;
    }

    .status.testfase {
        background:
            rgba(52,93,99,.12);
        color:
            var(--pyrmont-sea);
    }

    .status.gearchiveerd {
        background:
            rgba(102,118,117,.12);
        color:
            var(--pyrmont-muted);
    }

    .recipe-filter {
        gap: .75rem;
        margin-bottom:
            clamp(1.5rem, 3vw, 2.5rem);
        padding:
            1rem;
        border:
            1px solid var(--pyrmont-line);
        background:
            rgba(255,253,248,.64);
    }

    .recipe-filter input {
        background:
            rgba(255,255,255,.78);
    }

    .flash {
        border-radius: 1px;
        box-shadow: none;
    }

    .flash.success {
        background:
            #edf4ef;
        border-color:
            #b7cbbd;
        color:
            #254f43;
    }

    .flash.error {
        background:
            #fbefeb;
        border-color:
            #dab1a8;
        color:
            #7c352d;
    }

    footer {
        border-top:
            1px solid rgba(185,151,99,.35);
        background:
            var(--pyrmont-ink-deep);
        color:
            rgba(255,255,255,.72);
    }

    /* Contextuele adminbalk uit app.php */
    .topbar + div[style*="background:#f3eee5"] {
        gap: .55rem !important;
        padding:
            .65rem clamp(1.25rem, 4vw, 5rem) !important;
        background:
            #f0e8dc !important;
        border-bottom:
            1px solid #d5c7b4 !important;
    }

    .topbar + div[style*="background:#f3eee5"] .button {
        min-height: 34px;
        border-color:
            rgba(18,55,67,.3);
        background:
            transparent;
        color:
            var(--pyrmont-ink);
    }

    .topbar + div[style*="background:#f3eee5"] .button:hover {
        border-color:
            var(--pyrmont-ink);
        background:
            var(--pyrmont-ink);
        color:
            white;
    }

    @media (max-width: 850px) {

        .topbar {
            min-height: 72px;
        }

        .portal-main {
            width:
                min(100% - 24px, 1660px);
        }

        .portal-heading {
            align-items: flex-start;
        }
    }

    @media (max-width: 520px) {

        .portal-main {
            width:
                min(100% - 18px, 1660px);
        }

        .panel {
            padding:
                1.1rem;
        }

        .panel::before {
            left: 1.1rem;
        }

        .portal-heading h1 {
            font-size:
                clamp(2.25rem, 13vw, 3.65rem);
        }

        .button,
        button {
            min-height: 40px;
        }
    }
}


/* =========================================================
   PYRMONT PASTRY SYSTEM — RESORT DESIGN SYSTEM v2
   Strong visual refinement for production portal.
   ========================================================= */

@media screen {

    :root {
        --pyrmont-heritage: #0d3440;
        --pyrmont-heritage-2: #153f49;
        --pyrmont-ocean: #476c71;
        --pyrmont-stone: #eee7dd;
        --pyrmont-shell: #f7f3ec;
        --pyrmont-ivory: #fffdf8;
        --pyrmont-bronze: #b08c59;
        --pyrmont-bronze-soft: #d8c5a6;
        --pyrmont-text: #18353d;
        --pyrmont-muted-2: #667572;
        --pyrmont-danger-2: #984839;
    }

    html {
        background: var(--pyrmont-shell);
    }

    body.portal-body {
        background:
            linear-gradient(
                180deg,
                #f9f6f0 0,
                #f2ece2 520px,
                #f5f1e9 100%
            ) !important;
        color: var(--pyrmont-text) !important;
    }

    /* -----------------------------------------------------
       HEADER — quieter, more resort-like, more architectural
       ----------------------------------------------------- */

    body.portal-body .topbar {
        min-height: 96px !important;
        padding: 0 clamp(1.5rem, 5vw, 6rem) !important;
        background: var(--pyrmont-heritage) !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(216,197,166,.45) !important;
        box-shadow: none !important;
    }

    body.portal-body .brand {
        min-height: 78px !important;
        gap: 1rem !important;
    }

    body.portal-body .brand img {
        width: 56px !important;
        height: 56px !important;
        filter: none !important;
    }

    body.portal-body .brand span {
        color: #fffaf1 !important;
        font-size: .88rem !important;
        letter-spacing: .20em !important;
    }

    body.portal-body .brand small {
        color: #d9c8aa !important;
        opacity: 1 !important;
        letter-spacing: .24em !important;
    }

    body.portal-body .topbar nav {
        gap: clamp(.8rem, 1.8vw, 1.65rem) !important;
    }

    body.portal-body .topbar nav > a {
        color: rgba(255,255,255,.88) !important;
        font-size: .71rem !important;
        font-weight: 600 !important;
        letter-spacing: .10em !important;
        text-transform: uppercase !important;
    }

    body.portal-body .topbar nav > a:hover {
        color: #eadbc1 !important;
    }

    /* -----------------------------------------------------
       ADMIN ACTION STRIP — intentionally distinct from content
       ----------------------------------------------------- */

    body.portal-body .topbar + div[style*="background:#f3eee5"] {
        min-height: 54px !important;
        padding: .65rem clamp(1.5rem, 5vw, 6rem) !important;
        background: #e9dfd1 !important;
        border-bottom: 1px solid #cdbda7 !important;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.55) !important;
    }

    body.portal-body .topbar + div[style*="background:#f3eee5"] .button {
        min-height: 34px !important;
        padding: .55rem .86rem !important;
        border: 1px solid rgba(13,52,64,.34) !important;
        background: rgba(255,255,255,.42) !important;
        color: var(--pyrmont-heritage) !important;
        font-size: .64rem !important;
        letter-spacing: .09em !important;
        box-shadow: none !important;
    }

    body.portal-body .topbar + div[style*="background:#f3eee5"] .button:hover {
        border-color: var(--pyrmont-heritage) !important;
        background: var(--pyrmont-heritage) !important;
        color: #fff !important;
    }

    /* -----------------------------------------------------
       PAGE FRAME
       ----------------------------------------------------- */

    body.portal-body .portal-main {
        width: min(1500px, calc(100vw - 64px)) !important;
        margin: 0 auto !important;
        padding: clamp(2.7rem, 5vw, 5.4rem) 0 7rem !important;
    }

    body.portal-body .portal-heading {
        min-height: 170px !important;
        margin: 0 0 2.2rem !important;
        padding: 0 0 2rem !important;
        align-items: flex-end !important;
        border-bottom: 1px solid #cdbda7 !important;
    }

    body.portal-body .portal-heading::after {
        width: 118px !important;
        height: 3px !important;
        background: var(--pyrmont-bronze) !important;
    }

    body.portal-body .portal-heading .eyebrow,
    body.portal-body .portal-heading .eyebrow.dark {
        margin-bottom: 1.05rem !important;
        color: #8c7048 !important;
        font-size: .63rem !important;
        letter-spacing: .28em !important;
    }

    body.portal-body .portal-heading h1 {
        max-width: 20ch !important;
        margin: 0 0 .7rem !important;
        color: var(--pyrmont-heritage) !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: clamp(3.1rem, 5.8vw, 6.7rem) !important;
        font-weight: 400 !important;
        line-height: .93 !important;
        letter-spacing: -.045em !important;
    }

    body.portal-body .portal-heading p:not(.eyebrow) {
        max-width: 72ch !important;
        margin-bottom: 0 !important;
        color: #61706d !important;
        font-size: .95rem !important;
        line-height: 1.75 !important;
    }

    body.portal-body .portal-heading > a.button,
    body.portal-body .portal-heading > div .button {
        min-height: 39px !important;
        border: 1px solid var(--pyrmont-heritage) !important;
        background: transparent !important;
        color: var(--pyrmont-heritage) !important;
        box-shadow: none !important;
    }

    body.portal-body .portal-heading > a.button:hover,
    body.portal-body .portal-heading > div .button:hover {
        background: var(--pyrmont-heritage) !important;
        color: white !important;
    }

    /* -----------------------------------------------------
       PRIMARY ACTIONS
       ----------------------------------------------------- */

    body.portal-body .button,
    body.portal-body button {
        border-radius: 0 !important;
        background: var(--pyrmont-heritage) !important;
        color: #fff !important;
        box-shadow: none !important;
        font-size: .69rem !important;
        font-weight: 650 !important;
        letter-spacing: .085em !important;
        text-transform: uppercase !important;
    }

    body.portal-body .button:hover,
    body.portal-body button:hover {
        background: #1b4a54 !important;
        box-shadow: none !important;
        transform: translateY(-1px) !important;
    }

    body.portal-body .danger,
    body.portal-body .remove-row {
        border: 1px solid rgba(152,72,57,.58) !important;
        background: transparent !important;
        color: var(--pyrmont-danger-2) !important;
    }

    body.portal-body .danger:hover,
    body.portal-body .remove-row:hover {
        background: var(--pyrmont-danger-2) !important;
        color: #fff !important;
    }

    /* -----------------------------------------------------
       PANELS — more editorial, less generic software card
       ----------------------------------------------------- */

    body.portal-body .panel,
    body.portal-body .admin-section,
    body.portal-body .activation-notice,
    body.portal-body .new-recipe {
        position: relative !important;
        margin: 0 0 1.15rem !important;
        padding: clamp(1.6rem, 2.8vw, 2.7rem) !important;
        border: 1px solid #d7cbbb !important;
        border-radius: 0 !important;
        background: rgba(255,253,248,.94) !important;
        box-shadow: none !important;
    }

    body.portal-body .panel::before {
        top: -1px !important;
        left: 2.65rem !important;
        width: 64px !important;
        height: 2px !important;
        background: var(--pyrmont-bronze) !important;
    }

    body.portal-body .panel h2 {
        margin: 0 0 1.2rem !important;
        color: var(--pyrmont-heritage) !important;
        font-size: clamp(1.7rem, 2.25vw, 2.5rem) !important;
        font-weight: 400 !important;
        letter-spacing: -.03em !important;
    }

    body.portal-body .panel h3 {
        color: var(--pyrmont-heritage-2) !important;
        font-weight: 400 !important;
    }

    /* Any panel with forms/actions feels like management */
    body.portal-body .panel:has(form) {
        background: #f4eee5 !important;
        border-color: #ccbcaa !important;
    }

    body.portal-body .panel:has(form) h2 {
        font-size: clamp(1.45rem, 1.9vw, 2rem) !important;
    }

    /* -----------------------------------------------------
       PHOTO AREA — deliberate gallery presentation
       ----------------------------------------------------- */

    body.portal-body .panel > div[style*="max-width:850px"] {
        width: min(100%, 980px) !important;
        max-width: 980px !important;
        height: clamp(440px, 58vw, 700px) !important;
        padding: 18px !important;
        margin: 0 auto !important;
        border: 1px solid #cbbca8 !important;
        border-radius: 0 !important;
        background:
            linear-gradient(145deg, #ede3d5, #f8f4ed) !important;
    }

    body.portal-body .panel > div[style*="max-width:850px"] img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        background: #faf7f1 !important;
    }

    /* -----------------------------------------------------
       TABLES
       ----------------------------------------------------- */

    body.portal-body table {
        border-top: 1px solid #cfc1af !important;
        border-bottom: 1px solid #cfc1af !important;
        background: transparent !important;
    }

    body.portal-body thead th {
        padding: .78rem .8rem !important;
        border: 0 !important;
        border-bottom: 1px solid #cfc1af !important;
        background: #eee6da !important;
        color: #5a6a68 !important;
        font-size: .59rem !important;
        font-weight: 750 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    body.portal-body tbody td {
        padding: .82rem .8rem !important;
        border-bottom: 1px solid #e5ddd2 !important;
        background: rgba(255,255,255,.2) !important;
    }

    body.portal-body tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    body.portal-body tbody tr:hover td {
        background: rgba(176,140,89,.065) !important;
    }

    /* -----------------------------------------------------
       FORMS
       ----------------------------------------------------- */

    body.portal-body input,
    body.portal-body select,
    body.portal-body textarea {
        min-height: 46px !important;
        border: 1px solid #c9bcaa !important;
        border-radius: 0 !important;
        background: #fffdfa !important;
        color: var(--pyrmont-text) !important;
        box-shadow: none !important;
    }

    body.portal-body textarea {
        padding: .8rem .9rem !important;
    }

    body.portal-body input:focus,
    body.portal-body select:focus,
    body.portal-body textarea:focus {
        border-color: var(--pyrmont-bronze) !important;
        outline: 2px solid rgba(176,140,89,.13) !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
    }

    body.portal-body label {
        color: #42595c !important;
        font-size: .76rem !important;
        font-weight: 650 !important;
        letter-spacing: .035em !important;
    }

    /* -----------------------------------------------------
       OVERVIEW CARDS
       ----------------------------------------------------- */

    body.portal-body .recipe-grid {
        gap: 1.25rem !important;
    }

    body.portal-body .recipe-card {
        border: 1px solid #d2c5b4 !important;
        border-radius: 0 !important;
        background: #fffdf8 !important;
        box-shadow: none !important;
        transition:
            transform .2s ease,
            border-color .2s ease !important;
    }

    body.portal-body .recipe-card:hover {
        border-color: var(--pyrmont-bronze) !important;
        box-shadow: none !important;
        transform: translateY(-4px) !important;
    }

    body.portal-body .recipe-card [style*="height:260px"],
    body.portal-body .recipe-card [style*="height:180px"] {
        height: 310px !important;
        background: #eee5d8 !important;
        border-bottom: 1px solid #d2c5b4 !important;
    }

    body.portal-body .recipe-card img {
        object-fit: contain !important;
    }

    body.portal-body .recipe-card-content {
        padding: 1.55rem 1.65rem 1.7rem !important;
    }

    body.portal-body .recipe-card h2 {
        margin: .5rem 0 .8rem !important;
        color: var(--pyrmont-heritage) !important;
        font-size: clamp(1.55rem, 2vw, 2.1rem) !important;
        font-weight: 400 !important;
        line-height: 1.06 !important;
    }

    body.portal-body .recipe-meta {
        color: #687673 !important;
        font-size: .61rem !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    /* -----------------------------------------------------
       STATUS
       ----------------------------------------------------- */

    body.portal-body .status {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 24px !important;
        padding: .22rem .52rem !important;
        border: 1px solid currentColor !important;
        border-radius: 999px !important;
        background: transparent !important;
        font-size: .56rem !important;
        font-weight: 750 !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
    }

    body.portal-body .status.goedgekeurd,
    body.portal-body .status.approved {
        color: #315f50 !important;
    }

    body.portal-body .status.concept {
        color: #83673d !important;
    }

    body.portal-body .status.testfase {
        color: #476c71 !important;
    }

    body.portal-body .status.gearchiveerd {
        color: #6c7774 !important;
    }

    /* -----------------------------------------------------
       SEARCH / FILTER
       ----------------------------------------------------- */

    body.portal-body .recipe-filter {
        margin: 0 0 2rem !important;
        padding: .85rem !important;
        border: 1px solid #d3c6b5 !important;
        border-radius: 0 !important;
        background: rgba(255,253,248,.72) !important;
    }

    body.portal-body .recipe-filter input {
        background: #fffdf9 !important;
    }

    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    body.portal-body footer {
        min-height: 94px !important;
        padding: 2rem clamp(1.5rem, 5vw, 6rem) !important;
        border-top: 1px solid rgba(216,197,166,.35) !important;
        background: var(--pyrmont-heritage) !important;
        color: rgba(255,255,255,.72) !important;
    }

    /* -----------------------------------------------------
       DESKTOP RHYTHM
       ----------------------------------------------------- */

    @media (min-width: 1100px) {

        body.portal-body .portal-main > .panel + .panel {
            margin-top: 1.25rem !important;
        }

        body.portal-body .portal-main > h2 {
            margin: 3rem 0 1rem !important;
            color: var(--pyrmont-heritage) !important;
            font-size: 2.3rem !important;
            font-weight: 400 !important;
        }
    }

    /* -----------------------------------------------------
       TABLET / MOBILE
       ----------------------------------------------------- */

    @media (max-width: 850px) {

        body.portal-body .topbar {
            min-height: 76px !important;
        }

        body.portal-body .brand img {
            width: 46px !important;
            height: 46px !important;
        }

        body.portal-body .portal-main {
            width: calc(100vw - 28px) !important;
            padding-top: 2rem !important;
        }

        body.portal-body .portal-heading {
            min-height: 0 !important;
            align-items: flex-start !important;
        }

        body.portal-body .panel > div[style*="max-width:850px"] {
            height: min(72vw, 560px) !important;
        }
    }

    @media (max-width: 520px) {

        body.portal-body .portal-main {
            width: calc(100vw - 18px) !important;
        }

        body.portal-body .portal-heading h1 {
            font-size: clamp(2.55rem, 13vw, 4rem) !important;
        }

        body.portal-body .panel {
            padding: 1.2rem !important;
        }

        body.portal-body .panel::before {
            left: 1.2rem !important;
        }

        body.portal-body .panel > div[style*="max-width:850px"] {
            height: 78vw !important;
            padding: 8px !important;
        }
    }
}


/* =========================================================
   PYRMONT PASTRY SYSTEM - HOSPITALITY UI v3
   Structural recipe-page redesign.
   ========================================================= */

@media screen {

    body.portal-body {
        --hotel-ink: #0c3540;
        --hotel-ink-2: #173f47;
        --hotel-sand: #efe6da;
        --hotel-shell: #f8f4ee;
        --hotel-paper: #fffdf9;
        --hotel-bronze: #ae8957;
        --hotel-line: #d2c3af;
        --hotel-muted: #667471;
        --hotel-danger: #98483b;
    }

    body.portal-body .portal-main {
        width: min(1440px, calc(100vw - 56px)) !important;
    }

    .pyrmont-recipe-heading {
        min-height: 0 !important;
        align-items: flex-end !important;
        padding-top: .5rem !important;
    }

    .pyrmont-recipe-heading h1 {
        max-width: 15ch !important;
        font-size: clamp(3.2rem, 6.1vw, 6.8rem) !important;
        line-height: .92 !important;
    }

    .pyrmont-lead {
        max-width: 64ch !important;
        margin-top: .85rem !important;
        color: #586a69 !important;
        font-size: 1rem !important;
    }

    .pyrmont-meta-line {
        display: flex;
        flex-wrap: wrap;
        gap: .55rem 1.1rem;
        margin-top: 1.1rem;
        color: #687673;
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .pyrmont-meta-line span {
        position: relative;
    }

    .pyrmont-meta-line span + span::before {
        content: "•";
        position: absolute;
        left: -.72rem;
        color: var(--hotel-bronze);
    }

    .pyrmont-page-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .45rem;
        max-width: 660px;
    }

    .pyrmont-page-actions form {
        margin: 0;
    }

    .pyrmont-primary-action {
        background: var(--hotel-ink) !important;
        color: white !important;
    }

    .pyrmont-recipe-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.75fr) minmax(290px, .65fr);
        min-height: 510px;
        margin: 0 0 1.3rem;
        border: 1px solid var(--hotel-line);
        background: var(--hotel-paper);
    }

    .pyrmont-recipe-media {
        min-height: 510px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background:
            linear-gradient(145deg, #e7ddcf 0%, #f4eee5 100%);
    }

    .pyrmont-recipe-media > img {
        width: 100%;
        height: 100%;
        max-height: 690px;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    .pyrmont-photo-placeholder {
        min-height: 510px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        color: #75807d;
        font-size: .7rem;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .pyrmont-recipe-facts {
        padding: clamp(2rem, 4vw, 3.5rem);
        background: #f2eadf;
        border-left: 1px solid var(--hotel-line);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .pyrmont-kicker {
        margin: 0 0 1.4rem !important;
        color: var(--hotel-bronze) !important;
        font-size: .61rem !important;
        font-weight: 800 !important;
        letter-spacing: .20em !important;
        text-transform: uppercase !important;
    }

    .pyrmont-recipe-facts dl {
        margin: 0;
    }

    .pyrmont-recipe-facts dl > div {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 1rem;
        padding: 1rem 0;
        border-top: 1px solid rgba(174,137,87,.30);
    }

    .pyrmont-recipe-facts dl > div:last-child {
        border-bottom: 1px solid rgba(174,137,87,.30);
    }

    .pyrmont-recipe-facts dt {
        color: #7a7770;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .pyrmont-recipe-facts dd {
        margin: 0;
        color: var(--hotel-ink);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1rem;
        line-height: 1.35;
    }

    .pyrmont-text-action {
        margin-top: 1.5rem;
        color: var(--hotel-ink);
        font-size: .69rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-decoration: none !important;
    }

    .pyrmont-text-action:hover {
        color: var(--hotel-bronze);
    }

    .pyrmont-component-block {
        padding: clamp(1.8rem, 3vw, 3rem) !important;
    }

    .pyrmont-component-block.is-child {
        margin-top: 1rem !important;
        background: #f6f0e7 !important;
    }

    .pyrmont-component-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 2rem;
        align-items: start;
        margin-bottom: 1.7rem;
        padding-bottom: 1.4rem;
        border-bottom: 1px solid var(--hotel-line);
    }

    .pyrmont-component-heading h2 {
        margin-bottom: .45rem !important;
        font-size: clamp(2rem, 3vw, 3.2rem) !important;
    }

    .pyrmont-subtle {
        color: var(--hotel-muted) !important;
        font-size: .82rem !important;
    }

    .pyrmont-component-photo {
        height: 150px;
        border: 1px solid var(--hotel-line);
        background: #eee5d8;
        overflow: hidden;
    }

    .pyrmont-component-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* management areas are deliberately subordinate */
    body.portal-body .panel:has(h2:first-child:is(:where(*))) {
        scroll-margin-top: 120px;
    }

    body.portal-body .panel h2 {
        font-size: clamp(1.65rem, 2.1vw, 2.25rem) !important;
    }

    body.portal-body .panel:has(h2:first-child) {
        border-color: #d8cbbb !important;
    }

    /* approval + lifecycle cards */
    body.portal-body .portal-heading + .panel,
    body.portal-body .pyrmont-recipe-hero + .panel {
        margin-top: 1rem !important;
    }

    /* cost/admin sections less visually dominant */
    body.portal-body .panel:has(h2) h2 {
        color: var(--hotel-ink) !important;
    }

    /* lists / method */
    body.portal-body .pyrmont-component-block ol {
        margin: .8rem 0 0;
        padding-left: 1.4rem;
    }

    body.portal-body .pyrmont-component-block ol li {
        padding: .32rem 0 .6rem .35rem;
        border-bottom: 1px solid rgba(210,195,175,.45);
    }

    body.portal-body .pyrmont-component-block ol li:last-child {
        border-bottom: 0;
    }

    @media (max-width: 1000px) {
        .pyrmont-recipe-hero {
            grid-template-columns: 1fr;
        }

        .pyrmont-recipe-media,
        .pyrmont-photo-placeholder {
            min-height: 440px;
        }

        .pyrmont-recipe-facts {
            border-left: 0;
            border-top: 1px solid var(--hotel-line);
        }

        .pyrmont-page-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 700px) {
        body.portal-body .portal-main {
            width: calc(100vw - 18px) !important;
        }

        .pyrmont-component-heading {
            grid-template-columns: 1fr;
        }

        .pyrmont-component-photo {
            width: 100%;
            height: 230px;
        }

        .pyrmont-recipe-media,
        .pyrmont-photo-placeholder {
            min-height: 320px;
        }

        .pyrmont-recipe-facts dl > div {
            grid-template-columns: 95px 1fr;
        }
    }
}


/* =========================================================
   PYRMONT PASTRY SYSTEM - ACCESS EXPERIENCE v1
   ========================================================= */

@media screen {

    .auth-shell.access-experience {
        min-height: calc(100vh - 82px);
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(460px, .85fr);
        padding: 0;
        background: #f3ede4;
    }

    .access-visual {
        position: relative;
        min-height: calc(100vh - 82px);
        display: flex;
        align-items: flex-end;
        padding: clamp(3rem, 8vw, 8rem);
        overflow: hidden;
        background:
            linear-gradient(
                180deg,
                rgba(13,52,64,.08),
                rgba(13,52,64,.88)
            ),
            url('access/pyrmont-access-hero.webp') center / cover no-repeat,
            #0d3440;
        color: white;
    }

    .access-visual::after {
        content: "";
        position: absolute;
        inset: 22px;
        border: 1px solid rgba(217,198,165,.36);
        pointer-events: none;
    }

    .access-visual-inner {
        position: relative;
        z-index: 2;
        max-width: 670px;
    }

    .access-brand-kicker {
        margin: 0 0 1rem;
        color: #dec7a3;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .26em;
        text-transform: uppercase;
    }

    .access-visual h1 {
        max-width: 10ch;
        margin: 0 0 1.4rem;
        color: #fff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3.3rem, 6vw, 7rem);
        font-weight: 400;
        line-height: .94;
        letter-spacing: -.045em;
    }

    .access-visual p:not(.access-brand-kicker):not(.access-caption) {
        max-width: 48ch;
        color: rgba(255,255,255,.84);
        font-size: 1rem;
        line-height: 1.8;
    }

    .access-rule {
        width: 86px;
        height: 2px;
        margin: 2rem 0 1.3rem;
        background: #c5a16d;
    }

    .access-caption {
        color: #e0ccb0;
        font-size: .64rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    .access-steps-mini {
        display: grid;
        grid-template-columns: repeat(4, auto);
        gap: 1rem;
        margin-top: 2.2rem;
        color: #e0ccb0;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .auth-card.access-card {
        width: 100%;
        max-width: none;
        min-height: calc(100vh - 82px);
        margin: 0;
        padding:
            clamp(3rem, 7vw, 7rem)
            clamp(2.2rem, 6vw, 6rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 0;
        border-radius: 0;
        background: #fffdf8;
        box-shadow: none;
    }

    .access-card .eyebrow.dark {
        margin-bottom: 1rem;
        color: #a37f4f;
    }

    .access-card h2 {
        margin: 0 0 1rem;
        color: #0d3440;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2.6rem, 4.2vw, 4.7rem);
        font-weight: 400;
        line-height: .96;
        letter-spacing: -.04em;
    }

    .access-intro {
        max-width: 46ch;
        margin: 0 0 2rem;
        color: #60716f;
        line-height: 1.75;
    }

    .access-card .form-stack {
        max-width: 620px;
    }

    .access-card .form-stack label {
        margin: 0 0 1.15rem;
        color: #40585b;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .access-card .form-stack input,
    .access-card .form-stack textarea {
        width: 100%;
        margin-top: .48rem;
        border: 1px solid #cbbda9;
        border-radius: 0;
        background: #fff;
        color: #17383f;
        font-size: 16px;
    }

    .access-card .form-stack input {
        min-height: 52px;
    }

    .access-card .form-stack textarea {
        min-height: 110px;
        resize: vertical;
    }

    .access-submit {
        width: 100%;
        min-height: 52px;
        margin-top: .35rem;
        background: #0d3440 !important;
        color: #fff !important;
    }

    .access-submit:hover {
        background: #194954 !important;
    }

    .access-secondary {
        max-width: 620px;
        margin-top: 1.6rem;
        padding-top: 1.4rem;
        border-top: 1px solid #ded2c2;
        color: #6b7774;
        font-size: .79rem;
    }

    .access-secondary a {
        margin-left: .35rem;
        color: #0d3440;
        font-weight: 750;
        text-decoration: none;
    }

    .access-secondary a:hover {
        color: #a37f4f;
    }

    .access-what-next {
        max-width: 620px;
        margin-top: 2rem;
        padding: 1.5rem 1.6rem;
        border: 1px solid #d8cbb9;
        background: #f5efe6;
    }

    .access-small-title {
        margin: 0 0 .8rem;
        color: #0d3440;
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .access-what-next ol {
        margin: 0;
        padding-left: 1.2rem;
        color: #566866;
        font-size: .86rem;
        line-height: 1.75;
    }

    .access-identity {
        max-width: 620px;
        margin: .5rem 0 1.7rem;
        padding: 1rem 1.2rem;
        border-left: 3px solid #b08b58;
        background: #f5efe6;
    }

    .access-identity span,
    .access-identity small {
        display: block;
    }

    .access-identity span {
        color: #0d3440;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.2rem;
    }

    .access-identity small {
        margin-top: .25rem;
        color: #6a7774;
        font-size: .76rem;
    }

    .access-field-help {
        display: block;
        margin-top: .38rem;
        color: #7b8582;
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    .access-security-note {
        max-width: 620px;
        margin-top: 1.5rem;
        color: #737e7b;
        font-size: .75rem;
        line-height: 1.65;
    }

    /* Admin access management */
    .access-admin .access-dashboard > div[style*="display:grid"] {
        gap: 1px !important;
        border: 1px solid #d4c6b4;
        background: #d4c6b4;
    }

    .access-admin .access-dashboard > div[style*="display:grid"] > div {
        padding: 24px !important;
        background: #f6f0e7 !important;
        border-radius: 0 !important;
    }

    .access-admin .access-dashboard > div[style*="display:grid"] > div > div:first-child {
        color: #0d3440;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 42px !important;
        font-weight: 400 !important;
    }

    .access-section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }

    .access-requests-panel table {
        min-width: 900px;
    }

    .access-requests-panel .inline-actions {
        gap: .45rem;
    }

    .access-requests-panel .status {
        min-width: 86px;
        justify-content: center;
    }

    @media (max-width: 980px) {
        .auth-shell.access-experience {
            grid-template-columns: 1fr;
        }

        .access-visual {
            min-height: 420px;
            padding: 3rem 2rem;
        }

        .auth-card.access-card {
            min-height: 0;
            padding: 3rem 2rem 4rem;
        }

        .access-steps-mini {
            grid-template-columns: repeat(2, auto);
            justify-content: start;
        }
    }

    @media (max-width: 560px) {
        .access-visual {
            min-height: 330px;
            padding: 2rem 1.35rem;
        }

        .access-visual::after {
            inset: 12px;
        }

        .access-visual h1 {
            font-size: 3.15rem;
        }

        .auth-card.access-card {
            padding: 2.4rem 1.35rem 3rem;
        }

        .access-card h2 {
            font-size: 2.7rem;
        }

        .access-secondary span {
            display: block;
            margin-bottom: .3rem;
        }

        .access-secondary a {
            margin-left: 0;
        }
    }
}


/* =========================================================
   ACCESS EXPERIENCE v2
   ========================================================= */

@media screen {

    .access-wordmark {
        display:block;
        width:min(310px,70%);
        height:auto;
        margin-bottom:2rem;
    }

    .access-keys {
        display:block;
        width:100px;
        height:auto;
        margin:0 0 1.5rem;
        padding:8px;
        background:rgba(249,242,232,.82);
        opacity:.84;
    }

    .access-forgot-link {
        margin-top:.9rem;
        text-align:right;
    }

    .access-forgot-link a {
        color:#0d3440;
        font-size:.75rem;
        font-weight:750;
        text-decoration:none;
    }

    .access-forgot-link a:hover {
        color:#a37f4f;
    }

    .access-mail-status {
        background:#f8f3eb !important;
    }

    .access-mail-warning {
        margin-top:1rem;
        padding:1rem 1.15rem;
        border-left:4px solid #98483b;
        background:#fbefeb;
        color:#703a31;
    }

    .access-mail-ok {
        margin-bottom:0;
        color:#315f50;
        font-weight:700;
    }

    .access-delete-test-form {
        margin-top:.55rem;
    }

    .access-delete-test-form .danger {
        min-height:32px !important;
        padding:.45rem .6rem !important;
        font-size:.61rem !important;
    }
}


/* =========================================================
   ACCESS EXPERIENCE v3 - refined split layout
   ========================================================= */

@media screen {

    .auth-shell.access-experience {
        min-height: calc(100vh - 82px);
        grid-template-columns: minmax(420px, 560px) minmax(0, 1fr);
        align-items: stretch;
        background:
            linear-gradient(90deg, #f7f1e8 0, #f7f1e8 36%, #efe5d7 36%, #efe5d7 100%);
    }

    .auth-card.access-card {
        order: 1;
        position: relative;
        z-index: 2;
        padding:
            clamp(2.6rem, 7vh, 5.6rem)
            clamp(2rem, 4.6vw, 4.2rem);
        justify-content: center;
    }

    .access-card-brand {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 1.2rem;
    }

    .access-card-mark {
        width: 44px;
        height: auto;
        opacity: .78;
        flex: 0 0 auto;
    }

    .access-card-wordmark {
        width: min(220px, 72%);
        height: auto;
        display: block;
    }

    .access-card .eyebrow.dark {
        margin-top: .3rem;
    }

    .access-card .form-stack,
    .access-secondary,
    .access-what-next,
    .access-identity,
    .access-security-note {
        max-width: 520px;
    }

    .access-visual {
        order: 2;
        min-height: calc(100vh - 82px);
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        background:
            linear-gradient(90deg, rgba(8,28,34,.22) 0%, rgba(8,28,34,.10) 30%, rgba(8,28,34,.44) 100%),
            url('access/pyrmont-access-hero.webp') center center / cover no-repeat,
            #123743;
    }

    .access-visual::after {
        inset: 24px;
        border-color: rgba(227, 212, 188, .40);
    }

    .access-visual-inner {
        width: min(100%, 540px);
        margin: 0;
        margin-left: auto;
        padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem) clamp(2.2rem, 4vw, 3.8rem);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        background: linear-gradient(180deg, rgba(10, 31, 39, .08), rgba(10, 31, 39, .52));
        backdrop-filter: blur(4px);
    }

    .access-wordmark {
        width: min(320px, 78%);
        margin-bottom: 1.4rem;
    }

    .access-keys {
        width: 90px;
        margin-bottom: 1rem;
        padding: 10px;
        background: rgba(249, 242, 232, .88);
        box-shadow: 0 10px 30px rgba(8, 24, 31, .18);
    }

    .access-brand-kicker {
        margin-bottom: .8rem;
        color: #e5cfad;
        letter-spacing: .28em;
    }

    .access-visual h1 {
        max-width: 11ch;
        margin-bottom: 1.1rem;
        font-size: clamp(3.1rem, 5.4vw, 5.8rem);
        line-height: .96;
    }

    .access-visual p:not(.access-brand-kicker):not(.access-caption) {
        max-width: 40ch;
        font-size: 1rem;
        line-height: 1.85;
        color: rgba(255,255,255,.90);
    }

    .access-rule {
        margin: 1.7rem 0 1.1rem;
    }

    .access-caption {
        font-size: .63rem;
        letter-spacing: .18em;
    }

    @media (max-width: 980px) {
        .auth-shell.access-experience {
            grid-template-columns: 1fr;
            background: #f7f1e8;
        }

        .access-visual {
            order: 1;
            min-height: 420px;
        }

        .access-visual-inner {
            width: 100%;
            max-width: none;
            min-height: 100%;
        }

        .auth-card.access-card {
            order: 2;
            min-height: 0;
        }
    }

    @media (max-width: 560px) {
        .access-card-brand {
            gap: 10px;
        }

        .access-card-mark {
            width: 38px;
        }

        .access-card-wordmark {
            width: min(190px, 68%);
        }

        .access-visual-inner {
            padding: 1.5rem 1.35rem 2rem;
        }
    }
}


/* =========================================================
   PYRMONT PREMIUM REFRESH v1
   Brand header + professional recipe workflow editor
   ========================================================= */

@media screen {

    .topbar {
        min-height: 86px !important;
        padding-left: clamp(1.3rem, 4vw, 4.8rem) !important;
        padding-right: clamp(1.3rem, 4vw, 4.8rem) !important;
    }

    .brand.pyrmont-brand {
        display: inline-flex !important;
        align-items: center !important;
        gap: 13px !important;
        min-width: 0;
        height: auto !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .pyrmont-brand-mark {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        padding: 6px;
        flex: 0 0 50px;
        background: #f2eadf;
        border: 1px solid rgba(218,199,170,.75);
    }

    .pyrmont-brand-mark img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: contain;
        filter: none !important;
        opacity: .82;
    }

    .pyrmont-brand-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: #fff;
        line-height: 1;
    }

    .pyrmont-brand-copy strong {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.15rem;
        font-weight: 400;
        letter-spacing: .18em;
        white-space: nowrap;
    }

    .pyrmont-brand-copy small {
        color: #d8c4a2;
        font-size: .55rem;
        font-weight: 750;
        letter-spacing: .19em;
        white-space: nowrap;
    }

    .workflow-editor-intro {
        margin: 0 0 1.2rem;
        padding: 1rem 1.15rem;
        border-left: 3px solid #b08b58;
        background: #f5efe6;
    }

    .workflow-editor-intro p {
        margin: 0;
        color: #596b69;
        font-size: .82rem;
        line-height: 1.7;
    }

    #workflow-list {
        display: grid;
        gap: 1.15rem;
    }

    .workflow-step-card {
        position: relative;
        display: block !important;
        width: 100%;
        margin: 0 !important;
        padding: clamp(1.2rem, 2vw, 1.7rem) !important;
        border: 1px solid #d4c6b5 !important;
        background: #fffdf8 !important;
    }

    .workflow-step-card:hover {
        background: #fffdf8 !important;
        border-color: #b99b70 !important;
    }

    .workflow-step-top {
        display: grid;
        grid-template-columns: 48px 1fr 42px;
        align-items: center;
        gap: .8rem;
        margin-bottom: 1rem;
        padding-bottom: .9rem;
        border-bottom: 1px solid #e1d7ca;
    }

    .workflow-step-top .step-number {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border: 1px solid #bda783 !important;
        background: #f4ecdf !important;
        color: #795f39 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 1rem !important;
    }

    .workflow-step-title {
        color: #123743;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.25rem;
    }

    .workflow-step-top .remove-row {
        justify-self: end;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .workflow-field {
        display: grid !important;
        gap: .45rem !important;
        margin: 0 !important;
    }

    .workflow-field > span {
        color: #40595c;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .workflow-field textarea,
    .workflow-field input {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .workflow-action-field textarea {
        min-height: 150px !important;
        padding: 1rem 1.05rem !important;
        resize: vertical !important;
        overflow-y: hidden;
    }

    .workflow-meta-grid {
        display: grid;
        grid-template-columns:
            minmax(120px, .75fr)
            minmax(140px, .85fr)
            minmax(280px, 2fr);
        gap: .9rem;
        margin: 1rem 0;
    }

    .workflow-meta-grid input {
        min-height: 50px !important;
        padding: .8rem .9rem !important;
    }

    .workflow-critical-field textarea {
        min-height: 125px !important;
        padding: 1rem 1.05rem !important;
        resize: vertical !important;
        overflow-y: hidden;
    }

    .component-editor textarea,
    .dessert-editor textarea,
    .recipe-form textarea {
        min-height: 130px;
        line-height: 1.6;
        padding: .9rem 1rem;
    }

    textarea[name*="description"],
    textarea[name*="service"],
    textarea[name*="finishing"],
    textarea[name*="critical"],
    textarea[name*="action"] {
        min-height: 130px;
        line-height: 1.6;
    }

    @media (min-width: 1300px) {
        .component-editor {
            width: min(1780px, 96vw) !important;
        }

        .workflow-action-field textarea {
            min-height: 175px !important;
        }

        .workflow-critical-field textarea {
            min-height: 145px !important;
        }
    }

    @media (max-width: 850px) {
        .pyrmont-brand-copy strong {
            font-size: 1rem;
        }

        .workflow-meta-grid {
            grid-template-columns: 1fr 1fr;
        }

        .workflow-equipment-field {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 560px) {
        .pyrmont-brand-copy small {
            display: none;
        }

        .pyrmont-brand-mark {
            width: 44px;
            height: 44px;
            flex-basis: 44px;
        }

        .workflow-meta-grid {
            grid-template-columns: 1fr;
        }

        .workflow-equipment-field {
            grid-column: auto;
        }

        .workflow-action-field textarea,
        .workflow-critical-field textarea {
            min-height: 150px !important;
        }
    }
}


/* =========================================================
   PYRMONT AUTH LAYOUT REFINEMENT v2
   Full-width split layout, no dead space, aligned navigation
   ========================================================= */

@media screen {

    /* -----------------------------------------------------
       ACCESS / LOGIN - remove inherited centering that caused
       the large empty gutters visible in the previous version.
       ----------------------------------------------------- */

    .auth-shell.access-experience {
        width: 100% !important;
        max-width: none !important;
        min-height: calc(100vh - 86px) !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        place-items: stretch !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        grid-template-columns:
            minmax(440px, 42%)
            minmax(0, 58%) !important;
        background: #f7f2eb !important;
    }

    /* Left: calm, luxurious form panel */
    .auth-card.access-card {
        width: 100% !important;
        max-width: none !important;
        min-height: calc(100vh - 86px) !important;
        margin: 0 !important;
        padding:
            clamp(3.2rem, 7vh, 6rem)
            clamp(3rem, 6vw, 7.5rem) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        background:
            linear-gradient(
                145deg,
                #fffdf9 0%,
                #faf5ed 100%
            ) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Avoid duplicated branding inside the form.
       The master brand remains in the topbar and photo panel. */
    .access-card-brand {
        display: none !important;
    }

    .access-card .eyebrow.dark,
    .access-card h2,
    .access-card .access-intro,
    .access-card .form-stack,
    .access-card .access-secondary,
    .access-card .access-what-next,
    .access-card .access-identity,
    .access-card .access-security-note {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .access-card .eyebrow.dark {
        margin-bottom: 1.05rem !important;
        color: #9b7748 !important;
        font-size: .64rem !important;
        letter-spacing: .23em !important;
    }

    .access-card h2 {
        margin-bottom: 1.05rem !important;
        color: #123743 !important;
        font-size: clamp(3rem, 4.5vw, 5.2rem) !important;
        line-height: .94 !important;
    }

    .access-card .access-intro {
        margin-bottom: 2.1rem !important;
        color: #65726f !important;
        font-size: .96rem !important;
        line-height: 1.8 !important;
    }

    .access-card .form-stack {
        gap: 1.15rem !important;
        margin-top: 0 !important;
    }

    .access-card .form-stack input,
    .access-card .form-stack textarea {
        min-height: 54px !important;
        border-color: #cabca9 !important;
        background: rgba(255,255,255,.92) !important;
    }

    .access-submit {
        min-height: 54px !important;
        margin-top: .25rem !important;
        background: #123743 !important;
    }

    .access-forgot-link {
        margin-top: .85rem !important;
    }

    .access-secondary {
        margin-top: 1.65rem !important;
        padding-top: 1.25rem !important;
    }

    /* -----------------------------------------------------
       Right: full image panel.
       No narrow central strip; the photograph now fills all
       available space on the right side.
       ----------------------------------------------------- */

    .access-visual {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: calc(100vh - 86px) !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background:
            linear-gradient(
                90deg,
                rgba(9,31,38,.10) 0%,
                rgba(9,31,38,.04) 44%,
                rgba(9,31,38,.19) 100%
            ),
            linear-gradient(
                0deg,
                rgba(8,29,36,.76) 0%,
                rgba(8,29,36,.24) 42%,
                rgba(8,29,36,.08) 70%
            ),
            url('access/pyrmont-access-hero.webp')
                center center / cover no-repeat !important;
        overflow: hidden !important;
    }

    .access-visual::after {
        inset: 26px !important;
        border: 1px solid rgba(236,220,194,.38) !important;
    }

    .access-visual-inner {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        min-height: calc(100vh - 86px) !important;
        margin: 0 !important;
        padding:
            clamp(3rem, 5vw, 5.5rem)
            clamp(3rem, 5vw, 5.5rem)
            clamp(3.2rem, 6vw, 6rem) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    /* Brand lockup floats cleanly above the photograph. */
    .access-wordmark {
        position: absolute !important;
        top: clamp(3rem, 5vw, 5rem) !important;
        left: clamp(3rem, 5vw, 5rem) !important;
        width: min(290px, 40%) !important;
        height: auto !important;
        margin: 0 !important;
        filter: drop-shadow(0 5px 18px rgba(0,0,0,.18));
    }

    .access-keys {
        position: absolute !important;
        top: clamp(3rem, 5vw, 5rem) !important;
        right: clamp(3rem, 5vw, 5rem) !important;
        width: 82px !important;
        height: 82px !important;
        margin: 0 !important;
        padding: 10px !important;
        object-fit: contain !important;
        background: rgba(248,240,228,.91) !important;
        border: 1px solid rgba(255,255,255,.45) !important;
        box-shadow: 0 12px 30px rgba(7,24,31,.22) !important;
        opacity: .94 !important;
    }

    .access-brand-kicker {
        margin: 0 0 .9rem !important;
        color: #e9d5b2 !important;
        font-size: .64rem !important;
        letter-spacing: .27em !important;
    }

    .access-visual h1 {
        max-width: 10ch !important;
        margin: 0 0 1.15rem !important;
        color: #fff !important;
        font-size: clamp(3.7rem, 5.5vw, 6.4rem) !important;
        line-height: .92 !important;
        text-shadow: 0 8px 28px rgba(0,0,0,.20) !important;
    }

    .access-visual p:not(.access-brand-kicker):not(.access-caption) {
        max-width: 42ch !important;
        margin-bottom: 0 !important;
        color: rgba(255,255,255,.91) !important;
        font-size: .98rem !important;
        line-height: 1.8 !important;
        text-shadow: 0 3px 14px rgba(0,0,0,.25) !important;
    }

    .access-rule {
        margin: 1.65rem 0 1rem !important;
        background: #d3ae76 !important;
    }

    .access-caption {
        color: #edd9b7 !important;
    }

    /* -----------------------------------------------------
       TOPBAR - consistent vertical alignment.
       ----------------------------------------------------- */

    .topbar {
        height: 86px !important;
        min-height: 86px !important;
    }

    .topbar nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: .7rem !important;
        min-height: 40px !important;
    }

    .topbar nav > a,
    .topbar nav > form:not(.language-form),
    .topbar nav > .language-form {
        margin: 0 !important;
        align-self: center !important;
    }

    .topbar nav > a,
    .topbar nav > a.button,
    .topbar nav > form:not(.language-form) > button {
        min-height: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Visually hide the language label. In the previous screen
       the 'Taal' label escaped into the navigation. */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .language-form {
        height: 38px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .language-select {
        width: auto !important;
        min-width: 118px !important;
        max-width: 150px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding:
            0
            2rem
            0
            .85rem !important;
        border: 1px solid rgba(255,255,255,.27) !important;
        border-radius: 0 !important;
        background-color: rgba(255,255,255,.035) !important;
        color: #fff !important;
        font-size: .7rem !important;
        font-weight: 650 !important;
        line-height: 38px !important;
        vertical-align: middle !important;
        box-shadow: none !important;
    }

    /* -----------------------------------------------------
       RESPONSIVE
       ----------------------------------------------------- */

    @media (max-width: 1100px) {
        .auth-shell.access-experience {
            grid-template-columns:
                minmax(390px, 46%)
                minmax(0, 54%) !important;
        }

        .auth-card.access-card {
            padding-left: clamp(2rem, 4vw, 4rem) !important;
            padding-right: clamp(2rem, 4vw, 4rem) !important;
        }

        .access-visual h1 {
            font-size: clamp(3.2rem, 6vw, 5rem) !important;
        }

        .access-wordmark {
            width: min(250px, 45%) !important;
        }

        .access-keys {
            width: 72px !important;
            height: 72px !important;
        }
    }

    @media (max-width: 900px) {
        .auth-shell.access-experience {
            grid-template-columns: 1fr !important;
        }

        .access-visual {
            order: 1 !important;
            min-height: 470px !important;
        }

        .access-visual-inner {
            min-height: 470px !important;
        }

        .auth-card.access-card {
            order: 2 !important;
            min-height: auto !important;
            padding-top: 3.6rem !important;
            padding-bottom: 4rem !important;
        }
    }

    @media (max-width: 650px) {
        .topbar {
            height: auto !important;
            min-height: 74px !important;
        }

        .topbar nav {
            gap: .4rem !important;
        }

        .language-select {
            min-width: 100px !important;
            max-width: 112px !important;
            font-size: .65rem !important;
        }

        .access-visual {
            min-height: 420px !important;
        }

        .access-visual-inner {
            min-height: 420px !important;
            padding: 2rem 1.5rem 2.2rem !important;
        }

        .access-wordmark {
            top: 2rem !important;
            left: 1.5rem !important;
            width: 210px !important;
        }

        .access-keys {
            top: 2rem !important;
            right: 1.5rem !important;
            width: 62px !important;
            height: 62px !important;
        }
    }
}


/* =========================================================
   PYRMONT LIBRARY HOME v1
   Luxury dashboard for complete desserts + shared card styling
   ========================================================= */

@media screen {

    body.portal-body .portal-main {
        width: min(1600px, calc(100vw - 56px)) !important;
        padding-top: clamp(2rem, 4vw, 3.8rem) !important;
    }

    .library-hero {
        display: grid;
        grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr);
        min-height: 520px;
        margin-bottom: 1.25rem;
        border: 1px solid #d1c2af;
        background: #fffdf8;
        overflow: hidden;
    }

    .library-hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding:
            clamp(3rem, 5vw, 5.5rem)
            clamp(2.5rem, 5vw, 5rem);
        background:
            linear-gradient(
                145deg,
                #fffdf9 0%,
                #f7f0e6 100%
            );
    }

    .library-hero-copy .eyebrow {
        margin-bottom: 1.2rem !important;
        color: #9c7747 !important;
        font-size: .63rem !important;
        letter-spacing: .24em !important;
    }

    .library-hero-copy h1 {
        max-width: 8ch;
        margin: 0 0 1.3rem;
        color: #123743;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(4rem, 6.2vw, 7rem);
        font-weight: 400;
        line-height: .91;
        letter-spacing: -.05em;
    }

    .library-lead {
        max-width: 53ch;
        margin: 0;
        color: #61706d;
        font-size: 1rem;
        line-height: 1.8;
    }

    .library-hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.3rem;
        margin-top: 2rem;
    }

    .library-primary {
        min-height: 44px !important;
        padding: 0 1.25rem !important;
        border: 1px solid #123743 !important;
        background: #123743 !important;
        color: #fff !important;
    }

    .library-text-link {
        color: #123743;
        font-size: .69rem;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        border-bottom: 1px solid #ac8b5a;
        padding-bottom: .18rem;
    }

    .library-hero-image {
        position: relative;
        min-height: 520px;
        background:
            linear-gradient(
                180deg,
                rgba(9,31,38,.02) 0%,
                rgba(9,31,38,.12) 48%,
                rgba(9,31,38,.70) 100%
            ),
            url('access/pyrmont-access-hero.webp')
                center center / cover no-repeat;
    }

    .library-hero-image::before {
        content: "";
        position: absolute;
        inset: 22px;
        border: 1px solid rgba(255,245,226,.42);
        pointer-events: none;
    }

    .library-hero-brand {
        position: absolute;
        top: 3rem;
        left: 3rem;
        right: 3rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .library-wordmark {
        width: min(290px, 55%);
        height: auto;
        filter: drop-shadow(0 8px 22px rgba(0,0,0,.20));
    }

    .library-keys {
        width: 72px;
        height: 72px;
        object-fit: contain;
        padding: 8px;
        background: rgba(248,240,228,.91);
        border: 1px solid rgba(255,255,255,.52);
    }

    .library-hero-caption {
        position: absolute;
        left: 3rem;
        right: 3rem;
        bottom: 3rem;
        color: #fff;
    }

    .library-hero-caption span {
        display: block;
        margin-bottom: .5rem;
        color: #e9d3af;
        font-size: .60rem;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .library-hero-caption strong {
        display: block;
        max-width: 9ch;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2.2rem, 3.6vw, 4.2rem);
        font-weight: 400;
        line-height: .95;
    }

    .library-toolbar {
        display: grid;
        grid-template-columns: minmax(320px, .62fr) minmax(420px, 1.38fr);
        gap: 1rem;
        margin-bottom: 1.6rem;
    }

    .library-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border: 1px solid #d4c6b4;
        background: #d4c6b4;
        gap: 1px;
    }

    .library-stat {
        min-height: 112px;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        padding: 1.2rem 1.25rem;
        background: #f5efe6;
    }

    .library-stat span {
        color: #6a7673;
        font-size: .59rem;
        font-weight: 750;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .library-stat strong {
        color: #123743;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 2.45rem;
        font-weight: 400;
        line-height: 1;
    }

    .library-search.recipe-filter {
        margin: 0 !important;
        padding: 1rem 1.1rem !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: .6rem !important;
        border: 1px solid #d4c6b4 !important;
        background: #fffdf8 !important;
    }

    .library-search-label {
        color: #60706e;
        font-size: .60rem;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .library-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: .55rem;
    }

    .library-search-row input {
        min-height: 46px !important;
        background: #fff !important;
    }

    .library-search-row button {
        min-width: 112px;
        min-height: 46px !important;
        background: #123743 !important;
    }

    .library-clear-search {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 .9rem;
        border: 1px solid #cbbda9;
        color: #123743;
        font-size: .65rem;
        font-weight: 750;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .library-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }

    .library-card {
        min-height: 510px;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border: 1px solid #d5c8b7 !important;
        background: #fffdf8 !important;
        box-shadow: none !important;
        transition:
            transform .22s ease,
            border-color .22s ease !important;
    }

    .library-card:hover {
        transform: translateY(-5px) !important;
        border-color: #ae8c5a !important;
        box-shadow: none !important;
    }

    .library-card-link {
        display: flex;
        flex-direction: column;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

    .library-card-media {
        position: relative;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-bottom: 1px solid #d5c8b7;
        background:
            linear-gradient(145deg, #eee5d8, #f6f0e7);
    }

    .library-card-photo {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        object-position: center;
        transition: transform .35s ease;
    }

    .library-card:hover .library-card-photo {
        transform: scale(1.025);
    }

    .library-card-placeholder {
        flex-direction: column;
        gap: .8rem;
        color: #7a817e;
        font-size: .62rem;
        font-weight: 750;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .library-card-placeholder img {
        width: 58px !important;
        height: 58px !important;
        object-fit: contain !important;
        opacity: .55;
    }

    .library-card-content {
        display: flex !important;
        flex: 1 !important;
        flex-direction: column !important;
        padding: 1.45rem 1.55rem 1.5rem !important;
    }

    .library-card .recipe-meta {
        align-items: center;
        margin-bottom: .7rem;
    }

    .library-card h2 {
        margin: 0 0 .75rem !important;
        color: #123743 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: clamp(1.65rem, 2vw, 2.35rem) !important;
        font-weight: 400 !important;
        line-height: 1.03 !important;
        letter-spacing: -.025em !important;
    }

    .library-card-content > p:not(.yield) {
        color: #657371 !important;
        font-size: .82rem !important;
        line-height: 1.65 !important;
    }

    .library-card-yield {
        margin-top: auto !important;
        padding-top: 1rem !important;
        border-top: 1px solid #e2d9cd;
        color: #536663 !important;
        font-size: .68rem !important;
        font-weight: 750 !important;
        letter-spacing: .055em !important;
        text-transform: uppercase;
    }

    /* The same elegant card treatment benefits the deelrecepten
       overview because it shares recipe-grid / recipe-card classes. */
    body.portal-body .recipe-grid:not(.library-grid) .recipe-card {
        border: 1px solid #d5c8b7 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    @media (max-width: 1150px) {
        .library-hero {
            grid-template-columns: 1fr 1fr;
        }

        .library-toolbar {
            grid-template-columns: 1fr;
        }

        .library-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 850px) {
        body.portal-body .portal-main {
            width: calc(100vw - 24px) !important;
        }

        .library-hero {
            grid-template-columns: 1fr;
        }

        .library-hero-image {
            min-height: 430px;
        }

        .library-hero-copy h1 {
            max-width: none;
        }

        .library-stats {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 620px) {
        .library-hero-copy {
            padding: 2.4rem 1.35rem 2.7rem;
        }

        .library-hero-image {
            min-height: 370px;
        }

        .library-hero-brand {
            top: 1.6rem;
            left: 1.6rem;
            right: 1.6rem;
        }

        .library-wordmark {
            width: 200px;
        }

        .library-keys {
            width: 58px;
            height: 58px;
        }

        .library-hero-caption {
            left: 1.6rem;
            right: 1.6rem;
            bottom: 1.7rem;
        }

        .library-stats {
            grid-template-columns: 1fr;
        }

        .library-stat {
            min-height: 86px;
        }

        .library-search-row {
            grid-template-columns: 1fr;
        }

        .library-grid {
            grid-template-columns: 1fr !important;
        }

        .library-card-media {
            height: 270px;
        }
    }
}


/* =========================================================
   PYRMONT COMPONENT LIBRARY v1
   Deelrecepten in dezelfde hospitality family as desserts
   ========================================================= */

@media screen {

    .component-library-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
        min-height: 500px;
        margin-bottom: 1.25rem;
        border: 1px solid #d1c2af;
        background: #fffdf8;
        overflow: hidden;
    }

    .component-library-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding:
            clamp(3rem, 5vw, 5.5rem)
            clamp(2.5rem, 5vw, 5rem);
        background:
            linear-gradient(
                145deg,
                #fffdf9 0%,
                #f8f2e9 100%
            );
    }

    .component-library-copy .eyebrow {
        margin-bottom: 1.2rem !important;
        color: #9c7747 !important;
        font-size: .63rem !important;
        letter-spacing: .24em !important;
    }

    .component-library-copy h1 {
        max-width: 8ch;
        margin: 0 0 1.3rem;
        color: #123743;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(4rem, 6vw, 6.8rem);
        font-weight: 400;
        line-height: .91;
        letter-spacing: -.05em;
    }

    .component-library-lead {
        max-width: 58ch;
        margin: 0;
        color: #61706d;
        font-size: 1rem;
        line-height: 1.8;
    }

    .component-library-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.3rem;
        margin-top: 2rem;
    }

    .component-library-art {
        position: relative;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: clamp(2.5rem, 4vw, 4rem);
        background:
            radial-gradient(
                circle at 76% 18%,
                rgba(213,184,139,.22),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                #173e47 0%,
                #0d3039 68%,
                #0a2932 100%
            );
        color: #fff;
    }

    .component-library-art::before {
        content: "";
        position: absolute;
        inset: 22px;
        border: 1px solid rgba(222,201,168,.33);
        pointer-events: none;
    }

    .component-library-art::after {
        content: "";
        position: absolute;
        top: 0;
        right: 14%;
        width: 1px;
        height: 100%;
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(222,201,168,.32) 18%,
                rgba(222,201,168,.12) 74%,
                transparent
            );
    }

    .component-library-monogram {
        position: absolute;
        top: 3.2rem;
        left: 3.2rem;
        right: 3.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.4rem;
    }

    .component-library-keys {
        width: 92px;
        height: 92px;
        object-fit: contain;
        padding: 12px;
        background: #f3eadc;
        border: 1px solid rgba(255,255,255,.30);
    }

    .component-library-wordmark {
        width: min(280px, 52%);
        height: auto;
    }

    .component-library-art-copy {
        position: relative;
        z-index: 2;
        max-width: 520px;
    }

    .component-library-art-copy > span {
        display: block;
        margin-bottom: .7rem;
        color: #dabb8d;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .21em;
        text-transform: uppercase;
    }

    .component-library-art-copy > strong {
        display: block;
        max-width: 9ch;
        color: #fff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2.8rem, 4.3vw, 5.1rem);
        font-weight: 400;
        line-height: .93;
        letter-spacing: -.035em;
    }

    .component-library-art-copy p {
        max-width: 43ch;
        margin: 1.2rem 0 0;
        color: rgba(255,255,255,.75);
        font-size: .88rem;
        line-height: 1.75;
    }

    .component-library-card {
        min-height: 535px;
    }

    .component-card-media {
        height: 310px !important;
    }

    .component-card-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        margin: .55rem 0 .8rem;
        background: #ded3c5;
        border: 1px solid #ded3c5;
    }

    .component-card-facts > div {
        min-height: 72px;
        padding: .72rem .78rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: .35rem;
        background: #f7f1e8;
    }

    .component-card-facts span {
        color: #78817e;
        font-size: .53rem;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .component-card-facts strong {
        color: #123743;
        font-family: Georgia, "Times New Roman", serif;
        font-size: .92rem;
        font-weight: 400;
        line-height: 1.2;
    }

    .component-storage {
        margin: .25rem 0 .8rem !important;
        color: #64716f !important;
        font-size: .76rem !important;
        line-height: 1.55 !important;
    }

    @media (max-width: 1150px) {
        .component-library-hero {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 850px) {
        .component-library-hero {
            grid-template-columns: 1fr;
        }

        .component-library-copy h1 {
            max-width: none;
        }

        .component-library-art {
            min-height: 430px;
        }
    }

    @media (max-width: 620px) {
        .component-library-copy {
            padding: 2.4rem 1.35rem 2.7rem;
        }

        .component-library-art {
            min-height: 380px;
            padding: 2rem 1.6rem;
        }

        .component-library-monogram {
            top: 1.7rem;
            left: 1.6rem;
            right: 1.6rem;
        }

        .component-library-keys {
            width: 68px;
            height: 68px;
            padding: 8px;
        }

        .component-library-wordmark {
            width: 190px;
        }

        .component-card-facts {
            grid-template-columns: 1fr;
        }

        .component-card-facts > div {
            min-height: 60px;
        }
    }
}


/* =========================================================
   QUICK CREATE - admin-only recipe creation
   ========================================================= */

@media screen {

    .library-add-button {
        min-height: 44px !important;
        padding: 0 1.25rem !important;
        border: 1px solid #b28e5b !important;
        background: #b28e5b !important;
        color: #fff !important;
    }

    .library-add-button:hover {
        background: #9d7847 !important;
        border-color: #9d7847 !important;
    }

    .quick-create-page {
        width: min(1100px, calc(100vw - 40px)) !important;
    }

    .quick-create-card {
        max-width: 820px;
        margin: 0 auto;
        padding: clamp(1.6rem, 3vw, 2.5rem) !important;
    }

    .quick-create-card .form-stack {
        gap: 1.2rem;
    }

    .quick-create-card input {
        min-height: 52px;
    }

    .quick-create-grid {
        display: grid;
        grid-template-columns: 1.2fr .7fr .6fr;
        gap: 1rem;
    }

    @media (max-width: 720px) {
        .quick-create-grid {
            grid-template-columns: 1fr;
        }
    }
}


/* =========================================================
   SMART PASTE RECIPE INTAKE v1
   ========================================================= */

@media screen {

    .quick-create-page {
        width: min(1500px, calc(100vw - 48px)) !important;
    }

    .smart-paste-card {
        margin-bottom: 1.2rem;
        padding:
            clamp(1.6rem, 3vw, 2.6rem) !important;
        border: 1px solid #d0c1ae !important;
        background:
            linear-gradient(
                145deg,
                #fffdf9 0%,
                #f7f0e7 100%
            ) !important;
    }

    .smart-paste-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 1.25rem;
    }

    .smart-paste-heading h2 {
        margin: .35rem 0 .7rem;
        color: #123743;
        font-family:
            Georgia,
            "Times New Roman",
            serif;
        font-size:
            clamp(2rem, 3vw, 3.4rem);
        font-weight: 400;
        line-height: 1;
    }

    .smart-paste-heading p {
        max-width: 780px;
        margin: 0;
        color: #60706d;
        line-height: 1.75;
    }

    .smart-paste-badge {
        flex: 0 0 auto;
        padding: .55rem .75rem;
        border: 1px solid #b6986d;
        color: #8b6a3f;
        font-size: .56rem;
        font-weight: 800;
        letter-spacing: .12em;
        white-space: nowrap;
    }

    .smart-paste-textarea {
        width: 100% !important;
        min-height: 420px !important;
        padding: 1.25rem 1.35rem !important;
        border: 1px solid #bfae98 !important;
        background: #fff !important;
        color: #123743 !important;
        font-family:
            "Segoe UI",
            Arial,
            sans-serif !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
        resize: vertical !important;
        box-shadow:
            inset 0 0 0 1px
            rgba(255,255,255,.55) !important;
    }

    .smart-paste-textarea:focus {
        border-color: #9d7c4e !important;
        box-shadow:
            0 0 0 3px
            rgba(176,139,88,.12) !important;
        outline: none !important;
    }

    .smart-paste-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .7rem;
        align-items: center;
        margin-top: 1rem;
    }

    .smart-paste-analyse {
        min-height: 44px !important;
        background: #123743 !important;
        border-color: #123743 !important;
        color: #fff !important;
    }

    .smart-paste-clear {
        min-height: 44px;
        padding: 0 1rem;
        border: 1px solid #c8b9a4;
        background: transparent;
        color: #506461;
        font-size: .66rem;
        font-weight: 750;
        letter-spacing: .07em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .smart-paste-preview {
        margin-top: 1rem;
        padding: 1rem;
        border-left: 4px solid #b08b58;
        background: #f4ede3;
    }

    .smart-paste-preview p {
        margin: .9rem 0 0;
        color: #5e6e6b;
        font-size: .8rem;
        line-height: 1.65;
    }

    .smart-preview-grid {
        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 1px;
        background: #d9ccba;
        border: 1px solid #d9ccba;
    }

    .smart-preview-grid > div {
        min-height: 82px;
        padding: .8rem .9rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: #fffaf3;
    }

    .smart-preview-grid span {
        color: #7a817e;
        font-size: .54rem;
        font-weight: 800;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .smart-preview-grid strong {
        color: #123743;
        font-family:
            Georgia,
            "Times New Roman",
            serif;
        font-size: 1rem;
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    .smart-paste-note {
        margin: 1rem 0 0;
        color: #6c7775;
        font-size: .76rem;
        line-height: 1.65;
    }

    .quick-create-card {
        max-width: none !important;
    }

    @media (max-width: 900px) {

        .smart-paste-heading {
            flex-direction: column;
            gap: .8rem;
        }

        .smart-preview-grid {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 580px) {

        .quick-create-page {
            width:
                calc(100vw - 20px) !important;
        }

        .smart-paste-textarea {
            min-height: 360px !important;
        }

        .smart-preview-grid {
            grid-template-columns: 1fr;
        }

        .smart-paste-actions > * {
            width: 100%;
        }
    }
}

@media screen {
    .field-help {
        display:block;
        margin-top:.35rem;
        color:#74807d;
        font-size:.68rem;
        font-weight:500;
        line-height:1.45;
        letter-spacing:0;
        text-transform:none;
    }

    .quick-create-grid select,
    .component-editor select {
        min-height:50px;
    }
}


/* =========================================================
   PRODUCTION PLANNING – PHASE 1
   ========================================================= */

@media screen {
    .production-page {
        width: min(1540px, calc(100vw - 48px)) !important;
    }

    .production-hero {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 1.25rem;
        padding: clamp(2.3rem, 5vw, 5rem);
        border: 1px solid #cfbea7;
        background:
            linear-gradient(115deg, #fffdf8 0%, #f7efe4 55%, #ece0ce 100%);
    }

    .production-hero h1,
    .production-section-heading h2,
    .production-plan-heading h2 {
        color: #123943;
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 400;
    }

    .production-hero h1 {
        max-width: 10ch;
        margin: .15rem 0 .9rem;
        font-size: clamp(3rem, 5vw, 5.4rem);
        line-height: .93;
        letter-spacing: -.05em;
    }

    .production-hero > div > p:last-child {
        max-width: 58ch;
        margin: 0;
        color: #60706e;
        font-size: .96rem;
        line-height: 1.8;
    }

    .production-hero-note {
        max-width: 250px;
        padding: 1rem 1.1rem;
        border-left: 2px solid #b08b58;
        color: #65716e;
        font-size: .70rem;
        line-height: 1.65;
    }

    .production-create,
    .production-services,
    .production-plan,
    .production-message {
        border: 1px solid #d5c7b5;
        background: #fffdf8;
    }

    .production-create {
        margin-bottom: 1.25rem;
        padding: clamp(1.4rem, 3vw, 2.3rem);
    }

    .production-section-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.2rem;
    }

    .production-section-heading .eyebrow,
    .production-plan-heading .eyebrow {
        margin-bottom: .35rem !important;
        color: #9a7646 !important;
        font-size: .57rem !important;
        letter-spacing: .18em !important;
    }

    .production-section-heading h2,
    .production-plan-heading h2 {
        margin: 0;
        font-size: clamp(1.8rem, 2.6vw, 2.7rem);
        line-height: 1;
    }

    .production-form label {
        display: grid;
        gap: .42rem;
        color: #40595c;
        font-size: .65rem;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .production-form input,
    .production-form select,
    .production-status-form select {
        min-height: 48px;
        border: 1px solid #cdbda7;
        border-radius: 0;
        background: #fff;
    }

    .production-service-fields {
        display: grid;
        grid-template-columns: minmax(250px, 2fr) minmax(150px, 1fr) minmax(130px, .7fr);
        gap: .85rem;
    }

    .production-dessert-heading,
    .production-dessert-row {
        display: grid;
        grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr) 210px;
        gap: .85rem;
    }

    .production-dessert-heading {
        margin: 1.35rem 0 .42rem;
        color: #75807d;
        font-size: .59rem;
        font-weight: 800;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .production-dessert-rows {
        display: grid;
        gap: .6rem;
    }

    .production-form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .7rem;
        margin-top: 1.2rem;
    }

    .production-demand-summary {
        margin: 0 0 1.2rem;
        padding: 1rem 1.1rem;
        border-left: 3px solid #a98049;
        background: #f7f0e6;
    }

    .production-demand-summary h3 {
        margin: 0 0 .65rem;
        color: #123943;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .production-demand-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: .55rem;
    }

    .production-demand-item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .15rem .7rem;
        padding: .65rem .7rem;
        border: 1px solid #ded1bf;
        background: #fffdf9;
        color: #40595c;
        font-size: .78rem;
    }

    .production-demand-item strong {
        color: #123943;
        font-size: .62rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .production-demand-item span {
        grid-column: 1;
    }

    .production-demand-item b {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        color: #9a7646;
        font-size: 1.1rem;
    }

    .production-department-manager {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1.5rem;
        margin: -0.1rem 0 1.25rem;
        padding: 1.15rem 1.35rem;
        border: 1px solid #d5c7b5;
        background: #f7f0e6;
    }

    .production-department-manager .eyebrow {
        margin-bottom: .35rem !important;
        color: #9a7646 !important;
        font-size: .57rem !important;
        letter-spacing: .18em !important;
    }

    .production-department-manager h2 {
        margin: 0;
        color: #123943;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.35rem;
        font-weight: 400;
    }

    .production-department-form {
        display: flex;
        align-items: end;
        gap: .65rem;
    }

    .production-department-form label {
        display: grid;
        gap: .35rem;
        min-width: 240px;
        color: #40595c;
        font-size: .58rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .production-department-form input {
        min-height: 42px;
        border: 1px solid #cdbda7;
        border-radius: 0;
    }

    .production-department-form button {
        min-height: 42px;
        border-radius: 0;
        font-size: .61rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .production-form-actions button,
    .production-plan-heading button {
        min-height: 46px;
        border-radius: 0;
        font-size: .65rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .production-secondary-button {
        border: 1px solid #b49366 !important;
        background: transparent !important;
        color: #385355 !important;
    }

    .production-secondary-button:hover {
        background: #f2e8d9 !important;
    }

    .production-layout {
        display: grid;
        grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }

    .production-services,
    .production-plan {
        padding: clamp(1.25rem, 2.4vw, 2rem);
    }

    .production-service-list {
        display: grid;
        gap: .55rem;
    }

    .production-service-link {
        display: grid;
        gap: .18rem;
        padding: .95rem 1rem;
        border: 1px solid #ded2c0;
        background: #f9f3e9;
        transition: border-color .18s ease, background .18s ease;
    }

    .production-service-link:hover,
    .production-service-link.is-active {
        border-color: #a88658;
        background: #f0e4d3;
    }

    .production-service-link span,
    .production-service-link small {
        color: #79817d;
        font-size: .59rem;
        font-weight: 750;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .production-service-link strong {
        color: #173d46;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.15rem;
        font-weight: 400;
        line-height: 1.12;
    }

    .production-plan-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.35rem;
        padding-bottom: 1.2rem;
        border-bottom: 1px solid #ded2c0;
    }

    .production-plan-heading > div > p:last-child {
        margin: .65rem 0 0;
        color: #6d7976;
        font-size: .75rem;
    }

    .production-empty {
        margin: 0;
        color: #6e7976;
        font-size: .82rem;
        line-height: 1.7;
    }

    .production-empty-large {
        display: grid;
        min-height: 245px;
        place-items: center;
        padding: 2rem;
        border: 1px dashed #ccbaa2;
        background: #faf5ed;
        text-align: center;
    }

    .production-table-wrap {
        overflow-x: auto;
    }

    .production-table {
        min-width: 970px;
        border: 1px solid #d8c9b6;
        background: #fffdf8;
    }

    .production-table th {
        padding: .85rem .75rem;
        border-bottom: 1px solid #d8c9b6;
        background: #f1e6d7;
        color: #6e6f68;
        font-size: .57rem;
        font-weight: 800;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .production-table td {
        padding: .95rem .75rem;
        border-bottom: 1px solid #ebe1d4;
        color: #40595b;
        font-size: .78rem;
    }

    .production-table tr:last-child td {
        border-bottom: 0;
    }

    .production-table td:first-child {
        min-width: 200px;
    }

    .production-table td strong {
        display: block;
        color: #173d46;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.2;
    }

    .production-table td small {
        display: block;
        margin-top: .3rem;
        color: #89908a;
        font-size: .57rem;
        font-weight: 750;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .production-status-form select {
        min-width: 142px;
        min-height: 38px;
        padding: .45rem .5rem;
        color: #254b52;
        font-size: .66rem;
        font-weight: 700;
    }

    .production-status {
        display: inline-block;
        color: #536b67;
        font-size: .69rem;
        font-weight: 750;
    }

    .production-message {
        margin-bottom: 1.25rem;
        padding: 1rem 1.15rem;
        color: #7a352e;
        background: #f9e7e1;
    }

    @media (max-width: 1050px) {
        .production-service-fields {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .production-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 680px) {
        .production-page {
            width: calc(100vw - 20px) !important;
        }

        .production-hero,
        .production-plan-heading,
        .production-department-manager {
            align-items: start;
            flex-direction: column;
        }

        .production-service-fields,
        .production-dessert-heading,
        .production-dessert-row {
            grid-template-columns: 1fr;
        }

        .production-dessert-heading {
            display: none;
        }

        .production-dessert-row {
            padding: .8rem;
            border: 1px solid #e0d2bf;
            background: #fbf6ee;
        }

        .production-form-actions button,
        .production-plan-heading form,
        .production-plan-heading form button,
        .production-department-form,
        .production-department-form button {
            width: 100%;
        }

        .production-department-form label {
            min-width: 0;
            width: 100%;
        }
    }
}


/* =========================================================
   PUBLIC HOMEPAGE REFINEMENT v1
   Quiet, editorial landing page for The Pyrmont Curaçao
   ========================================================= */

@media screen {

    .public-home-body .topbar {
        min-height: 104px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(224, 203, 166, .28);
        background:
            linear-gradient(90deg, #102f38 0%, #173f49 55%, #224f57 100%) !important;
    }

    .public-home-body .pyrmont-brand-mark {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
        padding: 8px;
        background: #eee4d5;
    }

    .public-home-body .pyrmont-brand-mark img {
        opacity: .98;
    }

    .public-home-body .pyrmont-brand-copy {
        gap: 5px;
    }

    .public-home-body .pyrmont-brand-copy strong {
        font-size: clamp(1.15rem, 1.6vw, 1.48rem);
        letter-spacing: .20em;
    }

    .public-home-body .pyrmont-brand-copy small {
        color: #e1c99f;
        font-size: .60rem;
        letter-spacing: .20em;
    }

    .public-home-body .topbar nav {
        gap: 0 !important;
        padding: 4px;
        border: 1px solid rgba(231, 213, 183, .30);
        background: rgba(7, 31, 39, .30);
    }

    .public-home-body .topbar nav .button {
        min-height: 40px;
        padding: 0 .92rem !important;
        border-radius: 0 !important;
        font-size: .62rem !important;
        letter-spacing: .10em;
    }

    .public-home-body .topbar nav .nav-login {
        border: 1px solid rgba(243, 232, 212, .55) !important;
        background: transparent !important;
        color: #fff !important;
    }

    .public-home-body .topbar nav .nav-login:hover {
        border-color: #d9b776 !important;
        background: rgba(255, 255, 255, .10) !important;
    }

    .public-home-body .topbar nav .nav-request {
        margin-left: 4px;
        border: 1px solid #c69758 !important;
        background: #c69758 !important;
        color: #102f38 !important;
    }

    .public-home-body .topbar nav .nav-request:hover {
        border-color: #d7b271 !important;
        background: #d7b271 !important;
    }

    .public-home-body .topbar nav .language-select {
        min-height: 40px;
        margin-left: 6px;
        border-color: rgba(243, 232, 212, .42);
        border-radius: 0;
    }

    .public-home .hero {
        height: min(810px, calc(100vh - 104px));
        min-height: 650px;
        isolation: isolate;
        background: #143b45;
    }

    .public-home .hero-photo {
        transform: scale(1.012);
        transition: opacity 1s ease, transform 8s ease;
    }

    .public-home .hero:hover .hero-photo {
        transform: scale(1.04);
    }

    .public-home .hero-overlay {
        background:
            linear-gradient(90deg, rgba(7, 30, 37, .92) 0%, rgba(8, 38, 45, .73) 42%, rgba(8, 35, 41, .17) 76%, rgba(8, 35, 41, .08) 100%),
            linear-gradient(0deg, rgba(4, 24, 30, .52), transparent 48%);
    }

    .public-home .hero-content {
        width: min(760px, 82%);
        padding: clamp(4.8rem, 10vw, 8.6rem) clamp(1.5rem, 9.2vw, 10.5rem);
    }

    .public-home .hero-content::before {
        content: "";
        display: block;
        width: 64px;
        height: 1px;
        margin-bottom: 1.5rem;
        background: #d5b170;
    }

    .public-home .hero .eyebrow {
        margin-bottom: 1.3rem;
        color: #e3c58d;
        font-size: .65rem;
        letter-spacing: .27em;
    }

    .public-home .hero h1 {
        max-width: 10ch;
        margin-bottom: 1.3rem;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3.4rem, 6.1vw, 6.6rem);
        font-weight: 400;
        line-height: .91;
        letter-spacing: -.055em;
        text-wrap: balance;
    }

    .public-home .hero-copy {
        max-width: 47ch;
        color: rgba(247, 243, 235, .88);
        font-size: clamp(1rem, 1.35vw, 1.16rem);
        line-height: 1.82;
    }

    .public-home .hero-actions {
        gap: 0;
        margin-top: 2.2rem;
        padding: 5px;
        width: fit-content;
        border: 1px solid rgba(244, 231, 206, .42);
        background: rgba(8, 33, 39, .29);
    }

    .public-home .hero-actions .button {
        min-height: 48px;
        border-radius: 0 !important;
        padding: 0 1.25rem;
        font-size: .67rem;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .public-home .hero-actions .hero-secondary {
        margin-left: 5px;
        border: 1px solid rgba(250, 244, 232, .70);
        background: transparent;
        color: #fff;
    }

    .public-home .hero-actions .hero-secondary:hover {
        border-color: #e2bd79;
        background: rgba(255, 255, 255, .10);
        color: #fff;
    }

    .public-home .home-intro {
        position: relative;
        max-width: 1320px;
        padding-top: clamp(5rem, 10vw, 9rem);
        padding-bottom: clamp(4.5rem, 9vw, 8rem);
    }

    .public-home .home-intro::before {
        content: "";
        position: absolute;
        top: 0;
        left: clamp(1.5rem, 5vw, 3rem);
        right: clamp(1.5rem, 5vw, 3rem);
        height: 1px;
        background: #d5c5ad;
    }

    .public-home .home-intro h2 {
        max-width: 11ch;
        color: #123943;
        font-size: clamp(2.8rem, 4.6vw, 5.1rem);
        line-height: .98;
    }

    .public-home .home-intro p:last-child {
        max-width: 42ch;
        margin-bottom: .15rem;
        color: #60706d;
        font-size: clamp(1rem, 1.35vw, 1.18rem);
        line-height: 1.85;
    }

    .public-home .home-features {
        max-width: 1320px;
        margin-bottom: clamp(4.5rem, 9vw, 8rem);
        border-color: #cfbea7;
        background: #cfbea7;
    }

    .public-home .home-features article {
        min-height: 265px;
        padding: 2.1rem 2.3rem 2.35rem;
        background:
            linear-gradient(145deg, #fffdf8 0%, #f5ede1 100%);
        transition: background .2s ease, transform .2s ease;
    }

    .public-home .home-features article:hover {
        background: #fffaf2;
        transform: translateY(-4px);
    }

    .public-home .home-features span {
        margin-bottom: 3.6rem;
        color: #a77c42;
        font-size: .72rem;
        font-weight: 750;
        letter-spacing: .16em;
    }

    .public-home .home-features h3 {
        margin-bottom: .8rem;
        color: #143b45;
        font-size: clamp(1.55rem, 2vw, 2.15rem);
        font-weight: 400;
    }

    .public-home .home-features p {
        max-width: 32ch;
        color: #687572;
        font-size: .84rem;
        line-height: 1.75;
    }

    @media (max-width: 850px) {
        .public-home-body .topbar {
            min-height: 82px !important;
        }

        .public-home-body .pyrmont-brand-mark {
            width: 58px;
            height: 58px;
            flex-basis: 58px;
        }

        .public-home .hero {
            height: calc(100vh - 82px);
            min-height: 620px;
        }

        .public-home .hero-content {
            padding-top: 5rem;
            padding-bottom: 4rem;
        }

        .public-home .hero h1 {
            max-width: 9ch;
        }
    }

    @media (max-width: 620px) {
        .public-home-body .topbar {
            padding-left: .85rem !important;
            padding-right: .85rem !important;
        }

        .public-home-body .pyrmont-brand-mark {
            width: 52px;
            height: 52px;
            flex-basis: 52px;
            padding: 6px;
        }

        .public-home-body .pyrmont-brand-copy strong {
            font-size: .88rem;
            letter-spacing: .16em;
        }

        .public-home-body .pyrmont-brand-copy small {
            display: none;
        }

        .public-home-body .topbar nav {
            padding: 3px;
        }

        .public-home-body .topbar nav .button {
            min-height: 35px;
            padding: 0 .48rem !important;
            font-size: .51rem !important;
        }

        .public-home-body .topbar nav .language-select {
            min-height: 35px;
            max-width: 68px;
            margin-left: 3px;
            font-size: .58rem;
        }

        .public-home .hero {
            min-height: 610px;
        }

        .public-home .hero-content {
            width: 100%;
            padding: 4.4rem 1.35rem 3.3rem;
        }

        .public-home .hero h1 {
            max-width: 8ch;
            font-size: clamp(3.05rem, 15.4vw, 4.5rem);
        }

        /* Dezelfde acties staan al compact in de vaste navigatie.
           Op mobiel tonen we ze daarom niet nogmaals in de hero. */
        .public-home .hero-actions {
            display: none;
        }

        .public-home .home-features article {
            min-height: 0;
        }
    }
}
/* =========================================================
   PYRMONT PASTRY SYSTEM — MOBILE RESPONSIVE RELEASE v1
   2026-10-01
   Alleen presentatielaag. Geen database/recept/costing-logica.
   ========================================================= */

@media screen {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    video,
    svg {
        max-width: 100%;
    }

    /* Lange receptnamen, e-mailadressen en technische tekst mogen
       nooit de mobiele layout buiten het scherm drukken. */
    body,
    .panel,
    .recipe-card,
    .library-card,
    .pyrmont-component-block,
    td,
    th,
    h1,
    h2,
    h3,
    p,
    a {
        overflow-wrap: anywhere;
    }

    @media (max-width: 900px) {

        /* -----------------------------------------------------
           HEADER / NAVIGATIE
           Op mobiel worden alle hoofdfuncties bereikbaar gehouden.
           Geen verborgen Desserts/Deelrecepten/Productie links.
           ----------------------------------------------------- */

        .topbar,
        body.portal-body .topbar,
        body.public-home-body .topbar {
            height: auto !important;
            min-height: 0 !important;
            display: grid !important;
            grid-template-columns: 1fr !important;
            align-items: stretch !important;
            gap: 0 !important;
            padding:
                max(.55rem, env(safe-area-inset-top))
                max(.75rem, env(safe-area-inset-right))
                .55rem
                max(.75rem, env(safe-area-inset-left)) !important;
        }

        .topbar .brand,
        body.portal-body .brand,
        body.public-home-body .brand {
            min-height: 54px !important;
            height: 54px !important;
            width: 100% !important;
            justify-content: flex-start !important;
        }

        .pyrmont-brand-mark {
            width: 44px !important;
            height: 44px !important;
            flex: 0 0 44px !important;
        }

        .pyrmont-brand-copy strong {
            font-size: .98rem !important;
            letter-spacing: .14em !important;
        }

        .pyrmont-brand-copy small {
            font-size: .50rem !important;
            letter-spacing: .14em !important;
        }

        .topbar nav,
        body.portal-body .topbar nav,
        body.public-home-body .topbar nav {
            width: 100% !important;
            min-height: 48px !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: .45rem !important;
            padding: .45rem 0 .1rem !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .topbar nav::-webkit-scrollbar {
            display: none;
        }

        .topbar nav > a,
        .topbar nav > a:not(.button),
        body.portal-body .topbar nav > a,
        body.public-home-body .topbar nav > a {
            display: inline-flex !important;
            flex: 0 0 auto !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 42px !important;
            height: 42px !important;
            padding: 0 .72rem !important;
            border: 1px solid rgba(255,255,255,.18) !important;
            color: #fff !important;
            font-size: .62rem !important;
            line-height: 1 !important;
            letter-spacing: .065em !important;
            white-space: nowrap !important;
            text-transform: uppercase !important;
        }

        .topbar nav > .admin-link {
            margin-left: 0 !important;
            padding-left: .72rem !important;
            border-left: 1px solid rgba(255,255,255,.18) !important;
        }

        .topbar nav > form:not(.language-form),
        .topbar nav > .language-form {
            flex: 0 0 auto !important;
            margin: 0 !important;
        }

        .topbar nav > form:not(.language-form) > button {
            min-height: 42px !important;
            height: 42px !important;
            padding: 0 .72rem !important;
            font-size: .62rem !important;
            white-space: nowrap !important;
        }

        .language-form,
        .language-select {
            min-height: 42px !important;
            height: 42px !important;
        }

        .language-select {
            width: auto !important;
            min-width: 110px !important;
            max-width: 135px !important;
            padding: 0 1.9rem 0 .7rem !important;
            font-size: .68rem !important;
        }

        /* Contextuele beheerbalk mag scrollen i.p.v. uit beeld lopen. */
        .topbar + div[style*="background:#f3eee5"],
        body.portal-body .topbar + div[style*="background:#f3eee5"] {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: .45rem !important;
            padding: .55rem .75rem !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .topbar + div[style*="background:#f3eee5"] > * {
            flex: 0 0 auto !important;
        }

        /* -----------------------------------------------------
           PAGINAKADER / KOPPEN
           ----------------------------------------------------- */

        .portal-main,
        .recipe-page,
        body.portal-body .portal-main,
        .production-page,
        .quick-create-page {
            width: calc(100% - 20px) !important;
            max-width: none !important;
            margin-left: auto !important;
            margin-right: auto !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .portal-heading,
        .pyrmont-recipe-heading {
            min-height: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 1rem !important;
            padding-bottom: 1.25rem !important;
        }

        .portal-heading h1,
        .pyrmont-recipe-heading h1,
        body.portal-body .portal-heading h1 {
            max-width: 100% !important;
            font-size: clamp(2.25rem, 11vw, 4rem) !important;
            line-height: .98 !important;
        }

        .pyrmont-page-actions,
        .library-hero-actions,
        .component-library-actions,
        .smart-paste-actions {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: .55rem !important;
            justify-content: stretch !important;
        }

        .pyrmont-page-actions > *,
        .pyrmont-page-actions form,
        .pyrmont-page-actions .button,
        .library-hero-actions > *,
        .component-library-actions > * {
            width: 100% !important;
            min-width: 0 !important;
        }

        .pyrmont-page-actions form button {
            width: 100% !important;
        }

        /* -----------------------------------------------------
           TOUCH TARGETS / FORMULIEREN
           ----------------------------------------------------- */

        body.portal-body input,
        body.portal-body select,
        body.portal-body textarea,
        input,
        select,
        textarea {
            max-width: 100% !important;
            font-size: 16px !important; /* voorkomt iOS auto-zoom */
        }

        .button,
        button,
        body.portal-body .button,
        body.portal-body button {
            min-height: 46px !important;
            touch-action: manipulation;
        }

        input[type="checkbox"],
        input[type="radio"] {
            min-width: 22px !important;
            width: 22px !important;
            min-height: 22px !important;
            height: 22px !important;
        }

        /* -----------------------------------------------------
           OVERZICHTEN / KAARTEN
           ----------------------------------------------------- */

        .recipe-grid,
        .library-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: .9rem !important;
        }

        .recipe-card,
        .library-card,
        .component-library-card {
            min-width: 0 !important;
            min-height: 0 !important;
        }

        .library-card-media,
        .component-card-media,
        body.portal-body .recipe-card [style*="height:260px"],
        body.portal-body .recipe-card [style*="height:280px"],
        body.portal-body .recipe-card [style*="height:310px"] {
            height: clamp(220px, 37vw, 300px) !important;
        }

        .recipe-card-content,
        .library-card-content {
            padding: 1.15rem !important;
        }

        /* -----------------------------------------------------
           RECEPTDETAIL
           ----------------------------------------------------- */

        .pyrmont-recipe-hero {
            grid-template-columns: 1fr !important;
            min-height: 0 !important;
        }

        .pyrmont-recipe-media,
        .pyrmont-photo-placeholder {
            min-height: 0 !important;
            height: auto !important;
            aspect-ratio: 4 / 3;
        }

        .pyrmont-recipe-media > img {
            width: 100% !important;
            height: 100% !important;
            max-height: none !important;
            object-fit: contain !important;
        }

        .pyrmont-recipe-facts {
            border-left: 0 !important;
            border-top: 1px solid var(--hotel-line, #d2c3af) !important;
            padding: 1.4rem !important;
        }

        .pyrmont-recipe-facts dl > div {
            grid-template-columns: minmax(86px, .42fr) minmax(0, 1fr) !important;
            gap: .8rem !important;
        }

        .pyrmont-component-heading {
            grid-template-columns: 1fr !important;
            gap: 1rem !important;
        }

        .pyrmont-component-photo {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 4 / 3;
        }

        /* -----------------------------------------------------
           TABELLEN
           Kostprijs kan veel kolommen hebben: swipebaar, niet afgekapt.
           ----------------------------------------------------- */

        .panel,
        .admin-section,
        .activation-notice {
            max-width: 100% !important;
        }

        .panel:has(table),
        .admin-section:has(table),
        .table-wrap,
        .table-scroll {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }

        .panel table,
        .admin-section table,
        .table-wrap table,
        .table-scroll table {
            min-width: 560px;
        }

        .panel table th,
        .panel table td {
            white-space: normal;
        }

        /* -----------------------------------------------------
           HERO'S / BIBLIOTHEKEN
           ----------------------------------------------------- */

        .library-hero,
        .component-library-hero {
            grid-template-columns: 1fr !important;
            min-height: 0 !important;
        }

        .library-hero-copy,
        .component-library-copy {
            padding: 2.4rem 1.4rem !important;
        }

        .library-hero-copy h1,
        .component-library-copy h1 {
            max-width: 100% !important;
            font-size: clamp(3rem, 12vw, 5rem) !important;
        }

        .library-hero-image,
        .component-library-art {
            min-height: 360px !important;
        }

        .library-toolbar {
            grid-template-columns: 1fr !important;
        }

        .library-search-row {
            grid-template-columns: minmax(0, 1fr) auto !important;
        }

        .library-search-row .library-clear-search {
            grid-column: 1 / -1;
        }

        /* -----------------------------------------------------
           PRODUCTIEPLANNING
           ----------------------------------------------------- */

        .production-hero,
        .production-section-heading,
        .production-plan-heading {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 1rem !important;
        }

        .production-hero {
            padding: 1.6rem !important;
        }

        .production-hero-note {
            max-width: none !important;
        }

        .production-form,
        .production-grid,
        .production-services-grid {
            min-width: 0 !important;
        }

        /* -----------------------------------------------------
           LOGIN / TOEGANG
           ----------------------------------------------------- */

        .auth-shell.access-experience {
            grid-template-columns: 1fr !important;
            min-height: 0 !important;
        }

        .access-visual {
            min-height: 390px !important;
        }

        .auth-card.access-card {
            min-height: 0 !important;
            padding: 2.6rem 1.4rem 3rem !important;
        }

        /* -----------------------------------------------------
           FOOTER + SAFE AREA
           ----------------------------------------------------- */

        footer {
            padding-left: max(1rem, env(safe-area-inset-left)) !important;
            padding-right: max(1rem, env(safe-area-inset-right)) !important;
            padding-bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
        }
    }


    @media (max-width: 620px) {

        body {
            font-size: 15px;
        }

        .pyrmont-brand-copy small {
            display: none !important;
        }

        .topbar .brand,
        body.portal-body .brand {
            height: 50px !important;
            min-height: 50px !important;
        }

        .pyrmont-page-actions,
        .library-hero-actions,
        .component-library-actions,
        .smart-paste-actions {
            grid-template-columns: 1fr !important;
        }

        .recipe-grid,
        .library-grid {
            grid-template-columns: 1fr !important;
        }

        .library-card-media,
        .component-card-media,
        body.portal-body .recipe-card [style*="height:260px"],
        body.portal-body .recipe-card [style*="height:280px"],
        body.portal-body .recipe-card [style*="height:310px"] {
            height: min(72vw, 300px) !important;
        }

        .recipe-filter,
        .library-search-row {
            grid-template-columns: 1fr !important;
        }

        .recipe-filter button,
        .library-search-row button,
        .library-search-row .library-clear-search {
            width: 100% !important;
            grid-column: auto !important;
        }

        .library-stats {
            grid-template-columns: 1fr !important;
        }

        .library-stat {
            min-height: 76px !important;
        }

        .component-card-facts {
            grid-template-columns: 1fr !important;
        }

        .pyrmont-recipe-facts dl > div {
            grid-template-columns: 1fr !important;
            gap: .25rem !important;
        }

        .pyrmont-meta-line {
            gap: .45rem .9rem !important;
        }

        .panel,
        body.portal-body .panel {
            padding: 1rem !important;
        }

        /* Tabel blijft swipebaar; visueel duidelijker op smalle schermen. */
        .panel table,
        .admin-section table,
        .table-wrap table,
        .table-scroll table {
            min-width: 520px;
            font-size: .80rem !important;
        }

        .smart-preview-grid {
            grid-template-columns: 1fr !important;
        }

        .access-visual {
            min-height: 320px !important;
        }

        .access-wordmark {
            max-width: 190px !important;
        }

        footer {
            flex-direction: column !important;
            gap: .45rem !important;
        }
    }
}