@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Karantina:wght@300;400;700&display=swap");

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
    /* Font Families */
    --font-primary: "Assistant", sans-serif;
    --font-display: "Karantina", system-ui, sans-serif;
    --font-fallback: system-ui, -apple-system, sans-serif;
    --font-serif: Georgia, serif;

    /* Brand Colors */
    --primary-color: #ed3d35;
    --secondary-color: #f04c45;

    /* Base Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray: #f9f5f2;
    --color-dark-gray: #6a6a6a;

    /* Background Colors */
    --bg-color-white: #ffffff;
    --bg-color-black: #000000;
    --bg-color-gray: #f9f5f2;
    --bg-color-cream: #f9edcb;
    /*--bg-color-beige: #f1ede8;*/

    /* Border Colors */
    --border-color: #707070;

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 5px;
    --radius-base: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 24px;
    --radius-2xl: 30px;
    --radius-3xl: 40px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.6s ease;
    --transition-slower: 0.8s ease;
    --transition-bounce: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-bounce-slow: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Font Sizes - Fluid with clamp() */
    --font-2xs: clamp(0.625rem, 0.575rem + 0.25vw, 0.75rem); /* 10-12px */
    --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */
    --font-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /* 14-16px */
    --font-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem); /* 16-18px */
    --font-md: clamp(1.125rem, 1rem + 0.625vw, 1.375rem); /* 18-22px */
    --font-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); /* 20-28px */
    --font-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); /* 24-32px ✓ */
    --font-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); /* 28-40px */
    --font-3xl: clamp(2rem, 1.75rem + 1.25vw, 3rem); /* 32-48px */
    --font-4xl: clamp(2.25rem, 2rem + 1.25vw, 3.5rem); /* 36-56px */
    --font-5xl: clamp(2.5rem, 2rem + 2.5vw, 4rem); /* 40-64px ✓ */
    --font-6xl: clamp(3rem, 2.5rem + 2.5vw, 5rem); /* 48-80px */
    --font-7xl: clamp(3.5rem, 3rem + 2.5vw, 6rem); /* 56-96px */

    /* Spacing - Fluid with clamp() */
    --space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem); /* 4-8px */
    --space-2xs: clamp(0.375rem, 0.3rem + 0.375vw, 0.75rem); /* 6-12px */
    --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 1rem); /* 8-16px */
    --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem); /* 12-24px */
    --space-base: clamp(0.875rem, 0.7rem + 0.875vw, 1.75rem); /* 14-28px */
    --space-md: clamp(1rem, 0.8rem + 1vw, 2rem); /* 16-32px ✓ */
    --space-lg: clamp(1.25rem, 1rem + 1.25vw, 2.5rem); /* 20-40px */
    --space-xl: clamp(1.5rem, 1.2rem + 1.5vw, 3rem); /* 24-48px */
    --space-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem); /* 32-64px ✓ */
    --space-3xl: clamp(2.5rem, 2rem + 2.5vw, 5rem); /* 40-80px */
    --space-4xl: clamp(3rem, 2.5rem + 2.5vw, 6rem); /* 48-96px */
    --space-5xl: clamp(4rem, 3rem + 5vw, 8rem); /* 64-128px */
    --space-6xl: clamp(5rem, 4rem + 5vw, 10rem); /* 80-160px */
    --space-7xl: clamp(6rem, 5rem + 5vw, 12rem); /* 96-192px */

    /* Container & Layout */
    --container-padding: clamp(1rem, 3vw, 3rem); /* 16-48px */
    --container-max-width: clamp(320px, 90vw, 1600px);
    --content-width: clamp(320px, 90vw, 1200px);
}

/* ============================================
   COMMON COMPONENTS
   ============================================ */

/* Button */
.btn {
    display: inline-block;
    padding: calc(var(--space-2xs)) var(--space-md);
    font-family: var(--font-primary);
    font-size: var(--font-md);
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    text-align: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}
.btn.btn--primary {
        background-color: var(--primary-color);
        color: var(--color-white);
    }
.btn.btn--primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
.btn.btn--primary:active {
            transform: translateY(0);
        }
.btn.btn--outline {
        background-color: transparent;
        color: var(--primary-color);
        border: 1px solid var(--secondary-color);
    }
.btn.btn--outline:hover {
            color: var(--primary-color);
            transform: translateY(-2px);
        }
.btn.btn--outline:active {
            transform: translateY(0);
        }
.btn.btn--full {
        width: 100%;
    }

.section-title {
    font-size: var(--font-5xl);
    font-weight: 900;
    line-height: 1.1;
    color: var(--color-black);
}

@media (max-width: 768px) {

.section-title {
        font-size: var(--font-2xl);
}
    }

.section-description {
    font-size: var(--font-md);
    font-weight: 400;
    line-height: normal;
    color: var(--color-black);
}

@media (max-width: 768px) {

.section-description {
        font-size: var(--font-base);
}
    }

body {
    background-color: var(--bg-color-white);
    color: var(--color-black);
    line-height: 1.6;
    font-family: var(--font-primary); /* Add this */
    font-optical-sizing: auto; /* Add this for Assistant */
}

/* ============================================
   HERO SECTION
   ============================================ */
.main-hero {
    margin-top: var(--space-xl); /* Temporary */
    padding: var(--space-xl) var(--container-padding);
    background-color: var(--bg-color-white);
}
.main-hero .main-hero__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: flex;
        gap: var(--space-sm);
        align-items: stretch;
    }
@media (max-width: 768px) {
.main-hero .main-hero__container {
            flex-direction: column-reverse;
            gap: var(--space-md);
    }
        }
.main-hero .main-hero__offer {
        flex: 1;
        background-color: var(--bg-color-cream);
        padding: var(--space-3xl) var(--space-md);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: var(--radius-md);
    }
@media (max-width: 768px) {
.main-hero .main-hero__offer {
            padding-top: var(--space-4xl);
    }
        }
.main-hero .main-hero__title {
        font-size: var(--font-4xl);
        font-weight: 900;
        color: var(--color-black);
        margin-bottom: var(--space-xs);
        line-height: 1.1;
        letter-spacing: 0;
        white-space: nowrap;
    }
@media (max-width: 768px) {
.main-hero .main-hero__title {
            font-size: var(--font-2xl);
            margin-bottom: 0px;
    }
        }
.main-hero .main-hero__subtitle {
        font-size: var(--font-xl);
        font-weight: 400;
        letter-spacing: 0;
        color: var(--color-black);
        margin-bottom: var(--space-md);
    }
@media (max-width: 768px) {
.main-hero .main-hero__subtitle {
            font-size: var(--font-md);
            margin-bottom: var(--space-2xs);
    }
        }
.main-hero .main-hero__button {
    }
.main-hero .main-hero__visual {
        flex: 1.6;
        border-radius: var(--radius-md);
        background-color: var(--bg-color-gray);
        overflow: hidden;
    }
@media (max-width: 768px) {
.main-hero .main-hero__visual {
            height: 400px;
    }
        }
@media (max-width: 600px) {
.main-hero .main-hero__visual {
            height: 250px;
    }
        }
.main-hero .main-hero__image {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        display: block;
        transition: transform var(--transition-slower);
    }
.main-hero .main-hero__image:hover {
            transform: scale(1.02);
        }

/* ============================================
   INTRO SECTION
   ============================================ */
.main-intro {
    padding: var(--space-3xl) var(--container-padding);
    background-color: var(--bg-color-white);
    text-align: center;
}
.main-intro .main-intro__container {
        width: 100%;
        /*max-width: var(--container-max-width);*/
        max-width: var(--content-width);
        margin: 0 auto;
    }
.main-intro .main-intro__title {
        margin-bottom: var(--space-2xs);
    }
.main-intro .main-intro__text {
        margin: 0 auto var(--space-sm);
    }
.main-intro .main-intro__actions {
        display: flex;
        justify-content: center;
        gap: var(--space-md);
        direction: rtl;
    }
@media (max-width: 768px) {
.main-intro .main-intro__actions {
            align-items: center;
            gap: var(--space-3xs);
    }
        }
@media (max-width: 768px) {
.main-intro .main-intro__button {
            font-size: var(--font-base);
            padding: calc(var(--space-2xs)) var(--space-xs);
    }
        }

/* ============================================
   MAIN VIDEO SECTION
   ============================================ */
.main-video {
    padding: var(--space-5xl) var(--container-padding);
    background-color: var(--bg-color-white);
    display: flex;
    justify-content: center;
}
@media (max-width: 768px) {
.main-video {
        padding: var(--space-3xl) var(--container-padding) var(--space-md);
}
    }
.main-video .main-video__container {
        width: 100%;
        max-width: var(--container-max-width);
    }
.main-video .main-video__placeholder {
        position: relative;
        cursor: pointer;
        border-radius: var(--radius-md);
        overflow: hidden;
        aspect-ratio: 16 / 9;
        width: 100%;
        max-height: clamp(400px, 50vw, 758px);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-color-gray);
        transition:
            transform var(--transition-bounce-slow),
            box-shadow var(--transition-medium);
    }
.main-video .main-video__placeholder:hover {
            transform: translateY(-5px);
        }
.main-video .main-video__placeholder:hover .main-video__thumb {
                transform: scale(1.05);
                opacity: 0.8;
            }
.main-video .main-video__placeholder:hover .main-video__play-icon {
                transform: scale(1.15) translate(-50%, -50%);
            }
.main-video .main-video__thumb {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        transition:
            transform var(--transition-slower),
            opacity var(--transition-slower);
    }
.main-video .main-video__play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
        z-index: 2;
        transition: transform var(--transition-bounce);
        filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.4));
    }
@media (max-width: 768px) {
.main-video .main-video__play-icon {
            width: 70px;
            height: 70px;
    }
        }
.main-video .main-video__play-icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }
.main-video .main-video__iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

/* ============================================
   GALLERY CATEGORIES SECTION
   ============================================ */
.main-gallery-categories {
    padding: var(--space-4xl) var(--container-padding);
    background-color: var(--bg-color-white);
}
.main-gallery-categories .main-gallery-categories__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        background-color: var(--bg-color-gray);
        padding: var(--space-lg) var(--space-7xl) var(--space-xl);
        border-radius: var(--radius-2xl);
    }
@media (max-width: 768px) {
.main-gallery-categories .main-gallery-categories__container {
            padding: var(--space-xl) var(--space-md);
    }
        }
.main-gallery-categories .main-gallery-categories__header {
        text-align: center;
        margin-bottom: var(--space-md);
    }
.main-gallery-categories .main-gallery-categories__title {
        padding: var(--space-3xs) 0;
    }
.main-gallery-categories .main-gallery-categories__text {
    }
.main-gallery-categories .main-gallery-categories__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xs);
        direction: rtl;
    }
@media (max-width: 768px) {
.main-gallery-categories .main-gallery-categories__grid {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-sm);
    }
        }
.main-gallery-categories .main-gallery-categories__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        transition: transform var(--transition-base);
    }
.main-gallery-categories .main-gallery-categories__item:hover {
            transform: translateY(-8px);
        }
.main-gallery-categories .main-gallery-categories__item:hover .main-gallery-categories__image {
                transform: scale(1.1);
            }
.main-gallery-categories .main-gallery-categories__item:hover .main-gallery-categories__label {
                color: var(--accent-color);
            }
.main-gallery-categories .main-gallery-categories__image-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--radius-sm);
        background-color: var(--bg-color-white);
    }
.main-gallery-categories .main-gallery-categories__image {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        transition: transform var(--transition-slow);
    }
.main-gallery-categories .main-gallery-categories__label {
        font-size: var(--font-md);
        color: var(--color-black);
        transition: color var(--transition-base);
        text-align: center;
    }

/* ============================================
   ADVANTAGES SECTION
   ============================================ */
.main-advantages {
    padding: var(--space-3xl) var(--container-padding);
    background-color: var(--bg-color-white);
}
.main-advantages .main-advantages__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
    }
.main-advantages .main-advantages__header {
        text-align: center;
        margin-bottom: var(--space-lg);
    }
@media (max-width: 768px) {
.main-advantages .main-advantages__header {
            margin-bottom: var(--space-2xl);
    }
        }
.main-advantages .main-advantages__title {
    }
.main-advantages .main-advantages__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /*grid-template-columns: repeat(auto-fit, minmax(min(297px, 100%), 1fr));*/
        grid-auto-rows: 315px;
        gap: var(--space-xs);
        direction: rtl;
    }
@media (max-width: 1200px) {
.main-advantages .main-advantages__grid {
            grid-template-columns: repeat(2, 1fr);
    }
        }
@media (max-width: 768px) {
.main-advantages .main-advantages__grid {
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-rows: auto;
    }
        }
.main-advantages .main-advantages__card {
        background-color: var(--bg-color-white);
        padding: var(--space-sm) var(--space-xs);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: right;
        border-radius: var(--radius-sm);
        box-shadow: 0px 0px 10px #00000014;
        transition: all var(--transition-base);
        position: relative;
    }
.main-advantages .main-advantages__card:hover {
            transform: translateY(-5px);
        }
.main-advantages .main-advantages__number {
        font-size: var(--font-lg);
        font-weight: 900;
        color: var(--color-black);
        margin-bottom: -18px;
    }
@media (max-width: 768px) {
.main-advantages .main-advantages__number {
            margin-bottom: -10px;
    }
        }
.main-advantages .main-advantages__card-title {
        font-size: var(--font-lg);
        font-weight: 900;
        color: var(--color-black);
        margin-bottom: var(--space-xs);
        width: 100%;
    }
.main-advantages .main-advantages__card-text {
        font-size: var(--font-base);
        line-height: 1.6;
        color: var(--color-gray-600);
        font-weight: 400;
    }
.main-advantages .main-advantages__art {
        background-color: var(--bg-color-gray);
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: transform var(--transition-base);
    }
.main-advantages .main-advantages__art:hover {
            transform: scale(1.02);
        }
@media (max-width: 768px) {
.main-advantages .main-advantages__art {
            display: none;
    }
        }
.main-advantages .main-advantages__action {
        text-align: center;
        margin-top: var(--space-lg);
    }
.main-advantages .main-advantages__button {
        padding: var(--space-2xs) var(--space-2xl);
    }

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
.main-testimonials {
    padding: var(--space-3xl) var(--container-padding);
    background-color: var(--bg-color-white);
}
.main-testimonials .main-testimonials__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        background-color: var(--bg-color-gray);
        padding: var(--space-5xl) var(--space-4xl) var(--space-4xl);
        border-radius: var(--radius-2xl);
        position: relative;
    }
@media (max-width: 768px) {
.main-testimonials .main-testimonials__container {
            padding: var(--space-4xl) 0;
    }
        }
.main-testimonials .main-testimonials__header {
        text-align: center;
        margin-bottom: var(--space-base);
    }
@media (max-width: 768px) {
.main-testimonials .main-testimonials__header {
            margin-bottom: var(--space-xl);
    }
        }
.main-testimonials .main-testimonials__title {
    }
.main-testimonials .main-testimonials__slider-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
.main-testimonials .main-testimonials__nav {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-black);
        padding: var(--space-xs);
        z-index: 10;
        transition:
            transform var(--transition-base),
            color var(--transition-base);
    }
.main-testimonials .main-testimonials__nav:hover {
            color: var(--accent-color);
            transform: scale(1.2);
        }
.main-testimonials .main-testimonials__nav svg {
            width: 32px;
            height: 32px;
        }
@media (max-width: 768px) {
.main-testimonials .main-testimonials__nav {
            padding: 0;
            margin: 0;
    }
        }
.main-testimonials .main-testimonials__track {
        display: flex;
        gap: var(--space-2xs);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--space-xs);
    }
.main-testimonials .main-testimonials__track::-webkit-scrollbar {
            display: none;
        }
.main-testimonials .main-testimonials__card {
        flex: 0 0 calc(25% - 6px);
        background-color: var(--bg-color-white);
        border-radius: var(--radius-xs);
        overflow: hidden;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        text-align: right;
        padding: var(--space-xs) var(--space-sm);
    }
@media (max-width: 1100px) {
.main-testimonials .main-testimonials__card {
            flex: 0 0 calc(33.333% - 14px);
    }
        }
@media (max-width: 850px) {
.main-testimonials .main-testimonials__card {
            flex: 0 0 calc(50% - 10px);
    }
        }
@media (max-width: 500px) {
.main-testimonials .main-testimonials__card {
            flex: 0 0 100%;
    }
        }
.main-testimonials .main-testimonials__image-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
.main-testimonials .main-testimonials__image {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
.main-testimonials .main-testimonials__content {
        padding: var(--space-sm) 0px var(--space-2xs);
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }
.main-testimonials .main-testimonials__text {
        font-size: var(--font-sm);
        line-height: 1.5;
        color: var(--color-black);
        font-weight: 400;
    }
.main-testimonials .main-testimonials__name {
        font-size: var(--font-base);
        color: var(--color-black);
        margin-top: auto;
    }

/* ============================================
   FAQ SECTION
   ============================================ */
.main-faq {
    padding: var(--space-4xl) var(--container-padding) var(--space-5xl);
    background-color: var(--bg-color-white);
}
.main-faq .main-faq__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
    }
.main-faq .main-faq__wrapper {
        display: flex;
        gap: var(--space-3xl);
        align-items: center;
    }
@media (max-width: 992px) {
.main-faq .main-faq__wrapper {
            flex-direction: column;
            gap: var(--space-xl);
    }
        }
.main-faq .main-faq__content {
        flex: 1;
        width: 100%;
    }
.main-faq .main-faq__title {
        text-align: right;
        margin-bottom: var(--space-base);
    }
@media (max-width: 768px) {
.main-faq .main-faq__title {
            text-align: center;
            margin-bottom: var(--space-4xl);
    }
        }
.main-faq .main-faq__accordion {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
    }
.main-faq .main-faq__item {
        background-color: var(--bg-color-white);
        border-radius: var(--radius-sm);
        box-shadow: 0px 0px 10px #00000019;
        overflow: hidden;
        transition: all var(--transition-base);
    }
.main-faq .main-faq__item.main-faq__item--active {
            box-shadow: 0px 0px 10px #00000019;
        }
.main-faq .main-faq__item.main-faq__item--active .main-faq__answer {
                grid-template-rows: 1fr;
                padding-bottom: var(--space-2xs);
                opacity: 1;
            }
.main-faq .main-faq__item.main-faq__item--active .main-faq__icon {
                transform: rotate(180deg);
                color: var(--primary-color);
            }
.main-faq .main-faq__question {
        width: 100%;
        padding: var(--space-3xs) var(--space-2xs);
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        text-align: right;
        font-size: var(--font-md);
        color: var(--color-black);
        transition: color var(--transition-base);
    }
.main-faq .main-faq__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
            transform var(--transition-base),
            color var(--transition-base);
    }
.main-faq .main-faq__answer {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.4s ease;
        padding: 0 var(--space-2xs);
        font-size: var(--font-base);
        line-height: 1.6;
        color: var(--color-black);
        font-weight: 400;
        border-top: none;
        overflow: hidden;
        opacity: 0;
    }
.main-faq .main-faq__answer p {
          min-height: 0;
        }
.main-faq .main-faq__image-wrapper {
        flex: 1;
        width: 100%;
        max-width: 700px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--radius-md);
        background-color: var(--bg-color-gray);
        transition: transform var(--transition-slower);
    }
.main-faq .main-faq__image-wrapper:hover {
            transform: scale(1.02);
        }
@media (max-width: 992px) {
.main-faq .main-faq__image-wrapper {
            max-width: 100%;
    }
        }
.main-faq .main-faq__image {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

/* ============================================
   MAIN FOOTER
   ============================================ */
.main-footer {
    background-color: var(--bg-color-gray);
    padding: var(--space-xl) var(--container-padding) var(--space-2xl);
}
@media (max-width: 992px) {
.main-footer {
        padding: var(--space-4xl) var(--container-padding) var(--space-2xl);
}
    }
.main-footer .main-footer__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-2xl);
    }
@media (max-width: 992px) {
.main-footer .main-footer__container {
            flex-direction: column-reverse;
            gap: var(--space-2xl);
            align-items: center;
            text-align: center;
    }
        }
.main-footer .main-footer__branding {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: flex-start;
    }
@media (max-width: 992px) {
.main-footer .main-footer__branding {
            align-items: center;
    }
        }
.main-footer .footer-logo {
        position: relative;
    }
.main-footer .footer-logo .footer-logo__img {
            width: 200px;
            height: 200px;
        }
.main-footer .main-footer__socials {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: var(--space-sm);
    }
.main-footer .social-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-full);
        transition: all var(--transition-base);
    }
.main-footer .social-icon:hover {
            border-color: var(--color-black);
            background-color: var(--color-white);
            transform: scale(1.1);
        }
.main-footer .social-icon .social-icon__img {
            width: 37px;
            height: 37px;
        }
.main-footer .main-footer__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
    }
@media (max-width: 992px) {
.main-footer .main-footer__content {
            align-items: center;
    }
        }
.main-footer .main-footer__newsletter {
        width: 100%;
        max-width: 500px;
        margin-bottom: var(--space-2xl);
    }
@media (max-width: 992px) {
.main-footer .main-footer__newsletter {
            margin-bottom: var(--space-5xl);
    }
        }
.main-footer .main-footer__newsletter-title {
        font-size: var(--font-xl);
        text-align: right;
        margin-bottom: var(--space-md);
    }
@media (max-width: 992px) {
.main-footer .main-footer__newsletter-title {
            text-align: center;
            margin-bottom: var(--space-2xl);
    }
        }
.main-footer .main-footer__newsletter-form {
        display: flex;
        flex-direction: row-reverse;
        gap: var(--space-xs);
        padding-bottom: var(--space-2xs);
        width: 100%;
    }
.main-footer .main-footer__newsletter-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-size: var(--font-base);
        color: var(--color-black);
        padding: var(--space-xs) 0;
        text-align: right;
        border-bottom: 1px solid var(--border-color);
    }
.main-footer .main-footer__newsletter-button {
        padding: var(--space-2xs) var(--space-lg);
    }
.main-footer .main-footer__links {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100px, 100%), 160px)
        );
        gap: var(--space-2xl);
        direction: rtl;
    }
@media (max-width: 768px) {
.main-footer .main-footer__links {
            grid-template-columns: repeat(
                auto-fit,
                minmax(min(150px, 100%), 1fr)
            );
            gap: 0 var(--space-2xl);
    }
        }
.main-footer .main-footer__column:nth-child(3) {
            display: none;
        }
@media (max-width: 576px) {
.main-footer .main-footer__column:nth-child(3) {
                display: block;
        }
            }
.main-footer .main-footer__list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
        text-align: right;
    }
@media (max-width: 992px) {
.main-footer .main-footer__list {
    }
        }
.main-footer .main-footer__list li a {
            text-decoration: none;
            color: var(--color-black);
            font-size: var(--font-base);
            transition: color var(--transition-fast);
        }
.main-footer .main-footer__list li a:hover {
                /*color: var(--accent-color);*/
            }

/* ============================================
   CATEGORY BANNER SECTION
   ============================================ */

.category-banner {
    margin-top: var(--space-xl); /* Temporary */
    padding: var(--space-xl) var(--container-padding) var(--space-3xs);
    background-color: var(--bg-color-white);
}

.category-banner .category-banner__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
    }

.category-banner .category-banner__visual {
        flex: 1.6;
        border-radius: var(--radius-md);
        background-color: var(--bg-color-gray);
        overflow: hidden;
    }

@media (max-width: 768px) {

.category-banner .category-banner__visual {
            max-height: 165px;
    }
        }

.category-banner .category-banner__img {
        width: 100%;
        height: 400px;
        -o-object-fit: cover;
           object-fit: cover;
        display: block;
        transition: transform var(--transition-slower);
    }

.category-banner .category-banner__img:hover {
            transform: scale(1.02);
        }

/* ============================================
   CATEGORY INTRO SECTION
   ============================================ */
.category-intro {
    padding: var(--space-2xs) var(--container-padding) var(--space-xl);
    background-color: var(--bg-color-white);
    text-align: center;
}
.category-intro .category-intro__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
    }
.category-intro .category-intro__title {
        font-family: var(--font-display);
        margin-bottom: var(--space-2xs);
    }
.category-intro .category-intro__text {
        margin-bottom: var(--space-sm);
    }

/* ============================================
   CATEGORY FILTERS SECTION
   ============================================ */
.category-filters {
    padding: var(--space-xs) 0;

    /* Filter Bar Styling (used inside category-filters) */
}
.category-filters .filter-bar {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        align-items: flex-end;
    }
.category-filters .filter-bar__dropdowns {
        display: flex;
        gap: var(--space-xs);
        justify-content: center;
        flex-wrap: wrap;
        direction: rtl;
    }
.category-filters .filter-dropdown {
        position: relative;
    }
.category-filters .filter-dropdown__trigger {
        background-color: #f7eee7;
        border: none;
        padding: var(--space-3xs) var(--space-xs);
        border-radius: var(--radius-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: var(--space-3xs);
        font-size: var(--font-md);
        font-weight: 600;
        transition: background-color var(--transition-fast);
        color: var(--color-black);
    }
.category-filters .filter-dropdown__trigger:hover {
            background-color: #eeddcc;
        }
.category-filters .filter-dropdown__arrow {
        transition: transform var(--transition-base);
    }
.category-filters .filter-dropdown--open .filter-dropdown__arrow {
        transform: rotate(180deg);
    }
.category-filters .filter-dropdown__menu {
        position: absolute;
        top: 100%;
        right: 0; /* Align to right for RTL */
        background-color: var(--color-white);
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-sm);
        padding: var(--space-sm);
        min-width: 180px;
        z-index: 100;
        display: none;
        flex-direction: column;
        gap: 8px;
        margin-top: 5px;
        text-align: right;
    }
.category-filters .filter-dropdown--open .filter-dropdown__menu {
        display: flex;
    }
/* Filter Options */
.category-filters .filter-option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs);
        cursor: pointer;
        font-size: var(--font-xs);
        padding: calc(var(--space-xs) / 2) var(--space-3xs);
        border-radius: var(--radius-md);
    }
.category-filters .filter-option:hover {
            background-color: var(--color-gray-100);
        }
.category-filters .filter-option input {
            cursor: pointer;
        }
.category-filters .filter-bar__tags {
        display: flex;
        gap: var(--space-xs);
        flex-wrap: wrap;
        justify-content: center;
        min-height: 32px;
    }
.category-filters .filter-tag {
        background-color: var(--color-gray-100);
        padding: 4px 10px;
        font-size: var(--font-xs);
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--color-black);
        box-shadow: 0px 0px 3px #00000029;
    }
.category-filters .filter-tag__remove {
        cursor: pointer;
        font-weight: bold;
        font-size: var(--font-xs);
        line-height: 1;
    }
.category-filters .filter-tag__remove:hover {
            color: var(--primary-color);
        }

/* ============================================
   CATEGORY GRID SECTION
   ============================================ */
.category-grid {
    padding: var(--space-xs) var(--container-padding) var(--space-xl);
    background-color: var(--bg-color-white);
}
@media (max-width: 768px) {
.category-grid {
        padding: var(--space-xs) var(--container-padding) var(--space-sm);
}
    }
.category-grid .category-grid__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        padding-inline: var(--space-7xl);
    }
@media (max-width: 992px) {
.category-grid .category-grid__container {
            padding-inline: 0;
    }
        }
.category-grid .category-grid__items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
        direction: rtl;
    }
@media (max-width: 992px) {
.category-grid .category-grid__items {
            grid-template-columns: repeat(2, 1fr);
    }
        }
.category-grid .category-grid__item {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background-color: var(--bg-color-gray);
    }
.category-grid .category-grid__item img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            transition: transform var(--transition-medium);
        }
.category-grid .category-grid__item:hover img {
            transform: scale(1.05);
        }

/* ============================================
   CATEGORY PAGINATION SECTION
   ============================================ */
.category-pagination {
    padding: 0 var(--container-padding) var(--space-6xl);
    background-color: var(--bg-color-white);
}
.category-pagination .category-pagination__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
    }
.category-pagination .pagination {
        display: flex;
        justify-content: center;
        gap: var(--space-2xs);
    }
.category-pagination .pagination__link {
        font-size: var(--font-base);
        text-decoration: none;
        color: var(--color-dark-gray);
        transition: color var(--transition-fast);
    }
.category-pagination .pagination__link:hover {
            color: var(--primary-color);
        }
.category-pagination .pagination__link--active {
        font-weight: 700;
        color: var(--color-black);
    }