/* ==========================================================================
   MCS shared UI
   The design system introduced on the Events page, generalised so every public
   page can adopt it. Every selector is namespaced .mcs-ui-* and lives under a
   .mcs-ui wrapper, so this file cannot reach the admin back-office even though
   cMaster.tpl loads it site-wide.

   events.css keeps its own .mcs-ev-* tokens; the values here are identical, so
   the two read as one system.
   ========================================================================== */

.mcs-ui {
    --mcs-bg:     #F5EFE5;
    --mcs-card:   #FFFDFA;
    --mcs-ink:    #2E1B14;
    --mcs-dark:   #4A2822;
    --mcs-accent: #C05A2A;
    --mcs-muted:  #8A7059;
    --mcs-line:   #E6DCCC;
    --mcs-chip:   #EFE6D8;
    --mcs-body:   #5C4638;

    --mcs-r-lg: 18px;
    --mcs-r-md: 14px;
    --mcs-r-sm: 10px;

    /* Lato-Bold/Regular are the site's own @font-face families (main.css). Each
       face is declared font-weight:normal, so display text asks for 400 and lets
       the bold face do the work — requesting 700 would smear it with a synthetic
       embolden on top of an already-bold outline. */
    --mcs-display: "Lato-Bold", "Lato-Regular", Helvetica, Arial, sans-serif;
    --mcs-sans:    "Lato-Regular", Helvetica, Arial, sans-serif;

    font-family: var(--mcs-sans);
    color: var(--mcs-ink);
    -webkit-font-smoothing: antialiased;
}

.mcs-ui {
    background: var(--mcs-bg);
    /* body is #fff (main.css:188); without this the cream stops where the
       content does and leaves a white band above the footer on short pages. */
    min-height: 100vh;
    padding-bottom: 80px;
}

.mcs-ui *,
.mcs-ui *:before,
.mcs-ui *:after { box-sizing: border-box; }

.mcs-ui-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.mcs-ui-narrow { max-width: 820px; }

/* Fixed-navbar clearance. A .mcs-ui-hero carries its own 132px top padding and
   is meant to tuck under the bar; every other page opens straight into a plain
   container that would otherwise start underneath the fixed nav and lose its
   breadcrumb / heading. Pad only those. */
.mcs-ui > .mcs-ui-container:first-child:not(:has(> .mcs-ui-hero)) { padding-top: 104px; }
@media (max-width: 767px) {
    .mcs-ui > .mcs-ui-container:first-child:not(:has(> .mcs-ui-hero)) { padding-top: 84px; }
}

/* ---------- hero ---------------------------------------------------------- */

/* The nav is position:fixed, so the first section has to clear it. 132px is a
   pre-paint fallback only: mcsFitHero() measures the real navbar and overwrites
   it, because the bar grows a second row when a user is signed in. */
.mcs-ui-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 132px 0 0;
}

.mcs-ui-hero-copy { flex: 1 1 auto; min-width: 0; }
.mcs-ui-hero-cta  { flex: 0 0 auto; text-align: right; padding-bottom: 4px; }
.mcs-ui-hero-cta p { font-size: 13px; color: var(--mcs-muted); margin: 0 0 10px; }

.mcs-ui-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mcs-accent);
    margin: 0 0 14px;
}

.mcs-ui h1.mcs-ui-h1 {
    font-family: var(--mcs-display);
    font-size: 44px;
    line-height: 1.15;
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0 0 16px;
    letter-spacing: -0.2px;
    max-width: 17em;
    text-transform: none;
}

.mcs-ui-lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--mcs-muted);
    margin: 0;
    max-width: 46em;
}

/* main.css:58 gives every hr width:50%; left:25% plus a gradient background,
   which renders as a short floating dash. */
.mcs-ui hr.mcs-ui-rule {
    width: 100%;
    left: 0;
    position: static;
    height: 1px;
    background: var(--mcs-line);
    background-image: none;
    border: 0;
    margin: 32px 0 26px;
}

/* ---------- breadcrumb ---------------------------------------------------- */

.mcs-ui-crumbs {
    font-size: 12.5px;
    color: var(--mcs-muted);
    letter-spacing: .3px;
    margin: 0 0 18px;
}
.mcs-ui-crumbs a,
.mcs-ui-crumbs .mcs-ui-crumb-link {
    color: var(--mcs-muted);
    cursor: pointer;
    text-decoration: none;
}
.mcs-ui-crumbs a:hover,
.mcs-ui-crumbs .mcs-ui-crumb-link:hover { color: var(--mcs-accent); text-decoration: underline; }
.mcs-ui-crumbs .sep { margin: 0 8px; opacity: .55; }

/* ---------- toolbar / filters --------------------------------------------- */

.mcs-ui-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.mcs-ui-searchwrap {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
}

.mcs-ui-searchwrap .fa {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mcs-muted);
    font-size: 14px;
    pointer-events: none;
}

.mcs-ui input.mcs-ui-search,
.mcs-ui select.mcs-ui-select {
    height: 46px;
    border: 1px solid var(--mcs-line);
    background: #fff;
    border-radius: 999px;
    font-size: 15px;
    font-style: normal;
    color: var(--mcs-ink);
    font-family: var(--mcs-sans);
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mcs-ui input.mcs-ui-search { width: 100%; padding: 0 20px 0 44px; }

.mcs-ui select.mcs-ui-select {
    padding: 0 38px 0 18px;
    min-width: 172px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238A7059' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.mcs-ui input.mcs-ui-search:focus,
.mcs-ui select.mcs-ui-select:focus {
    border-color: var(--mcs-accent);
    box-shadow: 0 0 0 3px rgba(192, 90, 42, .12);
}

.mcs-ui input.mcs-ui-search::placeholder { color: #A89684; font-style: normal; }

/* The actions beside a card, a row or a form (Edit, Delete, Cancel, Report, Clear ...) are keys (css/keys.css) a size
   down from the main buttons; this is their size and type. Next to a main button (Cancel by Save, Clear by Search)
   they take the main size: add --lg. */
.mcs-ui-morelink {
    --pk-k: .85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    font-family: var(--mcs-sans, "Lato-Bold", Helvetica, Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.mcs-ui-morelink--lg {
    --pk-k: 1.1;
    min-height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- form fields --------------------------------------------------- */

.mcs-ui-field { min-width: 0; }

.mcs-ui-field label,
.mcs-ui-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--mcs-muted);
    margin: 0 0 7px;
}

/* Prado renders its own controls in here; normalise them. */
.mcs-ui-field input[type="text"],
.mcs-ui-field input[type="email"],
.mcs-ui-field input[type="password"],
.mcs-ui-field select,
.mcs-ui .mcs-ui-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-sm);
    background: #fff;
    font-size: 14px;
    font-style: normal;
    font-family: var(--mcs-sans);
    color: var(--mcs-ink);
    box-shadow: none;
    outline: none;
}
.mcs-ui-field input[type="text"]:focus,
.mcs-ui-field select:focus,
.mcs-ui .mcs-ui-input:focus {
    border-color: var(--mcs-accent);
    box-shadow: 0 0 0 3px rgba(192, 90, 42, .12);
}

/* ---------- buttons ------------------------------------------------------- */

/* Every button is a key (css/keys.css): the shape, colour, bevel and the press all come from there, and the tone
   from the class (-accent, -dark, -maroon; none is light, -ghost is light too). This is only its size and type. */
.mcs-ui .mcs-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 26px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--mcs-sans);
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* ---------- section heading ----------------------------------------------- */

.mcs-ui-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.mcs-ui-sechead .mcs-ui-morelink { align-self: center; }

.mcs-ui h2.mcs-ui-h2 {
    font-family: var(--mcs-display);
    font-size: 25px;
    line-height: 1.25;
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.mcs-ui h3.mcs-ui-h3 {
    font-family: var(--mcs-display);
    font-size: 19px;
    line-height: 1.3;
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0 0 10px;
    text-transform: none;
    letter-spacing: 0;
}

.mcs-ui-count { font-size: 13px; color: var(--mcs-muted); }

.mcs-ui-prose {
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--mcs-body);
}
.mcs-ui-prose p { margin: 0 0 14px; }
.mcs-ui-nowrap { white-space: nowrap; }
.mcs-ui-official { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; }
.mcs-ui-official svg { flex: 0 0 auto; width: clamp(17px, .6em, 28px); height: clamp(17px, .6em, 28px); }
.mcs-ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mcs-ui-tag-unverified { background: var(--mcs-chip, #EFE6D8); color: var(--mcs-muted, #8A7059); }
.mcs-ui-not-endorsed { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--mcs-muted, #8A7059); }
.mcs-ui-hint { margin: 0 0 12px; font-size: 13px; color: var(--mcs-muted, #8A7059); }
form.mcs-ui-panel .mcs-ui-field { margin-bottom: 14px; }
form.mcs-ui-panel > .mcs-ui-btn[type="submit"] { width: 100%; box-sizing: border-box; }
.mcs-ev-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.mcs-ev-check input { flex: 0 0 auto; margin-top: 3px; }
.mcs-ev-minor-body { display: none; margin-top: 10px; }
.mcs-ev-minor:has(#ev-minor:checked) .mcs-ev-minor-body { display: block; }
/* the guardian notice: capitals, at least 5pt larger than the text around it (Event Terms, section 7) */
.mcs-ev-guardian-notice { margin: 12px 0; text-transform: uppercase; font-size: calc(1em + 5pt); line-height: 1.35; }
.mcs-ev-guardian-notice p { margin: 0 0 10px; }
.mcs-ui-lede + .mcs-ui-disclaimer { margin-top: 8px; }
.mcs-ui-disclaimer { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; font-style: italic; color: var(--mcs-muted, #8A7059); }
.mcs-ui-prose h2 { margin: 26px 0 10px; font-size: 20px; }
.mcs-ui-prose ul, .mcs-ui-prose ol { margin: 0 0 14px; padding-left: 24px; }
.mcs-ui-prose li { margin-bottom: 6px; }
.mcs-ui-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.mcs-ui-prose th, .mcs-ui-prose td { border: 1px solid var(--mcs-line, #E6DCCC); padding: 8px 10px; text-align: left; vertical-align: top; }
.mcs-ui-prose th { background: var(--mcs-chip, #EFE6D8); }
.mcs-ui-prose a { color: var(--mcs-accent); }

/* ---------- meta row ------------------------------------------------------ */

.mcs-ui-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--mcs-muted);
}
/* a row of small keys rather than of words: closer together */
.mcs-ui-meta--actions { gap: 8px; }
.mcs-ui-meta span { display: inline-flex; align-items: center; gap: 7px; }
.mcs-ui-meta .fa { font-size: 12px; opacity: .8; }

.mcs-ui-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--mcs-chip);
    color: var(--mcs-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.mcs-ui-tag-accent { background: rgba(192, 90, 42, .12); color: #8A3F1D; }

/* ---------- card grid ----------------------------------------------------- */

.mcs-ui-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.mcs-ui-grid-tight { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }

.mcs-ui-card {
    display: flex;
    flex-direction: column;
    background: var(--mcs-card);
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease;
}
.mcs-ui-card:hover {
    box-shadow: 0 14px 30px -20px rgba(46, 27, 20, .45);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.mcs-ui-card-link { cursor: pointer; }

/* Fixed-ratio well so wildly different logo and pack-shot dimensions still line
   the grid up. object-fit:contain keeps logos whole; .is-cover opts a card into
   filling the frame instead. */
.mcs-ui-card-media {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--mcs-line);
    overflow: hidden;
}
.mcs-ui-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.mcs-ui-card-media.is-cover img { object-fit: cover; padding: 0; }
/* a small flag in the corner of a card's picture: the "Official" mark on a roaster. Opaque, so it
   reads over any logo, and out of the title so a long name can never clamp it away. */
.mcs-ui-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: var(--mcs-card);
    box-shadow: 0 0 0 1px rgba(192, 90, 42, .35), 0 3px 8px -3px rgba(46, 27, 20, .4);
}

.mcs-ui-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
    min-width: 0;
}

.mcs-ui-card-title {
    font-family: var(--mcs-display);
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: normal;
    color: var(--mcs-ink);
    margin: 0 0 5px;
    /* Roaster and coffee names vary wildly in length; clamping keeps every card
       in the row the same height without truncating server-side. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mcs-ui-card:hover .mcs-ui-card-title { color: var(--mcs-accent); }

.mcs-ui-card-sub {
    font-size: 13px;
    line-height: 1.45;
    color: var(--mcs-muted);
    margin: 0;
}

.mcs-ui-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mcs-body);
    margin: 10px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcs-ui-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 12.5px;
    color: var(--mcs-muted);
}

.mcs-ui-empty {
    grid-column: 1 / -1;
    padding: 56px 24px;
    text-align: center;
    color: var(--mcs-muted);
    font-size: 15px;
    background: rgba(255, 253, 250, .6);
    border: 1px dashed var(--mcs-line);
    border-radius: var(--mcs-r-md);
}

/* select2 replaces the native <select> with its own container; give the
   replacement the same shell as .mcs-ui-field select so the two read alike. */
.mcs-ui .select2-container { width: 100% !important; }
.mcs-ui .select2-container .select2-choice,
.mcs-ui .select2-container .select2-selection--single {
    height: 42px;
    line-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-sm);
    background: #fff;
    background-image: none;
    box-shadow: none;
    font-size: 14px;
    color: var(--mcs-ink);
}

/* ---------- settings badge strip (coffee cards) --------------------------- */

.mcs-ui-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    letter-spacing: .3px;
    background: var(--mcs-chip);
    color: var(--mcs-ink);
    border-bottom: 1px solid var(--mcs-line);
}
.mcs-ui-badge img { height: 10px; width: auto; display: inline; vertical-align: baseline; }
.mcs-ui-badge-mine { background: var(--mcs-dark); color: #FFFDFA; border-bottom-color: var(--mcs-dark); }
.mcs-ui-badge-num {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    font-weight: 700;
}
.mcs-ui-badge-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mcs-ui-badge-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* two cards side by side on a small phone leave "Roaster Settings" a few pixels short: tighten the strip a little
   so the whole label shows (never "Roaster Setti…") */
@media (max-width: 400px) {
    .mcs-ui-badge { padding-left: 10px; padding-right: 10px; letter-spacing: 0; gap: 6px; }
    .mcs-ui-badge-label { gap: 4px; }
}
/* rendered but not shown — reserves its row's height so a card with fewer
   badge types doesn't end up shorter than one with all of them. */
.mcs-ui-badge-empty { visibility: hidden; }

/* ---------- spec list (coffee cards) -------------------------------------- */

.mcs-ui-specs {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--mcs-ink);
}
.mcs-ui-specs dt {
    display: inline;
    font-weight: 400;
    color: var(--mcs-muted);
    letter-spacing: .4px;
}
.mcs-ui-specs dd { display: inline; margin: 0; }
/* a long value (a long roaster/origin/process name) would otherwise wrap to
   a second line and make just that one card taller than its neighbors;
   truncating keeps every spec row — and so the whole card — one consistent
   height regardless of how long any given value happens to be. */
.mcs-ui-specs .row-break {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcs-ui-notes {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    font-style: italic;
    color: var(--mcs-body);
    /* reserves 2 lines' worth of space whether or not there's any text, and
       clamps longer notes to the same 2 lines, so this section is never the
       reason one card in a row is taller than the others. */
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- panel --------------------------------------------------------- */

.mcs-ui-panel {
    background: var(--mcs-card);
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-md);
    padding: 24px 26px;
}
.mcs-ui-panel-quiet { background: rgba(255, 253, 250, .6); }

/* ---------- accordion (FAQ) ----------------------------------------------- */

/* The accordion script (mcs.js) finds its panels through the .panel/.panel-collapse
   classes that Bootstrap's stylesheet gives chrome to, so that chrome is stripped
   here rather than by removing the classes. */
.mcs-ui .panel,
.mcs-ui .panel-group .panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}
.mcs-ui .panel-group .panel + .panel { margin-top: 0; }
.mcs-ui .panel-heading { background: transparent; border: 0; padding: 0; border-radius: 0; }
.mcs-ui .panel-title { margin: 0; padding: 0; font-size: inherit; }
.mcs-ui .panel-body { border: 0 !important; padding: 0; }

.mcs-ui-accordion { border-top: 1px solid var(--mcs-line); }

.mcs-ui-acc-item { border-bottom: 1px solid var(--mcs-line); }

.mcs-ui-acc-head a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px;
    font-family: var(--mcs-display);
    font-size: 17.5px;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--mcs-ink);
    text-decoration: none;
    cursor: pointer;
}
.mcs-ui-acc-head a:hover,
.mcs-ui-acc-head a:focus { color: var(--mcs-accent); text-decoration: none; }

.mcs-ui-acc-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mcs-chip);
    color: var(--mcs-ink);
    font-size: 11px;
    line-height: 26px;
    text-align: center;
    transition: background .15s ease, color .15s ease, transform .18s ease;
}
.mcs-ui-acc-head a:hover .mcs-ui-acc-icon { background: var(--mcs-accent); color: #fff; }
.mcs-ui-acc-head a[aria-expanded="true"] .mcs-ui-acc-icon {
    background: var(--mcs-accent); color: #fff; transform: rotate(180deg);
}

.mcs-ui-acc-body {
    padding: 0 40px 22px 4px;
    font-size: 15px;
    line-height: 1.68;
    color: var(--mcs-body);
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 991px) {
    .mcs-ui h1.mcs-ui-h1 { font-size: 36px; }
    .mcs-ui-hero { flex-direction: column; align-items: flex-start; gap: 22px; }
    .mcs-ui-hero-cta { text-align: left; padding-bottom: 0; }
    
    
    
}

@media (max-width: 767px) {
    .mcs-ui { padding-bottom: 48px; }
    .mcs-ui-container { padding: 0 16px; }
    .mcs-ui h1.mcs-ui-h1 { font-size: 29px; }
    .mcs-ui h2.mcs-ui-h2 { font-size: 21px; }
    .mcs-ui-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    
    .mcs-ui-grid-tight { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
    .mcs-ui-card-body { padding: 13px 14px 15px; }
    .mcs-ui-panel { padding: 18px; }
    .mcs-ui-acc-head a { font-size: 16px; padding: 17px 2px; }
    .mcs-ui-acc-body { padding-right: 8px; }
}

/* ==========================================================================
   Segmented toggle (Explore: Coffees | Roasters)
   ========================================================================== */

.mcs-ui-segbar {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 26px 0 0;
    background: var(--mcs-chip);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(46, 27, 20, .16);
}

/* each choice is a key (css/keys.css) sitting in the trough; the chosen one (.is-on) is pressed in */
.mcs-ui-segbar .mcs-ui-seg {
    --pk-k: .9;
    display: inline-block;
    padding: 8px 21px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* ==========================================================================
   Top bar
   Outside .mcs-ui (it is emitted by base.html), so it carries its own tokens. One row: the logo
   on the left (with its name; a signed-in person on a phone gets the globe alone), then on every
   page but the home page a round back arrow and, once signed in, a Menu button, and on the right
   Profile once signed in, or language / Login / Registration for visitors. There is no menu bar:
   signed-in people steer from the home hub (menu.css).
   ========================================================================== */

.mcs-nav {
    --mcs-bg:     #F5EFE5;   --mcs-card:   #FFFDFA;
    --mcs-ink:    #2E1B14;   --mcs-dark:   #4A2822;
    --mcs-accent: #C05A2A;   --mcs-muted:  #8A7059;
    --mcs-line:   #E6DCCC;   --mcs-chip:   #EFE6D8;

    font-family: "Lato-Regular", Helvetica, Arial, sans-serif;
    background: #F1E8DC;
    border: 0;
    border-bottom: 1px solid var(--mcs-line);
    border-radius: 0;
    margin: 0;
    min-height: 0;
    /* the legacy .navbar rules pad the top (15px on a phone, 10px and 8px on a tablet), which left
       the logo and buttons off-centre; the bar below carries that height itself instead, so the
       whole bar is the same height as before with everything in the middle of it */
    padding: 0;
    box-shadow: none;
}

.mcs-nav .mcs-nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1180px;
    height: 90px;
    margin: 0 auto;
    padding: 0 28px;
}

.mcs-nav .mcs-nav-brand { flex: none; display: inline-flex; align-items: center; padding: 0; }
.mcs-nav .mcs-nav-logo { display: block; height: 34px; width: auto; }

/* the home page's heading: the name, in the middle of the bar between the logo and Profile (it floats
   free of the row, so it is centred on the screen whatever the two ends weigh) */
.mcs-nav .mcs-nav-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: var(--mcs-display);
    font-weight: normal;
    font-size: clamp(20px, 5.4vw, 28px);
    line-height: 1;
    letter-spacing: -.012em;
    white-space: nowrap;
    color: var(--mcs-ink);
}

.mcs-nav .mcs-nav-links { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; }

.mcs-nav .mcs-nav-link {
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mcs-body, #5C4638);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.mcs-nav .mcs-nav-link:hover,
.mcs-nav .mcs-nav-link:focus { background: rgba(46, 27, 20, .06); color: var(--mcs-ink); text-decoration: none; }

.mcs-nav .mcs-nav-actions { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* The round back arrow and Menu (the home hub) sit beside the logo; Profile is on the right. All of them are keys
   (css/keys.css); this is their size and type. The page you are on (.is-on) is the one pressed in. */
.mcs-nav .mcs-nav-go { flex: none; display: flex; align-items: center; gap: 8px; }
.mcs-nav .mcs-nav-arrow,
.mcs-nav .mcs-nav-home,
.mcs-nav .mcs-nav-settings,
.mcs-nav .mcs-nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
}
.mcs-nav .mcs-nav-arrow { flex: none; justify-content: center; width: 44px; padding: 0; }
.mcs-nav .mcs-nav-home,
.mcs-nav .mcs-nav-settings { padding: 0 15px 0 11px; }
.mcs-nav .mcs-nav-arrow svg,
.mcs-nav .mcs-nav-home svg,
.mcs-nav .mcs-nav-settings svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.mcs-nav .mcs-nav-arrow svg { width: 20px; height: 20px; }
.mcs-nav .mcs-nav-settings svg { width: 22px; height: 22px; stroke-width: 1.7; }
.mcs-nav .mcs-nav-profile { padding: 3px 15px 3px 3px; }
.mcs-nav .mcs-nav-profile img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }

/* visitors: Login / Registration and the language switch (keys: css/keys.css) */
.mcs-nav .mcs-nav-ghost,
.mcs-nav .mcs-nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 17px;
    font-size: 14px;
    font-weight: 700;
}

.mcs-nav .mcs-nav-lang { position: relative; }
.mcs-nav .mcs-nav-lang-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px;
    font-size: 13px; font-weight: 700;
}
.mcs-nav .mcs-nav-menu {
    min-width: 186px;
    margin-top: 10px;
    padding: 7px;
    border: 1px solid var(--mcs-line);
    border-radius: var(--mcs-r-md, 14px);
    background: var(--mcs-card);
    box-shadow: 0 14px 34px rgba(46, 27, 20, .15);
}
.mcs-nav .mcs-nav-menu > li > a {
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mcs-body, #5C4638);
}
.mcs-nav .mcs-nav-menu > li > a:hover { background: var(--mcs-chip); color: var(--mcs-ink); }
.mcs-nav .mcs-nav-menu > li > a.is-on { color: var(--mcs-accent); }

.mcs-preview-banner {
    background: var(--mcs-accent, #B5542B); color: #fff; text-align: center;
    font-size: 13px; font-weight: 600; padding: 7px 12px;
}
.mcs-preview-banner a { color: #fff; text-decoration: underline; }

/* tablet and desktop show the logo with its name; on a phone a signed-in person gets the globe
   alone (the <picture> in _nav.html swaps the image), a visitor still gets the full logo, and the
   buttons trim to fit */
@media (max-width: 767px) {
    .mcs-nav .mcs-nav-links { display: none; }
    .mcs-nav .mcs-nav-bar { height: 76px; padding: 0 14px; gap: 10px; }
    .mcs-nav .mcs-nav-ghost,
    .mcs-nav .mcs-nav-cta { padding: 0 13px; font-size: 13px; }
}
@media (max-width: 599px) {
    .mcs-nav .mcs-nav-logo { height: 40px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-logo { height: 28px; }
    .mcs-nav .mcs-nav-profile { padding: 4px; }
    .mcs-nav .mcs-nav-profile span,
    .mcs-nav .mcs-nav-settings span { display: none; }
    .mcs-nav .mcs-nav-settings { width: 44px; padding: 0; justify-content: center; }
}
/* a visitor's bar (logo, back arrow, EN, Login, Registration) needs the tighter set up to 419px: at the 390px of
   an iPhone 12 to 16 the roomier one runs past the edge of the screen */
@media (max-width: 419px) {
    .mcs-nav.mcs-nav--visitor .mcs-nav-bar { gap: 8px; padding: 0 12px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-logo { height: 24px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-actions { gap: 4px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-lang-btn { padding: 0 8px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-ghost,
    .mcs-nav.mcs-nav--visitor .mcs-nav-cta { padding: 0 10px; font-size: 12.5px; }
}
/* the smallest phones (320px): logo, back arrow, EN, Login and Registration all still fit */
@media (max-width: 349px) {
    .mcs-nav.mcs-nav--visitor .mcs-nav-bar { gap: 4px; padding: 0 8px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-actions { gap: 2px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-lang-btn { padding: 0 6px; }
    .mcs-nav.mcs-nav--visitor .mcs-nav-ghost,
    .mcs-nav.mcs-nav--visitor .mcs-nav-cta { padding: 0 7px; }
}

/* ==========================================================================
   Photo grid
   Image-first tiles, tight gutters, no card chrome. Specs are not dropped —
   they surface in a hover overlay on pointer devices, and the always-on
   caption keeps the grid scannable on touch where hover never fires.
   ========================================================================== */

/* -------------------------------------------------------------------- */
/*  Bag-scan progress — a spinner next to the status line so a scan     */
/*  (which can take a few seconds, especially with the AI's fact-check  */
/*  pass) never reads as frozen.                                        */
/* -------------------------------------------------------------------- */
.mcs-scan-status { display: flex; align-items: center; gap: 8px; }
.mcs-scan-spinner {
    width: 15px; height: 15px; flex: 0 0 auto;
    border: 2px solid rgba(192, 90, 42, .25);
    border-top-color: var(--mcs-accent);
    border-radius: 50%;
    animation: mcs-scan-spin .8s linear infinite;
}
@keyframes mcs-scan-spin { to { transform: rotate(360deg); } }
.cf-scan.is-scanning .se-label,
.cf-scan.is-scanning .cf-scan-body > .se-hint:first-of-type { opacity: .55; }

.cf-studio-preview { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .08); }
.cf-studio-preview img {
    display: block; max-width: 220px; max-height: 220px; width: auto;
    margin: 10px 0 12px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.cf-studio-choice { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Take a photo / Upload a picture: a matched pair, two equal columns while there is room, then two equal full-width keys */
.cf-scan-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.mcs-ui .cf-scan-alt > .mcs-ui-btn { margin: 0; min-width: 0; box-sizing: border-box; height: auto; min-height: 44px;
    padding: 10px 16px; white-space: normal; line-height: 1.2; text-align: center; text-wrap: balance; }