/* ============================================================
   MadFishOne theme base: the FULL token contract with neutral
   defaults, plus the containment reset the blocks were designed
   against. Load order matters: this sheet first, then the
   builder-generated mfo-tokens.css (brand overrides), then
   mfo-blocks.css. Without the defaults here, every var() the
   builder does not emit invalidates its whole declaration.
   ============================================================ */
:root {
    /* brand */
    --mfo-brand:    #2a5b6e;
    --mfo-on-brand: #ffffff;
    --mfo-secondary: #46606b;
    --mfo-accent:   #d98841;
    --mfo-btn:       var(--mfo-accent);
    --mfo-btn-hover: color-mix(in srgb, var(--mfo-btn) 84%, black);
    --mfo-on-btn:    #ffffff;
    --mfo-nav-bg:    var(--mfo-bg);
    --mfo-nav-ink:   var(--mfo-ink);
    --mfo-nav-hover: var(--mfo-brand);
    --mfo-nav-hover-ink: var(--mfo-nav-hover);
    /* surfaces */
    --mfo-bg:       #ffffff;
    --mfo-surface:  #f6f5f3;
    --mfo-border:   #e4e1dc;
    /* text */
    --mfo-ink:      #23211e;
    --mfo-body:     #4a4741;
    --mfo-muted:    #8a857c;
    /* success/savings green: cart savings rows, in-stock flags */
    --mfo-savings:  #68904d;
    /* the gray the 0.5px hairline rules blend the border toward */
    --mfo-hairline: #b9b9b9;
    /* shape, depth, type, rhythm */
    --mfo-radius:    10px;
    --mfo-radius-sm: 6px;
    --mfo-shadow:    0 2px 12px rgba(0, 0, 0, 0.07);
    --mfo-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --mfo-font-body:    system-ui, -apple-system, sans-serif;
    --mfo-density:   1;
}

/* Brand type carries store-wide (stock Cornerstone areas included). */
body { font-family: var(--mfo-font-body); }

/* ── Containment reset ─────────────────────────────────────────
   Neutralizes Cornerstone's base styles (link underlines, list
   bullets, heading margins) inside MFO blocks ONLY. Stock areas
   (PDP internals, cart, account) keep Cornerstone's own styling. */
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) a {
    color: inherit;
    text-decoration: none;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* MF1 widget headings carry their own color logic (Design-tab settings with
   token fallbacks); excluding them here keeps this chrome rule from
   out-specifying the widgets' single-class heading rules. */
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) :is(h1, h2, h3, h4):not([class*="mf1-"]) {
    font-family: var(--mfo-font-heading);
    color: var(--mfo-ink);
    line-height: 1.15;
    margin: 0;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) p {
    margin: 0;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) :is(img, svg) {
    display: block;
    max-width: 100%;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) button {
    font: inherit;
    cursor: pointer;
}

/* Text inputs inside MFO forms (newsletter, footer, 404 search) */
:is(.mfo-news-form, .mfo-footer-news, .mfo-404-search) input {
    font: inherit;
    color: var(--mfo-ink);
    background: var(--mfo-bg);
    border: 1px solid var(--mfo-border);
    border-radius: var(--mfo-radius-sm);
    padding: 12px 14px;
    min-width: 0;
}
:is(.mfo-news-form, .mfo-footer-news, .mfo-404-search) input:focus {
    outline: none;
    border-color: var(--mfo-brand);
}