/*
Theme Name: Beauty Magazine
Theme URI: https://beautymagazine.local
Author: Michal Loren
Description: Homepage V1 for the beauty magazine — minimal launch scope, built to be extended without rework. See docs/architecture/v1-homepage-plan.md.
Template: hello-elementor
Text Domain: beauty-magazine
Version: 1.18.5
*/

/* ==========================================================================
   Fonts — self-hosted (was fonts.googleapis.com; see DEC-011). Each family
   ships as two variable-weight files (Hebrew + Latin subset) so the browser
   only fetches what it needs to render either script.
   ========================================================================== */
@font-face {
  font-family: 'Heebo';
  src: url('assets/fonts/heebo-hebrew.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  src: url('assets/fonts/heebo-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('assets/fonts/frank-ruhl-libre-hebrew.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('assets/fonts/frank-ruhl-libre-latin.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Wordmark-only face — a genuine high-contrast Didone-adjacent serif (Vogue/
   Harper's Bazaar territory), deliberately separate from --ml-font-display
   (Frank Ruhl Libre, used for Hebrew editorial headings). LOREN STANDARD is
   Latin-only so this never needs a Hebrew unicode-range cut. */
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-display-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-display-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Descriptor-only face ("Beauty Intelligence") — a neutral international
   grotesque (the Neue Haas/Suisse register), deliberately different from
   both the serif wordmark and the site's Hebrew body face, so the two-line
   lockup reads as serif-headline + sans-caption the way an editorial
   masthead does. Subsetted to the Latin alphabet only (4KB vs ~108KB for
   the full family) since this is the only place on a Hebrew-content site
   this face is used. */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-400-latin-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design tokens — the only place visual identity should be edited.
   Homepage V2 swaps identity by changing values here, not structural CSS.
   ========================================================================== */
:root {
  /* Color */
  --ml-bg: #fbfaf8;
  --ml-bg-alt: #f4f0ee;
  --ml-surface: #ffffff;
  --ml-ink: #2b2320;
  --ml-muted: #766b64;
  --ml-line: #e6ddd7;
  --ml-accent: #7c2846;
  --ml-accent-ink: #ffffff;
  --ml-accent-soft: #f3e2e7;

  /* Type */
  --ml-font-display: 'Frank Ruhl Libre', Georgia, serif;
  --ml-font-body: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Scale (fluid) */
  --ml-size-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --ml-size-body: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --ml-size-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --ml-size-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --ml-size-h1: clamp(2rem, 1.6rem + 2vw, 3rem);

  /* Layout */
  --ml-content-width: 1160px;
  --ml-radius: 6px;
  --ml-space-section: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  --ml-space-gap: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; }
body.beauty-magazine {
  margin: 0;
  background: var(--ml-bg);
  color: var(--ml-ink);
  font-family: var(--ml-font-body);
  font-size: var(--ml-size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* overflow-x on <html> alone already prevents horizontal page scroll —
     the same rule on <body> was redundant AND silently broke every sticky
     descendant (the header included): any explicit `overflow` on a
     position:sticky element's direct ancestor turns that ancestor into its
     own scroll container in Chromium, so sticky positioning stops tracking
     the real page scroll. */
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.ml-container {
  max-width: var(--ml-content-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

h1, h2, h3 {
  font-family: var(--ml-font-display);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--ml-size-h1); }
h2 { font-size: var(--ml-size-h2); }
h3 { font-size: var(--ml-size-h3); }

.ml-section { padding-block: var(--ml-space-section); }
.ml-section--alt { background: var(--ml-bg-alt); }

.ml-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--ml-space-gap);
  flex-wrap: wrap;
}
.ml-section__head h2 { margin: 0; }
.ml-section__description { color: var(--ml-muted); margin: -0.5rem 0 var(--ml-space-gap); max-width: 60ch; }

.ml-link-more {
  font-size: var(--ml-size-sm);
  font-weight: 600;
  color: var(--ml-accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.ml-link-more:hover, .ml-link-more:focus-visible { border-bottom-color: var(--ml-accent); }

.ml-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .85em 1.6em;
  border-radius: var(--ml-radius);
  font-weight: 600;
  font-size: var(--ml-size-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.ml-btn--primary { background: var(--ml-accent); color: var(--ml-accent-ink); }
.ml-btn--primary:hover, .ml-btn--primary:focus-visible { background: color-mix(in srgb, var(--ml-accent) 88%, black); }
.ml-btn--ghost { background: transparent; color: var(--ml-ink); border-color: var(--ml-line); }
.ml-btn--ghost:hover, .ml-btn--ghost:focus-visible { border-color: var(--ml-accent); color: var(--ml-accent); }

a:focus-visible, button:focus-visible, .ml-card:focus-visible {
  outline: 2px solid var(--ml-accent);
  outline-offset: 2px;
}

.ml-skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--ml-accent);
  color: #fff;
  padding: .75em 1.25em;
  z-index: 1000;
  border-radius: 0 0 var(--ml-radius) 0;
}
.ml-skip-link:focus { inset-inline-start: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Header — luxury editorial redesign (Vogue/Into The Gloss/Kinfolk register,
   not a WordPress/WooCommerce menu). Pure white, one hairline divider, no
   fills, no shadows anywhere except the mega menu's own soft drop shadow.
   ========================================================================== */
.ml-header {
  border-bottom: 1px solid #efeae6;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 300;
}
/* Flex, not grid-with-a-centered-auto-column: with 10 top-level items this
   nav's natural width can exceed the space left after the logo and search
   icon claim their own — a centered `1fr auto 1fr` grid lets the un-clipped
   auto column overflow straight through the (shrunk-to-near-0) side
   columns, which visually reads as the logo overlapping the nav. Flex with
   firm flex:0 0 auto side zones and a scrollable middle zone still centers
   the nav whenever it fits, and degrades to a scrollable row instead of an
   overlap on the rare viewport where it doesn't. */
.ml-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 66px; /* mobile: within the 64-70px range */
  transition: min-height .2s ease;
}
@media (min-width: 900px) {
  .ml-header__inner { min-height: 86px; } /* desktop: 82-88px */
  .ml-header.is-sticky .ml-header__inner { min-height: 70px; } /* sticky: 68-72px */
}

.ml-header__logo {
  order: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* descriptor centers under the wordmark, not start-aligned */
  /* Editorial wordmark face, not the site's Hebrew display font — see the
     @font-face comment above. High-contrast Didone-adjacent serif reads as
     a publication masthead (Vogue/Bazaar register) rather than a product
     logo, which plain Frank Ruhl Libre at this weight did not. Unchanged
     from the previous approved pass - only the descriptor changed here. */
  font-family: 'Playfair Display', var(--ml-font-display);
  font-size: clamp(1.32rem, 4.9vw, 1.66rem);
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  color: #111111;
  white-space: nowrap;
  transition: font-size .2s ease;
  margin-inline-end: clamp(1.25rem, 3.5vw, 2.5rem); /* breathing room before the nav starts */
}
.ml-header__tagline {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 6px; /* -4px from the previous pass's ~10px gap - one visual unit with the wordmark, not a floating second line */
  /* Neutral grotesque, not the serif wordmark or the site's Hebrew body face
     - see the @font-face comment above. Deliberately reads as a caption,
     not a slogan - permanent brand identity (paired with LOREN STANDARD), distinct
     from the hero's "Editorial Beauty" which labels page/content type. */
  font-family: 'Inter', var(--ml-font-body, sans-serif);
  font-size: .31em; /* +~15% over the previous pass, per follow-up: readable at a glance on a 13-14" screen without competing with the wordmark */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .20em; /* tightened from .26em - "the words should feel more compact" */
  color: #5a5a5a;
  white-space: nowrap;
  /* letter-spacing adds trailing space after the last glyph too, which would
     throw off visual centering under a stretched, text-align:center block -
     pull it back by roughly one tracking-unit so the optical center matches
     the wordmark's, not the box's geometric center. */
  margin-inline-end: -.20em;
}
.ml-header.is-sticky .ml-header__logo { font-size: clamp(1.1rem, 3.9vw, 1.32rem); }
.ml-header.is-sticky .ml-header__tagline { display: none; } /* sticky header: wordmark only */
@media (max-width: 640px) {
  .ml-header__tagline { display: none; } /* mobile header: wordmark only - full lockup still shows on homepage hero / footer, those are separate markup */
}

.ml-header__nav { display: none; order: 2; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ml-header__nav::-webkit-scrollbar { display: none; }
/* All of these use a direct-child chain (>), not a descendant selector —
   .ml-mega is DOM-nested inside these same <li> elements (for CSS-only
   hover/focus targeting), and a plain ".ml-header__nav a" would otherwise
   also match every link inside the mega menu panel and outrank its own
   (lower-specificity) styles. The direct-child chain stops at the
   top-level links on purpose. */
.ml-header__nav > ul {
  list-style: none;
  display: flex;
  gap: clamp(1.75rem, 2.6vw, 2.75rem);
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  width: 100%;
}
.ml-header__nav-item { position: static; }
.ml-header__nav > ul > li > a {
  display: inline-block;
  text-decoration: none;
  font-size: .9375rem; /* -1px from 1rem, per feedback: reads lighter/more considered */
  font-weight: 500;
  color: var(--ml-ink);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color .2s ease, border-color .2s ease, font-weight .2s ease;
}
.ml-header__nav > ul > li > a:hover, .ml-header__nav > ul > li > a:focus-visible { color: var(--ml-accent); }
/* Active page is marked by weight + a quiet underline in ink, not by
   switching to the accent color - a magazine masthead (Vogue/Bazaar
   register) keeps its nav monochrome and lets weight/underline carry the
   "you are here" signal instead of color, which reads calmer and less
   "corporate site". */
.ml-header__nav > ul > li > a.is-active { color: var(--ml-ink); font-weight: 600; border-bottom-color: var(--ml-ink); }

.ml-header__actions { order: 3; flex: 0 0 auto; display: flex; align-items: center; gap: .25rem; }
/* Qualified with .ml-header (not just the bare class) and !important on the
   properties hello-elementor's reset.css (loaded after this file) also sets
   on plain `button` — otherwise its generic button reset wins despite lower
   selector specificity, because of how that stylesheet's rule is written. */
.ml-header .ml-header__search-toggle,
.ml-header .ml-header__menu-toggle {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--ml-ink) !important;
  cursor: pointer;
  padding: .5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: color .2s ease;
}
.ml-header .ml-header__search-toggle:hover,
.ml-header .ml-header__search-toggle:focus-visible { color: var(--ml-accent) !important; }

.ml-header__search {
  display: none;
  padding-block: .75rem;
  border-top: 1px solid #efeae6;
}
.ml-header__search.is-open { display: block; }
.ml-header__search input {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
  font-family: inherit;
  font-size: var(--ml-size-body);
}

/* ---- Mega menu (desktop, ≥900px only) ---- */
.ml-mega {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  background: #fff;
  border-top: 1px solid #efeae6;
  box-shadow: 0 16px 32px rgba(43, 35, 32, .07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 150;
}
.ml-header__nav-item.has-mega-menu.is-open .ml-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.ml-mega__grid { display: flex; gap: clamp(2rem, 3vw, 3.25rem); padding: clamp(2rem, 3vw, 2.75rem) 0; }
.ml-mega__col { flex: 1 1 0; min-width: 0; }
.ml-mega__col--featured { flex: 1.5 1 0; }
.ml-mega__col--latest { flex: 1.3 1 0; }

.ml-mega__featured-link { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; }
/* min-width:0 + width:100% override the <img>'s HTML width/height attributes
   acting as an unshrinkable flex-item minimum — same fix as .ml-card__media
   earlier this session (flexbox + a replaced element with intrinsic size). */
.ml-mega__featured-media { width: 100%; min-width: 0; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; margin-bottom: .85rem; background: var(--ml-bg-alt); }
.ml-mega__featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-mega__featured-title { font-family: var(--ml-font-display); font-size: 1.15rem; margin-bottom: .4rem; transition: color .15s ease; }
.ml-mega__featured-excerpt { font-size: .85rem; color: var(--ml-muted); line-height: 1.6; margin-bottom: .6rem; }
.ml-mega__featured-time { font-size: .75rem; color: var(--ml-muted); margin-bottom: .7rem; }
.ml-mega__featured-cta { font-size: .85rem; font-weight: 600; color: var(--ml-accent); }
.ml-mega__featured-link:hover .ml-mega__featured-title,
.ml-mega__featured-link:focus-visible .ml-mega__featured-title { color: var(--ml-accent); }

.ml-mega__col-title {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ml-ink);
  text-decoration: none;
  margin-bottom: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid #efeae6;
}
a.ml-mega__col-title:hover, a.ml-mega__col-title:focus-visible { color: var(--ml-accent); }
.ml-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.ml-mega__list a { text-decoration: none; font-size: .85rem; color: var(--ml-muted); transition: color .15s ease; }
.ml-mega__list a:hover, .ml-mega__list a:focus-visible { color: var(--ml-accent); }

.ml-mega__latest-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.ml-mega__latest-item { display: flex; gap: .7rem; text-decoration: none; color: inherit; align-items: flex-start; }
.ml-mega__latest-media { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 3px; overflow: hidden; background: var(--ml-bg-alt); display: block; }
.ml-mega__latest-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-mega__latest-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ml-mega__latest-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ml-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.ml-mega__latest-item:hover .ml-mega__latest-title,
.ml-mega__latest-item:focus-visible .ml-mega__latest-title { color: var(--ml-accent); }
.ml-mega__latest-time { font-size: .72rem; color: var(--ml-muted); }
.ml-mega__view-all { font-size: .8rem; font-weight: 600; color: var(--ml-accent); text-decoration: none; }

@media (max-width: 899px) { .ml-mega { display: none; } }

/* ---- Mobile fullscreen overlay menu ---- */
.ml-header__mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 250;
  background: #fff;
  overflow-y: auto;
  padding: 84px 0 3rem;
}
.ml-header__mobile-nav.is-open { display: block; }
.ml-header__mobile-nav-inner { display: flex; flex-direction: column; gap: 2.25rem; }
.ml-header__mobile-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-muted); margin-bottom: .85rem; }
.ml-header__mobile-nav-inner nav ul { list-style: none; margin: 0; padding: 0; }
.ml-header__mobile-nav-inner nav ul a {
  display: block;
  padding: .9rem 0;
  font-family: var(--ml-font-display);
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--ml-ink);
  border-bottom: 1px solid #efeae6;
  transition: color .2s ease;
}
.ml-header__mobile-nav-inner nav ul a:hover,
.ml-header__mobile-nav-inner nav ul a:focus-visible,
.ml-header__mobile-nav-inner nav ul a.is-active,
.ml-header__mobile-nav-inner nav ul li.current-menu-item > a { color: var(--ml-accent); }

/* Secondary pages (סקירות/השקות/לומדים איתנו/...) read as a distinctly
   quieter tier below the five primary sections — smaller, body-font, no
   serif — so the hierarchy is legible at a glance, not just via the label
   above them. */
.ml-header__mobile-secondary { margin-top: .5rem; }
.ml-header__mobile-secondary .ml-header__mobile-label { margin-bottom: .25rem; }
/* Same specificity trap as elsewhere on this site: ".ml-header__mobile-nav-
   inner nav ul a" above has 3 element-selectors backing its 1 class, which
   still out-specifies a 1-class-2-element override. Matching the ancestor
   class explicitly is what actually wins here. */
.ml-header__mobile-nav-inner .ml-header__mobile-secondary a {
  font-family: var(--ml-font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: .75rem 0;
  color: var(--ml-muted);
}
.ml-header__mobile-nav-inner .ml-header__mobile-secondary a:hover,
.ml-header__mobile-nav-inner .ml-header__mobile-secondary a:focus-visible,
.ml-header__mobile-nav-inner .ml-header__mobile-secondary a.is-active { color: var(--ml-accent); }
.ml-header__mobile-latest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.ml-header__mobile-latest a { text-decoration: none; color: var(--ml-ink); font-size: .95rem; line-height: 1.5; }
.ml-header__mobile-latest a:hover, .ml-header__mobile-latest a:focus-visible { color: var(--ml-accent); }
.ml-header__mobile-section .ml-btn { width: 100%; justify-content: center; }
.ml-header__mobile-section .search-form { display: flex; gap: .5rem; }
.ml-header__mobile-section .search-form .search-field {
  flex: 1;
  min-width: 0;
  padding: .7rem .9rem;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
  font-family: inherit;
  font-size: var(--ml-size-body);
}
.ml-header__mobile-section .search-form .search-submit {
  padding: .7rem 1.1rem;
  border: 1px solid var(--ml-accent);
  border-radius: var(--ml-radius);
  background: var(--ml-accent);
  color: var(--ml-accent-ink);
  font-weight: 600;
  cursor: pointer;
}

@media (min-width: 900px) {
  .ml-header__nav { display: block; }
  .ml-header .ml-header__menu-toggle { display: none !important; }
  .ml-header__mobile-nav { display: none !important; }
}

/* Mobile: logo is explicitly centered (per brief), not just left after the
   actions cluster. A symmetric 1fr/auto/1fr grid does this without
   splitting the search/menu buttons into two separate DOM zones — the two
   empty-content 1fr tracks still end up equal width, which is what
   actually centers the middle column regardless of how much is in the
   others. */
@media (max-width: 899px) {
  .ml-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
  /* grid-row:1 on both is load-bearing: with only grid-column set, sparse
     auto-placement can push the second item to a new row once its column
     comes "before" the first item's in source order, instead of reusing
     row 1 — which is exactly what happened here without this. */
  .ml-header__logo { grid-row: 1; grid-column: 2; justify-self: center; text-align: center; }
  .ml-header__actions { grid-row: 1; grid-column: 1; justify-self: right; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ml-hero { padding-block: clamp(3rem, 6.5vw, 6.5rem); } /* more breathing room top/bottom, per "always choose whitespace over content" */
.ml-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(2.25rem, 5vw, 3rem);
}
.ml-hero__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.ml-hero__title-link { color: inherit; text-decoration: none; }
.ml-hero__eyebrow {
  display: inline-block;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ml-accent);
  margin-bottom: 1rem;
}
/* Quiet magazine kicker above the default (non-sticky-post) hero H1 - distinct
   from .ml-hero__eyebrow above (that one is accent-colored and marks an
   actual featured article; this one is a masthead-style section label, so it
   stays gray and small on purpose, never accent - Vogue/Bazaar don't color
   their kickers). */
.ml-hero__kicker {
  display: block;
  /* Shrunk per feedback: this labels the content type ("you're looking at
     the editorial homepage"), not a second brand statement - "Beauty
     Intelligence" in the header logo already owns that role permanently.
     Sized closer to .ml-article__tag (a category label) than to a heading. */
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* #928c85 measured 3.18:1 against this section's background (#fbfaf8) --
     fails WCAG AA (4.5:1). Reusing .ml-header__tagline's existing #5a5a5a
     (6.62:1) keeps the same quiet, unaccented register instead of
     introducing a new color, while actually passing. Darkened text only,
     no background added, per accessibility review 2026-08-06. */
  color: #5a5a5a;
  margin-bottom: .5rem;
}
.ml-hero__inner h1 {
  font-size: clamp(1.7rem, 1.37rem + 1.7vw, 2.55rem);
  line-height: 1.2; /* tighter than body text - reads as a considered editorial statement, not a wrapped sentence */
  margin-bottom: 1.1rem;
}
.ml-hero__lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.65; /* generous - this is the paragraph doing the "editor's introduction" work, it should read unhurried */
  color: var(--ml-muted);
  max-width: 32ch;
  margin-inline: auto;
}
.ml-archive__lead { margin-inline: auto; }
.ml-hero__actions {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
/* Hero CTA specifically (not every .ml-btn--primary sitewide): sharp corners
   instead of the 6px used elsewhere read more editorial/architectural for
   the single most prominent action on the page, and the hover swaps to the
   accent color instead of just darkening the same burgundy - reads as a
   considered interaction rather than a generic "button gets slightly darker"
   default. Resting state is ink/charcoal, matching the header nav's move
   away from burgundy-as-default toward burgundy-as-accent. */
.ml-hero .ml-btn { padding-inline: calc(1.6em + 9px); } /* +9px over the sitewide default - a touch more generous reads more considered on the two most prominent actions on the page */
.ml-hero .ml-btn--primary {
  padding-block: calc(.85em + 3px);
  border-radius: 0;
  background: var(--ml-ink);
  color: #fff;
  letter-spacing: .03em;
  transition: background-color .25s ease;
}
.ml-hero .ml-btn--primary:hover, .ml-hero .ml-btn--primary:focus-visible { background: var(--ml-accent); }
/* Ghost button gets the same sharp-corner treatment and an equally
   considered hover (inverse fill) rather than the sitewide default of just
   tinting the border/text accent - the two hero CTAs should read as one
   pair, not a "real" button next to an untouched one. */
.ml-hero .ml-btn--ghost {
  border-radius: 0;
  border-color: var(--ml-ink);
  transition: background-color .25s ease, color .25s ease;
}
.ml-hero .ml-btn--ghost:hover, .ml-hero .ml-btn--ghost:focus-visible {
  background: var(--ml-ink);
  color: #fff;
  border-color: var(--ml-ink);
}
.ml-hero__media { order: -1; padding-bottom: 2rem; }
.ml-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ml-radius);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .28);
}
@media (min-width: 900px) {
  .ml-hero__grid { grid-template-columns: .9fr 1.3fr; }
  .ml-hero__inner { text-align: start; margin-inline: 0; }
  .ml-hero__lead { margin-inline: 0; }
  .ml-hero__actions { justify-content: flex-start; }
  .ml-hero__media { order: 0; padding-bottom: 0; }
}

/* ==========================================================================
   Brand promise bar
   ========================================================================== */
.ml-promise {
  background: var(--ml-accent);
  color: var(--ml-accent-ink);
}
.ml-promise__inner {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-block: 1.25rem;
  text-align: center;
  font-size: var(--ml-size-sm);
  font-weight: 600;
}
@media (min-width: 700px) {
  .ml-promise__inner { flex-direction: row; justify-content: center; gap: 2.5rem; }
}

/* ==========================================================================
   Card grids (shared: categories / articles / news / guides)
   ========================================================================== */
.ml-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ml-space-gap);
}
@media (min-width: 620px) { .ml-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .ml-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ml-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .ml-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Category cards — typographic, no images in V1 */
.ml-cat-card {
  display: block;
  text-decoration: none;
  background: var(--ml-surface);
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.ml-cat-card:hover, .ml-cat-card:focus-visible { border-color: var(--ml-accent); transform: translateY(-2px); }
.ml-cat-card__name { font-family: var(--ml-font-display); font-size: var(--ml-size-h3); color: var(--ml-ink); }

/* Article cards */
.ml-card {
  display: flex;
  flex-direction: column;
  background: var(--ml-surface);
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.ml-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ml-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ml-card__media img { width: 100%; height: 100%; min-width: 0; object-fit: cover; }
.ml-card__media--fallback {
  background: linear-gradient(135deg, var(--ml-accent-soft), var(--ml-bg-alt));
}
.ml-card__media--fallback span {
  font-family: var(--ml-font-display);
  font-size: 1.1rem;
  color: var(--ml-accent);
  opacity: .7;
  text-align: center;
  padding: 1rem;
}
.ml-card__body { padding: 1.1rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ml-card__meta { font-size: var(--ml-size-sm); font-weight: 700; color: var(--ml-accent); }
.ml-card__title { font-size: 1.05rem; margin: 0; }
.ml-card__excerpt { color: var(--ml-muted); font-size: var(--ml-size-sm); margin: 0; }
.ml-card__date { margin-top: auto; font-size: var(--ml-size-sm); color: var(--ml-muted); padding-top: .5rem; }

/* Empty state (no posts yet in a section) */
.ml-empty {
  border: 1px dashed var(--ml-line);
  border-radius: var(--ml-radius);
  padding: 2rem;
  text-align: center;
  color: var(--ml-muted);
  font-size: var(--ml-size-sm);
}

.ml-search-empty { max-width: 34rem; margin: 2rem auto; text-align: center; }
.ml-search-empty__hint { margin: 1.5rem 0 1rem; color: var(--ml-muted); font-size: var(--ml-size-sm); }
.ml-search-empty__categories { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* 404 */
.ml-404 { max-width: 34rem; margin: clamp(3rem, 8vw, 5rem) auto 4rem; text-align: center; }
.ml-404__eyebrow {
  display: block;
  font-family: var(--ml-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ml-accent);
  margin-bottom: .75rem;
}
.ml-404__title { font-size: var(--ml-size-h2, 1.75rem); margin: 0 0 .85rem; }
.ml-404__intro { color: var(--ml-muted); line-height: 1.6; margin: 0 0 1.75rem; }
.ml-404 .ml-search-form { max-width: 26rem; margin: 0 auto 2rem; }
.ml-404__categories { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ml-404__recent { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* ==========================================================================
   Editorial archive — category/content_type pages.
   Borderless, photography-forward, generous whitespace. Not a blog grid.
   ========================================================================== */
.ml-archive-header {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  padding-block: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2vw, 1.75rem);
}
.ml-archive-header__title {
  font-family: var(--ml-font-display);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .6rem;
}
.ml-archive-header__intro {
  color: var(--ml-muted);
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  max-width: 34rem;
  margin-inline: auto;
}

/* Sibling-category navigation strip — sits close to the intro above it. */
.ml-archive-nav {
  border-block: 1px solid var(--ml-line);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.ml-archive-nav__inner {
  max-width: var(--ml-content-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ml-archive-nav__inner::-webkit-scrollbar { display: none; }
.ml-archive-nav a {
  white-space: nowrap;
  padding-block: .85rem;
  font-size: var(--ml-size-sm);
  font-weight: 600;
  color: var(--ml-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ml-archive-nav a:hover, .ml-archive-nav a:focus-visible { color: var(--ml-ink); }
.ml-archive-nav a.is-active { color: var(--ml-accent); border-color: var(--ml-accent); }

/* Featured story + filter sidebar, side by side — the sidebar sits
   parallel to the image specifically; the title/excerpt/byline resume
   full width below the row (not confined to the image's column). */
.ml-featured-row {
  display: flex;
  gap: clamp(.6rem, 1.6vw, 1.1rem);
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.ml-featured-row__media { flex: 1 1 auto; min-width: 0; display: block; }
.ml-featured-row__media .ml-card__media {
  margin-bottom: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--ml-radius);
  min-height: 260px;
  max-height: 420px;
}
.ml-featured-row__body { display: block; text-decoration: none; color: inherit; }

/* Content-type filter, the category subnavigation.
   One quiet horizontal strip, shared by both editions (approved 2026-09-09):
   the row that had been live on /us/ becomes the pattern on /il/ too, replacing
   the earlier vertical rail. The rail left a wide empty band between the intro
   and the featured story, and in LTR it read as a stray sidebar.
   Selectors match the markup the archive templates actually render, which is
   anchors (a.ml-type-tabs__tab). button is covered as well, and as element+class,
   because hello-elementor's reset.css sets [type=button]{border:1px solid #c36;
   border-radius:3px} at the same specificity as a plain class and loads after
   this stylesheet, so a plain class selector would silently lose to it.
   Desktop: one centred row at fit-content. Mobile: the strip scrolls inside
   itself, the page never overflows. RTL and LTR both fall out of the logical
   properties, no direction-specific rules needed. */
.ml-type-tabs,
.ml-archive-header + .ml-type-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1.5rem, 3.4vw, 2.75rem);
  width: fit-content;
  max-width: 100%;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) auto clamp(2.5rem, 5vw, 3.5rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.ml-type-tabs::-webkit-scrollbar { display: none; }

a.ml-type-tabs__tab,
button.ml-type-tabs__tab {
  flex: 0 0 auto;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--ml-font-body);
  font-size: var(--ml-size-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  color: var(--ml-muted);
  background: none;
  padding: .5rem 0;
  margin-inline: 0;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
a.ml-type-tabs__tab::after,
button.ml-type-tabs__tab::after { content: none; }
a.ml-type-tabs__tab:hover,
a.ml-type-tabs__tab:focus-visible,
button.ml-type-tabs__tab:hover,
button.ml-type-tabs__tab:focus-visible {
  color: var(--ml-ink);
  background: transparent;
  outline: none;
}
a.ml-type-tabs__tab.is-active,
button.ml-type-tabs__tab.is-active {
  color: var(--ml-accent);
  border-bottom-color: var(--ml-accent);
}

/* Each archive block: vertical stack, generous but not excessive gaps
   between sections. */
.ml-editorial-feed {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.ml-editorial-feed + .ml-editorial-feed { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* hello-elementor's reset.css sets `section { display: block }` and loads
   after this stylesheet, so at equal (type-selector) specificity it wins
   by source order and defeats the [hidden] attribute — same class of bug
   as the earlier button.ml-toc__toggle issue. Raise specificity instead
   of reaching for !important. */
section.ml-editorial-feed[hidden] { display: none; }

.ml-editorial-eyebrow {
  display: block;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ml-accent);
  margin-bottom: 1.25rem;
}
.ml-archive-section__title {
  font-family: var(--ml-font-display);
  font-size: clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem);
  font-weight: 700;
  margin: 0 0 1.75rem;
}

.ml-editorial-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ml-editorial-card .ml-card__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--ml-radius);
  margin-bottom: 1.25rem; /* image reads as connected to its own text below */
}
.ml-editorial-card__meta {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  margin-bottom: .5em;
}
.ml-editorial-card__type { color: var(--ml-accent); }
.ml-editorial-card__brand {
  color: var(--ml-muted);
  font-weight: 600;
  padding-inline-start: .6em;
  border-inline-start: 1px solid var(--ml-line);
}
.ml-editorial-card__title {
  font-family: var(--ml-font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.ml-editorial-card__excerpt {
  color: var(--ml-muted);
  line-height: 1.75;
  max-width: 56rem;
  margin: .9rem 0 0;
}
.ml-editorial-card__date {
  display: block;
  color: var(--ml-muted);
  font-size: var(--ml-size-sm);
  margin-top: .75rem;
}

/* Featured — the cover story. Prominent, but headline capped well under
   the archive H1 so it reads as curated rather than another giant title. */
.ml-editorial-card--featured .ml-card__media {
  min-height: 480px;
  max-height: 560px;
}
.ml-editorial-card--featured .ml-editorial-card__title {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.85rem); /* ~28-46px, ~25% below the old size */
  max-width: 50rem;
}
.ml-editorial-card--featured .ml-editorial-card__excerpt {
  font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  max-width: 44rem;
}

/* Standard — the "כתבות אחרונות" 2-column grid. */
.ml-editorial-grid--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2.5rem;
}
.ml-editorial-card--standard .ml-card__media {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.ml-editorial-card--standard .ml-editorial-card__title {
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
}
.ml-editorial-card--standard .ml-editorial-card__excerpt {
  font-size: 1.05rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact — the denser later grid. Smaller image, no excerpt, title
   clamped to two lines so uneven headline lengths don't wreck row heights. */
.ml-editorial-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.ml-editorial-card--compact .ml-card__media {
  aspect-ratio: 4 / 3;
  min-height: 0;
  margin-bottom: 1rem;
}
.ml-editorial-card--compact .ml-editorial-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rhythm-breaking discovery block — a compact link list, not another
   card grid, so it visibly interrupts the pattern. */
.ml-discovery-block {
  background: var(--ml-bg-alt);
  border-radius: calc(var(--ml-radius) * 1.5);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
}
.ml-discovery-block__title {
  font-family: var(--ml-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.ml-discovery-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.ml-discovery-block__list a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--ml-line);
  padding-bottom: .5rem;
  display: block;
}
.ml-discovery-block__list li:last-child a { border-bottom: none; padding-bottom: 0; }
.ml-discovery-block__list a:hover, .ml-discovery-block__list a:focus-visible { color: var(--ml-accent); }

@media (max-width: 820px) {
  .ml-editorial-grid--2col,
  .ml-editorial-grid--3col { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 640px) {
  .ml-editorial-card--featured .ml-card__media { min-height: 340px; max-height: 420px; }
  .ml-editorial-card--featured .ml-editorial-card__title {
    font-size: clamp(1.6rem, 1.4rem + 2.5vw, 2rem); /* ~26-32px */
  }
  .ml-editorial-card__excerpt { font-size: 1rem; }
}

/* ==========================================================================
   About section (band, links to full page)
   ========================================================================== */
.ml-about { text-align: center; }
.ml-about__inner { max-width: 44rem; margin-inline: auto; }
.ml-about p { color: var(--ml-muted); }

/* ==========================================================================
   Newsletter — editorial subscription band, not a marketing signup block.
   Soft warm ground, generous whitespace, serif heading matching the rest of
   the site (--ml-font-display, same face as every other H2), one sentence,
   single email field + button. Deliberately quiet: no accent color, no
   shadow, no gradient.
   ========================================================================== */
.ml-newsletter { background: #faf8f5; padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.ml-newsletter__inner { max-width: 34rem; margin-inline: auto; }
.ml-newsletter__heading { font-family: var(--ml-font-display); font-size: var(--ml-size-h2, 1.75rem); margin: 0 0 .85rem; }
.ml-newsletter__lead { color: var(--ml-muted); max-width: 30rem; margin: 0 auto 2rem; line-height: 1.6; }
.ml-newsletter__form {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ml-newsletter__input {
  flex: 1 1 18rem;
  max-width: 22rem;
  padding: .75em .25em;
  border: none;
  border-bottom: 1px solid var(--ml-line);
  background: transparent;
  font-family: var(--ml-font-body);
  font-size: 1rem;
  color: var(--ml-ink);
  text-align: center;
  transition: border-color .2s ease;
}
.ml-newsletter__input::placeholder { color: var(--ml-muted); }
.ml-newsletter__input:focus-visible { outline: none; border-bottom-color: var(--ml-ink); }
.ml-newsletter__submit {
  padding: .75em 2em;
  border: none;
  border-radius: 0;
  background: var(--ml-ink);
  color: #fff;
  font-family: var(--ml-font-body);
  font-size: var(--ml-size-sm);
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background-color .25s ease;
}
.ml-newsletter__submit:hover, .ml-newsletter__submit:focus-visible { background: var(--ml-accent); }
.ml-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom search form (searchform.php) -- shared by the header toggle, mobile
   menu and the search results page itself. The header-scoped rules
   (.ml-header__search input, .ml-header__mobile-section .search-form) still
   win there via specificity; this is the base look everywhere else. */
.ml-search-form { display: flex; gap: .6rem; max-width: 26rem; }
.ml-search-form__field {
  flex: 1;
  min-width: 0;
  padding: .75em 1em;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
  background: #fff;
  font-family: var(--ml-font-body);
  font-size: var(--ml-size-body);
}
.ml-search-form__field:focus-visible { outline: none; border-color: var(--ml-accent); }
.ml-search-form__submit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  border: 1px solid var(--ml-accent);
  border-radius: var(--ml-radius);
  background: var(--ml-accent);
  color: var(--ml-accent-ink);
  cursor: pointer;
}
.ml-search-form__submit:hover, .ml-search-form__submit:focus-visible { background: var(--ml-ink); border-color: var(--ml-ink); }

/* ==========================================================================
   Single article
   ========================================================================== */
.ml-article__head { max-width: 46rem; margin-inline: auto; text-align: center; padding-block-start: 2.5rem; }
.ml-article__meta { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.ml-article__tag { font-size: var(--ml-size-sm); font-weight: 700; color: var(--ml-accent); background: var(--ml-accent-soft); padding: .25rem .75rem; border-radius: 99px; }
.ml-article__tag--muted { color: var(--ml-muted); background: var(--ml-bg-alt); }
.ml-article__tag--brand { background: transparent; border: 1px solid currentColor; text-decoration: none; }
.ml-article__tag--brand:hover, .ml-article__tag--brand:focus-visible { background: var(--ml-accent-soft); }

.ml-article__body .ml-photo-credit-note { font-size: var(--ml-size-sm); color: var(--ml-muted); margin-top: -1.5rem; margin-bottom: 2.5rem; }
.ml-article__date { color: var(--ml-muted); font-size: var(--ml-size-sm); }
.ml-article__hero-image { max-width: var(--ml-content-width); margin: 2rem auto; border-radius: var(--ml-radius); overflow: hidden; }
.ml-article__hero-image img { width: 100%; height: auto; }
.ml-article__deck {
  font-family: var(--ml-font-display);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  color: var(--ml-muted);
  max-width: 38rem;
  margin: .8rem auto 1.2rem;
  line-height: 1.55;
}
.ml-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  color: var(--ml-muted);
  font-size: var(--ml-size-sm);
}
.ml-article__byline-sep { opacity: .5; }

/* Title overlaid on the hero image — H1 lives on the photo, not above it.
   Height is an explicit clamp() (not aspect-ratio) so it stays editorial —
   an introduction to the article, not a full-screen cover. */
.ml-article__hero-image--overlay {
  position: relative;
  margin-top: 0;
  padding-inline: 0;
  height: clamp(380px, 30vh, 460px);
  max-height: 480px;
}
.ml-article__hero-image--overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Products (TAG palette, split cakes) sit in the upper-left of the source
     photo; biasing the crop there keeps them intact at this short a height,
     at the cost of the sponge in the bottom-left corner. */
  object-position: 18% 30%;
}
.ml-article__hero-image--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, 0) 75%);
  border-radius: var(--ml-radius);
}
.ml-article__hero-overlay-content {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-inline: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  z-index: 1;
}
.ml-article__hero-overlay-content .ml-article__meta { justify-content: center; }
.ml-article__hero-overlay-content h1 {
  color: #fff;
  max-width: 40rem;
  margin-inline: auto;
  text-wrap: balance;
}
.ml-article__hero-overlay-content .ml-article__date {
  color: rgba(255, 255, 255, .8);
}
/* Right-aligned variant -- for photos where the subject sits on one side
   with open space on the other; keeps the title off the subject's face
   instead of centering it across the whole frame. */
.ml-article__hero-overlay-content--right {
  text-align: right;
}
.ml-article__hero-overlay-content--right .ml-article__meta {
  justify-content: flex-end;
}
.ml-article__hero-overlay-content--right h1 {
  margin-inline: auto 0;
}
@media (max-width: 640px) {
  .ml-article__hero-image--overlay { height: clamp(260px, 40vh, 320px); }
  /* Shorter, narrower crop puts the title directly over the product photo;
     a stronger scrim keeps it legible without hiding the products. */
  .ml-article__hero-image--overlay::after {
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .15) 100%);
  }
}

.ml-article__body { max-width: 47rem; margin-inline: auto; padding-block: 1rem 4rem; }
.ml-article__body p { margin: 0 0 1.6em; line-height: 1.85; }
.ml-article__body h2 { margin: 3rem 0 .4em; }
.ml-article__body h3 { margin: 2.4rem 0 .4em; color: var(--ml-accent); }
.ml-article__body ul { padding-inline-start: 1.4em; margin: 0 0 1.6em; }
.ml-article__body li { margin-bottom: .75em; }
.ml-article__body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--ml-size-sm); }
.ml-article__body th, .ml-article__body td { border: 1px solid var(--ml-line); padding: .8em 1em; text-align: start; }
.ml-article__body th { background: var(--ml-bg-alt); font-weight: 700; }
.ml-article__body .ml-table-wrap { overflow-x: auto; }
.ml-article__body strong { color: var(--ml-ink); }

/* Lede — short intro deck, slightly larger and lighter than body text. */
.ml-article__body .ml-lede {
  font-family: var(--ml-font-display);
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  line-height: 1.6;
  color: var(--ml-ink);
  margin: 0 0 2em;
}

/* ==========================================================================
   Editorial image system — Portrait / Feature / Grid / Gallery.
   No floats, ever: images are always discrete blocks with their own space.
   ========================================================================== */
.ml-article__body figure.ml-photo {
  margin: 3rem 0;
}
.ml-article__body figure.ml-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ml-radius);
}
.ml-article__body figure.ml-photo figcaption {
  margin-top: .7rem;
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
  text-align: start;
}
/* Portrait — a supporting image, narrower than the column, centered. */
.ml-article__body figure.ml-photo--portrait {
  max-width: 78%;
  margin-inline: auto;
}
/* Feature — breaks out of the narrow text column for a magazine-style beat. */
.ml-article__body figure.ml-photo--feature {
  max-width: var(--ml-content-width);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.ml-article__body figure.ml-photo--feature figcaption {
  max-width: 47rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
}
/* Two-image grid — paired photos, equal treatment. */
.ml-article__body .ml-photo-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 3rem 0;
}
.ml-article__body .ml-photo-grid--2 figure.ml-photo { margin: 0; }
/* Gallery — a curated cluster that genuinely belongs together. */
.ml-article__body .ml-photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 3rem 0;
}
.ml-article__body .ml-photo-gallery figure.ml-photo { margin: 0; }
@media (max-width: 720px) {
  .ml-article__body .ml-photo-grid--2,
  .ml-article__body .ml-photo-gallery {
    grid-template-columns: 1fr;
  }
  .ml-article__body figure.ml-photo--portrait { max-width: 100%; }
}

/* ==========================================================================
   Pull quotes
   ========================================================================== */
.ml-article__body .ml-pullquote,
.ml-brandhub__section .ml-pullquote {
  font-family: var(--ml-font-display);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.45;
  color: var(--ml-ink);
  text-align: center;
  max-width: 38rem;
  margin: 3.5rem auto;
  padding: 0;
}
.ml-article__body .ml-pullquote::before,
.ml-article__body .ml-pullquote::after,
.ml-brandhub__section .ml-pullquote::before,
.ml-brandhub__section .ml-pullquote::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--ml-accent);
  margin: 0 auto 1.2rem;
}
.ml-article__body .ml-pullquote::after,
.ml-brandhub__section .ml-pullquote::after { margin: 1.2rem auto 0; }

/* ==========================================================================
   Editorial boxes — quiet, premium side notes. One family, used sparingly.
   ========================================================================== */
.ml-article__body .ml-editorial-box {
  background: var(--ml-bg-alt);
  border-radius: calc(var(--ml-radius) * 2);
  padding: 2.2rem clamp(1.5rem, 4vw, 3rem);
  margin: 3rem 0;
}
.ml-article__body .ml-editorial-box__icon {
  font-size: 1.4rem;
  margin-bottom: .6rem;
  display: block;
}
.ml-article__body .ml-editorial-box__title {
  font-family: var(--ml-font-display);
  font-size: var(--ml-size-h3);
  margin: 0 0 .2em;
  color: var(--ml-ink);
}
.ml-article__body .ml-editorial-box__subtitle {
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
  margin: 0 0 1.2em;
  font-style: normal;
}
.ml-article__body .ml-editorial-box p {
  margin: 0 0 1em;
  color: var(--ml-ink);
}
.ml-article__body .ml-editorial-box p:last-child { margin-bottom: 0; }

/* Small inline "tip" note — a lighter-weight sibling of the editorial box. */
.ml-article__body .ml-tip {
  border-inline-start: 2px solid var(--ml-accent);
  padding-inline-start: 1.2rem;
  margin: 2.5rem 0;
}
.ml-article__body .ml-tip__label {
  display: block;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  color: var(--ml-accent);
  margin-bottom: .3em;
}
.ml-article__body .ml-tip p { margin: 0; color: var(--ml-muted); }

/* Section divider between major chapters. */
.ml-article__body .ml-divider {
  border: none;
  border-top: 1px solid var(--ml-line);
  width: 4rem;
  margin: 3.5rem auto;
}

/* FAQ accordion — native details/summary, no JS required. */
.ml-article__body details.ml-faq,
.ml-brandhub__section details.ml-faq {
  border-bottom: 1px solid var(--ml-line);
  padding-block: 1.2rem;
}
.ml-article__body details.ml-faq summary,
.ml-brandhub__section details.ml-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ml-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.ml-article__body details.ml-faq summary::-webkit-details-marker,
.ml-brandhub__section details.ml-faq summary::-webkit-details-marker { display: none; }
.ml-article__body details.ml-faq summary::after,
.ml-brandhub__section details.ml-faq summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--ml-accent);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.ml-article__body details.ml-faq[open] summary::after,
.ml-brandhub__section details.ml-faq[open] summary::after { transform: rotate(45deg); }
.ml-article__body details.ml-faq p,
.ml-brandhub__section details.ml-faq p { margin: .9rem 0 0; color: var(--ml-muted); }

/* ==========================================================================
   Sticky table of contents
   ========================================================================== */
.ml-toc {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ml-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ml-line);
  margin-bottom: 1rem;
}
.ml-toc__progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ml-accent);
  transform: scaleX(0);
  transform-origin: right; /* site is RTL; progress fills from the reading-start edge */
  will-change: transform;
}
.ml-toc__inner {
  max-width: var(--ml-content-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ml-toc__inner::-webkit-scrollbar { display: none; }
.ml-toc a {
  white-space: nowrap;
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
  text-decoration: none;
  padding-block: .9rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ml-toc a:hover,
.ml-toc a:focus-visible { color: var(--ml-ink); }
.ml-toc a:focus-visible {
  outline: 2px solid var(--ml-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.ml-toc a.is-active { color: var(--ml-accent); border-color: var(--ml-accent); }
button.ml-toc__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  color: var(--ml-ink);
  padding-block: .9rem;
  cursor: pointer;
}
.ml-toc__toggle-icon { transition: transform .2s ease; }
.ml-toc.is-expanded .ml-toc__toggle-icon { transform: rotate(180deg); }
@media (max-width: 720px) {
  button.ml-toc__toggle { display: flex; }
  .ml-toc__inner {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block-end: .5rem;
  }
  .ml-toc.is-expanded .ml-toc__inner { display: flex; overflow-x: visible; }
  .ml-toc a { padding-block: .6rem; border-bottom: none; border-inline-start: 2px solid transparent; padding-inline-start: .8rem; }
  .ml-toc a.is-active { border-inline-start-color: var(--ml-accent); border-bottom: none; }
}
html { scroll-behavior: smooth; }
.ml-article__body h2[id],
.ml-article__body h3[id] { scroll-margin-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Instagram video embeds (Meta Embeds plugin, native core/embed block)
   ========================================================================== */
.instagram-embed-block {
  max-width: 420px;
  margin: 3.5rem auto;
}
.instagram-embed-block__title {
  font-family: var(--ml-font-display);
  font-style: italic;
  font-size: var(--ml-size-body);
  color: var(--ml-muted);
  font-weight: 500;
  margin: 0 0 1.2em;
  text-align: center;
}
.instagram-embed-block__caption {
  display: none; /* superseded by the editorial paragraph + photo before the embed */
}
.instagram-embed-block .wp-block-embed {
  margin: 0;
}
.instagram-embed-block .wp-block-embed__wrapper {
  max-width: 100%;
  overflow: hidden;
}
.instagram-embed-block .wp-block-embed iframe {
  max-width: 100%;
}
.instagram-embed-block__fallback {
  text-align: center;
  font-size: var(--ml-size-sm);
  margin: .8em 0 0;
}
.instagram-embed-block__fallback a {
  color: var(--ml-accent);
  text-decoration: underline;
}
.instagram-embed-block__fallback a:hover,
.instagram-embed-block__fallback a:focus-visible {
  color: var(--ml-ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ml-footer { background: var(--ml-bg-alt); border-top: 1px solid var(--ml-line); padding-block: var(--ml-space-section); }
.ml-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .ml-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.ml-footer__logo { font-family: var(--ml-font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: .09em; margin-bottom: .5rem; }
.ml-footer h4 { font-size: var(--ml-size-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--ml-muted); margin: 0 0 .75rem; }
.ml-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ml-footer a { text-decoration: none; font-size: var(--ml-size-sm); }
.ml-footer a:hover, .ml-footer a:focus-visible { color: var(--ml-accent); }
.ml-footer__bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ml-line);
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
  text-align: center;
}

/* ==========================================================================
   Brand Hub — permanent landing page per beauty brand (taxonomy-brand.php)
   ========================================================================== */
.ml-brand-hero {
  max-width: 46rem;
  margin: 0 auto;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.ml-brand-hero__media {
  max-width: 22rem;
  margin: 0 auto 2rem;
}
.ml-brand-hero__media img { width: 100%; height: auto; display: block; border-radius: var(--ml-radius); }
.ml-brand-hero__title {
  font-family: var(--ml-font-display);
  font-size: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
.ml-brand-hero__intro { font-size: 1.15rem; line-height: 1.8; color: var(--ml-muted); }
.ml-brand-hero__intro p { margin: 0 0 1em; }
.ml-brand-hero__intro p:last-child { margin-bottom: 0; }

.ml-brand-section, .ml-shopping-hub__section { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.ml-brand-section__title, .ml-shopping-hub__section-title {
  font-family: var(--ml-font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  font-weight: 700;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ml-line);
}
.ml-editorial-feed--brand {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 2.5rem 2rem;
}
.ml-editorial-feed--brand .ml-editorial-card { margin-top: 0 !important; }
.ml-editorial-feed--brand .ml-editorial-card .ml-card__media { min-height: 0; max-height: none; aspect-ratio: 4 / 5; }

.ml-brand-related { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.ml-brand-related__chips { display: flex; flex-wrap: wrap; gap: .75rem; }
.ml-brand-related__chip {
  display: inline-block;
  padding: .55rem 1.25rem;
  border: 1px solid var(--ml-line);
  border-radius: 99px;
  font-size: var(--ml-size-sm);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ml-brand-related__chip:hover, .ml-brand-related__chip:focus-visible { border-color: var(--ml-accent); color: var(--ml-accent); }

/* ==========================================================================
   Shopping hub ("קניות חכמות", /shopping/) — permanent editorial hub,
   category.php override for the `shopping` term. Deliberately editorial: no
   discount badges, price tags or coupon-site chrome — .ml-brand-section /
   .ml-editorial-feed--brand / .ml-archive-nav above are reused as-is for the
   section rhythm and card grid, this block only adds the hero and the
   featured-row treatment.
   ========================================================================== */
.ml-shopping-hub__hero {
  text-align: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.ml-shopping-hub__eyebrow {
  display: block;
  font-size: var(--ml-size-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ml-accent);
  margin-bottom: 1rem;
}
.ml-shopping-hub__title {
  font-family: var(--ml-font-display);
  font-size: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
.ml-shopping-hub__subtitle {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--ml-muted);
}
.ml-shopping-hub__building {
  max-width: 46ch;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--ml-muted);
  line-height: 1.8;
}
.ml-shopping-hub__featured .ml-editorial-feed--brand,
.ml-shopping-hub__events .ml-editorial-feed--brand {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.ml-shopping-hub__featured .ml-editorial-card--featured .ml-card__media,
.ml-shopping-hub__events .ml-editorial-card--featured .ml-card__media { aspect-ratio: 16 / 10; }

/* November Shopping Guide's own written intro (single.php override,
   post_content rendered directly) reuses the article lede treatment. */
.ml-shopping-hub__intro { max-width: 46rem; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; color: var(--ml-muted); }
.ml-shopping-hub__intro .ml-lede { font-size: 1.25rem; color: var(--ml-ink); margin-bottom: 1em; }
.ml-shopping-hub__intro p { margin: 0 0 1em; }
.ml-shopping-hub__intro p:last-child { margin-bottom: 0; }
.ml-shopping-hub__events { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Product cards -- Brand Hub "Related Products" sections. No price, no
   retailer, no purchase affordance: this renders a `product` taxonomy term,
   nothing commerce-related exists yet. */
.ml-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.5rem;
}
.ml-product-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.ml-product-card:hover .ml-product-card__title { color: var(--ml-accent); }
.ml-product-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--ml-radius);
  overflow: hidden;
  background: var(--ml-line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
}
.ml-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ml-product-card__media span { font-size: var(--ml-size-sm); color: var(--ml-muted); text-align: center; padding: 1rem; }
.ml-product-card__category { display: block; font-size: var(--ml-size-sm); color: var(--ml-muted); margin-bottom: .25rem; }
.ml-product-card__title { font-size: 1rem; font-weight: 600; margin: 0; transition: color .15s ease; }

/* ==========================================================================
   Reviews hub (/reviews/) — everything below is scoped under
   .ml-reviews-page and touches no other template. Reuses existing tokens
   and .ml-btn / .ml-article__tag rather than duplicating button/chip
   styles. --ml-gold is local to this page (not a site-wide token) since
   only ratings/Editor's Pick use it.
   ========================================================================== */
.ml-reviews-page { --ml-gold: #b58a4a; }

.ml-reviews-header { text-align: center; padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.ml-reviews-header__title {
  font-family: var(--ml-font-display);
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.ml-reviews-header__intro { max-width: 46ch; margin: 0 auto; color: var(--ml-muted); font-size: var(--ml-size-body); line-height: 1.7; }

.ml-reviews-cats { border-top: 1px solid var(--ml-line); border-bottom: 1px solid var(--ml-line); margin-bottom: clamp(2rem, 4vw, 3rem); }
.ml-reviews-cats__inner {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 1rem 0;
}
.ml-reviews-cats__inner::-webkit-scrollbar { display: none; }
.ml-reviews-cats__link {
  flex: 0 0 auto;
  font-size: var(--ml-size-sm);
  font-weight: 600;
  color: var(--ml-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ml-reviews-cats__link:hover, .ml-reviews-cats__link:focus-visible { color: var(--ml-accent); }
.ml-reviews-cats__link.is-active { color: var(--ml-accent); border-bottom-color: var(--ml-accent); }

/* Featured review: three-part composition, image forced to the visual left
   regardless of page RTL (per the reference), via direction:ltr on the
   grid only — text content re-asserts direction:rtl so Hebrew still reads
   naturally inside each column. */
.ml-reviews-featured {
  direction: ltr;
  display: grid;
  grid-template-columns: 1.15fr 1fr .62fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: stretch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ml-reviews-featured__media { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--ml-bg-alt); }
.ml-reviews-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-reviews-featured__badge {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  background: var(--ml-gold);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .45em .85em;
  border-radius: 2px;
}
.ml-reviews-featured__content { direction: rtl; display: flex; flex-direction: column; }
.ml-reviews-featured__brand { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-muted); margin-bottom: .6rem; }
.ml-reviews-featured__title {
  font-family: var(--ml-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  margin: 0 0 .75rem;
  text-wrap: balance;
}
.ml-reviews-featured__excerpt { color: var(--ml-muted); line-height: 1.75; margin: 0 0 1.1rem; }
.ml-reviews-featured__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.ml-reviews-featured__cta { align-self: flex-start; margin-top: auto; }

.ml-reviews-score {
  direction: rtl;
  text-align: center;
  background: #fff;
  border: 1px solid #e9e2dc;
  border-radius: 4px;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.ml-reviews-score__label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--ml-muted); text-transform: uppercase; }
.ml-reviews-score__number { font-family: var(--ml-font-display); font-size: clamp(2.25rem, 1.9rem + 1.5vw, 2.9rem); color: var(--ml-accent); line-height: 1; }
.ml-reviews-score__empty { color: var(--ml-muted); font-size: .85rem; margin: 1rem 0 0; }

.ml-stars { direction: ltr; position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }
.ml-stars__track { color: var(--ml-line); }
.ml-stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--ml-gold); }

.ml-reviews-score__breakdown { list-style: none; margin: .9rem 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: .6rem; }
.ml-reviews-score__breakdown li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; font-size: .78rem; }
.ml-reviews-score__metric { color: var(--ml-muted); white-space: nowrap; }
.ml-reviews-score__bar { position: relative; height: 1px; background: var(--ml-line); }
.ml-reviews-score__bar span { position: absolute; inset-inline-start: 0; top: 0; height: 100%; background: var(--ml-gold); }
.ml-reviews-score__value { color: var(--ml-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.ml-reviews-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ml-bg-alt);
  border: 1px solid var(--ml-line);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.ml-reviews-trust__item { text-align: center; }
.ml-reviews-trust__icon { color: var(--ml-accent); margin-bottom: .75rem; }
.ml-reviews-trust__item h3 { font-size: .95rem; color: var(--ml-accent); margin: 0 0 .4rem; }
.ml-reviews-trust__item p { font-size: .85rem; color: var(--ml-muted); line-height: 1.6; margin: 0; }

.ml-reviews-recent__title {
  text-align: center;
  color: var(--ml-accent);
  font-family: var(--ml-font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.ml-reviews-filters { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.ml-reviews-filters::-webkit-scrollbar { display: none; }
.ml-reviews-filters__chip {
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ml-muted);
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 99px;
  padding: .5em 1.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ml-reviews-filters__chip:hover, .ml-reviews-filters__chip:focus-visible { border-color: var(--ml-accent); color: var(--ml-accent); }
.ml-reviews-filters__chip.is-active { border-color: var(--ml-accent); color: var(--ml-accent); background: var(--ml-accent-soft); }

.ml-reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 1440px) { .ml-reviews-grid { grid-template-columns: repeat(5, 1fr); } }

.ml-review-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .15s ease;
}
.ml-review-card:hover, .ml-review-card:focus-visible { border-color: var(--ml-accent); }
.ml-review-card__media { aspect-ratio: 1 / 1; background: var(--ml-bg-alt); overflow: hidden; }
.ml-review-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-review-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; gap: .35rem; }
.ml-review-card__brand { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-muted); }
.ml-review-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ml-ink);
  margin: 0;
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ml-review-card__rating { display: flex; align-items: center; gap: .5rem; }
.ml-review-card__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border: 1px solid var(--ml-accent);
  border-radius: 50%;
  color: var(--ml-accent);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ml-review-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ml-review-card__tags .ml-article__tag { font-size: .7rem; padding: .2em .6em; }
.ml-review-card__link { margin-top: auto; padding-top: .6rem; font-size: .8rem; font-weight: 600; color: var(--ml-accent); }

.ml-reviews-pagination,
.ml-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.ml-reviews-pagination .page-numbers,
.ml-pagination .page-numbers {
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ml-line);
  border-radius: 3px;
  font-size: .85rem;
  color: var(--ml-ink);
  text-decoration: none;
  padding: 0 .4rem;
}
.ml-reviews-pagination a.page-numbers:hover, .ml-reviews-pagination a.page-numbers:focus-visible,
.ml-pagination a.page-numbers:hover, .ml-pagination a.page-numbers:focus-visible { border-color: var(--ml-accent); color: var(--ml-accent); }
.ml-reviews-pagination .page-numbers.current,
.ml-pagination .page-numbers.current { border-color: var(--ml-accent); background: var(--ml-accent); color: var(--ml-accent-ink); }

.ml-reviews-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--ml-bg-alt);
  border-radius: 4px;
  overflow: hidden;
  margin: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.ml-reviews-cta__media { aspect-ratio: 16 / 10; overflow: hidden; }
.ml-reviews-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-reviews-cta__content { padding: clamp(1.5rem, 3vw, 2.5rem); }
.ml-reviews-cta__content:only-child { grid-column: 1 / -1; }
.ml-reviews-cta__content h2 { font-family: var(--ml-font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0 0 .5rem; }
.ml-reviews-cta__content p { color: var(--ml-muted); margin: 0 0 1.25rem; }

@media (max-width: 900px) {
  .ml-reviews-featured { direction: rtl; grid-template-columns: 1fr; }
  .ml-reviews-trust { grid-template-columns: repeat(2, 1fr); }
  .ml-reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .ml-reviews-cta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ml-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ml-reviews-trust { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Guides hub (/learn/, "לומדים איתנו") — scoped under .ml-guides-page,
   touches no other template. Reuses .ml-btn / existing tokens; only the
   badge chip and card shapes are new, since nothing else on the site has
   an equivalent.
   ========================================================================== */
.ml-guides-hero { text-align: center; padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.ml-guides-hero__title {
  font-family: var(--ml-font-display);
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.ml-guides-hero__intro { max-width: 46ch; margin: 0 auto; color: var(--ml-muted); font-size: var(--ml-size-body); line-height: 1.7; }

.ml-guides-cats { border-top: 1px solid var(--ml-line); border-bottom: 1px solid var(--ml-line); margin-bottom: clamp(2rem, 4vw, 3rem); }
.ml-guides-cats__inner { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); overflow-x: auto; scrollbar-width: none; padding: 1rem 0; }
.ml-guides-cats__inner::-webkit-scrollbar { display: none; }
.ml-guides-cats__link {
  flex: 0 0 auto;
  font-size: var(--ml-size-sm);
  font-weight: 600;
  color: var(--ml-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ml-guides-cats__link:hover, .ml-guides-cats__link:focus-visible { color: var(--ml-accent); }
.ml-guides-cats__link.is-active { color: var(--ml-accent); border-bottom-color: var(--ml-accent); }

.ml-guides-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.ml-guides-featured__media { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--ml-bg-alt); }
.ml-guides-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-guides-featured__cat { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-accent); }
.ml-guides-featured__title {
  font-family: var(--ml-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  margin: .6rem 0 .75rem;
  text-wrap: balance;
}
.ml-guides-featured__excerpt { color: var(--ml-muted); line-height: 1.75; margin: 0 0 .9rem; }
.ml-guides-featured__time { display: block; font-size: var(--ml-size-sm); color: var(--ml-muted); margin-bottom: 1.3rem; }

.ml-guides-section__title {
  text-align: center;
  color: var(--ml-accent);
  font-family: var(--ml-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.ml-guides-section__subtitle { text-align: center; max-width: 50ch; margin: -.75rem auto clamp(1.5rem, 3vw, 2rem); color: var(--ml-muted); line-height: 1.7; }

.ml-guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); }

.ml-guide-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ml-accent);
  background: var(--ml-accent-soft);
  padding: .35em .75em;
  border-radius: 99px;
}

.ml-guide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .15s ease;
}
.ml-guide-card:hover, .ml-guide-card:focus-visible { border-color: var(--ml-accent); }
.ml-guide-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--ml-bg-alt); overflow: hidden; }
.ml-guide-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-guide-card__badge { position: absolute; top: .75rem; inset-inline-start: .75rem; background: #fff; }
.ml-guide-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; gap: .4rem; }
.ml-guide-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: var(--ml-muted); font-weight: 600; }
.ml-guide-card__meta span:first-child { color: var(--ml-accent); text-transform: uppercase; letter-spacing: .05em; }
.ml-guide-card__meta span + span::before { content: '·'; margin-inline-end: .5rem; color: var(--ml-line); }
.ml-guide-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ml-ink);
  margin: 0;
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ml-guide-card__link { margin-top: auto; padding-top: .5rem; font-size: .8rem; font-weight: 600; color: var(--ml-accent); }

.ml-guides-legend {
  background: var(--ml-bg-alt);
  border: 1px solid var(--ml-line);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.ml-guides-legend__title { text-align: center; margin: 0 0 clamp(1.5rem, 3vw, 2rem); font-family: var(--ml-font-display); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); }
.ml-guides-legend__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2rem); }
.ml-guides-legend__item p { margin: .6rem 0 0; color: var(--ml-muted); font-size: .88rem; line-height: 1.65; }

.ml-guides-beginner { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

.ml-guides-newsletter {
  background: var(--ml-bg-alt);
  border-radius: 4px;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.ml-guides-newsletter__content { max-width: 46ch; margin: 0 auto; }
.ml-guides-newsletter h2 { font-family: var(--ml-font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin: 0 0 .6rem; }
.ml-guides-newsletter p { color: var(--ml-muted); line-height: 1.7; margin: 0 0 1.4rem; }

@media (min-width: 1440px) { .ml-guides-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .ml-guides-featured { grid-template-columns: 1fr; }
  .ml-guides-grid { grid-template-columns: repeat(2, 1fr); }
  .ml-guides-legend__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ml-guides-grid { grid-template-columns: 1fr; }
  .ml-guides-legend__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Brand Hub — premium editorial brand page (MAC is the reference build,
   see taxonomy-brand.php + template-parts/brand-mac.php, and
   docs/architecture/brand-hub-pattern.md for the photography rule).
   Section rhythm alternates white / cream (--ml-bg-alt) explicitly per
   section (not nth-child) so the sequence survives reordering. Product/
   article cards use a slightly larger radius (12px) than the sitewide
   --ml-radius (6px) -- a deliberate, page-scoped choice for a more
   "luxury retail" card language, not a second design system: color and
   type tokens are the same ones used everywhere else, only spacing/radius
   are locally tuned for this page's denser, more editorial layout.
   ========================================================================== */
.ml-brandhub__hero {
  position: relative;
  min-height: clamp(560px, 60vw, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 120px;
}
/* Scale/crop pulled back from the previous pass -- was still reading as
   ~60% image weight. Less zoom, more centered position, and a stronger/
   wider scrim so the product cluster stops competing with the headline. */
.ml-brandhub__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; transform: scale(1.04); transform-origin: 32% center; }
.ml-brandhub__hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 42%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.15) 85%, transparent 100%);
}
/* Text block widened and pulled further toward center -- was 32rem/8vw
   margin (reading as a narrow column stranded on the right); now closer to
   an even split with the image side. Physical margin properties
   deliberately, not logical inline-start/end -- see note from the previous
   pass on why mixing the two on this RTL page is risky. */
.ml-brandhub__hero-inner { position: relative; z-index: 1; max-width: 38rem; margin-left: auto; margin-right: 5vw; text-align: right; }
.ml-brandhub__breadcrumb { font-size: .75rem; color: var(--ml-muted); opacity: .55; margin-bottom: 1.5rem; }
.ml-brandhub__breadcrumb a { color: inherit; text-decoration: none; }
.ml-brandhub__breadcrumb a:hover, .ml-brandhub__breadcrumb a:focus-visible { color: var(--ml-accent); opacity: 1; }
.ml-brandhub__breadcrumb span[aria-hidden] { margin: 0 .4em; }
.ml-brandhub__eyebrow {
  display: inline-block;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ml-accent);
  margin-bottom: 1rem;
}
/* Typography scale for this page, deliberately much bigger jumps between
   levels than the sitewide default. Tighter line-height and a slightly
   negative letter-spacing at this size read more like a masthead (Vogue
   register) than default body-text proportions just scaled up. */
.ml-brandhub__title {
  font-family: 'Playfair Display', var(--ml-font-display);
  /* Capped a bit below the previous pass's max (5.5rem) specifically so
     "MAC Cosmetics" reliably fits on one line within the 38rem text column
     without the nowrap below risking a clipped overflow at the hero's
     overflow:hidden edge. */
  font-size: clamp(2.75rem, 2.1rem + 3.2vw, 4.6rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.015em;
  color: var(--ml-ink);
  margin: 0 0 1.3rem;
  white-space: nowrap;
}
/* No margin:auto trick needed -- a block narrower than its RTL parent
   already sits at the parent's start edge (the right, in RTL) by default. */
.ml-brandhub__subtitle { max-width: 26rem; font-size: 1.375rem; color: var(--ml-ink); opacity: .85; line-height: 1.45; margin: 0 0 1.25rem; }
.ml-brandhub__trust { font-size: .95rem; color: var(--ml-muted); margin: 0 0 2rem; }
.ml-brandhub__cta {
  display: inline-flex;
  margin-top: .5rem;
  min-height: 58px;
  padding-inline: 2.75rem;
  border-radius: 10px;
  font-size: 1rem;
}
@media (max-width: 640px) { .ml-brandhub__title { white-space: normal; } }
.ml-brandhub__scroll {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--ml-ink);
  opacity: .55;
  animation: ml-brandhub-bounce 2.2s ease-in-out infinite;
}
.ml-brandhub__scroll:hover, .ml-brandhub__scroll:focus-visible { opacity: 1; }
@keyframes ml-brandhub-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .ml-brandhub__scroll { animation: none; } }

.ml-brandhub__body { max-width: 62rem; margin-inline: auto; padding-block: clamp(2rem, 4vw, 3rem); }
.ml-brandhub__lede { max-width: 42rem; margin-inline: auto; font-family: var(--ml-font-display); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.65; color: var(--ml-ink); text-align: center; }
.ml-brandhub__lede p { margin: 0 0 1.1em; }

.ml-brandhub__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 56rem;
  margin: clamp(2rem, 5vw, 3rem) auto;
  padding: clamp(1.75rem, 4vw, 2.5rem) 1rem;
  border-top: 1px solid var(--ml-line);
  border-bottom: 1px solid var(--ml-line);
}
.ml-brandhub__stat { text-align: center; }
.ml-brandhub__stat strong { display: block; font-family: var(--ml-font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: var(--ml-accent); margin-bottom: .3rem; }
.ml-brandhub__stat span { display: block; font-size: var(--ml-size-sm); color: var(--ml-muted); line-height: 1.4; }
@media (max-width: 640px) { .ml-brandhub__stats { grid-template-columns: repeat(2, 1fr); } }

/* Section rhythm: tightened from the original 56-104px range down to a
   steadier ~80px, and alternating background carries the "magazine, not
   endless white" feeling instead of ever-larger gaps. */
.ml-brandhub__section { padding-block: clamp(3.5rem, 5vw, 5rem); }
.ml-brandhub__section--cream {
  background: var(--ml-bg-alt);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.ml-brandhub__section--cream > :not(.ml-brandhub__split-media, .ml-brandhub__split-text) { max-width: 48rem; margin-inline: auto; }
.ml-brandhub__section h2 {
  font-family: 'Playfair Display', var(--ml-font-display);
  font-size: clamp(1.85rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.ml-brandhub__section h3 { font-family: var(--ml-font-display); font-size: 1.35rem; color: var(--ml-ink); margin: 2.2rem 0 .6rem; }
.ml-brandhub__section p { font-size: 1.1875rem; line-height: 1.75; margin: 0 0 1.1em; color: var(--ml-ink); }
.ml-brandhub__section p strong { color: var(--ml-accent); }
.ml-brandhub__inline-img { width: 100%; height: auto; border-radius: var(--ml-radius); margin: 2.5rem 0; }
.ml-brandhub__section-heading-center { text-align: center; max-width: 40rem; margin-inline: auto; }
.ml-brandhub__section-intro { max-width: 40rem; margin: 0 auto 1.1em; text-align: center; }

/* Default section body: 720px reading column (magazine-article width) */
.ml-brandhub__section:not(.ml-brandhub__section--narrow):not(.ml-brandhub__section--split):not(.ml-brandhub__section--personal) > *:not(.ml-brandhub__products):not(.ml-brandhub__showcase):not(.ml-brandhub__product-list):not(.ml-brandhub__masonry):not(.ml-brand-related__chips) {
  max-width: 45rem;
  margin-inline: auto;
}
.ml-brandhub__section--narrow { max-width: 38rem; margin-inline: auto; }
.ml-brandhub__section--narrow.ml-brandhub__section--cream { max-width: none; }
.ml-brandhub__section--narrow.ml-brandhub__section--cream > * { max-width: 38rem; margin-inline: auto; }

/* Quote scale for this page specifically -- bigger than the sitewide
   article pullquote (2.1rem max), per the "quote 42px" typography step. */
.ml-brandhub__section .ml-pullquote { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.625rem); }

.ml-brandhub__section--personal { background: var(--ml-bg-alt); margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.ml-brandhub__section--personal > * { max-width: 45rem; margin-inline: auto; }
.ml-brandhub__personal-tag {
  display: block;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ml-accent);
}
.ml-brandhub__section--personal > .ml-brandhub__personal-tag { max-width: 45rem; margin: 0 auto 1rem; }

/* Early personal teaser -- a short, visually distinct credibility callout,
   not the full essay (which stays in its original position further down). */
.ml-brandhub__teaser { text-align: center; }
.ml-brandhub__teaser .ml-brandhub__personal-tag { max-width: none; margin-bottom: .75rem; }
.ml-brandhub__teaser h2 { max-width: 32rem; margin-inline: auto; }
.ml-brandhub__teaser p { max-width: 32rem; margin-inline: auto; }
.ml-brandhub__teaser-link { display: inline-block; margin-top: .5rem; font-weight: 700; color: var(--ml-accent); text-decoration: none; }
.ml-brandhub__teaser-link:hover, .ml-brandhub__teaser-link:focus-visible { text-decoration: underline; }

/* History section: split layout -- media + timeline on one side, the essay
   on the other. Stacks on mobile (media first). */
.ml-brandhub__section--split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.ml-brandhub__split-media { position: sticky; top: 6rem; }
.ml-brandhub__split-media img { width: 100%; height: auto; border-radius: var(--ml-radius); margin-bottom: 2rem; }
.ml-brandhub__split-text .ml-pullquote { max-width: none; }
@media (max-width: 900px) {
  .ml-brandhub__section--split { grid-template-columns: 1fr; }
  .ml-brandhub__split-media { position: static; }
}

/* Timeline */
.ml-brandhub__timeline { border-inline-start: 3px solid var(--ml-line); padding-inline-start: 2rem; margin-top: 2.5rem; }
.ml-brandhub__timeline-item { position: relative; padding-bottom: 2.5rem; }
.ml-brandhub__timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: -2.11rem;
  top: .35rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--ml-accent);
  box-shadow: 0 0 0 4px var(--ml-surface);
}
.ml-brandhub__timeline-item:last-child { padding-bottom: 0; }
.ml-brandhub__timeline-icon { display: block; font-size: 1rem; color: var(--ml-accent); opacity: .6; margin-bottom: .3rem; }
.ml-brandhub__timeline-year { display: block; font-family: var(--ml-font-display); font-weight: 700; color: var(--ml-accent); font-size: 1.6rem; margin-bottom: .3rem; }
.ml-brandhub__timeline-item p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ml-muted); max-width: 22rem; }
/* Subtle scroll-reveal, progressive enhancement -- see assets/js/main.js.
   Items are fully visible by default (no JS / reduced-motion = no penalty,
   nothing ever hidden from a reader without a good reason). */
.ml-brandhub__timeline-item { opacity: 1; transform: none; }
.ml-brandhub__timeline[data-reveal] .ml-brandhub__timeline-item { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.ml-brandhub__timeline[data-reveal] .ml-brandhub__timeline-item.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ml-brandhub__timeline[data-reveal] .ml-brandhub__timeline-item { opacity: 1; transform: none; transition: none; }
}

/* Iconic products: Apple-style, one product at a time, alternating sides */
.ml-brandhub__showcase {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin: clamp(2.5rem, 5vw, 4rem) 0;
}
.ml-brandhub__showcase--reverse { grid-template-columns: 1fr 1.1fr; }
.ml-brandhub__showcase--reverse img { order: 2; }
.ml-brandhub__showcase--reverse .ml-brandhub__showcase-text { order: 1; }
.ml-brandhub__showcase img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(43,35,32,.06), 0 20px 40px rgba(43,35,32,.08); transition: transform .3s ease; }
.ml-brandhub__showcase:hover img { transform: scale(1.02); }
.ml-brandhub__showcase-text h3 { font-size: 1.75rem; margin-top: 0; }
.ml-brandhub__showcase-text p { font-size: 1.1rem; }
@media (max-width: 760px) {
  .ml-brandhub__showcase, .ml-brandhub__showcase--reverse { grid-template-columns: 1fr; }
  .ml-brandhub__showcase--reverse img, .ml-brandhub__showcase--reverse .ml-brandhub__showcase-text { order: initial; }
}

.ml-brandhub__product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--ml-line); }
.ml-brandhub__product-row h3 { font-size: 1.15rem; margin-top: 0; }
.ml-brandhub__product-row p { font-size: 1rem; color: var(--ml-muted); }
.ml-brandhub__photo-note { text-align: center; font-size: var(--ml-size-sm); color: var(--ml-muted); font-style: italic; margin-top: 1.5rem; }
@media (max-width: 640px) { .ml-brandhub__product-list { grid-template-columns: 1fr; } }

.ml-brandhub__reco-list { padding-inline-start: 1.4em; margin: 0 0 1.6em; }
.ml-brandhub__reco-list li { margin-bottom: .6em; line-height: 1.6; }

/* Latest articles: editorial masonry (Pinterest-style), not a uniform grid */
.ml-brandhub__masonry {
  columns: 3;
  column-gap: 1.5rem;
  margin-top: 2.5rem;
}
.ml-brandhub__masonry-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 1.5rem;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ml-surface);
  box-shadow: 0 1px 3px rgba(43,35,32,.06), 0 8px 24px rgba(43,35,32,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ml-brandhub__masonry-item:hover, .ml-brandhub__masonry-item:focus-visible { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(43,35,32,.09), 0 18px 36px rgba(43,35,32,.1); }
.ml-brandhub__masonry-item img { width: 100%; height: auto; display: block; overflow: hidden; transition: transform .35s ease; }
.ml-brandhub__masonry-item:hover img { transform: scale(1.04); }
.ml-brandhub__masonry-item--large { column-span: all; }
.ml-brandhub__masonry-item--large img { max-height: 24rem; object-fit: cover; }
.ml-brandhub__masonry-eyebrow { display: block; font-size: var(--ml-size-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-accent); margin: 1.2rem 1.3rem .4rem; }
.ml-brandhub__masonry-item h3 { font-family: var(--ml-font-display); font-size: 1.1rem; margin: .9rem 1.2rem 1.2rem; line-height: 1.4; }
.ml-brandhub__masonry-item--large h3 { font-size: 1.3rem; margin: 0 1.3rem 1.3rem; }
.ml-brandhub__masonry-item:hover h3, .ml-brandhub__masonry-item:focus-visible h3 { color: var(--ml-accent); }
@media (max-width: 900px) { .ml-brandhub__masonry { columns: 2; } }
@media (max-width: 560px) { .ml-brandhub__masonry { columns: 1; } }

.ml-brandhub__closing { text-align: center; }
.ml-brandhub__closing p { text-align: right; }

/* Closing hero bookend -- the page's final visual beat */
.ml-brandhub__end-hero { position: relative; min-height: clamp(420px, 45vw, 560px); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 2rem; }
.ml-brandhub__end-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-brandhub__end-hero-scrim { position: absolute; inset: 0; background: rgba(20,16,14,.52); }
.ml-brandhub__end-hero-inner { position: relative; z-index: 1; max-width: 40rem; text-align: center; padding: 2rem; }
.ml-brandhub__end-hero-quote { font-family: var(--ml-font-display); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.5; color: #fff; margin: 0 0 2rem; text-wrap: balance; }

/* Giant transparent quote marks -- the "wow" moment for pullquotes on this
   page specifically (sitewide article pullquotes keep their plain
   line-rule treatment, unchanged). */
.ml-brandhub__section .ml-pullquote {
  position: relative;
  padding-block: 1.5rem;
  background: var(--ml-bg-alt);
  border-radius: var(--ml-radius);
}
.ml-brandhub__section--split .ml-pullquote,
.ml-brandhub__section--personal .ml-pullquote { background: transparent; }
.ml-brandhub__section .ml-pullquote::before,
.ml-brandhub__section .ml-pullquote::after { display: none; }
.ml-brandhub__section .ml-pullquote::before {
  content: '"';
  display: block;
  position: absolute;
  top: -1.5rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  font-family: 'Playfair Display', var(--ml-font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--ml-accent);
  opacity: .14;
}

/* Magazine-style callout boxes -- pulled-out facts and editor asides,
   dropped into long-text sections to break up paragraph runs. */
.ml-brandhub__callout {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  border-radius: var(--ml-radius);
  border-inline-start: 3px solid var(--ml-accent);
  background: var(--ml-bg-alt);
}
.ml-brandhub__callout-label {
  display: block;
  font-family: var(--ml-font-display);
  font-weight: 700;
  font-size: var(--ml-size-sm);
  letter-spacing: .04em;
  color: var(--ml-accent);
  margin-bottom: .5rem;
}
.ml-brandhub__callout p { margin: 0; font-size: 1.05rem; }
.ml-brandhub__callout--editor { background: var(--ml-surface); box-shadow: 0 1px 3px rgba(43,35,32,.05), 0 6px 18px rgba(43,35,32,.05); }

/* "Still Relevant" as a dark inner-hero -- the one deliberately dark moment
   on an otherwise light page, used exactly once for contrast, not as a
   pattern repeated elsewhere (per "no dark heavy sections" everywhere else). */
.ml-brandhub__innerhero {
  background: var(--ml-ink);
  color: #fff;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  text-align: center;
}
.ml-brandhub__innerhero-inner { max-width: 42rem; margin-inline: auto; }
.ml-brandhub__innerhero h2 { color: #fff; }
.ml-brandhub__innerhero p { color: rgba(255,255,255,.82); }
.ml-brandhub__innerhero-word { font-family: var(--ml-font-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); color: #fff !important; margin: 1.5rem 0 !important; }
.ml-brandhub__innerhero-stats { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 4.5rem); margin-top: 3rem; flex-wrap: wrap; }
.ml-brandhub__innerhero-stats strong { display: block; font-family: var(--ml-font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); color: #fff; margin-bottom: .3rem; }
.ml-brandhub__innerhero-stats span { display: block; font-size: var(--ml-size-sm); color: rgba(255,255,255,.7); }


/* Hero title position for post 35 (how-to-clean-makeup-brushes): brushes sit on the left of the image, so the title block moves to the clean right side. Added 2026-08-26. */
.postid-35 .ml-article__hero-overlay-content{display:flex;flex-direction:column;align-items:flex-start;padding-inline-start:6%;padding-inline-end:42%;text-align:right}
.postid-35 .ml-article__hero-overlay-content h1{margin-inline:0;text-align:right}
@media(max-width:780px){.postid-35 .ml-article__hero-overlay-content{padding-inline-end:8%}}

/* Kryolan Brand Hub -- same ml-brandhub__* family as MAC, but its own
   identity: no black inner-hero, base stays the site's cream/ivory, and a
   single measured teal accent (evoking Dermacolor's own packaging) used
   sparingly -- thin rule, timeline numerals, small labels. Never a filled
   background. Scoped to .ml-brandhub--kryolan so it can never leak into
   MAC's or the generic brand template's palette. */
.ml-brandhub--kryolan {
  --kry-accent: #1c7d74;
}
.ml-brandhub--kryolan .ml-brandhub__timeline-year,
.ml-brandhub--kryolan .ml-brandhub__timeline-icon,
.ml-brandhub--kryolan .ml-brandhub__personal-tag,
.ml-brandhub--kryolan .ml-brandhub__hero-plain-eyebrow {
  color: var(--kry-accent);
}
.ml-brandhub--kryolan .ml-brandhub__timeline { border-inline-start-color: var(--kry-accent); border-inline-start-width: 2px; }
.ml-brandhub--kryolan .ml-pullquote { border-inline-start-color: var(--kry-accent); }
.ml-brandhub--kryolan .ml-brandhub__cta,
.ml-brandhub--kryolan .ml-btn--primary { background: var(--kry-accent); }
.ml-brandhub--kryolan .ml-brandhub__callout { border-inline-start: 3px solid var(--kry-accent); }
.ml-brandhub--kryolan .ml-brandhub__callout-label { color: var(--kry-accent); }

/* Three stats read as an awkward 2-then-1 wrap at the shared component's
   640px breakpoint -- stack cleanly instead, just for this page. */
@media (max-width: 480px) {
  .ml-brandhub--kryolan .ml-brandhub__stats { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Quiet accent rule for "מה אני באמת מכירה" -- distinguishes it from a
   plain paragraph without turning it into another hero moment. */
.ml-brandhub--kryolan #editorial-stance .ml-brandhub__kry-rule {
  width: 2rem; height: 2px; margin-bottom: 1.5rem; background: var(--kry-accent);
}

/* Text-only hero for brands with no full-bleed photography yet -- centered,
   generous but not empty (eyebrow + rule fill the space MAC's hero image
   would otherwise occupy), on the plain site background. */
.ml-brandhub--kryolan .ml-brandhub__hero-plain {
  max-width: 42rem;
  margin: 0 auto;
  padding-block: clamp(4rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.ml-brandhub--kryolan .ml-brandhub__hero-plain-eyebrow {
  display: inline-block;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.ml-brandhub--kryolan .ml-brandhub__hero-plain-rule { width: 2.5rem; height: 2px; margin: 0 auto 1.6rem; background: var(--kry-accent); }
.ml-brandhub--kryolan .ml-brandhub__hero-plain h1 { font-family: var(--ml-font-display); font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1.05; margin: 0 0 1.1rem; }
.ml-brandhub--kryolan .ml-brandhub__hero-plain-subtitle { font-size: 1.25rem; color: var(--ml-muted); line-height: 1.5; margin: 0 0 1.75rem; }
.ml-brandhub--kryolan .ml-brandhub__hero-plain-trust { font-size: .9rem; color: var(--ml-muted); margin: 0 0 2rem; }

.ml-brandhub--kryolan .ml-brandhub__source-note { font-size: .82rem; color: var(--ml-muted); margin-top: 1.5rem; }
.ml-brandhub--kryolan .ml-brandhub__source-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* "עולם האיפור" -- editorial modules, deliberately not ecommerce cards:
   no border box, no fill, no shadow, no icons. A numeral + small caps
   descriptor stand in for an icon without being one. */
.ml-brandhub--kryolan .ml-brandhub__kry-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem 4rem;
  margin-top: 3.5rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--ml-line);
}
.ml-brandhub--kryolan .ml-brandhub__kry-module { padding-top: 1.75rem; border-top: 1px solid var(--ml-line); }
.ml-brandhub--kryolan .ml-brandhub__kry-module-num {
  display: block;
  font-family: var(--ml-font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--kry-accent);
  line-height: 1;
  margin-bottom: .7rem;
}
.ml-brandhub--kryolan .ml-brandhub__kry-module-descriptor {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ml-muted);
  margin-bottom: .7rem;
}
.ml-brandhub--kryolan .ml-brandhub__kry-module h3 { font-family: var(--ml-font-display); font-size: 1.2rem; margin: 0 0 .6rem; }
.ml-brandhub--kryolan .ml-brandhub__kry-module p { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--ml-muted); }
.ml-brandhub--kryolan .ml-brandhub__kry-modules-footnote { max-width: 48rem; margin: 2.5rem auto 0; font-size: .95rem; color: var(--ml-muted); text-align: center; }

/* "מדריכים וסקירות" -- an editorial recommendation (image + text side by
   side) for the single most recent guide, not a blog tile. Escapes the
   .ml-brandhub__section--cream > * 48rem cap the same way the Dermacolor
   split does. Any future supporting posts fall into the existing masonry
   grid below, unchanged. */
.ml-brandhub--kryolan .ml-brandhub__kry-guide-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 62rem !important;
  margin-inline: auto;
}
.ml-brandhub--kryolan .ml-brandhub__kry-guide-featured-media { display: block; }
.ml-brandhub--kryolan .ml-brandhub__kry-guide-featured-media img { width: 100%; height: auto; display: block; border-radius: var(--ml-radius); }
.ml-brandhub--kryolan .ml-brandhub__kry-guide-featured-text h3 { font-family: var(--ml-font-display); font-size: 1.5rem; line-height: 1.3; margin: .6rem 0 1rem; }
.ml-brandhub--kryolan .ml-brandhub__kry-guide-featured-text h3 a { color: inherit; text-decoration: none; }
.ml-brandhub--kryolan .ml-brandhub__kry-guide-featured-text h3 a:hover { color: var(--kry-accent); }
.ml-brandhub--kryolan .ml-brandhub__kry-guide-featured-excerpt { color: var(--ml-muted); font-size: 1rem; line-height: 1.75; margin: 0 0 1.3rem; }
@media (max-width: 900px) {
  .ml-brandhub--kryolan .ml-brandhub__kry-guide-featured { grid-template-columns: 1fr; }
}
.ml-brandhub--kryolan .ml-brandhub__kry-guide-more { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 62rem !important; margin-inline: auto; }

/* Product moment -- two real editorial jar photos as a visual break, not a
   gallery: one clearly primary, one secondary, generous air between them,
   no boxes/carousel/JS. Distinct from the Dermacolor-and-me composition
   (side by side here, not overlapping) so the two photo moments on the
   page don't read as the same trick repeated. */
.ml-brandhub--kryolan .ml-brandhub__kry-product-moment {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  max-width: 52rem;
  margin-inline: auto;
}
.ml-brandhub--kryolan .ml-brandhub__kry-product-moment-main,
.ml-brandhub--kryolan .ml-brandhub__kry-product-moment-secondary {
  width: 100%; height: auto; display: block;
  border-radius: var(--ml-radius);
}
.ml-brandhub--kryolan .ml-brandhub__kry-product-moment-secondary { max-width: 82%; margin-inline-start: auto; }
.ml-brandhub--kryolan .ml-brandhub__kry-product-moment-caption {
  text-align: center;
  font-size: .82rem;
  color: var(--ml-muted);
  margin: 1.5rem 0 0;
}
@media (max-width: 640px) {
  .ml-brandhub--kryolan .ml-brandhub__kry-product-moment { grid-template-columns: 1fr; gap: 1.5rem; }
  .ml-brandhub--kryolan .ml-brandhub__kry-product-moment-secondary { max-width: 65%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .ml-brandhub--kryolan .ml-brandhub__kry-modules { grid-template-columns: 1fr; gap: 2rem; }
}

/* "Dermacolor ואני" -- editorial split, text one side / the two real
   palette photos composed main+inset on the other. Escapes the
   .ml-brandhub__section--personal > * width cap (45rem) that would
   otherwise force this two-column layout into a single narrow column. */
.ml-brandhub--kryolan .ml-brandhub__kry-dermacolor {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  max-width: 62rem !important;
}
.ml-brandhub--kryolan .ml-brandhub__kry-dermacolor-media { position: sticky; top: 6rem; }
@media (max-width: 900px) {
  .ml-brandhub--kryolan .ml-brandhub__kry-dermacolor { grid-template-columns: 1fr; }
  .ml-brandhub--kryolan .ml-brandhub__kry-dermacolor-media { position: static; margin-top: 2.5rem; }
}
.ml-brandhub--kryolan .ml-brandhub__kry-imgset { position: relative; }
.ml-brandhub--kryolan .ml-brandhub__kry-imgset-main {
  width: 100%; height: auto; display: block;
  border-radius: var(--ml-radius);
}
.ml-brandhub--kryolan .ml-brandhub__kry-imgset-inset {
  position: absolute;
  width: 38%; height: auto;
  bottom: -1.5rem; left: -1.5rem;
  border-radius: calc(var(--ml-radius) - 2px);
  box-shadow: 0 6px 18px rgba(43,35,32,.16);
}
/* Below ~900px the two-photo overlap composition doesn't have room to
   breathe -- drop the absolute overlap and let the second photo sit
   cleanly below the first instead of forcing it. */
@media (max-width: 900px) {
  .ml-brandhub--kryolan .ml-brandhub__kry-imgset { margin-bottom: 1.5rem; }
  .ml-brandhub--kryolan .ml-brandhub__kry-imgset-inset {
    position: static;
    width: 55%;
    margin-top: 1.25rem;
    box-shadow: 0 4px 12px rgba(43,35,32,.12);
  }
}


/* Clinique Brand Hub -- same ml-brandhub__* family as MAC/Kryolan, but its
   own identity: cream/ivory base throughout, a single measured green accent
   (evoking Clinique's own packaging) used sparingly -- principle terms,
   module numerals, small labels. No dark hero, no timeline (the approved
   copy is one origin story + three stats, not a dated multi-decade
   sequence). Scoped to .ml-brandhub--clinique so it can never leak into
   MAC's, Kryolan's, or the generic brand template's palette. */
.ml-brandhub--clinique {
  --cli-accent: #5c7a63;
}
.ml-brandhub--clinique .ml-brandhub__personal-tag,
.ml-brandhub--clinique .ml-brandhub__hero-plain-eyebrow {
  color: var(--cli-accent);
}
.ml-brandhub--clinique .ml-pullquote { border-inline-start-color: var(--cli-accent); }
.ml-brandhub--clinique .ml-brandhub__cta,
.ml-brandhub--clinique .ml-btn--primary { background: var(--cli-accent); }

/* Text-only hero -- identical pattern to Kryolan's, reused as-is. */
.ml-brandhub--clinique .ml-brandhub__hero-plain {
  max-width: 42rem;
  margin: 0 auto;
  padding-block: clamp(4rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.ml-brandhub--clinique .ml-brandhub__hero-plain-eyebrow {
  display: inline-block;
  font-size: var(--ml-size-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.ml-brandhub--clinique .ml-brandhub__hero-plain-rule { width: 2.5rem; height: 2px; margin: 0 auto 1.6rem; background: var(--cli-accent); }
.ml-brandhub--clinique .ml-brandhub__hero-plain h1 { font-family: var(--ml-font-display); font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1.05; margin: 0 0 1.1rem; }
.ml-brandhub--clinique .ml-brandhub__hero-plain-subtitle { font-size: 1.25rem; color: var(--ml-muted); line-height: 1.5; margin: 0 0 1.75rem; }
.ml-brandhub--clinique .ml-brandhub__hero-plain-trust { font-size: .9rem; color: var(--ml-muted); margin: 0 0 2rem; }

.ml-brandhub--clinique .ml-brandhub__source-note { font-size: .82rem; color: var(--ml-muted); margin-top: 1.5rem; }
.ml-brandhub--clinique .ml-brandhub__source-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 480px) {
  .ml-brandhub--clinique .ml-brandhub__stats { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* "3 צעדים. רעיון אחד." -- 3 editorial modules, deliberately not ecommerce
   cards: no border box, no fill, no shadow, no icons. A numeral + small
   caps descriptor stand in for an icon without being one. 3 columns, not
   Kryolan's 2 -- this is Clinique's own signature visual section. */
.ml-brandhub--clinique .ml-brandhub__cli-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--ml-line);
}
.ml-brandhub--clinique .ml-brandhub__cli-module { text-align: center; }
.ml-brandhub--clinique .ml-brandhub__cli-module-num {
  display: block;
  font-family: var(--ml-font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--cli-accent);
  line-height: 1;
  margin-bottom: .7rem;
}
.ml-brandhub--clinique .ml-brandhub__cli-module-descriptor {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ml-muted);
  margin-bottom: .7rem;
}
.ml-brandhub--clinique .ml-brandhub__cli-module h3 { font-family: var(--ml-font-display); font-size: 1.2rem; margin: 0 0 .6rem; }
.ml-brandhub--clinique .ml-brandhub__cli-module p { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--ml-muted); }
.ml-brandhub--clinique .ml-brandhub__cli-modules-footnote { max-width: 48rem; margin: 2.5rem auto 0; font-size: .95rem; color: var(--ml-muted); text-align: center; }
@media (max-width: 640px) {
  .ml-brandhub--clinique .ml-brandhub__cli-modules { grid-template-columns: 1fr; gap: 2rem; }
}

/* "בטיחות כחלק מהזהות" -- 3 editorial principles, quiet term + explanation,
   not ecommerce badges. */
.ml-brandhub--clinique .ml-brandhub__cli-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ml-line);
}
.ml-brandhub--clinique .ml-brandhub__cli-principle-term {
  display: block;
  font-family: var(--ml-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cli-accent);
  margin-bottom: .5rem;
}
.ml-brandhub--clinique .ml-brandhub__cli-principle p { margin: 0; font-size: .98rem; line-height: 1.65; color: var(--ml-muted); }
@media (max-width: 640px) {
  .ml-brandhub--clinique .ml-brandhub__cli-principles { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* "עולם הטיפוח של Clinique" -- 5 editorial modules (not 4 like Kryolan's
   product families), asymmetric grid so 5 items don't leave an awkward
   trailing gap. */
.ml-brandhub--clinique .ml-brandhub__cli-world {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  margin-top: 3rem;
}
.ml-brandhub--clinique .ml-brandhub__cli-world-descriptor {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cli-accent);
  margin-bottom: .6rem;
}
.ml-brandhub--clinique .ml-brandhub__cli-world-item h3 { font-family: var(--ml-font-display); font-size: 1.15rem; margin: 0 0 .5rem; }
.ml-brandhub--clinique .ml-brandhub__cli-world-item p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ml-muted); }
@media (max-width: 900px) {
  .ml-brandhub--clinique .ml-brandhub__cli-world { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ml-brandhub--clinique .ml-brandhub__cli-world { grid-template-columns: 1fr; gap: 2rem; }
}

/* Product moment -- a single editorial photo, deliberately not a paired
   composition like Kryolan's (the approved copy calls for one image here,
   not two). Centered, generous, no caption box. */
.ml-brandhub--clinique .ml-brandhub__cli-product-moment {
  max-width: 34rem;
  margin-inline: auto;
}
.ml-brandhub--clinique .ml-brandhub__cli-product-moment-img {
  width: 100%; height: auto; display: block;
  border-radius: var(--ml-radius);
}
.ml-brandhub--clinique .ml-brandhub__cli-product-moment-caption {
  text-align: center;
  font-size: .82rem;
  color: var(--ml-muted);
  margin: 1.5rem 0 0;
}

/* "Clinique ואני" -- editorial split, text one side / a single photo the
   other. Simpler than Kryolan's main+inset overlap (only one photo was
   approved here) -- escapes the .ml-brandhub__section--personal > * width
   cap (45rem) the same way Kryolan's split does. */
.ml-brandhub--clinique .ml-brandhub__cli-personal {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  max-width: 62rem !important;
}
.ml-brandhub--clinique .ml-brandhub__cli-personal-img {
  width: 100%; height: auto; display: block;
  border-radius: var(--ml-radius);
}
@media (max-width: 900px) {
  .ml-brandhub--clinique .ml-brandhub__cli-personal { grid-template-columns: 1fr; }
  .ml-brandhub--clinique .ml-brandhub__cli-personal-media { margin-top: 2rem; }
}

/* "האייקונים של Clinique" -- 4 editorial modules, text-only (no product
   grid, no Shop CTA, per spec). */
.ml-brandhub--clinique .ml-brandhub__cli-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3rem;
  margin-top: 3rem;
}
.ml-brandhub--clinique .ml-brandhub__cli-icon { padding-top: 1.5rem; border-top: 1px solid var(--ml-line); }
.ml-brandhub--clinique .ml-brandhub__cli-icon h3 { font-family: var(--ml-font-display); font-size: 1.2rem; margin: 0 0 .6rem; color: var(--cli-accent); }
.ml-brandhub--clinique .ml-brandhub__cli-icon p { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--ml-muted); }
@media (max-width: 640px) {
  .ml-brandhub--clinique .ml-brandhub__cli-icons { grid-template-columns: 1fr; gap: 2rem; }
}

/* "מדריכים וסקירות" featured (dedicated Clinique article) -- same pattern
   as Kryolan's guide-featured, own scoped class. */
.ml-brandhub--clinique .ml-brandhub__cli-guide-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 62rem !important;
  margin-inline: auto;
}
.ml-brandhub--clinique .ml-brandhub__cli-guide-featured-media { display: block; }
.ml-brandhub--clinique .ml-brandhub__cli-guide-featured-media img { width: 100%; height: auto; display: block; border-radius: var(--ml-radius); }
.ml-brandhub--clinique .ml-brandhub__cli-guide-featured-text h3 { font-family: var(--ml-font-display); font-size: 1.5rem; line-height: 1.3; margin: .6rem 0 1rem; }
.ml-brandhub--clinique .ml-brandhub__cli-guide-featured-text h3 a { color: inherit; text-decoration: none; }
.ml-brandhub--clinique .ml-brandhub__cli-guide-featured-text h3 a:hover { color: var(--cli-accent); }
.ml-brandhub--clinique .ml-brandhub__cli-guide-featured-excerpt { color: var(--ml-muted); font-size: 1rem; line-height: 1.75; margin: 0 0 1.3rem; }
@media (max-width: 900px) {
  .ml-brandhub--clinique .ml-brandhub__cli-guide-featured { grid-template-columns: 1fr; }
}
.ml-brandhub--clinique .ml-brandhub__cli-guide-more { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 62rem !important; margin-inline: auto; }

/* "Clinique בתוך המדריכים שלנו" -- a quiet, clearly secondary link list,
   deliberately NOT styled like the featured/masonry article cards above,
   so multi-brand guides never read as dedicated Clinique coverage. */
.ml-brandhub--clinique .ml-brandhub__cli-inguides-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ml-brandhub--clinique .ml-brandhub__cli-inguides-list li {
  border-bottom: 1px solid var(--ml-line);
}
.ml-brandhub--clinique .ml-brandhub__cli-inguides-list a {
  display: block;
  padding-block: 1rem;
  color: var(--ml-ink);
  text-decoration: none;
  font-size: 1.05rem;
  transition: color .15s ease;
}
.ml-brandhub--clinique .ml-brandhub__cli-inguides-list a:hover,
.ml-brandhub--clinique .ml-brandhub__cli-inguides-list a:focus-visible { color: var(--cli-accent); }

/* ============================================================
   LOREN STANDARD seal
   Editorial stamp shown only on products that passed the test.
   Levels: approved (default), editors-choice.
   Sizes: full (verdict area), compact (top of the article).
   ============================================================ */

.ml-seal {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  margin: clamp(1.75rem, 1.4rem + 1.5vw, 3rem) 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--ml-bg-alt);
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
}

.ml-seal--compact {
  gap: 1rem;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ml-line);
  border-bottom: 1px solid var(--ml-line);
  border-radius: 0;
}

/* --- the stamp itself --- */

.ml-seal__mark {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 168px;
  padding: 0.5rem;
  border: 1px solid var(--ml-ink);
  border-radius: 50%;
  color: var(--ml-ink);
  text-align: center;
  text-decoration: none;
  direction: ltr;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ml-seal__mark::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--ml-ink);
  border-radius: 50%;
  opacity: 0.45;
  pointer-events: none;
}

.ml-seal__mark:hover,
.ml-seal__mark:focus-visible {
  color: var(--ml-accent);
  border-color: var(--ml-accent);
}

.ml-seal__mark:hover::before,
.ml-seal__mark:focus-visible::before {
  border-color: var(--ml-accent);
}

.ml-seal__top {
  font-family: var(--ml-font-body);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  opacity: 0.75;
}

.ml-seal__name {
  margin-top: 0.2rem;
  font-family: var(--ml-font-display);
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ml-seal__rule {
  display: block;
  width: 42px;
  height: 1px;
  margin: 0.55rem 0;
  background: currentColor;
  opacity: 0.55;
}

.ml-seal__level {
  font-family: var(--ml-font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* compact stamp */

.ml-seal--compact .ml-seal__mark {
  width: 108px;
  height: 108px;
}

.ml-seal--compact .ml-seal__mark::before { inset: 4px; }
.ml-seal--compact .ml-seal__top { font-size: 0.46rem; letter-spacing: 0.28em; text-indent: 0.28em; }
.ml-seal--compact .ml-seal__name { font-size: 0.72rem; }
.ml-seal--compact .ml-seal__rule { width: 28px; margin: 0.35rem 0; }
.ml-seal--compact .ml-seal__level { font-size: 0.5rem; letter-spacing: 0.18em; text-indent: 0.18em; }

/* --- text beside the stamp --- */

.ml-seal__body { flex: 1 1 auto; min-width: 0; }

.ml-seal__note {
  margin: 0;
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
  line-height: 1.6;
}

.ml-seal__why { margin-top: 0.9rem; }

.ml-seal__why-title {
  margin: 0 0 0.4rem;
  font-family: var(--ml-font-display);
  font-size: var(--ml-size-h3);
  line-height: 1.3;
  color: var(--ml-ink);
}

.ml-seal__why p { margin: 0 0 0.6rem; }
.ml-seal__why p:last-child { margin-bottom: 0; }

.ml-seal__link {
  margin: 0.9rem 0 0;
  font-size: var(--ml-size-sm);
}

.ml-seal__link a {
  color: var(--ml-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ml-seal__link a:hover,
.ml-seal__link a:focus-visible { border-bottom-color: currentColor; }

@media (max-width: 640px) {
  .ml-seal { flex-direction: column; align-items: flex-start; text-align: start; }
  .ml-seal__mark { align-self: center; }
  .ml-seal--compact { flex-direction: row; align-items: center; }
}

/* ============================================================
   LOREN STANDARD methodology page
   ============================================================ */

.ml-standard__criteria {
  display: grid;
  gap: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.5rem) 0;
  padding: 0;
  list-style: none;
}

.ml-standard__criteria li {
  padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  background: var(--ml-surface);
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
}

.ml-standard__criteria strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--ml-font-display);
  font-size: var(--ml-size-h3);
  font-weight: 500;
  line-height: 1.3;
}

.ml-standard__levels { margin: clamp(1.5rem, 1.2rem + 1vw, 2.5rem) 0; }


/* seal link reset, beats the generic .entry-content a rules */
.ml-seal a.ml-seal__mark,
.ml-seal a.ml-seal__mark:hover,
.ml-seal a.ml-seal__mark:focus,
.ml-seal a.ml-seal__mark:focus-visible {
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
  background-image: none;
}

.ml-seal a.ml-seal__mark { color: var(--ml-ink); }

.ml-seal a.ml-seal__mark:hover,
.ml-seal a.ml-seal__mark:focus-visible { color: var(--ml-accent); }

/* hero variant: the seal as a brand credential on the homepage, no card */
.ml-seal--hero {
  gap: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0;
  padding: clamp(1rem, 0.9rem + 0.5vw, 1.4rem) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ml-line);
  border-radius: 0;
}

.ml-seal--hero .ml-seal__mark { width: 150px; height: 150px; }
.ml-seal--hero .ml-seal__top { font-size: 0.54rem; }
.ml-seal--hero .ml-seal__name { font-size: 0.88rem; }
.ml-seal--hero .ml-seal__level { font-size: 0.58rem; }
.ml-seal--hero .ml-seal__note { color: var(--ml-ink); font-size: var(--ml-size-body); line-height: 1.65; }

@media (max-width: 640px) {
  .ml-seal--hero { flex-direction: row; align-items: center; }
  .ml-seal--hero .ml-seal__mark { width: 112px; height: 112px; }
  .ml-seal--hero .ml-seal__top { font-size: 0.44rem; }
  .ml-seal--hero .ml-seal__name { font-size: 0.7rem; }
  .ml-seal--hero .ml-seal__level { font-size: 0.48rem; }
  .ml-seal--hero .ml-seal__note { font-size: var(--ml-size-sm); }
}

/* ============================================================
   Brands index (/brands/)
   Editorial gateway to the brand hubs. Uses the existing palette,
   typography and container; no cards, borders or shadows.
   ============================================================ */

.ml-brands { background: var(--ml-bg); }

.ml-brands .ml-brands__label {
  display: block;
  font-family: var(--ml-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ml-muted);
}

.ml-brands__section-title {
  margin: 0 0 clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  font-family: var(--ml-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.ml-brands__arrow-link a {
  font-family: var(--ml-font-body);
  font-size: var(--ml-size-sm);
  color: var(--ml-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ml-line);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ml-brands__arrow-link a:hover,
.ml-brands__arrow-link a:focus-visible {
  color: var(--ml-accent);
  border-bottom-color: currentColor;
}

/* --- hero --- */

.ml-brands__hero {
  padding: clamp(2.5rem, 2rem + 3vw, 6rem) 0 clamp(2rem, 1.6rem + 2vw, 4rem);
  text-align: center;
}

.ml-brands__crumbs {
  margin-bottom: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
}

.ml-brands__crumbs a { color: var(--ml-muted); text-decoration: none; }
.ml-brands__crumbs a:hover { color: var(--ml-accent); }

.ml-brands__title {
  margin: 0;
  font-family: var(--ml-font-display);
  font-size: clamp(2.4rem, 1.8rem + 3.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1.05;
}

.ml-brands__lead {
  max-width: 34em;
  margin: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem) auto 0;
  font-size: var(--ml-size-body);
  line-height: 1.7;
  color: var(--ml-muted);
}

.ml-brands__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.ml-brands__filter {
  padding: 0.2rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: var(--ml-font-body);
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ml-brands__filter:hover { color: var(--ml-ink); }
.ml-brands__filter.is-active { color: var(--ml-ink); border-bottom-color: var(--ml-ink); }

/* --- featured --- */

.ml-brands__featured { padding: 0 0 clamp(2.5rem, 2rem + 2.5vw, 5rem); }

.ml-brands__featured-grid {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.ml-brands__featured-media img {
  display: block;
  width: 100%;
  height: auto;
}

.ml-brands__featured-name {
  margin: 0.5rem 0 0;
  font-family: var(--ml-font-display);
  font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ml-brands__featured-tagline {
  margin: 0.5rem 0 0;
  font-size: var(--ml-size-body);
  color: var(--ml-ink);
}

.ml-brands__featured-desc {
  margin: 0.9rem 0 1.25rem;
  font-size: var(--ml-size-body);
  line-height: 1.75;
  color: var(--ml-muted);
}

/* --- discover grid --- */

.ml-brands__discover { padding: 0 0 clamp(2.5rem, 2rem + 2.5vw, 5rem); }

.ml-brands__grid {
  display: grid;
  gap: clamp(1.75rem, 1.4rem + 1.6vw, 3rem) clamp(1.25rem, 1rem + 1.2vw, 2.5rem);
  grid-template-columns: 1fr;
}

.ml-brands__item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ml-brands__item-media {
  display: block;
  margin-bottom: 0.9rem;
  overflow: hidden;
}

.ml-brands__item-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.ml-brands__item-link:hover .ml-brands__item-media img,
.ml-brands__item-link:focus-visible .ml-brands__item-media img { transform: scale(1.03); }

.ml-brands__item-name {
  margin: 0.35rem 0 0;
  font-family: var(--ml-font-display);
  font-size: var(--ml-size-h3);
  font-weight: 400;
  line-height: 1.25;
}

.ml-brands__item-tagline {
  margin: 0.3rem 0 0;
  font-size: var(--ml-size-sm);
  line-height: 1.6;
  color: var(--ml-muted);
}

.ml-brands__item-cta {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: var(--ml-size-sm);
  color: var(--ml-ink);
  border-bottom: 1px solid var(--ml-line);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ml-brands__item-link:hover .ml-brands__item-cta,
.ml-brands__item-link:focus-visible .ml-brands__item-cta {
  color: var(--ml-accent);
  border-bottom-color: currentColor;
}

/* --- the loren standard band --- */

.ml-brands__standard {
  padding: clamp(2.5rem, 2rem + 2.5vw, 5rem) 0;
  background: var(--ml-bg-alt);
}

.ml-brands__standard-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  text-align: center;
}

.ml-brands__standard .ml-seal--mark {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.ml-brands__standard-text { max-width: 46em; }

.ml-brands__standard-title {
  margin: 0;
  font-family: var(--ml-font-display);
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ml-brands__standard-sub {
  margin: 0.4rem 0 1rem;
  font-family: var(--ml-font-display);
  font-size: var(--ml-size-h3);
  color: var(--ml-ink);
}

.ml-brands__standard-text p {
  margin: 0 0 0.75rem;
  line-height: 1.75;
  color: var(--ml-muted);
}

/* --- a to z --- */

.ml-brands__az { padding: clamp(2.5rem, 2rem + 2.5vw, 5rem) 0; }

.ml-brands__az-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ml-line);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.ml-brands__az-head .ml-brands__section-title { margin: 0; }

.ml-brands__az-grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ml-brands__az-letter {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--ml-font-display);
  font-size: 1.15rem;
  color: var(--ml-ink);
}

.ml-brands__az-list { margin: 0; padding: 0; list-style: none; }
.ml-brands__az-list li + li { margin-top: 0.3rem; }

.ml-brands__az-list a {
  font-size: var(--ml-size-sm);
  color: var(--ml-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ml-brands__az-list a:hover,
.ml-brands__az-list a:focus-visible { color: var(--ml-ink); border-bottom-color: var(--ml-line); }

/* --- latest --- */

.ml-brands__latest { padding: 0 0 clamp(3rem, 2.4rem + 3vw, 6rem); }

.ml-brands__latest-grid {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  grid-template-columns: 1fr;
}

.ml-brands__post-link { display: block; color: inherit; text-decoration: none; }

.ml-brands__post-media { display: block; margin-bottom: 0.75rem; overflow: hidden; }

.ml-brands__post-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ml-brands__post-link:hover .ml-brands__post-media img { transform: scale(1.03); }

.ml-brands__post-title {
  margin: 0.3rem 0 0;
  font-family: var(--ml-font-display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.35;
}

/* --- breakpoints --- */

@media (min-width: 600px) {
  .ml-brands__grid { grid-template-columns: repeat(2, 1fr); }
  .ml-brands__latest-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .ml-brands__featured-grid { grid-template-columns: 59% 1fr; }
  .ml-brands__standard-inner { flex-direction: row; text-align: start; }
  .ml-brands__latest-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
  .ml-brands__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ===== THE LOREN EDIT newsletter ===== */
.ml-edit{background:var(--ml-bg-alt,#f6f1ea);padding:clamp(2.5rem, 2rem + 3vw, 5.5rem) 0}
.ml-edit__inner{display:grid;gap:clamp(1.5rem, 1.2rem + 2vw, 3.5rem);align-items:center;grid-template-columns:1fr}
.ml-edit__media img{display:block;width:100%;height:auto}
.ml-edit__eyebrow{display:block;font-family:var(--ml-font-body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ml-muted)}
.ml-edit__title{margin:.75rem 0 0;font-family:var(--ml-font-display);font-weight:400;line-height:1.15;font-size:clamp(1.7rem, 1.3rem + 2.2vw, 3rem)}
.ml-edit__lead{margin:.9rem 0 0;max-width:34em;line-height:1.7;color:var(--ml-muted);font-size:var(--ml-size-body)}
.ml-edit__form{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.ml-edit__input{flex:1 1 16rem;min-width:0;padding:.95rem 1.1rem;border:1px solid var(--ml-line,#ddd5c9);background:#fff;font-family:var(--ml-font-body);font-size:var(--ml-size-body);color:var(--ml-ink)}
.ml-edit__input:focus{outline:none;border-color:var(--ml-ink)}
.ml-edit__submit{flex:0 0 auto;padding:.85rem 1.6rem;border:0;background:#6d1a33;color:#fff;font-family:var(--ml-font-body);font-size:var(--ml-size-sm);line-height:1.3;cursor:pointer;transition:background .2s ease}
.ml-edit__submit span{display:block}
.ml-edit__submit strong{display:block;font-weight:600;letter-spacing:.04em}
.ml-edit__submit:hover{background:#571427}
.ml-edit__submit[disabled]{opacity:.6;cursor:default}
.ml-edit__note{margin:.7rem 0 0;font-size:var(--ml-size-sm);color:var(--ml-muted)}
.ml-edit__status{margin:.6rem 0 0;font-size:var(--ml-size-sm);min-height:1.2em}
.ml-edit__status.is-ok{color:#3f6b4f}
.ml-edit__status.is-error{color:#8a2b2b}
.ml-edit__standard{display:flex;align-items:center;gap:1.25rem;margin-top:clamp(1.5rem, 1.2rem + 1vw, 2.5rem);padding-top:clamp(1.25rem, 1rem + 1vw, 2rem);border-top:1px solid var(--ml-line,#ddd5c9)}
.ml-edit__standard p{margin:0;font-size:var(--ml-size-sm);line-height:1.7;color:var(--ml-muted)}
.ml-edit__standard .ml-seal--mark{flex:0 0 auto;margin:0;padding:0;background:transparent;border:0}
@media(min-width:900px){.ml-edit--full .ml-edit__inner{grid-template-columns:52% 1fr}}

/* THE LOREN EDIT, layout v2 */
.ml-edit--full .ml-edit__eyebrow{display:flex;align-items:center;gap:1rem}
.ml-edit--full .ml-edit__eyebrow::after{content:"";flex:0 0 clamp(48px, 8vw, 130px);height:1px;background:var(--ml-line,#ddd5c9)}
.ml-edit__media img{border-radius:10px}
.ml-edit__media{text-align:left}
.ml-edit__media-link{display:inline-block;margin-top:1.1rem;font-family:var(--ml-font-body);font-size:.9rem;color:#6d1a33;text-decoration:none;border-bottom:1px solid transparent}
.ml-edit__media-link:hover{border-bottom-color:currentColor}
.ml-edit__submit{order:-1}
@media (min-width: 900px){.ml-edit--full .ml-edit__inner{grid-template-columns:44% 1fr}}

/* THE LOREN EDIT, mobile */
@media (max-width: 899px){
  .ml-edit--full .ml-edit__media{order:-1;margin-bottom:.5rem}
  .ml-edit--full .ml-edit__media img{aspect-ratio:4 / 3;object-fit:cover;object-position:49% 28%}
  .ml-edit--full .ml-edit__eyebrow::after{flex:0 0 40px}
  .ml-edit__input{flex:1 1 100%}
  .ml-edit__submit{order:0;flex:1 1 100%;text-align:center}
}

/* THE LOREN EDIT, anchor */
.ml-edit{scroll-margin-top:96px}


/* THE LOREN EDIT, mobile menu item */
.ml-header__mobile-nav-inner nav ul .ml-header__mobile-edit a{color:#6d1a33;letter-spacing:.06em}


/* Edition switcher (IL | US). Header utility + footer nav. */
.ml-edition-switch{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ml-font-body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:inherit;direction:ltr}
.ml-edition-switch a{color:inherit;text-decoration:none;opacity:.5;border-bottom:1px solid transparent}
.ml-edition-switch a:hover{opacity:1;border-bottom-color:currentColor}
.ml-edition-switch [aria-current]{opacity:1;font-weight:600}
.ml-edition-switch__sep{opacity:.35}
.ml-header__actions .ml-edition-switch{margin-inline-end:.75rem}
.ml-footer .ml-edition-switch,.ml-site-footer .ml-edition-switch{margin-top:1rem}

/* US edition (LTR) overrides. Same design system, mirrored direction only.
   The stylesheet is written with logical properties; these are the few physical RTL assumptions. */
[dir="ltr"] .ml-reviews-featured__content,[dir="ltr"] .ml-reviews-score{direction:ltr}
[dir="ltr"] .ml-brandhub__hero-inner{margin-left:5vw;margin-right:auto;text-align:left}
[dir="ltr"] .ml-brandhub__closing p{text-align:left}
[dir="ltr"] .ml-article__hero-overlay-content--right{text-align:left}
[dir="ltr"] .ml-edit__media{text-align:right}
[dir="ltr"] .ml-brandhub--kryolan .ml-brandhub__kry-imgset-inset{left:auto;right:-1.5rem}

/* ============================================================
   TOC - mobile control (LOREN STANDARD)
   Mobile only (<=720px). The desktop TOC is not touched.
   Appended to themes/beautymagazine/style.css
   ============================================================ */

/* The lead text exists only on mobile. */
.ml-toc__lead { display: none; }

@media (max-width: 720px) {

  .ml-toc__lead {
    display: block;
    padding: 0.8rem 1.5rem 0;
  }

  .ml-toc__lead-title {
    margin: 0;
    font-size: var(--ml-size-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ml-ink);
  }

  .ml-toc__lead-sub {
    margin: 0.2rem 0 0;
    font-size: var(--ml-size-sm);
    line-height: 1.5;
    color: var(--ml-muted);
  }

  /* The control itself: a quiet framed field, not an app button. */
  button.ml-toc__toggle {
    width: calc(100% - 3rem);
    margin: 0.6rem 1.5rem 0.8rem;
    padding: 0.7rem 1rem;
    gap: 0.75rem;
    background: var(--ml-bg);
    border: 1px solid var(--ml-line);
    border-radius: 2px;
    font-weight: 500;
    color: var(--ml-ink);
    text-align: start;
  }

  button.ml-toc__toggle:focus-visible {
    outline: 2px solid var(--ml-accent);
    outline-offset: 3px;
  }

  .ml-toc__toggle-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ml-toc__toggle-icon {
    flex: 0 0 auto;
    color: var(--ml-muted);
  }

  .ml-toc.is-expanded button.ml-toc__toggle {
    border-color: var(--ml-accent);
    margin-block-end: 0.35rem;
  }

  /* Open list: comfortable touch targets, titles may wrap. */
  .ml-toc__inner {
    padding-block-end: 0.75rem;
  }

  .ml-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    white-space: normal;
    padding-block: 0.6rem;
    line-height: 1.4;
    /* Hairline between sections, so each row reads as its own target. */
    border-block-end: 1px solid color-mix(in srgb, var(--ml-line) 65%, transparent);
  }

  /* The theme removes the bottom border on the active row; keep the hairline
     so the rhythm of the list does not break where the reader is. */
  .ml-toc a.is-active {
    border-block-end: 1px solid color-mix(in srgb, var(--ml-line) 65%, transparent);
  }

  .ml-toc a:last-child,
  .ml-toc a.is-active:last-child {
    border-block-end: 0;
  }
}

/* ---------------------------------------------------------------
   US only: feature-photo breakout overflow fix (2026-09-14)
   The breakout above uses 100vw, which includes the classic
   scrollbar while the layout viewport does not, so the figure
   overflowed horizontally by the scrollbar width on desktop.
   Container query units measure .ml-article, which is exactly the
   layout width, so the full-bleed intent is kept without overflow.
   IL is intentionally untouched for now.
   --------------------------------------------------------------- */
body.ml-edition-us .ml-article {
  container-type: inline-size;
}

body.ml-edition-us .ml-article__body figure.ml-photo--feature {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
}


/* ---------------------------------------------------------------------------
   Brand feed: layout follows the real item count (1.18.4)
   One rule for every .ml-editorial-feed--brand, so brand hubs, brand archives
   and shopping hubs adapt without per-brand overrides. The base rule uses
   auto-fill, which leaves a lone card at a single 15rem track with the rest of
   the row empty; these two quantity queries fix the one-item and two-item
   cases and leave three or more exactly as they are.
   Direction-agnostic: grid tracks follow the writing mode and only logical
   properties are used, so IL (RTL) and US (LTR) both read correctly.
   Browsers without :has() keep the existing grid.
   --------------------------------------------------------------------------- */

/* exactly one article: one wide editorial card, media beside the text */
.ml-editorial-feed--brand:has(> .ml-editorial-card:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.ml-editorial-feed--brand > .ml-editorial-card:only-child {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  column-gap: 2rem;
  align-items: start;
}

/* exactly two articles: two equal columns */
.ml-editorial-feed--brand:has(> .ml-editorial-card:first-child:nth-last-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* three or more articles: the auto-fill grid above, untouched */

@media (max-width: 900px) {
  .ml-editorial-feed--brand:has(> .ml-editorial-card:first-child:nth-last-child(2)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ml-editorial-feed--brand > .ml-editorial-card:only-child {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }
}