/* ==========================================================================
   Sein Ngar Lone — Public Site Stylesheet
   စိန်းငါလုံး တိုင်းရင်းဆေးတိုက်
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
    /* Primary palette — refined forest green */
    --color-primary: #185C3B;
    --color-primary-dark: #145032;
    --color-primary-light: #EEF3ED;

    /* Accent palette — sophisticated muted gold (Day Mode) */
    --color-accent: #C49A3A;
    --color-accent-dark: #B78D27;
    --color-accent-btn: #C99F2E;

    /* Brand decorative — icy blue */
    --color-brand: #A8DFFF;

    /* Neutral & surface */
    --color-bg: #F7F7F2;
    --color-surface: #FFFFFF;
    --color-text-primary: #173C2D;
    --color-text-secondary: #64756C;
    --color-border: #DDE5DE;
    --color-muted: #9E9E9E;

    /* Soft green surfaces */
    --color-soft-green: #EAF2EC;
    --color-icon-bg: #F1F6F2;

    /* Card heading & body hierarchy */
    --color-card-heading: #173C2D;
    --color-card-body: #64756C;
    --color-card-muted: #9E9E9E;
    --color-card-accent: #C49A3A;

    /* Feedback */
    --color-warning: #F59E0B;
    --color-warning-bg: #FFF7E8;
    --color-warning-text: #B45309;
    --color-success: #2E7D32;
    --color-error: #C62828;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Borders & shadows */
    --radius-sm: 6px;
    --radius-md: 12px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 200ms ease;

    /* Layout */
    --content-max-width: 1140px;

    /* Typography */
    --font-myanmar: 'Noto Sans Myanmar', 'Myanmar Sans Pro', 'Padauk', sans-serif;
    --font-latin: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
    --font-code: 'Fira Code', 'Consolas', 'Monaco', monospace;

    /* Theme transition */
    --theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --------------------------------------------------------------------------
    1b. Dark Mode Variables — Dark Forest / Emerald Night
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
    /* Primary palette — refined green accent */
    --color-primary: #5FAF87;
    --color-primary-dark: #4D9A74;
    --color-primary-light: #29483B;

    /* Accent palette — refined gold */
    --color-accent: #C9A44C;
    --color-accent-dark: #D4B35C;

    /* Brand decorative — icy blue */
    --color-brand: #A8DFFF;

    /* Neutral & surface — premium dark forest */
    --color-bg: #102A20;
    --color-surface: #1E332C;
    --color-text-primary: #F5F3EA;
    --color-text-secondary: #E7E5DC;
    --color-border: #3D5A4E;
    --color-muted: #AEB2A6;

    /* Card heading & body hierarchy */
    --color-card-heading: #F5F3EA;
    --color-card-body: #E7E5DC;
    --color-card-muted: #AEB2A6;
    --color-card-accent: #C9A44C;

    /* Feedback */
    --color-warning: #F59E0B;
    --color-warning-bg: rgba(245, 158, 11, 0.12);
    --color-warning-text: #D4B35C;
    --color-success: #5FAF87;
    --color-error: #f87171;

    /* Shadows — softer for dark mode */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   2. Base & Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    position: relative;
    font-family: var(--font-myanmar);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    background-image: url('../images/pattern-content.svg');
    background-size: 60px 60px;
    background-repeat: repeat;
    -webkit-font-smoothing: antialiased;
    transition: var(--theme-transition);
}

main {
    position: relative;
    z-index: 2;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast), var(--theme-transition);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    color: var(--color-text-primary);
    line-height: 1.4;
    letter-spacing: 0.015em;
}

h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

h2 {
    font-size: 1.75rem;
    font-weight: 700;
}

h3 {
    font-size: 1.375rem;
    font-weight: 600;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
}

p {
    margin-top: 0;
    margin-bottom: var(--space-md);
    line-height: 1.95;
}

small,
.text-sm {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Navigation Bar
   -------------------------------------------------------------------------- */

.navbar {
    background-color: #185C3B;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 64px;
    transition: var(--theme-transition);
}

[data-theme="dark"] .navbar {
    background-color: #0D1F16;
}

[data-theme="dark"] .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

@media (max-width: 991px) {
    [data-theme="dark"] .navbar-collapse {
        background-color: #0D1F16;
    }
}

.navbar-brand {
    color: #FFFFFF !important;
    font-size: 1.25rem;
    font-weight: 700;
    white-space: normal;
}

.navbar-brand:hover {
    color: #FFFFFF !important;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.navbar-nav .nav-link:hover {
    color: #FFFFFF;
}

.navbar-nav .nav-link.active {
    position: relative;
    color: #FFFFFF;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background-color: var(--color-accent);
    border-radius: 3px 3px 0 0;
}

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    min-width: 44px;
    min-height: 44px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #154F33;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        padding: var(--space-sm) 0;
    }

    .navbar-nav .nav-link.active::after {
        display: none;
    }
}

/* --- Theme Toggle --- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: 8px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
}

.theme-toggle:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.theme-toggle__icon {
    width: 18px;
    height: 18px;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Sun icon visible in dark mode (to switch back to light) */
.theme-toggle__icon--sun {
    display: none;
}

/* Moon icon visible in light mode (to switch to dark) */
.theme-toggle__icon--moon {
    display: block;
}

[data-theme="dark"] .theme-toggle__icon--sun {
    display: block;
}

[data-theme="dark"] .theme-toggle__icon--moon {
    display: none;
}

/* Mobile menu theme toggle */
@media (max-width: 991px) {
    .theme-toggle {
        margin-left: 0;
        margin-top: 4px;
    }

    .navbar-nav .nav-item:last-child .theme-toggle {
        margin-top: 8px;
    }
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */

.footer {
    position: relative;
    z-index: 2;
    background-color: #185C3B;
    background-image: url('../images/pattern-traditional.svg');
    background-size: 60px 60px;
    background-repeat: repeat;
    color: rgba(255, 255, 255, 0.85);
    padding: var(--space-2xl) 0 0;
    margin-top: 0;
    transition: var(--theme-transition);
}

[data-theme="dark"] .footer {
    background-color: #0D1F16;
}

.footer__heading {
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.footer__text {
    font-size: 0.875rem;
    line-height: 1.7;
}

.footer__text,
.footer__text a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.footer__text:hover,
.footer__text a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__links li {
    margin-bottom: var(--space-sm);
}

.footer__links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Contact row (phone, address) */
.footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: #FFFFFF;
}

.footer__contact-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    opacity: 0.9;
}

/* Social icons row */
.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-md);
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.footer__social-link svg {
    width: 28px;
    height: 28px;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
    transform: scale(1.08);
}

.footer__social-link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* Brand-tinted backgrounds — matching contact page icon wraps */
.footer__social-link--viber {
    background: rgba(123, 81, 156, 0.08);
}

.footer__social-link--viber:hover {
    background: rgba(123, 81, 156, 0.15);
}

.footer__social-link--telegram {
    background: rgba(42, 171, 238, 0.08);
}

.footer__social-link--telegram:hover {
    background: rgba(42, 171, 238, 0.15);
}

.footer__social-link--messenger {
    background: rgba(0, 132, 255, 0.08);
}

.footer__social-link--messenger:hover {
    background: rgba(0, 132, 255, 0.15);
}

.footer__social-link--facebook {
    background: rgba(24, 119, 242, 0.08);
}

.footer__social-link--facebook:hover {
    background: rgba(24, 119, 242, 0.15);
}

/* Shared social icons (footer + contact) are fill-based — never stroke them */
.social-icon,
.social-icon * {
    stroke: none;
}

/* Official manufacturer (တရားဝင်ထုတ်လုပ်သူ) */
.footer__manufacturer {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__manufacturer-heading {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.footer__manufacturer-value {
    display: block;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.footer__bottom {
    margin-top: var(--space-xl);
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    background-color: #185C3B;
    transition: var(--theme-transition);
}

[data-theme="dark"] .footer__bottom {
    background-color: #0A1812;
}

@media (max-width: 767px) {
    .footer__social {
        justify-content: flex-start;
    }

    .footer__bottom {
        font-size: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   6. Utility Classes
   -------------------------------------------------------------------------- */

.container {
    max-width: var(--content-max-width);
}

.section {
    padding: var(--space-2xl) 0;
    background-image: url('../images/pattern-content.svg');
    background-size: 60px 60px;
    background-repeat: repeat;
    transition: var(--theme-transition);
}

.section--contact {
    padding: var(--space-lg) 0 calc(var(--space-xl) * 1.5);
    background-color: #E8F0E7;
    background-image: url('../images/pattern-content.svg');
    background-size: 60px 60px;
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

[data-theme="dark"] .section--contact {
    background-color: #102A20;
}

/* Corner vine decorations */
.corner-vine {
    position: absolute;
    width: 300px;
    height: 300px;
    background-image: url('../images/corner-vine-tl.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
}

.corner-vine--tl {
    top: 0;
    left: 0;
}

.corner-vine--tr {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

.corner-vine--bl {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}

.corner-vine--br {
    bottom: 0;
    right: 0;
    transform: scale(-1, -1);
}

.section--contact > .container {
    position: relative;
    z-index: 2;
}

/* Contact page side vine decorations — tall cascading vines along left & right margins */
.contact-side-vine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 140px;
    background-size: auto 100%;
    background-repeat: repeat-y;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
}

.contact-side-vine--left {
    left: 0;
    background-image: url('../images/contact-botanical-left.svg');
    background-position: left top;
}

.contact-side-vine--right {
    right: 0;
    background-image: url('../images/contact-botanical-right.svg');
    background-position: right top;
}

/* Side vine decorations (left & right margins — fixed to viewport, layered depth) */
.side-vine {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 80px;
    background-size: auto 400px;
    background-repeat: repeat-y;
    pointer-events: none;
    z-index: 0;
    opacity: 0.50;
}

.side-vine--left {
    left: 0;
    background-image: url('../images/side-vine-left.svg');
    background-position: left top;
}

.side-vine--right {
    right: 0;
    background-image: url('../images/side-vine-right.svg');
    background-position: right top;
}

/* Inner vine layer — delicate secondary decoration for depth */
.side-vine-inner {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 60px;
    background-size: auto 400px;
    background-repeat: repeat-y;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.side-vine-inner--left {
    left: 60px;
    background-image: url('../images/side-vine-left-inner.svg');
    background-position: left top;
}

.side-vine-inner--right {
    right: 60px;
    background-image: url('../images/side-vine-right-inner.svg');
    background-position: right top;
}

.bg-primary-light {
    background-color: var(--color-primary-light);
    background-image: url('../images/pattern-content.svg');
    background-size: 60px 60px;
    background-repeat: repeat;
    transition: var(--theme-transition);
}

.text-muted {
    color: var(--color-muted) !important;
}

/* --------------------------------------------------------------------------
   7. Accessibility
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid rgba(24, 92, 59, 0.5);
    outline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   8. Components
   -------------------------------------------------------------------------- */

/* --- Filter Bar --- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767px) {
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(180, 200, 185, 0.5);
    background-color: #FDFCF8;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms ease, var(--theme-transition);
    white-space: nowrap;
    text-decoration: none;
    min-height: 40px;
    letter-spacing: 0.01em;
}

[data-theme="dark"] .filter-btn {
    background-color: rgba(30, 51, 44, 0.7);
    border-color: rgba(120, 180, 150, 0.2);
    color: #C8C9BE;
}

[data-theme="dark"] .filter-btn:hover {
    background-color: rgba(95, 175, 135, 0.1);
    border-color: rgba(95, 175, 135, 0.35);
    color: #5FAF87;
    box-shadow: 0 2px 8px rgba(95, 175, 135, 0.1);
}

.filter-btn:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(24, 92, 59, 0.1);
}

.filter-btn--active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(24, 92, 59, 0.25);
}

[data-theme="dark"] .filter-btn--active {
    background-color: rgba(95, 175, 135, 0.2);
    border-color: rgba(95, 175, 135, 0.5);
    color: #5FAF87;
    box-shadow: 0 2px 8px rgba(95, 175, 135, 0.15);
}

.filter-btn--active:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 92, 59, 0.3);
}

[data-theme="dark"] .filter-btn--active:hover {
    background-color: rgba(95, 175, 135, 0.28);
    border-color: rgba(95, 175, 135, 0.6);
    color: #5FAF87;
}

/* --- Medicine Count --- */

.medicine-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #5A7A6A;
    background: #EFF5F1;
    border: 1px solid rgba(70, 95, 75, 0.12);
    border-radius: 100px;
    padding: 6px 16px;
    margin: var(--space-sm) auto var(--space-md);
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.01em;
}

.medicine-count__found {
    font-weight: 600;
    color: #2D5A42;
}

.medicine-count__sep {
    color: #94A89E;
    font-weight: 300;
    margin: 0 2px;
    user-select: none;
}

.medicine-count__total {
    color: #4A7A62;
    font-weight: 400;
}

[data-theme="dark"] .medicine-count {
    background: rgba(95, 175, 135, 0.08);
    border-color: rgba(95, 175, 135, 0.18);
    color: #8A9E92;
}

[data-theme="dark"] .medicine-count__found {
    color: #E7E5DC;
}

[data-theme="dark"] .medicine-count__sep {
    color: #5A7E6A;
}

[data-theme="dark"] .medicine-count__total {
    color: #AEB2A6;
}

/* --- Search Bar --- */

.search-wrapper {
    position: relative;
    max-width: 500px;
    width: 100%;
}

.search-input {
    width: 100%;
    height: 50px;
    padding: 0 48px 0 44px;
    border: 1px solid rgba(180, 200, 185, 0.5);
    border-radius: 50px;
    font-size: 1rem;
    font-family: inherit;
    background-color: #FDFCF8;
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(24, 92, 59, 0.03);
    letter-spacing: 0.01em;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), var(--theme-transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(24, 92, 59, 0.15);
}

[data-theme="dark"] .search-input {
    background-color: rgba(30, 51, 44, 0.92);
    border-color: rgba(120, 180, 150, 0.25);
    box-shadow: 0 0 18px rgba(50, 180, 120, 0.08);
}

[data-theme="dark"] .search-input:hover {
    border-color: rgba(120, 200, 160, 0.38);
    box-shadow: 0 0 22px rgba(50, 180, 120, 0.12);
}

[data-theme="dark"] .search-input:focus {
    border-color: rgba(80, 180, 130, 0.5);
    box-shadow:
        0 0 0 2px rgba(80, 180, 130, 0.12),
        0 0 24px rgba(50, 180, 120, 0.14);
}

.search-input::placeholder {
    color: var(--color-muted);
}

[data-theme="dark"] .search-input::placeholder {
    color: #AEB2A6;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
    width: 20px;
    height: 20px;
}

[data-theme="dark"] .search-icon {
    color: #E7E5DC;
}

.search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: color var(--transition-fast);
}

.search-clear:hover {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .search-clear {
    color: #AEB2A6;
}

[data-theme="dark"] .search-clear:hover {
    color: #E7E5DC;
}

/* --- Medicine Section --- */

.medicine-section {
    background-color: var(--color-primary-light);
    background-image: url('../images/pattern-medicine-section.svg');
    background-size: 80px 80px;
    background-repeat: repeat;
    position: relative;
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-section {
    background-color: rgba(95, 175, 135, 0.08);
}

.medicine-section__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.medicine-section__diamond {
    color: var(--color-accent);
    font-size: 0.625rem;
    opacity: 0.7;
    line-height: 1;
}

.medicine-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    letter-spacing: 0.02em;
}

.medicine-section__accent-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    margin: 0 auto var(--space-md);
    border-radius: 1px;
}

/* --- Medicine Card --- */

.medicine-card {
    background-color: #FDFCF8;
    border: 1px solid rgba(180, 200, 185, 0.45);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(24, 92, 59, 0.04), 0 2px 8px rgba(24, 92, 59, 0.03);
    overflow: hidden;
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, var(--theme-transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

[data-theme="dark"] .medicine-card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.medicine-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(24, 92, 59, 0.08), 0 2px 6px rgba(24, 92, 59, 0.04);
    border-color: rgba(180, 200, 185, 0.7);
}

[data-theme="dark"] .medicine-card:hover {
    border-color: rgba(95, 175, 135, 0.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Corner ornaments */
.medicine-card__corner {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 3;
    pointer-events: none;
}

.medicine-card__corner::before,
.medicine-card__corner::after {
    content: '';
    position: absolute;
    background-color: var(--color-accent);
    opacity: 0.25;
}

.medicine-card__corner--tl {
    top: 6px;
    left: 6px;
}

.medicine-card__corner--tl::before {
    top: 0;
    left: 0;
    width: 12px;
    height: 1.5px;
}

.medicine-card__corner--tl::after {
    top: 0;
    left: 0;
    width: 1.5px;
    height: 12px;
}

.medicine-card__corner--tr {
    top: 6px;
    right: 6px;
}

.medicine-card__corner--tr::before {
    top: 0;
    right: 0;
    width: 12px;
    height: 1.5px;
}

.medicine-card__corner--tr::after {
    top: 0;
    right: 0;
    width: 1.5px;
    height: 12px;
}

.medicine-card__corner--bl {
    bottom: 6px;
    left: 6px;
}

.medicine-card__corner--bl::before {
    bottom: 0;
    left: 0;
    width: 12px;
    height: 1.5px;
}

.medicine-card__corner--bl::after {
    bottom: 0;
    left: 0;
    width: 1.5px;
    height: 12px;
}

.medicine-card__corner--br {
    bottom: 6px;
    right: 6px;
}

.medicine-card__corner--br::before {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 1.5px;
}

.medicine-card__corner--br::after {
    bottom: 0;
    right: 0;
    width: 1.5px;
    height: 12px;
}

.medicine-card__image-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(145deg, #F1F6F2 0%, #EAF2EC 50%, #F7FAF6 100%);
    border-bottom: 1px solid rgba(221, 229, 222, 0.6);
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-card__image-wrapper {
    background: linear-gradient(145deg, #1E332C 0%, #1E332C 50%, #1E332C 100%);
    border-bottom-color: var(--color-border);
}

.medicine-card__image-wrapper--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.medicine-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #246B4A;
    opacity: 0.2;
}

.medicine-card__placeholder-icon {
    width: 48px;
    height: 48px;
}

.medicine-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.medicine-card:hover .medicine-card__image {
    transform: scale(1.04);
}

.medicine-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(24, 92, 59, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.02em;
    border: 1px solid rgba(196, 154, 58, 0.15);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

[data-theme="dark"] .medicine-card__badge {
    background: #29483B;
    border-color: rgba(255, 255, 255, 0.08);
    color: #F5F3EA;
}

[data-theme="dark"] .medicine-card:hover .medicine-card__badge {
    background: #29483B;
    border-color: rgba(255, 255, 255, 0.12);
    color: #F5F3EA;
}

.medicine-card__body {
    padding: var(--space-lg) var(--space-lg) var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.medicine-card__title {
    font-size: 1.1875rem;
    font-weight: 700;
    color: #173C2D;
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: 0.015em;
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-card__title {
    color: var(--color-text-primary);
}

.medicine-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #5A6E62;
    font-size: 0.9375rem;
    line-height: 1.85;
    margin-bottom: var(--space-md);
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-card__description {
    color: var(--color-text-secondary);
}

.medicine-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #246B4A;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.875rem;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(221, 229, 222, 0.6);
    transition: gap 250ms ease, color 250ms ease, var(--theme-transition);
}

[data-theme="dark"] .medicine-card__link {
    color: var(--color-primary);
    border-top-color: var(--color-border);
}

.medicine-card__link:hover {
    gap: 8px;
    color: #185C3B;
    text-decoration: none;
}

[data-theme="dark"] .medicine-card__link:hover {
    color: var(--color-primary-dark);
}

/* --- Info Panel (Middle Section) --- */

.info-panel {
    position: relative;
    max-width: 1100px;
    width: calc(100% - 40px);
    margin: 0 auto;
    background-color: #FFFFFF;
    border: 1px solid rgba(196, 154, 58, 0.30);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.02);
    padding: 48px 60px;
    transition: var(--theme-transition);
}

[data-theme="dark"] .info-panel {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Corner ornaments */
.info-panel__corner {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 1;
    pointer-events: none;
}

.info-panel__corner::before,
.info-panel__corner::after {
    content: '';
    position: absolute;
    background-color: var(--color-accent);
    opacity: 0.4;
}

.info-panel__corner--tl {
    top: 10px;
    left: 10px;
}

.info-panel__corner--tl::before {
    top: 0;
    left: 0;
    width: 20px;
    height: 1.5px;
}

.info-panel__corner--tl::after {
    top: 0;
    left: 0;
    width: 1.5px;
    height: 20px;
}

.info-panel__corner--tr {
    top: 10px;
    right: 10px;
}

.info-panel__corner--tr::before {
    top: 0;
    right: 0;
    width: 20px;
    height: 1.5px;
}

.info-panel__corner--tr::after {
    top: 0;
    right: 0;
    width: 1.5px;
    height: 20px;
}

.info-panel__corner--bl {
    bottom: 10px;
    left: 10px;
}

.info-panel__corner--bl::before {
    bottom: 0;
    left: 0;
    width: 20px;
    height: 1.5px;
}

.info-panel__corner--bl::after {
    bottom: 0;
    left: 0;
    width: 1.5px;
    height: 20px;
}

.info-panel__corner--br {
    bottom: 10px;
    right: 10px;
}

.info-panel__corner--br::before {
    bottom: 0;
    right: 0;
    width: 20px;
    height: 1.5px;
}

.info-panel__corner--br::after {
    bottom: 0;
    right: 0;
    width: 1.5px;
    height: 20px;
}

/* Top and bottom ornament */
.info-panel__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--color-accent);
    opacity: 0.55;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    user-select: none;
}

.info-panel__ornament--bottom {
    margin-bottom: 0;
    margin-top: 28px;
}

.info-panel__ornament-line {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.info-panel__ornament-diamond {
    font-size: 0.625rem;
    line-height: 1;
}

/* Information rows */
.info-panel__row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 0;
}

.info-panel__row + .info-panel__row {
    border-top: 1px solid rgba(196, 154, 58, 0.10);
}

.info-panel__row-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    color: var(--color-accent);
    opacity: 0.6;
}

.info-panel__row-icon svg {
    width: 100%;
    height: 100%;
}

.info-panel__row-text {
    flex: 1;
    font-size: 1.0625rem;
    line-height: 1.95;
    color: #173C2D;
    text-align: left;
    margin: 0;
    transition: var(--theme-transition);
}

[data-theme="dark"] .info-panel__row-text {
    color: var(--color-text-primary);
}

/* --- Category Card --- */

.category-card {
    display: block;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), var(--theme-transition);
    height: 100%;
}

.category-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
    color: var(--color-text-primary);
}

.category-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.category-card__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    margin-bottom: var(--space-sm);
}

.category-card__desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.category-card__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
}

/* --- Category Card — Dark Mode --- */

[data-theme="dark"] .category-card {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .category-card:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(212, 167, 44, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

[data-theme="dark"] .category-card__title {
    color: var(--color-primary);
    position: relative;
    padding-left: 14px;
}

[data-theme="dark"] .category-card__title::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5rem;
    color: var(--color-accent);
    opacity: 0.7;
}

[data-theme="dark"] .category-card:hover .category-card__title::before {
    opacity: 1;
}

[data-theme="dark"] .category-card__count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: #C8C9BE;
}

[data-theme="dark"] .category-card:hover .category-card__count {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #E7E5DC;
}

[data-theme="dark"] .category-card__desc {
    color: #AEB2A6;
}

[data-theme="dark"] .category-card:hover .category-card__desc {
    color: #C8C9BE;
}

[data-theme="dark"] .category-card__link {
    color: var(--color-accent);
    font-weight: 600;
}

[data-theme="dark"] .category-card:hover .category-card__link {
    color: var(--color-accent-dark);
}

/* --- Hero --- */

.hero {
    background:
        url('../images/pattern-traditional.svg') repeat 0 0 / 60px 60px,
        linear-gradient(180deg, #185C3B 0%, #145032 40%, #0d2e18 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-md) var(--space-3xl);
    color: #FFFFFF;
    position: relative;
    transition: var(--theme-transition);
}

[data-theme="dark"] .hero {
    background:
        url('../images/pattern-traditional.svg') repeat 0 0 / 60px 60px,
        linear-gradient(180deg, #0D1F16 0%, #102A20 40%, #0A1812 100%);
}

.hero__diamond {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xl);
    animation: heroFadeIn 0.8s ease both;
    filter: drop-shadow(0 0 12px rgba(168, 223, 255, 0.35)) drop-shadow(0 0 28px rgba(168, 223, 255, 0.15));
}

.hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
    color: #FFFFFF;
    letter-spacing: 0.02em;
    animation: heroFadeIn 0.8s ease 0.1s both;
}

.hero__subtitle {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.85;
    margin-bottom: var(--space-xl);
    color: rgba(255, 255, 255, 0.75);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.015em;
    animation: heroFadeIn 0.8s ease 0.2s both;
}

.hero__search {
    display: flex;
    align-items: center;
    max-width: 480px;
    width: 100%;
    margin: 0 auto var(--space-lg);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    animation: heroFadeIn 0.8s ease 0.3s both;
}

.hero__search:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.16);
}

.hero__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px 0 16px;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.hero__search-input {
    flex: 1;
    height: 50px;
    padding: 0;
    border: none;
    background: transparent;
    color: #FFFFFF;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

.hero__search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.hero__search-btn {
    flex-shrink: 0;
    height: 50px;
    padding: 0 26px;
    border: none;
    background: var(--color-accent-btn);
    color: #173C2D;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.hero__search-btn:hover {
    background: var(--color-accent-dark);
}

.hero__cta {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 14px 36px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform var(--transition-fast), box-shadow var(--transition-fast);
    animation: heroFadeIn 0.8s ease 0.4s both;
}

.hero__cta:hover {
    transform: translateY(-1px);
    background: var(--color-accent);
    color: #173C2D;
    border-color: var(--color-accent);
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.3;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 22px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast), var(--theme-transition);
    text-decoration: none;
    min-height: 44px;
    min-width: 44px;
}

.btn:focus-visible {
    outline: 3px solid rgba(24, 92, 59, 0.4);
    outline-offset: 2px;
}

.btn--primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    color: #FFFFFF;
}

.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

[data-theme="dark"] .btn--outline {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

[data-theme="dark"] .btn--outline:hover {
    background-color: var(--color-accent);
    color: #173C2D;
    border-color: var(--color-accent);
}

.btn--accent {
    background-color: var(--color-accent-btn);
    color: #173C2D;
}

.btn--accent:hover {
    background-color: var(--color-accent-dark);
    color: #173C2D;
}

.btn--lg {
    padding: 14px 32px;
    font-size: 1.0625rem;
    border-radius: var(--radius-md);
}

/* --- Warning Box --- */

.warning-box {
    display: flex;
    gap: 14px;
    background-color: #FFFBF2;
    border-left: 3px solid #C49A3A;
    border-radius: 14px;
    padding: 22px 26px;
    transition: var(--theme-transition);
}

[data-theme="dark"] .warning-box {
    background-color: rgba(196, 154, 58, 0.08);
    border-left-color: #C9A44C;
}

.warning-box__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #C49A3A;
    font-size: 1.25rem;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.warning-box__heading {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-card-heading);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.015em;
}

[data-theme="dark"] .warning-box__heading {
    color: #D4B35C;
}

.warning-box__text {
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
}

/* --- Medicine Detail Page --- */

.medicine-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    margin-bottom: var(--space-xl);
    transition: color var(--transition-fast);
}

.medicine-detail__back:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.medicine-detail__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: start;
}

.medicine-detail__image-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 16px rgba(24, 92, 59, 0.04);
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-detail__image-wrap {
    background: var(--color-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.medicine-detail__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 16px;
}

.medicine-detail__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-card-heading);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-detail__title {
    color: var(--color-card-heading);
}

.medicine-detail__category {
    display: inline-block;
    padding: 5px 16px;
    background: rgba(196, 154, 58, 0.1);
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 50px;
    margin-bottom: var(--space-lg);
    border: 1px solid rgba(196, 154, 58, 0.25);
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-detail__category {
    background: rgba(212, 167, 44, 0.1);
    color: var(--color-accent);
    border-color: rgba(212, 167, 44, 0.25);
}

.medicine-detail__summary {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

/* --- Info Cards (Detail Sections) --- */

.medicine-detail-info {
    padding-top: var(--space-xl);
}

.info-cards-section {
    margin-top: 0;
}

.section-heading {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-card-heading);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: 0.015em;
    position: relative;
    transition: var(--theme-transition);
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-card-accent), transparent);
    border-radius: 1px;
}

.info-card {
    background: #FDFCF8;
    border: 1px solid rgba(180, 200, 185, 0.4);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: var(--space-md);
    box-shadow: 0 1px 4px rgba(24, 92, 59, 0.03), 0 2px 8px rgba(24, 92, 59, 0.02);
    transition: box-shadow var(--transition-fast), var(--theme-transition);
}

.info-card:hover {
    box-shadow: 0 4px 16px rgba(24, 92, 59, 0.06);
}

.info-card__heading {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-card-heading);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.015em;
}

.info-card__heading::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--color-card-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.info-card__body {
    font-size: 0.9375rem;
    line-height: 1.95;
    color: var(--color-card-body);
    letter-spacing: 0.01em;
}

/* --- Registration Number (per-medicine) --- */

.medicine-detail__reg {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-top: var(--space-md);
    padding: 14px 24px;
    background: rgba(196, 154, 58, 0.06);
    border: 1px solid rgba(196, 154, 58, 0.15);
    border-radius: 10px;
    transition: var(--theme-transition);
}

[data-theme="dark"] .medicine-detail__reg {
    background: rgba(212, 167, 44, 0.06);
    border-color: rgba(212, 167, 44, 0.15);
}

.medicine-detail__reg-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-card-heading);
}

.medicine-detail__reg-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    letter-spacing: 0.02em;
}

[data-theme="dark"] .medicine-detail__reg-value {
    color: var(--color-accent);
}

/* --- Related Category CTA --- */

.medicine-detail__cta {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.medicine-detail__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: rgba(196, 154, 58, 0.08);
    border: 1px solid rgba(196, 154, 58, 0.2);
    border-radius: 8px;
    color: var(--color-accent-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

[data-theme="dark"] .medicine-detail__cta-link {
    background: rgba(212, 167, 44, 0.06);
    border-color: rgba(212, 167, 44, 0.18);
    color: var(--color-accent);
}

.medicine-detail__cta-link:hover {
    background: rgba(196, 154, 58, 0.14);
    border-color: rgba(196, 154, 58, 0.35);
    color: var(--color-accent-dark);
    text-decoration: none;
}

[data-theme="dark"] .medicine-detail__cta-link:hover {
    background: rgba(212, 167, 44, 0.1);
    border-color: rgba(212, 167, 44, 0.35);
    color: var(--color-accent-dark);
}

.medicine-detail__cta-arrow {
    transition: transform 200ms ease;
}

.medicine-detail__cta-link:hover .medicine-detail__cta-arrow {
    transform: translateX(3px);
}

/* --- Badge --- */

.badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 50px;
    white-space: nowrap;
}

/* --- Form --- */

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.form-label__required {
    color: var(--color-error);
    margin-left: 2px;
}

.form-control {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), var(--theme-transition);
}

textarea.form-control {
    height: auto;
    min-height: 140px;
    padding: 14px;
    resize: vertical;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(24, 92, 59, 0.15);
}

[data-theme="dark"] .form-control:focus {
    box-shadow: 0 0 0 3px rgba(95, 175, 135, 0.2);
}

.form-control::placeholder {
    color: var(--color-muted);
}

.form-control.is-invalid {
    border-color: var(--color-error);
    background-color: #FFF5F5;
}

.form-error {
    color: var(--color-error);
    font-size: 0.8125rem;
    margin-top: 4px;
}

.flash-message {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
}

.flash-message--error {
    background-color: #FFEBEE;
    border-left: 4px solid var(--color-error);
    color: var(--color-error);
}

/* --- Map --- */

/* --- Empty State --- */

.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--color-text-secondary);
}

.empty-state__icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.empty-state__text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.empty-state__subtext {
    font-size: 0.9375rem;
    color: var(--color-muted);
    margin-bottom: var(--space-lg);
}

/* --- Contact Page --- */

.contact-section-header {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding-top: var(--space-md);
}

.contact-section-header__desc {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Pharmacy section intro — two-field display */
.contact-pharmacy-intro {
    max-width: 560px;
    margin: 0 auto var(--space-lg);
    text-align: center;
    position: relative;
    z-index: 1;
}

.contact-pharmacy-intro__primary {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #173C2D;
    line-height: 1.7;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contact-pharmacy-intro__secondary {
    font-size: 0.875rem;
    color: #64756C;
    line-height: 1.7;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- Contact Info Card Grid (2x2) --- */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 920px;
    margin: 0 auto;
}

.contact-grid__col {
    display: flex;
    flex-direction: column;
}

/* --- Contact Cards (Social Links) --- */

.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #DDE5DE;
    text-decoration: none;
    color: #173C2D;
    transition: all 200ms ease-out, var(--theme-transition);
    box-shadow: 0 4px 20px rgba(22, 74, 58, 0.07);
}

[data-theme="dark"] .contact-card {
    background: #1E332C;
    border: 1px solid #3D5A4E;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(22, 74, 58, 0.12);
    border-color: transparent;
    text-decoration: none;
    color: #173C2D;
}

[data-theme="dark"] .contact-card:hover {
    border-color: #5FAF87;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.contact-card__icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card__icon-wrap--viber {
    background: rgba(123, 81, 156, 0.08);
}

.contact-card--viber:hover .contact-card__icon-wrap--viber {
    background: rgba(123, 81, 156, 0.15);
}

.contact-card__icon-wrap--telegram {
    background: rgba(42, 171, 238, 0.08);
}

.contact-card--telegram:hover .contact-card__icon-wrap--telegram {
    background: rgba(42, 171, 238, 0.15);
}

.contact-card__icon-wrap--messenger {
    background: rgba(0, 132, 255, 0.08);
}

.contact-card--messenger:hover .contact-card__icon-wrap--messenger {
    background: rgba(0, 132, 255, 0.15);
}

.contact-card__body {
    flex: 1;
    min-width: 0;
    color: #173C2D;
}

.contact-card__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #173C2D;
    margin-bottom: 2px;
}

.contact-card__desc {
    display: block;
    font-size: 0.8125rem;
    color: #64756C;
}

.contact-card__arrow {
    flex-shrink: 0;
    color: #9E9E9E;
    transition: transform 200ms ease, color 200ms ease;
}

.contact-card:hover .contact-card__arrow {
    transform: translateX(3px);
    color: #246B4A;
}

[data-theme="dark"] .contact-card {
    color: #E7E5DC;
}

[data-theme="dark"] .contact-card:hover {
    color: #E7E5DC;
}

[data-theme="dark"] .contact-card__body {
    color: #E7E5DC;
}

[data-theme="dark"] .contact-card__name {
    color: #F5F3EA;
}

[data-theme="dark"] .contact-card__desc {
    color: #C8C9BE;
}

[data-theme="dark"] .contact-card__arrow {
    color: #AEB2A6;
}

[data-theme="dark"] .contact-card:hover .contact-card__arrow {
    color: #F5F3EA;
}

/* --- Contact Info Card (Address & Details) --- */

.contact-info-card {
    background: #FFFFFF;
    border: 1px solid #DDE5DE;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(22, 74, 58, 0.07);
    transition: var(--theme-transition);
}

[data-theme="dark"] .contact-info-card {
    background: #1E332C;
    border: 1px solid #3D5A4E;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 200ms ease-out, var(--theme-transition);
}

[data-theme="dark"] .contact-info-card:hover {
    border-color: #5FAF87;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .contact-info-card__header {
    background: #29483B;
    border-bottom: 1px solid #3D5A4E;
    color: #F5F3EA;
}

[data-theme="dark"] .contact-info-card__header-icon {
    background: rgba(95, 175, 135, 0.15);
    color: #F5F3EA;
}

[data-theme="dark"] .contact-info-card__header-text {
    color: #F5F3EA;
}

[data-theme="dark"] .contact-info-row {
    border-bottom-color: #3D5A4E;
}

[data-theme="dark"] .contact-info-row__icon-wrap {
    background: rgba(95, 175, 135, 0.10);
    color: #6DBF96;
}

[data-theme="dark"] .contact-info-row__icon-wrap--address {
    background: rgba(210, 120, 100, 0.10);
    color: #E09580;
}

[data-theme="dark"] .contact-info-row__icon-wrap--address svg {
    stroke: #E09580;
}

[data-theme="dark"] .contact-info-row__icon-wrap--phone {
    background: rgba(30, 160, 135, 0.10);
    color: #4CC4A8;
}

[data-theme="dark"] .contact-info-row__icon-wrap--phone svg {
    stroke: #4CC4A8;
}

[data-theme="dark"] .contact-info-row__icon-wrap--facebook {
    background: rgba(74, 154, 245, 0.10);
    color: #6AAFF7;
}

[data-theme="dark"] .contact-info-row__icon-wrap--facebook svg {
    stroke: #6AAFF7;
}

[data-theme="dark"] .contact-info-row__icon-wrap--email {
    background: rgba(95, 175, 135, 0.10);
    color: #6DBF96;
}

[data-theme="dark"] .contact-info-row__icon-wrap--email svg {
    stroke: #6DBF96;
}

[data-theme="dark"] .contact-info-row__label {
    color: #AEB2A6;
}

[data-theme="dark"] .contact-info-row__value {
    color: #E7E5DC;
}

[data-theme="dark"] .contact-info-row__value--link {
    color: #F5F3EA;
}

[data-theme="dark"] .contact-info-row__value--link:hover {
    color: #5FAF87;
}

[data-theme="dark"] .contact-pharmacy-intro__primary {
    color: #F5F3EA;
}

.contact-info-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #185C3B;
    color: #FFFFFF;
    border-radius: 12px 12px 0 0;
}

.contact-info-card__header-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.contact-info-card__header-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #FFFFFF;
}

.contact-info-card__body {
    padding: 4px 0;
}

.contact-info-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 14px 20px;
    border-bottom: 1px solid #EEF3ED;
}

.contact-info-row:last-child {
    border-bottom: none;
}

.contact-info-row__icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(36, 107, 74, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2D6B50;
    transition: background 200ms ease;
}

.contact-info-row:hover .contact-info-row__icon-wrap {
    background: rgba(36, 107, 74, 0.13);
}

.contact-info-row__icon-wrap--address {
    background: rgba(180, 95, 75, 0.07);
    color: #B06048;
}

.contact-info-row__icon-wrap--address svg {
    stroke: #B06048;
}

.contact-info-row:hover .contact-info-row__icon-wrap--address {
    background: rgba(180, 95, 75, 0.13);
}

.contact-info-row__icon-wrap--phone {
    background: rgba(30, 120, 100, 0.07);
    color: #1E7864;
}

.contact-info-row__icon-wrap--phone svg {
    stroke: #1E7864;
}

.contact-info-row:hover .contact-info-row__icon-wrap--phone {
    background: rgba(30, 120, 100, 0.13);
}

.contact-info-row__icon-wrap--facebook {
    background: rgba(24, 119, 242, 0.07);
    color: #1877F2;
}

.contact-info-row__icon-wrap--facebook svg {
    stroke: #1877F2;
}

.contact-info-row:hover .contact-info-row__icon-wrap--facebook {
    background: rgba(24, 119, 242, 0.13);
}

.contact-info-row__icon-wrap--email {
    background: rgba(36, 107, 74, 0.07);
    color: #2D6B50;
}

.contact-info-row__icon-wrap--email svg {
    stroke: #2D6B50;
}

.contact-info-row:hover .contact-info-row__icon-wrap--email {
    background: rgba(36, 107, 74, 0.13);
}

.contact-info-row__content {
    flex: 1;
    min-width: 0;
}

.contact-info-row__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64756C;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.contact-info-row__value {
    display: block;
    font-size: 0.875rem;
    color: #173C2D;
    line-height: 1.5;
}

.contact-info-row__value--link {
    color: #246B4A;
    text-decoration: none;
    font-weight: 500;
    transition: color 200ms ease;
}

.contact-info-row__value--link:hover {
    color: #173C2D;
    text-decoration: underline;
}

/* --- Contact Map --- */

.contact-map {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(22, 74, 58, 0.07);
    margin-top: 16px;
    border: 1px solid #DDE5DE;
    position: relative;
}

.contact-map iframe {
    width: 100%;
    height: 280px;
    border: 0;
    display: block;
}

.contact-map__btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #185C3B;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    z-index: 2;
    line-height: 1;
}

.contact-map__btn:hover {
    background: #145032;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    color: #FFFFFF;
    text-decoration: none;
}

.contact-map__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.contact-map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #FFFFFF;
    border: 1px solid #DDE5DE;
    border-radius: 12px;
    margin-top: 16px;
    text-align: center;
    transition: var(--theme-transition);
}

[data-theme="dark"] .contact-map-empty {
    background: #1E332C;
    border-color: #3D5A4E;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .contact-map {
    border-color: #3D5A4E;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .contact-map__btn {
    background: #29483B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .contact-map__btn:hover {
    background: #3D5A4E;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.contact-map-empty__icon {
    color: #246B4A;
    opacity: 0.35;
    margin-bottom: 10px;
}

.contact-map-empty__text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #173C2D;
    margin-bottom: 4px;
}

.contact-map-empty__subtext {
    font-size: 0.8125rem;
    color: #9E9E9E;
}

/* --- Contact CTA Button --- */

.contact-cta {
    text-align: center;
    margin-top: var(--space-lg);
}

.contact-cta .btn--accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 8px;
    background-color: #C99F2E;
    color: #173C2D;
    transition: all 200ms ease-out;
}

.contact-cta .btn--accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(196, 154, 58, 0.3);
    background-color: #B78D27;
    color: #173C2D;
}

/* --- Pharmacy Notice (Contact Page) --- */

.pharmacy-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 800px;
    margin: var(--space-lg) auto 0;
    padding: 16px 20px;
    background-color: var(--color-soft-green);
    border: 1px solid rgba(24, 92, 59, 0.12);
    border-left: 3px solid rgba(24, 92, 59, 0.30);
    border-radius: var(--radius-sm);
    transition: var(--theme-transition);
}

[data-theme="dark"] .pharmacy-notice {
    background-color: rgba(95, 175, 135, 0.06);
    border-color: rgba(95, 175, 135, 0.16);
    border-left-color: rgba(95, 175, 135, 0.38);
}

.pharmacy-notice__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(24, 92, 59, 0.08);
    transition: background 200ms ease;
}

[data-theme="dark"] .pharmacy-notice__icon {
    background: rgba(95, 175, 135, 0.10);
}

[data-theme="dark"] .pharmacy-notice__icon svg circle {
    fill: #5FAF87;
}

.pharmacy-notice__content {
    flex: 1;
    min-width: 0;
}

.pharmacy-notice__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5E7A6C;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

[data-theme="dark"] .pharmacy-notice__label {
    color: #8FAF9E;
}

.pharmacy-notice__text {
    font-size: 0.875rem;
    line-height: 1.7;
    color: #2C4A3B;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

[data-theme="dark"] .pharmacy-notice__text {
    color: #E7E5DC;
}

@media (max-width: 767px) {
    .pharmacy-notice {
        padding: 14px 16px;
        gap: 10px;
    }
}

/* --- Responsive --- */

@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 540px;
    }

    .corner-vine {
        width: 240px;
        height: 240px;
    }

    .contact-side-vine {
        width: 110px;
        opacity: 0.06;
    }

    .side-vine {
        width: 60px;
    }

    .side-vine-inner {
        width: 48px;
        opacity: 0.40;
    }

    .side-vine-inner--left {
        left: 48px;
    }

    .side-vine-inner--right {
        right: 48px;
    }
}

@media (max-width: 767px) {

    .corner-vine {
        width: 175px;
        height: 175px;
    }

    .contact-side-vine {
        width: 75px;
        opacity: 0.05;
    }

    .side-vine {
        width: 40px;
        opacity: 0.4;
    }

    .side-vine-inner {
        width: 32px;
        opacity: 0.28;
    }

    .side-vine-inner--left {
        left: 32px;
    }

    .side-vine-inner--right {
        right: 32px;
    }

    .pharmacy-vine {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .corner-vine {
        width: 120px;
        height: 120px;
    }

    .contact-side-vine {
        display: none;
    }

    .side-vine {
        display: none;
    }

    .side-vine-inner {
        display: none;
    }

    .pharmacy-vine {
        width: 32px;
        opacity: 0.04;
    }
}

/* Pharmacy vine decorations (left & right framing) */
.pharmacy-vine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
}

.pharmacy-vine--left {
    left: 0;
}

.pharmacy-vine--right {
    right: 0;
}

.pharmacy-vine svg {
    width: 100%;
    height: 100%;
}

/* --- Pharmacy Preview (Contact Page) --- */

/* Separates the availability section from the contact details / map above. */
.contact-pharmacy-preview {
    position: relative;
    overflow: hidden;
    margin-top: calc(var(--space-xl) * 1.5);
    padding-top: calc(var(--space-xl) * 1.5);
    padding-bottom: var(--space-lg);
    border-top: 1px solid #DDE5DE;
}

[data-theme="dark"] .contact-pharmacy-preview {
    border-top-color: #2F4A3E;
}

.contact-pharmacy-preview__header {
    text-align: center;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Vertical rhythm: heading → description → cards → note → CTA */
.contact-pharmacy-preview .contact-pharmacy-intro {
    margin-bottom: var(--space-xl);
}

.contact-pharmacy-preview .pharmacy-grid--compact {
    margin-bottom: var(--space-xl);
}

.contact-pharmacy-preview .pharmacy-notice {
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1;
}

.contact-pharmacy-preview .contact-cta {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* --- Pharmacy Grid & Cards --- */

.pharmacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    width: 100%;
    max-width: 100%;
}

.pharmacy-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    max-width: 800px;
    margin: 0 auto var(--space-lg);
    position: relative;
    z-index: 1;
}

.pharmacy-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px 24px 22px;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
                var(--theme-transition);
    box-shadow: 0 4px 18px rgba(22, 74, 58, 0.06);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.pharmacy-card:hover {
    box-shadow: 0 6px 24px rgba(22, 74, 58, 0.10);
    transform: translateY(-1px);
}

[data-theme="dark"] .pharmacy-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30);
}

.pharmacy-card__header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(120, 145, 120, 0.28);
    min-width: 0;
}

.pharmacy-card__name {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #173C2D;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pharmacy-card__location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78125rem;
    font-weight: 500;
    color: #3B6B52;
    background: #E8EFE9;
    padding: 3px 10px 3px 7px;
    border-radius: 6px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pharmacy-card__location i {
    font-size: 0.875rem;
    color: #B8735A;
    flex-shrink: 0;
}

.pharmacy-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.pharmacy-card__detail {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: #64756C;
    line-height: 1.6;
    min-width: 0;
}

/* Text column — wraps under itself, never under the icon */
.pharmacy-card__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pharmacy-card__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background 200ms ease;
}

.pharmacy-card__icon-wrap svg {
    width: 28px;
    height: 28px;
    max-width: 100%;
    flex-shrink: 0;
}

/* Same tinted-circle treatment as the social / contact-info icons */
.pharmacy-card__icon-wrap--location{
    background: rgba(180, 95, 75, 0.07);
}

.pharmacy-card__icon-wrap--phone {
    background: rgba(30, 120, 100, 0.07);
}

.pharmacy-card__detail:hover .pharmacy-card__icon-wrap--location{
    background: rgba(180, 95, 75, 0.13);
}

.pharmacy-card__detail:hover .pharmacy-card__icon-wrap--phone {
    background: rgba(30, 120, 100, 0.13);
}

[data-theme="dark"] .pharmacy-card__icon-wrap--location{
    background: rgba(210, 120, 100, 0.10);
}

[data-theme="dark"] .pharmacy-card__icon-wrap--phone {
    background: rgba(30, 160, 135, 0.10);
}

.pharmacy-card__detail a {
    color: #246B4A;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.pharmacy-card__detail a:hover {
    color: #173C2D;
    text-decoration: underline;
}

/* --- Pharmacy Directory Header (Pharmacies Page) --- */

.pharmacy-directory-header {
    text-align: center;
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1;
    max-width: 100%;
}

.pharmacy-directory-header .medicine-section__heading {
    flex-wrap: wrap;
    row-gap: var(--space-xs);
}

.pharmacy-directory-header .medicine-section__diamond {
    flex-shrink: 0;
}

.pharmacy-directory-header .medicine-section__title {
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- Pharmacy Card Footer / Action --- */

.pharmacy-card__footer {
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(221, 229, 222, 0.6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    min-width: 0;
}

.pharmacy-card__footer:not(:has(.pharmacy-card__action)) {
    display: none;
}

.pharmacy-card__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    padding-top: var(--space-sm);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pharmacy-card__action i {
    flex-shrink: 0;
}

[data-theme="dark"] .pharmacy-card__footer {
    border-top-color: var(--color-border);
}

/* --- Pharmacies Page — scoped responsive layer --- */
/* Body class is set from $currentPage in includes/header.php so these
   rules never leak onto Home / About / Medicines / Contact / Admin. */

@media (max-width: 767px) {
    .page-pharmacies main .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Keep vines clear of card content on phones */
    .page-pharmacies .side-vine-inner {
        display: none;
    }

    .page-pharmacies .side-vine {
        opacity: 0.28;
        width: 32px;
    }
}

@media (max-width: 575px) {
    .page-pharmacies .hero__title {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-pharmacies .side-vine {
        display: none;
    }
}

/* --- Pharmacy Empty State --- */

.pharmacy-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    max-width: 100%;
}

.pharmacy-empty p {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .pharmacy-grid,
    .pharmacy-grid--compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .pharmacy-card {
        padding: 18px 20px 20px;
    }

    .pharmacy-card__detail {
        gap: var(--space-sm);
    }

    .pharmacy-card__action {
        min-height: 44px;
    }
}

@media (max-width: 575px) {
    .pharmacy-grid,
    .pharmacy-grid--compact {
        gap: var(--space-sm);
    }

    .pharmacy-card {
        padding: 16px 16px 18px;
    }

    .pharmacy-directory-header {
        margin-bottom: var(--space-md);
    }
}

/* --------------------------------------------------------------------------
   Pharmacy Pagination (Contact Page)
   -------------------------------------------------------------------------- */

.pharmacy-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--space-lg);
    position: relative;
    z-index: 1;
}

.pharmacy-pagination__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.pharmacy-pagination__item--disabled .pharmacy-pagination__link {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.pharmacy-pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d5ddd7;
    border-radius: 6px;
    background: #fff;
    color: #4a6a52;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
    line-height: 1;
}

.pharmacy-pagination__link:hover {
    background: #f0f4f1;
    border-color: #b8c9bc;
    color: #2d5a3a;
}

.pharmacy-pagination__item--active .pharmacy-pagination__link {
    background: #246B4A;
    border-color: #246B4A;
    color: #fff;
    cursor: default;
}

.pharmacy-pagination__item--active .pharmacy-pagination__link:hover {
    background: #1e5c40;
    border-color: #1e5c40;
}

/* --------------------------------------------------------------------------
   Pagination (Medicines Page) — Bootstrap override
   -------------------------------------------------------------------------- */

.pagination {
    --bs-pagination-bg: var(--color-surface);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-color: var(--color-text-primary);
    --bs-pagination-font-size: 0.8125rem;
    --bs-pagination-hover-bg: var(--color-primary-light);
    --bs-pagination-hover-border-color: var(--color-accent);
    --bs-pagination-hover-color: var(--color-primary);
    --bs-pagination-focus-bg: var(--color-surface);
    --bs-pagination-focus-color: var(--color-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent) 30%, transparent);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-disabled-bg: var(--color-surface);
    --bs-pagination-disabled-border-color: var(--color-border);
    --bs-pagination-disabled-color: var(--color-muted);
    --bs-pagination-border-radius: var(--radius-sm);
    flex-wrap: wrap;
    gap: 6px;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    margin-left: 0;
    border-radius: var(--radius-sm);
    font-weight: 500;
    line-height: 1;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.pagination .page-link:focus,
.pagination .page-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.pagination .page-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.pagination .page-item.active .page-link:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--bs-pagination-active-color);
}

.pagination .page-item.disabled .page-link {
    opacity: 0.55;
    cursor: default;
}

/* --------------------------------------------------------------------------
    9. About Page
   -------------------------------------------------------------------------- */

.about-hero {
    background:
        url('../images/pattern-traditional.svg') repeat 0 0 / 60px 60px,
        linear-gradient(180deg, #185C3B 0%, #145032 40%, #0d2e18 100%);
    padding: var(--space-3xl) var(--space-md);
    text-align: center;
    color: #FFFFFF;
    transition: var(--theme-transition);
}

[data-theme="dark"] .about-hero {
    background:
        url('../images/pattern-traditional.svg') repeat 0 0 / 60px 60px,
        linear-gradient(180deg, #0D1F16 0%, #102A20 40%, #0A1812 100%);
}

[data-theme="dark"] .about-benefits {
    background: rgba(95, 175, 135, 0.02);
}

[data-theme="dark"] .about-heritage {
    background: transparent;
}

.about-hero__content {
    max-width: 640px;
    margin: 0 auto;
}

.about-hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF;
    margin-bottom: var(--space-md);
}

.about-hero__subtitle {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    max-width: 520px;
    margin: 0 auto;
}

.about-section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.about-section-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

[data-theme="dark"] .about-section-header__icon {
    background: rgba(95, 175, 135, 0.1);
    color: #5FAF87;
    border: 1px solid rgba(95, 175, 135, 0.12);
}

.about-section-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

[data-theme="dark"] .about-section-header__title {
    color: #F5F3EA;
}

.about-card {
    background: var(--color-surface);
    border-radius: 16px;
    padding: var(--space-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #DDE5DE;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), var(--theme-transition);
    height: 100%;
}

[data-theme="dark"] .about-card {
    background: #1E332C;
    border-color: rgba(95, 175, 135, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
}

.about-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .about-card:hover {
    border-color: rgba(95, 175, 135, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
}

.about-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: var(--space-lg);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid rgba(24, 92, 59, 0.10);
    box-shadow: 0 1px 2px rgba(24, 92, 59, 0.04), 0 8px 18px rgba(24, 92, 59, 0.05);
    transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease, filter 250ms ease;
}

.about-card__icon-wrap--green {
    color: var(--color-primary);
}

.about-card__icon-wrap--gold {
    color: var(--color-accent);
    border-color: rgba(196, 154, 58, 0.16);
    box-shadow: 0 1px 2px rgba(196, 154, 58, 0.04), 0 8px 18px rgba(196, 154, 58, 0.05);
}

[data-theme="dark"] .about-card__icon-wrap {
    background: rgba(95, 175, 135, 0.10);
    color: #5FAF87;
    border-color: rgba(95, 175, 135, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 8px 18px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .about-card__icon-wrap--green {
    color: #5FAF87;
}

[data-theme="dark"] .about-card__icon-wrap--gold {
    background: rgba(212, 167, 44, 0.10);
    color: #C9A44C;
    border-color: rgba(212, 167, 44, 0.16);
}

.about-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

[data-theme="dark"] .about-card__title {
    color: #F5F3EA;
}

.about-card__text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

[data-theme="dark"] .about-card__text {
    color: #E7E5DC;
}

.about-benefit {
    background: var(--color-surface);
    border-radius: 16px;
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #DDE5DE;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), var(--theme-transition);
    height: 100%;
    position: relative;
}

[data-theme="dark"] .about-benefit {
    background: #1E332C;
    border-color: rgba(95, 175, 135, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
}

.about-benefit:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 10px 28px rgba(0, 0, 0, 0.06);
    border-color: rgba(24, 92, 59, 0.08);
}

[data-theme="dark"] .about-benefit:hover {
    border-color: rgba(95, 175, 135, 0.18);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.25);
}

/* Shared icon-chip hover: lift + brightness + stronger border */
.about-card:hover .about-card__icon-wrap,
.about-benefit:hover .about-benefit__icon {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

.about-card:hover .about-card__icon-wrap--green,
.about-benefit:hover .about-benefit__icon--emerald {
    border-color: rgba(24, 92, 59, 0.24);
}

.about-card:hover .about-card__icon-wrap--gold,
.about-benefit:hover .about-benefit__icon--gold {
    border-color: rgba(196, 154, 58, 0.28);
}

[data-theme="dark"] .about-card:hover .about-card__icon-wrap,
[data-theme="dark"] .about-benefit:hover .about-benefit__icon {
    border-color: rgba(95, 175, 135, 0.26);
}

[data-theme="dark"] .about-card:hover .about-card__icon-wrap--gold,
[data-theme="dark"] .about-benefit:hover .about-benefit__icon--gold {
    border-color: rgba(212, 167, 44, 0.28);
}

.about-benefit__number {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(24, 92, 59, 0.06);
    line-height: 1;
    font-family: var(--font-latin);
}

[data-theme="dark"] .about-benefit__number {
    color: rgba(95, 175, 135, 0.06);
}

.about-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: var(--space-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid rgba(24, 92, 59, 0.10);
    box-shadow: 0 1px 2px rgba(24, 92, 59, 0.04), 0 8px 18px rgba(24, 92, 59, 0.05);
    transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease, filter 250ms ease;
}

.about-benefit__icon--emerald {
    color: var(--color-primary);
}

.about-benefit__icon--gold {
    color: var(--color-accent-dark);
    border-color: rgba(196, 154, 58, 0.16);
    box-shadow: 0 1px 2px rgba(196, 154, 58, 0.04), 0 8px 18px rgba(196, 154, 58, 0.05);
}

[data-theme="dark"] .about-benefit__icon {
    background: rgba(95, 175, 135, 0.10);
    color: #5FAF87;
    border-color: rgba(95, 175, 135, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 8px 18px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .about-benefit__icon--emerald {
    color: #5FAF87;
}

[data-theme="dark"] .about-benefit__icon--gold {
    background: rgba(212, 167, 44, 0.10);
    color: #C9A44C;
    border-color: rgba(212, 167, 44, 0.16);
}

.about-benefit__accent {
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    margin: 0 auto var(--space-md);
    border-radius: 1px;
    opacity: 0.6;
}

.about-benefit__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.45;
}

[data-theme="dark"] .about-benefit__title {
    color: #F5F3EA;
}

.about-benefit__desc {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

[data-theme="dark"] .about-benefit__desc {
    color: #C8C9BE;
}

/* --------------------------------------------------------------------------
    10. Responsive
    -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .section {
        padding: var(--space-xl) 0;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    .hero {
        padding: var(--space-2xl) var(--space-md);
    }

    .hero__title {
        font-size: 2.125rem;
    }

    .hero__subtitle {
        font-size: 0.9375rem;
    }

    .about-hero {
        padding: var(--space-2xl) var(--space-md);
    }

    .about-hero__title {
        font-size: 1.875rem;
    }

    .medicine-detail__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .medicine-detail__title {
        font-size: 1.625rem;
    }

    .medicine-detail__image-wrap {
        max-width: 480px;
        margin: 0 auto;
    }

    .info-card__icon {
        width: 38px;
        height: 38px;
    }

    .info-card__icon svg {
        width: 18px;
        height: 18px;
    }

    .dosage-row__text {
        font-size: 0.9375rem;
    }

    .dosage-steps__content {
        padding-left: 36px;
    }

    .info-panel {
        padding: 36px 40px;
        width: calc(100% - 32px);
    }

    .info-panel__row-text {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .section {
        padding: var(--space-xl) 0;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }

    .hero {
        padding: var(--space-xl) var(--space-md);
    }

    .hero__title {
        font-size: 1.625rem;
    }

    .hero__subtitle {
        font-size: 0.875rem;
        margin-bottom: var(--space-lg);
    }

    .hero__search {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    .hero__search-icon {
        display: none;
    }

    .hero__search-input {
        padding: 0 14px;
        height: 48px;
    }

    .hero__search-btn {
        height: 44px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    .filter-btn {
        padding: 6px 16px;
        min-height: 36px;
        font-size: 0.8125rem;
    }

    .btn {
        width: 100%;
    }

    .btn--outline {
        width: auto;
    }

    .search-wrapper {
        max-width: 100%;
    }

    .warning-box {
        flex-direction: column;
        padding: 16px 20px;
    }

    .about-hero {
        padding: var(--space-xl) var(--space-md);
    }

    .about-hero__title {
        font-size: 1.5rem;
    }

    .about-hero__subtitle {
        font-size: 0.875rem;
    }

    .about-section-header__title {
        font-size: 1.375rem;
    }

    .about-card {
        padding: var(--space-lg);
    }

    .medicine-section__title {
        font-size: 1.25rem;
    }

    .medicine-section__diamond {
        font-size: 0.5rem;
    }

    .medicine-section__accent-line {
        width: 40px;
        margin-bottom: var(--space-xl);
    }

    .medicine-card__placeholder-icon {
        width: 36px;
        height: 36px;
    }

    .medicine-card__corner {
        width: 12px;
        height: 12px;
    }

    .medicine-card__corner--tl::before,
    .medicine-card__corner--tr::before,
    .medicine-card__corner--bl::before,
    .medicine-card__corner--br::before {
        width: 8px;
    }

    .medicine-card__corner--tl::after,
    .medicine-card__corner--tr::after,
    .medicine-card__corner--bl::after,
    .medicine-card__corner--br::after {
        height: 8px;
    }

    .medicine-card__body {
        padding: var(--space-md);
    }

    .medicine-detail__title {
        font-size: 1.375rem;
    }

    .medicine-detail__image-wrap {
        aspect-ratio: 16 / 10;
    }

    .medicine-detail__grid {
        gap: 28px;
    }

    .medicine-detail__cta-link {
        font-size: 0.875rem;
        padding: 10px 20px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-card {
        padding: 14px 16px;
    }

    .contact-info-row {
        padding: 12px 16px;
    }

    .contact-map iframe {
        height: 220px;
    }

    .info-panel {
        padding: 24px 20px;
        width: 94%;
        border-radius: 12px;
    }

    .info-panel__corner {
        width: 20px;
        height: 20px;
    }

    .info-panel__corner--tl,
    .info-panel__corner--tr,
    .info-panel__corner--bl,
    .info-panel__corner--br {
        display: none;
    }

    .info-panel__ornament {
        margin-bottom: 20px;
    }

    .info-panel__ornament--bottom {
        margin-bottom: 0;
        margin-top: 20px;
    }

    .info-panel__ornament-line {
        width: 32px;
    }

    .info-panel__row {
        gap: 12px;
        padding: 16px 0;
    }

    .info-panel__row-icon {
        width: 16px;
        height: 16px;
        margin-top: 4px;
    }

    .info-panel__row-text {
        font-size: 0.9375rem;
        line-height: 1.85;
    }
}

/* --------------------------------------------------------------------------
   11. Dark Mode Pagination & Bootstrap Overrides
   -------------------------------------------------------------------------- */

[data-theme="dark"] .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #000;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-muted);
}

[data-theme="dark"] .pagination {
    --bs-pagination-bg: var(--color-surface);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-hover-bg: rgba(95, 175, 135, 0.12);
    --bs-pagination-hover-border-color: var(--color-primary);
    --bs-pagination-hover-color: var(--color-primary);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-active-color: #000;
    --bs-pagination-disabled-bg: var(--color-surface);
    --bs-pagination-disabled-border-color: var(--color-border);
    --bs-pagination-disabled-color: var(--color-muted);
}

[data-theme="dark"] .pagination .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #000;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   12. Dark Mode Side Vine Decorations
   -------------------------------------------------------------------------- */

[data-theme="dark"] .side-vine {
    opacity: 0.3;
}

[data-theme="dark"] .side-vine-inner {
    opacity: 0.2;
}

[data-theme="dark"] .contact-side-vine {
    opacity: 0.05;
}

[data-theme="dark"] .corner-vine {
    opacity: 0.05;
}

/* --- Pharmacy Location Cards: Dark Mode --- */

[data-theme="dark"] .pharmacy-card__name {
    color: #F5F3EA;
}

[data-theme="dark"] .pharmacy-card__header {
    border-bottom-color: rgba(95, 175, 135, 0.20);
}

[data-theme="dark"] .pharmacy-card__location {
    background: #243D32;
    color: #E7E5DC;
    border: 1px solid #37534A;
}

[data-theme="dark"] .pharmacy-card__location i {
    color: #B8735A;
}

[data-theme="dark"] .pharmacy-card__detail {
    color: #C8C9BE;
}

[data-theme="dark"] .pharmacy-card__detail a {
    color: #5FAF87;
}

[data-theme="dark"] .pharmacy-card__detail a:hover {
    color: #D4B35C;
}

[data-theme="dark"] .pharmacy-vine {
    opacity: 0.04;
}

[data-theme="dark"] .pharmacy-pagination__link {
    background: #1e2e25;
    border-color: #37534A;
    color: #9FBDB0;
}

[data-theme="dark"] .pharmacy-pagination__link:hover {
    background: #263d30;
    border-color: #5FAF87;
    color: #c4dcc9;
}

[data-theme="dark"] .pharmacy-pagination__item--active .pharmacy-pagination__link {
    background: #5FAF87;
    border-color: #5FAF87;
    color: #111;
}

[data-theme="dark"] .pharmacy-pagination__item--active .pharmacy-pagination__link:hover {
    background: #4D9A74;
    border-color: #4D9A74;
}

/* ==========================================================================
   13. Medicines Page — Typography & Visual Enhancement
   Premium Myanmar Traditional Medicine presentation
   ========================================================================== */

/* --- 13a. Page-scoped Burmese Typography Hierarchy --- */

.page-medicines {
    font-size: 1.0625rem;
    line-height: 1.95;
    letter-spacing: 0.012em;
}

.page-medicines h1 {
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.page-medicines h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.015em;
}

.page-medicines h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.45;
}

.page-medicines h4 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
}

.page-medicines p {
    line-height: 1.95;
    letter-spacing: 0.01em;
}

/* --- 13b. Hero / Page Header Enhancement --- */

.page-medicines .hero {
    padding-bottom: calc(var(--space-3xl) + 8px);
    position: relative;
    overflow: hidden;
}

/* Subtle Myanmar-inspired geometric ornament behind title */
.page-medicines .hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    background:
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(196, 154, 58, 0.06) 59%, transparent 60%),
        radial-gradient(circle at 50% 50%, transparent 72%, rgba(196, 154, 58, 0.04) 73%, transparent 74%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.page-medicines .hero .container {
    position: relative;
    z-index: 1;
}

/* Gold accent line above title */
.page-medicines .hero__title::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C49A3A, transparent);
    margin: 0 auto 16px;
    border-radius: 1px;
    opacity: 0.7;
}

/* Elegant thin divider below subtitle */
.page-medicines .hero__subtitle::after {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 58, 0.5), transparent);
    margin: 20px auto 0;
}

/* --- 13c. Section Title Pattern: [icon] Title + gold accent --- */

.page-medicines .section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 0;
}

.page-medicines .section-heading::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-card-accent);
    border-radius: 2px;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: 0.7;
}

.page-medicines .section-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20px;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-card-accent), transparent);
    border-radius: 1px;
}

/* --- 13d. Medicine Card Refinement --- */

.page-medicines .medicine-card {
    border-radius: 16px;
}

.page-medicines .medicine-card__title {
    position: relative;
    padding-left: 0;
}

/* Subtle gold accent beside card title */
.page-medicines .medicine-card__title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: var(--color-card-accent);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
    opacity: 0.5;
}

.page-medicines .medicine-card__link {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.015em;
}

/* --- 13e. Info Card Enhancement (Detail Page) --- */

.page-medicines .info-card--full {
    border-left: 3px solid rgba(196, 154, 58, 0.3);
}

.page-medicines .info-card__body {
    font-size: 0.9375rem;
    line-height: 1.95;
}

/* --- 13e-2. Section Heading Icons (Detail Page) --- */

.info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(24, 92, 59, 0.08);
    color: var(--color-primary);
    transition: var(--theme-transition);
}

.info-card__icon svg {
    width: 20px;
    height: 20px;
}

.info-card__icon--uses {
    background: rgba(24, 92, 59, 0.08);
    color: #185C3B;
}

.info-card__icon--dosage {
    background: rgba(196, 154, 58, 0.1);
    color: #B78D27;
}

.info-card__icon--herb {
    background: rgba(24, 92, 59, 0.08);
    color: #246B4A;
}

.info-card__icon--info {
    background: rgba(196, 154, 58, 0.1);
    color: #B78D27;
}

[data-theme="dark"] .info-card__icon {
    background: rgba(95, 175, 135, 0.1);
    color: #5FAF87;
}

[data-theme="dark"] .info-card__icon--dosage,
[data-theme="dark"] .info-card__icon--info {
    background: rgba(201, 164, 76, 0.1);
    color: #C9A44C;
}

[data-theme="dark"] .info-card__icon--herb {
    background: rgba(95, 175, 135, 0.1);
    color: #5FAF87;
}

/* Remove old gold bar ::before when icon is present */
.info-card__heading:has(.info-card__icon)::before {
    display: none;
}

/* --- 13e-3. Uses List (Check Items) --- */

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-list__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.8;
    font-size: 0.9375rem;
    color: var(--color-card-body);
}

.info-list__marker {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    color: var(--color-primary);
    opacity: 0.55;
}

.info-list__marker svg {
    width: 100%;
    height: 100%;
}

.info-list__marker--leaf {
    color: #246B4A;
    opacity: 0.45;
}

[data-theme="dark"] .info-list__marker {
    color: #5FAF87;
    opacity: 0.5;
}

[data-theme="dark"] .info-list__marker--leaf {
    color: #5FAF87;
}

/* --- 13e-3b. Uses Category Cards --- */

.uses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.uses-card {
    min-width: 0;
    padding: 14px 16px;
    background: rgba(24, 92, 59, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(23, 60, 45, 0.05);
    transition: var(--theme-transition);
}

[data-theme="dark"] .uses-card {
    background: rgba(95, 175, 135, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.uses-card__heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: var(--color-primary);
    transition: var(--theme-transition);
}

[data-theme="dark"] .uses-card__heading {
    color: var(--color-card-heading);
}

.uses-card__diamond {
    flex-shrink: 0;
    font-size: 0.7em;
    color: var(--color-accent);
    transition: var(--theme-transition);
}

.uses-card strong {
    font-weight: 700;
    color: var(--color-card-heading);
}

.uses-card__text p {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--color-card-body);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.uses-card__text p:last-child {
    margin-bottom: 0;
}

.uses-card__text + .uses-card__list {
    margin-top: 10px;
}

.uses-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uses-card__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-card-body);
}

.uses-card__check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 4px;
    color: var(--color-primary);
    opacity: 0.55;
    transition: var(--theme-transition);
}

.uses-card__check svg {
    display: block;
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .uses-card__check {
    color: #5FAF87;
    opacity: 0.5;
}

.uses-card__label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (min-width: 768px) {
    .uses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .uses-grid > .uses-card:only-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .uses-card {
        padding: 12px 14px;
    }

    .uses-card__heading {
        margin-bottom: 8px;
        font-size: 1rem;
    }

    .uses-card__text p,
    .uses-card__item {
        font-size: 0.875rem;
    }

    .uses-card__item {
        gap: 7px;
    }

    .uses-card__check {
        width: 14px;
        height: 14px;
    }
}

/* --- 13e-4. Dosage Rows (Person / Child / Baby / Clock) --- */

.info-card--dosage {
    border-left: 3px solid rgba(196, 154, 58, 0.25);
}

.dosage-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dosage-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    position: relative;
}

.dosage-row + .dosage-row {
    border-top: 1px solid rgba(180, 200, 185, 0.25);
}

[data-theme="dark"] .dosage-row + .dosage-row {
    border-top-color: rgba(95, 175, 135, 0.12);
}

.dosage-row__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 92, 59, 0.07);
    color: #185C3B;
    margin-top: 1px;
}

.dosage-row__icon svg {
    width: 16px;
    height: 16px;
}

.dosage-row__icon--adult {
    background: rgba(24, 92, 59, 0.08);
    color: #185C3B;
}

.dosage-row__icon--child {
    background: rgba(36, 107, 74, 0.08);
    color: #246B4A;
}

.dosage-row__icon--baby {
    background: rgba(196, 154, 58, 0.1);
    color: #B78D27;
}

.dosage-row__icon--drop {
    background: rgba(196, 154, 58, 0.08);
    color: #B78D27;
}

.dosage-row__icon--clock {
    background: rgba(24, 92, 59, 0.07);
    color: #185C3B;
}

[data-theme="dark"] .dosage-row__icon {
    background: rgba(95, 175, 135, 0.08);
    color: #5FAF87;
}

[data-theme="dark"] .dosage-row__icon--baby,
[data-theme="dark"] .dosage-row__icon--drop {
    background: rgba(201, 164, 76, 0.1);
    color: #C9A44C;
}

.dosage-row__text {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-card-body);
    letter-spacing: 0.01em;
}

/* --- 13e-5. Ingredients List (Leaf Chips) --- */

.info-card--ingredients {
    border-left: 3px solid rgba(24, 92, 59, 0.2);
}

/* --- 13e-6a. Usage Meta (ဆေးပမာဏ / သုံးစွဲရမည့်အကြိမ်) --- */

.dosage-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(180, 200, 185, 0.2);
}

.dosage-meta:first-child {
    padding-top: 0;
}

.dosage-meta:last-of-type {
    border-bottom: none;
}

[data-theme="dark"] .dosage-meta {
    border-bottom-color: rgba(95, 175, 135, 0.12);
}

.dosage-meta__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    white-space: nowrap;
}

[data-theme="dark"] .dosage-meta__label {
    color: var(--color-accent);
}

.dosage-meta__value {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-card-body);
    flex: 1;
    min-width: 0;
}

/* --- 13n. Medicine Detail: Tabs --- */

.med-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.med-tabs::-webkit-scrollbar { display: none; }

[data-theme="dark"] .med-tabs {
    border-bottom-color: rgba(95, 175, 135, 0.15);
}

.med-tabs__btn {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 200ms ease, border-color 200ms ease;
    letter-spacing: 0.015em;
}

.med-tabs__btn:hover {
    color: var(--color-primary);
}

.med-tabs__btn--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}

[data-theme="dark"] .med-tabs__btn {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .med-tabs__btn--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}

.med-tab-panel {
    display: none;
}

.med-tab-panel--active {
    display: block;
}

/* --- 13n-2. Medicine Detail: Accordion --- */

.med-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.med-accordion__item {
    background: #FDFCF8;
    border: 1px solid rgba(180, 200, 185, 0.4);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 200ms ease, var(--theme-transition);
}

.med-accordion__item:hover {
    box-shadow: 0 2px 8px rgba(24, 92, 59, 0.05);
}

[data-theme="dark"] .med-accordion__item {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.med-accordion__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 150ms ease;
}

.med-accordion__trigger:hover {
    background: rgba(24, 92, 59, 0.03);
}

[data-theme="dark"] .med-accordion__trigger:hover {
    background: rgba(95, 175, 135, 0.05);
}

.med-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(24, 92, 59, 0.08);
    color: var(--color-primary);
    flex-shrink: 0;
    transition: var(--theme-transition);
}

.med-accordion__icon svg {
    width: 17px;
    height: 17px;
}

[data-theme="dark"] .med-accordion__icon {
    background: rgba(95, 175, 135, 0.1);
    color: #5FAF87;
}

.med-accordion__title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-card-heading);
    letter-spacing: 0.015em;
    line-height: 1.4;
    margin: 0;
}

/* Prescription subheading — proper heading element (h3) */
[data-panel="presc"] h3.med-accordion__title--presc {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.5;
    margin: 0;
    padding-left: 14px;
    position: relative;
}

[data-panel="presc"] h3.med-accordion__title--presc::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: var(--color-accent);
    border-radius: 2px;
}

[data-theme="dark"] [data-panel="presc"] h3.med-accordion__title--presc {
    color: var(--color-text-primary);
}

[data-theme="dark"] [data-panel="presc"] h3.med-accordion__title--presc::before {
    background: var(--color-accent);
}

/* Prescription body paragraphs */
.prescription-paragraph {
    font-size: 0.9375rem;
    line-height: 1.95;
    color: var(--color-card-body);
    margin-bottom: 16px;
}

.prescription-paragraph:last-child {
    margin-bottom: 0;
}

/* Prescription subheading — secondary heading with gold accent */
[data-panel="presc"] h3.prescription-subheading {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
    margin: 24px 0 14px;
    padding-left: 14px;
    position: relative;
}

[data-panel="presc"] h3.prescription-subheading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5px;
    height: 70%;
    background: var(--color-accent);
    border-radius: 2px;
}

[data-theme="dark"] [data-panel="presc"] h3.prescription-subheading {
    color: var(--color-text-primary);
}

[data-panel="presc"] .med-accordion__trigger {
    padding-top: 20px;
    padding-bottom: 12px;
}

[data-panel="presc"] .med-accordion__content {
    padding-top: 4px;
    padding-bottom: 20px;
}

.med-accordion__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-muted);
    flex-shrink: 0;
    transition: transform 250ms ease;
}

.med-accordion__chevron svg {
    width: 16px;
    height: 16px;
}

.med-accordion__item--open .med-accordion__chevron {
    transform: rotate(180deg);
}

.med-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease;
}

.med-accordion__item--open .med-accordion__body {
    max-height: 2000px;
}

/* Prescription content can be long — never clip it when open */
[data-panel="presc"] .med-accordion__item--open .med-accordion__body {
    max-height: 8000px;
}

.med-accordion__content {
    padding: 0 20px 20px 68px;
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--color-card-body);
    letter-spacing: 0.01em;
}

/* Markdown content (headings, paragraphs and bullet lists) in the description
   and usage accordions. Keeps the existing medicine-detail look: emerald
   heading text with the gold accent bar (same treatment as
   .prescription-subheading), gold list markers (same as .usage-steps) and
   the inherited card-body typography for paragraphs. */
:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h1, h2, h3, h4, h5, h6) {
    position: relative;
    margin: 24px 0 12px;
    padding-left: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--color-primary);
    transition: var(--theme-transition);
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h1, h2, h3, h4, h5, h6)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5px;
    height: 70%;
    background: var(--color-accent);
    border-radius: 2px;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > h1 {
    font-size: 1.375rem;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > h2 {
    font-size: 1.3125rem;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > h3 {
    font-size: 1.1875rem;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > h4 {
    font-size: 1.0625rem;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > h5 {
    font-size: 1rem;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > h6 {
    font-size: 0.9375rem;
}

[data-theme="dark"] :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-card-heading);
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > p {
    margin: 0 0 14px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > p:last-child {
    margin-bottom: 0;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content strong {
    font-weight: 700;
    color: var(--color-card-heading);
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > ul {
    margin: 0 0 14px;
    padding-left: 1.4em;
    list-style: disc;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > ul:last-child {
    margin-bottom: 0;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > ul li {
    margin-bottom: 6px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > ul li:last-child {
    margin-bottom: 0;
}

:is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > ul li::marker {
    color: var(--color-accent-dark);
    font-weight: 700;
}

[data-theme="dark"] :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > ul li::marker {
    color: var(--color-accent);
}

@media (max-width: 767px) {
    :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h1, h2, h3, h4, h5, h6) {
        margin: 20px 0 10px;
        padding-left: 12px;
    }

    :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h1, h2) {
        font-size: 1.1875rem;
    }

    :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h3, h4) {
        font-size: 1.0625rem;
    }

    :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > :is(h5, h6) {
        font-size: 0.9375rem;
    }

    :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > p {
        margin-bottom: 12px;
    }

    :is([data-panel="desc"], [data-panel="usage"], [data-panel="presc"]) .med-accordion__content > ul li {
        margin-bottom: 5px;
    }
}

@media (max-width: 767px) {
    .med-tabs__btn {
        padding: 8px 14px;
        font-size: 0.875rem;
    }

    .med-accordion__trigger {
        padding: 14px 16px;
        gap: 10px;
    }

    .med-accordion__icon {
        width: 32px;
        height: 32px;
    }

    .med-accordion__icon svg {
        width: 15px;
        height: 15px;
    }

    .med-accordion__title {
        font-size: 0.9375rem;
    }

    [data-panel="presc"] h3.med-accordion__title--presc {
        font-size: 1.125rem;
        padding-left: 12px;
    }

    [data-panel="presc"] .med-accordion__trigger {
        padding-top: 16px;
        padding-bottom: 10px;
    }

    .prescription-paragraph {
        font-size: 0.875rem;
        line-height: 1.85;
        margin-bottom: 12px;
    }

    [data-panel="presc"] h3.prescription-subheading {
        font-size: 1.0625rem;
        margin: 22px 0 12px;
        padding-left: 12px;
    }

    .med-accordion__content {
        padding: 0 16px 16px 58px;
        font-size: 0.875rem;
        line-height: 1.85;
    }

    .dosage-meta__label {
        font-size: 0.75rem;
    }

    .dosage-meta__value {
        font-size: 0.875rem;
    }
}

/* --- 13e-6. Structured Dosage Steps (Topical-Liquid Medicine) --- */

.info-card--structured {
    border-left: 3px solid rgba(196, 154, 58, 0.25);
}

.dosage-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dosage-steps__item {
    padding: 16px 0;
    position: relative;
}

.dosage-steps__item + .dosage-steps__item {
    border-top: 1px solid rgba(180, 200, 185, 0.25);
}

[data-theme="dark"] .dosage-steps__item + .dosage-steps__item {
    border-top-color: rgba(95, 175, 135, 0.12);
}

.dosage-steps__header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.dosage-steps__num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    flex-shrink: 0;
    min-width: 28px;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .dosage-steps__num {
    color: var(--color-accent);
}

.dosage-steps__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-card-heading);
    letter-spacing: 0.015em;
    line-height: 1.5;
}

.dosage-steps__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 38px;
}

.dosage-steps__content p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--color-card-body);
    margin: 0;
    letter-spacing: 0.01em;
}

.dosage-steps__content p + p {
    margin-top: 2px;
}

.info-list--ingredients {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.info-list__item--chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    background: rgba(24, 92, 59, 0.05);
    border: 1px solid rgba(24, 92, 59, 0.1);
    border-radius: 50px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-card-body);
    transition: var(--theme-transition);
}

.info-list__item--chip .info-list__marker {
    width: 14px;
    height: 14px;
    margin-top: 0;
}

.info-list__item--chip .info-list__marker svg {
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .info-list__item--chip {
    background: rgba(95, 175, 135, 0.06);
    border-color: rgba(95, 175, 135, 0.12);
}

/* --- 13e-6b. Usage Instructions (Numbered Steps; paragraphs/lists are Markdown) --- */

.usage-steps__item {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.usage-steps {
    margin: 0;
    padding-left: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usage-steps__item {
    padding-left: 4px;
}

.usage-steps__item::marker {
    color: var(--color-accent-dark);
    font-weight: 700;
}

[data-theme="dark"] .usage-steps__item::marker {
    color: var(--color-accent);
}

/* --- 13f. Warning / Safety Card Enhancement --- */

.page-medicines .warning-box {
    border-radius: 14px;
    position: relative;
}

.page-medicines .warning-box__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 154, 58, 0.1);
    border-radius: 50%;
    padding: 0;
    color: #C49A3A;
    flex-shrink: 0;
}

.page-medicines .warning-box__icon svg {
    width: 18px;
    height: 18px;
}

/* Subtle highlighted info box at bottom of warning */
.page-medicines .warning-box::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 154, 58, 0.15), transparent);
    margin-top: 14px;
}

/* --- 13g. Filter Bar Enhancement --- */

.page-medicines .filter-bar {
    padding: var(--space-sm) 0;
    position: relative;
}

.page-medicines .filter-btn {
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.page-medicines .filter-btn--active {
    box-shadow: 0 2px 8px rgba(24, 92, 59, 0.2);
}

/* --- 13h. Subtle Traditional-Medicine Details --- */

/* Small botanical/leaf badge on medicine count */
.page-medicines .medicine-count::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: rgba(24, 92, 59, 0.08);
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23185C3B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.9C15.5 4.9 17 3.5 17 3.5s1.5 2 1 7c-1 5-4 8-7 9.5z'/%3E%3Cpath d='M11 20c-2-2-4-5-4-8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
    vertical-align: middle;
}

/* Subtle gold ornamental divider between hero and content */
.page-medicines .section:first-of-type::before {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 58, 0.35), transparent);
    margin: 0 auto var(--space-xl);
}

/* --- 13i. Empty State Enhancement --- */

.page-medicines .empty-state {
    background: #FDFCF8;
    border: 1px solid rgba(180, 200, 185, 0.35);
    border-radius: 16px;
    padding: var(--space-3xl) var(--space-xl);
    max-width: 480px;
    margin: 0 auto;
}

.page-medicines .empty-state__text {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.015em;
}

.page-medicines .empty-state__subtext {
    font-size: 0.9375rem;
    line-height: 1.85;
}

/* --- 13j. Pagination Enhancement --- */

.page-medicines .pagination .page-link {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* --- 13k. Medicine Detail: Content Panel --- */

.page-medicines .medicine-detail__summary {
    font-size: 1.0625rem;
    line-height: 1.95;
    letter-spacing: 0.012em;
}

.page-medicines .medicine-detail__title {
    letter-spacing: 0.02em;
}

.page-medicines .medicine-detail__category {
    font-weight: 600;
    letter-spacing: 0.015em;
}

/* --- 13l. Dark Mode Adjustments --- */

[data-theme="dark"] .page-medicines .hero::before {
    background:
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(201, 164, 76, 0.05) 59%, transparent 60%),
        radial-gradient(circle at 50% 50%, transparent 72%, rgba(201, 164, 76, 0.03) 73%, transparent 74%);
}

[data-theme="dark"] .page-medicines .hero__title::before {
    background: linear-gradient(90deg, transparent, #C9A44C, transparent);
}

[data-theme="dark"] .page-medicines .hero__subtitle::after {
    background: linear-gradient(90deg, transparent, rgba(201, 164, 76, 0.4), transparent);
}

[data-theme="dark"] .page-medicines .medicine-card__title::before {
    background: var(--color-card-accent);
    opacity: 0.4;
}

[data-theme="dark"] .page-medicines .info-card--full {
    border-left-color: rgba(201, 164, 76, 0.25);
}

[data-theme="dark"] .page-medicines .warning-box__icon {
    background: rgba(201, 164, 76, 0.1);
    color: #C9A44C;
}

[data-theme="dark"] .page-medicines .warning-box::after {
    background: linear-gradient(90deg, rgba(201, 164, 76, 0.12), transparent);
}

[data-theme="dark"] .page-medicines .medicine-count::before {
    background-color: rgba(95, 175, 135, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235FAF87' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.9C15.5 4.9 17 3.5 17 3.5s1.5 2 1 7c-1 5-4 8-7 9.5z'/%3E%3Cpath d='M11 20c-2-2-4-5-4-8'/%3E%3C/svg%3E");
}

[data-theme="dark"] .page-medicines .empty-state {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .page-medicines .search-input {
    background-color: rgba(30, 51, 44, 0.92);
    border-color: rgba(120, 180, 150, 0.25);
}

[data-theme="dark"] .page-medicines .filter-btn {
    background-color: rgba(30, 51, 44, 0.7);
    border-color: rgba(120, 180, 150, 0.2);
}

/* --- 13m. Responsive — Medicines Page --- */

@media (max-width: 991px) {
    .page-medicines h1 {
        font-size: 1.875rem;
    }

    .page-medicines h2 {
        font-size: 1.375rem;
    }

    .page-medicines .hero__title {
        font-size: 2rem;
    }

    .page-medicines .hero__subtitle {
        font-size: 1rem;
    }

    .page-medicines .hero::before {
        width: 200px;
        height: 200px;
    }

    .page-medicines .section-heading {
        font-size: 1.25rem;
    }

    .page-medicines .info-card {
        padding: 20px 22px;
    }
}

@media (max-width: 767px) {
    .page-medicines {
        font-size: 1rem;
        line-height: 1.9;
    }

    .page-medicines h1 {
        font-size: 1.625rem;
    }

    .page-medicines h2 {
        font-size: 1.25rem;
    }

    .page-medicines h3 {
        font-size: 1.125rem;
    }

    .page-medicines .hero {
        padding: var(--space-xl) var(--space-md) calc(var(--space-2xl) + 4px);
    }

    .page-medicines .hero__title {
        font-size: 1.625rem;
    }

    .page-medicines .hero__title::before {
        width: 32px;
        margin-bottom: 12px;
    }

    .page-medicines .hero__subtitle {
        font-size: 0.9375rem;
        line-height: 1.8;
    }

    .page-medicines .hero::before {
        width: 160px;
        height: 160px;
    }

    .page-medicines .section-heading {
        font-size: 1.125rem;
        gap: 8px;
    }

    .page-medicines .section-heading::before {
        width: 6px;
        height: 6px;
    }

    .page-medicines .section-heading::after {
        left: 14px;
        width: 36px;
    }

    .page-medicines .medicine-card__title {
        font-size: 1.0625rem;
    }

    .page-medicines .medicine-card__title::before {
        height: 14px;
        margin-right: 8px;
    }

    .page-medicines .medicine-card__description {
        font-size: 0.875rem;
        line-height: 1.8;
    }

    .page-medicines .medicine-card__body {
        padding: var(--space-md);
    }

    .page-medicines .info-card {
        padding: 18px 18px;
        border-radius: 12px;
    }

    .page-medicines .info-card__heading {
        font-size: 0.9375rem;
    }

    .page-medicines .info-card__body {
        font-size: 0.875rem;
        line-height: 1.85;
    }

    .info-card__icon {
        width: 36px;
        height: 36px;
    }

    .info-card__icon svg {
        width: 17px;
        height: 17px;
    }

    .dosage-row {
        gap: 10px;
        padding: 12px 0;
    }

    .dosage-row__icon {
        width: 30px;
        height: 30px;
    }

    .dosage-row__icon svg {
        width: 14px;
        height: 14px;
    }

    .dosage-row__text {
        font-size: 0.875rem;
        line-height: 1.75;
    }

    .info-list {
        gap: 8px;
    }

    .info-list__item {
        font-size: 0.875rem;
    }

    .info-list__marker {
        width: 18px;
        height: 18px;
    }

    .info-list--ingredients {
        gap: 6px;
    }

    .info-list__item--chip {
        font-size: 0.8125rem;
        padding: 5px 12px 5px 8px;
    }

    .dosage-steps__item {
        padding: 12px 0;
    }

    .dosage-steps__num {
        font-size: 0.875rem;
        min-width: 24px;
    }

    .dosage-steps__title {
        font-size: 0.875rem;
    }

    .dosage-steps__content {
        padding-left: 34px;
    }

    .dosage-meta__label {
        font-size: 0.75rem;
    }

    .dosage-meta__value {
        font-size: 0.875rem;
    }

    .dosage-steps__content p {
        font-size: 0.875rem;
        line-height: 1.8;
    }

    .page-medicines .warning-box {
        padding: 16px 18px;
        flex-direction: column;
        gap: 10px;
    }

    .page-medicines .warning-box__icon {
        width: 32px;
        height: 32px;
    }

    .page-medicines .warning-box__heading {
        font-size: 0.9375rem;
    }

    .page-medicines .warning-box__text {
        font-size: 0.875rem;
        line-height: 1.8;
    }

    .page-medicines .filter-btn {
        padding: 6px 14px;
        min-height: 36px;
        font-size: 0.8125rem;
    }

    .page-medicines .medicine-count {
        font-size: 0.8125rem;
    }

    .page-medicines .empty-state {
        padding: var(--space-2xl) var(--space-lg);
    }

    .page-medicines .medicine-detail__summary {
        font-size: 0.9375rem;
        line-height: 1.85;
    }

    .page-medicines .section:first-of-type::before {
        width: 60px;
        margin-bottom: var(--space-lg);
    }
}

@media (max-width: 575px) {
    .page-medicines .hero__title {
        font-size: 1.5rem;
    }

    .page-medicines .hero__subtitle {
        font-size: 0.875rem;
    }

    .page-medicines .hero::before {
        display: none;
    }

    .page-medicines .medicine-card__title {
        font-size: 1rem;
    }

    .page-medicines .filter-bar {
        gap: 6px;
    }

    .page-medicines .filter-btn {
        padding: 5px 12px;
        font-size: 0.75rem;
        min-height: 32px;
    }
}

/* ==========================================================================
   13z. Medicine Detail — Myanmar Reading Typography (this page only)
   Scoped to .medicine-detail-hero / .medicine-detail-info, which exist only
   on the public Medicine Detail page (public/medicine.php). No other page
   or shared component is affected.
   ========================================================================== */

/* Myanmar is a stacked script — no artificial tracking anywhere on the page */
.medicine-detail-hero,
.medicine-detail-info {
    letter-spacing: 0;
}

/* Paragraph contrast: #45584E ≈ 7.3:1 on the cream/white surfaces (light) */
html:not([data-theme="dark"]) .medicine-detail-hero,
html:not([data-theme="dark"]) .medicine-detail-info {
    --color-card-body: #45584E;
    --color-text-secondary: #45584E;
}

/* Long-form Myanmar body text — comfortable weight & line rhythm */
.medicine-detail-hero .medicine-detail__summary,
.medicine-detail-hero .warning-box__text,
.medicine-detail-info .med-accordion__content,
.medicine-detail-info .prescription-paragraph,
.medicine-detail-info .uses-card__text p,
.medicine-detail-info .uses-card__item,
.medicine-detail-info .dosage-steps__content p,
.medicine-detail-info .dosage-row__text,
.medicine-detail-info .dosage-meta__value {
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0;
}

.medicine-detail-hero .medicine-detail__summary {
    line-height: 1.95;
}

/* Desktop reading size — mobile keeps its existing scale */
@media (min-width: 768px) {
    .medicine-detail-hero .warning-box__text,
    .medicine-detail-info .med-accordion__content,
    .medicine-detail-info .prescription-paragraph,
    .medicine-detail-info .uses-card__text p,
    .medicine-detail-info .uses-card__item,
    .medicine-detail-info .dosage-steps__content p,
    .medicine-detail-info .dosage-row__text,
    .medicine-detail-info .dosage-meta__value {
        font-size: 1rem;
    }

    .medicine-detail-hero .medicine-detail__summary {
        font-size: 1.0625rem;
    }
}

/* Markdown content paragraphs & headings inside the description accordion */
.medicine-detail-info .med-accordion__content p,
.medicine-detail-info .med-accordion__content > :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: 0;
}

/* Headings: keep size/weight hierarchy, drop tracking, room for stacked glyphs */
.medicine-detail-hero .medicine-detail__title,
.medicine-detail-hero .warning-box__heading,
.medicine-detail-info .med-tabs__btn,
.medicine-detail-info .med-accordion__title,
.medicine-detail-info .uses-card__heading,
.medicine-detail-info .prescription-subheading,
.medicine-detail-info .dosage-steps__title,
.medicine-detail-info .dosage-steps__num,
.medicine-detail-info .dosage-meta__label,
.medicine-detail-info .medicine-detail__reg-value {
    letter-spacing: 0;
}

.medicine-detail-hero .medicine-detail__title {
    line-height: 1.45;
}

/* Uses-card heading renders as designed (was losing to .page-medicines h4) */
.medicine-detail-info .uses-card__heading {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .medicine-detail-info .uses-card__heading {
        font-size: 1.0625rem;
    }
}

/* Markdown block output outside the main accordion text column
   (hero summary, warning box, numbered usage steps) — same gold-accent
   heading / list treatment, and no extra edge margins so the surrounding
   UI rhythm is unchanged. */
.medicine-detail__summary > :first-child,
.warning-box__text > :first-child,
.usage-steps__item > :first-child {
    margin-top: 0;
}

.medicine-detail__summary > :last-child,
.warning-box__text > :last-child,
.usage-steps__item > :last-child {
    margin-bottom: 0;
}

.medicine-detail__summary > p,
.medicine-detail__summary > :is(h1, h2, h3, h4, h5, h6),
.warning-box__text > p,
.warning-box__text > :is(h1, h2, h3, h4, h5, h6),
.usage-steps__item > p,
.usage-steps__item > :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: 0;
}

.usage-steps__item > :is(h1, h2, h3, h4, h5, h6) {
    position: relative;
    margin: 0 0 10px;
    padding-left: 12px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
}

.usage-steps__item > :is(h1, h2, h3, h4, h5, h6)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5px;
    height: 70%;
    background: var(--color-accent);
    border-radius: 2px;
}

[data-theme="dark"] .usage-steps__item > :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-card-heading);
}

.usage-steps__item > ul {
    margin: 0;
    padding-left: 1.4em;
    list-style: disc;
}

.usage-steps__item > ul li {
    margin-bottom: 6px;
}

.usage-steps__item > ul li:last-child {
    margin-bottom: 0;
}

.usage-steps__item > ul li::marker {
    color: var(--color-accent-dark);
    font-weight: 700;
}

[data-theme="dark"] .usage-steps__item > ul li::marker {
    color: var(--color-accent);
}