.mdh-display {
font-family: 'Playfair Display', serif;
}

.mdh-accent-text {
color: var(--mdh-accent);
}

.mdh-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--mdh-accent);
color: var(--mdh-white);
padding: 0.9rem 2rem;
border-radius: 3px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--mdh-accent);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.mdh-anatomy-dot i,
.mdh-ingredient-icon i {
  color: var(--mdh-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdh-btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0.15);
transform: translateX(-100%);
transition: transform 0.3s ease;
}

.mdh-btn-primary:hover::before {
transform: translateX(0);
}

.mdh-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(196,98,45,0.35);
}

.mdh-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: transparent;
color: var(--mdh-text-primary);
padding: 0.9rem 2rem;
border-radius: 3px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--mdh-border);
cursor: pointer;
transition: all 0.3s ease;
}

.mdh-btn-secondary:hover {
border-color: var(--mdh-accent);
color: var(--mdh-accent);
transform: translateY(-2px);
}

.mdh-section-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mdh-accent);
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}

.mdh-section-label::before {
content: '';
width: 2rem;
height: 2px;
background: var(--mdh-accent);
display: block;
}

.mdh-hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: var(--mdh-bg);
padding-top: 72px;
}

.mdh-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}

.mdh-hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.25;
animation: mdh-float 8s ease-in-out infinite;
}

.mdh-hero-blob-1 {
width: 600px;
height: 600px;
background: var(--mdh-terracotta);
top: -10%;
right: -5%;
animation-delay: 0s;
}

.mdh-hero-blob-2 {
width: 400px;
height: 400px;
background: var(--mdh-forest);
bottom: 10%;
left: -5%;
animation-delay: 3s;
}

.mdh-hero-blob-3 {
width: 300px;
height: 300px;
background: var(--mdh-amber);
top: 40%;
right: 30%;
animation-delay: 6s;
opacity: 0.15;
}

.mdh-hero-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.03;
mix-blend-mode: overlay;
}

@keyframes mdh-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-30px) scale(1.05); }
}

.mdh-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 4rem;
width: 100%;
position: relative;
z-index: 2;
}

.mdh-hero-content {
padding: 4rem 0;
}

.mdh-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--mdh-tag-bg);
color: var(--mdh-tag-text);
padding: 0.4rem 1rem;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 2rem;
border: 1px solid rgba(196,98,45,0.2);
}

[data-mdh-theme="dark"] .mdh-hero-badge {
border-color: rgba(232,169,64,0.2);
}

.mdh-hero-badge i {
font-size: 0.75rem;
}

.mdh-hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 5.5vw, 5.5rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--mdh-text-primary);
margin-bottom: 1rem;
}

.mdh-hero-h1 em {
font-style: italic;
color: var(--mdh-accent);
}

.mdh-hero-sub {
font-size: 1.05rem;
font-weight: 500;
color: var(--mdh-text-secondary);
margin-bottom: 0.75rem;
letter-spacing: 0.01em;
}

.mdh-hero-desc {
font-size: 0.95rem;
color: var(--mdh-text-secondary);
margin-bottom: 2.5rem;
line-height: 1.75;
max-width: 440px;
}

.mdh-hero-actions {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}

.mdh-hero-stats {
display: flex;
align-items: center;
gap: 2.5rem;
margin-top: 3.5rem;
padding-top: 2rem;
border-top: 1px solid var(--mdh-border);
}

.mdh-stat-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.mdh-stat-num {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 900;
color: var(--mdh-text-primary);
line-height: 1;
}

.mdh-stat-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mdh-text-secondary);
}

.mdh-hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}

.mdh-hero-card-stack {
position: relative;
width: 100%;
max-width: 480px;
margin: 0 auto;
}

.mdh-hero-main-card {
background: var(--mdh-bg-card);
border-radius: 20px;
border: 1px solid var(--mdh-border);
overflow: hidden;
box-shadow: 0 32px 80px var(--mdh-shadow);
position: relative;
z-index: 3;
transition: background 0.4s, border-color 0.4s;
}

.mdh-hero-card-img {
width: 100%;
height: 260px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #F5E6D3 0%, #E8C9A0 40%, #D4956A 100%);
display: flex;
align-items: center;
justify-content: center;
}

.mdh-tea-illustration {
width: 200px;
height: 200px;
position: relative;
}

.mdh-hero-card-body {
padding: 1.5rem;
}

.mdh-hero-card-tag {
display: inline-block;
background: var(--mdh-tag-bg);
color: var(--mdh-tag-text);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 50px;
margin-bottom: 0.75rem;
}

.mdh-hero-card-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--mdh-text-primary);
margin-bottom: 0.5rem;
}

.mdh-hero-card-desc {
font-size: 0.8rem;
color: var(--mdh-text-secondary);
line-height: 1.6;
}

.mdh-hero-card-footer {
padding: 0 1.5rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}

.mdh-hero-card-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mdh-accent);
text-decoration: none;
transition: gap 0.3s;
}

.mdh-hero-card-btn:hover {
gap: 0.7rem;
}

.mdh-floating-chip {
position: absolute;
background: var(--mdh-bg-card);
border: 1px solid var(--mdh-border);
border-radius: 12px;
padding: 0.75rem 1rem;
box-shadow: 0 8px 24px var(--mdh-shadow);
display: flex;
align-items: center;
gap: 0.6rem;
z-index: 5;
transition: background 0.4s, border-color 0.4s;
}

.mdh-chip-1 {
top: 10%;
left: -15%;
animation: mdh-chip-float 5s ease-in-out infinite;
}

.mdh-chip-2 {
bottom: 25%;
right: -12%;
animation: mdh-chip-float 5s ease-in-out infinite;
animation-delay: 2.5s;
}

@keyframes mdh-chip-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}

.mdh-chip-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}

.mdh-chip-icon.mdh-green { background: rgba(44,74,62,0.12); color: var(--mdh-forest); }
.mdh-chip-icon.mdh-orange { background: rgba(196,98,45,0.12); color: var(--mdh-terracotta); }

.mdh-chip-text strong {
display: block;
font-size: 0.78rem;
font-weight: 700;
color: var(--mdh-text-primary);
line-height: 1.2;
}

.mdh-chip-text span {
font-size: 0.68rem;
color: var(--mdh-text-secondary);
}

.mdh-trust-bar {
background: var(--mdh-forest);
padding: 1.25rem 0;
overflow: hidden;
position: relative;
}

[data-mdh-theme="dark"] .mdh-trust-bar {
background: #1C2B26;
}

.mdh-trust-track {
display: flex;
animation: mdh-scroll-track 28s linear infinite;
white-space: nowrap;
width: max-content;
}

.mdh-trust-track:hover {
animation-play-state: paused;
}

.mdh-trust-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 3rem;
color: rgba(255,255,255,0.75);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
}

.mdh-trust-item i {
color: var(--mdh-amber);
font-size: 0.85rem;
}

@keyframes mdh-scroll-track {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

.mdh-products {
padding: 8rem 0;
background: var(--mdh-bg);
transition: background 0.4s;
}

.mdh-products-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: flex-end;
gap: 2rem;
margin-bottom: 4rem;
}

.mdh-products-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
line-height: 1.15;
color: var(--mdh-text-primary);
letter-spacing: -0.02em;
}

.mdh-products-title em {
font-style: italic;
color: var(--mdh-accent);
}

.mdh-filter-tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}

.mdh-filter-tab {
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
border: 1.5px solid var(--mdh-border);
background: transparent;
color: var(--mdh-text-secondary);
transition: all 0.3s;
}

.mdh-filter-tab.mdh-active,
.mdh-filter-tab:hover {
background: var(--mdh-accent);
border-color: var(--mdh-accent);
color: var(--mdh-white);
}

.mdh-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}

.mdh-product-card {
background: var(--mdh-bg-card);
border-radius: 16px;
border: 1px solid var(--mdh-border);
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
position: relative;
}

.mdh-product-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 64px var(--mdh-shadow);
border-color: var(--mdh-accent);
}

.mdh-product-card:hover .mdh-product-overlay {
opacity: 1;
}

.mdh-product-thumb {
height: 200px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #F7E0D0, #EDAB7B);
}

.mdh-product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.mdh-product-card:hover .mdh-product-img {
transform: scale(1.1);
}

.mdh-product-overlay {
position: absolute;
inset: 0;
background: rgba(26,26,24,0.5);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.35s ease;
}

.mdh-quick-view-btn {
background: var(--mdh-white);
color: var(--mdh-charcoal);
padding: 0.6rem 1.25rem;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: all 0.3s;
}

.mdh-quick-view-btn:hover {
background: var(--mdh-accent);
color: var(--mdh-white);
transform: scale(1.05);
}

.mdh-product-info {
padding: 1.25rem;
}

.mdh-product-cat {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mdh-accent);
margin-bottom: 0.4rem;
display: flex;
align-items: center;
gap: 0.4rem;
}

.mdh-product-cat::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mdh-accent);
display: block;
}

.mdh-product-name {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--mdh-text-primary);
margin-bottom: 0.4rem;
line-height: 1.3;
}

.mdh-product-note {
font-size: 0.75rem;
color: var(--mdh-text-secondary);
line-height: 1.5;
}

.mdh-anatomy {
padding: 9rem 0;
background: var(--mdh-bg-alt);
position: relative;
overflow: hidden;
transition: background 0.4s;
}

.mdh-anatomy-deco {
position: absolute;
font-family: 'Playfair Display', serif;
font-size: clamp(8rem, 15vw, 16rem);
font-weight: 900;
color: var(--mdh-text-primary);
opacity: 0.03;
top: -2rem;
right: -2rem;
letter-spacing: -0.05em;
pointer-events: none;
line-height: 1;
}

.mdh-anatomy-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}

.mdh-anatomy-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.mdh-tea-cup-wrap {
position: relative;
width: 340px;
height: 400px;
flex-shrink: 0;
}

.mdh-anatomy-center {
width: 240px;
height: 240px;
border-radius: 50%;
background: linear-gradient(145deg, #EDCBA0, #C4622D);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
box-shadow: 0 20px 60px rgba(196,98,45,0.35);
z-index: 2;
}

.mdh-anatomy-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1.5px dashed var(--mdh-border);
animation: mdh-ring-spin 30s linear infinite;
}

.mdh-anatomy-ring-1 {
width: 300px;
height: 300px;
}

.mdh-anatomy-ring-2 {
width: 380px;
height: 380px;
animation-direction: reverse;
animation-duration: 45s;
}

@keyframes mdh-ring-spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mdh-anatomy-dot {
position: absolute;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--mdh-bg-card);
border: 1.5px solid var(--mdh-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
box-shadow: 0 4px 16px var(--mdh-shadow);
z-index: 3;
transition: all 0.3s;
cursor: pointer;
}

.mdh-anatomy-dot:hover {
transform: scale(1.2);
border-color: var(--mdh-accent);
box-shadow: 0 8px 24px rgba(196,98,45,0.25);
}

.mdh-dot-t { top: 2%; left: 50%; transform: translateX(-50%); }
.mdh-dot-r { top: 50%; right: 2%; transform: translateY(-50%); }
.mdh-dot-b { bottom: 2%; left: 50%; transform: translateX(-50%); }
.mdh-dot-l { top: 50%; left: 2%; transform: translateY(-50%); }

.mdh-anatomy-content h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 900;
line-height: 1.15;
color: var(--mdh-text-primary);
letter-spacing: -0.02em;
margin-bottom: 1rem;
}

.mdh-anatomy-subtitle {
font-size: 0.95rem;
color: var(--mdh-text-secondary);
margin-bottom: 2.5rem;
line-height: 1.7;
}

.mdh-ingredient-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}

.mdh-ingredient-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.25rem;
background: var(--mdh-bg-card);
border-radius: 12px;
border: 1px solid var(--mdh-border);
transition: all 0.3s ease;
}

.mdh-ingredient-item:hover {
border-color: var(--mdh-accent);
box-shadow: 0 4px 20px var(--mdh-shadow);
transform: translateX(4px);
}

.mdh-ingredient-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--mdh-tag-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}

.mdh-ingredient-name {
font-weight: 700;
font-size: 0.9rem;
color: var(--mdh-text-primary);
margin-bottom: 0.25rem;
}

.mdh-ingredient-desc {
font-size: 0.78rem;
color: var(--mdh-text-secondary);
line-height: 1.5;
}

.mdh-comparison {
padding: 9rem 0;
background: var(--mdh-bg);
transition: background 0.4s;
}

.mdh-comparison-header {
text-align: center;
margin-bottom: 5rem;
}

.mdh-comparison-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
letter-spacing: -0.02em;
color: var(--mdh-text-primary);
margin-bottom: 1rem;
}

.mdh-comparison-header p {
font-size: 0.95rem;
color: var(--mdh-text-secondary);
max-width: 500px;
margin: 0 auto;
}

.mdh-comparison-grid {
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 0;
align-items: stretch;
max-width: 960px;
margin: 0 auto;
}

.mdh-comparison-col {
border-radius: 20px;
overflow: hidden;
}

.mdh-comparison-col.mdh-old {
background: var(--mdh-bg-alt);
border: 1px solid var(--mdh-border);
}

.mdh-comparison-col.mdh-new {
background: var(--mdh-forest);
border: 1px solid transparent;
box-shadow: 0 24px 64px rgba(44,74,62,0.35);
}

[data-mdh-theme="dark"] .mdh-comparison-col.mdh-new {
background: #1C2B26;
}

.mdh-comparison-head {
padding: 2rem 2rem 1.5rem;
border-bottom: 1px solid var(--mdh-border);
}

.mdh-comparison-col.mdh-new .mdh-comparison-head {
border-bottom-color: rgba(255,255,255,0.1);
}

.mdh-comparison-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}

.mdh-comparison-col.mdh-old .mdh-comparison-label { color: var(--mdh-warm-gray); }
.mdh-comparison-col.mdh-new .mdh-comparison-label { color: var(--mdh-amber); }

.mdh-comparison-col-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
}

.mdh-comparison-col.mdh-old .mdh-comparison-col-title { color: var(--mdh-text-primary); }
.mdh-comparison-col.mdh-new .mdh-comparison-col-title { color: var(--mdh-white); }

.mdh-comparison-items {
padding: 1.75rem 2rem 2rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}

.mdh-comparison-item {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}

.mdh-comparison-item-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
flex-shrink: 0;
margin-top: 2px;
}

.mdh-comparison-col.mdh-old .mdh-comparison-item-icon {
background: rgba(139,129,120,0.15);
color: var(--mdh-warm-gray);
}

.mdh-comparison-col.mdh-new .mdh-comparison-item-icon {
background: rgba(232,169,64,0.2);
color: var(--mdh-amber);
}

.mdh-comparison-item-text {
font-size: 0.875rem;
line-height: 1.55;
}

.mdh-comparison-col.mdh-old .mdh-comparison-item-text { color: var(--mdh-text-secondary); }
.mdh-comparison-col.mdh-new .mdh-comparison-item-text { color: rgba(255,255,255,0.85); }

.mdh-comparison-divider {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.mdh-vs-badge {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--mdh-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.06em;
color: var(--mdh-white);
box-shadow: 0 8px 24px rgba(196,98,45,0.4);
z-index: 2;
}

.mdh-why-section {
padding: 8rem 0;
background: var(--mdh-bg-alt);
transition: background 0.4s;
}

.mdh-why-header {
text-align: center;
margin-bottom: 5rem;
}

.mdh-why-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
letter-spacing: -0.02em;
color: var(--mdh-text-primary);
margin-bottom: 1rem;
}

.mdh-why-header p {
font-size: 0.95rem;
color: var(--mdh-text-secondary);
max-width: 480px;
margin: 0 auto;
}

.mdh-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.mdh-why-card {
padding: 2.5rem 2rem;
background: var(--mdh-bg-card);
border-radius: 16px;
border: 1px solid var(--mdh-border);
transition: all 0.4s ease;
}

.mdh-why-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px var(--mdh-shadow);
border-color: var(--mdh-accent);
}

.mdh-why-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--mdh-tag-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 1.5rem;
color: var(--mdh-accent);
transition: all 0.3s;
}

.mdh-why-card:hover .mdh-why-icon {
background: var(--mdh-accent);
color: var(--mdh-white);
transform: scale(1.1);
}

.mdh-why-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--mdh-text-primary);
margin-bottom: 0.75rem;
}

.mdh-why-card p {
font-size: 0.85rem;
color: var(--mdh-text-secondary);
line-height: 1.7;
}

.mdh-comparison-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin-bottom: 20px;
  object-fit: cover;
}

/* .mdh-process {
padding: 9rem 0;
background: var(--mdh-charcoal);
position: relative;
overflow: hidden;
}

[data-mdh-theme="dark"] .mdh-process {
background: #0F0F0D;
}

.mdh-process-deco {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(196,98,45,0.12) 0%, transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(44,74,62,0.15) 0%, transparent 50%);
pointer-events: none;
}

.mdh-process-header {
text-align: center;
margin-bottom: 5rem;
}

.mdh-process-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
letter-spacing: -0.02em;
color: #F0EBE3;
margin-bottom: 1rem;
}

.mdh-process-header p {
font-size: 0.95rem;
color: rgba(240,235,227,0.55);
max-width: 480px;
margin: 0 auto;
}

.mdh-process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}

.mdh-process-steps::before {
content: '';
position: absolute;
top: 36px;
left: calc(12.5% + 36px);
right: calc(12.5% + 36px);
height: 1px;
background: linear-gradient(90deg, var(--mdh-terracotta), var(--mdh-amber), var(--mdh-forest-light), var(--mdh-terracotta));
z-index: 0;
}

.mdh-process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}

.mdh-process-num {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--mdh-charcoal-mid);
border: 1.5px solid rgba(240,235,227,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.75rem;
transition: all 0.4s;
position: relative;
}

.mdh-process-step:hover .mdh-process-num {
background: var(--mdh-accent);
border-color: var(--mdh-accent);
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(196,98,45,0.4);
}

.mdh-process-step h4 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: #F0EBE3;
margin-bottom: 0.6rem;
}

.mdh-process-step p {
font-size: 0.78rem;
color: rgba(240,235,227,0.5);
line-height: 1.65;
} */

.mdh-cta-section {
padding: 8rem 0;
background: var(--mdh-bg);
transition: background 0.4s;
}

.mdh-cta-inner {
background: linear-gradient(135deg, var(--mdh-forest) 0%, #1A3A2E 100%);
border-radius: 24px;
padding: 5rem 4rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 3rem;
position: relative;
overflow: hidden;
}

[data-mdh-theme="dark"] .mdh-cta-inner {
background: linear-gradient(135deg, #1C2B26 0%, #0F1F19 100%);
border: 1px solid rgba(232,169,64,0.1);
}

.mdh-cta-bg-deco {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at top right, rgba(232,169,64,0.15), transparent 50%),
radial-gradient(ellipse at bottom left, rgba(196,98,45,0.1), transparent 50%);
pointer-events: none;
}

.mdh-cta-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mdh-amber);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
}

.mdh-cta-label::before {
content: '';
width: 2rem;
height: 2px;
background: var(--mdh-amber);
display: block;
}

.mdh-cta-inner h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 900;
letter-spacing: -0.02em;
color: #F0EBE3;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}

.mdh-cta-inner p {
font-size: 0.95rem;
color: rgba(240,235,227,0.65);
max-width: 460px;
line-height: 1.7;
position: relative;
z-index: 1;
}

.mdh-cta-actions {
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
z-index: 1;
flex-shrink: 0;
}

.mdh-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--mdh-amber);
color: var(--mdh-charcoal);
padding: 1rem 2rem;
border-radius: 3px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--mdh-amber);
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
}

.mdh-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(232,169,64,0.4);
}

.mdh-cta-btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: transparent;
color: rgba(240,235,227,0.75);
padding: 1rem 2rem;
border-radius: 3px;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid rgba(240,235,227,0.2);
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
}

.mdh-cta-btn-ghost:hover {
border-color: rgba(240,235,227,0.5);
color: rgba(240,235,227,0.95);
}

.mdh-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}

.mdh-modal-overlay.mdh-open {
opacity: 1;
pointer-events: all;
}

.mdh-modal {
background: var(--mdh-bg-card);
border-radius: 20px;
max-width: 700px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
border: 1px solid var(--mdh-border);
box-shadow: 0 40px 100px rgba(0,0,0,0.4);
transform: translateY(20px) scale(0.97);
transition: transform 0.35s ease;
}

.mdh-modal-overlay.mdh-open .mdh-modal {
transform: translateY(0) scale(1);
}

.mdh-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 2rem 1.5rem;
border-bottom: 1px solid var(--mdh-border);
}

.mdh-modal-close {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid var(--mdh-border);
background: transparent;
cursor: pointer;
color: var(--mdh-text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: all 0.3s;
}

.mdh-modal-close:hover {
background: var(--mdh-bg-alt);
color: var(--mdh-text-primary);
transform: rotate(90deg);
}

.mdh-modal-body {
padding: 2rem;
}

.mdh-modal-img {
width: 100%;
height: 220px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 6rem;
margin-bottom: 2rem;
}

.mdh-modal-tag {
display: inline-block;
background: var(--mdh-tag-bg);
color: var(--mdh-tag-text);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.85rem;
border-radius: 50px;
margin-bottom: 1rem;
}

.mdh-modal-title {
font-family: 'Playfair Display', serif;
font-size: 1.75rem;
font-weight: 900;
color: var(--mdh-text-primary);
margin-bottom: 1rem;
}

.mdh-modal-desc {
font-size: 0.9rem;
color: var(--mdh-text-secondary);
line-height: 1.75;
margin-bottom: 2rem;
}

.mdh-modal-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}

.mdh-modal-detail {
padding: 1rem;
background: var(--mdh-bg-alt);
border-radius: 10px;
text-align: center;
}

.mdh-modal-detail-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mdh-text-secondary);
margin-bottom: 0.4rem;
}

.mdh-modal-detail-value {
font-weight: 700;
font-size: 0.9rem;
color: var(--mdh-text-primary);
}

.mdh-modal-footer {
padding: 1.5rem 2rem 2rem;
border-top: 1px solid var(--mdh-border);
display: flex;
gap: 1rem;
}

@media (max-width: 1100px) {
.mdh-products-grid {
grid-template-columns: repeat(2, 1fr);
}

.mdh-anatomy-inner {
grid-template-columns: 1fr;
gap: 4rem;
}

.mdh-tea-cup-wrap {
margin: 0 auto;
}

.mdh-why-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 900px) {
.mdh-hero-inner {
grid-template-columns: 1fr;
text-align: center;
}

.mdh-hero-desc { max-width: 100%; }
.mdh-hero-actions { justify-content: center; }
.mdh-hero-stats { justify-content: center; }
.mdh-hero-visual { display: none; }

.mdh-products-header {
grid-template-columns: 1fr;
text-align: center;
}

.mdh-comparison-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.mdh-comparison-divider {
padding: 0.5rem 0;
}

.mdh-process-steps {
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}

.mdh-process-steps::before { display: none; }

.mdh-cta-inner {
grid-template-columns: 1fr;
text-align: center;
padding: 3.5rem 2.5rem;
}

.mdh-cta-label { justify-content: center; }
.mdh-cta-actions { align-items: center; }
}

@media (max-width: 640px) {

.mdh-hero { min-height: 95vh; }

.mdh-products-grid {
grid-template-columns: 1fr;
}

.mdh-why-grid {
grid-template-columns: 1fr;
}

.mdh-process-steps {
grid-template-columns: 1fr;
}

.mdh-modal-details {
grid-template-columns: 1fr;
}

.mdh-modal-footer {
flex-direction: column;
}

.mdh-chip-1, .mdh-chip-2 { display: none; }
}

.mdh-view-all-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mdh-text-secondary);
text-decoration: none;
border: 1.5px solid var(--mdh-border);
padding: 0.6rem 1.5rem;
border-radius: 3px;
transition: all 0.3s;
white-space: nowrap;
background: transparent;
cursor: pointer;
}

.mdh-view-all-btn:hover {
color: var(--mdh-accent);
border-color: var(--mdh-accent);
}

.mdh-scroll-indicator {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
z-index: 5;
animation: mdh-bounce 2s ease-in-out infinite;
}

.mdh-scroll-indicator span {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mdh-text-secondary);
}

.mdh-scroll-indicator i {
color: var(--mdh-text-secondary);
font-size: 0.8rem;
}

@keyframes mdh-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}

.mdh-products-section-cta {
text-align: center;
margin-top: 3rem;
}

.mdh-section-label-centered {
justify-content: center;
}

.mdh-section-label-centered::before {
display: none;
}

.mdh-section-label-centered::after {
content: '';
width: 2rem;
height: 2px;
background: var(--mdh-accent);
display: block;
}