:root {
    /* Alwan identity */
    --alwan-cyan: #16c5cf;
    --alwan-cyan-dark: #0799ab;

    --alwan-blue: #3267d6;
    --alwan-green: #49b85d;
    --alwan-yellow: #f6c843;
    --alwan-pink: #ea4d83;

    /* Surface */
    --shop-bg: #f8fbfd;
    --shop-card: #ffffff;
    --shop-card-soft: #f3f8fb;

    /* Typography */
    --shop-text: #17253b;
    --shop-text-soft: #3d4d63;
    --shop-muted: #8b98aa;

    --shop-border: #e8eef3;
    --shop-danger: #e84b68;

    /* Shadows */
    --shadow-xs: 0 2px 8px rgba(35, 54, 83, 0.04);
    --shadow-sm: 0 5px 18px rgba(35, 54, 83, 0.07);
    --shadow-md: 0 12px 32px rgba(35, 54, 83, 0.10);

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;

    --bottom-nav-height: 78px;
}


/* =========================================================
   Reset
========================================================= */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(22, 197, 207, 0.10),
            transparent 280px
        ),
        radial-gradient(
            circle at 0 300px,
            rgba(234, 77, 131, 0.05),
            transparent 240px
        ),
        var(--shop-bg);

    color: var(--shop-text);

    font-family:
        Tahoma,
        Arial,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
} */
 /* 1. Import the Cairo font from Google Fonts */
/* @import url('https://googleapis.com'); */

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(22, 197, 207, 0.10),
            transparent 280px
        ),
        radial-gradient(
            circle at 0 300px,
            rgba(234, 77, 131, 0.05),
            transparent 240px
        ),
        var(--shop-bg);

    color: var(--shop-text);

    /* 2. Add 'Cairo' to the top of your font stack */
    font-family:
        "Cairo",
        Tahoma,
        Arial,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


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

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   App shell
========================================================= */

.shop-app {
    width: 100%;
    max-width: 500px;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    background: transparent;
}

.shop-main {
    min-height: 100vh;
    padding-bottom:
        calc(
            var(--bottom-nav-height)
            + 28px
            + env(safe-area-inset-bottom)
        );
}

.shop-page {
    padding: 0 16px 24px;
}


/* =========================================================
   Header
========================================================= */

.home-header {
    padding:
        calc(14px + env(safe-area-inset-top))
        0
        8px;
}

.home-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-logo {
    width: auto;
    height: 48px;
    object-fit: contain;
}

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

.brand-eyebrow {
    color: var(--shop-muted);
    font-size: 12px;
    line-height: 1.3;
}

.brand-title {
    margin-top: 3px;
    font-size: 16px;
    font-weight: 900;
    color: var(--shop-text);
}

.icon-btn {
    position: relative;

    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid rgba(232, 238, 243, 0.95);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.88);
    color: var(--shop-text);

    box-shadow: var(--shadow-xs);

    padding: 0;
}

.icon-btn svg {
    width: 21px;
    height: 21px;
}


/* =========================================================
   Search
========================================================= */

.shop-search {
    height: 58px;

    display: flex;
    align-items: center;
    gap: 10px;

    margin: 14px 0 18px;
    padding: 0 15px;

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

    border: 1px solid var(--shop-border);
    border-radius: 19px;

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

.search-icon {
    width: 21px;
    height: 21px;
    color: var(--alwan-cyan-dark);
    flex: 0 0 auto;
}

.shop-search input {
    width: 100%;
    border: 0;
    outline: 0;

    color: var(--shop-text);
    background: transparent;

    font-size: 14px;
    font-weight: 600;
}

.shop-search input::placeholder {
    color: #a2adba;
    font-weight: 500;
}


/* =========================================================
   Hero
========================================================= */

.alwan-hero {
    position: relative;

    min-height: 202px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-radius: 28px;
    padding: 25px 22px;

    background:
        linear-gradient(
            135deg,
            #0eb8c6 0%,
            #15c3c1 40%,
            #55bd5d 100%
        );

    box-shadow:
        0 18px 40px rgba(8, 161, 171, 0.20);
}

.alwan-hero::before,
.alwan-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.alwan-hero::before {
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.12);
    top: -65px;
    left: -45px;
}

.alwan-hero::after {
    width: 105px;
    height: 105px;
    background: rgba(246, 200, 67, 0.95);
    bottom: -55px;
    left: 55px;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 72%;
    color: #fff;
}

.hero-pill {
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding: 7px 11px;

    background: rgba(255, 255, 255, 0.17);
    border: 1px solid rgba(255, 255, 255, 0.20);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.hero-title {
    margin: 0;

    font-size: 25px;
    line-height: 1.45;

    font-weight: 900;
}

.hero-text {
    margin: 8px 0 18px;

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

    font-size: 12px;
    line-height: 1.7;
}

.hero-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    background: #fff;
    color: #068c99;

    border-radius: 13px;

    padding: 10px 15px;

    font-size: 12px;
    font-weight: 900;

    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.12);
}

.hero-decoration {
    position: absolute;
    z-index: 2;

    left: 18px;
    top: 34px;

    width: 82px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 27px;

    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);

    transform: rotate(-8deg);
}

.hero-decoration svg {
    width: 48px;
    height: 48px;
    color: #fff;
}


/* =========================================================
   Sections
========================================================= */

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 27px 0 14px;
}

.section-copy {
    min-width: 0;
}

.section-title {
    margin: 0;

    color: var(--shop-text);

    font-size: 18px;
    line-height: 1.35;

    font-weight: 900;
}

.section-subtitle {
    margin-top: 3px;

    color: var(--shop-muted);

    font-size: 11px;
    line-height: 1.5;
}

.view-all {
    flex: 0 0 auto;

    color: var(--alwan-cyan-dark);

    background: rgba(22, 197, 207, 0.09);

    border-radius: 999px;

    padding: 8px 11px;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   Quick Actions
========================================================= */

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.quick-card {
    min-width: 0;

    padding: 13px 7px 12px;

    text-align: center;

    border: 1px solid var(--shop-border);
    border-radius: 19px;

    background: rgba(255, 255, 255, 0.92);

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

.quick-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 9px;

    border-radius: 16px;
}

.quick-icon svg {
    width: 25px;
    height: 25px;
}

.quick-card:nth-child(4n + 1) .quick-icon {
    color: #079ba9;
    background: rgba(22, 197, 207, 0.13);
}

.quick-card:nth-child(4n + 2) .quick-icon {
    color: #d83c73;
    background: rgba(234, 77, 131, 0.12);
}

.quick-card:nth-child(4n + 3) .quick-icon {
    color: #2c5ebd;
    background: rgba(50, 103, 214, 0.11);
}

.quick-card:nth-child(4n + 4) .quick-icon {
    color: #409a4d;
    background: rgba(73, 184, 93, 0.12);
}

.quick-name {
    overflow: hidden;

    color: var(--shop-text-soft);

    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Category grid
========================================================= */

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 9px;
}

.category-item {
    min-width: 0;
    text-align: center;
}
 
.category-circle {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 8px;

    border-radius: 21px;

    border: 1px solid var(--shop-border);
    background: #fff;

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

.category-symbol {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(22, 197, 207, 0.10);
    color: var(--alwan-cyan-dark);

    font-size: 16px;
    font-weight: 900;
}

.category-item:nth-child(4n + 2) .category-symbol {
    background: rgba(234, 77, 131, 0.10);
    color: #cc3f6f;
}

.category-item:nth-child(4n + 3) .category-symbol {
    background: rgba(246, 200, 67, 0.16);
    color: #b78800;
}

.category-item:nth-child(4n + 4) .category-symbol {
    background: rgba(73, 184, 93, 0.11);
    color: #398c46;
}

.category-name {
    overflow: hidden;

    color: var(--shop-text-soft);

    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}







.category-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}




/* =========================================================
   Academic banner
========================================================= */

.academic-card {
    position: relative;
    overflow: hidden;

    margin-top: 26px;
    padding: 20px;

    border: 1px solid rgba(50, 103, 214, 0.09);
    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(50, 103, 214, 0.09),
            rgba(22, 197, 207, 0.08)
        );
}

.academic-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    left: -30px;
    bottom: -45px;

    border-radius: 50%;

    background: rgba(234, 77, 131, 0.08);
}

.academic-label {
    color: var(--alwan-blue);
    font-size: 11px;
    font-weight: 900;
}

.academic-title {
    margin: 5px 0 5px;

    font-size: 17px;
    font-weight: 900;
}

.academic-text {
    max-width: 85%;

    color: var(--shop-muted);

    font-size: 11px;
    line-height: 1.7;
}

.academic-button {
    display: inline-flex;

    margin-top: 13px;
    padding: 9px 13px;

    border-radius: 12px;

    background: var(--alwan-blue);
    color: #fff;

    font-size: 11px;
    font-weight: 900;
}


/* =========================================================
   Products
========================================================= */

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

.product-card {
    position: relative;

    min-width: 0;

    border: 1px solid var(--shop-border);
    border-radius: 21px;

    background: var(--shop-card);

    overflow: hidden;

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

.product-image-link {
    position: relative;

    display: block;

    aspect-ratio: 1 / 1;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fafc
        );

    overflow: hidden;
}

.product-img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    padding: 10px;
}

.product-image-empty {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 15px;

    color: var(--shop-muted);

    font-size: 10px;
    text-align: center;
}

.product-image-empty svg {
    width: 34px;
    height: 34px;
    opacity: 0.65;
}

.product-type-badge {
    position: absolute;

    top: 9px;
    right: 9px;

    z-index: 3;

    max-width: calc(100% - 18px);

    overflow: hidden;

    padding: 6px 8px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.93);
    color: var(--shop-text-soft);

    box-shadow: var(--shadow-xs);

    font-size: 9px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-body {
    padding: 11px 11px 12px;
}

.product-name-link {
    display: block;
}

.product-name {
    min-height: 39px;

    display: -webkit-box;
    overflow: hidden;

    color: var(--shop-text);

    font-size: 12px;
    line-height: 1.6;
    font-weight: 800;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-meta {
    min-height: 18px;

    margin-top: 5px;

    overflow: hidden;

    color: var(--shop-muted);

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;

    margin-top: 9px;
}

.product-price {
    min-width: 0;

    color: var(--alwan-cyan-dark);

    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.product-price small {
    font-size: 9px;
    font-weight: 800;
}

.product-quick-add {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: 0;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 7px 15px rgba(7, 153, 171, 0.22);
}

.product-quick-add svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   Bottom navigation
========================================================= */

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    z-index: 1000;

    width: 100%;
    max-width: 500px;

    height:
        calc(
            var(--bottom-nav-height)
            + env(safe-area-inset-bottom)
        );

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

    padding:
        7px
        5px
        env(safe-area-inset-bottom);

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

    border-top: 1px solid rgba(229, 236, 242, 0.95);

    box-shadow:
        0 -12px 35px rgba(30, 48, 75, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bottom-nav a {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    border-radius: 15px;

    color: #96a1ae;

    font-size: 9px;
    font-weight: 700;

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

.bottom-nav a.active {
    color: var(--alwan-cyan-dark);
    font-weight: 900;
}

.nav-icon-wrap {
    position: relative;

    width: 34px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
}

.bottom-nav a.active .nav-icon-wrap {
    background: rgba(22, 197, 207, 0.11);
}

.nav-icon {
    width: 20px;
    height: 20px;
}

.cart-count {
    position: absolute;

    top: -5px;
    left: -8px;

    min-width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border: 2px solid #fff;
    border-radius: 999px;

    background: var(--alwan-pink);
    color: #fff;

    font-size: 8px;
    line-height: 1;
    font-weight: 900;
}


/* =========================================================
   Checkout existing fields
========================================================= */

.checkout-field {
    margin-bottom: 14px;
}

.checkout-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--shop-text);

    font-size: 12px;
    font-weight: 900;
}

.checkout-field input,
.checkout-field textarea,
.checkout-field select {
    width: 100%;

    border: 1px solid var(--shop-border);
    border-radius: 15px;

    outline: 0;

    background: #fff;
    color: var(--shop-text);

    padding: 12px 14px;

    font-size: 13px;
}

.checkout-field input:focus,
.checkout-field textarea:focus,
.checkout-field select:focus {
    border-color: rgba(22, 197, 207, 0.65);

    box-shadow:
        0 0 0 3px rgba(22, 197, 207, 0.08);
}

.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
    color: var(--shop-muted);
}


/* =========================================================
   Generic existing compatibility
========================================================= */

.product-add {
    width: 100%;
    min-height: 44px;

    border: 0;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    font-weight: 900;
}

.mini-banner {
    overflow: hidden;

    margin: 22px 0;

    border-radius: 22px;
}

.mini-banner img {
    width: 100%;
    display: block;
}


/* =========================================================
   Interaction
========================================================= */

@media (hover: hover) {
    .product-card,
    .quick-card,
    .category-item,
    .icon-btn {
        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease;
    }

    .product-card:hover,
    .quick-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

.product-quick-add:active,
.hero-action:active,
.icon-btn:active,
.quick-card:active {
    transform: scale(0.96);
}


/* =========================================================
   Small devices
========================================================= */

@media (max-width: 350px) {
    .shop-page {
        padding-inline: 12px;
    }

    .quick-grid,
    .category-grid {
        gap-inline: 7px;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-content {
        max-width: 76%;
    }

    .product-grid {
        gap: 10px;
    }
}


/* =========================================================
   Desktop shell
========================================================= */

@media (min-width: 700px) {
    body {
        background: #eef3f6;
    }

    .shop-app {
        background:
            radial-gradient(
                circle at 100% 0,
                rgba(22, 197, 207, 0.09),
                transparent 300px
            ),
            var(--shop-bg);

        box-shadow:
            0 0 50px rgba(30, 48, 75, 0.10);
    }
}
















.listing-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;

    padding:
        calc(16px + env(safe-area-inset-top))
        0
        10px;
}

.listing-heading {
    text-align: center;
}

.listing-heading h1 {
    margin: 0;

    color: var(--shop-text);

    font-size: 18px;
    font-weight: 900;
}

.listing-heading p {
    margin: 3px 0 0;

    color: var(--shop-muted);

    font-size: 10px;
}


.categories-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px 12px;

    margin-top: 18px;
}


.category-large-card {
    min-width: 0;

    text-align: center;
}


.category-large-image {
    position: relative;

    width: 88px;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 9px;

    overflow: hidden;

    border-radius: 28px;

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

    background:
        linear-gradient(
            145deg,
            rgba(22, 197, 207, 0.09),
            #ffffff
        );

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


.category-large-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.category-large-image span {
    color: var(--alwan-cyan-dark);

    font-size: 26px;
    font-weight: 900;
}


.category-large-name {
    overflow: hidden;

    color: var(--shop-text-soft);

    font-size: 12px;
    line-height: 1.5;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}




















.shop-promo-banner {
    position: relative;

    margin: 24px 0;

    overflow: hidden;

    border-radius: 24px;

    background: var(--shop-card);

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


.shop-promo-banner > a,
.shop-promo-banner > img {
    display: block;
}


.shop-promo-banner img {
    width: 100%;
    min-height: 130px;
    max-height: 220px;

    display: block;

    object-fit: cover;
}


.shop-promo-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 20px;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(9, 22, 38, 0.62),
            rgba(9, 22, 38, 0.08)
        );
}


.shop-promo-title {
    max-width: 70%;

    font-size: 19px;
    line-height: 1.4;

    font-weight: 900;
}


.shop-promo-subtitle {
    max-width: 70%;

    margin-top: 5px;

    font-size: 10px;
    line-height: 1.7;

    opacity: 0.9;
}


.shop-promo-button {
    display: inline-flex;

    margin-top: 11px;
    padding: 8px 12px;

    border-radius: 10px;

    background: #fff;
    color: var(--shop-text);

    font-size: 10px;
    font-weight: 900;
}






























.header-cart-count {
    position: absolute;

    top: -5px;
    left: -5px;

    min-width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border: 2px solid #fff;
    border-radius: 999px;

    background: var(--alwan-pink);
    color: #fff;

    font-size: 8px;
    font-weight: 900;
}


/* Sections horizontal navigation */

.section-chips {
    display: flex;
    align-items: center;
    gap: 8px;

    overflow-x: auto;

    margin: 2px -16px 17px;
    padding: 2px 16px 7px;

    scrollbar-width: none;
}

.section-chips::-webkit-scrollbar {
    display: none;
}


.section-chip {
    flex: 0 0 auto;

    padding: 9px 13px;

    border: 1px solid var(--shop-border);
    border-radius: 999px;

    background: #fff;
    color: var(--shop-text-soft);

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}


.section-chip.active {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 7px 18px rgba(7, 153, 171, 0.20);
}


/* Products toolbar */

.listing-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 0 0 15px;
}


.listing-count {
    color: var(--shop-muted);

    font-size: 11px;
    font-weight: 800;
}


.sort-select {
    min-height: 37px;

    padding: 0 10px;

    outline: 0;

    border: 1px solid var(--shop-border);
    border-radius: 12px;

    background: #fff;
    color: var(--shop-text-soft);

    font-size: 10px;
    font-weight: 700;
}


/* Empty */

.shop-empty-state {
    margin-top: 45px;
    padding: 32px 20px;

    text-align: center;

    border: 1px solid var(--shop-border);
    border-radius: 24px;

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


.empty-icon {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 14px;

    border-radius: 22px;

    background: rgba(22, 197, 207, 0.10);
    color: var(--alwan-cyan-dark);
}


.empty-icon svg {
    width: 31px;
    height: 31px;
}


.shop-empty-state h2 {
    margin: 0;

    font-size: 17px;
    font-weight: 900;
}


.shop-empty-state p {
    margin: 6px 0 17px;

    color: var(--shop-muted);

    font-size: 11px;
    line-height: 1.6;
}


.empty-action {
    display: inline-flex;

    padding: 10px 15px;

    border-radius: 12px;

    background: var(--alwan-cyan-dark);
    color: #fff;

    font-size: 11px;
    font-weight: 900;
}


/* Pagination */

.shop-pagination {
    margin-top: 22px;
}

.shop-pagination nav {
    width: 100%;
}








.price-prefix {
    display: block;

    margin-bottom: 1px;

    color: var(--shop-muted);

    font-size: 8px !important;
    font-weight: 700 !important;
}


































/* =========================================================
   Product details
========================================================= */

.product-detail-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.product-detail-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 15px;
}

.product-detail-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--shop-text-soft);
    box-shadow: var(--shadow-xs);
    font-size: 10px;
    font-weight: 900;
}

.product-detail-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--shop-muted);
    font-size: 12px;
}

.product-detail-empty svg {
    width: 54px;
    height: 54px;
}

.product-detail-card,
.product-info-card {
    margin-top: 15px;
    padding: 19px;
    border: 1px solid var(--shop-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.product-detail-title {
    margin: 0;
    color: var(--shop-text);
    font-size: 21px;
    line-height: 1.55;
    font-weight: 900;
}

.product-detail-price {
    margin-top: 8px;
    color: var(--alwan-cyan-dark);
    font-size: 23px;
    font-weight: 900;
}

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

.availability-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--alwan-green);
    font-size: 11px;
    font-weight: 800;
}

.availability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alwan-green);
    box-shadow: 0 0 0 4px rgba(73, 184, 93, 0.11);
}

.product-description {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--shop-border);
    color: var(--shop-text-soft);
    font-size: 12px;
    line-height: 1.9;
    white-space: pre-line;
}

.product-purchase-form {
    margin-top: 18px;
}

.product-option-block {
    margin-bottom: 19px;
}

.product-option-title {
    color: var(--shop-text);
    font-size: 12px;
    font-weight: 900;
}

.variant-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.variant-option {
    cursor: pointer;
}

.variant-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.variant-card {
    position: relative;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 13px;
    border: 1px solid var(--shop-border);
    border-radius: 16px;
    background: #fff;
}

.variant-option input:checked + .variant-card {
    border-color: var(--alwan-cyan);
    background: rgba(22, 197, 207, 0.07);
    box-shadow: 0 0 0 3px rgba(22, 197, 207, 0.08);
}

.variant-check {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 15px;
    height: 15px;
    border: 2px solid var(--shop-border);
    border-radius: 50%;
}

.variant-option input:checked + .variant-card .variant-check {
    border: 4px solid var(--alwan-cyan-dark);
}

.variant-label {
    color: var(--shop-text);
    font-size: 12px;
    font-weight: 900;
}

.variant-card strong {
    margin-top: 5px;
    color: var(--alwan-cyan-dark);
    font-size: 11px;
}

.quantity-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
}

.quantity-help {
    margin-top: 3px;
    color: var(--shop-muted);
    font-size: 9px;
}

.quantity-control,
.cart-quantity-form {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    border-radius: 13px;
    background: var(--shop-card-soft);
}

.quantity-control input,
.cart-quantity-form input {
    width: 42px;
    height: 38px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shop-text);
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    appearance: textfield;
}

.quantity-control input::-webkit-inner-spin-button,
.quantity-control input::-webkit-outer-spin-button,
.cart-quantity-form input::-webkit-inner-spin-button,
.cart-quantity-form input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.quantity-button,
.cart-quantity-button {
    width: 37px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--alwan-cyan-dark);
    font-size: 18px;
    font-weight: 900;
}

.product-detail-add {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(
        135deg,
        var(--alwan-cyan),
        var(--alwan-cyan-dark)
    );
    color: #fff;
    box-shadow: 0 12px 24px rgba(7, 153, 171, 0.23);
    font-size: 13px;
    font-weight: 900;
}

.product-detail-add svg {
    width: 20px;
    height: 20px;
}

.product-info-heading {
    margin-bottom: 13px;
    color: var(--shop-text);
    font-size: 15px;
    font-weight: 900;
}

.product-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-spec {
    min-width: 0;
    padding: 12px;
    border-radius: 15px;
    background: var(--shop-card-soft);
}

.product-spec span {
    display: block;
    margin-bottom: 4px;
    color: var(--shop-muted);
    font-size: 9px;
}

.product-spec strong {
    display: block;
    overflow: hidden;
    color: var(--shop-text-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Cart
========================================================= */

.shop-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
}

.shop-alert-success {
    background: rgba(73, 184, 93, 0.11);
    color: #267f36;
}

.shop-alert-danger {
    background: rgba(232, 75, 104, 0.10);
    color: #b52f49;
}

.cart-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--shop-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.cart-item-image {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 16px;
    background: var(--shop-card-soft);
    color: var(--shop-muted);
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.cart-item-image svg {
    width: 32px;
    height: 32px;
}

.cart-item-content {
    min-width: 0;
    flex: 1;
}

.cart-item-top,
.cart-item-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cart-item-name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--shop-text);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 900;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart-item-type,
.cart-item-option {
    margin-top: 3px;
    color: var(--shop-muted);
    font-size: 9px;
}

.cart-item-option {
    color: var(--alwan-blue);
    font-weight: 800;
}

.cart-remove {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(232, 75, 104, 0.08);
    color: var(--shop-danger);
}

.cart-remove svg {
    width: 16px;
    height: 16px;
}

.cart-item-bottom {
    align-items: center;
    margin-top: 10px;
}

.cart-price {
    color: var(--alwan-cyan-dark);
    font-size: 13px;
    font-weight: 900;
}

.cart-price small {
    font-size: 8px;
}

.cart-row-total {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px dashed var(--shop-border);
    color: var(--shop-muted);
    font-size: 9px;
}

.cart-row-total strong {
    color: var(--shop-text-soft);
}

.cart-empty {
    margin-top: 45px;
    padding: 35px 20px;
    text-align: center;
    border: 1px solid var(--shop-border);
    border-radius: 25px;
    background: #fff;
}

.cart-empty-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 25px;
    background: rgba(22, 197, 207, 0.10);
    color: var(--alwan-cyan-dark);
}

.cart-empty-icon svg {
    width: 35px;
    height: 35px;
}

.cart-empty h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.cart-empty p {
    margin: 7px auto 18px;
    max-width: 260px;
    color: var(--shop-muted);
    font-size: 11px;
    line-height: 1.7;
}

.cart-summary {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--shop-border);
    border-radius: 23px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.cart-summary-heading {
    margin-bottom: 14px;
    color: var(--shop-text);
    font-size: 15px;
    font-weight: 900;
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--shop-muted);
    font-size: 11px;
}

.cart-summary-row strong {
    color: var(--shop-text-soft);
}

.cart-summary-total {
    margin-top: 13px;
    margin-bottom: 0;
    padding-top: 13px;
    border-top: 1px solid var(--shop-border);
    color: var(--shop-text);
    font-size: 14px;
    font-weight: 900;
}

.cart-summary-total strong {
    color: var(--alwan-cyan-dark);
    font-size: 17px;
}

.cart-delivery-note {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(246, 200, 67, 0.12);
    color: #8d7008;
    font-size: 9px;
    line-height: 1.6;
}

.cart-checkout-button {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        var(--alwan-cyan),
        var(--alwan-cyan-dark)
    );
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 11px 23px rgba(7, 153, 171, 0.22);
}

.cart-checkout-button svg {
    width: 18px;
    height: 18px;
}





































/* =========================================================
   Checkout
========================================================= */

.checkout-progress {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    margin: 10px 4px 22px;
}

.checkout-step {
    min-width: 55px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    color: var(--shop-muted);
}

.checkout-step span {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf2f5;

    font-size: 10px;
    font-weight: 900;
}

.checkout-step strong {
    font-size: 8px;
    font-weight: 800;
}

.checkout-step.active {
    color: var(--alwan-cyan-dark);
}

.checkout-step.active span {
    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 6px 14px rgba(
            7,
            153,
            171,
            0.20
        );
}

.checkout-progress-line {
    width: 38px;
    height: 1px;

    margin-top: 14px;

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


/* Cards */

.checkout-card {
    margin-bottom: 14px;
    padding: 17px;

    border: 1px solid var(--shop-border);
    border-radius: 23px;

    background: #fff;

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


.checkout-section-head {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 18px;
}


.checkout-section-icon {
    width: 41px;
    height: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 14px;

    background:
        rgba(22, 197, 207, 0.11);

    color: var(--alwan-cyan-dark);
}


.checkout-section-icon.delivery {
    background:
        rgba(73, 184, 93, 0.11);

    color: #388d45;
}


.checkout-section-icon.order {
    background:
        rgba(234, 77, 131, 0.10);

    color: #ca3a6b;
}


.checkout-section-icon svg {
    width: 21px;
    height: 21px;
}


.checkout-section-head h2 {
    margin: 0;

    color: var(--shop-text);

    font-size: 14px;
    font-weight: 900;
}


.checkout-section-head p {
    margin: 3px 0 0;

    color: var(--shop-muted);

    font-size: 9px;
}


/* Existing checkout fields enhancement */

.checkout-field {
    margin-bottom: 14px;
}


.checkout-field:last-child {
    margin-bottom: 0;
}


.checkout-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--shop-text-soft);

    font-size: 10px;
    font-weight: 900;
}


.checkout-field input,
.checkout-field textarea,
.checkout-field select {
    width: 100%;

    min-height: 48px;

    padding: 10px 13px;

    border: 1px solid var(--shop-border);
    border-radius: 14px;

    outline: 0;

    background: #fbfdfe;
    color: var(--shop-text);

    font-size: 12px;

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


.checkout-field textarea {
    resize: vertical;
}


.checkout-field input:focus,
.checkout-field textarea:focus,
.checkout-field select:focus {
    border-color:
        rgba(22, 197, 207, 0.72);

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(22, 197, 207, 0.08);
}


.checkout-field select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}


.checkout-field-help {
    margin-top: 6px;

    color: var(--shop-muted);

    font-size: 8px;
    line-height: 1.6;
}


.optional-label {
    color: var(--shop-muted);

    font-size: 8px;
    font-weight: 600;
}


/* Products */

.checkout-products {
    display: flex;
    flex-direction: column;
}


.checkout-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 10px 0;

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


.checkout-product-row:first-child {
    padding-top: 0;
}


.checkout-product-info {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;

    flex: 1;
}


.checkout-product-info img {
    width: 46px;
    height: 46px;

    flex: 0 0 auto;

    object-fit: contain;

    padding: 3px;

    border-radius: 11px;

    background: var(--shop-card-soft);
}


.checkout-product-info strong {
    display: -webkit-box;
    overflow: hidden;

    color: var(--shop-text-soft);

    font-size: 10px;
    line-height: 1.5;

    font-weight: 800;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.checkout-product-info span {
    display: block;

    margin-top: 3px;

    color: var(--shop-muted);

    font-size: 8px;
}


.checkout-product-price {
    flex: 0 0 auto;

    color: var(--shop-text);

    font-size: 10px;
    font-weight: 900;
}


.checkout-product-price small {
    font-size: 7px;
}


/* Totals */

.checkout-totals {
    margin-top: 12px;
}


.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 6px 0;

    color: var(--shop-muted);

    font-size: 10px;
}


.checkout-total-row strong {
    color: var(--shop-text-soft);
    font-size: 11px;
}


.checkout-total-row.final {
    margin-top: 7px;
    padding-top: 13px;

    border-top: 1px dashed var(--shop-border);

    color: var(--shop-text);

    font-size: 13px;
    font-weight: 900;
}


.checkout-total-row.final strong {
    color: var(--alwan-cyan-dark);

    font-size: 17px;
}


.delivery-fee-pending {
    color: var(--shop-muted) !important;

    font-size: 9px !important;
    font-weight: 700 !important;
}


/* Submit */

.checkout-submit-wrap {
    margin-top: 17px;
}


.checkout-submit {
    width: 100%;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 0;
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 13px 27px
        rgba(7, 153, 171, 0.23);

    font-size: 13px;
    font-weight: 900;
}


.checkout-submit svg {
    width: 19px;
    height: 19px;
}


.checkout-submit:active {
    transform: scale(0.985);
}


.checkout-security-note {
    margin-top: 9px;

    color: var(--shop-muted);

    text-align: center;

    font-size: 8px;
    line-height: 1.6;
}







































/* =========================================================
   Alwan Authentication
========================================================= */

.auth-shop-app {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(22, 197, 207, 0.15),
            transparent 300px
        ),
        radial-gradient(
            circle at 0 45%,
            rgba(234, 77, 131, 0.07),
            transparent 250px
        ),
        var(--shop-bg);
}


.auth-shop-main {
    min-height: 100vh;
}


.auth-screen {
    min-height: 100vh;

    padding:
        calc(18px + env(safe-area-inset-top))
        18px
        calc(30px + env(safe-area-inset-bottom));
}


.auth-brand {
    position: relative;

    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.auth-logo {
    max-width: 125px;
    max-height: 58px;

    object-fit: contain;
}


.auth-back {
    position: absolute;

    top: 7px;
    right: 0;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--shop-border);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.90);

    color: var(--shop-text);

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


.auth-back svg {
    width: 19px;
    height: 19px;
}


.auth-intro {
    margin: 24px 3px 20px;
}


.auth-eyebrow {
    margin-bottom: 5px;

    color: var(--alwan-cyan-dark);

    font-size: 11px;
    font-weight: 900;
}


.auth-intro h1 {
    margin: 0;

    color: var(--shop-text);

    font-size: 27px;
    line-height: 1.4;

    font-weight: 900;
}


.auth-intro p {
    max-width: 340px;

    margin: 7px 0 0;

    color: var(--shop-muted);

    font-size: 11px;
    line-height: 1.8;
}


.auth-card {
    padding: 19px;

    border: 1px solid var(--shop-border);
    border-radius: 26px;

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

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


.auth-field {
    margin-bottom: 15px;
}


.auth-field label {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 7px;

    color: var(--shop-text-soft);

    font-size: 10px;
    font-weight: 900;
}


.auth-optional {
    color: var(--shop-muted);

    font-size: 8px;
    font-weight: 600;
}


.auth-input-wrap {
    position: relative;

    min-height: 51px;

    display: flex;
    align-items: center;

    border: 1px solid var(--shop-border);
    border-radius: 15px;

    background: #fbfdfe;

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


.auth-input-wrap:focus-within {
    border-color: rgba(22, 197, 207, 0.72);

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(22, 197, 207, 0.08);
}


.auth-input-wrap > svg {
    width: 19px;
    height: 19px;

    flex: 0 0 auto;

    margin-right: 13px;

    color: var(--alwan-cyan-dark);
}


.auth-input-wrap input {
    width: 100%;
    min-width: 0;

    height: 49px;

    padding: 0 11px;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--shop-text);

    font-size: 12px;
}


.auth-input-wrap input::placeholder {
    color: #aab4c0;
}


.auth-password-toggle {
    width: 43px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--shop-muted);
}


.auth-password-toggle svg {
    width: 18px;
    height: 18px;
}


.auth-field-hint {
    margin-top: 5px;

    color: var(--shop-muted);

    font-size: 8px;
    line-height: 1.5;
}


.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 4px 0 18px;

    font-size: 9px;
}


.auth-remember {
    display: flex !important;
    align-items: center;
    gap: 6px;

    margin: 0 !important;

    cursor: pointer;
}


.auth-remember input,
.auth-terms input {
    accent-color: var(--alwan-cyan-dark);
}


.auth-options a {
    color: var(--alwan-cyan-dark);

    font-weight: 800;
}


.auth-submit {
    width: 100%;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 12px 25px
        rgba(7, 153, 171, 0.22);

    font-size: 13px;
    font-weight: 900;
}


.auth-submit:active {
    transform: scale(0.985);
}


.auth-switch {
    margin-top: 18px;

    color: var(--shop-muted);

    text-align: center;

    font-size: 10px;
}


.auth-switch a {
    margin-right: 4px;

    color: var(--alwan-cyan-dark);

    font-weight: 900;
}


.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin: 4px 0 18px;

    color: var(--shop-muted);

    cursor: pointer;

    font-size: 9px;
    line-height: 1.7;
}


.auth-terms input {
    margin-top: 3px;

    flex: 0 0 auto;
}


.auth-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 16px;
}


.auth-benefits > div {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

    padding: 10px;

    border: 1px solid var(--shop-border);
    border-radius: 14px;

    background: rgba(255,255,255,0.70);

    color: var(--shop-muted);

    font-size: 8px;
}


.auth-benefit-icon {
    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}


.auth-benefit-icon.cyan {
    color: var(--alwan-cyan-dark);
    background: rgba(22,197,207,0.12);
}


.auth-benefit-icon.green {
    color: #398d46;
    background: rgba(73,184,93,0.12);
}








































/* =========================================================
   Account
========================================================= */

.account-profile-card {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 20px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 16px 35px
        rgba(7,153,171,0.21);
}


.account-profile-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    left: -40px;
    bottom: -65px;

    border-radius: 50%;

    background:
        rgba(246,200,67,0.45);
}


.account-avatar {
    position: relative;
    z-index: 2;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 21px;

    background: rgba(255,255,255,0.18);

    font-size: 24px;
    font-weight: 900;
}


.account-profile-info {
    position: relative;
    z-index: 2;

    min-width: 0;
}


.account-welcome {
    color: rgba(255,255,255,0.78);

    font-size: 9px;
}


.account-profile-info h2 {
    margin: 3px 0;

    font-size: 18px;
    font-weight: 900;
}


.account-profile-info p {
    margin: 0;

    overflow: hidden;

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

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.account-menu {
    margin-top: 15px;
    padding: 6px 16px;

    border: 1px solid var(--shop-border);
    border-radius: 22px;

    background: #fff;

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


.account-menu-title {
    padding: 11px 0 9px;

    color: var(--shop-muted);

    font-size: 9px;
    font-weight: 900;
}


.account-info-row,
.account-menu-row {
    min-height: 64px;

    display: flex;
    align-items: center;
    gap: 11px;

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


.account-info-row > div,
.account-menu-copy {
    min-width: 0;
    flex: 1;
}


.account-info-row span:not(.account-menu-icon),
.account-menu-copy span {
    display: block;

    margin-bottom: 3px;

    color: var(--shop-muted);

    font-size: 8px;
}


.account-info-row strong,
.account-menu-copy strong {
    display: block;

    overflow: hidden;

    color: var(--shop-text-soft);

    font-size: 11px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.account-menu-icon {
    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 12px;
}


.account-menu-icon svg {
    width: 19px;
    height: 19px;
}


.account-menu-icon.cyan {
    color: var(--alwan-cyan-dark);
    background: rgba(22,197,207,0.11);
}


.account-menu-icon.blue {
    color: var(--alwan-blue);
    background: rgba(50,103,214,0.10);
}


.account-menu-icon.green {
    color: #398d46;
    background: rgba(73,184,93,0.11);
}


.account-menu-icon.pink {
    color: #ca3a6b;
    background: rgba(234,77,131,0.10);
}


.account-menu-icon.yellow {
    color: #9e7900;
    background: rgba(246,200,67,0.15);
}


.account-menu-arrow {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    color: var(--shop-muted);
}


.account-logout-form {
    margin-top: 15px;
}


.account-logout {
    width: 100%;
    height: 51px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid rgba(232,75,104,0.14);
    border-radius: 16px;

    background: rgba(232,75,104,0.07);

    color: var(--shop-danger);

    font-size: 11px;
    font-weight: 900;
}


.account-logout svg {
    width: 18px;
    height: 18px;
}












































/* =========================================================
   Academic Hub
========================================================= */

.academic-hero {
    position: relative;
    overflow: hidden;

    min-height: 190px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 22px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 7% 10%,
            rgba(246,200,67,0.58),
            transparent 80px
        ),
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 17px 37px rgba(7,153,171,0.21);
}


.academic-hero-copy {
    position: relative;
    z-index: 2;

    max-width: 68%;
}


.academic-hero-kicker {
    display: inline-flex;

    margin-bottom: 7px;
    padding: 6px 9px;

    border-radius: 999px;

    background: rgba(255,255,255,0.17);

    font-size: 8px;
    font-weight: 900;
}


.academic-hero h1 {
    margin: 0;

    font-size: 20px;
    line-height: 1.5;
    font-weight: 900;
}


.academic-hero p {
    margin: 7px 0 0;

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

    font-size: 9px;
    line-height: 1.8;
}


.academic-hero-icon {
    width: 85px;
    height: 85px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 28px;

    background: rgba(255,255,255,0.14);

    transform: rotate(-5deg);
}


.academic-hero-icon svg {
    width: 49px;
    height: 49px;
}


/* Stages */

.academic-stage-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.academic-stage-card {
    min-height: 75px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    border: 1px solid var(--shop-border);
    border-radius: 20px;

    background: #fff;

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


.academic-stage-number {
    width: 47px;
    height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(22,197,207,0.14),
            rgba(50,103,214,0.07)
        );

    color: var(--alwan-cyan-dark);

    font-size: 16px;
    font-weight: 900;
}


.academic-stage-copy {
    min-width: 0;
    flex: 1;
}


.academic-stage-copy strong {
    display: block;

    color: var(--shop-text);

    font-size: 12px;
    font-weight: 900;
}


.academic-stage-copy span {
    display: block;

    margin-top: 4px;

    color: var(--shop-muted);

    font-size: 8px;
}


.academic-stage-arrow {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    color: var(--shop-muted);
}


/* Stage banner */

.academic-stage-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 18px;

    border: 1px solid rgba(50,103,214,0.09);
    border-radius: 23px;

    background:
        linear-gradient(
            135deg,
            rgba(50,103,214,0.08),
            rgba(22,197,207,0.06)
        );
}


.academic-stage-banner > div {
    min-width: 0;
}


.academic-stage-banner span {
    color: var(--alwan-blue);

    font-size: 8px;
    font-weight: 900;
}


.academic-stage-banner strong {
    display: block;

    margin-top: 3px;

    color: var(--shop-text);

    font-size: 18px;
    font-weight: 900;
}


.academic-stage-banner p {
    margin: 5px 0 0;

    color: var(--shop-muted);

    font-size: 8px;
    line-height: 1.7;
}


.academic-stage-banner > svg {
    width: 52px;
    height: 52px;

    flex: 0 0 auto;

    color: var(--alwan-blue);
}


/* Subjects */

.academic-subject-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 11px;
}


.academic-subject-card {
    min-height: 135px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 14px;

    border: 1px solid var(--shop-border);
    border-radius: 20px;

    background: #fff;

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


.academic-subject-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    border-radius: 14px;

    background: rgba(22,197,207,0.10);
    color: var(--alwan-cyan-dark);

    font-size: 16px;
    font-weight: 900;
}


.academic-subject-icon svg {
    width: 21px;
    height: 21px;
}


.academic-subject-card:nth-child(4n + 2)
.academic-subject-icon {
    background: rgba(246,200,67,0.16);
    color: #947000;
}


.academic-subject-card:nth-child(4n + 3)
.academic-subject-icon {
    background: rgba(234,77,131,0.10);
    color: var(--alwan-pink);
}


.academic-subject-card:nth-child(4n + 4)
.academic-subject-icon {
    background: rgba(73,184,93,0.11);
    color: #358942;
}


.academic-subject-card strong {
    color: var(--shop-text);

    font-size: 11px;
    line-height: 1.5;
    font-weight: 900;
}


.academic-subject-view {
    margin-top: 5px;

    color: var(--shop-muted);

    font-size: 8px;
}


/* Subject */

.academic-subject-banner {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px;

    margin-bottom: 15px;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(22,197,207,0.11),
            rgba(50,103,214,0.06)
        );
}


.academic-subject-banner-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 19px;

    background: #fff;
    color: var(--alwan-cyan-dark);

    box-shadow: var(--shadow-xs);

    font-size: 22px;
    font-weight: 900;
}


.academic-subject-banner span {
    color: var(--shop-muted);

    font-size: 8px;
}


.academic-subject-banner h1 {
    margin: 2px 0;

    color: var(--shop-text);

    font-size: 17px;
    font-weight: 900;
}


.academic-subject-banner p {
    margin: 0;

    color: var(--shop-muted);

    font-size: 8px;
}


/* Academic resources */

.academic-resource-chips {
    display: flex;
    align-items: center;
    gap: 7px;

    overflow-x: auto;

    margin: 0 -16px 15px;
    padding: 2px 16px 7px;

    scrollbar-width: none;
}


.academic-resource-chips::-webkit-scrollbar {
    display: none;
}


.academic-resource-chip {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 8px 10px;

    border: 1px solid var(--shop-border);
    border-radius: 999px;

    background: #fff;
    color: var(--shop-text-soft);

    font-size: 9px;
    font-weight: 900;
}


.academic-resource-chip small {
    min-width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border-radius: 999px;

    background: var(--shop-card-soft);
    color: var(--shop-muted);

    font-size: 7px;
}


.academic-resource-chip.active {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;
}


.academic-resource-chip.active small {
    background: rgba(255,255,255,0.18);
    color: #fff;
}




















.academic-home-card {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 20px 0;
    padding: 15px;

    border: 1px solid rgba(22,197,207,0.14);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(22,197,207,0.10),
            rgba(50,103,214,0.05)
        );
}


.academic-home-icon {
    width: 51px;
    height: 51px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 17px;

    background: #fff;
    color: var(--alwan-cyan-dark);

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


.academic-home-icon svg {
    width: 26px;
    height: 26px;
}


.academic-home-copy {
    min-width: 0;
    flex: 1;
}


.academic-home-copy > span {
    color: var(--alwan-cyan-dark);

    font-size: 8px;
    font-weight: 900;
}


.academic-home-copy strong {
    display: block;

    margin-top: 2px;

    color: var(--shop-text);

    font-size: 12px;
    font-weight: 900;
}


.academic-home-copy p {
    margin: 4px 0 0;

    color: var(--shop-muted);

    font-size: 8px;
    line-height: 1.6;
}


.academic-home-arrow {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    color: var(--alwan-cyan-dark);
}



















.product-card {
    position: relative;
}


.product-favorite-form {
    position: absolute;

    top: 9px;
    left: 9px;

    z-index: 8;

    margin: 0;
}


.product-favorite-button {
    position: absolute;

    top: 9px;
    left: 9px;

    z-index: 8;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 12px;

    background: rgba(255,255,255,0.91);

    color: var(--shop-muted);

    box-shadow: var(--shadow-xs);

    backdrop-filter: blur(8px);
}


.product-favorite-form .product-favorite-button {
    position: static;
}


.product-favorite-button svg {
    width: 17px;
    height: 17px;
}


.product-favorite-button.active {
    color: var(--alwan-pink);

    background: #fff;
}









.product-detail-favorite-form,
.product-detail-favorite {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 5;
}


.product-detail-favorite {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 14px;

    background: rgba(255,255,255,0.93);

    color: var(--shop-muted);

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


.product-detail-favorite-form .product-detail-favorite {
    position: static;
}


.product-detail-favorite svg {
    width: 20px;
    height: 20px;
}


.product-detail-favorite.active {
    color: var(--alwan-pink);
}














/* =========================================================
   Bottom Navigation
========================================================= */

.bottom-nav {
    position: fixed;

    right: 50%;
    bottom: 0;

    z-index: 100;

    width: min(100%, 500px);

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

    padding:
        7px 8px
        calc(7px + env(safe-area-inset-bottom));

    transform: translateX(50%);

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

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 -8px 30px
        rgba(28, 49, 67, 0.07);

    backdrop-filter: blur(16px);
}


.bottom-nav > a {
    min-width: 0;
    min-height: 54px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    position: relative;

    color: var(--shop-muted);

    font-size: 8px;
    font-weight: 800;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


.bottom-nav > a.active {
    color: var(--alwan-cyan-dark);
}


.bottom-nav > a:active {
    transform: scale(0.95);
}


.nav-icon-wrap {
    width: 31px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border-radius: 10px;
}


.bottom-nav > a.active .nav-icon-wrap {
    background:
        rgba(22, 197, 207, 0.10);
}


.nav-icon {
    width: 21px;
    height: 21px;
}


.nav-icon-relative {
    position: relative;
}


.nav-count {
    position: absolute;

    top: -4px;
    left: -5px;

    min-width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 3px;

    border: 2px solid #fff;
    border-radius: 999px;

    background: var(--alwan-pink);
    color: #fff;

    font-size: 7px;
    line-height: 1;
    font-weight: 900;
}






















/* =========================================================
   Shop Pagination
========================================================= */

.shop-pagination {
    margin-top: 24px;
}


.shop-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    width: 100%;

    direction: ltr;
}


.shop-page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    flex-wrap: wrap;
}


.shop-page-btn,
.shop-page-number {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid var(--shop-border);
    border-radius: 11px;

    background: #fff;
    color: var(--shop-text-soft);

    font-size: 10px;
    font-weight: 900;

    box-shadow: var(--shadow-xs);

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.shop-page-btn svg {
    width: 16px;
    height: 16px;
}


.shop-page-number.active {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    box-shadow:
        0 7px 17px rgba(7,153,171,0.20);
}


.shop-page-btn:not(.disabled):active,
.shop-page-number:not(.active):active {
    transform: scale(0.94);
}


.shop-page-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


.shop-page-dots {
    min-width: 18px;

    color: var(--shop-muted);

    text-align: center;

    font-size: 11px;
    font-weight: 900;
}


.shop-pagination-info {
    margin-top: 11px;

    color: var(--shop-muted);

    text-align: center;

    font-size: 9px;
    line-height: 1.6;
}


.shop-pagination-info strong {
    color: var(--shop-text-soft);
    font-weight: 900;
}















.price-kind {
    display: block;
    margin-top: 2px;

    color: var(--shop-muted);

    font-size: 7px !important;
    font-weight: 700 !important;
}


















.stage-packages-section {
    margin-bottom: 24px;
}


.stage-package-card {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px;

    border: 1px solid rgba(22,197,207,0.16);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(22,197,207,0.09),
            rgba(246,200,67,0.06)
        );

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


.stage-package-media {
    width: 72px;
    height: 72px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 18px;

    background: #fff;
}


.stage-package-media img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 5px;
}


.stage-package-media svg {
    width: 34px;
    height: 34px;

    color: var(--alwan-cyan-dark);
}


.stage-package-content {
    min-width: 0;
    flex: 1;
}


.stage-package-label {
    display: inline-flex;

    padding: 4px 7px;

    border-radius: 999px;

    background: rgba(73,184,93,0.12);
    color: #358942;

    font-size: 7px;
    font-weight: 900;
}


.stage-package-content > strong {
    display: block;

    margin-top: 5px;

    color: var(--shop-text);

    font-size: 11px;
    font-weight: 900;
}


.stage-package-meta {
    display: flex;
    align-items: center;
    gap: 4px;

    margin-top: 4px;

    color: var(--shop-muted);

    font-size: 8px;
}


.stage-package-price {
    margin-top: 5px;

    color: var(--alwan-cyan-dark);

    font-size: 14px;
    font-weight: 900;
}


.stage-package-price small {
    font-size: 7px;
}


.stage-package-arrow {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    color: var(--shop-muted);
}


/* Package detail */

.package-detail-card {
    padding: 16px;

    border: 1px solid var(--shop-border);
    border-radius: 24px;

    background: #fff;

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


.package-detail-image {
    width: 100%;
    max-height: 230px;

    display: block;

    object-fit: contain;

    margin-bottom: 15px;

    border-radius: 18px;

    background: #fafcfd;
}


.package-detail-label {
    color: var(--alwan-green);

    font-size: 8px;
    font-weight: 900;
}


.package-detail-copy h1 {
    margin: 4px 0;

    color: var(--shop-text);

    font-size: 18px;
    font-weight: 900;
}


.package-detail-copy p {
    margin: 6px 0 0;

    color: var(--shop-muted);

    font-size: 9px;
    line-height: 1.8;
}


.package-price-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 8px;

    margin-top: 15px;
}


.package-price-summary > div {
    padding: 11px;

    border-radius: 15px;

    background: var(--shop-card-soft);
}


.package-price-summary span {
    display: block;

    color: var(--shop-muted);

    font-size: 7px;
}


.package-price-summary strong {
    display: block;

    margin-top: 4px;

    color: var(--shop-text);

    font-size: 11px;
    font-weight: 900;
}


.package-price-summary .package-total {
    grid-column: 1 / -1;

    background:
        rgba(22,197,207,0.10);
}


.package-price-summary .package-total strong {
    color: var(--alwan-cyan-dark);

    font-size: 18px;
}


.package-add-button {
    width: 100%;

    margin-top: 13px;
    padding: 13px;

    border: 0;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--alwan-cyan),
            var(--alwan-cyan-dark)
        );

    color: #fff;

    font-size: 10px;
    font-weight: 900;
}


.package-books-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.package-book-row {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px;

    border: 1px solid var(--shop-border);
    border-radius: 17px;

    background: #fff;
}


.package-book-image {
    width: 49px;
    height: 59px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 10px;

    background: var(--shop-card-soft);
}


.package-book-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.package-book-copy {
    min-width: 0;
    flex: 1;
}


.package-book-copy strong {
    display: block;

    color: var(--shop-text);

    font-size: 9px;
    font-weight: 900;
}


.package-book-copy span {
    display: block;

    margin-top: 3px;

    color: var(--shop-muted);

    font-size: 7px;
}


.package-book-package-price {
    flex: 0 0 auto;

    color: var(--alwan-cyan-dark);

    font-size: 10px;
    font-weight: 900;
}


.package-book-package-price small {
    font-size: 6px;
}










































.products-stage-filter {
    margin: 14px 0;

    padding: 12px;

    border: 1px solid var(--shop-border);
    border-radius: 18px;

    background: #fff;
}


.products-stage-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 10px;
}


.products-stage-filter-head strong {
    display: block;

    color: var(--shop-text);

    font-size: 10px;
    font-weight: 900;
}


.products-stage-filter-head span {
    display: block;

    margin-top: 2px;

    color: var(--shop-muted);

    font-size: 7px;
}


.stage-filter-clear {
    flex: 0 0 auto;

    padding: 6px 9px;

    border-radius: 10px;

    background: rgba(234, 77, 131, 0.08);

    color: var(--alwan-pink);

    font-size: 7px;
    font-weight: 900;
}


.products-stage-filter-form {
    margin: 0;
}


.products-stage-select {
    width: 100%;

    height: 42px;

    padding: 0 12px;

    border: 1px solid var(--shop-border);
    border-radius: 13px;

    outline: none;

    background: var(--shop-card-soft);

    color: var(--shop-text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
}


.products-stage-select:focus {
    border-color: var(--alwan-cyan);
}






















/* .package-cover-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    overflow: hidden;
    background: #f4f8fa;
} */

.package-cover-collage-item {
    min-width: 0;
    overflow: hidden;
    background: #fff;
}

.package-cover-collage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}


/*
|--------------------------------------------------------------------------
| Package card collage
|--------------------------------------------------------------------------
*/

/* .package-cover-collage-card {
    width: 100%;
    height: 100%;
    min-height: 82px;
    padding: 4px;
    border-radius: inherit;
} */


/*
|--------------------------------------------------------------------------
| Package detail collage
|--------------------------------------------------------------------------
*/

.package-cover-collage-detail {
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 8px;
    gap: 7px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(22, 197, 207, 0.08),
            rgba(50, 103, 214, 0.05)
        );
}

.package-cover-collage-detail
/* .package-cover-collage-item {
    border-radius: 10px;
    box-shadow:
        0 3px 10px
        rgba(20, 45, 60, 0.08);
} */


/*
|--------------------------------------------------------------------------
| Main uploaded package image
|--------------------------------------------------------------------------
*/

.stage-package-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| Empty fallback
|--------------------------------------------------------------------------
*/

.package-cover-placeholder,
.package-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    background:
        linear-gradient(
            135deg,
            rgba(22, 197, 207, 0.08),
            rgba(50, 103, 214, 0.06)
        );

    color: var(--alwan-cyan-dark);
}

.package-cover-placeholder {
    height: 100%;
    min-height: 82px;
}

.package-detail-placeholder {
    aspect-ratio: 16 / 10;
    border-radius: 18px;
}

.package-cover-placeholder svg,
.package-detail-placeholder svg {
    width: 42px;
    height: 42px;
}





















/* 




.cart-package-collage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;

    width: 100%;
    height: 100%;

    padding: 2px;
    overflow: hidden;
}

.cart-package-collage img {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;

    object-fit: contain;

    background: #fff;
} */

















/* =========================================================
   PACKAGE BOOK STACK
   ========================================================= */

.package-book-stack {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 110px;

    overflow: hidden;

    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            #f8fcfd 0%,
            #eef8fa 100%
        );
}


/* Each cover */

.package-book-stack-item {
    position: absolute;

    top: 50%;

    width: 48%;
    height: 82%;

    transform-origin: center bottom;

    border-radius: 4px;

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 4px 10px rgba(24, 54, 70, .14);

    transition:
        transform .2s ease;
}


.package-book-stack-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #fff;
}


/* Back book */

.package-book-stack-item-4 {
    right: 6%;

    transform:
        translateY(-50%)
        rotate(5deg);

    z-index: 1;

    opacity: .92;
}


/* Third */

.package-book-stack-item-3 {
    right: 18%;

    transform:
        translateY(-50%)
        rotate(2.5deg);

    z-index: 2;
}


/* Second */

.package-book-stack-item-2 {
    right: 30%;

    transform:
        translateY(-50%)
        rotate(-1.5deg);

    z-index: 3;
}


/* Front */

.package-book-stack-item-1 {
    right: 42%;

    transform:
        translateY(-50%)
        rotate(-4deg);

    z-index: 4;
}


/* Bundle strap */

.package-book-stack-band {
    position: absolute;

    left: 5%;
    right: 5%;

    top: 53%;

    height: 10px;

    z-index: 10;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .88);

    box-shadow:
        0 1px 4px rgba(0, 0, 0, .12);

    pointer-events: none;
}
















/* =========================================================
   LARGE PACKAGE STACK
   ========================================================= */

.package-detail-book-stack {
    position: relative;

    width: 100%;
    height: 280px;

    overflow: hidden;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f3fafb 72%
        );
}


.package-detail-stack-book {
    position: absolute;

    top: 50%;

    right:
        calc(
            10%
            +
            (var(--book-index) * 11%)
        );

    width: 38%;
    height: 82%;

    transform:
        translateY(-50%)
        rotate(
            calc(
                -6deg
                +
                (var(--book-index) * 3deg)
            )
        );

    transform-origin: center bottom;

    border-radius: 6px;

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 8px 20px
        rgba(24, 54, 70, .16);
}


.package-detail-stack-book img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #fff;
}


.package-detail-stack-book:nth-child(1) {
    z-index: 10;
}


.package-detail-stack-book:nth-child(2) {
    z-index: 9;
}


.package-detail-stack-book:nth-child(3) {
    z-index: 8;
}


.package-detail-stack-book:nth-child(4) {
    z-index: 7;
}


.package-detail-stack-book:nth-child(5) {
    z-index: 6;
}


.package-detail-stack-band {
    position: absolute;

    left: 8%;
    right: 8%;

    top: 54%;

    z-index: 20;

    height: 16px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .9);

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, .13);

    pointer-events: none;
}











/* =========================================================
   PACKAGE DETAIL - MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .package-detail-book-stack {
        height: 260px;

        border-radius: 20px;

        overflow: hidden;

        background:
            radial-gradient(
                circle at center,
                #ffffff 0%,
                #f2fafb 72%
            );
    }


    .package-detail-stack-book {
        top: 50%;

        /*
         * Longer/narrower book shape.
         * Height controls the book,
         * aspect-ratio calculates the width.
         */
        width: auto;
        height: 88%;

        aspect-ratio: 0.68;

        right:
            calc(
                7%
                +
                (var(--book-index) * 11%)
            );

        transform:
            translateY(-50%)
            rotate(
                calc(
                    -5deg
                    +
                    (var(--book-index) * 2.4deg)
                )
            );

        transform-origin: center bottom;

        border-radius: 5px;

        box-shadow:
            0 6px 15px
            rgba(24, 54, 70, .15);
    }


    .package-detail-stack-book img {
        width: 100%;
        height: 100%;

        object-fit: contain;

        background: #fff;
    }


    .package-detail-stack-band {
        left: 7%;
        right: 7%;

        top: 55%;

        height: 14px;

        border-radius: 20px;
    }

}





@media (max-width: 380px) {

    .package-detail-book-stack {
        height: 235px;
    }

    .package-detail-stack-book {
        height: 87%;

        aspect-ratio: 0.66;

        right:
            calc(
                5%
                +
                (var(--book-index) * 11.5%)
            );
    }

    .package-detail-stack-band {
        left: 6%;
        right: 6%;

        top: 55%;
        height: 12px;
    }

}