/*
Theme Name: MasMartHome Atelier
Theme URI: https://masmarthome.com
Author: SuperAds
Description: Tema híbrido (estilo SuperVentas + Chollometro) con estética arquitectónica de diseño de interiores y domótica futurista, equipado con las paletas de @bymarcoperez y logotipo M·H Nodo.
Version: 1.7.0
Text Domain: masmarthome-atelier
*/

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }
  img, picture, svg, video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }
}

@layer tokens {
  /* Paleta oficial por defecto: LEICA Q3 ICE (Ice Blue + Midnight Ink + Vermilion) */
  :root,
  [data-palette="leica"] {
    --c-bg: #E9F2F7;
    --c-surface: #FFFFFF;
    --c-surface-alt: #C9DFEA;
    --c-surface-ice: #C9DFEA;
    --c-dark: #082E43;
    --c-dark-2: #082E43;
    --c-ink: #082E43;
    --c-ink-muted: #1B4962;
    --c-ink-on-dark: #FFFFFF;
    --c-accent: #C83217;        /* AA contrast 5.35:1 with white text */
    --c-accent-pop: #FF4F31;    /* Vermilion border / large display / dot */
    --c-accent-warm: #FF4F31;
    --c-accent-ink: #FFFFFF;
    --c-border: rgba(8, 46, 67, 0.24);
    --c-border-strong: rgba(8, 46, 67, 0.52);
    --c-grid-line: rgba(8, 46, 67, 0.07);
    --c-focus: #C83217;

    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Outfit", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-tech: "Space Grotesk", "Outfit", ui-sans-serif, system-ui, sans-serif;
    --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-soft: 0 1px 2px rgba(8, 46, 67, 0.06), 0 10px 28px rgba(8, 46, 67, 0.06);
    --shadow-hover: 0 12px 32px rgba(8, 46, 67, 0.13);
    --container-max: 1320px;
  }

  /* Escena alternativa: Atelier Fusión (Ivory + Midnight Ink + Forest) */
  [data-palette="atelier"] {
    --c-bg: #F7F5ED;
    --c-surface: #FFFFFF;
    --c-surface-alt: #EDF3F6;
    --c-surface-ice: #C9DFEA;
    --c-dark: #082E43;
    --c-dark-2: #073D35;
    --c-ink: #082E43;
    --c-ink-muted: #2B4E5F;
    --c-ink-on-dark: #F7F5ED;
    --c-accent: #C83217;
    --c-accent-pop: #FF4F31;
    --c-accent-warm: #FF8E70;
    --c-accent-ink: #FFFFFF;
    --c-border: rgba(8, 46, 67, 0.22);
    --c-border-strong: rgba(8, 46, 67, 0.48);
    --c-grid-line: rgba(8, 46, 67, 0.06);
    --c-focus: #C83217;
  }

  /* Paleta 3 del vídeo: afterhours (Forest Green + Ivory + Coral) */
  [data-palette="afterhours"] {
    --c-bg: #073D35;
    --c-surface: #0C4B42;
    --c-surface-alt: #105A4F;
    --c-surface-ice: #13685B;
    --c-dark: #042923;
    --c-dark-2: #042923;
    --c-ink: #F7F5ED;
    --c-ink-muted: #D5DBD2;
    --c-ink-on-dark: #F7F5ED;
    --c-accent: #FF8E70;       /* Coral on Forest: 5.41:1 with #073D35 text */
    --c-accent-pop: #FF8E70;
    --c-accent-warm: #FF8E70;
    --c-accent-ink: #042923;
    --c-border: rgba(247, 245, 237, 0.26);
    --c-border-strong: rgba(247, 245, 237, 0.55);
    --c-grid-line: rgba(247, 245, 237, 0.06);
    --c-focus: #FF8E70;
  }

  /* Paleta 1 del vídeo: OLIPOP (Lemon Yellow + Cobalt Blue + Hot Pink) */
  [data-palette="olipop"] {
    --c-bg: #F8E45C;
    --c-surface: #FFFBE0;
    --c-surface-alt: #F4DA3B;
    --c-surface-ice: #E9EEFF;
    --c-dark: #1734BE;
    --c-dark-2: #11268E;
    --c-ink: #1734BE;          /* 7.15:1 on #F8E45C */
    --c-ink-muted: #122996;
    --c-ink-on-dark: #F8E45C;
    --c-accent: #B81469;       /* AA 6.28:1 with white text */
    --c-accent-pop: #ED258C;
    --c-accent-warm: #ED258C;
    --c-accent-ink: #FFFFFF;
    --c-border: rgba(23, 52, 190, 0.30);
    --c-border-strong: rgba(23, 52, 190, 0.65);
    --c-grid-line: rgba(23, 52, 190, 0.07);
    --c-focus: #B81469;
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
    background-color: var(--c-bg);
    background-image:
      linear-gradient(to right, var(--c-grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--c-grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
    color: var(--c-ink);
    line-height: 1.6;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  main {
    flex: 1 0 auto;
  }

  h1, h2, h3, h4 {
    margin-block-start: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--c-ink);
  }

  a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  :where(a:any-link, button, input, select, summary):focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
}

@layer layout {
  .mmh-container {
    inline-size: min(100% - 2rem, var(--container-max));
    margin-inline: auto;
  }

  .mmh-section {
    padding-block: clamp(2rem, 4vw, 3.75rem);
  }

  .deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.25rem;
  }

  .guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    grid-auto-rows: auto;
    gap: 1.35rem;
  }

  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  @media (min-width: 960px) {
    .article-layout {
      grid-template-columns: minmax(0, 1fr) 320px;
      align-items: start;
    }
  }
}

@layer components {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .skip-link:focus {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 999;
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
  }

  /* Top Utility & Palette Bar */
  .mmh-topbar {
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    border-block-end: 1px solid var(--c-border);
    font-size: 0.8125rem;
  }
  .mmh-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.5rem;
  }
  .mmh-topbar__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
    max-inline-size: 100%;
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 2.7vw, 0.8125rem);
    letter-spacing: 0.02em;
  }
  .mmh-pulse-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--c-accent-pop);
    flex-shrink: 0;
  }

  .palette-switcher {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    align-items: center;
    gap: 0.375rem;
  }
  .palette-switcher__label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.85;
    margin-inline-end: 0.25rem;
  }
  .palette-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 28px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: var(--c-ink-on-dark);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
  }
  .palette-btn[aria-pressed="true"] {
    background: var(--c-surface);
    color: var(--c-ink);
    border-color: var(--c-surface);
  }
  .palette-swatches {
    display: inline-flex;
    gap: 2px;
  }
  .palette-swatches i {
    display: block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.22);
  }

  /* Main Header */
  .mmh-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--c-border);
  }
  .mmh-header.is-measuring *,
  .mmh-header.is-measuring *::before,
  .mmh-header.is-measuring *::after {
    transition: none !important;
  }
  .mmh-header__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.72rem;
  }
  .mmh-header__inner > * {
    flex-shrink: 0;
  }
  .mmh-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    white-space: nowrap;
  }
  .mmh-brand__svg {
    flex-shrink: 0;
    display: block;
  }
  .mmh-brand__sep {
    inline-size: 1px;
    block-size: 22px;
    background: var(--c-border-strong);
    flex-shrink: 0;
  }
  .mmh-brand__wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-family: var(--font-tech);
    font-size: clamp(1rem, 1.55vw, 1.25rem);
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--c-ink);
  }
  .mmh-brand__smart {
    font-weight: 700;
  }
  .mmh-brand__home {
    font-weight: 400;
    color: var(--c-ink-muted);
  }

  .mmh-nav {
    display: flex;
    align-items: center;
  }
  .mmh-nav-toggle {
    anchor-name: --mmh-menu-button;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: 40px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mmh-nav-toggle[aria-expanded="true"] {
    background: var(--c-dark);
    border-color: var(--c-dark);
    color: var(--c-ink-on-dark);
  }

  /* Collapsed Popover Site Menu (mobile / narrow default) */
  .mmh-site-menu {
    position: fixed;
    inset: auto;
    inset-block-start: 4.5rem;
    inset-block-start: anchor(--mmh-menu-button bottom);
    inset-inline-end: 1rem;
    inline-size: min(88dvw, 24rem);
    max-inline-size: calc(100dvw - 2rem);
    block-size: fit-content;
    max-block-size: calc(100dvh - 5.5rem);
    margin: 0.5rem 0 0;
    padding: 1rem;
    overflow: auto;
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 42px rgba(8, 30, 48, 0.22);
  }
  .mmh-site-menu::backdrop {
    background: rgba(6, 20, 30, 0.38);
  }
  .mmh-nav__list {
    display: grid;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mmh-mega-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    inline-size: 100%;
    min-block-size: 42px;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
  }
  .mmh-mega-trigger:hover,
  .mmh-mega-trigger[aria-expanded="true"] {
    background: var(--c-surface-alt);
    color: var(--c-ink);
  }
  .mmh-mega-trigger[aria-current="page"] {
    border-block-end: 2px solid var(--c-accent);
  }
  .mmh-chev {
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .mmh-mega-trigger[aria-expanded="true"] .mmh-chev {
    transform: rotate(180deg);
  }

  /* Narrow flow disclosure styling for mega panels */
  .mmh-mega-panel {
    margin-block: 0.25rem 0.65rem;
    padding: 0.75rem;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
  }

  /* Wide Inline Layout + Top-Layer Popover Mega Panels */
  .mmh-header.is-wide .mmh-nav-toggle {
    display: none;
  }
  .mmh-header.is-wide .mmh-site-menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    inline-size: auto;
    max-inline-size: none;
    block-size: auto;
    max-block-size: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .mmh-header.is-wide .mmh-site-menu::backdrop {
    display: none;
  }
  .mmh-header.is-wide .mmh-nav__list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .mmh-header.is-wide .mmh-mega-trigger {
    inline-size: auto;
    min-block-size: 38px;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .mmh-header.is-wide .mmh-mega-panel:not(:is(:popover-open, .\:popover-open)) {
    display: none;
  }
  .mmh-header.is-wide .mmh-mega-panel[popover] {
    margin: 0;
    padding: 1.35rem 1.5rem;
    inline-size: min(92dvw, 680px);
    max-inline-size: calc(100dvw - 2rem);
    height: auto;
    overflow: visible;
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 22px 54px rgba(6, 26, 40, 0.22);
  }
  .mmh-header.is-wide .mmh-mega-panel--wide[popover] {
    inline-size: min(92dvw, 820px);
  }
  .mmh-header.is-wide .mmh-mega-panel[popover]::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    block-size: 0.65rem;
  }
  @supports (position-area: block-end) {
    .mmh-header.is-wide .mmh-mega-panel[popover] {
      position: absolute;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
      inset: auto;
      margin-block-start: 0.5rem;
    }
  }
  @supports not (position-area: block-end) {
    .mmh-header.is-wide .mmh-mega-panel[popover] {
      position: fixed;
      inset: auto;
      margin: 0;
    }
  }

  /* Mega Panel Internal Grids */
  .mmh-mega__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-accent);
    margin-block-end: 0.65rem;
  }
  .mmh-mega__grid {
    display: grid;
    gap: 1.15rem;
  }
  @media (min-width: 640px) {
    .mmh-mega__grid--2 {
      grid-template-columns: 1.3fr 1fr;
    }
  }
  .mmh-mega__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }
  .mmh-mega__links a {
    display: grid;
    gap: 0.12rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid transparent;
  }
  .mmh-mega__links a:hover {
    background: var(--c-surface-alt);
    border-color: var(--c-border);
  }
  .mmh-mega__links strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-ink);
  }
  .mmh-mega__links span {
    font-size: 0.8rem;
    color: var(--c-ink-muted);
  }
  .mmh-mega__col--highlight {
    padding: 0.85rem;
    background: var(--c-surface-alt);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
  }
  .mmh-mega__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .mmh-mega__pills a {
    display: inline-flex;
    align-items: center;
    min-block-size: 32px;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
  }
  .mmh-mega__pills a:hover {
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    border-color: var(--c-dark);
  }
  .mmh-mega__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
  }
  .mmh-mega__card {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    text-decoration: none;
  }
  .mmh-mega__card:hover {
    border-color: var(--c-accent);
    background: var(--c-surface);
  }
  .mmh-mega__card strong {
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--c-ink);
  }
  .mmh-mega__card span {
    font-size: 0.8rem;
    color: var(--c-ink-muted);
  }
  .mmh-mega__head-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
  }
  .mmh-mega__head-row .mmh-mega__kicker {
    margin-block-end: 0;
  }
  .mmh-mega__all {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
  }
  .mmh-mega__guides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 0.85rem;
  }
  .mmh-mega__guide {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding: 0.55rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-alt);
    text-decoration: none;
  }
  .mmh-mega__guide:hover {
    border-color: var(--c-accent);
  }
  .mmh-mega__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
  }
  .mmh-mega__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
  .mmh-mega__guide-meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--c-ink-muted);
    text-transform: uppercase;
  }
  .mmh-mega__guide-title {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-ink);
  }

  .mmh-search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-inline-size: 0;
    margin-block-start: 0.75rem;
  }
  .mmh-header.is-wide .mmh-search {
    margin-block-start: 0;
  }
  .mmh-search input {
    min-block-size: 38px;
    min-inline-size: 0;
    flex: 1 1 150px;
    inline-size: min(100%, 185px);
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    font-size: 0.875rem;
  }
  .mmh-btn-icon {
    min-block-size: 38px;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-dark);
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
  }

  /* Hero Hybrid Architectural Showcase */
  .mmh-hero {
    padding-block: clamp(2rem, 4.5vw, 3.75rem);
    border-block-end: 1px solid var(--c-border);
    background:
      radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--c-surface-ice) 68%, transparent) 0%, transparent 50%),
      linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-surface-alt) 45%, transparent) 100%);
  }
  .mmh-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .mmh-hero__grid > * {
    min-inline-size: 0;
  }
  @media (min-width: 960px) {
    .mmh-hero__grid {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    }
  }
  .mmh-eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    max-inline-size: 100%;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    margin-block-end: 1rem;
  }
  .mmh-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.35rem, 5vw, 4.1rem);
    font-weight: 400;
    line-height: 1.04;
    margin-block-end: 1rem;
  }
  .mmh-hero__title em {
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: var(--c-accent-pop);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
  .mmh-hero__lead {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    color: var(--c-ink-muted);
    max-inline-size: 58ch;
    margin-block-end: 1.5rem;
  }
  .mmh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .mmh-btn-primary,
  .mmh-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 44px;
    padding: 0.65rem 1.35rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
  }
  .mmh-btn-primary {
    background: var(--c-accent);
    color: var(--c-accent-ink);
  }
  .mmh-btn-primary:hover {
    filter: brightness(0.94);
  }
  .mmh-btn-secondary {
    background: var(--c-surface);
    color: var(--c-ink);
    border-color: var(--c-border-strong);
  }
  .mmh-btn-secondary:hover {
    background: var(--c-surface-alt);
  }

  /* Futuristic Interior HUD Card in Hero */
  .mmh-hud {
    min-inline-size: 0;
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--c-border-strong);
    box-shadow: var(--shadow-soft);
  }
  .mmh-hud__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.16);
    padding-block-end: 0.75rem;
    margin-block-end: 1rem;
  }
  .mmh-hud__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .mmh-hud__tile {
    padding: 0.85rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
  .mmh-hud__num {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-accent-warm);
  }
  .mmh-hud__blueprint {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 360 / 150;
    margin-block-end: 1rem;
    color: var(--c-ink-on-dark);
  }
  .mmh-hud__lbl {
    font-size: 0.78rem;
    opacity: 0.88;
  }

  /* Compact Rooms Navigation Strip */
  .mmh-section--compact {
    padding-block: 1.5rem;
    border-block-end: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 70%, transparent);
  }
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
  }
  .room-tile {
    display: grid;
    min-inline-size: 0;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .room-tile:hover {
    transform: translateY(-2px);
    border-color: var(--c-accent-pop);
  }
  .room-tile__num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-accent);
  }
  .room-tile__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .room-tile__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--c-ink-muted);
  }

  /* Section Headings & Filters */
  .mmh-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.75rem;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--c-border);
  }
  .mmh-section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.3vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.028em;
    line-height: 1.1;
    margin-block-end: 0.35rem;
  }
  .mmh-section-sub {
    margin: 0;
    color: var(--c-ink-muted);
    font-size: 0.9375rem;
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
  }
  .filter-pill {
    min-block-size: 38px;
    padding: 0.4rem 0.95rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }
  .filter-pill[aria-pressed="true"] {
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    border-color: var(--c-dark);
  }

  /* Deal Card (Chollometro + Architectural Aesthetic) */
  .deal-wrap {
    container: deal / inline-size;
    display: grid;
    min-inline-size: 0;
  }
  .deal-card {
    position: relative;
    min-inline-size: 0;
    block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.85rem;
    padding: 1.15rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .deal-card:has(a.card-link:hover) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--c-border-strong);
  }
  .deal-card:has(a.card-link:focus-visible) {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
  }
  .deal-card a.card-link:focus-visible {
    outline: none;
  }
  .deal-card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .deal-card :where(a:not(.card-link), button, input) {
    position: relative;
    z-index: 1;
  }

  .deal-card__media {
    aspect-ratio: 16 / 10;
    inline-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--c-surface-alt);
  }
  .deal-card__placeholder {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--c-surface-alt), var(--c-surface-ice));
    border: 1px dashed var(--c-border-strong);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--c-ink);
    padding: 1rem;
    text-align: center;
  }

  .deal-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .deal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
  }
  .badge-discount {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--c-accent);
    color: var(--c-accent-ink);
  }
  .badge-eco {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    color: var(--c-ink);
  }
  .badge-expired {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
  }

  .vote-box {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.35rem;
    background: var(--c-bg);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
  }
  .vote-btn {
    min-inline-size: 26px;
    min-block-size: 26px;
    border: 0;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50%;
  }
  .vote-btn:hover {
    background: var(--c-surface-alt);
  }
  .vote-score {
    min-inline-size: 2.2ch;
    text-align: center;
    font-weight: 700;
  }

  .deal-card__title {
    font-size: 1.08rem;
    font-weight: 700;
    margin-block: 0.2rem 0.35rem;
  }
  .deal-card__title a {
    text-decoration: none;
  }
  .deal-card__excerpt {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }

  .deal-card__prices {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-block-start: 0.65rem;
  }
  .price-now {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-ink);
  }
  .price-old {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-decoration: line-through;
    color: var(--c-ink-muted);
  }

  .deal-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--c-border);
  }
  .coupon-btn {
    min-block-size: 34px;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--c-border-strong);
    background: var(--c-surface-alt);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .deal-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 36px;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
  }
  .deal-cta:hover {
    background: var(--c-accent);
    color: var(--c-accent-ink);
  }

  @container deal (inline-size > 540px) {
    .deal-card:has(> .deal-card__media) {
      grid-template-columns: 220px minmax(0, 1fr);
      grid-template-rows: auto 1fr auto;
    }
    .deal-card:has(> .deal-card__media) .deal-card__media {
      grid-row: 1 / 4;
      block-size: 100%;
    }
  }

  /* Editorial Guide Cards (Tech Magazine Full-Bleed Top Image) */
  .guide-card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
  }
  .guide-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }
  .guide-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-dark);
  }
  .guide-card__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .guide-card:hover .guide-card__img {
    transform: scale(1.03);
  }
  .guide-card__inner {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.75rem;
    padding: 1.35rem;
    flex: 1 1 auto;
  }
  .guide-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .guide-card__cat,
  .guide-card__read {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-ink-muted);
  }
  .guide-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.22;
    margin: 0;
  }
  .guide-card__title a {
    text-decoration: none;
  }
  .guide-card__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
  }
  .guide-card__summary {
    margin: 0;
    font-size: 0.92rem;
    color: var(--c-ink-muted);
  }
  .guide-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--c-border);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  /* Single & Page Content */
  .mmh-prose-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.35rem, 3.5vw, 2.75rem);
    box-shadow: var(--shadow-soft);
    min-inline-size: 0;
  }
  .mmh-prose-box h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-block-end: 1rem;
  }
  .mmh-prose-box p,
  .mmh-prose-box li {
    max-inline-size: 72ch;
    color: var(--c-ink);
  }
  .mmh-sidebar-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-soft);
  }

  /* Chollo Pulse Hero Band + Horizontal Deals Feed */
  .mmh-hero--pulse {
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    padding-block: clamp(1.35rem, 3vw, 2rem);
    border-block-end: 2px solid var(--c-accent-pop);
  }
  .mmh-pulse-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }
  .mmh-pulse-hero__inner > * {
    min-inline-size: 0;
  }
  .mmh-pulse-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    opacity: 0.86;
    margin-block-end: 0.35rem;
  }
  .mmh-pulse-title {
    font-family: var(--font-serif);
    font-size: clamp(1.95rem, 3.6vw, 2.75rem);
    font-weight: 400;
    color: var(--c-ink-on-dark);
    margin: 0;
  }
  .mmh-pulse-chips {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    gap: 0.5rem;
  }
  .mmh-pulse-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 34px;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: var(--c-ink-on-dark);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
  }
  .mmh-pulse-chip--accent {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-weight: 700;
  }
  .filter-bar--inline {
    margin-block-end: 0;
  }

  .deals-feed {
    display: grid;
    gap: 0.9rem;
  }
  .deal-row {
    min-inline-size: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem 1.15rem;
    align-items: center;
    padding: 1rem 1.15rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .deal-row:hover {
    transform: translateY(-1px);
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-hover);
  }
  @media (min-width: 760px) {
    .deal-row {
      grid-template-columns: 60px minmax(0, 1fr) auto;
    }
    .deal-row:has(> .deal-row__thumb) {
      grid-template-columns: 60px 104px minmax(0, 1fr) auto;
    }
  }
  .deal-row > * {
    min-inline-size: 0;
  }
  .deal-row__vote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    justify-self: start;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface-alt);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
  }
  @media (min-width: 760px) {
    .deal-row__vote {
      display: grid;
      justify-items: center;
      justify-self: stretch;
      gap: 0.15rem;
      padding: 0.45rem 0.25rem;
    }
  }
  .deal-row__thumb {
    inline-size: 100%;
    max-inline-size: 140px;
  }
  .deal-row__img {
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--c-surface-alt);
  }
  .deal-row__body .deal-badges {
    margin-block-end: 0.35rem;
  }
  .deal-row__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: 0.65rem;
    border-block-start: 1px solid var(--c-border);
  }
  @media (min-width: 760px) {
    .deal-row__aside {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-block-start: 0;
      border-block-start: 0;
    }
  }
  .deal-row__prices {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
  }
  .deal-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .guide-card__more {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 700;
  }
  .guide-card__more:hover {
    text-decoration: underline;
  }

  /* Brand Criteria Band */
  .mmh-criteria-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: var(--shadow-soft);
  }
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
  }
  .pillar-card {
    min-inline-size: 0;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1.1rem;
  }
  .pillar-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-block-end: 0.45rem;
  }
  .pillar-card p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-ink-muted);
  }

  /* Footer */
  .mmh-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-block-end: 0.75rem;
  }
  .mmh-footer__brand .mmh-brand__svg {
    color: var(--c-ink-on-dark);
  }
  .mmh-footer__brand h3 {
    margin-block-end: 0;
  }
  .mmh-footer {
    background: var(--c-dark-2);
    color: var(--c-ink-on-dark);
    padding-block: 3rem 2rem;
    margin-block-start: auto;
    border-block-start: 2px solid var(--c-accent-pop);
  }
  .mmh-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding-block-end: 2rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.16);
  }
  .mmh-footer h3 {
    color: var(--c-ink-on-dark);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-block-end: 0.75rem;
  }
  .mmh-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.9rem;
  }
  .mmh-footer a {
    color: var(--c-ink-on-dark);
    text-decoration: none;
    opacity: 0.9;
  }
  .mmh-footer a:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: var(--c-accent-warm);
  }
  .mmh-footer__bottom {
    padding-block-start: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    opacity: 0.88;
  }

  /* =====================================================================
     v1.3 LEICA TECH MAGAZINE + LARGE ARCHITECTURAL PHOTOGRAPHY + LIGHTBOX
     ===================================================================== */
  .editorial-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-ink-muted);
    margin-block-end: 0.45rem;
  }

  .mmh-cover {
    padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(2rem, 4.5vw, 3.5rem);
    border-block-end: 1px solid var(--c-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface-ice) 42%, var(--c-bg)) 0%, var(--c-bg) 100%);
  }
  .mmh-cover__head {
    max-inline-size: 920px;
    margin-inline: auto;
    text-align: center;
    margin-block-end: clamp(1.5rem, 3.5vw, 2.5rem);
  }
  .mmh-cover__kicker-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-block-end: 0.85rem;
  }
  .mmh-pulse-kicker--sub {
    opacity: 0.75;
  }
  .mmh-cover__title {
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 5.2vw, 4.5rem);
    font-weight: 400;
    line-height: 1.07;
    letter-spacing: -0.028em;
    text-wrap: balance;
    margin: 0 0 1rem;
  }
  .mmh-cover__lead {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-ink-muted);
    max-inline-size: 62ch;
    margin: 0 auto 1.5rem;
  }
  .mmh-cover__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  /* Signature Leica Pill Button with Bermellón Red Dot */
  .mmh-leica-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    padding: 0.65rem 2.9rem 0.65rem 1.55rem;
    border-radius: 9999px;
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: 1px solid var(--c-dark);
    transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
  }
  .mmh-leica-btn::after {
    content: "";
    position: absolute;
    inset-inline-end: 1.1rem;
    inline-size: 11px;
    block-size: 11px;
    border-radius: 9999px;
    background: var(--c-accent-pop);
    transition: background-color 0.24s ease;
  }
  .mmh-leica-btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-accent-ink);
  }
  .mmh-leica-btn:hover::after {
    background: var(--c-accent-ink);
  }
  .mmh-leica-btn--ghost {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-border-strong);
    padding-inline-end: 1.55rem;
  }
  .mmh-leica-btn--ghost::after {
    display: none;
  }
  .mmh-leica-btn--ghost:hover {
    background: var(--c-dark);
    border-color: var(--c-dark);
    color: var(--c-ink-on-dark);
  }
  .mmh-leica-btn--sm {
    min-block-size: 40px;
    padding: 0.45rem 2.35rem 0.45rem 1.15rem;
    font-size: 0.875rem;
  }
  .mmh-leica-btn--sm::after {
    inset-inline-end: 0.9rem;
    inline-size: 9px;
    block-size: 9px;
  }

  /* Cover Hero Stage — Big Sharp-Corner Exhibition Photo */
  .mmh-cover__stage {
    margin: 0;
    padding: clamp(0.6rem, 1.5vw, 1.1rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-soft);
  }
  .mmh-cover__trigger,
  .mmh-gallery-card__trigger {
    position: relative;
    display: block;
    inline-size: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--c-dark);
    overflow: hidden;
    cursor: zoom-in;
  }
  .mmh-cover__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    max-block-size: 620px;
    object-fit: cover;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mmh-cover__trigger:hover .mmh-cover__img,
  .mmh-gallery-card__trigger:hover .mmh-gallery-card__img {
    transform: scale(1.022);
  }
  .mmh-photo-expand {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    padding: 0.38rem 0.85rem;
    border-radius: 9999px;
    background: rgba(8, 22, 32, 0.78);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
  }
  .mmh-cover__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    padding-block-start: 0.85rem;
    font-size: 0.875rem;
    color: var(--c-ink-muted);
  }
  .mmh-cover__caption strong {
    font-family: var(--font-mono);
    color: var(--c-accent);
    margin-inline-end: 0.35rem;
  }
  .mmh-cover__caption a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
  }
  .mmh-cover__caption a:hover {
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
  }

  /* Exhibition Asymmetric Gallery (Leica Museum Framing) */
  .mmh-exhibition {
    background: color-mix(in srgb, var(--c-surface-ice) 45%, var(--c-surface));
    border-block: 1px solid var(--c-border);
  }
  .mmh-exhibition__intro {
    max-inline-size: 780px;
    margin-inline: auto;
    text-align: center;
    margin-block-end: clamp(2rem, 4vw, 3rem);
  }
  .mmh-exhibition__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 3.35rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 0.85rem;
  }
  .mmh-exhibition__lead {
    font-size: clamp(1rem, 1.35vw, 1.125rem);
    line-height: 1.6;
    color: var(--c-ink-muted);
    margin: 0;
  }

  .mmh-gallery-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
  @media (min-width: 860px) {
    .mmh-gallery-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .mmh-gallery-card--wide {
      grid-column: span 8;
    }
    .mmh-gallery-card--tall {
      grid-column: span 4;
    }
    .mmh-gallery-card--medium {
      grid-column: span 5;
    }
    .mmh-gallery-card--feature {
      grid-column: span 7;
    }
  }

  .mmh-gallery-card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    margin: 0;
    padding: clamp(0.65rem, 1.4vw, 1rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-soft);
  }
  .mmh-gallery-card__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 860px) {
    .mmh-gallery-card--tall .mmh-gallery-card__trigger,
    .mmh-gallery-card--tall .mmh-gallery-card__img,
    .mmh-gallery-card--tall .mmh-shop-scene {
      aspect-ratio: 4 / 5;
      block-size: 100%;
    }
    .mmh-gallery-card--wide .mmh-gallery-card__img,
    .mmh-gallery-card--feature .mmh-gallery-card__img,
    .mmh-gallery-card--medium .mmh-gallery-card__img {
      aspect-ratio: 16 / 9;
    }
  }
  .mmh-gallery-card__meta {
    padding-block-start: 0.9rem;
  }
  .mmh-gallery-card__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-block-end: 0.35rem;
  }
  .mmh-gallery-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.22;
    margin: 0 0 0.35rem;
  }
  .mmh-gallery-card__title a {
    text-decoration: none;
  }
  .mmh-gallery-card__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
  }
  .mmh-gallery-card__desc {
    margin: 0;
    font-size: 0.88rem;
    color: var(--c-ink-muted);
  }
  .mmh-exhibition__cta-wrap {
    margin-block-start: clamp(2rem, 4vw, 3rem);
    text-align: center;
  }

  /* Native <dialog> Lightbox (modern-web-guidance: scoped to dialog:modal & backdrop, zero unconditional display) */
  dialog.mmh-lightbox {
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: #071923;
    color: #F4F9FC;
    max-inline-size: min(94vw, 1180px);
    max-block-size: 92dvh;
    inline-size: 100%;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  }
  dialog.mmh-lightbox:modal {
    overscroll-behavior: contain;
  }
  dialog.mmh-lightbox::backdrop {
    background: rgba(6, 20, 30, 0.88);
    backdrop-filter: blur(8px);
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .mmh-lightbox__shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-block-size: 92dvh;
  }
  .mmh-lightbox__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.15rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.14);
  }
  .mmh-lightbox__kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--c-accent-warm);
  }
  .mmh-lightbox__close {
    min-block-size: 36px;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
  }
  .mmh-lightbox__close:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
  }
  .mmh-lightbox__figure {
    margin: 0;
    padding: 0.75rem 1.15rem 0;
    display: grid;
    place-items: center;
    min-block-size: 0;
    overflow: hidden;
  }
  .mmh-lightbox__figure img {
    display: block;
    max-inline-size: 100%;
    max-block-size: 62dvh;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
  }
  .mmh-lightbox__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem 1.5rem;
    padding: 0.9rem 1.15rem 1.1rem;
  }
  .mmh-lightbox__title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 0 0.2rem;
  }
  .mmh-lightbox__caption {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(244, 249, 252, 0.78);
  }
  .mmh-lightbox__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .mmh-lightbox__nav {
    min-block-size: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mmh-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  /* Article Single Magazine Layout */
  .mmh-article-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-block-end: 1.15rem;
  }
  .mmh-article-hero-fig {
    margin: 0 0 1.75rem;
    padding: 0.5rem;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
  }
  .mmh-article-hero-img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .mmh-article-gallery {
    margin-block-start: 2.5rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--c-border);
  }
  .mmh-article-gallery__head h2 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 400;
    margin: 0 0 1rem;
  }
  .mmh-article-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
  }
  .mmh-related-shot {
    display: grid;
    gap: 0.55rem;
    padding: 0.65rem;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    text-decoration: none;
  }
  .mmh-related-shot img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }
  .mmh-related-shot__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
  }
  .mmh-sidebar-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    margin-block-end: 0.75rem;
  }

  /* =====================================================================
     v1.4 FULL-BLEED LEICA HERO BANNER WITH HIGH-CONTRAST SCRIM OVERLAY
     ===================================================================== */
  .mmh-hero-banner {
    position: relative;
    overflow: hidden;
    min-block-size: clamp(460px, 68dvh, 660px);
    display: grid;
    align-items: stretch;
    background: #061824;
    color: #FFFFFF;
    border-block-end: 2px solid var(--c-accent-pop);
  }
  .mmh-hero-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .mmh-hero-banner__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 46%;
  }
  .mmh-hero-banner__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(6, 22, 34, 0.82) 0%, rgba(6, 22, 34, 0.56) 46%, rgba(6, 22, 34, 0.86) 100%),
      linear-gradient(90deg, rgba(6, 22, 34, 0.72) 0%, rgba(6, 22, 34, 0.28) 65%, rgba(6, 22, 34, 0.35) 100%);
  }
  .mmh-hero-banner__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    gap: 2rem;
    padding-block: clamp(2.25rem, 6vw, 4.25rem) clamp(1.25rem, 3vw, 2rem);
  }
  .mmh-hero-banner__copy {
    max-inline-size: 760px;
  }
  .mmh-hero-banner__kickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin-block-end: 1rem;
  }
  .mmh-hero-pill-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.75rem;
    border-radius: 9999px;
    background: rgba(6, 22, 34, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }
  .mmh-hero-pill-kicker--dim {
    color: #FF8E70;
    border-color: rgba(255, 142, 112, 0.45);
  }
  .mmh-hero-banner__title {
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 5.2vw, 4.45rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.028em;
    text-wrap: balance;
    color: #FFFFFF;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    margin: 0 0 1rem;
  }
  .mmh-hero-banner__lead {
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 1.45vw, 1.22rem);
    font-weight: 400;
    line-height: 1.5;
    color: #ECF4F8;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
    max-inline-size: 58ch;
    margin: 0 0 1.6rem;
  }
  .mmh-hero-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .mmh-leica-btn--on-photo {
    background: #FFFFFF;
    color: #082E43;
    border-color: #FFFFFF;
  }
  .mmh-leica-btn--on-photo::after {
    background: #C83217;
  }
  .mmh-leica-btn--on-photo:hover {
    background: #C83217;
    border-color: #C83217;
    color: #FFFFFF;
  }
  .mmh-leica-btn--glass {
    background: rgba(6, 22, 34, 0.72);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.65);
    padding-inline-end: 1.55rem;
    backdrop-filter: blur(8px);
  }
  .mmh-leica-btn--glass::after {
    display: none;
  }
  .mmh-leica-btn--glass:hover {
    background: #FFFFFF;
    color: #082E43;
    border-color: #FFFFFF;
  }
  .mmh-hero-banner__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.22);
  }
  .mmh-hero-banner__caption {
    margin: 0;
    font-size: 0.85rem;
    color: #E7F1F6;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  }
  .mmh-hero-banner__caption strong {
    font-family: var(--font-mono);
    color: #FF8E70;
    margin-inline-end: 0.35rem;
  }
  .mmh-photo-expand--hero {
    position: static;
    cursor: zoom-in;
  }
  .mmh-photo-expand--hero:hover {
    background: #C83217;
    border-color: #C83217;
  }

  /* =====================================================================
     v1.5.0 · BREADCRUMBS, PROSE, TABLES, ACCORDIONS, TUTORIALS, ARCHIVES
     ===================================================================== */
  .mmh-breadcrumbs {
    margin-block-end: 1.25rem;
  }
  .mmh-breadcrumbs > ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .mmh-breadcrumbs > ol > li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .mmh-breadcrumbs > ol > li + li::before {
    content: "/" / "";
    color: var(--c-ink-muted);
    font-family: var(--font-mono);
  }
  .mmh-breadcrumbs > ol > li > a {
    color: var(--c-ink-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    border-radius: 4px;
    padding-block: 0.15rem;
  }
  .mmh-breadcrumbs > ol > li > a:hover {
    color: var(--c-accent);
  }
  .mmh-breadcrumbs > ol > li > a:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
  }
  .mmh-breadcrumbs > ol > li > a[aria-current="page"] {
    color: var(--c-ink);
    font-weight: 700;
    text-decoration: none;
  }

  .mmh-prose-box--readable .entry-content {
    max-inline-size: 65ch;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .mmh-prose-box--readable h1,
  .mmh-prose-box--readable h2,
  .mmh-prose-box--readable h3,
  .mmh-archive-head h1 {
    text-wrap: balance;
  }
  .mmh-prose-box--readable .entry-content p,
  .mmh-prose-box--readable .entry-content li {
    text-wrap: pretty;
  }
  .mmh-prose-box--readable .entry-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
    font-weight: 500;
    margin-block: 2rem 0.75rem;
    line-height: 1.2;
  }
  .mmh-prose-box--readable .entry-content h3 {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    margin-block: 1.35rem 0.5rem;
  }
  .mmh-page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--c-ink-muted);
    margin-block-end: 0.75rem;
  }

  .mmh-legal-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
  }
  .mmh-legal-side-list a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--c-ink);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color 140ms ease, border-color 140ms ease;
  }
  .mmh-legal-side-list a:hover,
  .mmh-legal-side-list a.is-active {
    background: var(--c-surface-alt);
    border-color: var(--c-border-strong);
  }
  .mmh-side-note {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--c-ink-muted);
    border-block-start: 1px solid var(--c-border);
    padding-block-start: 0.85rem;
  }

  /* Responsive Table (modern-web-guidance: responsive-table) */
  .mmh-table-wrap {
    overflow: auto;
    max-inline-size: 100%;
    margin-block: 1.25rem 1.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    container-type: inline-size;
  }
  .mmh-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: start;
  }
  .mmh-table caption {
    padding: 0.8rem 1rem;
    font-family: var(--font-tech);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: start;
    color: var(--c-ink);
    background: var(--c-surface-alt);
    border-block-end: 1px solid var(--c-border);
  }
  .mmh-table thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
  }
  .mmh-table th,
  .mmh-table td {
    padding: 0.72rem 0.95rem;
    border-block-end: 1px solid var(--c-border);
    vertical-align: top;
  }
  .mmh-table thead th {
    text-wrap: balance;
    font-family: var(--font-tech);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .mmh-table tbody th {
    position: sticky;
    inset-inline-start: 0;
    background: var(--c-surface);
    font-weight: 700;
    color: var(--c-ink);
    min-inline-size: 9rem;
  }
  @container (width < 600px) {
    .mmh-table,
    .mmh-table thead,
    .mmh-table tbody,
    .mmh-table tr,
    .mmh-table th,
    .mmh-table td {
      display: block;
    }
    .mmh-table thead {
      display: none;
    }
    .mmh-table tbody tr {
      margin: 0.75rem;
      border: 1px solid var(--c-border-strong);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .mmh-table tbody th {
      position: static;
      background: var(--c-surface-alt);
      border-block-end: 1px solid var(--c-border);
    }
    .mmh-table td[data-label]::before {
      content: attr(data-label) ": ";
      font-weight: 700;
      color: var(--c-ink);
    }
  }

  /* Accordion (modern-web-guidance: native <details> with marker via ::before) */
  .mmh-faq-item,
  .mmh-accordion details {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    margin-block-end: 0.75rem;
    padding: 0.2rem 1rem;
  }
  .mmh-faq-item summary,
  .mmh-accordion summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.65ch;
    padding-block: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--c-ink);
  }
  .mmh-faq-item summary::-webkit-details-marker,
  .mmh-accordion summary::-webkit-details-marker {
    display: none;
  }
  .mmh-faq-item summary::before,
  .mmh-accordion summary::before {
    content: "";
    inline-size: 0.55em;
    block-size: 0.55em;
    flex-shrink: 0;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-inline-end: 0.25rem;
  }
  .mmh-faq-item[open] > summary::before,
  .mmh-accordion details[open] > summary::before {
    transform: rotate(45deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    .mmh-faq-item summary::before,
    .mmh-accordion summary::before {
      transition: transform 180ms ease;
    }
  }
  .mmh-faq-item__body {
    padding-block: 0 0.9rem;
    color: var(--c-ink-muted);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Predefined Formats: Tutorial Meta, Steps, Callouts, Product Verdict, Pros/Cons, Energy Calc */
  .mmh-tut-meta {
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-strong);
    border-inline-start: 4px solid var(--c-accent);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    margin-block: 1.25rem 1.75rem;
  }
  .mmh-tut-meta__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.9rem 1.25rem;
    margin: 0;
  }
  .mmh-tut-meta__full {
    grid-column: 1 / -1;
    border-block-start: 1px solid var(--c-border);
    padding-block-start: 0.75rem;
  }
  .mmh-tut-meta dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    margin-block-end: 0.2rem;
  }
  .mmh-tut-meta dd {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-ink);
  }

  .mmh-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.15rem 1.25rem;
    margin-block: 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
  }
  .mmh-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.35rem;
    min-block-size: 2.35rem;
    border-radius: 999px;
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.88rem;
  }
  .mmh-step__body h3 {
    margin: 0 0 0.45rem;
    font-family: var(--font-tech);
    font-size: 1.1rem;
  }
  .mmh-step__content p:last-child {
    margin-block-end: 0;
  }

  .mmh-callout {
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    margin-block: 1.25rem;
    border: 1px solid var(--c-border-strong);
    border-inline-start-width: 4px;
    background: var(--c-surface);
  }
  .mmh-callout--safety {
    border-inline-start-color: #C83217;
    background: #FFF4F1;
    color: #082E43;
  }
  .mmh-callout--energia {
    border-inline-start-color: #0F5499;
    background: #EFF6FC;
    color: #082E43;
  }
  .mmh-callout--tip {
    border-inline-start-color: #0B6E4F;
    background: #EEF9F4;
    color: #082E43;
  }
  .mmh-callout__title {
    display: block;
    font-family: var(--font-tech);
    font-size: 0.95rem;
    margin-block-end: 0.35rem;
  }

  .mmh-prod-sub {
    font-size: 1.08rem;
    color: var(--c-ink-muted);
    margin: 0 0 1.2rem;
    max-inline-size: 62ch;
  }
  .mmh-prod-verdict,
  .mmh-pros-cons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-block: 1.25rem 1.75rem;
  }
  .mmh-verdict-box,
  .mmh-pc-card {
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    background: var(--c-surface-alt);
  }
  .mmh-verdict-box--ideal,
  .mmh-pc-card--pros {
    border-inline-start: 4px solid #0B6E4F;
  }
  .mmh-verdict-box--limit,
  .mmh-pc-card--cons {
    border-inline-start: 4px solid #C83217;
  }
  .mmh-verdict-box strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: 0.35rem;
  }
  .mmh-verdict-box p,
  .mmh-pc-card ul {
    margin: 0;
    font-size: 0.9375rem;
  }
  .mmh-pc-card h3 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
  }
  .mmh-pc-card ul {
    padding-inline-start: 1.15rem;
    display: grid;
    gap: 0.35rem;
  }

  .mmh-calc-card {
    margin-block: 1.75rem;
    padding: 1.35rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface-alt);
  }
  .mmh-calc-card__head h2 {
    margin: 0.35rem 0 0.45rem;
    font-size: 1.45rem;
  }
  .mmh-calc-card__head p {
    margin: 0 0 1.15rem;
    font-size: 0.9375rem;
    color: var(--c-ink-muted);
  }
  .mmh-calc-card__inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    margin-block-end: 1.15rem;
  }
  .mmh-calc-card__inputs label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
  }
  .mmh-calc-card__inputs input {
    min-block-size: 2.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font-mono);
  }
  .mmh-calc-card__results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 0.85rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--c-border);
  }
  .mmh-calc-card__results > div {
    background: var(--c-surface);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
  }
  .mmh-calc-card__results span {
    display: block;
    font-size: 0.75rem;
    color: var(--c-ink-muted);
    margin-block-end: 0.25rem;
  }
  .mmh-calc-card__results strong {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--c-ink);
  }

  /* Archive Hub Header & Taxonomy Filter Pills */
  .mmh-archive-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.25rem;
  }
  .mmh-taxonomy-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 2rem;
  }
  .mmh-tax-pill {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.15rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  }
  .mmh-tax-pill:hover,
  .mmh-tax-pill.is-active {
    background: var(--c-dark);
    color: var(--c-ink-on-dark);
    border-color: var(--c-dark);
  }
  .mmh-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block: 0.65rem 0;
  }
  .mmh-footer__grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  /* IKEA-Style Price Tag Typography & Shop-the-Room Hotspot Pins */
  .mmh-price-tag {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
  }
  .mmh-price-tag__num {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #082E43;
    font-variant-numeric: tabular-nums;
  }
  .mmh-price-tag__dec {
    font-size: 0.56em;
    font-weight: 700;
    vertical-align: 0.42em;
    letter-spacing: -0.01em;
    margin-inline-start: 0.04em;
  }
  .mmh-price-tag__note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-muted);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    padding: 0.12rem 0.38rem;
  }
  .mmh-sidebar-price {
    padding: 0.85rem 1rem;
    margin-block-end: 0.85rem;
    border-radius: var(--radius-md);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border-strong);
  }
  .mmh-sidebar-price .mmh-price-tag__num {
    font-size: 1.95rem;
    color: var(--c-ink);
  }
  .guide-card--product .guide-card__footer {
    align-items: center;
    gap: 0.65rem;
  }
  .guide-card--product .mmh-price-tag__num {
    color: var(--c-ink);
    font-size: 1.4rem;
  }

  .mmh-shop-figure {
    margin: 1.75rem 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0.65rem;
    box-shadow: var(--shadow-soft);
  }
  .mmh-shop-figure__cap {
    margin-block-start: 0.75rem;
    padding-inline: 0.35rem;
    font-size: 0.875rem;
    color: var(--c-ink-muted);
  }
  .mmh-shop-figure__cap strong {
    font-family: var(--font-mono);
    color: var(--c-accent);
  }

  .mmh-shop-scene {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--c-dark);
    border-radius: 2px;
  }
  .mmh-shop-scene__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mmh-gallery-card:hover .mmh-shop-scene__img {
    transform: scale(1.025);
  }
  .mmh-shop-scene .mmh-photo-expand {
    z-index: 3;
    cursor: zoom-in;
  }

  .mmh-shop-hint {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.65rem;
    border-radius: 9999px;
    background: rgba(8, 22, 34, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    pointer-events: none;
    backdrop-filter: blur(6px);
  }
  .mmh-shop-hint__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(200, 50, 23, 0.75);
  }

  /* IKEA-style Translucent Halo Hotspot Pin (32px ring, 48x48 accessible hit box, inner dot contraction) */
  .mmh-pin {
    position: absolute;
    inset-inline-start: var(--pin-x, 50%);
    inset-block-start: var(--pin-y, 50%);
    transform: translate(-50%, -50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: 64px;
    background: transparent;
    cursor: pointer;
  }
  .mmh-pin::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border-radius: 64px;
  }
  .mmh-pin__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 64px;
    background: rgba(17, 17, 17, 0.48);
    border: 2px solid rgba(223, 223, 223, 0.54);
    background-clip: padding-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    transition: background-color 250ms ease, border-color 250ms ease;
  }
  .mmh-pin__dot::after {
    content: "";
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: 64px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(17, 17, 17, 0.55);
    transition: transform 250ms ease-in-out, background-color 200ms ease;
  }
  .mmh-pin:hover .mmh-pin__dot,
  .mmh-pin:focus-visible .mmh-pin__dot {
    background: rgba(17, 17, 17, 0.68);
    border-color: rgba(255, 255, 255, 0.78);
  }
  .mmh-pin:hover .mmh-pin__dot::after,
  .mmh-pin:focus-visible .mmh-pin__dot::after {
    transform: scale(0.667);
  }
  .mmh-pin[aria-expanded="true"] .mmh-pin__dot {
    background: rgba(8, 46, 67, 0.85);
    border-color: rgba(255, 255, 255, 0.9);
  }
  .mmh-pin[aria-expanded="true"] .mmh-pin__dot::after {
    background: #FFFFFF;
    transform: scale(0.667);
  }
  .mmh-pin:focus-visible {
    outline: 3px solid #FF4F31;
    outline-offset: 3px;
  }

  /* Floating IKEA Price Tag Card Popover Content */
  .mmh-pin-card {
    padding: 0;
    border: 1px solid #DFDFDF;
    border-radius: 2px;
    background: #FFFFFF;
    color: #111111;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    min-inline-size: 13.75rem;
    max-inline-size: min(16.5rem, calc(100vw - 24px));
    overflow: visible;
  }
  .mmh-pin-card__link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    border-radius: 2px;
  }
  .mmh-pin-card__link:hover .mmh-pin-card__name {
    text-decoration: underline;
    text-decoration-color: #C83217;
  }
  .mmh-pin-card__body {
    display: grid;
    gap: 0.18rem;
    padding: 0.75rem;
  }
  .mmh-pin-card__brand {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #C83217;
  }
  .mmh-pin-card__name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: #111111;
  }
  .mmh-pin-card__desc {
    font-size: 0.75rem;
    line-height: 1.38;
    color: #484848;
  }
  .mmh-pin-card__price {
    margin-block-start: 0.4rem;
  }
  .mmh-pin-card__arrow {
    display: grid;
    place-items: center;
    border-inline-start: 1px solid #DFDFDF;
    font-size: 1.35rem;
    font-weight: 400;
    color: #111111;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .mmh-pin-card__link:hover .mmh-pin-card__arrow {
    background: #F5F5F5;
    color: #C83217;
  }
}

/* Top-level rules for Anchor Positioning + @starting-style Top Layer Popover Animation */
[popover].mmh-pin-card {
  display: none;
  opacity: 0;
}
[popover].mmh-pin-card:is(:popover-open, .\:popover-open) {
  display: block;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  [popover].mmh-pin-card {
    transform: translateY(-4px) scale(0.96);
    transition-property: opacity, transform, display, overlay;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }
  [popover].mmh-pin-card:is(:popover-open, .\:popover-open) {
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  [popover].mmh-pin-card {
    transition-property: opacity, display, overlay;
    transition-duration: 0.1s;
    transition-behavior: allow-discrete;
  }
}
@starting-style {
  [popover].mmh-pin-card:is(:popover-open, .\:popover-open) {
    opacity: 0;
  }
}
@supports (position-area: block-end) and (container-type: anchored) {
  [popover].mmh-pin-card {
    position: fixed;
    inset: auto;
    margin: 0.45rem 0 0;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    container-type: anchored;
  }
  @supports (container-type: anchored) {
    .mmh-pin-card__link::before {
      content: "▲" / "";
      position: absolute;
      inset-block-start: -0.62rem;
      inset-inline-start: 0.85rem;
      font-size: 0.65rem;
      line-height: 1;
      color: #FFFFFF;
      text-shadow: 0 -1px 0 rgba(8, 46, 67, 0.14);
      pointer-events: none;
    }
    @container anchored(fallback: flip-block) {
      .mmh-pin-card__link::before {
        content: "▼" / "";
        inset-block-start: auto;
        inset-block-end: -0.62rem;
        text-shadow: 0 1px 0 rgba(8, 46, 67, 0.14);
      }
    }
  }
}
[popover].mmh-pin-card.is-js-positioned {
  position: fixed;
  inset: auto;
  margin: 0;
}

@media (forced-colors: active) {
  .mmh-breadcrumbs > ol > li > a[aria-current="page"] {
    text-decoration: underline;
  }
  .mmh-table-wrap,
  .mmh-table tbody tr,
  .mmh-tut-meta,
  .mmh-step,
  .mmh-callout,
  .mmh-verdict-box,
  .mmh-pc-card,
  .mmh-calc-card,
  .mmh-tax-pill,
  .mmh-faq-item,
  .mmh-pin-card,
  .mmh-shop-figure,
  .mmh-sidebar-price {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .mmh-pin__dot {
    border: 2px solid ButtonText;
    background: Canvas;
  }
  .mmh-pin__dot::after {
    background: ButtonText;
  }
  .mmh-hero-banner__scrim {
    background: Canvas;
  }
  .mmh-hero-banner,
  .mmh-hero-banner__title,
  .mmh-hero-banner__lead,
  .mmh-hero-banner__caption {
    background: Canvas;
    color: CanvasText;
    text-shadow: none;
  }
  .mmh-site-menu,
  .mmh-mega-panel,
  .deal-card,
  .deal-row,
  .deal-row__vote,
  .guide-card,
  .mmh-cover__stage,
  .mmh-gallery-card,
  dialog.mmh-lightbox,
  .room-tile,
  .mmh-criteria-box,
  .pillar-card,
  .mmh-prose-box,
  .mmh-sidebar-box,
  .mmh-hud,
  .filter-pill,
  .palette-btn {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .mmh-btn-primary,
  .mmh-leica-btn,
  .deal-cta {
    border: 2px solid ButtonText;
  }
}