/*
Theme Name: MeCare
Theme URI: https://mecare.pl
Author: Webnex
Author URI: https://webnex.pl
Description: Blog kosmetyczny — rzetelne recenzje, testy porównawcze i praktyczne porady beauty. Motyw 1:1 z projektu React.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mecare
Tags: blog, beauty, cosmetics, one-column, two-columns, custom-menu, featured-images, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════════
   0. DESIGN TOKENS (1:1 z React index.css)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --background: 40 20% 96%;
  --foreground: 0 0% 18%;
  --card: 40 20% 98%;
  --card-foreground: 0 0% 18%;
  --popover: 40 20% 98%;
  --popover-foreground: 0 0% 18%;
  --primary: 155 18% 56%;
  --primary-foreground: 40 20% 96%;
  --secondary: 40 15% 92%;
  --secondary-foreground: 0 0% 18%;
  --muted: 40 10% 93%;
  --muted-foreground: 0 0% 45%;
  --accent: 155 18% 56%;
  --accent-foreground: 0 0% 18%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 0% / 0.05;
  --input: 40 15% 90%;
  --ring: 155 18% 56%;
  --radius: 0.75rem;
  --sage: 155 18% 56%;
  --sage-light: 155 15% 90%;
  --charcoal: 0 0% 18%;
  --sand: 40 20% 96%;
  --sand-dark: 40 15% 88%;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
}

.dark {
  --background: 0 0% 8%;
  --foreground: 40 20% 96%;
  --card: 0 0% 10%;
  --card-foreground: 40 20% 96%;
  --primary: 155 18% 56%;
  --primary-foreground: 0 0% 8%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 40 20% 96%;
  --muted: 0 0% 14%;
  --muted-foreground: 40 10% 65%;
  --accent: 155 18% 56%;
  --accent-foreground: 40 20% 96%;
  --destructive: 0 62% 30%;
  --destructive-foreground: 40 20% 96%;
  --border: 0 0% 100% / 0.06;
  --input: 0 0% 14%;
}

/* ═══════════════════════════════════════════════════════════════════
   1. RESET & BASE
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;border-color:hsl(var(--border))}
body{margin:0;font-family:var(--font-sans);background:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);line-height:1.15;margin:0 0 0.5em}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;padding:0}

/* ═══════════════════════════════════════════════════════════════════
   2. LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.mc-container{width:100%;max-width:72rem;margin:0 auto;padding:0 1.5rem}
.mc-grid-sidebar{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.mc-grid-sidebar{grid-template-columns:1fr 300px}}
.mc-flex{display:flex}.mc-flex-col{flex-direction:column}
.mc-items-center{align-items:center}.mc-justify-between{justify-content:space-between}
.mc-gap-3{gap:0.75rem}.mc-gap-4{gap:1rem}.mc-gap-6{gap:1.5rem}.mc-gap-10{gap:2.5rem}

/* ═══════════════════════════════════════════════════════════════════
   3. HEADER — 3-layer (top-bar / logo / nav)
   ═══════════════════════════════════════════════════════════════════ */
.mc-header{position:sticky;top:0;z-index:50}

/* Top bar */
.mc-topbar{background:hsl(var(--foreground));color:hsl(var(--background))}
.mc-topbar .mc-container{display:flex;align-items:center;justify-content:space-between;height:2rem}
.mc-topbar-text{font-size:10px;font-family:var(--font-sans);letter-spacing:0.05em;opacity:.7}
.mc-topbar-social a{font-size:10px;font-family:var(--font-sans);opacity:.6;transition:opacity .2s}
.mc-topbar-social a:hover{opacity:1}

/* Logo area */
.mc-logo-area{background:hsl(var(--background));border-bottom:1px solid hsl(var(--border))}
.mc-logo-area .mc-container{display:flex;align-items:center;justify-content:space-between;padding-top:1.25rem;padding-bottom:1.25rem}
.mc-site-title{font-family:var(--font-serif);font-size:1.875rem;font-weight:700;letter-spacing:0.05em;color:hsl(var(--foreground))}
.mc-site-subtitle{font-size:10px;font-family:var(--font-sans);color:hsl(var(--muted-foreground));letter-spacing:0.2em;text-transform:uppercase;margin-top:-2px}

/* Search toggle */
.mc-search-toggle{padding:0.5rem;color:hsl(var(--muted-foreground));transition:color .2s}
.mc-search-toggle:hover{color:hsl(var(--foreground))}
.mc-search-inline{display:flex;align-items:center;border:1px solid hsl(var(--border));border-radius:0.5rem;overflow:hidden}
.mc-search-inline input{padding:0.5rem 0.75rem;font-size:12px;font-family:var(--font-sans);background:hsl(var(--background));color:hsl(var(--foreground));border:none;outline:none;width:12rem}
.mc-search-inline button{padding:0.5rem;color:hsl(var(--muted-foreground))}
.mc-search-inline button:hover{color:hsl(var(--foreground))}

/* Main nav */
.mc-nav{background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));box-shadow:0 1px 2px hsl(0 0% 0% / 0.04)}
.mc-nav .mc-container{display:flex;align-items:center;justify-content:space-between}
.mc-nav-list{display:none;list-style:none;margin:0;padding:0}
@media(min-width:768px){.mc-nav-list{display:flex}}
.mc-nav-list a{position:relative;display:block;padding:0.875rem 1rem;font-size:11px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));transition:color .2s,background .2s}
.mc-nav-list a:hover{color:hsl(var(--foreground));background:hsl(var(--secondary) / 0.5)}
.mc-nav-list .current-menu-item>a,
.mc-nav-list .current_page_item>a{color:hsl(var(--primary))}
.mc-nav-list .current-menu-item>a::after,
.mc-nav-list .current_page_item>a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:hsl(var(--primary))}

/* Mobile menu */
.mc-mobile-toggle{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 0;color:hsl(var(--foreground))}
.mc-mobile-toggle span{font-size:12px;font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:0.1em}
@media(min-width:768px){.mc-mobile-toggle{display:none}}
.mc-mobile-menu{display:none;background:hsl(var(--card));border-top:1px solid hsl(var(--border));padding:1rem 1.5rem}
.mc-mobile-menu.is-open{display:block}
@media(min-width:768px){.mc-mobile-menu{display:none!important}}
.mc-mobile-menu a{display:block;padding:0.625rem 0;font-size:12px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border) / 0.3)}
.mc-mobile-menu a:last-child{border-bottom:none}
.mc-mobile-menu .current-menu-item>a{color:hsl(var(--primary))}

/* ═══════════════════════════════════════════════════════════════════
   4. FOOTER — 4-column
   ═══════════════════════════════════════════════════════════════════ */
.mc-footer{background:hsl(var(--foreground));color:hsl(var(--background))}
.mc-footer-widgets{padding:4rem 0}
.mc-footer-grid{display:grid;gap:2.5rem}
@media(min-width:768px){.mc-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mc-footer-grid{grid-template-columns:repeat(4,1fr)}}
.mc-footer h4{font-family:var(--font-serif);font-size:1.125rem;font-weight:600;margin-bottom:1rem}
.mc-footer-heading{font-size:12px;font-family:var(--font-sans);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;opacity:.8;margin-bottom:1rem}
.mc-footer p,.mc-footer li a{font-size:12px;font-family:var(--font-sans);opacity:.5;transition:opacity .2s;line-height:1.6}
.mc-footer li a:hover{opacity:1}
.mc-footer ul{list-style:none;padding:0;margin:0}
.mc-footer li+li{margin-top:0.5rem}
.mc-footer-social a{font-size:12px;font-family:var(--font-sans);opacity:.5;transition:opacity .2s}
.mc-footer-social a:hover{opacity:1}
.mc-footer-bottom{border-top:1px solid hsl(var(--background) / 0.1);padding:1.25rem 0}
.mc-footer-bottom a{font-size:10px;font-family:var(--font-sans);opacity:.4;transition:opacity .2s}
.mc-footer-bottom a:hover{opacity:.7}
.mc-footer-copyright{font-size:10px;font-family:var(--font-sans);opacity:.3;letter-spacing:0.1em}

/* Recent posts in footer */
.mc-footer-recent{display:flex;align-items:flex-start;gap:0.75rem}
.mc-footer-recent img{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0;opacity:.7;transition:opacity .2s}
.mc-footer-recent:hover img{opacity:1}
.mc-footer-recent-title{font-size:12px;opacity:.6;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-footer-recent:hover .mc-footer-recent-title{opacity:1}
.mc-footer-recent-date{font-size:10px;opacity:.4}

/* ═══════════════════════════════════════════════════════════════════
   5. SIDEBAR WIDGETS
   ═══════════════════════════════════════════════════════════════════ */
.mc-sidebar{display:none}
@media(min-width:1024px){.mc-sidebar{display:block}}
.mc-widget{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:0.5rem;overflow:hidden;margin-bottom:2rem}
.mc-widget:last-child{margin-bottom:0}
.mc-widget-header{background:hsl(var(--foreground));color:hsl(var(--background));padding:0.75rem 1.25rem}
.mc-widget-header h3{font-size:12px;font-family:var(--font-sans);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:0.5rem}
.mc-widget-header--primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.mc-widget-body{padding:1.25rem}
.mc-widget-body p{font-size:12px;font-family:var(--font-sans);color:hsl(var(--muted-foreground));line-height:1.6;margin:0 0 0.75rem}
.mc-widget-link{font-size:11px;font-family:var(--font-sans);font-weight:500;color:hsl(var(--primary))}
.mc-widget-link:hover{text-decoration:underline}

/* Category list widget */
.mc-widget-cat-list{list-style:none;padding:0;margin:0}
.mc-widget-cat-list li{border-bottom:1px solid hsl(var(--border))}
.mc-widget-cat-list li:last-child{border-bottom:none}
.mc-widget-cat-list a{display:flex;align-items:center;justify-content:space-between;padding:0.625rem 1.25rem;font-size:12px;font-family:var(--font-sans);color:hsl(var(--muted-foreground));transition:color .2s,background .2s}
.mc-widget-cat-list a:hover{color:hsl(var(--foreground));background:hsl(var(--secondary) / 0.5)}
.mc-widget-cat-count{font-size:10px;background:hsl(var(--secondary));padding:0.125rem 0.5rem;border-radius:9999px}

/* Recent posts widget */
.mc-widget-recent a{display:flex;align-items:flex-start;gap:0.75rem;padding:0.75rem 1.25rem;transition:background .2s}
.mc-widget-recent a:hover{background:hsl(var(--secondary) / 0.5)}
.mc-widget-recent img{width:48px;height:48px;border-radius:4px;object-fit:cover;flex-shrink:0}
.mc-widget-recent-title{font-size:12px;font-family:var(--font-sans);font-weight:500;color:hsl(var(--foreground));line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.mc-widget-recent a:hover .mc-widget-recent-title{color:hsl(var(--primary))}
.mc-widget-recent-date{font-size:10px;font-family:var(--font-sans);color:hsl(var(--muted-foreground) / 0.6);margin-top:0.25rem;display:block}

/* Tags cloud */
.mc-widget-tags{display:flex;flex-wrap:wrap;gap:0.375rem;padding:1.25rem}
.mc-widget-tags a{font-size:10px;font-family:var(--font-sans);padding:0.25rem 0.625rem;border-radius:4px;background:hsl(var(--secondary));color:hsl(var(--muted-foreground));transition:color .2s,background .2s}
.mc-widget-tags a:hover{color:hsl(var(--foreground));background:hsl(var(--secondary) / 0.8)}

/* Newsletter widget */
.mc-widget-newsletter input{width:100%;padding:0.5rem 0.75rem;font-size:12px;font-family:var(--font-sans);border:1px solid hsl(var(--border));border-radius:0.375rem;background:hsl(var(--background));color:hsl(var(--foreground));outline:none;margin-bottom:0.5rem}
.mc-widget-newsletter input:focus{box-shadow:0 0 0 2px hsl(var(--primary) / 0.3)}
.mc-widget-newsletter button{width:100%;padding:0.5rem 0.75rem;font-size:12px;font-family:var(--font-sans);font-weight:500;background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-radius:0.375rem;transition:opacity .2s}
.mc-widget-newsletter button:hover{opacity:.9}

/* ═══════════════════════════════════════════════════════════════════
   6. HOMEPAGE SECTIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Hero */
.mc-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.mc-hero-bg{position:absolute;inset:0}
.mc-hero-bg img{width:100%;height:100%;object-fit:cover}
.mc-hero-overlay{position:absolute;inset:0;background:hsl(var(--background) / 0.65)}
.mc-hero-content{position:relative;z-index:10;max-width:42rem;padding-top:6rem}
.mc-hero-label{font-size:10px;font-family:var(--font-sans);font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:hsl(var(--foreground) / 0.7);margin-bottom:1.5rem;text-shadow:0 1px 2px hsl(0 0% 0% / 0.1)}
.mc-hero h1{font-size:clamp(3rem,7vw,4.5rem);font-weight:700;color:hsl(var(--foreground));line-height:1.1;margin-bottom:2rem;text-shadow:0 1px 2px hsl(0 0% 0% / 0.1)}
.mc-hero h1 span{color:hsl(var(--primary))}
.mc-hero-desc{font-size:1rem;font-family:var(--font-sans);color:hsl(var(--foreground) / 0.8);max-width:28rem;margin-bottom:3rem;line-height:1.7;font-weight:500;text-shadow:0 1px 2px hsl(0 0% 0% / 0.1)}
.mc-hero-subtitle{font-size:10px;font-family:var(--font-sans);font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:hsl(var(--foreground) / 0.7);margin-bottom:1rem;text-shadow:0 1px 2px hsl(0 0% 0% / 0.1)}
.mc-hero-ctas{display:flex;flex-wrap:wrap;gap:0.75rem}

/* Buttons */
.mc-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.875rem 1.75rem;border-radius:9999px;font-size:12px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.05em;text-transform:uppercase;transition:opacity .2s}
.mc-btn:hover{opacity:.9}
.mc-btn--primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.mc-btn--dark{background:hsl(var(--foreground));color:hsl(var(--background))}
.mc-btn--outline{border:1px solid hsl(var(--foreground) / 0.2);color:hsl(var(--foreground))}
.mc-btn--outline:hover{border-color:hsl(var(--foreground) / 0.4)}

/* Section common */
.mc-section{padding:8rem 1.5rem}
.mc-section--secondary{background:hsl(var(--secondary))}
.mc-section--secondary-half{background:hsl(var(--secondary) / 0.5)}
.mc-section--dark{background:hsl(var(--foreground));color:hsl(var(--background))}
.mc-section--charcoal{background:hsl(var(--charcoal))}
.mc-section-label{font-size:12px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:hsl(var(--primary));margin-bottom:1rem}
.mc-section-title{font-size:clamp(2rem,5vw,3.75rem);font-weight:600;line-height:1.1;margin-bottom:1.25rem}
.mc-section-desc{color:hsl(var(--muted-foreground));max-width:32rem;margin:0 auto;font-size:14px;line-height:1.7}
.mc-text-center{text-align:center}

/* Zuza underline accent */
.zuza-underline{background-image:linear-gradient(120deg,hsl(var(--primary) / 0.3) 0%,hsl(var(--primary) / 0.5) 50%,hsl(var(--primary) / 0.3) 100%);background-repeat:no-repeat;background-size:100% 40%;background-position:0 85%;padding:0 2px}

/* Card */
.mc-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;padding:2rem;transition:box-shadow .2s}
.mc-card:hover{box-shadow:0 2px 8px hsl(0 0% 0% / 0.04)}
.mc-card-label{font-size:10px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:1rem;display:block}
.mc-card h3{font-family:var(--font-serif);font-size:1.125rem;font-weight:600;margin-bottom:0.75rem}
.mc-card p{font-size:14px;color:hsl(var(--muted-foreground));line-height:1.6;margin-bottom:1rem}
.mc-card-footer{border-top:1px solid hsl(var(--border));padding-top:1rem;margin-top:auto}

/* Grid */
.mc-grid-2{display:grid;gap:0.75rem;grid-template-columns:repeat(2,1fr)}
.mc-grid-3{display:grid;gap:0.75rem;grid-template-columns:1fr}
@media(min-width:640px){.mc-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mc-grid-3{grid-template-columns:repeat(3,1fr)}}
.mc-grid-4{display:grid;gap:0.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.mc-grid-4{grid-template-columns:repeat(4,1fr)}}

/* Ritual selector */
.mc-ritual-btn{position:relative;border-radius:1rem;overflow:hidden;aspect-ratio:4/3;cursor:pointer}
.mc-ritual-btn img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.mc-ritual-btn:hover img{transform:scale(1.03)}
.mc-ritual-btn-overlay{position:absolute;inset:0;background:hsl(var(--foreground) / 0.3);transition:background .2s}
.mc-ritual-btn:hover .mc-ritual-btn-overlay{background:hsl(var(--foreground) / 0.2)}
.mc-ritual-btn.is-active{box-shadow:0 0 0 1px hsl(var(--foreground) / 0.2)}
.mc-ritual-btn-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:hsl(var(--background))}
.mc-ritual-btn-text span:first-child{font-family:var(--font-serif);font-size:clamp(0.875rem,2vw,1.125rem);font-weight:600}
.mc-ritual-btn-text span:last-child{font-size:12px;font-family:var(--font-sans);opacity:.7;margin-top:0.25rem}

/* Ritual detail */
.mc-ritual-detail{display:grid;gap:4rem;align-items:start;margin-bottom:7rem}
@media(min-width:1024px){.mc-ritual-detail{grid-template-columns:1fr 1fr}}
.mc-ritual-img{border-radius:1rem;overflow:hidden;aspect-ratio:4/5;position:relative}
.mc-ritual-img img{width:100%;height:100%;object-fit:cover}
.mc-ritual-img-gradient{position:absolute;inset:0;background:linear-gradient(to top,hsl(var(--foreground) / 0.3),transparent,transparent)}
.mc-ritual-steps{list-style:none;padding:0;margin:0}
.mc-ritual-step{display:flex;gap:1.25rem;margin-bottom:2rem}
.mc-ritual-step-num{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:9999px;border:1px solid hsl(var(--primary) / 0.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--font-sans);color:hsl(var(--primary))}
.mc-ritual-step h4{font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:0.05em;margin-bottom:0.375rem}
.mc-ritual-step p{font-size:14px;color:hsl(var(--muted-foreground));line-height:1.6}
.mc-blockquote{margin-top:3rem;padding-left:1.25rem;border-left:1px solid hsl(var(--primary) / 0.2);font-size:14px;font-style:italic;color:hsl(var(--muted-foreground));line-height:1.7}

/* Pill filters */
.mc-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin-bottom:4rem}
.mc-pill{padding:0.5rem 1.25rem;border-radius:9999px;font-size:12px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.05em;color:hsl(var(--muted-foreground));transition:all .2s;background:none;border:none}
.mc-pill:hover{color:hsl(var(--foreground))}
.mc-pill.is-active{background:hsl(var(--foreground));color:hsl(var(--background))}

/* Product card */
.mc-product-card{cursor:pointer}
.mc-product-card-img{border-radius:1rem;overflow:hidden;margin-bottom:1.5rem;aspect-ratio:4/5;background:hsl(var(--secondary))}
.mc-product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.mc-product-card:hover .mc-product-card-img img{transform:scale(1.03)}

/* GlowMeter */
.mc-glow{display:flex;align-items:center;gap:0.5rem}
.mc-glow-label{font-size:10px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.mc-glow-dots{display:flex;gap:2px}
.mc-glow-dot{width:6px;height:6px;border-radius:9999px;background:hsl(var(--muted-foreground) / 0.15)}
.mc-glow-dot.is-filled{background:hsl(var(--primary))}
.mc-glow-value{font-size:10px;font-family:var(--font-sans);font-weight:500;color:hsl(var(--primary))}

/* Product expand */
.mc-product-expand{overflow:hidden;max-height:0;opacity:0;transition:max-height .2s,opacity .2s}
.mc-product-expand.is-open{max-height:600px;opacity:1}
.mc-product-expand-inner{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid hsl(var(--border))}
.mc-product-field-label{font-size:10px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:hsl(var(--foreground));margin-bottom:0.25rem;display:block}
.mc-product-field-value{font-size:14px;color:hsl(var(--muted-foreground));line-height:1.6;font-style:italic;margin-bottom:1rem}
.mc-product-toggle{font-size:10px;font-family:var(--font-sans);color:hsl(var(--primary) / 0.7);letter-spacing:0.05em;margin-top:0.75rem;display:block}
.mc-product-ext-link{font-size:10px;font-family:var(--font-sans);color:hsl(var(--muted-foreground) / 0.4);letter-spacing:0.05em;transition:color .2s;margin-top:0.25rem;display:block}
.mc-product-ext-link:hover{color:hsl(var(--muted-foreground))}

/* Bubel */
.mc-bubel{max-width:42rem;margin:0 auto}

/* Storytelling */
.mc-story-grid{display:grid;gap:4rem;align-items:center}
@media(min-width:1024px){.mc-story-grid{grid-template-columns:1fr 1fr}}
.mc-story-grid img{width:100%;border-radius:1rem;object-fit:cover;aspect-ratio:3/2}

/* Brands (dark section) */
.mc-brands-grid{display:grid;gap:1px;background:hsl(var(--background) / 0.05);border-radius:1rem;overflow:hidden;margin-bottom:4rem}
@media(min-width:640px){.mc-brands-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mc-brands-grid{grid-template-columns:repeat(3,1fr)}}
.mc-brand-card{padding:2rem;background:hsl(var(--foreground))}

/* Stats */
.mc-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:4rem}
@media(min-width:768px){.mc-stats{grid-template-columns:repeat(4,1fr)}}
.mc-stat{text-align:center;padding:1.5rem;border-radius:1rem;background:hsl(var(--background));border:1px solid hsl(var(--border))}
.mc-stat-value{font-size:clamp(1.5rem,3vw,1.875rem);font-family:var(--font-serif);font-weight:600;color:hsl(var(--primary));margin-bottom:0.25rem}
.mc-stat-label{font-size:11px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.05em;text-transform:uppercase;color:hsl(var(--muted-foreground))}

/* Testimonials */
.mc-testimonials-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.mc-testimonials-grid{grid-template-columns:repeat(2,1fr)}}
.mc-testimonial{padding:2rem;border-radius:1rem;background:hsl(var(--background));border:1px solid hsl(var(--border));display:flex;flex-direction:column;justify-content:space-between}
.mc-testimonial-quote{font-size:14px;color:hsl(var(--foreground));line-height:1.6;margin-bottom:1.5rem}
.mc-testimonial-author{display:flex;align-items:center;gap:0.75rem}
.mc-testimonial-avatar{width:2rem;height:2rem;border-radius:9999px;background:hsl(var(--primary) / 0.1);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:hsl(var(--primary))}
.mc-testimonial-name{font-size:12px;font-family:var(--font-sans);font-weight:600}
.mc-testimonial-skin{font-size:10px;font-family:var(--font-sans);color:hsl(var(--muted-foreground))}

/* Newsletter (charcoal bg) */
.mc-newsletter{max-width:42rem;margin:0 auto;text-align:center;padding:5rem 1.5rem}
.mc-newsletter-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border-radius:9999px;background:hsl(var(--sage) / 0.15);margin-bottom:2rem}
.mc-newsletter-badge span{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:hsl(var(--sage));font-weight:500}
.mc-newsletter h2{font-family:var(--font-serif);font-size:clamp(1.875rem,4vw,3rem);font-weight:300;color:hsl(var(--sand));margin-bottom:1rem}
.mc-newsletter p{color:hsl(var(--sand-dark));font-size:clamp(1rem,2vw,1.125rem);line-height:1.7;max-width:32rem;margin:0 auto 2.5rem}
.mc-newsletter-form{display:flex;flex-direction:column;gap:0.75rem;max-width:28rem;margin:0 auto}
@media(min-width:640px){.mc-newsletter-form{flex-direction:row}}
.mc-newsletter-form input{flex:1;padding:0.875rem 1.25rem;border-radius:9999px;background:hsl(var(--charcoal));border:1px solid hsl(var(--sand) / 0.15);color:hsl(var(--sand));font-size:14px;outline:none;transition:border-color .2s}
.mc-newsletter-form input::placeholder{color:hsl(var(--sand-dark) / 0.5)}
.mc-newsletter-form input:focus{border-color:hsl(var(--sage) / 0.5)}
.mc-newsletter-form button{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.875rem 1.75rem;border-radius:9999px;background:hsl(var(--sage));color:hsl(var(--charcoal));font-size:14px;font-weight:500;transition:opacity .2s}
.mc-newsletter-form button:hover{opacity:.9}
.mc-newsletter-disclaimer{color:hsl(var(--sand-dark) / 0.4);font-size:12px;margin-top:1.5rem}

/* Contact form */
.mc-contact{max-width:36rem;margin:0 auto}
.mc-contact-tabs{display:flex;gap:1px;background:hsl(var(--secondary));border-radius:9999px;padding:2px;margin-bottom:2.5rem}
.mc-contact-tab{flex:1;padding:0.625rem;border-radius:9999px;font-size:12px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.05em;text-align:center;color:hsl(var(--muted-foreground));transition:all .2s}
.mc-contact-tab.is-active{background:hsl(var(--foreground));color:hsl(var(--background))}
.mc-contact-form{display:flex;flex-direction:column;gap:1rem}
.mc-contact-row{display:grid;gap:1rem}
@media(min-width:640px){.mc-contact-row{grid-template-columns:1fr 1fr}}
.mc-contact-input{width:100%;padding:0.875rem 1.25rem;border-radius:0.75rem;background:hsl(var(--secondary) / 0.5);color:hsl(var(--foreground));font-size:14px;font-family:var(--font-sans);border:none;outline:none;transition:box-shadow .2s}
.mc-contact-input::placeholder{color:hsl(var(--muted-foreground) / 0.5)}
.mc-contact-input:focus{box-shadow:0 0 0 1px hsl(var(--foreground) / 0.1)}
textarea.mc-contact-input{resize:none;min-height:6rem}
.mc-contact-submit{width:100%;padding:0.875rem;border-radius:9999px;background:hsl(var(--foreground));color:hsl(var(--background));font-size:12px;font-family:var(--font-sans);font-weight:500;letter-spacing:0.05em;text-transform:uppercase;transition:opacity .2s}
.mc-contact-submit:hover{opacity:.9}

/* Skin Quiz */
.mc-quiz-progress{display:flex;gap:0.75rem;margin-bottom:2.5rem}
.mc-quiz-progress-bar{height:1px;flex:1;background:hsl(var(--border));transition:background .2s}
.mc-quiz-progress-bar.is-active{background:hsl(var(--foreground))}
.mc-quiz-step{font-size:10px;font-family:var(--font-sans);color:hsl(var(--muted-foreground) / 0.5);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.75rem}
.mc-quiz-question{font-size:1.5rem;font-family:var(--font-serif);font-weight:600;margin-bottom:2.5rem;line-height:1.3}
.mc-quiz-answer{width:100%;text-align:left;padding:1rem 1.5rem;border-radius:0.75rem;border:1px solid hsl(var(--border));font-size:14px;font-family:var(--font-sans);transition:all .2s;margin-bottom:0.75rem}
.mc-quiz-answer:hover{border-color:hsl(var(--foreground) / 0.3)}
.mc-quiz-answer.is-selected{border-color:hsl(var(--foreground) / 0.3);background:hsl(var(--secondary) / 0.5)}

/* Blacklist */
.mc-blacklist-item{display:flex;align-items:flex-start;gap:1rem;border-radius:0.75rem;border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1.25rem;margin-bottom:0.75rem}
.mc-blacklist-x{color:hsl(var(--muted-foreground) / 0.4);font-size:14px;flex-shrink:0;margin-top:2px}
.mc-blacklist-item h4{font-family:var(--font-sans);font-size:14px;font-weight:500;margin-bottom:0.25rem}
.mc-blacklist-item p{font-size:12px;color:hsl(var(--muted-foreground));line-height:1.5;margin:0}

/* ═══════════════════════════════════════════════════════════════════
   7. BLOG FEED & SINGLE
   ═══════════════════════════════════════════════════════════════════ */

/* Blog header */
.mc-blog-header{margin-bottom:2.5rem}
.mc-breadcrumb{font-size:12px;font-family:var(--font-sans);color:hsl(var(--muted-foreground));margin-bottom:1.5rem}
.mc-breadcrumb a{color:hsl(var(--muted-foreground));transition:color .2s}
.mc-breadcrumb a:hover{color:hsl(var(--foreground))}
.mc-breadcrumb .separator{margin:0 0.5rem;opacity:.5}
.mc-blog-title{font-size:clamp(2rem,4vw,2.5rem);font-weight:600;margin-bottom:0.75rem}
.mc-blog-subtitle{font-size:14px;color:hsl(var(--muted-foreground));line-height:1.6}

/* Featured posts */
.mc-featured-grid{display:grid;gap:1.5rem;margin-bottom:3rem}
@media(min-width:640px){.mc-featured-grid{grid-template-columns:repeat(2,1fr)}}
.mc-featured-card{border-radius:1rem;overflow:hidden;border:1px solid hsl(var(--border));background:hsl(var(--card));transition:box-shadow .2s}
.mc-featured-card:hover{box-shadow:0 4px 12px hsl(0 0% 0% / 0.06)}
.mc-featured-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mc-featured-card-body{padding:1.25rem}

/* Post list */
.mc-post-list{list-style:none;padding:0;margin:0}
.mc-post-item{display:flex;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid hsl(var(--border))}
.mc-post-item:first-child{border-top:1px solid hsl(var(--border))}
.mc-post-thumb{width:80px;height:80px;border-radius:0.5rem;overflow:hidden;flex-shrink:0}
@media(max-width:639px){.mc-post-thumb{width:64px;height:64px}}
.mc-post-thumb img{width:100%;height:100%;object-fit:cover}
.mc-post-meta{font-size:11px;font-family:var(--font-sans);color:hsl(var(--muted-foreground));margin-bottom:0.375rem}
.mc-post-meta .format{font-weight:500;color:hsl(var(--primary))}
.mc-post-item h3{font-family:var(--font-serif);font-size:1.125rem;font-weight:600;line-height:1.3;margin-bottom:0.375rem}
.mc-post-item h3 a{transition:color .2s}
.mc-post-item h3 a:hover{color:hsl(var(--primary))}
.mc-post-excerpt{font-size:13px;color:hsl(var(--muted-foreground));line-height:1.5;margin-bottom:0.5rem}
.mc-post-tags{display:flex;flex-wrap:wrap;gap:0.25rem}
.mc-post-tags a{font-size:10px;font-family:var(--font-sans);padding:0.125rem 0.5rem;border-radius:4px;background:hsl(var(--secondary));color:hsl(var(--muted-foreground));transition:color .2s}
.mc-post-tags a:hover{color:hsl(var(--foreground))}
.mc-post-readtime{font-size:11px;font-family:var(--font-sans);color:hsl(var(--muted-foreground) / 0.6)}

/* Single post */
.mc-single-header{margin-bottom:3rem}
.mc-single-format{font-size:10px;font-family:var(--font-sans);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:hsl(var(--primary));margin-bottom:0.75rem;display:inline-block}
.mc-single-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.15;margin-bottom:1rem}
.mc-single-meta{font-size:12px;font-family:var(--font-sans);color:hsl(var(--muted-foreground));display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.mc-single-hero img{width:100%;border-radius:1rem;aspect-ratio:16/9;object-fit:cover;margin-bottom:2.5rem}

/* Article content */
.mc-content{font-family:var(--font-sans);font-size:15px;line-height:1.8;color:hsl(var(--foreground))}
.mc-content h2{font-size:1.75rem;margin:2.5rem 0 1rem}
.mc-content h3{font-size:1.375rem;margin:2rem 0 0.75rem}
.mc-content p{margin:0 0 1.25rem}
.mc-content blockquote{border-left:2px solid hsl(var(--primary));padding-left:1.25rem;margin:2rem 0;font-style:italic;color:hsl(var(--muted-foreground))}
.mc-content ul,.mc-content ol{margin:0 0 1.25rem;padding-left:1.5rem}
.mc-content li+li{margin-top:0.5rem}
.mc-content img{border-radius:0.75rem;margin:2rem 0}

/* Product review box */
.mc-review-box{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;padding:2rem;margin:2rem 0}
.mc-review-box h3{font-family:var(--font-serif);font-size:1.25rem;margin-bottom:0.5rem}
.mc-review-box .mc-glow{margin-bottom:1rem}
.mc-rating-bars{margin:1rem 0}
.mc-rating-bar{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.5rem}
.mc-rating-bar-label{font-size:12px;font-family:var(--font-sans);color:hsl(var(--muted-foreground));width:8rem}
.mc-rating-bar-track{flex:1;height:4px;border-radius:2px;background:hsl(var(--secondary))}
.mc-rating-bar-fill{height:100%;border-radius:2px;background:hsl(var(--primary));transition:width .3s}
.mc-rating-bar-score{font-size:12px;font-family:var(--font-sans);font-weight:600;color:hsl(var(--foreground));width:2rem;text-align:right}
.mc-pros-cons{display:grid;gap:1rem;margin:1.5rem 0}
@media(min-width:640px){.mc-pros-cons{grid-template-columns:1fr 1fr}}
.mc-pros li::before{content:'✓ ';color:hsl(var(--primary))}
.mc-cons li::before{content:'✗ ';color:hsl(var(--destructive))}
.mc-pros,.mc-cons{list-style:none;padding:0}
.mc-pros li,.mc-cons li{font-size:13px;margin-bottom:0.375rem}

/* FAQ in post */
.mc-faq{margin:2.5rem 0}
.mc-faq-item{border:1px solid hsl(var(--border));border-radius:0.75rem;margin-bottom:0.5rem;overflow:hidden}
.mc-faq-question{width:100%;padding:1rem 1.25rem;text-align:left;font-size:14px;font-family:var(--font-sans);font-weight:500;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.mc-faq-question:hover{background:hsl(var(--secondary) / 0.5)}
.mc-faq-answer{padding:0 1.25rem;max-height:0;overflow:hidden;transition:max-height .2s,padding .2s}
.mc-faq-item.is-open .mc-faq-answer{max-height:300px;padding:0 1.25rem 1rem}
.mc-faq-answer p{font-size:14px;color:hsl(var(--muted-foreground));line-height:1.6;margin:0}

/* ═══════════════════════════════════════════════════════════════════
   8. PAGINATION
   ═══════════════════════════════════════════════════════════════════ */
.mc-pagination{display:flex;justify-content:center;gap:0.25rem;padding:3rem 0}
.mc-pagination a,.mc-pagination span{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;font-size:13px;font-family:var(--font-sans);transition:all .2s}
.mc-pagination a{color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}
.mc-pagination a:hover{color:hsl(var(--foreground));border-color:hsl(var(--foreground) / 0.2)}
.mc-pagination .current{background:hsl(var(--foreground));color:hsl(var(--background));border:1px solid hsl(var(--foreground))}

/* ═══════════════════════════════════════════════════════════════════
   9. SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════════ */
.mc-reveal{opacity:0;transform:translateY(20px);transition:opacity 0.4s ease,transform 0.4s ease}
.mc-reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.mc-reveal{opacity:1;transform:none;transition:none}}

/* ═══════════════════════════════════════════════════════════════════
   10. UTILITY
   ═══════════════════════════════════════════════════════════════════ */
.mc-hidden{display:none}
.mc-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mc-rounded-2xl{border-radius:1rem}
.mc-aspect-16-9{aspect-ratio:16/9}
.mc-aspect-4-5{aspect-ratio:4/5}
.mc-aspect-3-2{aspect-ratio:3/2}
.mc-mb-0{margin-bottom:0}.mc-mb-4{margin-bottom:1rem}.mc-mb-8{margin-bottom:2rem}.mc-mb-16{margin-bottom:4rem}
.mc-mt-4{margin-top:1rem}.mc-mt-8{margin-top:2rem}.mc-mt-12{margin-top:3rem}
.mc-py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.mc-text-sm{font-size:14px}.mc-text-xs{font-size:12px}.mc-text-10{font-size:10px}
.mc-text-muted{color:hsl(var(--muted-foreground))}
.mc-text-primary{color:hsl(var(--primary))}
.mc-font-serif{font-family:var(--font-serif)}.mc-font-sans{font-family:var(--font-sans)}
.mc-font-medium{font-weight:500}.mc-font-semibold{font-weight:600}
.mc-tracking-wide{letter-spacing:0.1em}
.mc-uppercase{text-transform:uppercase}
.mc-line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-border-t{border-top:1px solid hsl(var(--border))}
.mc-pt-4{padding-top:1rem}.mc-pt-6{padding-top:1.5rem}