/* ==========================================================================
   MAHO — Dance & Fashion
   Dark luxury design system: BLACK + BURGUNDY + CHAMPAGNE
   RTL-first (html dir="rtl"). Logical properties used throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Foundation (≈70% of the visual field) */
    --maho-bg:            #0B0A0A;
    --maho-bg-2:          #111010;
    --maho-card:          #141212;
    --maho-surface:       #1A1717;

    /* Burgundy (≈20% — brand + CTAs) */
    --maho-burgundy:      #641F2A;
    --maho-burgundy-2:    #7A2936;
    --maho-burgundy-deep: #45131C;

    /* Champagne accent (≈3%) + neutrals (≈7%) */
    --maho-champagne:     #C8AA78;
    --maho-champagne-2:   #D8BD91;
    --maho-ivory:         #F3ECE2;
    --maho-muted:         #B5ADA3;

    /* Hairlines */
    --maho-border:        rgba(200, 170, 120, 0.22);
    --maho-border-subtle: rgba(255, 255, 255, 0.08);

    /* Typography */
    --maho-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    --maho-sans: "Manrope", "Vazirmatn", "iranyekan", Tahoma, sans-serif;
    --maho-sans-fa: "Vazirmatn", "Manrope", "iranyekan", Tahoma, sans-serif;

    /* Spacing scale (8pt) */
    --maho-s1: 8px;
    --maho-s2: 16px;
    --maho-s3: 24px;
    --maho-s4: 32px;
    --maho-s5: 48px;
    --maho-s6: 64px;
    --maho-s7: 80px;
    --maho-s8: 96px;

    /* Rhythm */
    --maho-radius: 4px;
    --maho-radius-sm: 2px;
    --maho-header-h: 76px;
    --maho-announce-h: 34px;
    --maho-container: 1280px;
    --maho-gutter: 24px;

    /* Motion */
    --maho-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --maho-fast: 250ms;
    --maho-mid: 400ms;
    --maho-slow: 600ms;
}

/* Persian text keeps the refined sans; English display words use the serif */
html[lang="fa"] .maho-page {
    --maho-sans: "Vazirmatn", "Manrope", "iranyekan", Tahoma, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.maho-page {
    margin: 0;
    background: var(--maho-bg);
    color: var(--maho-ivory);
    font-family: var(--maho-sans);
    font-size: 15px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

.maho-page img { max-width: 100%; display: block; }
.maho-page a { color: inherit; text-decoration: none; }
.maho-page ul { margin: 0; padding: 0; list-style: none; }
.maho-page p, .maho-page h1, .maho-page h2, .maho-page h3 { margin: 0; }

.maho-page :focus-visible {
    outline: 1px solid var(--maho-champagne);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--maho-s2);
    top: -48px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--maho-burgundy);
    color: var(--maho-ivory);
    font-size: 13px;
    transition: top var(--maho-fast) var(--maho-ease);
}
.skip-link:focus { top: 8px; }

.maho-container {
    width: 100%;
    max-width: calc(var(--maho-container) + var(--maho-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--maho-gutter);
}

/* Icons */
.maho-page .icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    display: inline-block;
    vertical-align: middle;
}
.maho-page .icon-12 { width: 12px; height: 12px; }
.maho-page .icon-14 { width: 14px; height: 14px; }
.maho-page .icon-16 { width: 16px; height: 16px; }
.maho-page .icon-20 { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   3. Buttons & links
   -------------------------------------------------------------------------- */
.maho-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--maho-radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background-color var(--maho-fast) var(--maho-ease),
                border-color var(--maho-fast) var(--maho-ease),
                color var(--maho-fast) var(--maho-ease);
}
.maho-btn .icon { transition: transform var(--maho-fast) var(--maho-ease); }
.maho-btn:hover .icon { transform: translateX(-4px); }
[dir="ltr"] .maho-btn:hover .icon { transform: translateX(4px); }

.maho-btn--primary {
    background: var(--maho-burgundy);
    color: var(--maho-ivory);
    border-color: rgba(200, 170, 120, 0.25);
}
.maho-btn--primary:hover {
    background: var(--maho-burgundy-2);
    border-color: rgba(200, 170, 120, 0.45);
}

.maho-btn--ghost {
    background: transparent;
    color: var(--maho-ivory);
    border-color: var(--maho-border);
}
.maho-btn--ghost:hover {
    border-color: var(--maho-champagne);
    color: var(--maho-champagne-2);
}

.maho-btn--lg { padding: 15px 32px; }
.maho-btn--block { width: 100%; justify-content: center; }

.maho-linkline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--maho-ivory);
    transition: color var(--maho-fast) var(--maho-ease);
}
.maho-linkline .icon { transition: transform var(--maho-fast) var(--maho-ease); }
.maho-linkline:hover { color: var(--maho-champagne-2); }
.maho-linkline:hover .icon { transform: translateX(-4px); }
[dir="ltr"] .maho-linkline:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. Shared section anatomy
   -------------------------------------------------------------------------- */
.maho-section { padding-block: var(--maho-s8) var(--maho-s6); }

.maho-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--maho-s3);
    margin-bottom: var(--maho-s5);
}

.maho-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--maho-champagne);
}
.maho-eyebrow i { font-style: normal; color: var(--maho-champagne); opacity: 0.55; }
.maho-hero__title ~ * { font-family: var(--maho-sans-fa); }

.maho-section__title {
    font-family: var(--maho-serif);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.25;
    color: var(--maho-ivory);
    margin-top: 6px;
}
.maho-section__desc {
    margin-top: 6px;
    color: var(--maho-muted);
    font-size: 13.5px;
}

.maho-section__aside {
    display: flex;
    align-items: center;
    gap: var(--maho-s3);
    flex: none;
}

.maho-carnav { display: flex; gap: 10px; }

.maho-carnav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    color: var(--maho-ivory);
    border: 1px solid var(--maho-border-subtle);
    border-radius: var(--maho-radius-sm);
    cursor: pointer;
    transition: border-color var(--maho-fast) var(--maho-ease),
                color var(--maho-fast) var(--maho-ease),
                background-color var(--maho-fast) var(--maho-ease);
}
.maho-carnav__btn:hover {
    color: var(--maho-champagne);
    border-color: var(--maho-champagne);
}
.maho-carnav__btn:disabled { opacity: 0.35; cursor: default; }
.maho-carnav__btn:disabled:hover { color: var(--maho-ivory); border-color: var(--maho-border-subtle); }

.maho-badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    padding: 4px 10px;
    background: rgba(11, 10, 10, 0.85);
    border: 1px solid var(--maho-border);
    border-radius: var(--maho-radius-sm);
    color: var(--maho-champagne-2);
    font-size: 10px;
    letter-spacing: 0.18em;
}

.maho-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--maho-champagne);
}

/* Carousel shells */
.maho-carousel { position: relative; }
.maho-carousel__track {
    display: flex;
    gap: var(--maho-s3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.maho-carousel__track::-webkit-scrollbar { display: none; }
.maho-carousel__track > * { scroll-snap-align: start; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   5. Announcement bar
   -------------------------------------------------------------------------- */
.maho-announce {
    background: var(--maho-burgundy-deep);
    border-bottom: 1px solid var(--maho-border-subtle);
    font-size: 11.5px;
    letter-spacing: 0.06em;
}
.maho-announce__inner {
    min-height: var(--maho-announce-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--maho-s2);
}
.maho-announce__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--maho-champagne-2);
}
.maho-announce__num { letter-spacing: 0.04em; }
.maho-announce__tools { display: inline-flex; align-items: center; gap: 10px; color: var(--maho-muted); }
.maho-announce__sep { opacity: 0.4; }
.maho-announce__select {
    background: transparent;
    border: 0;
    color: var(--maho-muted);
    font: inherit;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.maho-announce__select:hover { color: var(--maho-champagne-2); }
.maho-announce__select option { background: var(--maho-bg); color: var(--maho-ivory); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.maho-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 10, 10, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--maho-border-subtle);
}
.maho-header__inner {
    height: var(--maho-header-h);
    display: flex;
    align-items: center;
    gap: var(--maho-s3);
}

.maho-logo { display: inline-flex; flex-direction: column; line-height: 1; }
.maho-logo__name {
    font-family: var(--maho-serif);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-indent: 0.34em; /* optically balance the tracking (LTR brand word) */
    color: var(--maho-ivory);
}
.maho-logo__sub {
    margin-top: 5px;
    font-size: 8.5px;
    letter-spacing: 0.42em;
    color: var(--maho-champagne);
}

.maho-nav { margin-inline-start: auto; }
.maho-nav__list { display: flex; gap: clamp(18px, 2.6vw, 38px); }
.maho-nav__link {
    position: relative;
    display: inline-block;
    padding-block: 8px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--maho-ivory);
    transition: color var(--maho-fast) var(--maho-ease);
}
.maho-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--maho-burgundy-2);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--maho-mid) var(--maho-ease);
}
.maho-nav__link:hover { color: var(--maho-champagne-2); }
.maho-nav__link:hover::after,
.maho-nav__link.is-active::after { transform: scaleX(1); }
.maho-nav__link.is-active { color: var(--maho-ivory); }

.maho-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
}
.maho-nav + .maho-header__actions { margin-inline-start: 0; }

.maho-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--maho-ivory);
    border-radius: var(--maho-radius-sm);
    transition: color var(--maho-fast) var(--maho-ease);
}
.maho-iconbtn:hover { color: var(--maho-champagne-2); }

.maho-cartbtn { position: relative; }
.maho-cartbtn__count {
    position: absolute;
    top: 3px;
    inset-inline-end: 1px;
    min-width: 15px;
    height: 15px;
    padding-inline: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--maho-burgundy);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    color: var(--maho-ivory);
}

.maho-header__burger { display: none; }

/* Search panel */
.maho-searchpanel {
    border-top: 1px solid var(--maho-border-subtle);
    background: var(--maho-bg-2);
}
.maho-searchpanel[hidden] { display: none; }
.maho-searchpanel__form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 12px;
}
.maho-searchpanel__input {
    flex: 1;
    padding: 11px 16px;
    background: var(--maho-card);
    border: 1px solid var(--maho-border-subtle);
    border-radius: var(--maho-radius-sm);
    color: var(--maho-ivory);
    font: inherit;
    font-size: 13.5px;
}
.maho-searchpanel__input::placeholder { color: var(--maho-muted); }
.maho-searchpanel__input:focus {
    outline: none;
    border-color: var(--maho-champagne);
}
.maho-searchpanel__close { color: var(--maho-muted); }

/* --------------------------------------------------------------------------
   7. Mobile drawer
   -------------------------------------------------------------------------- */
.maho-drawer { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.maho-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 4, 4, 0.7);
    opacity: 0;
    transition: opacity var(--maho-mid) var(--maho-ease);
}
.maho-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    background: var(--maho-bg-2);
    border-inline-end: 1px solid var(--maho-border-subtle);
    transform: translateX(100%);
    transition: transform var(--maho-mid) var([--maho-ease]);
    transition: transform var(--maho-mid) var(--maho-ease);
}
[dir="rtl"] .maho-drawer__panel { transform: translateX(-100%); }
.maho-drawer.is-open { pointer-events: auto; }
.maho-drawer.is-open .maho-drawer__backdrop { opacity: 1; }
.maho-drawer.is-open .maho-drawer__panel { transform: translateX(0); }

.maho-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--maho-s2) var(--maho-s3);
    border-bottom: 1px solid var(--maho-border-subtle);
}
.maho-logo--drawer .maho-logo__name { font-size: 24px; }

.maho-drawer__nav { flex: 1; overflow-y: auto; padding: var(--maho-s3) 0; }
.maho-drawer__nav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 13px var(--maho-s3);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--maho-ivory);
    transition: color var(--maho-fast) var(--maho-ease), background-color var(--maho-fast) var(--maho-ease);
}
.maho-drawer__nav a:hover { color: var(--maho-champagne-2); }
.maho-drawer__nav a[aria-current="page"] {
    color: var(--maho-ivory);
    background: linear-gradient(to left, rgba(100, 31, 42, 0.35), transparent);
}
.maho-drawer__nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    background: var(--maho-burgundy-2);
}

.maho-drawer__foot { padding: var(--maho-s3); border-top: 1px solid var(--maho-border-subtle); }
.maho-drawer__tools { display: flex; gap: 12px; margin-top: var(--maho-s2); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.maho-hero {
    position: relative;
    height: clamp(560px, 78vh, 760px);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--maho-border-subtle);
}
.maho-hero__media { position: absolute; inset: 0; margin: 0; }
.maho-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 20%;
}
[dir="rtl"] .maho-hero__media img { object-position: 28% 20%; }
.maho-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to left, rgba(11,10,10,0) 32%, rgba(11,10,10,0.55) 58%, rgba(11,10,10,0.94) 86%),
        linear-gradient(to top, #0B0A0A 2%, rgba(11,10,10,0) 34%);
    z-index: 1;
}
[dir="ltr"] .maho-hero__scrim {
    background:
        linear-gradient(to right, rgba(11,10,10,0) 32%, rgba(11,10,10,0.55) 58%, rgba(11,10,10,0.94) 86%),
        linear-gradient(to top, #0B0A0A 2%, rgba(11,10,10,0) 34%);
}

.maho-hero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--maho-s4);
}
.maho-hero__content { max-width: 560px; }

.maho-hero__title {
    margin-top: var(--maho-s3);
    font-family: var(--maho-serif);
    font-weight: 500;
    font-size: clamp(46px, 6.5vw, 84px);
    line-height: 1.04;
    letter-spacing: 0.05em;
    color: var(--maho-ivory);
}
.maho-hero__title em {
    font-style: normal;
    color: var(--maho-champagne);
}

.maho-hero__lead {
    margin-top: var(--maho-s3);
    font-size: 15px;
    color: var(--maho-muted);
}

.maho-hero__cta { margin-top: var(--maho-s4); }

.maho-hero__story {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--maho-s6);
    color: var(--maho-ivory);
}
.maho-hero__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: var(--maho-champagne);
    transition: transform var(--maho-mid) var(--maho-ease), color var(--maho-fast) var(--maho-ease);
}
.maho-hero__play .icon { width: 58px; height: 58px; }
.maho-hero__story:hover .maho-hero__play {
    transform: scale(1.06);
    color: var(--maho-champagne-2);
}
.maho-hero__story-text {
    font-size: 11px;
    letter-spacing: 0.26em;
    line-height: 2;
    color: var(--maho-ivory);
}

/* --------------------------------------------------------------------------
   9. Features strip
   -------------------------------------------------------------------------- */
.maho-features {
    background: var(--maho-bg-2);
    border-bottom: 1px solid var(--maho-border-subtle);
}
.maho-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.maho-features__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px var(--maho-s3);
}
.maho-features__item + .maho-features__item { border-inline-start: 1px solid var(--maho-border-subtle); }
.maho-features__icon { color: var(--maho-champagne); }
.maho-features__icon .icon { width: 30px; height: 30px; stroke-width: 1.1; }
.maho-features__title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--maho-ivory);
}
.maho-features__text {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--maho-muted);
}

/* --------------------------------------------------------------------------
   10. Class cards
   -------------------------------------------------------------------------- */
.maho-class-card__inner {
    position: relative;
    width: clamp(220px, 24vw, 300px);
    background: var(--maho-card);
    border: 1px solid var(--maho-border);
    border-radius: var(--maho-radius);
    overflow: hidden;
    transition: transform var(--maho-mid) var(--maho-ease),
                border-color var(--maho-mid) var(--maho-ease),
                box-shadow var(--maho-mid) var(--maho-ease);
}
.maho-class-card__inner:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 170, 120, 0.45);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(100, 31, 42, 0.25);
}
.maho-class-card__media {
    display: block;
    aspect-ratio: 4 / 4.8;
    overflow: hidden;
}
.maho-class-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--maho-ease);
}
.maho-class-card__inner:hover .maho-class-card__media img { transform: scale(1.05); }
.maho-class-card__body { padding: 16px 18px 18px; }
.maho-class-card__title {
    font-family: var(--maho-serif);
    font-weight: 600;
    font-size: 20px;
    color: var(--maho-ivory);
}
.maho-class-card__level { margin-top: 2px; font-size: 12px; color: var(--maho-muted); }
.maho-class-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--maho-burgundy-2);
    transition: color var(--maho-fast) var(--maho-ease);
}
.maho-class-card__cta .icon { transition: transform var(--maho-fast) var(--maho-ease); }
.maho-class-card__inner:hover .maho-class-card__cta { color: var(--maho-champagne-2); }
.maho-class-card__inner:hover .maho-class-card__cta .icon { transform: translateX(-4px); }
[dir="ltr"] .maho-class-card__inner:hover .maho-class-card__cta .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   11. Product cards
   -------------------------------------------------------------------------- */
.maho-section--products { padding-top: 0; }
.maho-product-card__inner {
    position: relative;
    width: clamp(220px, 24vw, 300px);
    background: var(--maho-card);
    border: 1px solid var(--maho-border);
    border-radius: var(--maho-radius);
    overflow: hidden;
    transition: transform var(--maho-mid) var(--maho-ease),
                border-color var(--maho-mid) var(--maho-ease),
                box-shadow var(--maho-mid) var(--maho-ease);
}
.maho-product-card__inner:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 170, 120, 0.45);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.maho-product-card__media {
    position: relative;
    aspect-ratio: 4 / 4.8;
    background: #191614; /* warm neutral photo backdrop */
    overflow: hidden;
}
.maho-product-card__imglink { display: block; height: 100%; }
.maho-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--maho-back, var(--maho-ease));
}
.maho-product-card__inner:hover .maho-product-card__media img { transform: scale(1.05); }
.maho-wish {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(11, 10, 10, 0.6);
    border: 1px solid var(--maho-border-subtle);
    border-radius: 999px;
    color: var(--maho-ivory);
    cursor: pointer;
    transition: color var(--maho-fast) var(--maho-ease), border-color var(--maho-fast) var(--maho-ease), background-color var(--maho-fast) var(--maho-ease);
}
.maho-wish:hover,
.maho-wish.is-active { color: var(--maho-champagne-2); border-color: var(--maho-champagne); }
.maho-wish.is-active { background: rgba(200, 170, 120, 0.12); }

.maho-product-card__body { padding: 14px 16px 18px; }
.maho-product-card__name { font-size: 14px; font-weight: 500; color: var(--maho-ivory); }
.maho-product-card__price { margin-top: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--maho-ivory); }
.maho-product-card__inner .maho-stars { margin-top: 8px; }
.maho-product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--maho-burgundy-2);
    transition: color var(--maho-fast) var(--maho-ease);
}
.maho-product-card__cta .icon { transition: transform var(--maho-fast) var(--maho-ease); }
.maho-product-card__inner:hover .maho-product-card__cta { color: var(--maho-champagne-2); }
.maho-product-card__inner:hover .maho-product-card__cta .icon { transform: translateX(-4px); }
[dir="ltr"] .maho-product-card__inner:hover .maho-only-ltr, [dir="ltr"] .maho-product-card__inner:hover .maho-product-card__cta .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   12. Campaign banner
   -------------------------------------------------------------------------- */
.maho-campaign {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block: 1px solid var(--maho-border-subtle);
}
.maho-campaign__media { position: absolute; inset: 0; margin: 0; }
.maho-campaign__media img { width: 100%; height: 100%; object-fit: cover; }
.maho-campaign__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to left, rgba(11, 10, 10, 0.05) 40%, rgba(11, 10, 10, 0.78) 100%),
        rgba(11, 10, 10, 0.45);
    z-index: 1;
}
[dir="ltr"] .maho-campaign__scrim {
    background:
        linear-gradient(to right, rgba(11, 10, 10, 0.05) 40%, rgba(11, 10, 10, 0.78) 100%),
        rgba(11, 10, 10, 0.45);
}

.maho-campaign__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(56px, 9vw, 110px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--maho-s4);
}
.maho-campaign__title {
    margin-top: var(--maho-s2);
    font-family: var(--maho-serif);
    font-weight: 500;
    font-size: clamp(34px, 4.6vw, 56px);
    color: var(--maho-ivory);
}
.maho-campaign__desc { margin-top: 8px; color: var(--maho-muted); }
.maho-campaign__content .maho-btn { margin-top: var(--maho-s4); }
.maho-campaign__aside {
    font-size: 13px;
    letter-spacing: 0.22em;
    line-height: 2.1;
    text-align: start;
    color: var(--maho-champagne-2);
    flex: none;
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.maho-section--testimonials .maho-carousel__track { gap: var(--maho-s3); }
.maho-testimonial__inner {
    width: clamp(280px, 30vw, 384px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--maho-s3);
    margin: 0;
    padding: var(--maho-s3);
    background: var(--maho-card);
    border: 1px solid var(--maho-border);
    border-radius: var(--maho-radius);
    transition: border-color var(--maho-mid) var(--maho-ease), transform var(--maho-mid) var(--maho-ease);
}
.maho-testimonial__inner:hover { border-color: rgba(200, 170, 120, 0.45); }
.maho-testimonial__quote {
    font-size: 13.5px;
    line-height: 2;
    color: var(--maho-muted);
}
.maho-testimonial__footer { display: flex; align-items: center; gap: 14px; }
.maho-testimonial__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--maho-border);
}
.maho-testimonial__name { font-size: 13.5px; font-weight: 600; color: var(--maho-ivory); }
.maho-testimonial__role { margin-top: 1px; font-size: 11.5px; color: var(--maho-muted); }
.maho-testimonial__inner .maho-stars { margin-top: 6px; }

/* --------------------------------------------------------------------------
   14. Newsletter
   -------------------------------------------------------------------------- */
.maho-newsletter {
    position: relative;
    isolation: isolate;
    border-top: 1px solid var(--maho-border-subtle);
    overflow: hidden;
}
.maho-newsletter__media { position: absolute; inset: 0; margin: 0; }
.maho-newsletter__media img { width: 100%; height: 100%; object-fit: cover; }
.maho-newsletter__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(69, 19, 28, 0.92), rgba(23, 8, 12, 0.88));
}
.maho-newsletter__inner {
    position: relative;
    z-index: 2;
    padding-block: var(--maho-s6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--maho-s4);
    flex-wrap: wrap;
}
.maho-newsletter__title {
    font-family: var(--maho-serif);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 36px);
    color: var(--maho-ivory);
}
.maho-newsletter__text { margin-top: 8px; max-width: 480px; font-size: 13.5px; color: var(--maho-muted); }
.maho-newsletter__form { display: flex; gap: 10px; flex: 1 1 380px; max-width: 520px; }
.maho-newsletter__input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(11, 10, 10, 0.55);
    border: 1px solid var(--maho-border);
    border-radius: var(--maho-radius-sm);
    color: var(--maho-ivory);
    font: inherit;
    font-size: 13.5px;
}
.maho-newsletter__input::placeholder { color: var(--maho-muted); }
.maho-newsletter__input:focus { outline: none; border-color: var(--maho-champagne); }
.maho-newsletter__input.is-error { border-color: #b3495c; }
.maho-newsletter__msg { flex-basis: 100%; min-height: 1.2em; font-size: 12.5px; color: var(--maho-champagne-2); }
.maho-newsletter__msg.is-error { color: #d98a97; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.maho-footer {
    background: #070606;
    border-top: 1px solid var(--maho-border-subtle);
    padding-top: var(--maho-s7);
}
.maho-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr 1.3fr;
    gap: var(--maho-s4);
}
.maho-logo--footer .maho-logo__name { font-size: 26px; }
.maho-footer__about {
    margin-top: var(--maho-s2);
    max-width: 300px;
    font-size: 12.5px;
    line-height: 2;
    color: var(--maho-muted);
}
.maho-social { display: flex; gap: 8px; margin-top: var(--maho-s3); }
.maho-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--maho-border-subtle);
    border-radius: var(--maho-radius-sm);
    color: var(--maho-muted);
    transition: color var(--maho-fast) var(--maho-ease), border-color var(--maho-fast) var(--maho-ease);
}
.maho-social a:hover { color: var(--maho-champagne-2); border-color: var--maho-champagne); border-color: var(--maho-champagne); }

.maho-footer__title {
    font-family: var(--maho-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--maho-champagne);
    margin-bottom: var(--maho-s3);
}
.maho-footer__col ul li + li { margin-top: 12px; }
.maho-footer__col ul a {
    font-size: 13px;
    color: var(--maho-muted);
    transition: color var(--maho-fast) var(--maho-ease);
}
.maho-footer__col ul a:hover { color: var(--maho-champagne-2); }
.maho-footer__contact li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--maho-muted); }
.maho-footer__contact li + li { margin-top: 14px; }
.maho-footer__contact .icon { color: var(--maho-champagne); }

.maho-footer__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 250px; }
.maho-footer__gallery a { display: block; overflow: hidden; border-radius: var(--maho-radius-sm); }
.maho-footer__gallery img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: saturate(0.9);
    transition: transform var(--maho-mid) var(--maho-ease), filter var(--maho-mid) var(--maho-ease);
}
.maho-footer__gallery a:hover img { transform: scale(1.05); filter: saturate(1.05); }

.maho-footer__bottom {
    margin-top: var(--maho-s6);
    padding-block: var(--maho-s3);
    border-top: 1px solid var(--maho-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--maho-s2);
    flex-wrap: wrap;
}
.maho-footer__copy { font-size: 12px; color: var(--maho-muted); }
.maho-footer__payments { display: flex; gap: var(--maho-s2); }
.maho-footer__payments li {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--maho-muted);
    border: 1px solid var(--maho-border-subtle);
    border-radius: var(--maho-radius-sm);
    padding: 6px 12px;
}

/* --------------------------------------------------------------------------
   16. Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity var(--maho-slow) var(--maho-ease), transform var(--maho-slow) var(--maho-ease);
}

@media (prefers-reduced-motion: reduce) {
    .maho-page *, .maho-page *::before, .maho-page *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .maho-nav__list { gap: 16px; }
    .maho-nav__link { font-size: 11.5px; letter-spacing: 0.1em; }
    .maho-logo__name { font-size: 26px; }
}

@media (max-width: 1023px) {
    :root { --maho-header-h: 64px; }
    .maho-nav { display: none; }
    .maho-header__burger { display: inline-flex; }
    .maho-header__search-toggle { display: inline-flex; }
    .maho-hero { height: auto; min-height: 540px; }
    .maho-hero__inner { padding-block: var(--maho-s6) var(--maho-s6); }
    .maho-hero__story { position: absolute; inset-inline-end: var(--maho-gutter); bottom: var(--maho-s4); margin: 0; }
    .maho-features__grid { grid-template-columns: repeat(2, 1fr); }
    .maho-features__item:nth-child(3) { border-inline-start: 0; }
    .maho-features__item:nth-child(n+3) { border-top: 1px solid var(--maho-border-subtle); }
    .maho-footer__grid { grid-template-columns: 1fr 1fr; }
    .maho-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    :root { --maho-gutter: 16px; }
    .maho-announce__text .icon { display: none; }
    .maho-hero { min-height: 520px; }
    .maho-hero__media img { object-position: 60% 22%; }
    .maho-hero__content { max-width: 100%; }
    .maho-hero__title { font-size: clamp(38px, 11vw, 52px); }
    .maho-hero__story { position: static; margin-top: var(--maho-s4); }
    .maho-hero__inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
    .maho-section { padding-block: var(--maho-s6) var(--maho-s5); }
    .maho-section__head { flex-direction: column; align-items: flex-start; gap: var(--maho-s2); }
    .maho-section__aside { width: 100%; justify-content: space-between; }
    .maho-features__grid { grid-template-columns: 1fr 1fr; }
    .maho-features__item { padding: 18px 14px; }
    .maho-features__item:nth-child(even) { border-inline-start: 1px solid var(--maho-border-subtle); }
    .maho-features__item:nth-child(2) { border-inline-start: 1px solid var(--maho-border-subtle); }
    .maho-campaign__inner { flex-direction: column; align-items: flex-start; }
    .maho-newsletter__inner { flex-direction: column; align-items: flex-start; }
    .maho-footer__grid { grid-template-columns: 1fr; gap: var(--maho-s5); }
    .maho-footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
}

/* Very small phones */
@media (max-width: 400px) {
    .maho-hero__title { font-size: 34px; }
    .maho-features__grid { grid-template-columns: 1fr; }
    .maho-features__item:nth-child(n+2) { border-top: 1px solid var(--maho-border-subtle); }
    .maho-features__item:nth-child(even),
    .maho-features__item:nth-child(2) { border-inline-start: 0; }
}