/* =========================================================
   ALAQ PUBLIC WEBSITE
   SHARED STYLES
========================================================= */


/* =========================================================
   BRAND VARIABLES
========================================================= */

:root {
    --alaq-deep: #041e1d;

    --alaq-dark: #06302e;

    --alaq-green: #0b4a47;

    --alaq-green-soft: #145d58;

    --alaq-ivory: #f4f0e7;

    --alaq-cream: #e8e1d5;

    --alaq-white: #fffdf8;

    --alaq-text: #123230;

    --alaq-muted: #708481;

    --alaq-border:
        rgba(
            6,
            48,
            46,
            0.14
        );

    --alaq-shadow:
        0 18px 45px
        rgba(
            4,
            30,
            29,
            0.08
        );
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color:
        var(--alaq-text);

    background:
        var(--alaq-white);
    font-family:
        "Poppins" !important;
    line-height: 1.5;
}


body[dir="rtl"] {
    font-family:
        "Poppins" !important;
}


a {
    color: inherit;

    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


img {
    max-width: 100%;

    display: block;
}


/* =========================================================
   ANNOUNCEMENT BAR
========================================================= */

.announcement-bar {
    padding:
        9px
        20px;

    background:
        var(--alaq-deep);

    color:
        var(--alaq-ivory);

    text-align: center;
}


.announcement-bar p {
    margin: 0;

    font-size: 11px;

    letter-spacing: 0.5px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;

    top: 0;

    z-index: 500;

    border-bottom:
        1px solid
        var(--alaq-border);

    background:
        rgba(
            255,
            253,
            248,
            0.96
        );

    backdrop-filter:
        blur(12px);
}


.header-container {
    max-width: 1400px;

    min-height: 78px;

    margin: 0 auto;

    padding:
        0
        32px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    width: 95px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    flex-shrink: 0;
}


.site-logo img {
    width: 100%;

    height: 100%;

    object-fit: contain;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-navigation {
    display: flex;

    align-items: center;

    gap: 34px;
}


.desktop-navigation a {
    position: relative;

    padding:
        29px
        0;

    color:
        var(--alaq-muted);

    font-size: 13px;

    font-weight: 500;

    transition:
        color
        0.2s ease;
}


.desktop-navigation a:hover,
.desktop-navigation a.active {
    color:
        var(--alaq-green);
}


.desktop-navigation a.active::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 20px;

    height: 2px;

    background:
        var(--alaq-green);
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
    display: flex;

    align-items: center;

    gap: 17px;
}


.language-button {
    border: 0;

    background: transparent;

    color:
        var(--alaq-green);

    font-size: 12px;

    font-weight: 800;

    padding: 7px;

    transition:
        opacity
        0.2s ease;
}


.language-button:hover {
    opacity: 0.65;
}


.header-icon-link,
.cart-link {
    color:
        var(--alaq-text);

    font-size: 12px;

    transition:
        color
        0.2s ease;
}


.header-icon-link:hover,
.cart-link:hover {
    color:
        var(--alaq-green);
}


.cart-link {
    display: flex;

    align-items: center;

    gap: 6px;
}


.cart-count {
    min-width: 20px;

    height: 20px;

    padding:
        0
        5px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {
    display: none;

    border: 0;

    background: transparent;

    color:
        var(--alaq-green);

    font-size: 22px;

    padding: 4px;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-navigation {
    display: none;

    padding:
        5px
        24px
        22px;

    border-top:
        1px solid
        var(--alaq-border);

    background:
        var(--alaq-white);
}


.mobile-navigation.active {
    display: flex;

    flex-direction: column;
}


.mobile-navigation a {
    padding:
        13px
        0;

    border-bottom:
        1px solid
        var(--alaq-border);

    color:
        var(--alaq-text);

    font-size: 14px;
}


/* =========================================================
   HERO
========================================================= */

.hero-section {
    min-height:
        calc(
            100vh - 110px
        );

    display: grid;

    grid-template-columns:
        1fr
        1fr;
}


.hero-content {
    padding:
        90px
        max(
            7vw,
            45px
        );

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        var(--alaq-ivory);
}


.hero-eyebrow,
.section-eyebrow {
    margin-bottom: 18px;

    color:
        var(--alaq-green-soft);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.hero-content h1 {
    max-width: 650px;

    margin:
        0
        0
        25px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins" !important;

    font-size:
        clamp(
            48px,
            6vw,
            92px
        );

    font-weight: 400;

    line-height: 0.98;
}


body[dir="rtl"]
.hero-content h1 {
    font-family:
        "Poppins" !important;
}


.hero-content p {
    max-width: 560px;

    margin:
        0
        0
        35px;

    color:
        var(--alaq-muted);

    font-size: 15px;

    line-height: 1.9;
}


.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-link-button,
.secondary-link-button,
.light-button {
    min-height: 48px;

    padding:
        0
        23px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    transition:
        background
        0.2s ease,
        color
        0.2s ease,
        border-color
        0.2s ease;
}


.primary-link-button {
    border:
        1px solid
        var(--alaq-green);

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);
}


.primary-link-button:hover {
    border-color:
        var(--alaq-deep);

    background:
        var(--alaq-deep);
}


.secondary-link-button {
    border:
        1px solid
        var(--alaq-green);

    background:
        transparent;

    color:
        var(--alaq-green);
}


.secondary-link-button:hover {
    background:
        var(--alaq-green);

    color:
        var(--alaq-white);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    min-height: 670px;

    padding: 40px;

    display: flex;

    align-items: stretch;

    background:
        linear-gradient(
            145deg,
            var(--alaq-green),
            var(--alaq-deep)
        );
}


.hero-visual-inner {
    width: 100%;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            244,
            240,
            231,
            0.18
        );

    background:
        radial-gradient(
            circle at center,
            rgba(
                20,
                93,
                88,
                0.5
            ),
            transparent 65%
        );
}


.hero-logo-image {
    width:
        min(
            70%,
            440px
        );

    max-height: 75%;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            25px
            40px
            rgba(
                0,
                0,
                0,
                0.24
            )
        );
}


.hero-big-logo {
    color:
        rgba(
            244,
            240,
            231,
            0.92
        );

    font-family:
        "Poppins" !important;

    font-size:
        clamp(
            210px,
            27vw,
            470px
        );

    line-height: 1;
}


.hero-visual-caption {
    position: absolute;

    left: 30px;

    bottom: 30px;

    color:
        var(--alaq-ivory);

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


body[dir="rtl"]
.hero-visual-caption {
    left: auto;

    right: 30px;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits-section {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    border-bottom:
        1px solid
        var(--alaq-border);

    background:
        var(--alaq-white);
}


.benefit-item {
    padding:
        38px
        45px;

    text-align: center;

    border-inline-end:
        1px solid
        var(--alaq-border);
}


.benefit-item:last-child {
    border-inline-end: 0;
}


.benefit-item h3 {
    margin:
        0
        0
        10px;

    color:
        var(--alaq-deep);

    font-size: 13px;

    font-weight: 700;
}


.benefit-item p {
    max-width: 350px;

    margin:
        0
        auto;

    color:
        var(--alaq-muted);

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   FEATURED PRODUCTS
========================================================= */

.featured-section {
    max-width: 1400px;

    margin: 0 auto;

    padding:
        95px
        32px;

    background:
        var(--alaq-white);
}


.section-header {
    display: flex;

    align-items: end;

    justify-content:
        space-between;

    gap: 30px;

    margin-bottom: 38px;
}


.section-header h2 {
    margin: 0;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins" !important;
    font-size:
        clamp(
            32px,
            4vw,
            52px
        );

    font-weight: 400;
}


body[dir="rtl"]
.section-header h2 {
    font-family:
        "Poppins" !important;
}


.view-all-link,
.text-link {
    border-bottom:
        1px solid
        var(--alaq-green);

    padding-bottom: 4px;

    color:
        var(--alaq-green);

    font-size: 11px;

    font-weight: 700;
}


.view-all-link:hover,
.text-link:hover {
    color:
        var(--alaq-deep);

    border-color:
        var(--alaq-deep);
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 22px;
}


.products-loading,
.products-empty {
    grid-column:
        1 / -1;

    padding:
        70px
        20px;

    color:
        var(--alaq-muted);

    text-align: center;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    min-width: 0;

    color:
        var(--alaq-text);
}


.product-image-wrapper {
    position: relative;

    aspect-ratio:
        3 / 4;

    overflow: hidden;

    background:
        var(--alaq-ivory);
}


.product-image-wrapper img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.5s ease;
}


.product-card:hover
.product-image-wrapper img {
    transform:
        scale(
            1.035
        );
}


.product-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            var(--alaq-cream),
            var(--alaq-ivory)
        );

    color:
        var(--alaq-green-soft);

    font-family:
        "Poppins" !important;

    font-size: 72px;
}


.product-stock-badge {
    position: absolute;

    left: 12px;

    top: 12px;

    padding:
        7px
        10px;

    background:
        rgba(
            255,
            253,
            248,
            0.94
        );

    color:
        var(--alaq-deep);

    font-size: 9px;

    font-weight: 800;

    border:
        1px solid
        var(--alaq-border);
}


body[dir="rtl"]
.product-stock-badge {
    left: auto;

    right: 12px;
}


.product-card-info {
    padding:
        16px
        2px
        0;
}


.product-category {
    margin-bottom: 7px;

    color:
        var(--alaq-muted);

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.product-card-info h3 {
    margin:
        0
        0
        8px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins" !important;

    font-size: 17px;

    font-weight: 400;
}


body[dir="rtl"]
.product-card-info h3 {
    font-family:
        "Poppins" !important;
}


.product-price {
    margin: 0;

    color:
        var(--alaq-green);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   HOME ABOUT SECTION
========================================================= */

.home-about-section {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    background:
        var(--alaq-ivory);
}


.home-about-visual {
    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            var(--alaq-green-soft),
            var(--alaq-dark)
        );
}


.about-logo-image {
    width:
        min(
            65%,
            340px
        );

    object-fit: contain;

    filter:
        drop-shadow(
            0
            22px
            34px
            rgba(
                0,
                0,
                0,
                0.22
            )
        );
}


.about-visual-text {
    color:
        rgba(
            244,
            240,
            231,
            0.78
        );
    font-family:
        "Poppins" !important;

    font-size:
        clamp(
            65px,
            10vw,
            160px
        );

    letter-spacing: 10px;
}


.home-about-content {
    padding:
        80px
        max(
            7vw,
            50px
        );

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.home-about-content h2 {
    margin:
        0
        0
        25px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins" !important;

    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    font-weight: 400;

    line-height: 1.05;
}


body[dir="rtl"]
.home-about-content h2 {
    font-family:
        "Poppins" !important;
}


.home-about-content p {
    max-width: 580px;

    margin:
        0
        0
        30px;

    color:
        var(--alaq-muted);

    font-size: 14px;

    line-height: 2;
}


/* =========================================================
   CONTACT CTA
========================================================= */

.contact-cta-section {
    padding:
        75px
        max(
            7vw,
            35px
        );

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 40px;

    background:
        var(--alaq-deep);

    color:
        var(--alaq-white);
}


.section-eyebrow.light {
    color:
        rgba(
            244,
            240,
            231,
            0.62
        );
}


.contact-cta-section h2 {
    margin:
        0
        0
        12px;

    color:
        var(--alaq-ivory);

      font-family:
        "Poppins" !important;
    font-size:
        clamp(
            35px,
            4vw,
            55px
        );

    font-weight: 400;
}


body[dir="rtl"]
.contact-cta-section h2 {
    font-family:
        "Poppins" !important;
}


.contact-cta-section p {
    max-width: 600px;

    margin: 0;

    color:
        rgba(
            244,
            240,
            231,
            0.7
        );

    font-size: 13px;

    line-height: 1.8;
}


.light-button {
    flex-shrink: 0;

    border:
        1px solid
        var(--alaq-ivory);

    background:
        var(--alaq-ivory);

    color:
        var(--alaq-deep);
}


.light-button:hover {
    background: transparent;

    color:
        var(--alaq-ivory);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding:
        65px
        32px
        20px;

    background:
        #021615;

    color:
        var(--alaq-ivory);
}


.footer-grid {
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 50px;

    padding-bottom: 55px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {
    min-width: 0;
}


.footer-logo {
    width: 125px;

    display: block;

    margin-bottom: 18px;
}


.footer-logo img {
    width: 100%;

    height: auto;

    object-fit: contain;
}


.footer-brand h2 {
    margin:
        0
        0
        15px;

    color:
        var(--alaq-ivory);

    font-size: 26px;

    letter-spacing: 4px;
}


.footer-brand p {
    max-width: 310px;

    margin: 0;

    color:
        #8ea09d;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


body[dir="rtl"]
.footer-column {
    align-items: flex-start;
}


.footer-column h3 {
    margin:
        0
        0
        9px;

    color:
        var(--alaq-ivory);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


.footer-column a {
    color:
        #8ea09d;

    font-size: 12px;

    transition:
        color
        0.2s ease;
}


.footer-column a:hover {
    color:
        var(--alaq-ivory);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    max-width: 1400px;

    margin: 0 auto;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(
            244,
            240,
            231,
            0.12
        );

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    color:
        #6f817e;

    font-size: 10px;
}


/* =========================================================
   GENERIC PAGE HERO
   Useful later for:
   Shop / About / Contact
========================================================= */

.page-hero {
    padding:
        85px
        32px;

    background:
        var(--alaq-ivory);

    text-align: center;
}


.page-hero-inner {
    max-width: 800px;

    margin: 0 auto;
}


.page-hero h1 {
    margin:
        0
        0
        18px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins" !important;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    font-weight: 400;
}


.page-hero p {
    max-width: 630px;

    margin:
        0 auto;

    color:
        var(--alaq-muted);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   GENERIC FORMS
   Useful later for Login/Register/Contact
========================================================= */

.form-container {
    width: min(
        100%,
        620px
    );

    margin:
        0 auto;

    padding:
        55px
        32px;

    background:
        var(--alaq-white);

    border:
        1px solid
        var(--alaq-border);

    box-shadow:
        var(--alaq-shadow);
}


.form-group {
    margin-bottom: 22px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--alaq-deep);

    font-size: 12px;

    font-weight: 700;
}


.form-control {
    width: 100%;

    min-height: 48px;

    padding:
        0
        14px;

    border:
        1px solid
        var(--alaq-border);

    background:
        var(--alaq-white);

    color:
        var(--alaq-text);

    outline: none;

    transition:
        border-color
        0.2s ease,
        box-shadow
        0.2s ease;
}


textarea.form-control {
    min-height: 130px;

    padding:
        14px;

    resize: vertical;
}


.form-control:focus {
    border-color:
        var(--alaq-green);

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            74,
            71,
            0.08
        );
}


.form-submit-button {
    width: 100%;

    min-height: 50px;

    border:
        1px solid
        var(--alaq-green);

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 12px;

    font-weight: 800;

    transition:
        background
        0.2s ease;
}


.form-submit-button:hover {
    background:
        var(--alaq-deep);
}


/* =========================================================
   ALERTS
========================================================= */

.website-alert {
    margin-bottom: 22px;

    padding:
        13px
        15px;

    border:
        1px solid
        var(--alaq-border);

    font-size: 12px;
}


.website-alert.error {
    border-color:
        rgba(
            145,
            44,
            44,
            0.25
        );

    background:
        #fff1f0;

    color:
        #8b302b;
}


.website-alert.success {
    border-color:
        rgba(
            11,
            74,
            71,
            0.22
        );

    background:
        #edf6f4;

    color:
        var(--alaq-green);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
    padding:
        70px
        25px;

    text-align: center;

    border:
        1px solid
        var(--alaq-border);

    background:
        var(--alaq-ivory);
}


.empty-state h3 {
    margin:
        0
        0
        10px;

    color:
        var(--alaq-deep);
}


.empty-state p {
    margin:
        0;

    color:
        var(--alaq-muted);

    font-size: 13px;
}


/* =========================================================
   LOADING
========================================================= */

.loading-state {
    padding:
        60px
        20px;

    text-align: center;

    color:
        var(--alaq-muted);

    font-size: 13px;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (
    max-width: 1050px
) {

    .desktop-navigation {
        display: none;
    }


    .mobile-menu-button {
        display: block;
    }


    .hero-section {
        grid-template-columns:
            1fr;
    }


    .hero-visual {
        min-height: 500px;
    }


    .product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .home-about-section {
        grid-template-columns:
            1fr;
    }


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

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (
    max-width: 700px
) {

    .announcement-bar {
        padding:
            8px
            14px;
    }


    .announcement-bar p {
        font-size: 10px;
    }


    .header-container {
        min-height: 68px;

        padding:
            0
            18px;
    }


    .site-logo {
        width: 75px;

        height: 54px;
    }


    .header-icon-link {
        display: none;
    }


    .header-actions {
        gap: 11px;
    }


    .hero-content {
        padding:
            70px
            22px;
    }


    .hero-content h1 {
        font-size: 50px;
    }


    .hero-content p {
        font-size: 14px;
    }


    .hero-visual {
        min-height: 390px;

        padding: 20px;
    }


    .hero-logo-image {
        width: 75%;
    }


    .hero-visual-caption {
        left: 18px;

        bottom: 18px;
    }


    body[dir="rtl"]
    .hero-visual-caption {
        left: auto;

        right: 18px;
    }


    .benefits-section {
        grid-template-columns:
            1fr;
    }


    .benefit-item {
        padding:
            30px
            22px;

        border-inline-end: 0;

        border-bottom:
            1px solid
            var(--alaq-border);
    }


    .featured-section {
        padding:
            70px
            18px;
    }


    .section-header {
        align-items:
            flex-start;

        flex-direction: column;
    }


    .product-grid {
        gap:
            25px
            12px;
    }


    .product-card-info h3 {
        font-size: 15px;
    }


    .product-category {
        font-size: 8px;
    }


    .home-about-visual {
        min-height: 400px;
    }


    .about-logo-image {
        width: 60%;
    }


    .home-about-content {
        padding:
            65px
            22px;
    }


    .contact-cta-section {
        padding:
            60px
            22px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .page-hero {
        padding:
            65px
            20px;
    }


    .form-container {
        padding:
            40px
            20px;

        border-left: 0;

        border-right: 0;

        box-shadow: none;
    }


    .site-footer {
        padding:
            55px
            22px
            20px;
    }


    .footer-grid {
        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .footer-bottom {
        flex-direction:
            column;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 430px
) {

    .hero-content h1 {
        font-size: 43px;
    }


    .hero-buttons {
        flex-direction: column;
    }


    .primary-link-button,
    .secondary-link-button {
        width: 100%;
    }


    .product-grid {
        grid-template-columns:
            1fr
            1fr;
    }


    .product-card-info {
        padding-top: 12px;
    }


    .product-card-info h3 {
        font-size: 14px;
    }


    .product-price {
        font-size: 11px;
    }

}

/* =========================================================
   COLLECTIONS
========================================================= */

.collections-section {
    max-width: 1400px;

    margin:
        0
        auto;

    padding:
        110px
        32px;

    background:
        var(--alaq-white);
}


.collections-header {
    margin-bottom: 45px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;
}


.collections-header h2 {
    margin:
        0
        0
        14px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(
            36px,
            4.6vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -2px;
}


.collections-header p {
    max-width: 500px;

    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   COLLECTION GRID
========================================================= */

.collections-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 18px;
}


.collections-loading,
.collections-empty {
    grid-column:
        1 / -1;

    padding:
        70px
        20px;

    color:
        var(--alaq-muted);

    text-align: center;
}


/* =========================================================
   COLLECTION CARD
========================================================= */

.collection-card {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color:
        var(--alaq-ivory);

    background:
        linear-gradient(
            145deg,
            #0d5752,
            #063a37 48%,
            #032725
        );

    border:
        1px solid
        rgba(
            244,
            240,
            231,
            0.10
        );

    isolation: isolate;

    transition:
        transform
        0.35s ease,
        box-shadow
        0.35s ease;
}


.collection-card:nth-child(even) {
    background:
        linear-gradient(
            145deg,
            #f1eadf,
            #e6dccd
        );

    color:
        var(--alaq-deep);
}


.collection-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 25px 55px
        rgba(
            4,
            30,
            29,
            0.14
        );
}


/* =========================================================
   CARD BACKGROUND
========================================================= */

.collection-card-background {
    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;
}


.collection-glow {
    position: absolute;

    width: 340px;

    height: 340px;

    right: -120px;

    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.19
            ),
            transparent 67%
        );
}


.collection-card:nth-child(even)
.collection-glow {
    background:
        radial-gradient(
            circle,
            rgba(
                11,
                74,
                71,
                0.09
            ),
            transparent 67%
        );
}


/* =========================================================
   WATERMARK
========================================================= */

.collection-watermark {
    position: absolute;

    right: -15px;

    bottom: -95px;

    color:
        rgba(
            255,
            255,
            255,
            0.055
        );

    font-family:
        Georgia,
        serif;

    font-size: 330px;

    line-height: 1;
}


.collection-card:nth-child(even)
.collection-watermark {
    color:
        rgba(
            4,
            30,
            29,
            0.045
        );
}


/* =========================================================
   COLLECTION TOP
========================================================= */

.collection-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.collection-number {
    font-size: 10px;

    font-weight: 500;

    letter-spacing: 2px;

    opacity: 0.62;
}


.collection-arrow {
    width: 42px;

    height: 42px;

    border:
        1px solid
        rgba(
            244,
            240,
            231,
            0.25
        );

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    transition:
        transform
        0.3s ease,
        background
        0.3s ease;
}


.collection-card:nth-child(even)
.collection-arrow {
    border-color:
        rgba(
            4,
            30,
            29,
            0.18
        );
}


.collection-card:hover
.collection-arrow {
    transform:
        rotate(
            45deg
        );

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );
}


/* =========================================================
   COLLECTION CONTENT
========================================================= */

.collection-card-content {
    position: relative;

    z-index: 2;
}


.collection-label {
    display: block;

    margin-bottom: 10px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

    opacity: 0.62;
}


.collection-card-content h3 {
    margin:
        0
        0
        18px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(
            27px,
            3vw,
            39px
        );

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -1.4px;
}


.collection-shop-text {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom:
        1px solid
        currentColor;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.5px;

    opacity: 0.82;
}


/* =========================================================
   COLLECTION RESPONSIVE
========================================================= */

@media (
    max-width: 1000px
) {

    .collections-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (
    max-width: 650px
) {

    .collections-section {
        padding:
            75px
            18px;
    }


    .collections-header {
        margin-bottom: 30px;
    }


    .collections-header h2 {
        font-size: 37px;
    }


    .collections-grid {
        grid-template-columns:
            1fr;
    }


    .collection-card {
        min-height: 300px;

        padding: 23px;
    }

}

.hero-visual-inner {
    background:
        linear-gradient(
            145deg,
            #0c5652,
            #063b38 47%,
            #032624
        );

    box-shadow:
        inset
        0 0 90px
        rgba(
            0,
            0,
            0,
            0.12
        );
}


.hero-light {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.hero-light-one {
    width: 520px;

    height: 520px;

    top: -230px;

    right: -130px;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.19
            ),
            transparent 68%
        );
}


.hero-light-two {
    width: 350px;

    height: 350px;

    bottom: -160px;

    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(
                232,
                225,
                213,
                0.11
            ),
            transparent 67%
        );
}


.hero-logo-image {
    position: relative;

    z-index: 2;

    width:
        min(
            62%,
            390px
        );

    max-height: 72%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 24px 42px
            rgba(
                0,
                0,
                0,
                0.18
            )
        );
}

/* =========================================================
   SHOP PAGE
========================================================= */

.shop-hero {
    padding:
        95px
        32px
        75px;

    background:
        linear-gradient(
            180deg,
            #f6f1e8,
            #fffdf8
        );
}


.shop-hero-inner {
    max-width: 1400px;

    margin:
        0
        auto;
}


.shop-hero h1 {
    margin:
        0
        0
        17px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(
            44px,
            6vw,
            72px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -2.5px;
}


.shop-hero p {
    max-width: 580px;

    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   SHOP CONTENT
========================================================= */

.shop-section {
    max-width: 1400px;

    margin:
        0
        auto;

    padding:
        45px
        32px
        100px;
}


/* =========================================================
   TOOLBAR
========================================================= */

.shop-toolbar {
    margin-bottom: 22px;

    padding-bottom: 24px;

    border-bottom:
        1px solid
        var(--alaq-border);

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 25px;
}


/* =========================================================
   CATEGORY FILTERS
========================================================= */

.category-filters {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        9px;
}


.category-filter {
    min-height: 39px;

    padding:
        0
        17px;

    border:
        1px solid
        var(--alaq-border);

    background:
        transparent;

    color:
        var(--alaq-muted);

    font-size: 11px;

    font-weight: 500;

    transition:
        background
        0.2s ease,
        color
        0.2s ease,
        border-color
        0.2s ease;
}


.category-filter:hover {
    border-color:
        var(--alaq-green);

    color:
        var(--alaq-green);
}


.category-filter.active {
    border-color:
        var(--alaq-green);

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);
}


/* =========================================================
   SEARCH
========================================================= */

.shop-search {
    width:
        min(
            100%,
            280px
        );

    flex-shrink: 0;
}


.shop-search input {
    width: 100%;

    height: 42px;

    padding:
        0
        14px;

    border:
        1px solid
        var(--alaq-border);

    outline: none;

    background:
        var(--alaq-white);

    color:
        var(--alaq-text);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 11px;
}


.shop-search input:focus {
    border-color:
        var(--alaq-green);

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            74,
            71,
            0.06
        );
}


/* =========================================================
   RESULT COUNT
========================================================= */

.shop-results-header {
    margin-bottom: 22px;
}


.shop-results-header p {
    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 11px;
}


/* =========================================================
   SHOP PRODUCTS
========================================================= */

.shop-product-grid {
    row-gap: 45px;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 850px
) {

    .shop-toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .shop-search {
        width: 100%;

        max-width: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 650px
) {

    .shop-hero {
        padding:
            70px
            18px
            55px;
    }


    .shop-hero h1 {
        font-size: 43px;
    }


    .shop-section {
        padding:
            30px
            18px
            75px;
    }


    .category-filters {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }


    .category-filters::-webkit-scrollbar {
        display: none;
    }


    .category-filter {
        flex-shrink: 0;
    }

}

/* =========================================================
   SINGLE PRODUCT
========================================================= */

.product-breadcrumb {
    max-width: 1400px;

    margin:
        0
        auto;

    padding:
        28px
        32px
        0;

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        var(--alaq-muted);

    font-size: 10px;

    font-weight: 500;
}


.product-breadcrumb a {
    color:
        var(--alaq-muted);

    transition:
        color
        0.2s ease;
}


.product-breadcrumb a:hover {
    color:
        var(--alaq-green);
}


/* =========================================================
   PRODUCT LAYOUT
========================================================= */

.single-product-section {
    max-width: 1400px;

    min-height: 650px;

    margin:
        0
        auto;

    padding:
        40px
        32px
        110px;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.08fr
        )
        minmax(
            390px,
            0.92fr
        );

    gap:
        clamp(
            45px,
            7vw,
            110px
        );

    align-items: start;
}


/* =========================================================
   LOADING
========================================================= */

.single-product-loading {
    grid-column:
        1 / -1;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--alaq-muted);

    font-size: 12px;
}


/* =========================================================
   GALLERY
========================================================= */

.single-product-gallery {
    min-width: 0;
}


.product-main-image {
    position: relative;

    width: 100%;

    aspect-ratio:
        0.78;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #eee7dc,
            #f8f4ed
        );
}


.product-main-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform
        0.6s ease;
}


.product-main-image:hover img {
    transform:
        scale(
            1.025
        );
}


/* =========================================================
   NO IMAGE
========================================================= */

.single-product-placeholder {
    color:
        rgba(
            4,
            30,
            29,
            0.10
        );

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            160px,
            25vw,
            330px
        );

    line-height: 1;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.product-thumbnails {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;
}


.product-thumbnail {
    position: relative;

    aspect-ratio:
        0.78;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        transparent;

    background:
        #f4f0e9;

    opacity: 0.68;

    transition:
        opacity
        0.2s ease,
        border-color
        0.2s ease;
}


.product-thumbnail:hover,
.product-thumbnail.active {
    opacity: 1;

    border-color:
        var(--alaq-green);
}


.product-thumbnail img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.single-product-info {
    position: sticky;

    top: 120px;

    padding-top: 12px;
}


.single-product-category {
    display: block;

    margin-bottom: 13px;

    color:
        var(--alaq-green);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.single-product-info h1 {
    max-width: 620px;

    margin:
        0
        0
        18px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(
            35px,
            4.5vw,
            56px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -2px;
}


.single-product-price {
    margin-bottom: 20px;

    color:
        var(--alaq-deep);

    font-size: 20px;

    font-weight: 600;
}


.single-product-sku {
    margin-bottom: 25px;

    display: flex;

    gap: 10px;

    color:
        var(--alaq-muted);

    font-size: 10px;
}


.single-product-sku span {
    color:
        var(--alaq-deep);

    font-weight: 600;
}


.single-product-description {
    max-width: 590px;

    color:
        var(--alaq-muted);

    font-size: 12px;

    line-height: 1.9;

    white-space: pre-line;
}


.product-divider {
    height: 1px;

    margin:
        32px
        0;

    background:
        var(--alaq-border);
}


/* =========================================================
   OPTIONS
========================================================= */

.product-option-group {
    margin-bottom: 28px;
}


.product-option-heading {
    margin-bottom: 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color:
        var(--alaq-deep);

    font-size: 11px;

    font-weight: 600;
}


.product-option-label {
    display: block;

    margin-bottom: 13px;

    color:
        var(--alaq-deep);

    font-size: 11px;

    font-weight: 600;
}


.selected-size-stock {
    color:
        var(--alaq-muted);

    font-size: 9px;

    font-weight: 400;
}


/* =========================================================
   SIZE
========================================================= */

.product-size-options {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.product-size-button {
    min-width: 55px;

    height: 45px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--alaq-border);

    background:
        var(--alaq-white);

    color:
        var(--alaq-deep);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 500;

    transition:
        border-color
        0.2s ease,
        background
        0.2s ease,
        color
        0.2s ease;
}


.product-size-button:hover:not(:disabled) {
    border-color:
        var(--alaq-green);
}


.product-size-button.selected {
    border-color:
        var(--alaq-green);

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);
}


.product-size-button.unavailable {
    position: relative;

    opacity: 0.35;

    cursor: not-allowed;

    text-decoration:
        line-through;
}


.no-product-sizes {
    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 11px;
}


/* =========================================================
   QUANTITY
========================================================= */

.product-quantity-control {
    width: 135px;

    height: 45px;

    border:
        1px solid
        var(--alaq-border);

    display: grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items: center;
}


.product-quantity-control button {
    height: 100%;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        var(--alaq-deep);

    font-size: 18px;

    transition:
        background
        0.2s ease;
}


.product-quantity-control button:hover {
    background:
        var(--alaq-soft);
}


.product-quantity-control span {
    text-align: center;

    color:
        var(--alaq-deep);

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   ADD TO CART
========================================================= */

.single-add-cart-button {
    width: 100%;

    min-height: 56px;

    padding:
        0
        24px;

    border:
        1px solid
        var(--alaq-green);

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition:
        background
        0.25s ease,
        transform
        0.2s ease,
        opacity
        0.2s ease;
}


.single-add-cart-button:hover:not(:disabled) {
    background:
        var(--alaq-deep);

    transform:
        translateY(
            -1px
        );
}


.single-add-cart-button:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}


/* =========================================================
   SERVICE INFO
========================================================= */

.single-product-service-info {
    margin-top: 25px;

    border-top:
        1px solid
        var(--alaq-border);
}


.single-product-service-info > div {
    padding:
        17px
        0;

    border-bottom:
        1px solid
        var(--alaq-border);

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.single-product-service-info strong {
    color:
        var(--alaq-deep);

    font-size: 10px;

    font-weight: 600;
}


.single-product-service-info span {
    color:
        var(--alaq-muted);

    font-size: 9px;

    line-height: 1.6;
}


/* =========================================================
   MESSAGE
========================================================= */

.product-message {
    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 500;

    max-width: 390px;

    padding:
        15px
        20px;

    background:
        var(--alaq-deep);

    color:
        var(--alaq-white);

    font-size: 11px;

    line-height: 1.6;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(
            15px
        );

    transition:
        opacity
        0.25s ease,
        transform
        0.25s ease,
        visibility
        0.25s ease;
}


.product-message.show {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(
            0
        );
}


.product-message.success {
    background:
        var(--alaq-green);
}


.product-message.error {
    background:
        #7c2d2d;
}


/* =========================================================
   ERROR
========================================================= */

.single-product-error {
    grid-column:
        1 / -1;

    min-height: 500px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.single-product-error h2 {
    margin:
        0
        0
        10px;

    color:
        var(--alaq-deep);

    font-size: 34px;

    font-weight: 500;
}


.single-product-error p {
    margin:
        0
        0
        25px;

    color:
        var(--alaq-muted);

    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 950px
) {

    .single-product-section {
        grid-template-columns:
            1fr
            1fr;

        gap: 35px;
    }


    .single-product-info {
        top: 100px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 750px
) {

    .product-breadcrumb {
        padding:
            20px
            18px
            0;
    }


    .single-product-section {
        padding:
            25px
            18px
            75px;

        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .single-product-info {
        position: static;

        padding-top: 0;
    }


    .single-product-info h1 {
        font-size: 37px;

        letter-spacing: -1.4px;
    }


    .product-thumbnails {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .product-message {
        right: 18px;

        bottom: 18px;

        left: 18px;

        max-width: none;
    }

}

/* =========================================================
   AUTH REQUIRED MODAL
========================================================= */

body.modal-open {
    overflow: hidden;
}


.auth-required-modal {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.auth-required-modal.show {
    opacity: 1;

    visibility: visible;
}


.auth-required-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            2,
            22,
            21,
            0.72
        );

    backdrop-filter:
        blur(8px);
}


.auth-required-card {
    position: relative;

    z-index: 2;

    width:
        min(
            100%,
            470px
        );

    padding:
        45px
        42px
        38px;

    background:
        var(--alaq-white);

    color:
        var(--alaq-text);

    box-shadow:
        0 35px 90px
        rgba(
            0,
            0,
            0,
            0.28
        );

    text-align: center;

    transform:
        translateY(
            15px
        );

    transition:
        transform
        0.25s ease;
}


.auth-required-modal.show
.auth-required-card {
    transform:
        translateY(
            0
        );
}


.auth-required-close {
    position: absolute;

    right: 17px;

    top: 13px;

    width: 35px;

    height: 35px;

    border: 0;

    background:
        transparent;

    color:
        var(--alaq-muted);

    font-size: 25px;
}


body[dir="rtl"]
.auth-required-close {
    right: auto;

    left: 17px;
}


.auth-required-logo {
    width: 100px;

    margin:
        0
        auto
        24px;
}


.auth-required-logo img {
    width: 100%;
}


.auth-modal-eyebrow {
    display: block;

    margin-bottom: 11px;

    color:
        var(--alaq-green-soft);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.auth-required-card h2 {
    margin:
        0
        0
        14px;

    color:
        var(--alaq-deep);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 28px;

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -1px;
}


.auth-required-card p {
    max-width: 370px;

    margin:
        0
        auto
        28px;

    color:
        var(--alaq-muted);

    font-size: 12px;

    line-height: 1.8;
}


.auth-required-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;
}


.auth-login-button,
.auth-register-button {
    min-height: 50px;

    padding:
        0
        18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 700;
}


.auth-login-button {
    background:
        var(--alaq-green);

    border:
        1px solid
        var(--alaq-green);

    color:
        var(--alaq-white);
}


.auth-register-button {
    background:
        transparent;

    border:
        1px solid
        var(--alaq-green);

    color:
        var(--alaq-green);
}


.auth-first-order {
    display: block;

    margin-top: 19px;

    color:
        #94a09e;

    font-size: 9px;

    line-height: 1.6;
}


@media (
    max-width: 500px
) {

    .auth-required-card {
        padding:
            40px
            22px
            30px;
    }


    .auth-required-actions {
        grid-template-columns:
            1fr;
    }

}