/* ==========================================================================
   Layout "Magica": a warm, refined Disney boutique. Ivory and white, deep plum text, sparing rose accents
   (from the logo). Fraunces (serif) for headings, Inter for product information and controls. Small radii,
   hairlines instead of shadows. Loaded on top of shop.css; Magica's own templates live in
   resources/views/themes/magica (header, footer, home, product card, product page, cart, checkout).
   ========================================================================== */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/magica/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/magica/fraunces-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/magica/fraunces-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/magica/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/magica/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/magica/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/magica/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/magica/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --ivory: #faf6f0;
  --sand: #f3ece3;
  --paper: #ffffff;
  --plum: #3b1736;
  --plum-2: #5c2a54;
  --rose: #c2006b;
  --rose-dark: #9c0056;
  --rose-soft: #fbecf3;
  --line: #e6dcd1;
  --line-soft: #efe8df;

  --night: var(--plum);
  --night-2: var(--plum-2);
  --primary: var(--plum);
  --primary-dark: #2a0f27;
  --primary-soft: var(--rose-soft);
  --accent: var(--rose);
  --accent-dark: var(--rose-dark);
  --pink: var(--rose);
  --heart: var(--rose);
  --text: var(--plum);
  --muted: #6c5b67;
  --border: var(--line);
  --bg: var(--ivory);
  --card: var(--paper);
  --danger: #b3123f;
  --radius: 6px;
  --shadow: none;
  --shadow-lg: 0 12px 30px rgba(59, 23, 54, .08);
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; letter-spacing: -.01em; color: var(--plum); }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; text-wrap: balance; }
a { color: var(--plum); text-underline-offset: 3px; }
a:hover { color: var(--rose); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
::selection { background: #f6d3e4; }
.container { max-width: 1240px; padding: 0 24px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--plum); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Service line ---------- */
.mg-service { background: var(--plum); color: #f6eaf1; font-size: .8rem; }
.mg-service-row { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 34px; }
.mg-service p { margin: 0; text-align: center; }
.mg-service span[aria-hidden] { margin: 0 8px; opacity: .6; }
.mg-lang { position: absolute; right: 24px; display: flex; gap: 10px; font-weight: 600; letter-spacing: .06em; }
.mg-service-row { position: relative; }
.mg-lang a { color: #f6eaf1; opacity: .75; text-decoration: none; }
.mg-lang a:hover { opacity: 1; color: #fff; text-decoration: underline; }
.mg-lang [aria-current] { color: #fff; border-bottom: 1px solid #fff; }
.mg-vat-switch { position: absolute; left: 24px; display: flex; gap: 10px; font-weight: 600; }
.mg-vat-switch a { color: #f6eaf1; opacity: .75; text-decoration: none; }
.mg-vat-switch a:hover { opacity: 1; color: #fff; text-decoration: underline; }
.mg-vat-switch [aria-current] { color: #fff; border-bottom: 1px solid #fff; }

/* ---------- Header: search left, logo centred, account and cart right ---------- */
.mg-header { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.mg-header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 84px; }
.mg-logo { grid-column: 2; display: block; line-height: 0; font-family: var(--font-head); font-size: 1.8rem; color: var(--plum); }
.mg-logo img { height: 52px; width: auto; }
.mg-search { grid-column: 1; grid-row: 1; position: relative; width: 100%; max-width: 340px; margin: 0; display: flex; align-items: center; }
.mg-search input { height: 42px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0 4px 0 34px;
  font-size: .92rem; box-shadow: none; }
.mg-search input:focus { outline: none; border-bottom-color: var(--plum); box-shadow: none; }
.mg-search input::placeholder { color: #6c5b67; }
.mg-search .search-btn { position: absolute; left: 0; right: auto; top: 5px; width: 32px; height: 32px; padding: 0; border-radius: var(--radius);
  background: transparent; color: var(--plum); display: inline-flex; align-items: center; justify-content: center; }
.mg-search .search-btn:hover, .mg-search .search-btn:focus-visible { background: var(--rose-soft); color: var(--rose-dark); }
.mg-search .search-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mg-search .suggestions { top: calc(100% + 8px); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.mg-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }
.mg-icon { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radius); color: var(--plum);
  font-size: .85rem; font-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer; }
.mg-icon:hover { background: var(--ivory); color: var(--plum); }
.mg-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mg-icon .heart-icon { stroke: currentColor; }
.wishlist-link:hover .heart-icon { fill: var(--rose); stroke: var(--rose); }
.mg-count { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.wishlist-link .mg-count { position: absolute; top: 2px; right: 0; }
.mg-count[hidden] { display: none; }
.mg-cart { border: 1px solid var(--plum); padding: 8px 14px; }
.mg-cart:hover { background: var(--plum); color: #fff; }
.mg-cart:hover .mg-count { background: #fff; color: var(--plum); }
.mg-menu-button { display: none; }

/* Main menu: small, quiet and centred; a rose line under the active item */
.main-nav { background: #f6eee6; border-top: 1px solid var(--line); } /* the menu row a shade warmer than the white logo row */
.menu { justify-content: center; gap: 0 26px; }
.menu-row { height: 50px; border: 0; }
.menu-link { color: var(--plum); font-family: var(--font-body); font-weight: 500; font-size: .93rem; padding: 4px 0; border-bottom: 1px solid transparent; }
a.menu-link:hover, .menu-item:hover > .menu-row .menu-link, .menu-item.open > .menu-row .menu-link { color: var(--plum); border-bottom-color: var(--rose); }
.mega-toggle { color: #9a8894; padding: 6px 0 6px 6px; font-size: .7rem; }
.menu-toggle { color: var(--plum); }
.mega { border-radius: 0; border-top: 1px solid var(--line); box-shadow: 0 18px 30px rgba(59, 23, 54, .07); }
.mega::before { display: none; }
.menu-item.mg-dismissed > .mega { display: none !important; }
.header .main-nav .mega-inner, .mg-header .main-nav .mega-inner { display: flex; gap: 48px; padding: 30px 24px 34px; }
.mega-heading { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 0; margin-bottom: 10px; padding-bottom: 0; }
.mega-column li a { color: var(--plum); font-size: .95rem; }
.mega-column li a:hover { color: var(--rose); }
.mega-column li a::before { display: none; }
.mega-all { background: none; color: var(--plum); padding: 0; border-radius: 0; border-bottom: 1px solid var(--plum); font-weight: 600; font-size: .88rem; }
.mega-all:hover { background: none; color: var(--rose); border-bottom-color: var(--rose); }
.mega-promo { border-radius: var(--radius); background: var(--ivory); color: var(--plum); }
/* Mega menu: the columns on the left, a lifestyle photo with its story filling the rest */
.mg-header .main-nav .mega-inner { gap: 56px; align-items: stretch; }
.mg-header .mega-main { flex: 0 0 auto; }
.mg-header .mega-columns { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 220px); gap: 24px 40px; }
.mg-mega-photo { flex: 1 1 520px; max-width: 680px; width: auto; min-height: 0; margin-left: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  background: var(--sand); color: var(--plum); border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.mg-mega-photo-media { display: block; min-height: 240px; overflow: hidden; }
.mg-mega-photo img { position: static; display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; transition: transform .6s ease; }
.mg-mega-photo:hover img { transform: scale(1.03); }
.mg-mega-photo-text { position: static; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 24px 28px;
  background: none; }
.mg-mega-photo-text strong { font-family: var(--font-head); font-weight: 500; font-size: 1.45rem; line-height: 1.15; color: var(--plum); }
.mg-mega-photo-text span { color: var(--muted); font-size: .9rem; }
.mg-mega-photo-text em { margin-top: 6px; font-style: normal; font-weight: 600; font-size: .88rem; color: var(--plum); border-bottom: 1px solid currentColor; }
.mg-mega-photo:hover .mg-mega-photo-text em { color: var(--rose); }
.mega-promo-text { background: linear-gradient(transparent, rgba(250, 246, 240, .96) 40%); }
.mega-promo-text strong { font-family: var(--font-head); font-weight: 500; color: var(--plum); }
.mega-promo-text em { color: var(--rose); }

/* Checkout header: only logo, the way back and a note */
.mg-header-checkout .mg-header-row { height: 72px; }
.mg-back { grid-column: 1; grid-row: 1; justify-self: start; font-size: .88rem; text-decoration: none; }
.mg-secure { grid-column: 3; justify-self: end; font-size: .85rem; color: var(--muted); }
.mg-secure::before { content: ''; display: inline-block; width: 12px; height: 14px; margin-right: 8px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Buttons: rectangular with a small radius ---------- */
.btn { background: var(--plum); color: #fff; border-radius: var(--radius); padding: 13px 24px; font-weight: 600; letter-spacing: .01em; box-shadow: none; }
.btn:hover { background: var(--primary-dark); color: #fff; transform: none; box-shadow: none; }
.btn-gold { background: var(--rose); color: #fff; }
.btn-gold:hover { background: var(--rose-dark); }
.btn-ghost { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); }
.btn-link { color: var(--plum); text-decoration: underline; font-weight: 500; }
.btn-link:hover { color: var(--rose); }
.mg-link { font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.mg-link:hover { color: var(--rose); }

/* ---------- Home: introduction next to one strong mood photo ---------- */
/* Room under the menu on every page; the home page starts with its own introduction. */
main { padding: 32px 0 72px; }
.page-home main { padding-top: 0; }
.layout-magica.page-home main > .container > .alert:first-child { margin-top: 24px; }
.mg-intro { max-width: 760px; margin: 0 auto; padding: 44px 0 28px; text-align: center; }
.mg-intro-photo { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; text-align: left; padding: 40px 0 56px; }
.mg-kicker { margin: 0 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.mg-intro h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); font-weight: 400; margin: 0 0 16px; text-wrap: balance; }
.mg-lead { margin: 0 auto; max-width: 560px; color: var(--muted); font-size: 1.05rem; }
.mg-intro-photo .mg-lead { margin: 0; max-width: 460px; }
.mg-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 26px 0 0; }
.mg-intro:not(.mg-intro-photo) .mg-intro-actions { justify-content: center; }
.mg-intro-cta { padding: 14px 20px; font-size: 1rem; }
.mg-intro-actions:has(.mg-intro-xmas) { gap: 12px 12px; }
.mg-intro-actions:has(.mg-intro-xmas) .mg-link { margin-right: 12px; }
/* Christmas run-up: the second button, the category links on their own line below. */
.mg-intro-actions:has(.mg-intro-xmas) .mg-link { order: 3; }
.mg-intro-actions:has(.mg-intro-xmas)::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
.mg-intro-reasons { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .88rem; color: var(--muted); }
.mg-intro-reasons li::before { content: '✓'; margin-right: 6px; color: #1d6b3f; font-weight: 700; }
.mg-intro:not(.mg-intro-photo) .mg-intro-reasons { justify-content: center; }
.mg-intro-figure { margin: 0; position: relative; }
.mg-intro-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; border-radius: var(--radius); }
.mg-intro-figure figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted); font-style: italic; font-family: var(--font-head); }
.mg-intro-figure figcaption a { color: var(--muted); text-decoration: none; }
.mg-intro-figure figcaption a:hover { color: var(--rose); }

/* Three entrances: lifestyle photos filling the frame, or a product on a warm tint */
.mg-entrances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 72px; }
.mg-entrance { display: flex; flex-direction: column; text-decoration: none; color: var(--plum); }
.mg-entrance-media { position: relative; display: block; aspect-ratio: 4 / 5; background: #f1e3e3; border-radius: var(--radius); overflow: hidden; }
.mg-entrance-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14% 12% 16%; mix-blend-mode: multiply; transition: transform .6s ease; }
.mg-entrance-photo .mg-entrance-media img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.mg-entrance:hover .mg-entrance-media img { transform: scale(1.03); }
.mg-entrance-text { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 2px 12px; border-bottom: 1px solid var(--line); }
.mg-entrance-title { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.1; }
.mg-entrance-meta { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.mg-entrance:hover .mg-entrance-title { color: var(--rose); }

/* Sections */
.mg-section { margin: 0 0 72px; }
.mg-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.mg-section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0; }

/* Shop by character: portraits in a row that scrolls on small screens */
.mg-characters { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; gap: 16px; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.mg-characters li { flex: 1 0 110px; min-width: 0; scroll-snap-align: start; }
.mg-character { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--plum); }
.mg-character-photo { width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); overflow: hidden; display: block;
  transition: border-color .2s; }
.mg-character-photo img { width: 100%; height: 100%; object-fit: contain; padding: 14%; }
.mg-character:hover .mg-character-photo { border-color: var(--rose); }
.mg-character-name { margin-top: 10px; font-family: var(--font-head); font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.mg-character-count { font-size: .78rem; color: var(--muted); }

/* A real collection presentation: a large lifestyle photo with the story on a warm panel overlapping it */
.mg-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; margin: 0 0 28px; }
.mg-story-media { grid-column: 1; grid-row: 1; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper); }
.mg-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-story-product img { object-fit: contain; padding: 6%; }
.mg-story-text { grid-column: 2; grid-row: 1; position: relative; z-index: 1; margin-left: -64px; padding: 40px 40px 36px; background: var(--sand); border-radius: var(--radius); }
.mg-story-text h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 12px; }
.mg-story-text p:not(.mg-kicker) { color: #5b4656; margin: 0 0 22px; }
.mg-story-flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.mg-story-flip .mg-story-media { grid-column: 2; }
.mg-story-flip .mg-story-text { grid-column: 1; margin-left: 0; margin-right: -64px; z-index: 1; }

/* Compact product rows: four in a line */
.mg-row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 72px; }

/* A collection chapter: a full-width band in its own soft tone, so each collection reads as one whole */
main { overflow-x: clip; }
.mg-chapter { --tone: #f1e6d6; --panel: #fffaf2; margin: 0 calc(50% - 50vw) 72px; padding: 64px calc(50vw - 50%) 64px; background: var(--tone); }
.mg-chapter-2 { --tone: #e6ecf2; --panel: #f8fbfd; }
.mg-chapter-3 { --tone: #f0e2e8; --panel: #fdf7f9; }
.mg-chapter .mg-story { margin-bottom: 40px; }
.mg-chapter .mg-story-text { background: var(--panel); box-shadow: 0 10px 30px rgba(59, 23, 54, .06); }
.mg-chapter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(59, 23, 54, .14); }
.mg-chapter-head p { margin: 0; font-family: var(--font-head); font-size: 1.3rem; color: var(--plum); }
.mg-chapter-head .mg-link { white-space: nowrap; }
.mg-chapter .mg-row { margin-bottom: 0; }
.mg-chapter .card { border-color: rgba(59, 23, 54, .14); }
.mg-chapter .card-footer { border-top-color: rgba(59, 23, 54, .12); }
.mg-chapter + .mg-section, .mg-chapter + .mg-chapter { margin-top: 0; }
.mg-section .mg-row { margin-bottom: 0; }

/* ---------- Product cards: airy, photos on white, aligned price and button ---------- */
.grid, .mg-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 4px rgba(59, 23, 54, .05), 0 8px 20px rgba(59, 23, 54, .07); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.card:hover { transform: translateY(-2px); border-color: #cdb9c4; box-shadow: 0 4px 8px rgba(59, 23, 54, .06), 0 16px 32px rgba(59, 23, 54, .12); }
.card-image { aspect-ratio: 1; background: var(--paper); border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
.card-image img { padding: 9%; transition: transform .4s ease; }
.card:hover .card-image img { transform: scale(1.03); }
.no-image { background: var(--sand); }
.card-heart { top: 10px; right: 10px; }
.badge-soldout { top: 10px; left: 10px; background: var(--plum); border-radius: 3px; font-weight: 600; font-size: .7rem; letter-spacing: .04em; }
.badge-promo { top: 10px; left: 10px; border-radius: 3px; font-weight: 600; font-size: .7rem; letter-spacing: .04em; }
.card-body { padding: 14px 16px 16px; gap: 3px; }
.card .brand { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .1em; }
.card h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.08rem; line-height: 1.3; min-height: calc(2 * 1.3em); margin: 0; }
.card h3 a { color: var(--plum); text-decoration: none; }
.card h3 a:hover { color: var(--rose); }
.mg-card-facts { margin: 2px 0 0; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-footer { padding-top: 12px; min-height: 0; align-items: center; border-top: 1px solid var(--line-soft); margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.price { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--plum); font-variant-numeric: tabular-nums; }
.btn-add { background: transparent; color: var(--plum); border: 1px solid var(--plum); border-radius: var(--radius); padding: 7px 12px; font-weight: 600;
  font-size: .8rem; }
.btn-add:hover { transform: none; background: var(--plum); color: #fff; }

/* ---------- Listing pages (category, search, theme pages) ---------- */
.breadcrumbs { margin: 22px 0 10px; font-size: .84rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--rose); }
.layout-magica main h1 { margin: 6px 0 18px; }
.chips { gap: 0; margin: -4px 0 28px; border-bottom: 1px solid var(--line); }
.chip { border: 0; border-radius: 0; background: none; padding: 10px 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.chip:hover, .chip-active { color: var(--plum); border-bottom-color: var(--rose); background: none; }
.listing { grid-template-columns: 220px 1fr; gap: 40px; }
.filters-panel { background: none; border: 0; padding: 0; box-shadow: none; }
.filters-panel summary { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.filters-panel fieldset { border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; }
.filters-panel legend { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; color: var(--plum); }
.check { font-size: .9rem; }
.check input { accent-color: var(--rose); }
.results-bar { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 24px; }
.result-count { color: var(--muted); font-size: .9rem; }
.sort-form select { width: auto; }
.pager a, .pager span { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--line); background: var(--paper); }
.pager .current { background: var(--plum); border-color: var(--plum); }
.landing-intro { max-width: 760px; color: var(--muted); }
.seo-text { color: var(--muted); }

/* Theme banners (Christmas…): light and quiet in Magica */
.mood, .mood-kerst, .mood-winter, .mood-sinterklaas, .mood-valentijn, .mood-lente, .mood-zomer, .mood-herfst { background: var(--sand); color: var(--plum); }
.mood::after, .mood-deco { display: none; }
.mood h1, .mood h2 { color: var(--plum); font-weight: 400; }
.mood p { color: var(--muted); }
.mood .eyebrow { background: none; color: var(--rose); padding: 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.mood-photo img { border: 0; box-shadow: none; border-radius: var(--radius); }
.mood-collage .collage-item { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); transform: none !important; animation: none; }

/* ---------- Product page: large photos, compact buy box ---------- */
.mg-product { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 56px; align-items: start; margin-top: 8px; }
.mg-gallery { display: grid; gap: 12px; }
.mg-gallery-main { background: var(--paper); border-radius: var(--radius); aspect-ratio: 1; display: flex; }
.mg-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.mg-thumbs { display: flex; gap: 10px; margin: 0; }
.mg-thumbs button { width: 76px; height: 76px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 6px; }
.mg-thumbs button.active { border-color: var(--plum); }
.mg-buybox { position: sticky; top: 24px; }
.mg-buybox-brand { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); text-decoration: none; }
.mg-buybox h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 8px 0 18px; }
.mg-keyspecs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 20px; border-top: 1px solid var(--line); }
.mg-keyspecs div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mg-keyspecs div:nth-child(odd) { padding-right: 12px; }
.mg-keyspecs dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mg-keyspecs dd { margin: 2px 0 0; font-size: .92rem; }
.mg-price-row { display: flex; align-items: baseline; gap: 12px; }
.mg-price { margin: 0; font-family: var(--font-head); font-size: 2.1rem; font-weight: 500; color: var(--plum); font-variant-numeric: lining-nums; }
.mg-vat { margin: 0; font-size: .84rem; color: var(--muted); }
.mg-stock { margin: 6px 0 20px; font-size: .9rem; font-weight: 600; color: #1d6b3f; }
.mg-stock::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }
.mg-stock-out { color: var(--muted); }
/* Sold out: "Mail me als hij terug is" */
.mg-restock { margin: 0 0 14px; padding: 18px 20px; background: var(--rose-soft); border: 1px solid #ecc6d8; border-radius: var(--radius); scroll-margin-top: 120px; }
.mg-restock-title { margin: 0 0 4px; font-family: var(--font-head); font-size: 1.15rem; color: var(--plum); }
.mg-restock-text { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.mg-restock-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-restock-row input { flex: 1 1 200px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; }
.mg-restock-row input:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; border-color: var(--rose); }
.mg-restock-row .btn { flex: 0 0 auto; }
.mg-restock-error { margin: 8px 0 0; font-size: .86rem; color: #a3002f; }
.mg-restock-done { margin: 0; font-weight: 600; color: #1d6b3f; }
.mg-restock-similar { display: inline-block; margin: 0 0 18px; font-weight: 600; color: var(--rose-dark); }
.mg-buy { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; }
.mg-qty label { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.mg-qty-control { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); height: 52px; }
.mg-qty-control button { width: 40px; height: 100%; border: 0; background: none; font-size: 1.2rem; color: var(--plum); cursor: pointer; }
.mg-qty-control button:hover { color: var(--rose); }
.mg-qty-control input { width: 46px; height: 100%; border: 0; padding: 0; text-align: center; background: none; -moz-appearance: textfield; }
.mg-qty-control input::-webkit-inner-spin-button, .mg-qty-control input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mg-buy-button { height: 52px; background: var(--rose); font-size: 1rem; }
.mg-buy-button:hover { background: var(--rose-dark); }
.product-heart { margin-top: 14px; color: var(--plum); }
.mg-delivery { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.mg-delivery li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.mg-usp-icon { width: 1.3em; flex-shrink: 0; text-align: center; font-size: 1rem; line-height: 1; }
.mg-product-info { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 56px; margin: 64px 0 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.mg-product-info h2 { font-size: 1.5rem; margin: 0 0 14px; }
.mg-product-info > :only-child { grid-column: 1 / -1; max-width: 780px; }
/* The description in a subtle frame: white paper with a hairline, so the text reads as its own block */
.mg-description { align-self: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px 30px; }
.mg-description .rich-text > :last-child { margin-bottom: 0; }
.mg-specs dl { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; margin: 0; font-size: .92rem; }
.mg-specs dt { color: var(--muted); padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.mg-specs dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.mg-specs-hint { margin: -4px 0 10px; font-size: .84rem; color: var(--muted); }
/* Brand, figure and film link to their own pages: show them as small, clearly clickable tags. */
.mg-specs dd.mg-spec-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.mg-spec-link { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #ecc6d8; border-radius: 6px; background: var(--rose-soft); color: var(--rose-dark); font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.mg-spec-link span { font-size: .8em; transition: transform .15s; }
.mg-spec-link:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.mg-spec-link:hover span { transform: translateX(2px); }
.mg-spec-link:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.rich-text { color: #4c2b46; }
.rich-text h2, .rich-text h3 { font-family: var(--font-head); font-weight: 500; color: var(--plum); }

/* ---------- Cart ---------- */
.layout-magica main h1.mg-page-title { margin: 36px 0 24px; }
.mg-empty { text-align: center; padding: 48px 0; color: var(--muted); }
.mg-cartpage, .mg-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.mg-cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mg-cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 100px; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.mg-cart-photo { width: 96px; height: 96px; background: var(--paper); border-radius: var(--radius); display: block; }
.mg-cart-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.mg-cart-brand { margin: 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mg-cart-name { font-family: var(--font-head); font-size: 1.08rem; line-height: 1.3; text-decoration: none; }
.mg-cart-unit { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.mg-cart-unit.cart-line-discount { color: #106b3d; font-weight: 600; }
.mg-cart-qty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mg-cart-qty input { width: 72px; text-align: center; }
.mg-cart-qty .btn-link { margin: 0; font-size: .8rem; }
.mg-cart-total { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-summary { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: sticky; top: 24px; }
.mg-summary h2 { font-size: 1.35rem; margin: 0 0 14px; }
.summary-line { font-size: .92rem; padding: 5px 0; }
.summary-total { font-size: 1.05rem; border-top-color: var(--line); }
.mg-checkout-button { margin-top: 18px; height: 52px; background: var(--rose); font-size: 1rem; }
.mg-checkout-button:hover { background: var(--rose-dark); }
.mg-continue { display: inline-block; margin-top: 14px; border: 0; font-weight: 500; }
.discount-code { margin-top: 14px; font-size: .9rem; }
.discount-code summary { cursor: pointer; color: var(--plum); text-decoration: underline; }

/* ---------- Checkout ---------- */
.mg-checkout-form .checkout-login { background: var(--rose-soft); border-radius: var(--radius); }
.mg-step { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 22px 0 10px; }
.mg-step legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 14px; font-family: var(--font-head); font-size: 1.35rem; color: var(--plum); float: left; width: 100%; }
.mg-step legend + * { clear: both; }
.mg-step-number { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--plum); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; }
.mg-step-note { font-weight: 600; margin: 14px 0 8px; }
.layout-magica label { font-weight: 500; font-size: .86rem; color: var(--plum); }
.layout-magica input, .layout-magica select { border-radius: var(--radius); border-color: var(--line); background: var(--paper); height: 46px; }
.layout-magica input[type=checkbox], .layout-magica input[type=radio] { height: auto; }
.layout-magica input:focus, .layout-magica select:focus { outline: 2px solid var(--plum); outline-offset: 0; border-color: transparent; }
.vat-toggle summary { cursor: pointer; text-decoration: underline; font-size: .9rem; margin: 6px 0 12px; }
.mg-pay { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 8px; }
.mg-pay-button { height: 54px; background: var(--rose); font-size: 1.02rem; }
.mg-pay-button:hover { background: var(--rose-dark); }
.mg-pay-note { text-align: center; color: var(--muted); font-size: .84rem; margin: 10px 0 0; }
.mg-summary-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.mg-summary-lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.mg-summary-photo { position: relative; width: 56px; height: 56px; background: var(--ivory); border-radius: var(--radius); display: block; }
.mg-summary-photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mg-summary-qty { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--plum); color: #fff;
  font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.mg-summary-name { line-height: 1.35; }
.mg-summary-price { font-variant-numeric: tabular-nums; }

/* Account and other forms */
.panel { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); }
table { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); }
th { background: var(--ivory); color: var(--muted); }
.alert { border-radius: var(--radius); }

/* ---------- Service line and footer ---------- */
.mg-promise { background: var(--paper); border-top: 1px solid var(--line); }
/* (.mg-promise in front: the phone rule .container { padding: 0 16px } would otherwise take the room above and below away) */
.mg-promise .mg-promise-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 32px; padding-bottom: 32px; }
.mg-promise p { margin: 0; font-size: .9rem; color: var(--muted); }
.mg-promise strong { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; color: var(--plum); }
.mg-footer { background: var(--plum); color: #f3e8ee; padding: 52px 0 0; font-size: .92rem; } /* deep plum, like the service line on top */
.mg-footer-slim { padding-top: 0; }
.mg-footer-slim .mg-footer-bottom { margin-top: 0; border-top: 0; }
.mg-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.mg-footer h2 { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e7c6d6; margin: 0 0 14px; }
.mg-footer ul { list-style: none; margin: 0; padding: 0; }
.mg-footer li { margin-bottom: 8px; }
.mg-footer a, .mg-footer .footer-link { color: #f3e8ee; text-decoration: none; }
.mg-footer a:hover, .mg-footer .footer-link:hover { color: #ff9cc9; text-decoration: underline; }
.mg-footer :focus-visible { outline-color: #ff9cc9; }
.mg-footer .footer-link { font: inherit; padding: 0; margin: 0; text-align: left; background: none; border: 0; cursor: pointer; }
.mg-footer-logo img { height: 48px; width: auto; filter: brightness(0) invert(1); }
.mg-footer-brand p { color: #c9b3c2; max-width: 300px; }
.mg-paymethods { color: #c9b3c2; }
.mg-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding: 18px 0 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8rem; color: #c9b3c2; }
.mg-footer-bottom p { margin: 0; }
.mg-footer-bottom ul { display: flex; gap: 16px; flex-wrap: wrap; }
.mg-footer-bottom li { margin: 0; }

/* Cookie banner in the Magica colours */
.consent { border-radius: var(--radius); }

/* ---------- Small screens ---------- */
@media (max-width: 1000px) {
  .mg-product, .mg-product-info { gap: 32px; }
}
@media (max-width: 820px) {
  .container { padding: 0 16px; }
  .mg-service-row { justify-content: space-between; }
  .mg-service p { text-align: left; font-size: .74rem; }
  .mg-service-secure { display: none; }
  .mg-lang, .mg-vat-switch { position: static; }
  .mg-header-row { grid-template-columns: auto 1fr auto; height: auto; gap: 8px 12px; padding-top: 10px; padding-bottom: 12px; }
  .mg-menu-button { display: inline-flex; grid-column: 1; grid-row: 1; padding: 8px; }
  .mg-logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .mg-logo img { height: 38px; }
  .mg-actions { grid-column: 3; grid-row: 1; gap: 0; }
  .mg-icon { padding: 8px; }
  .mg-icon-label { display: none; }
  .mg-cart { border: 0; padding: 8px; }
  .mg-cart .mg-count { position: absolute; top: 0; right: -2px; }
  .mg-search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .mg-search input { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius); padding-left: 42px; }
  .mg-search .search-btn { left: 6px; top: 5px; }
  .main-nav { border-top: 0; }
  .main-nav .menu-toggle { display: none; }
  .main-nav.menu-open { border-top: 1px solid var(--line); }
  .menu { gap: 0; }
  .menu-row { height: 48px; border-top: 1px solid var(--line-soft); justify-content: space-between; }
  .menu-link { font-size: 1rem; }
  .mega { border: 0; box-shadow: none; background: var(--ivory); margin-bottom: 8px; }
  .mg-header .main-nav .mega-inner { flex-direction: column; gap: 18px; padding: 16px; }
  .mega-promo { display: none; }
  .mg-header-checkout .mg-header-row { grid-template-columns: 1fr auto; }
  .mg-header-checkout .mg-logo { grid-column: 1; justify-self: start; }
  .mg-header-checkout .mg-back { grid-column: 1 / -1; grid-row: 2; font-size: .82rem; }
  .mg-secure { grid-column: 2; grid-row: 1; font-size: .78rem; }

  .mg-intro { padding: 28px 0 22px; }
  .mg-intro-photo { grid-template-columns: 1fr; gap: 22px; padding: 20px 0 36px; }
  /* Small screens: the promise and the main action first, the photo below. */
  .mg-intro-photo .mg-intro-figure { margin: 0 -16px; }
  .mg-intro-cta { flex: 1 1 100%; text-align: center; }
  .mg-intro-figure img { aspect-ratio: 4 / 3; border-radius: 0; }
  .mg-intro-figure figcaption { padding: 0 16px; }
  .mg-entrances { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 48px; }
  .mg-entrance:first-child { grid-column: 1 / -1; }
  .mg-entrance:first-child .mg-entrance-media { aspect-ratio: 16 / 10; }
  .mg-entrance-media { aspect-ratio: 1; }
  .mg-entrance-text { flex-direction: column; gap: 2px; }
  .mg-entrance-title { font-size: 1.3rem; }
  .mg-section { margin-bottom: 48px; }
  .mg-characters { gap: 12px; }
  .mg-characters li { flex: 0 0 104px; }
  .mg-story, .mg-story-flip { grid-template-columns: 1fr; }
  .mg-story-media, .mg-story-flip .mg-story-media { grid-column: 1; grid-row: 1; margin: 0 -16px; border-radius: 0; }
  .mg-story-text, .mg-story-flip .mg-story-text { grid-column: 1; grid-row: 2; margin: -40px 8px 0; padding: 24px 20px 26px; }
  .mg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 48px; }
  .mg-chapter { padding-top: 0; padding-bottom: 40px; margin-bottom: 48px; }
  .mg-chapter .mg-story { margin-bottom: 28px; }
  .mg-chapter-head p { font-size: 1.1rem; }
  .mg-chapter-head .mg-link { display: none; }
  .grid, .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .card h3 { overflow-wrap: anywhere; hyphens: auto; }
  .card h3 { font-size: 1rem; }
  .card-footer { flex-wrap: wrap; gap: 8px; }
  .card-body { padding: 12px 12px 14px; }
  .btn-add { padding: 6px 10px; }
  .listing { grid-template-columns: 1fr; gap: 16px; }
  .filters-panel summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--paper); }

  .mg-product, .mg-product-info { grid-template-columns: 1fr; gap: 24px; }
  .mg-buybox { position: static; }
  .mg-product-info { margin-top: 40px; }
  .mg-description { padding: 20px 18px 22px; }
  .mg-cartpage, .mg-checkout { grid-template-columns: 1fr; gap: 28px; }
  .mg-cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: 'photo info total' 'photo qty qty'; gap: 8px 14px; }
  .mg-cart-photo { grid-area: photo; width: 72px; height: 72px; }
  .mg-cart-info { grid-area: info; }
  .mg-cart-total { grid-area: total; align-self: start; }
  .mg-cart-qty { grid-area: qty; flex-direction: row; justify-content: flex-start; gap: 14px; }
  .mg-summary { position: static; }
  .mg-checkout .mg-summary { order: -1; }
  .mg-promise .mg-promise-row { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; padding-bottom: 28px; }
  .mg-footer-grid { grid-template-columns: 1fr 1fr; }
  .mg-footer-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-entrance-media img, .card-image img { transition: none; }
}

/* Category page: "Alle figuren" as the first round filter (Disney figures). */
.figure-circle-all { display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.05rem; color: var(--plum); background: var(--rose-soft); }
.layout-magica .category-circle { color: var(--plum); text-decoration: none; }
.layout-magica .category-circle-photo { box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(59,23,54,.08); }
.layout-magica .category-circle:hover .category-circle-photo { box-shadow: 0 0 0 2px var(--rose), 0 6px 16px rgba(59,23,54,.12); }
.layout-magica .category-circle.is-active .category-circle-photo { box-shadow: 0 0 0 3px var(--rose), 0 6px 16px rgba(59,23,54,.12); }
.layout-magica .category-circle.is-active .category-circle-name { color: var(--rose-dark); }
.layout-magica .category-circle:focus-visible { outline: none; }
.layout-magica .category-circle:focus-visible .category-circle-photo { box-shadow: 0 0 0 3px var(--plum); }

/* ---------- Theme page banner (Kerstcadeaus, …): calm, three products side by side ---------- */
.mg-mood { background: var(--sand); border-bottom: 1px solid var(--line); }
.mg-mood-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.mg-mood-grid.mg-mood-text-only { grid-template-columns: 1fr; }
.mg-mood h1, .mg-mood h2 { margin: 0 0 12px; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 400; color: var(--plum); line-height: 1.1; }
.mg-mood-lead { margin: 0; max-width: 44ch; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
.mg-mood .btn { margin-top: 18px; }
.mg-mood-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mg-mood-products-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-mood-products-1 { grid-template-columns: minmax(0, 220px); justify-content: end; }
.mg-mood-product { display: block; aspect-ratio: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: 0 2px 4px rgba(59,23,54,.04), 0 8px 20px rgba(59,23,54,.06); }
.mg-mood-product img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mg-mood-photo img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); display: block; }
@media (max-width: 820px) {
  .mg-mood-grid { grid-template-columns: 1fr; gap: 22px; padding-top: 26px; padding-bottom: 28px; }
  .mg-mood-products { gap: 10px; }
  .mg-mood-product { padding: 8px; }
}

/* Filters: short category names with the count right behind them. */
.layout-magica .filters .check { align-items: flex-start; }
.layout-magica .filters .check input { margin-top: 3px; }
.layout-magica .filters .check small { margin-left: auto; padding-left: 8px; white-space: nowrap; }

/* Product cards: price and button on one line at the bottom, whatever the title length. */
.mg-card .card-footer { margin-top: auto; }
.mg-card .card-body > :not(.card-footer):nth-last-child(2) { margin-bottom: 10px; }
.mg-mood ~ main .category-circles { padding-top: 26px; }

/* Product page: origin and authenticity (per brand, switched on in the admin). */
.mg-authentic { list-style: none; margin: -6px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--plum); }
.mg-authentic li { display: inline-flex; align-items: center; gap: 6px; }
.mg-authentic-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e6f2ea; color: #1d6b3f; font-size: .7rem; font-weight: 700; }
.mg-intro-figure figcaption a.mg-caption-link { color: var(--plum); text-decoration: underline; text-decoration-color: rgba(59,23,54,.35); text-underline-offset: 3px; }
.mg-intro-figure figcaption a.mg-caption-link:hover { color: var(--rose); text-decoration-color: currentColor; }
.mg-card .card-last-one { color: var(--rose-dark); font-weight: 600; }

/* Quick choices (listing_v2) in Magica's colours: calm chips, plum when chosen. */
.layout-magica .quick-filters { background: var(--paper); border-color: var(--line); border-radius: var(--radius); }
.layout-magica .quick-chip { border-color: var(--line); border-radius: 8px; color: var(--plum); background: #fff; }
.layout-magica .quick-chip:hover { border-color: var(--rose); color: var(--rose-dark); }
.layout-magica .quick-chip.is-on { background: var(--plum); border-color: var(--plum); color: #fff; }
.layout-magica .more-brands summary { color: var(--rose-dark); }