/* ==========================================================================
   MADBLUEZZ CLOTHING — brand layer (Oct 2026)
   Taken from the shop's own visiting card: white card stock, espresso
   monogram, gold wordmark and a thin gold frame. Loaded last, so it only
   re-tunes the existing design system; no markup depends on the old look.
   ========================================================================== */

:root {
  /* Espresso replaces the old midnight navy everywhere */
  --mb-night:      #3a231d;
  --mb-night-deep: #24150f;
  --mb-night-soft: #4c2f27;
  --mb-ink:        #2b1d18;
  --mb-slate:      #6d5f58;
  --mb-mist:       #9b8e86;
  /* Card gold */
  --mb-brass:      #a8874e;
  --mb-brass-deep: #84673a;
  --mb-brass-lite: #dcc394;
  /* "denim" was the secondary accent; now a deep gold-brown for small text */
  --mb-denim:      #84673a;
  --mb-denim-lite: #efe3cf;
  /* Card stock */
  --mb-cream:      #f8f7f4;
  --mb-paper:      #ffffff;
  --mb-sand:       #efebe5;
  --mb-line:       #e6dfd5;
  --mb-line-dark:  rgba(239, 227, 207, .16);
  --mb-shadow:      0 24px 60px -34px rgba(36, 21, 15, .45);
  --mb-shadow-soft: 0 10px 30px -18px rgba(36, 21, 15, .35);
  --mb-frame: 1px solid rgba(168, 135, 78, .75);
}

::selection { background: var(--mb-brass-lite); color: var(--mb-night-deep); }
body { color: var(--mb-ink); }
h1, h2, h3, h4 { color: inherit; }
.mb-btn:focus-visible, .mb-link:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--mb-brass); outline-offset: 3px; }

/* ---------- Header: white card stock with a gold hairline ---------- */
.mb-header { background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 rgba(168, 135, 78, .45); }
.mb-logo img { max-height: 44px; }
.mb-announce { background: var(--mb-night); color: var(--mb-denim-lite); }
.mb-nav__sale { color: var(--mb-brass-deep); }

/* ---------- Hero: framed like the card ---------- */
.mb-hero { background: var(--mb-night); }
.mb-hero::after {
  background:
    linear-gradient(95deg, rgba(36, 21, 15, .9) 0%, rgba(36, 21, 15, .55) 45%, rgba(36, 21, 15, .08) 80%),
    linear-gradient(0deg, rgba(36, 21, 15, .55), transparent 40%);
}
.mb-hero__fallback { background: radial-gradient(900px 520px at 78% 18%, rgba(168, 135, 78, .28), transparent 62%), var(--mb-night); }
.mb-hero::before {
  /* the visiting card's thin gold inset frame */
  content: ''; position: absolute; inset: clamp(12px, 2vw, 24px); z-index: 2; pointer-events: none;
  border: var(--mb-frame);
}
.mb-hero__copy .mb-eyebrow { color: var(--mb-brass-lite); }
.mb-hero h1, .mb-hero .mb-hero-h { font-size: clamp(44px, 6.2vw, 92px); }

/* ---------- Strips & dark sections ---------- */
.mb-marquee { background: var(--mb-night-deep); color: var(--mb-denim-lite); }
.mb-marquee__track span::after { color: var(--mb-brass); }
.mb-cat { background: var(--mb-night); }
.mb-cat::after { background: linear-gradient(0deg, rgba(36, 21, 15, .82), transparent 58%); }
.mb-card__quick { background: rgba(58, 35, 29, .94); }
.mb-card__tag { background: var(--mb-night); }
.mb-card__name:hover { color: var(--mb-brass-deep); }
.mb-news { background: var(--mb-night-soft); }

/* ---------- Visit: the visiting card ---------- */
.mb-visit { background: var(--mb-cream); }
.mb-visit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.mb-visit__intro h2 { margin: 0 0 16px; }
.mb-visit__intro p { max-width: 40ch; color: var(--mb-slate); font-size: 17px; margin: 0 0 26px; }
.mb-visit__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mb-btn--ghost { background: transparent; color: var(--mb-night); border: 1px solid var(--mb-night); }
.mb-btn--ghost:hover { background: var(--mb-night); color: #fff; }

.mb-vcard {
  position: relative; margin: 0; aspect-ratio: 1.75; max-width: 640px; width: 100%; justify-self: end;
  display: grid; grid-template-columns: 1fr 1px 1.2fr; align-items: center; gap: clamp(16px, 3vw, 34px);
  padding: clamp(26px, 4.4vw, 52px) clamp(22px, 4vw, 48px);
  background: #fff; color: var(--mb-ink);
  box-shadow: 0 2px 2px rgba(36, 21, 15, .04), 0 30px 60px -30px rgba(36, 21, 15, .35);
  transform: rotate(-1.2deg);
}
.mb-vcard::before { content: ''; position: absolute; inset: clamp(10px, 1.6vw, 16px); border: var(--mb-frame); pointer-events: none; }
.mb-vcard::after { content: ''; grid-column: 2; grid-row: 1; align-self: stretch; background: var(--mb-brass); opacity: .8; }
.mb-vcard__brand { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vw, 26px); }
.mb-vcard__logo { width: 100%; max-width: 230px; height: auto; }
.mb-vcard__qr { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--mb-ink); text-decoration: none; }
.mb-vcard__qr span { display: block; width: clamp(64px, 8vw, 92px); aspect-ratio: 1; }
.mb-vcard__qr span svg { width: 100%; height: 100%; display: block; }
.mb-vcard__qr small { font-size: 11px; letter-spacing: .14em; color: var(--mb-slate); }
.mb-vcard__info { grid-column: 3; grid-row: 1; display: grid; gap: clamp(12px, 1.8vw, 18px); font-size: clamp(13px, 1.25vw, 15.5px); line-height: 1.45; }
.mb-vcard__name { font-family: var(--mb-sans); font-weight: 500; font-size: clamp(17px, 1.9vw, 22px); color: var(--mb-ink); margin-bottom: 4px; }
.mb-vcard__row { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.mb-vcard__row .mb-icon { width: 17px; height: 17px; color: var(--mb-night); margin-top: 2px; }
.mb-vcard__row span { display: grid; gap: 2px; }
.mb-vcard__row a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mb-vcard__row a:hover { color: var(--mb-brass-deep); }
.mb-vcard__row address { font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .mb-vcard { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
  .mb-vcard:hover { transform: rotate(0deg); }
}
@media (max-width: 900px) {
  .mb-visit__grid { grid-template-columns: 1fr; }
  .mb-vcard { justify-self: center; transform: none; }
}
@media (max-width: 520px) {
  .mb-vcard { aspect-ratio: auto; grid-template-columns: 1fr; grid-template-rows: auto 1px auto; text-align: left; padding: 30px 26px; }
  .mb-vcard::after { grid-column: 1; grid-row: 2; height: 1px; align-self: auto; }
  .mb-vcard__brand { grid-row: 1; flex-direction: row; justify-content: space-between; }
  .mb-vcard__logo { max-width: 170px; }
  .mb-vcard__info { grid-column: 1; grid-row: 3; font-size: 15px; }
}

/* ---------- FAQ ---------- */
.mb-faq { padding: clamp(64px, 9vw, 110px) 0; background: #fff; border-top: 1px solid var(--mb-line); }
.mb-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.mb-faq__intro h2 { margin: 0 0 14px; }
.mb-faq__intro p { color: var(--mb-slate); margin: 0; }
.mb-faq__intro a { color: var(--mb-night); border-bottom: 1px solid var(--mb-brass); white-space: nowrap; }
.mb-faq__list { border-top: 1px solid var(--mb-line); }
.mb-faq__item { border-bottom: 1px solid var(--mb-line); }
.mb-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--mb-serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; color: var(--mb-ink); }
.mb-faq__item summary::-webkit-details-marker { display: none; }
.mb-faq__item summary::after { content: '+'; flex: 0 0 auto; font-family: var(--mb-sans); font-size: 24px; font-weight: 300; color: var(--mb-brass-deep); transition: transform .25s; }
.mb-faq__item[open] summary::after { transform: rotate(45deg); }
.mb-faq__item p { margin: -6px 0 22px; max-width: 62ch; color: var(--mb-slate); font-size: 16px; }
@media (max-width: 800px) { .mb-faq__grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.mb-footer { background: var(--mb-night-deep); color: rgba(239, 227, 207, .72); }
.mb-footer__logo img { width: 200px; max-width: 100%; height: auto; max-height: none; }
.mb-footer h5, .mb-footer h4, .mb-footer__links h4 { color: var(--mb-brass-lite); }
.mb-footer__contact .mb-icon { color: var(--mb-brass); }
.mb-footer__bottom { border-top-color: rgba(168, 135, 78, .3); }

/* ---------- Mobile app chrome ---------- */
@media (max-width: 768px) {
  .mb-appbar { background: #fff; box-shadow: 0 1px 0 rgba(168, 135, 78, .45); }
  .mb-appbar__logo img { max-height: 30px; }
  .mb-tabbar { background: var(--mb-night-deep); }
  .mb-hero::before { inset: 9px; }
  .is-home .mb-hero::before { border-radius: 15px; }
}