/* =====================================================================
   MMS: Marketplace Intelligence tokens, in the Koolmetrix palette
   =====================================================================
   Colour comes from the Koolmetrix design system (kool-designer plugin,
   references/design-tokens.md): navy primary for actions, links and
   headings; cyan secondary and green accent for data; Koolmetrix grey for
   text; cool neutrals. Team decision 2026-10-08, replacing the earlier
   MediaMarkt palette.

   Adapted to MediaMarkt in two places:
     - MediaMarkt red stays as --brand (notification count, active rail
       item). It is the client's mark, so it is the one colour not ours.
     - The price scale and the eight chart series need more steps than the
       three brand colours give, so they are extended with the design
       system's own tints (dark-theme and container values), its orange
       and its error red.

   The --mm-* names are historical (they held MediaMarkt's brights) and are
   kept because the views reference them; read them as "highlight fills".

   Verified by redesign/tools/check-contrast.mjs. Do not hand-tune a value
   without re-running it.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Self-hosted variable fonts. One file per family covers weights 100-900,
   so there is no per-weight request and no faux-bold synthesis.
   Nothing here touches a CDN at runtime.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/InstrumentSans-Variable.woff2') format('woff2-variations'),
       url('../fonts/InstrumentSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/OpenSans-Variable.woff2') format('woff2-variations'),
       url('../fonts/OpenSans-Variable.woff2') format('woff2');
}
[data-brand="mediamarkt"] {
  /* ---- Koolmetrix brand colours (design-tokens.md, light theme) ---- */
  --kx-primary:      #002e52;
  --kx-primary-deep: #001a30;   /* on-primary-container */
  --kx-primary-tint: #cce0ed;   /* primary-container */
  --kx-secondary:    #009cde;
  --kx-accent:       #afca0b;
  --kx-deep-cyan:    #005f87;   /* secondary-container, dark theme */
  --kx-light-cyan:   #6ec5ea;   /* secondary, dark theme */
  --kx-steel:        #7fbadb;   /* primary, dark theme */
  --kx-lime:         #c8e24d;   /* accent, dark theme */
  --kx-orange:       #f7a600;   /* complimentary */
  --kx-orange-light: #ffbf42;   /* complimentary, dark theme */
  --kx-error:        #d32f2f;
  --kx-error-deep:   #8c1d18;   /* error-container, dark theme */

  /* the design system's gradient card: secondary to accent, white text.
     White measures 3.1:1 at the cyan end and 1.9:1 over the green, below
     AA; chosen knowingly by Tasos, 2026-10-08. Keep text on the cyan side. */
  --highlight-gradient: linear-gradient(135deg, var(--kx-secondary), var(--kx-accent));
  --on-highlight:       var(--n-0);

  /* ---- neutral ramp: cool, tinted toward the navy (hue 250) ---- */
  --n-0:   oklch(1     0     0 );
  --n-25:  oklch(0.987 0.002 250);
  --n-50:  oklch(0.974 0.003 250);
  --n-75:  oklch(0.965 0.003 250);   /* ~#f5f5f7, the Koolmetrix surface */
  --n-100: oklch(0.951 0.004 250);
  --n-200: oklch(0.910 0.005 250);
  --n-300: oklch(0.855 0.006 250);
  --n-400: oklch(0.735 0.008 250);
  --n-500: oklch(0.615 0.009 250);
  --n-600: oklch(0.515 0.010 250);
  --n-700: oklch(0.425 0.012 250);
  --n-800: oklch(0.320 0.014 250);
  --n-900: oklch(0.235 0.016 250);
  --n-950: oklch(0.155 0.016 250);

  /* ---- surfaces ---- */
  /* Canvas. Deliberately darker than the old n-25: with frame borders gone,
     tone is the ONLY thing separating a card from the page, and n-25 measured
     1.04 against a white card, which reads as no separation at all. n-75
     gives 1.11. */
  --surface:                   var(--n-75);
  --surface-container:         var(--n-0);
  --surface-container-high:    var(--n-50);
  --surface-container-highest: var(--n-100);
  /* The striped row in every zebra list and table. A touch lighter than
     the canvas and without its blue tint, so stripes stay quiet inside a
     white card (Tasos, 2026-10-08). */
  --zebra:                     oklch(0.97 0 0);

  /* ---- text ---- */
  /* Koolmetrix grey body, navy headings. Anything clickable in running
     text takes the navy too (--text-link). */
  --text:         #545656;   /* 7.4:1 on white */
  --text-heading: var(--kx-primary);
  --text-muted:   #6f7373;   /* 4.8:1 on white */
  --text-link:    var(--kx-primary);   /* clickable names in running text (sellers) */
  --text-inverse: var(--n-0);

  /* ---- lines ---- */
  --outline:        var(--n-200);  /* decorative separators */
  --outline-strong: var(--n-300);  /* card and table borders */
  --outline-input:  var(--n-500);  /* form controls, needs 3:1 */

  /* ---- action: primary buttons, navy ---- */
  --action:       var(--kx-primary);        /* white on it 13.9:1 */
  --action-hover: var(--kx-primary-deep);   /* white on it 17.6:1 */
  --on-action:    var(--n-0);

  /* ---- highlight fills (historical --mm-* names) ----
     These are FILLS. Most fail as text on white, so every one that can
     reach text has an -ink shade at >= 4.5:1. Text on a fill is black,
     except blue, purple and crimson, which are dark and take white. */
  --mm-yellow:    #ffe082;
  --mm-orange:    var(--kx-orange);
  --mm-magenta:   #ef5350;
  --mm-purple:    var(--kx-deep-cyan);
  --mm-blue:      var(--kx-primary);
  --mm-cyan:      var(--kx-light-cyan);
  --mm-turquoise: var(--kx-accent);
  /* in-between steps, used by the ordered price scale */
  --mm-lime:      var(--kx-lime);
  --mm-sky:       var(--kx-secondary);
  --mm-amber:     var(--kx-orange-light);
  --mm-tangerine: var(--kx-orange);
  --mm-crimson:   var(--kx-error);
  --mm-green:     var(--kx-accent);

  /* dashboard chart series and KPI sparklines: cyan and green are the
     design system's series 1 and 2 */
  --chart-1:        var(--kx-secondary);
  --chart-2:        var(--kx-accent);
  --spark-products: var(--kx-secondary);
  --spark-sellers:  var(--kx-accent);
  --spark-brands:   var(--kx-light-cyan);

  /* ---- interactive: navy ----
     Links, active tabs, table headers, selection. Navy links sit close to
     the navy headings, so links carry an underline (see "Links" below). */
  --interactive:        var(--kx-primary);
  --interactive-hover:  var(--kx-primary-deep);
  --interactive-subtle: #d6edf9;   /* secondary-container */
  --on-interactive:     var(--n-0);

  /* ---- brand: MediaMarkt red, the client's mark ----
     Notification count and the active rail item only. */
  --brand:    #DF0000;
  --on-brand: var(--n-0);
  --marker:   var(--kx-secondary);   /* active tab underline, active rail item */
  --rank:     var(--kx-secondary);   /* top-three rank numbers in a ranked list */
  --figure:   var(--kx-primary);     /* the headline figure on a dashboard card */

  /* ---- semantic: data meaning only ----
     The design system's success, error and warning.
     -fill is the lighter step, for badges and pills (black text on it).
     plain is the ink, for text and icons on white.
     -subtle is the pale tint, for large surfaces. */
  --positive:        #2e7d32;
  --positive-fill:   var(--kx-accent);
  --positive-subtle: #e8f5e9;
  --negative:        var(--kx-error);
  --negative-fill:   #ef5350;
  --negative-subtle: #fce4e4;
  --warning:         #7a5800;
  --warning-fill:    var(--kx-orange);
  --warning-subtle:  #fff8e1;
  --info:            var(--interactive);
  --info-subtle:     var(--interactive-subtle);
  --rating:          #D28003;            /* star glyphs: tangerine darkened to 3:1 (non-text UI) */
  --rating-ink:      #A76504;

  /* ---- categorical: chart series, in order ---- */
  --viz-1: var(--kx-secondary);
  --viz-2: var(--kx-accent);
  --viz-3: var(--kx-primary);
  --viz-4: var(--kx-orange);
  --viz-5: var(--kx-steel);
  --viz-6: var(--kx-deep-cyan);
  --viz-7: var(--n-500);
  --viz-8: var(--kx-lime);

  /* Markets on the Global page: one colour per storefront, chosen by Tasos (2026-10-12) for the
     stacked revenue chart, largest market first. Bright on purpose; not for text. */
  --market-1: #009cde;   /* Germany */
  --market-2: #40d99c;   /* Netherlands */
  --market-3: #00c424;   /* Austria */
  --market-4: #dd7bb8;   /* Poland */
  --market-5: #ffa741;   /* Saturn */
  --market-6: #ff552f;   /* Belgium */
  --market-7: #2c6ebf;   /* Switzerland */
  /* text-safe shades of the series, for Tailwind 500+ text classes */
  --viz-1-ink: #0077ab;
  --viz-2-ink: #5f6e00;
  --viz-3-ink: var(--kx-primary);
  --viz-4-ink: #7a5800;
  --viz-5-ink: var(--kx-deep-cyan);
  --viz-6-ink: var(--kx-deep-cyan);
  --viz-7-ink: var(--n-600);
  --viz-8-ink: #5f6e00;

  /* ---- price position: ordered, diverging ----
     Our price against the benchmark, in 11 bands, sampled from the
     gradient Tasos supplied on 2026-10-08: green, teal, blue (at par),
     orange, red, blended straight through, so the bands between blue and
     orange are the muted blue-to-sand mix on purpose.
     --pp-<key> is the middle of each band (badges, dots, legends).
     --pp-edge-0..11 are the band boundaries: a distribution bar paints
     each band from its left edge to its right edge, so the bar reads as
     the one continuous gradient whatever the band widths are.
     Text on every band is black, except the red end, which takes white.
     Names match the band keys the API returns: var(--pp-<key>). */
  --pp-extreme-positive: #98c124;   /* <= -35% */
  --pp-huge-positive:    #71b164;   /* -35..-25% */
  --pp-big-positive:     #39a491;   /* -25..-15% */
  --pp-positive:         #08a1af;   /* -15..-5% */
  --pp-small-positive:   #00a0c9;   /* -5..0% */
  --pp-equal:            #009ee1;   /* = 0% */
  --pp-small-negative:   #60a6ad;   /* 0..+5% */
  --pp-negative:         #b7a46a;   /* +5..+15% */
  --pp-big-negative:     #ea9315;   /* +15..+25% */
  --pp-huge-negative:    #e15f1f;   /* +25..+35% */
  --pp-extreme-negative: #d91722;   /* >= +35%  (white text) */
  --pp-edge-0: #98c124; --pp-edge-1: #85b948; --pp-edge-2: #58ab7c; --pp-edge-3: #1ba1a2; --pp-edge-4: #00a0bc; --pp-edge-5: #009fd5;
  --pp-edge-6: #0ca3c9; --pp-edge-7: #91a78e; --pp-edge-8: #d29d44; --pp-edge-9: #e57a1a; --pp-edge-10: #dc3f21; --pp-edge-11: #d91722;

  /* ---- type ---- */
  /* Both families are self-hosted variable fonts. Changing either is this
     one line, plus an @font-face above if the family is not already loaded. */
  --font-brand: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
  --font-ui:    'Open Sans', 'Segoe UI', Arial, sans-serif;

  /* ---- radius ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  /* ---- elevation ----------------------------------------------------
     Two layers per step: a short contact shadow that anchors the block to
     the canvas, and a wide diffuse layer that does the actual lifting. A
     single tight shadow (the old 0 1px 2px) reads as a hard edge, which is
     exactly what removing the borders was meant to avoid.

     Negative spread on the wide layer keeps it from bleeding out sideways,
     so blocks lift without looking like they are floating.

     The colour is a deep navy rather than pure black, so shadows stay in
     the same family as the cool canvas. */
  --shadow-rgb: 0 26 48;
  --elev-1: 0 1px 2px -1px rgb(var(--shadow-rgb) / .05),
            0 6px 14px -4px rgb(var(--shadow-rgb) / .06);
  --elev-2: 0 2px 4px -2px rgb(var(--shadow-rgb) / .05),
            0 10px 20px -5px rgb(var(--shadow-rgb) / .07);
  --elev-3: 0 4px 8px -4px rgb(var(--shadow-rgb) / .05),
            0 16px 32px -8px rgb(var(--shadow-rgb) / .09);
  --elev-4: 0 8px 16px -8px rgb(var(--shadow-rgb) / .06),
            0 28px 56px -14px rgb(var(--shadow-rgb) / .12);
  --elev-inset: inset 0 1px 2px 0 rgb(var(--shadow-rgb) / .05);
}

/* Distribution bars: each band runs from its left boundary colour to its
   right one, so neighbouring bands join into one gradient. */
[data-brand="mediamarkt"] .bar-segment.bar-extreme-positive { background: linear-gradient(90deg, var(--pp-edge-0), var(--pp-edge-1)); }
[data-brand="mediamarkt"] .bar-segment.bar-huge-positive { background: linear-gradient(90deg, var(--pp-edge-1), var(--pp-edge-2)); }
[data-brand="mediamarkt"] .bar-segment.bar-big-positive { background: linear-gradient(90deg, var(--pp-edge-2), var(--pp-edge-3)); }
[data-brand="mediamarkt"] .bar-segment.bar-positive { background: linear-gradient(90deg, var(--pp-edge-3), var(--pp-edge-4)); }
[data-brand="mediamarkt"] .bar-segment.bar-small-positive { background: linear-gradient(90deg, var(--pp-edge-4), var(--pp-edge-5)); }
[data-brand="mediamarkt"] .bar-segment.bar-equal { background: linear-gradient(90deg, var(--pp-edge-5), var(--pp-edge-6)); }
[data-brand="mediamarkt"] .bar-segment.bar-small-negative { background: linear-gradient(90deg, var(--pp-edge-6), var(--pp-edge-7)); }
[data-brand="mediamarkt"] .bar-segment.bar-negative { background: linear-gradient(90deg, var(--pp-edge-7), var(--pp-edge-8)); }
[data-brand="mediamarkt"] .bar-segment.bar-big-negative { background: linear-gradient(90deg, var(--pp-edge-8), var(--pp-edge-9)); }
[data-brand="mediamarkt"] .bar-segment.bar-huge-negative { background: linear-gradient(90deg, var(--pp-edge-9), var(--pp-edge-10)); }
[data-brand="mediamarkt"] .bar-segment.bar-extreme-negative { background: linear-gradient(90deg, var(--pp-edge-10), var(--pp-edge-11)); }

/* Percentages on a distribution bar are white on every band (Tasos,
   2026-10-08). White is under AA on the light bands (about 2:1 on the green
   end, 2.4:1 on orange), so a soft shadow carries the edge of the digits. */
[data-brand="mediamarkt"] .bar-segment {
  color: var(--n-0);
  text-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .45);
}

/* Text on the price badges is black; only the red extreme is dark enough
   for white. This overrides the per-view rules, which were written for a
   scale with dark ends on both sides. */
[data-brand="mediamarkt"] .badge-hero,
[data-brand="mediamarkt"] .badge-competitive,
[data-brand="mediamarkt"] .badge-overpriced { color: var(--n-950); }
[data-brand="mediamarkt"] .badge-critical { color: var(--n-0); }

/* =====================================================================
   Dark namespace — STUB. Structure only, no toggle wired.
   Values here are placeholders and have NOT been contrast-checked.
   Do not ship a toggle until they are.
   ===================================================================== */
[data-brand="mediamarkt"][data-theme="dark"] {
  --surface:                   var(--n-950);
  --surface-container:         var(--n-900);
  --surface-container-high:    var(--n-800);
  --surface-container-highest: var(--n-700);
  --text:         var(--n-100);
  --text-heading: var(--n-0);
  --text-muted:   var(--n-400);
  --text-inverse: var(--n-950);
  --outline:        var(--n-800);
  --outline-strong: var(--n-700);
  --outline-input:  var(--n-500);
  --action:       var(--n-100);
  --action-hover: var(--n-0);
  --on-action:    var(--n-950);
}

/* =====================================================================
   Borderless surfaces
   =====================================================================
   Blocks are separated by tone and elevation, never by an outline. Frame
   borders read as dated and, at this density, as clutter.

   Specificity note: these selectors are [data-brand] + [class*=] = (0,2,0),
   which beats a Tailwind utility's (0,1,0). That is why this file can load
   before Tailwind and still win.

   Three things deliberately keep an edge:
     - form controls and buttons, which need a visible hit target (WCAG 3:1
       non-text UI). A secondary button on a white card is otherwise invisible.
     - focus rings, which are the keyboard user's only position indicator
     - left accent bars (border-l-*), which are an accent, not a frame
   ===================================================================== */
[data-brand="mediamarkt"] [class*="border-gray-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-slate-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-zinc-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-neutral-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-stone-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-red-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-orange-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-amber-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-yellow-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-lime-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-green-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-emerald-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-teal-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-cyan-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-sky-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-blue-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-indigo-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-violet-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-purple-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-fuchsia-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-pink-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="border-rose-"]:not(input):not(select):not(textarea):not(button):not([class*="border-b-"]):not([class*="border-t-"]):not(.border-dashed),
[data-brand="mediamarkt"] [class*="divide-gray-"]:not(input):not(select):not(textarea) > * + *,
[data-brand="mediamarkt"] [class*="divide-slate-"]:not(input):not(select):not(textarea) > * + * {
  border-color: transparent;
}

/* =====================================================================
   Solid colour fills are the brights
   =====================================================================
   Tailwind uses one variable per family step for text, border AND fill.
   The bridge points 500+ at the text-safe inks, which is right for text
   and wrong for fills: a bg-green-500 bar came out dark teal. So solid
   fills (400-600) are overridden here to the highlight fills, and any
   white text on them flips to black where white would fail contrast.
   Specificity (0,2,0) beats the utility (0,1,0).
   ===================================================================== */
[data-brand="mediamarkt"] .bg-green-400, [data-brand="mediamarkt"] .bg-green-500, [data-brand="mediamarkt"] .bg-green-600 { background-color: var(--positive-fill); }
[data-brand="mediamarkt"] .bg-green-400.text-white, [data-brand="mediamarkt"] .bg-green-500.text-white, [data-brand="mediamarkt"] .bg-green-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-emerald-400, [data-brand="mediamarkt"] .bg-emerald-500, [data-brand="mediamarkt"] .bg-emerald-600 { background-color: var(--positive-fill); }
[data-brand="mediamarkt"] .bg-emerald-400.text-white, [data-brand="mediamarkt"] .bg-emerald-500.text-white, [data-brand="mediamarkt"] .bg-emerald-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-red-400, [data-brand="mediamarkt"] .bg-red-500, [data-brand="mediamarkt"] .bg-red-600 { background-color: var(--negative-fill); }
[data-brand="mediamarkt"] .bg-red-400.text-white, [data-brand="mediamarkt"] .bg-red-500.text-white, [data-brand="mediamarkt"] .bg-red-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-rose-400, [data-brand="mediamarkt"] .bg-rose-500, [data-brand="mediamarkt"] .bg-rose-600 { background-color: var(--negative-fill); }
[data-brand="mediamarkt"] .bg-rose-400.text-white, [data-brand="mediamarkt"] .bg-rose-500.text-white, [data-brand="mediamarkt"] .bg-rose-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-orange-400, [data-brand="mediamarkt"] .bg-orange-500, [data-brand="mediamarkt"] .bg-orange-600 { background-color: var(--warning-fill); }
[data-brand="mediamarkt"] .bg-orange-400.text-white, [data-brand="mediamarkt"] .bg-orange-500.text-white, [data-brand="mediamarkt"] .bg-orange-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-amber-400, [data-brand="mediamarkt"] .bg-amber-500, [data-brand="mediamarkt"] .bg-amber-600 { background-color: var(--warning-fill); }
[data-brand="mediamarkt"] .bg-amber-400.text-white, [data-brand="mediamarkt"] .bg-amber-500.text-white, [data-brand="mediamarkt"] .bg-amber-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-yellow-400, [data-brand="mediamarkt"] .bg-yellow-500, [data-brand="mediamarkt"] .bg-yellow-600 { background-color: var(--mm-yellow); }
[data-brand="mediamarkt"] .bg-yellow-400.text-white, [data-brand="mediamarkt"] .bg-yellow-500.text-white, [data-brand="mediamarkt"] .bg-yellow-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-purple-400, [data-brand="mediamarkt"] .bg-purple-500, [data-brand="mediamarkt"] .bg-purple-600 { background-color: var(--mm-purple); }
[data-brand="mediamarkt"] .bg-violet-400, [data-brand="mediamarkt"] .bg-violet-500, [data-brand="mediamarkt"] .bg-violet-600 { background-color: var(--mm-purple); }
[data-brand="mediamarkt"] .bg-pink-400, [data-brand="mediamarkt"] .bg-pink-500, [data-brand="mediamarkt"] .bg-pink-600 { background-color: var(--mm-magenta); }
[data-brand="mediamarkt"] .bg-pink-400.text-white, [data-brand="mediamarkt"] .bg-pink-500.text-white, [data-brand="mediamarkt"] .bg-pink-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-fuchsia-400, [data-brand="mediamarkt"] .bg-fuchsia-500, [data-brand="mediamarkt"] .bg-fuchsia-600 { background-color: var(--mm-magenta); }
[data-brand="mediamarkt"] .bg-fuchsia-400.text-white, [data-brand="mediamarkt"] .bg-fuchsia-500.text-white, [data-brand="mediamarkt"] .bg-fuchsia-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-teal-400, [data-brand="mediamarkt"] .bg-teal-500, [data-brand="mediamarkt"] .bg-teal-600 { background-color: var(--mm-turquoise); }
[data-brand="mediamarkt"] .bg-teal-400.text-white, [data-brand="mediamarkt"] .bg-teal-500.text-white, [data-brand="mediamarkt"] .bg-teal-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-cyan-400, [data-brand="mediamarkt"] .bg-cyan-500, [data-brand="mediamarkt"] .bg-cyan-600 { background-color: var(--mm-cyan); }
[data-brand="mediamarkt"] .bg-cyan-400.text-white, [data-brand="mediamarkt"] .bg-cyan-500.text-white, [data-brand="mediamarkt"] .bg-cyan-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-sky-400, [data-brand="mediamarkt"] .bg-sky-500, [data-brand="mediamarkt"] .bg-sky-600 { background-color: var(--mm-sky); }
[data-brand="mediamarkt"] .bg-sky-400.text-white, [data-brand="mediamarkt"] .bg-sky-500.text-white, [data-brand="mediamarkt"] .bg-sky-600.text-white { color: var(--n-950); }
[data-brand="mediamarkt"] .bg-blue-400, [data-brand="mediamarkt"] .bg-blue-500, [data-brand="mediamarkt"] .bg-blue-600 { background-color: var(--mm-blue); }
[data-brand="mediamarkt"] .bg-indigo-400, [data-brand="mediamarkt"] .bg-indigo-500, [data-brand="mediamarkt"] .bg-indigo-600 { background-color: var(--mm-blue); }

/* =====================================================================
   Badges
   =====================================================================
   One pill for status words in tables and cards. Backgrounds are the
   subtle tints with the matching ink, so a column of pills stays calm in
   a dense table; neutral grey is for the normal case. */
[data-brand="mediamarkt"] .mms-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
[data-brand="mediamarkt"] .mms-badge--positive { background: var(--positive-subtle); color: var(--positive); }
[data-brand="mediamarkt"] .mms-badge--negative { background: var(--negative-subtle); color: var(--kx-error-deep); }   /* --negative is 4.1:1 on the tint */
[data-brand="mediamarkt"] .mms-badge--warning  { background: var(--warning-subtle);  color: var(--warning); }
[data-brand="mediamarkt"] .mms-badge--neutral  { background: var(--surface-container-highest); color: var(--text); }
[data-brand="mediamarkt"] .mms-badge--info     { background: var(--interactive-subtle); color: var(--text-heading); }

/* =====================================================================
   Ledger lists
   =====================================================================
   Ranked lists built as CSS grids (Top Products, Opportunities), paged in
   place. Same language as the data tables: navy header band
   with white labels, zebra rows, cyan top-three ranks. The grid template
   (grid + grid-cols-[...]) stays on each element, set by the view. */
[data-brand="mediamarkt"] .mms-ledger__head {
  align-items: center; column-gap: 12px; padding: 10px 20px;
  background: linear-gradient(180deg, var(--interactive), var(--interactive-hover));
  color: color-mix(in oklch, var(--text-inverse) 72%, transparent);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
[data-brand="mediamarkt"] .mms-ledger__head .is-sorted { color: var(--text-inverse); }
[data-brand="mediamarkt"] .mms-ledger__row {
  align-items: center; column-gap: 12px; padding: 11px 20px; cursor: pointer;
}
[data-brand="mediamarkt"] .mms-ledger__row:nth-child(even) { background: var(--zebra); }
[data-brand="mediamarkt"] .mms-ledger__row:hover { background: var(--surface-container-highest); }
[data-brand="mediamarkt"] .mms-ledger__rank {
  font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
[data-brand="mediamarkt"] .mms-ledger__rank.is-top { font-weight: 700; color: var(--rank); }
[data-brand="mediamarkt"] .mms-ledger__img {
  width: 36px; height: 36px; padding: 2px; border-radius: var(--r-md); object-fit: contain;
  background: var(--n-0); box-shadow: inset 0 0 0 1px var(--outline);
}
[data-brand="mediamarkt"] .mms-ledger__title {
  font-size: 13.5px; font-weight: 600; color: var(--text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-brand="mediamarkt"] .mms-ledger__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 20px; box-shadow: inset 0 1px 0 var(--outline);
  font-size: 13px; color: var(--text-muted);
}
[data-brand="mediamarkt"] .mms-ledger__foot.hidden { display: none; }
[data-brand="mediamarkt"] .mms-pager { display: flex; align-items: center; gap: 4px; }
[data-brand="mediamarkt"] .mms-pager button {
  min-width: 32px; height: 32px; padding: 0 9px;
  border: 1px solid var(--outline-strong); border-radius: var(--r-md);
  background: var(--surface-container); color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
[data-brand="mediamarkt"] .mms-pager button:hover:not(:disabled) { border-color: var(--n-400); }
[data-brand="mediamarkt"] .mms-pager button:disabled { opacity: .4; cursor: default; }
[data-brand="mediamarkt"] .mms-pager button.is-current {
  background: var(--interactive); border-color: var(--interactive); color: var(--on-interactive);
}
[data-brand="mediamarkt"] .mms-pager__gap { padding: 0 4px; }

/* =====================================================================
   Page blocks
   =====================================================================
   The pieces an overview page is built from (Sellers, Brands): KPI cards
   with a gradient line, cards for charts and lists, the headline legend
   beside a chart title, and compact message rows. */
@keyframes mms-spin { to { transform: rotate(360deg); } }
[data-brand="mediamarkt"] .mms-spinner { width: 32px; height: 32px; border: 3px solid var(--outline); border-top-color: var(--interactive); border-radius: 50%; animation: mms-spin 0.8s linear infinite; }

/* ── KPI cards: icon chip and label, the figure, then who it is ── */
[data-brand="mediamarkt"] .mms-kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 18px 20px 22px; border-radius: var(--r-lg); background: var(--surface-container); box-shadow: var(--elev-1); min-width: 0; }
/* A thin gradient line along the bottom of every card. Each card sets its
   two ends (--kpi-from, --kpi-to), and each starts where its neighbour
   stopped, so the row runs navy, cyan, green, orange, red. */
[data-brand="mediamarkt"] .mms-kpi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--kpi-from), var(--kpi-to)); }
[data-brand="mediamarkt"] .mms-kpi__label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-kpi__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--n-950); }
[data-brand="mediamarkt"] .mms-kpi__icon svg { width: 17px; height: 17px; }
[data-brand="mediamarkt"] .mms-kpi__figure { margin: 10px 0 0; font-family: var(--font-brand); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--figure); font-variant-numeric: tabular-nums; }
[data-brand="mediamarkt"] .mms-kpi__figure small { margin-left: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-kpi__name { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-brand="mediamarkt"] .mms-kpi__name.is-empty { font-weight: 500; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-kpi__meta { margin: 0; font-size: 12px; color: var(--text-muted); }
/* A count's share of a whole, after the count: "· 31%" (mmsPct / mmsPctTag / mmsSetPct in layout.php). */
[data-brand="mediamarkt"] .mms-pct { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-brand="mediamarkt"] .mms-pct::before { content: '· '; }

/* Hover card (data-hover-card, layout.php): white, like the charts' hover card. Rows: a name and a value,
   optionally a share bar with a note under them; a muted foot line. */
[data-brand="mediamarkt"] .mms-hovercard { position: fixed; z-index: 10000; width: max-content; min-width: 240px; max-width: 340px; padding: 12px 14px; border: 1px solid var(--outline); border-radius: var(--r-lg); background: var(--surface-container); box-shadow: 0 12px 32px -12px rgb(0 26 48 / .28); font-size: 12.5px; color: var(--text); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; }
[data-brand="mediamarkt"] .mms-hovercard.show { opacity: 1; transform: none; }
[data-brand="mediamarkt"] .mms-hovercard__title { margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-hovercard__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; padding: 6px 0; }
[data-brand="mediamarkt"] .mms-hovercard__row + .mms-hovercard__row { border-top: 1px solid var(--outline); }
[data-brand="mediamarkt"] .mms-hovercard__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-heading); }
[data-brand="mediamarkt"] .mms-hovercard__value { font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }
[data-brand="mediamarkt"] .mms-hovercard__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-brand="mediamarkt"] .mms-hovercard__bar i { flex: 1; min-width: 60px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--surface-container-highest); }
[data-brand="mediamarkt"] .mms-hovercard__bar b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--kx-secondary), var(--kx-accent)); }
[data-brand="mediamarkt"] .mms-hovercard__bar span { flex: 0 0 auto; min-width: 92px; text-align: right; }   /* same width on every row, so the bars compare */
[data-brand="mediamarkt"] .mms-hovercard__foot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--outline); font-size: 11.5px; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-hovercard__foot b { font-weight: 600; color: var(--text); }
[data-brand="mediamarkt"] .mms-pct:empty { display: none; }

/* ── cards for charts and lists ── */
[data-brand="mediamarkt"] .mms-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: var(--surface-container); box-shadow: var(--elev-1); overflow: hidden; }
[data-brand="mediamarkt"] .mms-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 18px 20px 12px; }
[data-brand="mediamarkt"] .mms-card__title { margin: 0; font-family: var(--font-brand); font-size: 17px; font-weight: 600; color: var(--text-heading); }
[data-brand="mediamarkt"] .mms-card__body { position: relative; flex: 1 1 auto; min-height: 0; }
[data-brand="mediamarkt"] .mms-card__body--chart { padding: 0 16px 14px; }
[data-brand="mediamarkt"] .mms-card__loading { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface-container) 80%, transparent); }

/* headline legend next to a chart title */
[data-brand="mediamarkt"] .mms-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: 13px; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-legend > span { display: inline-flex; align-items: baseline; gap: 6px; }
[data-brand="mediamarkt"] .mms-legend i { align-self: center; width: 10px; height: 10px; border-radius: 50%; }
[data-brand="mediamarkt"] .mms-legend b { font-family: var(--font-brand); font-size: 18px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
[data-brand="mediamarkt"] .mms-legend .is-up { font-size: 12px; font-weight: 600; color: var(--positive); }
[data-brand="mediamarkt"] .mms-legend .is-down { font-size: 12px; font-weight: 600; color: var(--negative); }

/* seller messages: one compact row per message */
[data-brand="mediamarkt"] .mms-msgs { overflow-y: auto; height: 100%; }
[data-brand="mediamarkt"] .mms-msg { display: flex; align-items: flex-start; gap: 12px; padding: 11px 20px; }
[data-brand="mediamarkt"] .mms-msg:nth-child(even) { background: var(--zebra); }
[data-brand="mediamarkt"] .mms-msg__icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--n-950); }
[data-brand="mediamarkt"] .mms-msg__icon svg { width: 16px; height: 16px; }
[data-brand="mediamarkt"] .mms-msg__text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
[data-brand="mediamarkt"] .mms-msg.is-unread .mms-msg__text { font-weight: 600; color: var(--text-heading); }
[data-brand="mediamarkt"] .mms-msg__time { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-msg__dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--brand); }
[data-brand="mediamarkt"] .mms-foot-link { color: var(--text-heading); font-weight: 600; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-size: 13px; }
[data-brand="mediamarkt"] .mms-foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Category path (Main > Level 1 > Level 2): parents quiet, the last level
   carries the weight. */
[data-brand="mediamarkt"] .mms-path { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; }
[data-brand="mediamarkt"] .mms-path__parent { color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-path__leaf { font-weight: 600; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; }
[data-brand="mediamarkt"] .mms-path__sep { flex: 0 0 auto; font-size: 9px; color: var(--n-400); }

/* Icon button: a quiet square for row actions (view, edit, export). */
[data-brand="mediamarkt"] .mms-icon-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--outline-strong); border-radius: var(--r-md);
  background: var(--surface-container); color: var(--text-heading); font-size: 12.5px; cursor: pointer;
}
[data-brand="mediamarkt"] .mms-icon-btn:hover { border-color: var(--n-400); background: var(--surface-container-high); }

/* Segmented control: two or three mutually exclusive choices. */
[data-brand="mediamarkt"] .mms-seg {
  display: inline-flex; align-items: center; height: 36px; overflow: hidden;
  border: 1px solid var(--outline-strong); border-radius: var(--r-md); background: var(--surface-container);
}
[data-brand="mediamarkt"] .mms-seg > button {
  height: 100%; padding: 0 14px; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap;
}
[data-brand="mediamarkt"] .mms-seg > button + button { border-left: 1px solid var(--outline); }
[data-brand="mediamarkt"] .mms-seg > button.on { background: var(--interactive-subtle); color: var(--text-heading); font-weight: 600; }

/* =====================================================================
   Analysis blocks
   =====================================================================
   Shared by the pages that explain a dataset (Analytics, Competition):
   the note under a card title, the colour key, a ranked list with a bar
   under each name (a row can filter the page), and the chip that shows
   the active filter. */
[data-brand="mediamarkt"] .mms-hint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-hint b { font-weight: 600; color: var(--text-heading); }
[data-brand="mediamarkt"] .mms-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-key span { display: inline-flex; align-items: center; gap: 6px; }
[data-brand="mediamarkt"] .mms-key i { width: 9px; height: 9px; border-radius: 50%; }
[data-brand="mediamarkt"] .mms-key i.dash { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--n-400); }
[data-brand="mediamarkt"] .mms-empty { padding: 44px 20px; text-align: center; font-size: 13.5px; color: var(--text-muted); }
/* ── ranked list with a bar under each name; a row can filter the table ── */
[data-brand="mediamarkt"] .mms-rank { padding: 2px 0 10px; }
[data-brand="mediamarkt"] .mms-rank__row { display: block; width: 100%; padding: 9px 20px; text-align: left; cursor: pointer; }
[data-brand="mediamarkt"] .mms-rank__row:nth-child(even) { background: var(--zebra); }
[data-brand="mediamarkt"] .mms-rank__row:hover { background: var(--surface-container-highest); }
[data-brand="mediamarkt"] .mms-rank__row.on { background: var(--interactive-subtle); }
[data-brand="mediamarkt"] .mms-rank__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
[data-brand="mediamarkt"] .mms-rank__n { flex: 0 0 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
[data-brand="mediamarkt"] .mms-rank__n.is-top { font-weight: 700; color: var(--rank); }
[data-brand="mediamarkt"] .mms-rank__name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-brand="mediamarkt"] .mms-rank__val { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
[data-brand="mediamarkt"] .mms-rank__val small { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
[data-brand="mediamarkt"] .mms-bar { display: flex; height: 5px; border-radius: var(--r-full); background: var(--surface-container-highest); overflow: hidden; }
[data-brand="mediamarkt"] .mms-bar > i { display: block; height: 100%; transition: width .5s ease; }
[data-brand="mediamarkt"] .mms-bar > i:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
/* ── active filter chip ── */
[data-brand="mediamarkt"] .mms-scope { display: inline-flex; align-items: center; gap: 8px; height: 32px; max-width: 280px; padding: 0 12px; border-radius: var(--r-full); background: var(--interactive); color: var(--on-interactive); font-size: 13px; font-weight: 600; cursor: pointer; }
[data-brand="mediamarkt"] .mms-scope.hidden { display: none; }
[data-brand="mediamarkt"] .mms-scope span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-brand="mediamarkt"] .mms-scope svg { flex: 0 0 auto; width: 13px; height: 13px; opacity: .8; }

/* =====================================================================
   Tables on narrow screens
   =====================================================================
   Tabulator rows are flex rows here, so when the columns need more room
   than the screen has, the body cells shrank while the header kept its
   widths: headers ended up over the wrong columns and the last columns
   fell off with no way to reach them. Cells keep their width and the
   table grows to fit them, so the holder scrolls sideways with its header. */
[data-brand="mediamarkt"] .tabulator .tabulator-row .tabulator-cell { flex-shrink: 0; }
[data-brand="mediamarkt"] .tabulator .tabulator-tableholder .tabulator-table { min-width: max-content; }

/* Scrollbars: thin, no arrow buttons, a warm-grey thumb that darkens on
   hover. WebKit/Blink use the pseudo-elements; Firefox (which has no
   ::-webkit-scrollbar) gets the standard properties instead. Setting the
   standard ones in Chrome would switch the pseudo-elements off. */
[data-brand="mediamarkt"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-brand="mediamarkt"] ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
[data-brand="mediamarkt"] ::-webkit-scrollbar-track,
[data-brand="mediamarkt"] ::-webkit-scrollbar-corner { background: transparent; }
[data-brand="mediamarkt"] ::-webkit-scrollbar-thumb {
  background: var(--n-300); border-radius: var(--r-full);
  border: 2px solid transparent; background-clip: padding-box;
}
[data-brand="mediamarkt"] ::-webkit-scrollbar-thumb:hover { background-color: var(--n-400); }
@supports not selector(::-webkit-scrollbar) {
  [data-brand="mediamarkt"] * { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
}

/* Links. Interactive is navy, the same colour as the headings and close to body
   text, so colour alone cannot mark a link (WCAG 1.4.1). A quiet underline
   does, and firms up on hover. Button-like links (with a bg-*) are exempt. */
[data-brand="mediamarkt"] a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]),
[data-brand="mediamarkt"] a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]),
[data-brand="mediamarkt"] a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]),
[data-brand="mediamarkt"] [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
}
[data-brand="mediamarkt"] a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]):hover,
[data-brand="mediamarkt"] a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]):hover,
[data-brand="mediamarkt"] a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]):hover,
[data-brand="mediamarkt"] [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]):hover {
  text-decoration-color: currentColor;
}

/* Clickable names in a table. No underline and no link blue (Tasos,
   2026-10-12): the name is navy and semibold and carries a small chevron
   that is always there, so it reads as clickable before the mouse moves.
   On hover the name and the chevron go cyan. Text that does nothing stays
   regular grey with no chevron.
   .mms-open is the class for new markup; the other selectors bring the
   cells written before it (and the rows that open as a whole) into line. */
[data-brand="mediamarkt"] :is(
  .mms-open,
  .tabulator a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator .pc-product-btn,
  .an-table tr.clickable .an-name,
  .cp-two > .cp-name,
  #dataSetsTable .ds-name,
  .rf-table .refurb-open,
  .ms-row .in-link,
  td > .in-link,
  .gtsp-row .gtsp-name
) {
  position: relative; display: inline-block; vertical-align: bottom; padding-right: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none !important; cursor: pointer;
}
[data-brand="mediamarkt"] :is(
  .mms-open,
  .tabulator a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator .pc-product-btn,
  .cp-two > .cp-name,
  #dataSetsTable .ds-name,
  .rf-table .refurb-open,
  .ms-row .in-link,
  td > .in-link,
  .gtsp-row .gtsp-name
) { max-width: 100%; }
/* The look of the name itself, where the old markup asked for link blue. */
[data-brand="mediamarkt"] .mms-open,
[data-brand="mediamarkt"] .tabulator a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]),
[data-brand="mediamarkt"] .tabulator a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]),
[data-brand="mediamarkt"] .tabulator a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]),
[data-brand="mediamarkt"] .tabulator [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]),
[data-brand="mediamarkt"] .tabulator .pc-product-btn {
  font-weight: 600; color: var(--text-heading);
}
/* A product that left the feed keeps its faded name until the row is hovered. */
[data-brand="mediamarkt"] .tabulator-row:has(.prod-removed-dot):not(:hover) .tabulator-cell a[class*="text-blue-"] {
  color: color-mix(in oklch, var(--interactive) 50%, var(--surface-container));
}
/* The chevron */
[data-brand="mediamarkt"] :is(
  .mms-open,
  .tabulator a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]),
  .tabulator .pc-product-btn,
  .an-table tr.clickable .an-name,
  .cp-two > .cp-name,
  #dataSetsTable .ds-name,
  .rf-table .refurb-open,
  .ms-row .in-link,
  td > .in-link,
  .gtsp-row .gtsp-name
)::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 5px; height: 5px;
  border-top: 1.5px solid var(--n-400); border-right: 1.5px solid var(--n-400);
  transform: translateY(-50%) rotate(45deg); transition: right .15s ease, border-color .15s ease;
}
/* Hover: on the name, or anywhere on a row that opens as a whole. */
[data-brand="mediamarkt"] :is(
  .mms-open:hover,
  .tabulator a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator .pc-product-btn:hover,
  .an-table tr.clickable:hover .an-name,
  .tabulator-row:hover .cp-two > .cp-name,
  #dataSetsTable .tabulator-row:hover .ds-name,
  .rf-table .refurb-open:hover,
  .ms-row .in-link:hover,
  td > .in-link:hover,
  .gtsp-row:hover .gtsp-name
) { color: var(--kx-deep-cyan); }
[data-brand="mediamarkt"] :is(
  .mms-open:hover,
  .tabulator a.text-interactive:not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator a[class*="text-blue-"]:not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator a[class*="text-indigo-"]:not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator [class*="text-blue-"][class*="cursor-pointer"]:not(button):not([class^="bg-"]):not([class*=" bg-"]):hover,
  .tabulator .pc-product-btn:hover,
  .an-table tr.clickable:hover .an-name,
  .tabulator-row:hover .cp-two > .cp-name,
  #dataSetsTable .tabulator-row:hover .ds-name,
  .rf-table .refurb-open:hover,
  .ms-row .in-link:hover,
  td > .in-link:hover,
  .gtsp-row:hover .gtsp-name
)::after { right: 1px; border-color: var(--marker); }

/* The Tailwind bridge flattens gray-50..300 toward white so old grey panels
   become white blocks. That is right for backgrounds and wrong for text: a
   text-gray-300 glyph would land on n-100 and vanish. Text keeps the lightness
   it was written with. */
[data-brand="mediamarkt"] .text-gray-300 { color: var(--n-300); }
[data-brand="mediamarkt"] .text-gray-200 { color: var(--n-200); }

/* Coloured borders that are one-sided (border-b-2 + border-blue-600, the tab
   underline pattern) or dashed (drop zones) are markers, not frames, so the
   coloured lines above exempt them. Without this every such tab lost its
   active underline. */
/* Directional classes read as border-l-blue-500, which does NOT contain the
   substring "border-blue-", so accent bars and tab underlines survive the
   rule above without needing an exception. */

/* Neutral directional borders are divider rules, not accents, so they go too.
   Coloured directional classes (border-b-blue-600, border-l-4 border-l-...)
   are accents and are deliberately left alone. */
[data-brand="mediamarkt"] [class*="border-t-gray-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-r-gray-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-b-gray-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-l-gray-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-x-gray-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-y-gray-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-t-slate-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-r-slate-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-b-slate-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-l-slate-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-x-slate-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-y-slate-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-t-zinc-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-r-zinc-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-b-zinc-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-l-zinc-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-x-zinc-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-y-zinc-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-t-neutral-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-r-neutral-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-b-neutral-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-l-neutral-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-x-neutral-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-y-neutral-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-t-stone-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-r-stone-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-b-stone-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-l-stone-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-x-stone-"]:not(input):not(select):not(textarea):not(button),
[data-brand="mediamarkt"] [class*="border-y-stone-"]:not(input):not(select):not(textarea) {
  border-color: transparent;
}


/* ---------------------------------------------------------------------
   Form controls: one radius, one stroke.
   Controls had drifted to three treatments: chips at 8px + outline-strong,
   selects at 4px + outline-input, the search field at 12px + outline-input.

   ACCESSIBILITY NOTE. outline-strong measures ~1.4:1 against a white field,
   below the 3:1 WCAG 1.4.11 asks for non-text UI (outline-input gave 3.7:1).
   This is a deliberate visual decision, compensated by a strong focus ring:
   2px of --interactive at 7:1, which is the state that actually matters for
   keyboard users. Recorded here so it is a choice, not an accident.
   --------------------------------------------------------------------- */
[data-brand="mediamarkt"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-brand="mediamarkt"] select,
[data-brand="mediamarkt"] textarea,
[data-brand="mediamarkt"] .select2-selection,
[data-brand="mediamarkt"] .products-chip {
  border: 1px solid var(--outline-strong);
  border-radius: var(--r-md);
  background-color: var(--surface-container);
}
[data-brand="mediamarkt"] input:hover:not(:focus),
[data-brand="mediamarkt"] select:hover:not(:focus),
[data-brand="mediamarkt"] textarea:hover:not(:focus),
[data-brand="mediamarkt"] .products-chip:hover {
  border-color: var(--n-400);
}
[data-brand="mediamarkt"] input:focus,
[data-brand="mediamarkt"] input:focus-visible,
[data-brand="mediamarkt"] select:focus,
[data-brand="mediamarkt"] textarea:focus {
  outline: 2px solid var(--interactive);
  outline-offset: 1px;
  border-color: var(--interactive);
}

/* Dropdowns. Tailwind's reset zeroes the padding of every element, so a
   select without a padding class had its text against the border and the
   native arrow against the other edge. Every dropdown now draws the same
   chevron as the country switcher, with room kept for it on the right.
   The default padding sits in the base layer, so a padding utility or a
   view's own rule still wins; the chevron and its room are unlayered and
   more specific, so no view can put text under the chevron. */
@layer base {
  [data-brand="mediamarkt"] select:not([multiple]):not([size]) { padding: 5px 10px; }
}
[data-brand="mediamarkt"] select:not([multiple]):not([size]):not(.mms-country) {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f7373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  text-overflow: ellipsis;
}
/* The opened list. The native popup is drawn by the browser and ignores
   padding on its options, which left every option against the edge. Where
   the browser supports a stylable select (Chrome 135+), the list becomes a
   card of its own: padded options, the selected one marked with the
   selection tint. Other browsers keep their native popup. */
@supports (appearance: base-select) {
  [data-brand="mediamarkt"] select:not([multiple]):not([size]),
  [data-brand="mediamarkt"] select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  [data-brand="mediamarkt"] select::picker-icon { display: none; }   /* the chevron above already says it */
  [data-brand="mediamarkt"] select::picker(select) {
    margin-top: 4px; padding: 6px; min-width: anchor-size(width);
    border: 1px solid var(--outline-strong); border-radius: var(--r-md);
    background: var(--surface-container); box-shadow: var(--elev-3);
    font-family: var(--font-ui); font-size: 14px; font-weight: 400;
  }
  [data-brand="mediamarkt"] select option {
    padding: 8px 12px; border-radius: var(--r-sm);
    color: var(--text); white-space: nowrap; cursor: pointer;
  }
  [data-brand="mediamarkt"] select option::checkmark { display: none; }
  [data-brand="mediamarkt"] select option:hover,
  [data-brand="mediamarkt"] select option:focus-visible { background: var(--surface-container-highest); outline: none; }
  [data-brand="mediamarkt"] select option:checked { background: var(--interactive-subtle); color: var(--text-heading); font-weight: 600; }
  [data-brand="mediamarkt"] select option:disabled { color: var(--n-400); cursor: default; }
}

/* Cards sit on tone, with the faintest lift so they still read as blocks. */
[data-brand="mediamarkt"] [class*="border-gray-"][class*="rounded"]:not([class*="shadow-inner"]),
[data-brand="mediamarkt"] [class*="border-slate-"][class*="rounded"]:not([class*="shadow-inner"]) {
  box-shadow: var(--elev-1);
}

/* =====================================================================
   Hover feedback, decoupled from the surface mapping
   =====================================================================
   gray-50 and gray-100 now resolve to white so blocks read as white on the
   canvas. That would leave the 106 hover:bg-gray-50 / hover:bg-gray-100
   usages painting white on white, i.e. no hover feedback at all.

   Hover is therefore pinned to its own tone rather than inheriting whatever
   the gray-N token happens to mean. Specificity here is (0,3,0), which beats
   Tailwind's .hover\:bg-gray-100:hover at (0,2,0).
   ===================================================================== */
[data-brand="mediamarkt"] [class*="hover:bg-gray-"]:hover,
[data-brand="mediamarkt"] [class*="hover:bg-slate-"]:hover,
[data-brand="mediamarkt"] [class*="hover:bg-zinc-"]:hover,
[data-brand="mediamarkt"] [class*="hover:bg-neutral-"]:hover,
[data-brand="mediamarkt"] [class*="hover:bg-stone-"]:hover {
  background-color: var(--surface-container-high);
}