/* WodMachine theme — matches the Claude-design mockup (orange/navy, Barlow). */
:root {
    --wm-orange: #FF5A2C;
    --wm-orange-light: #FFEDE7;
    --wm-orange-border: #FFD3C5;
    --wm-navy: #0E2B3E;
    --wm-navy-dark: #0B2030;
    --wm-text: #4A5663;
    --wm-text-light: #5A6B79;
    --wm-text-muted: #8A95A3;
    --wm-text-faint: #9AA7B2;
    --wm-border: #E3E9EF;
    --wm-border-2: #E9EEF3;
    --wm-bg: #F4F7FA;
    --wm-bg-2: #EAEFF4;
    --wm-row-border: #EEF2F6;
    --wm-input-border: #D7DEE5;
    --wm-radius: 16px;
    --wm-radius-sm: 10px;
    --wm-radius-lg: 18px;
}

body {
    background: #fff;
    font-family: 'Barlow', system-ui, sans-serif;
    color: var(--wm-text);
}

h1, h2, h3, h4, .wm-display {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--wm-navy);
    letter-spacing: .005em;
}

/* ---------------------------------------------------------------- Nav --- */
.wm-nav { background: #fff; border-bottom: 1px solid var(--wm-border-2); position: sticky; top: 0; z-index: 1000; }
.wm-nav-inner {
    max-width: 1180px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; padding: 16px 24px;
}
.wm-logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 112px; min-width: 0; }
.wm-logo img { display: block; width: 112px; max-width: 100%; height: auto; object-fit: contain; object-position: left center; }
.wm-nav-links { display: flex; align-items: center; gap: 22px; flex: 1; justify-content: center; }
.wm-nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.wm-nav-links a.nav-link, .wm-nav-links button.nav-link {
    font: 600 15px Barlow, sans-serif; color: var(--wm-text-light); text-decoration: none;
    padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.wm-nav-links a.nav-link.active { color: var(--wm-navy); border-bottom-color: var(--wm-orange); }
.wm-nav-logout-form { display: inline; margin: 0; }
.wm-nav-logout-btn.nav-link { background: none; border: none; cursor: pointer; }
.wm-burger { display: none; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--wm-text-light); padding: .25rem .5rem; }

.wm-unit-toggle { display: inline-flex; background: var(--wm-bg-2); border-radius: 9px; padding: 3px; }
.wm-unit-toggle button {
    font: 700 12px Inter, sans-serif; letter-spacing: .02em; padding: 6px 13px;
    border: none; border-radius: 6px; cursor: pointer; background: transparent; color: var(--wm-text-light);
}
.wm-unit-toggle button.active { background: var(--wm-navy); color: #fff; box-shadow: 0 1px 3px rgba(14,43,62,.2); }
.wm-nav-sep { width: 1px; height: 24px; background: var(--wm-border); margin: 0 4px; }

.wm-btn {
    display: inline-flex; align-items: center; gap: 8px; font: 700 15px Barlow, sans-serif;
    text-decoration: none; border-radius: 10px; padding: 10px 18px; border: none; cursor: pointer;
}
.wm-btn-primary { background: var(--wm-orange); color: #fff; box-shadow: 0 6px 16px rgba(255,90,44,.28); }
.wm-btn-primary:hover { color: #fff; opacity: .92; }
.wm-btn-outline { background: #fff; color: var(--wm-navy); border: 1.5px solid var(--wm-input-border); }
.wm-btn-outline:hover { color: var(--wm-navy); }
.wm-btn-light { background: #fff; color: var(--wm-orange); border: 1.5px solid var(--wm-orange-border); }
.wm-btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }

/* --------------------------------------------------------------- Hero --- */
.wm-hero { padding: 56px 24px 52px; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 48px; align-items: center; }
.wm-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.wm-eyebrow .bar { width: 26px; height: 3px; background: var(--wm-orange); border-radius: 3px; }
.wm-eyebrow .label { font: 700 12px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--wm-orange); }
.wm-hero h1 { font-size: 56px; line-height: .98; margin: 0 0 20px; }
.wm-hero h1 .accent { color: var(--wm-orange); }
.wm-hero p.lead { font: 400 18px/1.6 Barlow, sans-serif; color: var(--wm-text); max-width: 470px; margin: 0 0 30px; text-transform: none; }
.wm-hero-note { font: 500 14px Barlow, sans-serif; color: var(--wm-text-muted); margin-top: 18px; }

.wm-section { padding: 8px 24px 52px; }
.wm-section-bg { background: var(--wm-bg); border-top: 1px solid var(--wm-border-2); padding: 52px 24px; }
.wm-section-card { border-radius: var(--wm-radius); margin: 0 24px; }
.wm-section-head { text-align: center; margin-bottom: 34px; }
.wm-section-head .kicker { font: 700 12px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--wm-orange); margin-bottom: 10px; }
.wm-section-head h2 { font-size: 34px; margin: 0; }

.wm-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wm-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .wm-grid-3, .wm-grid-2, .wm-hero { grid-template-columns: minmax(0, 1fr); } }

.wm-stat { background: var(--wm-bg); border: 1px solid var(--wm-border-2); border-radius: var(--wm-radius); padding: 26px 24px; }
.wm-stat .num { font: 800 44px/1 'Barlow Condensed', sans-serif; color: var(--wm-navy); }
.wm-stat .desc { margin-top: 6px; font: 500 14px/1.45 Barlow, sans-serif; color: var(--wm-text-light); }

.wm-step { background: var(--wm-bg); border: 1px solid var(--wm-border-2); border-radius: var(--wm-radius); padding: 26px 24px; }
.wm-step .badge-num {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 11px; background: var(--wm-navy); color: #fff; font: 800 18px 'Barlow Condensed', sans-serif; margin-bottom: 16px;
}
.wm-step.accent .badge-num { background: var(--wm-orange); }
.wm-step h3 { font: 700 19px Barlow, sans-serif; text-transform: none; color: var(--wm-navy); margin: 0 0 7px; }

.wm-focus-lane { background: var(--wm-bg); border: 1px solid var(--wm-border-2); border-radius: var(--wm-radius); padding: 16px 18px; }
.wm-focus-lane-label { font: 700 14px Barlow, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--wm-orange); margin-bottom: 10px; }
.wm-focus-move { display: flex; align-items: baseline; gap: 6px; padding: 6px 0; border-top: 1px solid var(--wm-border-2); }
.wm-focus-move:first-child { border-top: none; padding-top: 0; }
.wm-focus-move-key { font-weight: 700; color: var(--wm-text-light); }
.wm-focus-move .name { flex: 1; font: 500 15px Barlow, sans-serif; color: var(--wm-navy); }
.wm-focus-move .load { white-space: nowrap; }
.wm-step p { margin: 0; font: 400 15px/1.55 Barlow, sans-serif; color: var(--wm-text-light); }

.wm-cta-band {
    padding: 48px 24px; background: var(--wm-navy); display: flex; align-items: center;
    justify-content: space-between; gap: 24px; flex-wrap: wrap; border-radius: var(--wm-radius);
}
.wm-cta-band h2 { color: #fff; font-size: 32px; margin: 0 0 6px; }
.wm-cta-band p { color: #AEC0CE; margin: 0; font: 400 16px Barlow, sans-serif; }

/* -------------------------------------------------------------- Cards --- */
.wm-card { background: #fff; border: 1px solid var(--wm-border); border-radius: var(--wm-radius-lg); }
.wm-card-pad { padding: 26px; }
.wm-card-shadow { box-shadow: 0 8px 24px rgba(14,43,62,.08); }
.wm-card-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--wm-row-border); gap: 16px; }
.wm-card-body { padding: 20px 28px 24px; }
.wm-card-dark { background: var(--wm-navy); border-radius: var(--wm-radius); box-shadow: 0 8px 24px rgba(14,43,62,.18); color: #fff; }

.wm-page-head { padding: 40px 0 24px; }
.wm-page-head h2 { font-size: 34px; margin: 0 0 4px; }
.wm-page-head p { margin: 0; font: 400 16px Barlow, sans-serif; color: var(--wm-text-light); text-transform: none; }

.wm-badge {
    display: inline-flex; align-items: center; font: 700 11px Inter, sans-serif; letter-spacing: .14em;
    text-transform: uppercase; background: var(--wm-orange-light); color: var(--wm-orange);
    padding: 5px 10px; border-radius: 7px;
}
.wm-cap { font: 600 14px Barlow, sans-serif; color: var(--wm-orange); }
.wm-scheme { font: 800 36px/1 'Barlow Condensed', sans-serif; color: var(--wm-navy); }
.wm-scheme-sub { font: 700 10px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--wm-text-faint); }

.wm-refresh-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 10px; border: 1px solid var(--wm-border); color: var(--wm-text-muted); font-size: 16px;
    background: #fff; cursor: pointer; flex-shrink: 0;
}
.wm-card-dark .wm-refresh-btn { border-color: rgba(255,255,255,.2); color: #AEC0CE; background: transparent; }
.wm-card-dark h3, .wm-card-dark h4, .wm-card-dark h2 { color: #fff; }
.wm-card-dark .text-muted { color: #AEC0CE !important; }
.wm-card-dark .wm-card-header { border-bottom-color: rgba(255,255,255,.1); }
.wm-card-dark .wm-cap { color: var(--wm-orange); }
.wm-card-dark .wm-table th { color: #7E93A4; border-bottom-color: rgba(255,255,255,.12); }
.wm-card-dark .wm-table td { color: #fff; border-bottom-color: rgba(255,255,255,.08); }
.wm-card-dark .wm-table td.pattern { color: #7E93A4; }
.wm-card-dark .wm-table td.load span, .wm-card-dark .wm-pill { background: rgba(255,255,255,.1); color: #fff; }
.wm-card-dark details summary { color: #AEC0CE; }

/* min-width:0 matters because this sits inside CSS grid/flex containers
   (which default to min-width:auto on their items) — without it, a wide
   table could still force the grid track itself wider than the viewport
   instead of scrolling inside this box. With that contained, the table can
   safely size to its content and scroll horizontally rather than cramming
   columns and breaking words mid-word. */
.wm-table-scroll { width: 100%; min-width: 0; overflow-x: auto; }
.wm-table { width: 100%; min-width: max-content; border-collapse: collapse; }
.wm-table td, .wm-table th { white-space: nowrap; }
.wm-table .wm-scaled { white-space: normal; }
.wm-table th { text-align: left; padding: 0 0 10px; font: 700 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-text-faint); border-bottom: 1px solid var(--wm-border); }
.wm-table th.r { text-align: right; }
.wm-table td { padding: 14px 0; border-bottom: 1px solid var(--wm-row-border); font: 500 15px Barlow, sans-serif; color: var(--wm-navy); }
.wm-table tr:last-child td { border-bottom: none; }
.wm-table td.name { font: 600 17px Barlow, sans-serif; }
.wm-table td.pattern { color: var(--wm-text-faint); font-size: 14px; }
.wm-table td.load { text-align: right; }
.wm-scaled { margin-top: 4px; font: 500 13px Barlow, sans-serif; color: var(--wm-text-muted); text-transform: none; }
.wm-scaled-tag { font: 700 10px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--wm-orange); border: 1px solid var(--wm-orange-border); background: var(--wm-orange-light); padding: 2px 6px; border-radius: 5px; }
.wm-card-dark .wm-scaled { color: #AEC0CE; }
.wm-table td.load span, .wm-pill { background: #F1F4F7; padding: 5px 10px; border-radius: 6px; font: 700 13px Inter, sans-serif; color: var(--wm-navy); }

.wm-coupling { margin: 14px 0 0; background: var(--wm-bg); border: 1px solid var(--wm-border-2); border-radius: 12px; padding: 16px 18px; }
.wm-coupling .head { font: 700 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-text-light); margin-bottom: 12px; }
.wm-coupling .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-chip { font: 600 13px Barlow, sans-serif; color: var(--wm-navy); background: #fff; border: 1px solid var(--wm-border); padding: 7px 12px; border-radius: 8px; }
.wm-chip b { color: var(--wm-orange); }

.wm-step-card { background: #fff; border: 1px solid var(--wm-border-2); border-radius: var(--wm-radius); box-shadow: 0 2px 6px rgba(14,43,62,.05); padding: 22px 24px; }
.wm-step-card .head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wm-step-card .num {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 10px; background: var(--wm-orange-light); color: var(--wm-orange); font: 800 16px 'Barlow Condensed', sans-serif; flex-shrink: 0;
}
.wm-card-dark .wm-step-card .num,
.wm-step-card.dark .num { background: var(--wm-orange); color: #fff; }
.wm-step-card .title { font: 700 20px 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--wm-navy); }
.wm-card-dark .title { color: #fff; }
.wm-step-card .sub { font: 500 13px Barlow, sans-serif; color: var(--wm-text-faint); }
.wm-card-dark .sub { color: #7E93A4; }
.wm-tag { font: 500 14px Barlow, sans-serif; color: var(--wm-navy); background: var(--wm-bg); border: 1px solid var(--wm-border-2); padding: 8px 13px; border-radius: 9px; display: inline-block; }
.wm-card-dark .wm-tag { color: #fff; background: rgba(255,255,255,.08); border: none; }

/* -------------------------------------------------------------- Forms --- */
.wm-pill-toggle { display: inline-flex; background: var(--wm-bg-2); border-radius: 11px; padding: 4px; }
.wm-pill-toggle a, .wm-pill-toggle button {
    font: 700 14px Barlow, sans-serif; color: var(--wm-text-muted); padding: 9px 18px; border-radius: 8px;
    text-decoration: none; border: none; background: none; cursor: pointer;
}
.wm-pill-toggle a.active, .wm-pill-toggle button.active { color: #fff; background: var(--wm-navy); box-shadow: 0 2px 6px rgba(14,43,62,.18); }

.wm-segment { display: inline-flex; width: 100%; background: var(--wm-bg-2); border-radius: 10px; padding: 4px; }
.wm-segment label { flex: 1; text-align: center; font: 600 13px Barlow, sans-serif; color: var(--wm-text-muted); padding: 9px 0; border-radius: 7px; cursor: pointer; margin: 0; }
.wm-segment input { display: none; }
.wm-segment input:checked + label { color: var(--wm-navy); font-weight: 700; background: #fff; box-shadow: 0 1px 3px rgba(14,43,62,.12); }

.wm-field { margin-bottom: 18px; }
.wm-label, label.form-label {
    display: block; font: 700 12px Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: var(--wm-text-light); margin-bottom: 8px;
}
.wm-label-hint {
    color: var(--wm-text-muted); font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 4px;
}
.form-check-label { font: 500 14px Barlow, sans-serif; color: var(--wm-text); }
small.text-muted, .text-muted { color: var(--wm-text-muted) !important; }
.wm-input, .wm-select, select.form-select, input.form-control {
    background: #fff; border: 1px solid var(--wm-input-border); border-radius: var(--wm-radius-sm);
    padding: 13px 16px; font: 500 15px Barlow, sans-serif; color: var(--wm-navy); width: 100%;
}
.wm-hint { font: 500 13px Barlow, sans-serif; color: var(--wm-text-muted); }
.wm-generator-card .wm-card-body { padding: 26px; }
.wm-mode-toggle { margin-bottom: 24px; }
.wm-mode-btn { font: 700 14px Barlow, sans-serif; color: var(--wm-text-muted); padding: 9px 18px; border-radius: 8px; border: none; background: none; cursor: pointer; }
.wm-mode-btn.active { color: #fff; background: var(--wm-navy); box-shadow: 0 2px 6px rgba(14,43,62,.18); }
.wm-filter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .68fr); gap: 18px 18px; align-items: start; }
.wm-form-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px;
    font: 500 13px Barlow, sans-serif; color: var(--wm-text-muted);
}
.wm-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.wm-token-box {
    min-height: 52px; background: #fff; border: 1px solid var(--wm-input-border); border-radius: var(--wm-radius-sm);
    padding: 8px 12px; display: flex; align-items: center;
}
.wm-token-list {
    display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px;
}
.wm-token-list:empty { display: none; }
.wm-token {
    display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 7px;
    background: var(--wm-orange); color: #fff; padding: 7px 9px 7px 10px;
    font: 700 13px Barlow, sans-serif; cursor: pointer; box-shadow: 0 2px 5px rgba(255,90,44,.18);
}
.wm-token b { font: 800 13px Inter, sans-serif; line-height: 1; opacity: .86; }
.wm-token-input {
    flex: 1 1 100%; min-width: 0; border: none; outline: none; background: transparent;
    padding: 6px 4px; font: 500 15px Barlow, sans-serif; color: var(--wm-navy);
}
.wm-token-input::placeholder { color: var(--wm-text-muted); }
.wm-filter-aside { align-self: start; }
.wm-ad-kicker {
    text-align: center; font: 700 10px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
    color: var(--wm-text-faint); margin: 0 0 8px;
}
.wm-ad-rect { min-height: 250px; max-width: 300px; margin-left: auto; margin-right: auto; flex-direction: column; text-align: center; }
.wm-ad-leaderboard { max-width: 728px; margin-left: auto; margin-right: auto; }
.wm-recipe-ad { min-height: 100%; }
/* Google sizes "auto" responsive ads to whatever width the container resolves
   to before render — without an explicit cap here a rect ad on a full-width
   mobile column stretches edge-to-edge and renders huge. Constraining the
   container (not clipping the ad after the fact) is Google's own recommended
   approach for responsive units. */
.wm-ad { overflow: hidden; }
.wm-ad .adsbygoogle { max-width: 100%; }

/* ------------------------------------------------------------- Layout --- */
.wm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 48px; }
.wm-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .wm-content-grid { grid-template-columns: minmax(0, 1fr); } }
.wm-ad { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 90px;
    border: 1.5px dashed #C9D3DC; border-radius: 12px;
    background: repeating-linear-gradient(45deg,#fff,#fff 11px,#F6F8FB 11px,#F6F8FB 22px); }
.wm-ad-tag { font: 700 10px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--wm-orange); border: 1px solid var(--wm-orange-border); background: var(--wm-orange-light); padding: 3px 8px; border-radius: 5px; }
.wm-ad-label { font: 600 13px Inter, sans-serif; color: var(--wm-text-muted); }

.wm-footer { padding: 24px; background: var(--wm-navy-dark); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.wm-footer span.copy { font: 600 14px Barlow, sans-serif; color: #7E93A4; }
.wm-footer .links { display: flex; gap: 22px; }
.wm-footer .links span, .wm-footer .links a { font: 500 14px Barlow, sans-serif; color: #AEC0CE; text-decoration: none; }

.wm-recipe-card { background: #fff; border: 1px solid var(--wm-border-2); border-radius: var(--wm-radius); overflow: hidden; box-shadow: 0 2px 6px rgba(14,43,62,.05); text-decoration: none; display: block; color: inherit; }
.wm-recipe-card .img { width: 100%; height: 150px; object-fit: cover; display: block; background: linear-gradient(135deg,#DCE7EE,#C3D4DF); }
.wm-recipe-card .body { padding: 16px 18px; }
.wm-recipe-card .cat { font: 700 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-orange); margin-bottom: 7px; }
.wm-recipe-card h3 { font: 700 19px Barlow, sans-serif; color: var(--wm-navy); margin: 0 0 5px; text-transform: none; }
.wm-recipe-card .meta { font: 500 13px Barlow, sans-serif; color: var(--wm-text-faint); }

@media (max-width: 900px) {
    .wm-burger { display: block; }
    .wm-nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
        border-bottom: 1px solid var(--wm-border-2); flex-direction: column; align-items: stretch;
        padding: .5rem 1rem 1rem; z-index: 10; gap: 0;
    }
    .wm-nav-links.open { display: flex; }
    .wm-nav-links a.nav-link, .wm-nav-links button.nav-link { margin: .4rem 0; border-bottom: none; text-align: left; }
    .wm-nav-links a.nav-link.active { background: var(--wm-bg); border-radius: 8px; padding: .4rem .6rem; }
}

@media (max-width: 760px) {
    .wm-filter-grid { grid-template-columns: minmax(0, 1fr); }
    .wm-form-footer { align-items: stretch; flex-direction: column; }
    .wm-form-actions { justify-content: stretch; }
    .wm-form-actions .wm-btn, .wm-form-footer .wm-btn { justify-content: center; flex: 1; }
    .wm-section-card { margin: 0; }
}

@media (max-width: 560px) {
    .wm-nav-inner { padding: 12px 16px; gap: 8px; }
    .wm-logo { flex-basis: 92px; }
    .wm-logo img { width: 92px; }
    .wm-nav-actions { gap: 8px; }
    .wm-unit-toggle button { padding: 6px 9px; font-size: 11px; }
    .wm-nav-sep { display: none; }
    .wm-nav-actions .wm-btn-primary { display: none; }
}

@media (max-width: 480px) {
    .wm-hero h1 { font-size: 40px; }
    /* Equal-width flex:1 buttons make the longer CTA text ("Build my hour ->")
       wrap onto multiple lines while the shorter one stays on one — stack
       them instead so each gets the full row width. */
    .wm-form-actions { flex-direction: column; align-items: stretch; }
}

/* ----------------------------------------------------------- Recipe --- */
.wm-crumb { padding: 22px 0 8px; font: 600 14px Barlow, sans-serif; color: var(--wm-text-muted); }
.wm-crumb a { color: var(--wm-orange); text-decoration: none; }

.wm-recipe-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding-bottom: 48px; }
@media (max-width: 900px) { .wm-recipe-layout { grid-template-columns: 1fr; } }

.wm-recipe-hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--wm-radius); margin-bottom: 20px; }
.wm-recipe-title { font-size: 42px; margin: 10px 0 12px; }
.wm-recipe-lead { font: 400 17px/1.6 Barlow, sans-serif; color: var(--wm-text); text-transform: none; margin: 0 0 22px; max-width: 600px; }

.wm-recipe-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.wm-recipe-stat { background: #fff; border: 1px solid var(--wm-border-2); border-radius: 12px; padding: 14px 20px; text-align: center; min-width: 84px; }
.wm-recipe-stat .num { font: 800 28px/1 'Barlow Condensed', sans-serif; color: var(--wm-navy); }
.wm-recipe-stat .cap { font: 700 10px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--wm-text-faint); margin-top: 4px; }
.wm-recipe-stat.accent { background: var(--wm-orange-light); border-color: var(--wm-orange-border); }
.wm-recipe-stat.accent .num { color: var(--wm-orange); }
.wm-recipe-stat.dark { background: var(--wm-navy); border-color: var(--wm-navy); }
.wm-recipe-stat.dark .num, .wm-recipe-stat.dark .cap { color: #fff; }

.wm-recipe-actions { display: flex; gap: 12px; margin-bottom: 8px; }

.wm-recipe-h2 { font-size: 26px; margin: 32px 0 16px; }
.wm-recipe-h2-sub { font: 500 13px Barlow, sans-serif; text-transform: none; color: var(--wm-text-muted); margin-left: 8px; }

.wm-recipe-steps { display: grid; gap: 12px; }
.wm-recipe-steps .wm-step-card p { margin: 0; font: 400 15px/1.55 Barlow, sans-serif; color: var(--wm-text-light); text-transform: none; }

.wm-tip { background: var(--wm-orange-light); border: 1px solid var(--wm-orange-border); border-radius: 12px; padding: 14px 18px; font: 500 15px/1.5 Barlow, sans-serif; color: var(--wm-navy); text-transform: none; margin-top: 18px; }
.wm-tip-label { font: 700 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-orange); margin-right: 6px; }

.wm-nutrition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .wm-nutrition-grid { grid-template-columns: repeat(2, 1fr); } }
.wm-nutrition-item { background: var(--wm-bg); border: 1px solid var(--wm-border-2); border-radius: 12px; padding: 16px; text-align: center; }
.wm-nutrition-item .num { font: 800 22px/1 'Barlow Condensed', sans-serif; color: var(--wm-navy); }
.wm-nutrition-item .label { font: 600 12px Barlow, sans-serif; color: var(--wm-text-muted); margin-top: 4px; }

.wm-recipe-aside { position: sticky; top: 86px; }
.wm-ingredients-card { margin-bottom: 18px; }
.wm-ingredients-card .wm-card-header { flex-wrap: wrap; }
.wm-portion-stepper { display: inline-flex; align-items: center; gap: 10px; background: var(--wm-bg-2); border-radius: 9px; padding: 4px 6px; }
.wm-portion-stepper button { width: 26px; height: 26px; border-radius: 6px; border: none; background: #fff; color: var(--wm-navy); font: 700 16px sans-serif; cursor: pointer; line-height: 1; }
.wm-portion-stepper span { font: 600 13px Barlow, sans-serif; color: var(--wm-navy); white-space: nowrap; }

.wm-ingredient-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wm-ingredient-list label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wm-ingredient-list input[type="checkbox"] { margin-top: 3px; accent-color: var(--wm-orange); width: 16px; height: 16px; flex-shrink: 0; }
.wm-ingredient-text { font: 500 15px/1.4 Barlow, sans-serif; color: var(--wm-navy); text-transform: none; }
.wm-ingredient-list input:checked ~ .wm-ingredient-text { color: var(--wm-text-faint); text-decoration: line-through; }
.wm-qty { font-weight: 700; }

.wm-equipment-label { font: 700 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-text-faint); margin: 20px 0 10px; }
.wm-equipment-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------ Star rating --- */
.wm-star-rating { display: flex; flex-direction: row-reverse; gap: 4px; font-size: 0; }
.wm-star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.wm-star-rating label {
    font-size: 32px; line-height: 1; color: var(--wm-border-2); cursor: pointer; transition: color .1s;
}
.wm-star-rating label:hover, .wm-star-rating label:hover ~ label,
.wm-star-rating input:checked ~ label { color: var(--wm-orange); }