/* =========================================================
   بن القبطان — PRODUCTS PAGE
   ========================================================= */

:root {
    --coffee-dark: #241006;
    --coffee-deep: #140803;
    --coffee: #5a2d1c;
    --coffee-mid: #6b3e26;
    --gold: #d7a15d;
    --gold-light: #f0d09a;
    --cream: #f3eee8;
    --cream-soft: #eee1d4;
    --text-dark: #4a2818;
    --muted: #75665c;
}

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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.products-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    direction: rtl;
    font-family: Arial, Tahoma, sans-serif;
    color: var(--cream);

    background:
        linear-gradient(
            90deg,
            rgba(10, 3, 1, 0.72),
            rgba(24, 8, 3, 0.42),
            rgba(10, 3, 1, 0.72)
        ),
        url("products-bg.png");

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow-x: hidden;
}

body.products-page button,
body.products-page input,
body.products-page textarea {
    font-family: inherit;
}

body.products-page button {
    cursor: pointer;
}


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

.products-page .products-hero {
    width: 100%;

    min-height: 430px;

    padding: 85px 20px 45px;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}

.products-page .products-hero h1 {
    margin: 0 0 10px;

    color: var(--gold);

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

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.65);

    animation:
        productsTitleShow 0.8s ease both;
}

.products-page .products-hero h2 {
    margin: 0 0 10px;

    color: var(--cream);

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

    text-align: center;

    text-shadow:
        0 4px 16px rgba(0, 0, 0, 0.55);

    animation:
        productsTitleShow 0.8s ease 0.05s both;
}

.products-page .products-hero h3 {
    margin: 0 0 16px;

    color: var(--gold);

    font-size: 20px;
    font-weight: 500;

    animation:
        productsTitleShow 0.8s ease 0.12s both;
}

.products-page .products-hero p {
    width: min(680px, 92%);

    margin: 0 auto;

    color: rgba(243, 238, 232, 0.82);

    font-size: 16px;
    line-height: 1.9;

    text-align: center;

    animation:
        productsTitleShow 0.8s ease 0.18s both;
}

/* =========================================================
   CART BUTTON
   ========================================================= */

.products-page .header-cart {
    position: fixed;

    top: 94px;
    right: 30px;

    z-index: 9998;

    width: 56px;
    height: 56px;

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

    color: var(--gold);

    background: rgba(36, 16, 6, 0.94);

    border: 1px solid rgba(215, 161, 93, 0.38);

    border-radius: 50%;

    font-size: 21px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

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

.products-page .header-cart:hover {
    transform: translateY(-3px) scale(1.06);

    background: rgba(107, 62, 38, 0.95);

    border-color: var(--gold);
}

.products-page #cartCount {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 21px;
    height: 21px;

    padding: 0 5px;

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

    color: var(--coffee-dark);
    background: var(--gold);

    border-radius: 50%;

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

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

.products-page .product-filters {
    width: min(900px, 92%);

    margin: 0 auto 45px;

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

    flex-wrap: wrap;

    gap: 13px;

    animation:
        productsFiltersShow 0.8s ease 0.2s both;
}

.products-page .filter-btn {
    min-width: 135px;

    margin: 0;
    padding: 13px 22px;

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

    gap: 9px;

    color: #eadfd5;

    background: rgba(35, 15, 7, 0.76);

    border: 1px solid rgba(215, 161, 93, 0.27);

    border-radius: 15px;

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

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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

.products-page .filter-btn i {
    color: var(--gold);
    font-size: 16px;
}

.products-page .filter-btn:hover {
    color: #fff;

    border-color: var(--gold);

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.30);
}

.products-page .filter-btn.active {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6b3e26,
            #3f2012
        );

    border-color: var(--gold);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.32);
}

.products-page .filter-btn.active i {
    color: var(--gold-light);
}

/* =========================================================
   PRODUCTS GRID
   ========================================================= */

.products-page .all-products {
    width: min(1200px, 92%);

    margin: 0 auto;

    display: grid;

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

    gap: 28px;

    padding-bottom: 15px;
}

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

.products-page .product-full-card {
    position: relative;

    min-height: 275px;

    display: flex;

    overflow: hidden;

    cursor: pointer;

    background:
        linear-gradient(
            145deg,
            rgba(46, 20, 9, 0.88),
            rgba(25, 9, 3, 0.86)
        );

    border: 1px solid rgba(215, 161, 93, 0.22);

    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;

    animation:
        productPremiumShow 0.75s ease both;
}

.products-page .product-full-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.09),
            transparent
        );

    transform: skewX(-20deg);

    pointer-events: none;

    transition: right 0.8s ease;

    z-index: 5;
}

.products-page .product-full-card:hover::before {
    right: 140%;
}

.products-page .product-full-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(215, 161, 93, 0.52);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.products-page .product-full-image {
    position: relative;

    width: 43%;
    min-width: 43%;

    overflow: hidden;
}

.products-page .product-full-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20, 7, 2, 0.16)
        );

    pointer-events: none;

    z-index: 2;
}

.products-page .product-full-image img {
    width: 100%;
    height: 100%;

    display: block;

    margin: 0;

    object-fit: cover;
    object-position: center;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}

.products-page .product-full-card:hover .product-full-image img {
    transform: scale(1.08);

    filter: brightness(1.08);
}

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

.products-page .product-full-info {
    flex: 1;

    padding: 28px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    text-align: right;
}

.products-page .product-category {
    display: none;
}

.products-page .product-full-info h2 {
    margin: 0 0 11px;

    color: var(--gold-light);

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

    text-align: right;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.55);
}

.products-page .product-full-info p {
    margin: 0 0 23px;

    color: #d8cec6;

    font-size: 15px;
    line-height: 1.85;

    text-align: right;
}

.products-page .product-full-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}

.products-page .product-full-bottom strong {
    color: #e5b875;

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

    white-space: nowrap;
}

.products-page .product-full-bottom button {
    margin: 0;

    padding: 11px 17px;

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

    gap: 7px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6b3e26,
            #402012
        );

    border: 1px solid rgba(215, 161, 93, 0.25);

    border-radius: 12px;

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

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.26);

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

.products-page .product-full-bottom button:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #8a542f,
            #5a2d1c
        );

    border-color:
        rgba(215, 161, 93, 0.55);
}

/* =========================================================
   LOAD MORE
   ========================================================= */

.products-page .load-more-btn {
    display: block;

    margin: 42px auto 20px;

    padding: 13px 36px;

    color: #fff;

    background: rgba(45, 20, 10, 0.86);

    border: 1px solid rgba(215, 161, 93, 0.38);

    border-radius: 14px;

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

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25);

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

.products-page .load-more-btn:hover {
    transform: translateY(-4px);

    background: var(--coffee-mid);

    border-color: var(--gold);
}

/* =========================================================
   WHATSAPP
   ========================================================= */

.products-page .whatsapp-float {
    position: fixed;

    left: 28px;
    bottom: 28px;

    z-index: 9998;

    width: 58px;
    height: 58px;

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

    color: #fff;

    background: #25d366;

    border: 3px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    font-size: 29px;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);

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

.products-page .whatsapp-float:hover {
    transform: translateY(-5px) scale(1.06);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.42);
}

/* =========================================================
   PRODUCT MODAL — PREMIUM DARK STYLE
   ========================================================= */

.products-page .product-modal {
    position: fixed;
    inset: 0;
    z-index: 30000;

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

    padding: 20px;

    background: rgba(5, 2, 1, 0.88);

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

.products-page .product-modal.show {
    display: flex;
}


/* =========================
   صندوق المنتج
   ========================= */

.products-page .product-modal .modal-content {

    position: relative;

    width: min(850px, 94vw);
    max-height: 92vh;

    overflow-y: auto;

    padding: 32px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: center;

    direction: rtl;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            rgba(48, 21, 9, 0.98),
            rgba(20, 7, 3, 0.99)
        );

    border: 1px solid rgba(215, 161, 93, 0.45);

    border-radius: 28px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.75),
        inset 0 0 50px rgba(215, 161, 93, 0.035);

    animation: premiumModalShow 0.35s ease both;
}


/* لمعة خفيفة داخل المودال */

.products-page .product-modal .modal-content::before {

    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 161, 93, 0.7),
            transparent
        );

    pointer-events: none;
}


/* =========================
   زر الإغلاق
   ========================= */

.products-page .product-modal .close-modal {

    position: absolute;

    top: 16px;
    left: 16px;

    width: 40px;
    height: 40px;

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

    color: #e6c18a;

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

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 50%;

    font-size: 18px;

    cursor: pointer;

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

.products-page .product-modal .close-modal:hover {

    transform: rotate(90deg) scale(1.08);

    color: #fff;

    background: rgba(215, 161, 93, 0.16);

    border-color: var(--gold);
}


/* =========================
   صورة المنتج
   ========================= */

.products-page .product-modal #modalImage {

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

    height: 330px;

    display: block;

    margin: auto;

    padding: 10px;

    object-fit: contain;
    object-position: center;

    background:
        linear-gradient(
            145deg,
            #32170b,
            #160703
        );

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 22px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.50),
        inset 0 0 25px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}

.products-page .product-modal #modalImage:hover {

    transform: scale(1.025);

    border-color:
        rgba(215, 161, 93, 0.60);
}


/* =========================
   معلومات المنتج
   ========================= */

.products-page .product-modal #modalTitle {

    margin: 0 0 15px;

    color: var(--gold-light);

    font-size: 32px;

    font-weight: 800;

    line-height: 1.4;

    text-align: center;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.45);
}

.products-page .product-modal #modalDescription {

    margin: 0 auto 25px;

    max-width: 420px;

    color: #cfc2b8;

    font-size: 15px;

    line-height: 2;

    text-align: center;
}


/* =========================
   الوزن
   ========================= */

.products-page .weight-options {

    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;

    margin: 20px 0;
}

.products-page .weight-options button {

    min-width: 90px;

    margin: 0;

    padding: 11px 16px;

    color: #e5d8cd;

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

    border: 1px solid rgba(215, 161, 93, 0.28);

    border-radius: 12px;

    font-size: 14px;

    font-weight: 700;

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

.products-page .weight-options button:hover {

    transform: translateY(-3px);

    color: #fff;

    background:
        rgba(215, 161, 93, 0.12);

    border-color: var(--gold);
}

.products-page .weight-options button.active {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #8a542f,
            #542814
        );

    border-color: var(--gold);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.30);
}


/* =========================
   الوزن المخصص
   ========================= */

.products-page .custom-weight {

    margin: 20px auto;

    text-align: center;
}

.products-page .custom-weight label {

    display: block;

    margin-bottom: 9px;

    color: #cdbfb5;

    font-size: 14px;
}

.products-page .custom-weight-input {

    display: flex;

    width: min(300px, 100%);

    margin: auto;
}

.products-page .custom-weight-input input {

    width: 100%;

    padding: 12px 14px;

    color: #fff;

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

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 0 12px 12px 0;

    outline: none;

    font-size: 15px;
}

.products-page .custom-weight-input input::placeholder {

    color: #998b81;
}

.products-page .custom-weight-input input:focus {

    border-color: var(--gold);

    box-shadow:
        0 0 0 3px rgba(215, 161, 93, 0.08);
}

.products-page .custom-weight-input span {

    display: flex;
    align-items: center;

    padding: 0 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #754322,
            #4b2412
        );

    border-radius: 12px 0 0 12px;

    font-size: 14px;

    font-weight: 700;
}


/* =========================
   السعر
   ========================= */

.products-page #modalPrice {

    margin: 24px 0 18px;

    color: var(--gold-light);

    font-size: 24px;

    font-weight: 800;

    text-align: center;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.35);
}


/* =========================
   الكمية + و -
   ========================= */

.products-page .quantity {

    display: flex;

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

    gap: 20px;

    margin: 15px 0 22px;
}

.products-page .quantity button {

    width: 42px;
    height: 42px;

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

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #754322,
            #4b2412
        );

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 50%;

    font-size: 22px;

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

.products-page .quantity button:hover {

    transform: scale(1.10);

    background:
        linear-gradient(
            135deg,
            #956038,
            #633016
        );

    border-color: var(--gold);
}

.products-page #quantityNumber {

    min-width: 30px;

    color: #fff;

    font-size: 22px;

    font-weight: 800;

    text-align: center;
}


/* =========================
   إضافة للسلة
   ========================= */

.products-page .add-to-cart {

    width: 100%;

    margin-top: 10px;

    padding: 15px 20px;

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

    gap: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #8a542f,
            #542814
        );

    border: 1px solid rgba(215, 161, 93, 0.35);

    border-radius: 13px;

    font-size: 16px;

    font-weight: 800;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.products-page .add-to-cart:hover {

    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #a2683d,
            #69351b
        );

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.40);
}


/* =========================
   حركة فتح المودال
   ========================= */

@keyframes premiumModalShow {

    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   MOBILE PRODUCT MODAL
   ========================================================= */

@media (max-width: 700px) {

    .products-page .product-modal {
        padding: 12px;
    }

    .products-page .product-modal .modal-content {

        width: 96vw;

        max-height: 94vh;

        padding: 22px 17px;

        display: flex;

        flex-direction: column;

        gap: 18px;

        border-radius: 22px;
    }

    .products-page .product-modal #modalImage {

        width: 100%;

        max-width: 330px;

        height: 230px;

        padding: 8px;
    }

    .products-page .product-modal #modalTitle {

        font-size: 25px;

        margin-bottom: 8px;
    }

    .products-page .product-modal #modalDescription {

        font-size: 14px;

        margin-bottom: 15px;
    }

    .products-page #modalPrice {

        margin: 15px 0;

        font-size: 21px;
    }

    .products-page .weight-options {

        gap: 7px;

        margin: 15px 0;
    }

    .products-page .weight-options button {

        min-width: 82px;

        padding: 9px 12px;

        font-size: 13px;
    }

    .products-page .custom-weight {

        margin: 15px 0;
    }

    .products-page .quantity {

        margin: 12px 0 18px;
    }

    .products-page .add-to-cart {

        padding: 14px;

        font-size: 15px;
    }
}

/* =========================================================
   WEIGHT
   ========================================================= */

.products-page .weight-options {
    display: flex;

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

    flex-wrap: wrap;

    gap: 9px;

    margin: 18px 0;
}

.products-page .weight-options button {
    margin: 0;

    padding: 10px 16px;

    color: var(--text-dark);

    background: #fffaf3;

    border: 1px solid #cdb9a8;

    border-radius: 11px;

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

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

.products-page .weight-options button:hover,
.products-page .weight-options button.active {
    color: #fff;

    background: var(--coffee);

    border-color: var(--coffee);

    transform: translateY(-2px);
}

/* =========================================================
   CUSTOM WEIGHT
   ========================================================= */

.products-page .custom-weight {
    margin: 18px 0;

    text-align: center;
}

.products-page .custom-weight label {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 14px;
}

.products-page .custom-weight-input {
    display: flex;

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

    width: min(300px, 100%);

    margin: auto;
}

.products-page .custom-weight-input input {
    width: 100%;

    padding: 11px 14px;

    color: var(--text-dark);

    background: #fffdf9;

    border: 1px solid #cdb9a8;

    border-radius: 11px 0 0 11px;

    outline: none;

    font-size: 15px;
}

.products-page .custom-weight-input input:focus {
    border-color: var(--coffee);

    box-shadow:
        0 0 0 3px rgba(90, 45, 28, 0.10);
}

.products-page .custom-weight-input span {
    padding: 11px 13px;

    color: #fff;

    background: var(--coffee);

    border-radius: 0 11px 11px 0;

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

    white-space: nowrap;
}

/* =========================================================
   MODAL PRICE + QUANTITY
   ========================================================= */

.products-page #modalPrice {
    margin: 18px 0;

    color: var(--coffee);

    font-size: 21px;

    text-align: center;
}

.products-page .quantity {
    display: flex;

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

    gap: 18px;

    margin: 18px 0;
}

.products-page .quantity button {
    width: 38px;
    height: 38px;

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

    color: #fff;

    background: var(--coffee);

    border: none;

    border-radius: 50%;

    font-size: 22px;

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

.products-page .quantity button:hover {
    transform: scale(1.08);

    background: var(--coffee-dark);
}

.products-page #quantityNumber {
    min-width: 28px;

    color: var(--text-dark);

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

    text-align: center;
}

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

.products-page .add-to-cart {
    width: 100%;

    margin-top: 12px;

    padding: 14px 20px;

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

    gap: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6b3e26,
            #402012
        );

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 13px;

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

    box-shadow:
        0 10px 25px rgba(60, 28, 12, 0.20);

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

.products-page .add-to-cart:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(60, 28, 12, 0.28);
}

/* =========================================================
   CART
   ========================================================= */

.products-page .cart-content {
    width: min(650px, 94vw);
}

.products-page .cart-content h2,
.products-page .checkout-content h2 {
    margin: 0 0 25px;

    color: var(--coffee);

    font-size: 28px;

    text-align: center;
}

.products-page #cartItems {
    display: flex;

    flex-direction: column;

    gap: 12px;

    max-height: 48vh;

    overflow-y: auto;
}

.products-page .cart-item {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px;

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

    border: 1px solid #e4d2c0;

    border-radius: 15px;
}

.products-page .cart-item-image {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    object-fit: cover;

    border-radius: 12px;
}

.products-page .cart-item-info {
    flex: 1;
}

.products-page .cart-item-info h3 {
    margin: 0 0 5px;

    color: var(--text-dark);

    font-size: 16px;
}

.products-page .cart-item-info p {
    margin: 3px 0;

    color: var(--muted);

    font-size: 13px;
}

.products-page .cart-item-info strong {
    display: block;

    margin-top: 6px;

    color: var(--coffee);

    font-size: 15px;
}

.products-page .cart-item button {
    border: 0;

    background: transparent;
}

.products-page #cartTotal {
    margin: 22px 0;

    color: var(--coffee);

    font-size: 20px;

    text-align: center;
}

.products-page .clear-cart-btn,
.products-page .checkout-button,
.products-page .confirm-order {
    width: 100%;

    margin-top: 10px;

    padding: 13px 18px;

    border-radius: 12px;

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

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

.products-page .clear-cart-btn {
    color: #fff;

    background: #8b4f2c;

    border: none;
}

.products-page .checkout-button,
.products-page .confirm-order {
    color: #fff;

    background: var(--coffee);

    border: none;
}

.products-page .clear-cart-btn:hover,
.products-page .checkout-button:hover,
.products-page .confirm-order:hover {
    transform: translateY(-2px);

    background: var(--coffee-dark);
}

/* =========================================================
   CHECKOUT
   ========================================================= */

.products-page .checkout-content {
    width: min(520px, 94vw);
}

.products-page .checkout-content input,
.products-page .checkout-content textarea {
    width: 100%;

    margin: 7px 0;

    padding: 13px 14px;

    color: var(--text-dark);

    background: #fffdf9;

    border: 1px solid #cdb9a8;

    border-radius: 11px;

    outline: none;

    font-size: 15px;

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

.products-page .checkout-content input:focus,
.products-page .checkout-content textarea:focus {
    border-color: var(--coffee);

    box-shadow:
        0 0 0 3px rgba(90, 45, 28, 0.10);
}

.products-page .checkout-content textarea {
    min-height: 110px;

    resize: vertical;
}

/* =========================================================
   EMPTY CART
   ========================================================= */

.products-page .empty-cart {
    padding: 35px 15px;

    color: var(--muted);

    text-align: center;
}

.products-page .empty-cart i {
    display: block;

    margin-bottom: 12px;

    color: var(--gold);

    font-size: 42px;
}

/* =========================================================
   TOAST
   ========================================================= */

.products-page .toast-message {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 50000;

    padding: 13px 20px;

    color: var(--coffee-dark);

    background: var(--gold);

    border-radius: 12px;

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

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.30);

    opacity: 0;

    transform: translateY(15px);

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

.products-page .toast-message.show {
    opacity: 1;

    transform: translateY(0);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes productsTitleShow {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes productsFiltersShow {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes productPremiumShow {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalShow {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@media (max-width: 900px) {


    .products-page .header-cart {
        right: 20px;
    }

    .products-page .all-products {
        width: 94%;

        gap: 20px;
    }

    .products-page .product-full-card {
        min-height: 250px;
    }

    .products-page .product-full-info {
        padding: 22px;
    }

    .products-page .product-full-info h2 {
        font-size: 23px;
    }
}

/* =========================================================
   MOBILE
   مهم:
   الهيدر يظل 78px ولا يكبر أو يصغر
   ========================================================= */

@media (max-width: 700px) {

    body.products-page {
        background-attachment: scroll;
        background-position: center top;
    }

   
    /* CART */

    .products-page .header-cart {
        top: 90px;

        right: 15px;

        width: 48px;
        height: 48px;

        font-size: 18px;
    }

    /* HERO */

    .products-page .products-hero {
        min-height: 370px;

        padding: 65px 18px 35px;
    }

    .products-page .products-hero h1 {
        font-size: 34px;
    }

    .products-page .products-hero h2 {
        font-size: 26px;
    }

    .products-page .products-hero h3 {
        font-size: 17px;
    }

    .products-page .products-hero p {
        width: 94%;

        font-size: 14px;
    }

    /* FILTERS */

    .products-page .product-filters {
        width: 94%;

        gap: 8px;

        margin-bottom: 30px;
    }

    .products-page .filter-btn {
        min-width: calc(50% - 4px);

        padding: 10px 8px;

        font-size: 13px;
    }

    /* PRODUCTS */

    .products-page .all-products {
        width: 94%;

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .products-page .product-full-card {
        min-height: 0;

        flex-direction: column;

        border-radius: 20px;
    }

    .products-page .product-full-image {
        width: 100%;
        min-width: 100%;

        height: 230px;
    }

    .products-page .product-full-info {
        padding: 21px;
    }

    .products-page .product-full-info h2 {
        font-size: 23px;
    }

    .products-page .product-full-info p {
        font-size: 14px;
    }

    .products-page .product-full-bottom strong {
        font-size: 16px;
    }

    .products-page .product-full-bottom button {
        padding: 10px 13px;

        font-size: 13px;
    }

    /* WHATSAPP */

    .products-page .whatsapp-float {
        left: 17px;
        bottom: 17px;

        width: 53px;
        height: 53px;

        font-size: 27px;
    }

    /* MODALS */

    .products-page .product-modal,
    .products-page .cart-modal,
    .products-page .checkout-modal {
        padding: 12px;
    }

    .products-page .modal-content,
    .products-page .cart-content,
    .products-page .checkout-content {
        width: 96vw;

        max-height: 92vh;

        padding: 24px 17px;

        border-radius: 20px;
    }

    .products-page .product-modal #modalImage {
        width: 210px;
        height: 145px;
    }

    .products-page .product-modal #modalTitle {
        font-size: 25px;
    }

    .products-page .weight-options {
        gap: 6px;
    }

    .products-page .weight-options button {
        padding: 9px 12px;

        font-size: 13px;
    }

    .products-page .cart-item {
        align-items: flex-start;
    }

    .products-page .cart-item-image {
        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }

}

/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 420px) {

   

    .products-page .product-full-image {
        height: 205px;
    }

    .products-page .product-full-bottom {
        align-items: stretch;

        flex-direction: column;
    }

    .products-page .product-full-bottom button {
        width: 100%;
    }

    .products-page .product-full-bottom strong {
        text-align: center;
    }

    .products-page .header-cart {
        width: 44px;
        height: 44px;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .products-page *,
    .products-page *::before,
    .products-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}




/* =========================================================
   PREMIUM CART — بن القبطان
   ========================================================= */

.products-page .cart-modal {
    background:
        rgba(10, 4, 1, 0.82);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 20px;
}


/* صندوق السلة */

.products-page .cart-content {
    position: relative;

    width: min(680px, 94vw);

    max-height: 88vh;

    overflow-y: auto;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #fffaf3,
            #f3e5d6
        );

    border:
        1px solid
        rgba(215, 161, 93, 0.45);

    border-radius: 28px;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.55);

    animation:
        premiumCartShow 0.35s ease both;
}


@keyframes premiumCartShow {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* عنوان السلة */

.products-page .cart-content h2 {
    margin:
        0 0 28px;

    padding-bottom: 18px;

    color:
        #4a2818;

    font-size: 29px;

    font-weight: 800;

    text-align: center;

    border-bottom:
        1px solid
        #e5d2bd;
}


/* زر إغلاق السلة */

.products-page .cart-content .close-modal {
    position: absolute;

    top: 17px;
    left: 17px;

    width: 40px;
    height: 40px;

    display: flex;

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

    color:
        #6b3e26;

    background:
        rgba(107, 62, 38, 0.08);

    border:
        1px solid
        rgba(107, 62, 38, 0.15);

    border-radius: 50%;

    font-size: 17px;

    transition:
        0.25s ease;
}


.products-page .cart-content .close-modal:hover {
    color: #fff;

    background:
        #6b3e26;

    transform:
        rotate(90deg);
}


/* =========================================================
   CART ITEM
   ========================================================= */

.products-page .cart-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 14px;

    padding: 15px;

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

    border:
        1px solid
        #ead9c8;

    border-radius: 19px;

    box-shadow:
        0 7px 22px
        rgba(60, 30, 15, 0.08);

    transition:
        0.25s ease;
}


.products-page .cart-item:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(215, 161, 93, 0.55);

    box-shadow:
        0 12px 28px
        rgba(60, 30, 15, 0.13);
}


/* صورة المنتج */

.products-page .cart-item-image-box {
    width: 90px;
    height: 90px;

    flex:
        0 0 90px;

    overflow: hidden;

    border-radius: 15px;

    background:
        #ead8c5;

    box-shadow:
        0 7px 18px
        rgba(50, 25, 10, 0.15);
}


.products-page .cart-item-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 15px;

    transition:
        transform 0.35s ease;
}


.products-page .cart-item:hover
.cart-item-image {
    transform:
        scale(1.06);
}


/* معلومات المنتج */

.products-page .cart-item-info {
    flex: 1;

    min-width: 0;
}


.products-page .cart-item-info h3 {
    margin:
        0 0 8px;

    color:
        #4a2818;

    font-size: 18px;

    font-weight: 800;
}


.products-page .cart-item-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 8px;

    color:
        #75665c;

    font-size: 13px;
}


.products-page .cart-item-meta span {
    display: flex;

    align-items: center;

    gap: 5px;
}


.products-page .cart-item-meta i {
    color:
        #b47a3c;
}


.products-page .cart-item-price {
    display: block;

    margin-bottom: 10px;

    color:
        #6b3e26;

    font-size: 17px;

    font-weight: 900;
}


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

.products-page .cart-quantity {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 4px 6px;

    background:
        #f4e7d8;

    border:
        1px solid
        #dec9b4;

    border-radius: 12px;
}


.products-page .cart-quantity button {
    width: 29px;
    height: 29px;

    display: flex;

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

    padding: 0;

    color: #fff;

    background:
        #6b3e26;

    border: none;

    border-radius: 8px;

    font-size: 18px;

    font-weight: bold;

    transition:
        0.2s ease;
}


.products-page .cart-quantity button:hover {
    background:
        #241006;

    transform:
        scale(1.08);
}


.products-page .cart-quantity span {
    min-width: 25px;

    color:
        #4a2818;

    font-size: 15px;

    font-weight: 900;

    text-align: center;
}


/* =========================================================
   DELETE
   ========================================================= */

.products-page .remove-item {
    width: 38px;
    height: 38px;

    flex:
        0 0 38px;

    display: flex;

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

    color:
        #a24b3d;

    background:
        rgba(162, 75, 61, 0.08);

    border:
        1px solid
        rgba(162, 75, 61, 0.15);

    border-radius: 11px;

    font-size: 14px;

    transition:
        0.25s ease;
}


.products-page .remove-item:hover {
    color: #fff;

    background:
        #a24b3d;

    transform:
        translateY(-2px);
}


/* =========================================================
   TOTAL
   ========================================================= */

.products-page #cartTotal {
    margin:
        25px 0 18px;

    padding:
        18px;

    color:
        #4a2818;

    background:
        linear-gradient(
            135deg,
            #f7eadc,
            #ead7c2
        );

    border:
        1px solid
        #ddc5ad;

    border-radius: 16px;

    font-size: 22px;

    font-weight: 900;

    text-align: center;
}


/* =========================================================
   EMPTY CART
   ========================================================= */

.products-page .empty-cart {
    padding:
        45px 20px;

    text-align: center;

    color:
        #75665c;
}


.products-page .empty-cart-icon {
    width: 78px;
    height: 78px;

    margin:
        0 auto 18px;

    display: flex;

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

    color:
        #c18a4b;

    background:
        rgba(215, 161, 93, 0.12);

    border:
        1px solid
        rgba(215, 161, 93, 0.25);

    border-radius: 50%;

    font-size: 31px;
}


.products-page .empty-cart h3 {
    margin:
        0 0 8px;

    color:
        #4a2818;

    font-size: 22px;
}


.products-page .empty-cart p {
    margin:
        0 0 7px;

    color:
        #75665c;

    font-size: 15px;
}


.products-page .empty-cart span {
    color:
        #9a897c;

    font-size: 13px;
}


/* =========================================================
   CLEAR CART
   ========================================================= */

.products-page .clear-cart-btn {
    width: 100%;

    display: flex;

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

    gap: 8px;

    margin:
        10px 0;

    padding:
        13px 18px;

    color:
        #8b3a2b;

    background:
        rgba(139, 58, 43, 0.07);

    border:
        1px solid
        rgba(139, 58, 43, 0.18);

    border-radius: 12px;

    font-size: 14px;

    font-weight: 800;

    transition:
        0.25s ease;
}


.products-page .clear-cart-btn:hover {
    color: #fff;

    background:
        #8b3a2b;

    transform:
        translateY(-2px);
}


/* =========================================================
   CHECKOUT BUTTON
   ========================================================= */

.products-page .checkout-button {
    width: 100%;

    margin-top: 10px;

    padding:
        15px 20px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6b3e26,
            #3b1b0e
        );

    border:
        1px solid
        rgba(215, 161, 93, 0.35);

    border-radius: 13px;

    font-size: 16px;

    font-weight: 900;

    box-shadow:
        0 9px 25px
        rgba(70, 35, 15, 0.22);

    transition:
        0.25s ease;
}


.products-page .checkout-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(70, 35, 15, 0.30);
}


/* =========================================================
   CART COUNT
   ========================================================= */

.products-page #cartCount {
    transition:
        0.25s ease;
}


.products-page #cartCount.has-items {
    animation:
        cartCountPop 0.35s ease;
}


@keyframes cartCountPop {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   TOAST
   ========================================================= */

.products-page .toast-message {
    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        13px 18px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #6b3e26,
            #3b1b0e
        );

    border:
        1px solid
        rgba(215, 161, 93, 0.35);

    border-radius: 13px;
}


.products-page .toast-message i {
    color:
        #d7a15d;

    font-size: 17px;
}


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

@media (max-width: 600px) {

    .products-page .cart-content {
        width: 96vw;

        padding:
            24px 15px;

        border-radius: 22px;
    }


    .products-page .cart-content h2 {
        font-size: 24px;

        margin-bottom: 22px;
    }


    .products-page .cart-item {
        gap: 10px;

        padding: 11px;
    }


    .products-page .cart-item-image-box {
        width: 68px;
        height: 68px;

        flex-basis: 68px;
    }


    .products-page .cart-item-info h3 {
        font-size: 15px;
    }


    .products-page .cart-item-meta {
        font-size: 12px;

        gap: 7px;
    }


    .products-page .cart-item-price {
        font-size: 15px;
    }


    .products-page .remove-item {
        width: 33px;
        height: 33px;

        flex-basis: 33px;
    }


    .products-page #cartTotal {
        font-size: 19px;
    }
}
/* =========================================================
   PRODUCT MODAL — الشكل النهائي
   ========================================================= */

.products-page .product-modal {
    position: fixed;
    inset: 0;
    z-index: 30000;

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

    padding: 20px;

    background: rgba(5, 2, 1, 0.86);

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

.products-page .product-modal.show {
    display: flex;
}


/* =========================
   الصندوق الرئيسي
   ========================= */

.products-page .product-modal .modal-content {

    position: relative;

    width: 720px;
    max-width: 94vw;

    max-height: 90vh;

    padding: 28px;

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

    gap: 28px;

    align-items: center;

    direction: rtl;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #35170b,
            #1c0803
        );

    border: 1px solid rgba(215, 161, 93, 0.48);

    border-radius: 25px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.70),
        inset 0 0 35px rgba(215, 161, 93, 0.04);

    overflow-y: auto;

    animation: premiumProductModal 0.3s ease both;
}


/* =========================
   زر X
   ========================= */

.products-page .product-modal .close-modal {

    position: absolute;

    top: 14px;
    left: 14px;

    width: 36px;
    height: 36px;

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

    color: #d9aa70;

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

    border: 1px solid rgba(215, 161, 93, 0.28);

    border-radius: 50%;

    font-size: 17px;

    cursor: pointer;

    transition: 0.3s ease;
}

.products-page .product-modal .close-modal:hover {

    color: #fff;

    background: rgba(215, 161, 93, 0.15);

    border-color: var(--gold);

    transform: rotate(90deg);
}


/* =========================================================
   الصورة
   ========================================================= */

.products-page .product-modal #modalImage {

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

    height: 275px;

    display: block;

    margin: auto;

    padding: 8px;

    object-fit: contain;
    object-position: center;

    background:
        linear-gradient(
            145deg,
            #281008,
            #140603
        );

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 20px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.48);

    transition: transform 0.35s ease;
}

.products-page .product-modal #modalImage:hover {
    transform: scale(1.025);
}


/* =========================================================
   اسم المنتج
   ========================================================= */

.products-page .product-modal #modalTitle {

    margin: 0 0 12px;

    color: var(--gold-light);

    font-size: 28px;

    font-weight: 800;

    line-height: 1.4;

    text-align: center;
}


/* =========================================================
   الوصف
   ========================================================= */

.products-page .product-modal #modalDescription {

    margin: 0 auto 18px;

    color: #cdbfb5;

    font-size: 14px;

    line-height: 1.8;

    text-align: center;
}


/* =========================================================
   أزرار الوزن
   ========================================================= */

.products-page .weight-options {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin: 15px 0;

    flex-wrap: wrap;
}

.products-page .weight-options button {

    min-width: 82px;

    margin: 0;

    padding: 10px 13px;

    color: #e9ddd4;

    background: #2a1008;

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 10px;

    font-size: 13px;

    font-weight: 700;

    transition: 0.25s ease;
}

.products-page .weight-options button:hover {

    color: #fff;

    background: #542713;

    border-color: var(--gold);

    transform: translateY(-2px);
}

.products-page .weight-options button.active {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #754322,
            #4b2110
        );

    border-color: var(--gold);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   الوزن المخصص
   ========================================================= */

.products-page .custom-weight {

    margin: 15px auto;

    text-align: center;
}

.products-page .custom-weight label {

    display: block;

    margin-bottom: 7px;

    color: #bcaea4;

    font-size: 13px;
}

.products-page .custom-weight-input {

    display: flex;

    width: 280px;

    max-width: 100%;

    margin: auto;
}

.products-page .custom-weight-input input {

    width: 100%;

    height: 42px;

    padding: 0 12px;

    color: #fff;

    background: #241008;

    border: 1px solid rgba(215, 161, 93, 0.30);

    border-radius: 0 10px 10px 0;

    outline: none;

    font-size: 14px;
}

.products-page .custom-weight-input input::placeholder {

    color: #88776d;
}

.products-page .custom-weight-input input:focus {

    border-color: var(--gold);
}

.products-page .custom-weight-input span {

    min-width: 55px;

    display: flex;

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

    color: #fff;

    background: #673419;

    border-radius: 10px 0 0 10px;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   السعر
   ========================================================= */

.products-page #modalPrice {

    margin: 17px 0 12px;

    color: var(--gold-light);

    font-size: 21px;

    font-weight: 800;

    text-align: center;
}


/* =========================================================
   الكمية
   ========================================================= */

.products-page .quantity {

    display: flex;

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

    gap: 18px;

    margin: 12px 0 18px;
}

.products-page .quantity button {

    width: 36px;
    height: 36px;

    display: flex;

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

    color: #fff;

    background: #713a1e;

    border: 1px solid rgba(215, 161, 93, 0.25);

    border-radius: 50%;

    font-size: 20px;

    transition: 0.25s ease;
}

.products-page .quantity button:hover {

    background: #965b35;

    border-color: var(--gold);

    transform: scale(1.08);
}

.products-page #quantityNumber {

    min-width: 25px;

    color: #fff;

    font-size: 19px;

    font-weight: 800;

    text-align: center;
}


/* =========================================================
   إضافة للسلة
   ========================================================= */

.products-page .add-to-cart {

    width: 100%;

    margin-top: 5px;

    padding: 13px 18px;

    display: flex;

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

    gap: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #804a2a,
            #4e2512
        );

    border: 1px solid rgba(215, 161, 93, 0.35);

    border-radius: 11px;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.30);

    transition: 0.3s ease;
}

.products-page .add-to-cart:hover {

    background:
        linear-gradient(
            135deg,
            #a0643b,
            #673117
        );

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.40);
}


/* =========================================================
   الحركة
   ========================================================= */

@keyframes premiumProductModal {

    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


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

@media (max-width: 700px) {

    .products-page .product-modal {
        padding: 12px;
    }

    .products-page .product-modal .modal-content {

        width: 95vw;

        padding: 22px 17px;

        display: flex;

        flex-direction: column;

        gap: 14px;

        border-radius: 21px;
    }

    .products-page .product-modal #modalImage {

        width: 100%;

        max-width: 280px;

        height: 210px;
    }

    .products-page .product-modal #modalTitle {

        font-size: 24px;
    }

    .products-page .product-modal #modalDescription {

        font-size: 13px;

        margin-bottom: 10px;
    }

    .products-page .weight-options {

        margin: 10px 0;
    }

    .products-page .custom-weight {

        margin: 10px 0;
    }

    .products-page #modalPrice {

        margin: 12px 0 8px;

        font-size: 20px;
    }

    .products-page .quantity {

        margin: 8px 0 15px;
    }
}
/* =====================================================
   FINAL PREMIUM PRODUCT MODAL
   بن القبطان
===================================================== */

.products-page .product-modal {
    background: rgba(5, 2, 1, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    padding: 20px !important;
}


/* صندوق المنتج */
.products-page .product-modal .modal-content {
    width: 760px !important;
    max-width: 90vw !important;

    height: 520px !important;
    max-height: 88vh !important;

    padding: 28px !important;

    background:
        linear-gradient(
            145deg,
            #2b1208 0%,
            #1b0904 55%,
            #100503 100%
        ) !important;

    border: 1px solid rgba(215, 161, 93, 0.55) !important;
    border-radius: 24px !important;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.75),
        inset 0 0 40px rgba(215, 161, 93, 0.04) !important;

    display: grid !important;

    grid-template-columns: 1fr 300px !important;
    grid-template-rows:
        auto
        auto
        auto
        auto
        auto
        1fr
        auto !important;

    column-gap: 35px !important;
    row-gap: 14px !important;

    position: relative !important;

    overflow: hidden !important;

    color: #f6dfbd !important;
}


/* =====================================================
   زر الإغلاق
===================================================== */

.products-page .product-modal .close-modal {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    width: 36px !important;
    height: 36px !important;

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

    border-radius: 50% !important;

    background: rgba(80, 40, 18, 0.65) !important;

    border: 1px solid rgba(215, 161, 93, 0.45) !important;

    color: #e6b66f !important;

    font-size: 18px !important;

    cursor: pointer !important;

    z-index: 20 !important;

    transition: 0.25s ease !important;
}

.products-page .product-modal .close-modal:hover {
    background: #6b3e26 !important;
    color: white !important;
    transform: rotate(90deg) !important;
}


/* =====================================================
   الصورة
   تظهر كاملة بدون قص
===================================================== */

.products-page .product-modal #modalImage {
    grid-column: 2 !important;

    grid-row: 1 / 7 !important;

    width: 100% !important;
    height: 285px !important;

    object-fit: contain !important;

    object-position: center !important;

    margin: auto !important;

    padding: 8px !important;

    border-radius: 18px !important;

    background:
        rgba(30, 12, 5, 0.65) !important;

    border:
        1px solid rgba(215, 161, 93, 0.4) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.45) !important;
}


/* =====================================================
   اسم المنتج
===================================================== */

.products-page .product-modal #modalTitle {
    grid-column: 1 !important;
    grid-row: 1 !important;

    margin: 5px 0 0 !important;

    color: #f3d19d !important;

    font-size: 30px !important;
    font-weight: 800 !important;

    line-height: 1.3 !important;

    text-align: right !important;
}


/* =====================================================
   الوصف
===================================================== */

.products-page .product-modal #modalDescription {
    grid-column: 1 !important;
    grid-row: 2 !important;

    margin: 0 !important;

    color: rgba(246, 223, 189, 0.72) !important;

    font-size: 14px !important;

    line-height: 1.8 !important;

    text-align: right !important;
}


/* =====================================================
   أزرار الوزن
===================================================== */

.products-page .product-modal .weight-options {
    grid-column: 1 !important;
    grid-row: 3 !important;

    display: flex !important;

    gap: 10px !important;

    margin: 8px 0 !important;
}

.products-page .product-modal .weight-options button {
    min-width: 105px !important;

    padding: 10px 15px !important;

    border-radius: 10px !important;

    border:
        1px solid rgba(215, 161, 93, 0.45) !important;

    background:
        rgba(40, 17, 8, 0.7) !important;

    color: #f3d19d !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    transition: 0.25s ease !important;
}

.products-page .product-modal .weight-options button:hover {
    background: rgba(107, 62, 38, 0.8) !important;

    border-color: #d7a15d !important;

    transform: translateY(-2px) !important;
}

.products-page .product-modal .weight-options button.active {
    background:
        linear-gradient(
            135deg,
            #8b4d28,
            #5a2d1c
        ) !important;

    border-color: #d7a15d !important;

    color: white !important;

    box-shadow:
        0 5px 15px rgba(107, 62, 38, 0.4) !important;
}


/* =====================================================
   خانة الوزن المخصص
   إزالة الأبيض
===================================================== */

.products-page .product-modal .custom-weight {
    grid-column: 1 !important;
    grid-row: 4 !important;

    margin: 0 !important;
}

.products-page .product-modal .custom-weight label {
    display: block !important;

    margin-bottom: 7px !important;

    color: #d9b27a !important;

    font-size: 13px !important;
}


/* الصندوق نفسه */
.products-page .product-modal .custom-weight-input {
    width: 100% !important;

    height: 48px !important;

    display: flex !important;
    align-items: center !important;

    background:
        rgba(40, 17, 8, 0.85) !important;

    border:
        1px solid rgba(215, 161, 93, 0.5) !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* خانة الرقم */
.products-page .product-modal .custom-weight-input input {
    flex: 1 !important;

    width: 100% !important;

    height: 100% !important;

    padding: 0 14px !important;

    border: none !important;
    outline: none !important;

    background: transparent !important;

    color: #f6dfbd !important;

    font-size: 14px !important;

    text-align: right !important;
}


/* النص الموجود على الطرف */
.products-page .product-modal .custom-weight-input span {
    min-width: 55px !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 10px !important;

    background:
        #5a2d1c !important;

    color: #f3d19d !important;

    border: none !important;

    font-size: 13px !important;
}


/* =====================================================
   السعر
===================================================== */

.products-page .product-modal #modalPrice {
    grid-column: 1 !important;
    grid-row: 5 !important;

    margin: 25px 0 5px !important;

    color: #f0c77f !important;

    font-size: 23px !important;

    font-weight: 800 !important;

    text-align: right !important;
}


/* =====================================================
   الكمية
===================================================== */

.products-page .product-modal .quantity {
    grid-column: 1 !important;
    grid-row: 6 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 14px !important;

    margin: 0 !important;
}

.products-page .product-modal .quantity button {
    width: 34px !important;
    height: 34px !important;

    border: 1px solid rgba(215, 161, 93, 0.45) !important;

    border-radius: 50% !important;

    background: #5a2d1c !important;

    color: #f3d19d !important;

    font-size: 18px !important;

    cursor: pointer !important;

    transition: 0.2s ease !important;
}

.products-page .product-modal .quantity button:hover {
    background: #8b4d28 !important;

    border-color: #d7a15d !important;

    transform: scale(1.08) !important;
}

.products-page .product-modal .quantity span {
    min-width: 25px !important;

    color: #f6dfbd !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    text-align: center !important;
}


/* =====================================================
   زر أضف للسلة
===================================================== */

.products-page .product-modal .add-to-cart {
    grid-column: 1 / 3 !important;

    grid-row: 7 !important;

    width: 100% !important;

    height: 48px !important;

    margin: 0 !important;

    border-radius: 12px !important;

    border: 1px solid rgba(215, 161, 93, 0.45) !important;

    background: linear-gradient(
        135deg,
        #8b4d28,
        #5a2d1c
    ) !important;

    color: white !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    cursor: pointer !important;

    transition: 0.25s ease !important;
}

.products-page .product-modal .add-to-cart:hover {
    background: linear-gradient(
        135deg,
        #a96232,
        #6b3e26
    ) !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 8px 25px rgba(107, 62, 38, 0.4) !important;
}


/* =====================================================
   إخفاء أسهم خانة الوزن نهائياً
===================================================== */

.products-page .product-modal .custom-weight-input input {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}


/* =====================================================
   شاشات أصغر
===================================================== */

@media (max-width: 700px) {

    .products-page .product-modal .modal-content {
        width: 94vw !important;
        height: auto !important;
        max-height: 90vh !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 12px !important;

        padding: 22px !important;

        overflow-y: auto !important;
    }

    .products-page .product-modal #modalImage {
        order: 1 !important;

        width: 210px !important;
        height: 230px !important;

        margin: 0 auto !important;
    }

    .products-page .product-modal #modalTitle {
        order: 2 !important;

        text-align: center !important;

        font-size: 25px !important;
    }

    .products-page .product-modal #modalDescription {
        order: 3 !important;

        text-align: center !important;
    }

    .products-page .product-modal .weight-options {
        order: 4 !important;

        justify-content: center !important;
    }

    .products-page .product-modal .custom-weight {
        order: 5 !important;
    }

    .products-page .product-modal #modalPrice {
        order: 6 !important;

        text-align: center !important;
    }

    .products-page .product-modal .quantity {
        order: 7 !important;

        justify-content: center !important;
    }

    .products-page .product-modal .add-to-cart {
        order: 8 !important;
    }
}
/* ================================
   تعديل السعر وأسهم الوزن
================================ */

/* إخفاء أسهم input الوزن */
.custom-weight-input input::-webkit-inner-spin-button,
.custom-weight-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-weight-input input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* تنزيل السعر لأسفل */
#modalPrice {
    margin-top: 35px !important;
    margin-bottom: 10px !important;
}

/* =========================================================
   ☕ CAPTAIN COFFEE — PREMIUM CART
   BLACK + DARK BROWN + GOLD
   ========================================================= */


/* =========================================================
   الخلفية الموجودة وراء السلة
   ========================================================= */

.products-page .cart-modal {

    background:
        rgba(48, 31, 21, 0.58) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


/* =========================================================
   صندوق السلة
   ========================================================= */

.products-page .cart-modal .cart-content {

    background:
        linear-gradient(
            145deg,
            #1c0d06 0%,
            #090403 55%,
            #160803 100%
        ) !important;

    border:
        1px solid #9a622d !important;

    border-radius:
        24px;

    color:
        #d6a766 !important;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.65),

        0 0 35px
        rgba(183, 119, 51, 0.10);

}


/* =========================================================
   عنوان السلة
   ========================================================= */

.products-page .cart-modal .cart-content > h2 {

    color:
        #d9aa68 !important;

    font-size:
        28px;

    font-weight:
        800;

    text-align:
        center;

    margin:
        0 0 20px;

    padding-bottom:
        16px;

    border-bottom:
        1px solid
        rgba(183, 119, 51, 0.45);

    text-shadow:
        0 0 12px
        rgba(217, 170, 104, 0.15);

}


/* أيقونة السلة */

.products-page .cart-modal .cart-content > h2::before {

    content:
        "\f291";

    font-family:
        "Font Awesome 6 Free";

    font-weight:
        900;

    color:
        #bd7d38;

    margin-left:
        10px;

}


/* =========================================================
   زر الإغلاق X
   ========================================================= */

.products-page .cart-modal .close-modal {

    width:
        36px;

    height:
        36px;

    padding:
        0;

    border-radius:
        50%;

    background:
        #241108 !important;

    border:
        1px solid
        #71451f !important;

    color:
        #bd8141 !important;

    transition:
        0.3s;

}


.products-page .cart-modal .close-modal:hover {

    background:
        #6d3b1b !important;

    border-color:
        #c58b48 !important;

    color:
        #f0c98f !important;

    transform:
        rotate(90deg);

}


/* =========================================================
   كارت المنتج
   ========================================================= */

.products-page .cart-modal .cart-item {

    background:
        linear-gradient(
            145deg,
            #291308,
            #160804
        ) !important;

    border:
        1px solid
        rgba(174, 111, 49, 0.55) !important;

    border-radius:
        17px;

    color:
        #d5a665 !important;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.35);

    transition:
        0.3s;

}


.products-page .cart-modal .cart-item:hover {

    border-color:
        rgba(207, 145, 70, 0.75) !important;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.45),

        0 0 15px
        rgba(183, 119, 51, 0.08);

}


/* =========================================================
   صورة المنتج
   ========================================================= */

.products-page .cart-modal .cart-item-image-box {

    background:
        #0f0503 !important;

    border:
        1px solid
        rgba(168, 105, 44, 0.45);

    border-radius:
        14px;

}


.products-page .cart-modal .cart-item-image {

    width:
        82px;

    height:
        82px;

    object-fit:
        cover;

    border-radius:
        13px;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.45);

}


/* =========================================================
   اسم المنتج
   ========================================================= */

.products-page .cart-modal .cart-item-info h3 {

    color:
        #e2b875 !important;

    font-size:
        18px;

    font-weight:
        800;

}


/* =========================================================
   معلومات الوزن والسعر الأساسي
   ========================================================= */

.products-page .cart-modal .cart-item-meta {

    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;

}


.products-page .cart-modal .cart-item-meta span {

    background:
        #321709 !important;

    border:
        1px solid
        rgba(188, 122, 52, 0.40);

    color:
        #c99555 !important;

    border-radius:
        20px;

    padding:
        5px 9px;

    font-size:
        12px;

}


/* أيقونة الوزن */

.products-page .cart-modal .cart-item-meta i {

    color:
        #bd7d38 !important;

    margin-left:
        4px;

}


/* =========================================================
   سعر المنتج
   ========================================================= */

.products-page .cart-modal .cart-item-price {

    color:
        #dba65e !important;

    font-size:
        18px;

    font-weight:
        800;

}


/* =========================================================
   الكمية
   ========================================================= */

.products-page .cart-modal .cart-quantity {

    background:
        #0d0503 !important;

    border:
        1px solid
        #74471f !important;

    border-radius:
        11px;

    padding:
        3px;

}


/* أزرار + و - */

.products-page .cart-modal .cart-quantity button {

    width:
        32px;

    height:
        32px;

    padding:
        0;

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            #824b24,
            #4f2713
        ) !important;

    border:
        1px solid
        #99602d !important;

    color:
        #d59b54 !important;

    font-size:
        18px;

    font-weight:
        900;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        0.25s;

}


.products-page .cart-modal .cart-quantity button:hover {

    background:
        linear-gradient(
            145deg,
            #a86730,
            #6b3519
        ) !important;

    color:
        #efc17b !important;

    transform:
        scale(1.06);

}


/* =========================================================
   رقم الكمية
   ========================================================= */

.products-page .cart-modal .cart-quantity span {

    min-width:
        27px;

    color:
        #bd884b !important;

    background:
        transparent !important;

    font-size:
        16px;

    font-weight:
        800;

    text-align:
        center;

}


/* =========================================================
   زر حذف المنتج
   ========================================================= */

.products-page .cart-modal .remove-item {

    width:
        34px;

    height:
        34px;

    padding:
        0;

    border-radius:
        50%;

    background:
        #250c07 !important;

    border:
        1px solid
        #713222 !important;

    color:
        #b86149 !important;

    transition:
        0.25s;

}


.products-page .cart-modal .remove-item:hover {

    background:
        #6b2d20 !important;

    border-color:
        #a45a42 !important;

    color:
        #e3a08a !important;

    transform:
        scale(1.08);

}


/* =========================================================
   الإجمالي
   ========================================================= */

.products-page .cart-modal #cartTotal {

    background:
        linear-gradient(
            135deg,
            #351a0b,
            #1b0b05
        ) !important;

    border:
        1px solid
        #885827 !important;

    border-radius:
        15px;

    color:
        #d9a65d !important;

    font-size:
        21px;

    font-weight:
        800;

    padding:
        14px 18px;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.32);

}


/* علامة السعر */

.products-page .cart-modal #cartTotal::before {

    content:
        "\f02b";

    font-family:
        "Font Awesome 6 Free";

    font-weight:
        900;

    color:
        #c98940;

    margin-left:
        9px;

}


/* =========================================================
   تفريغ السلة
   ========================================================= */

.products-page .cart-modal .clear-cart-btn {

    width:
        auto !important;

    min-width:
        115px;

    padding:
        8px 13px !important;

    margin:
        10px 0 0 auto !important;

    display:
        block;

    background:
        #180704 !important;

    border:
        1px solid
        #713c26 !important;

    border-radius:
        9px;

    color:
        #b96e53 !important;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        0.25s;

}


.products-page .cart-modal .clear-cart-btn::before {

    content:
        "\f2ed";

    font-family:
        "Font Awesome 6 Free";

    font-weight:
        900;

    margin-left:
        6px;

}


.products-page .cart-modal .clear-cart-btn:hover {

    background:
        #32120b !important;

    border-color:
        #96543b !important;

    color:
        #dc9178 !important;

}


/* =========================================================
   إتمام الطلب — FIX نهائي
   ========================================================= */

.products-page .cart-modal .checkout-button {

    width: 145px !important;

    min-width: 145px !important;

    max-width: 145px !important;

    height: 42px !important;

    min-height: 42px !important;

    max-height: 42px !important;

    padding: 0 14px !important;

    margin: 10px 0 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    box-sizing: border-box !important;

    position: relative !important;

    z-index: 20 !important;

    overflow: visible !important;

    flex-shrink: 0 !important;

    white-space: nowrap !important;

    background:
        linear-gradient(
            135deg,
            #a96832,
            #633319
        ) !important;

    border:
        1px solid #c18443 !important;

    border-radius: 10px !important;

    color:
        #f0c98a !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.35);

}


/* =========================================================
   إلغاء أي أيقونة قديمة
   ========================================================= */

.products-page .cart-modal .checkout-button::before {

    content: none !important;

}


/* =========================================================
   أيقونة إتمام الطلب
   ========================================================= */

.products-page .cart-modal .checkout-button::after {

    content:
        "\f1d8" !important;

    font-family:
        "Font Awesome 6 Free" !important;

    font-weight:
        900 !important;

    font-size:
        13px !important;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    width:
        16px;

    height:
        16px;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #f3d09a !important;

    flex-shrink:
        0;

}


/* =========================================================
   Hover
   ========================================================= */

.products-page .cart-modal .checkout-button:hover {

    background:
        linear-gradient(
            135deg,
            #bd793b,
            #78411f
        ) !important;

    border-color:
        #d39a58 !important;

    color:
        #ffe0aa !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(151, 89, 36, 0.40);

}

/* =========================================================
   السلة الفاضية
   ========================================================= */

.products-page .cart-modal .empty-cart {

    background:
        #120604 !important;

    border:
        1px solid
        rgba(166, 103, 45, 0.35);

    border-radius:
        16px;

    color:
        #c79455 !important;

}


.products-page .cart-modal .empty-cart h3 {

    color:
        #dcae68 !important;

}


.products-page .cart-modal .empty-cart p,
.products-page .cart-modal .empty-cart span {

    color:
        #96704c !important;

}


.products-page .cart-modal .empty-cart-icon {

    color:
        #b97835 !important;

}


/* =========================================================
   منع الخلفيات البيضاء داخل السلة
   ========================================================= */

.products-page .cart-modal button {

    font-family:
        inherit;

}


.products-page .cart-modal input {

    background:
        #120604 !important;

    color:
        #c89452 !important;

    border-color:
        #71451f !important;

}


/* =========================================================
   Scrollbar
   ========================================================= */

.products-page .cart-modal ::-webkit-scrollbar {

    width:
        6px;

}


.products-page .cart-modal ::-webkit-scrollbar-track {

    background:
        #0b0302;

}


.products-page .cart-modal ::-webkit-scrollbar-thumb {

    background:
        #70421f;

    border-radius:
        20px;

}


.products-page .cart-modal ::-webkit-scrollbar-thumb:hover {

    background:
        #a86b31;

}


/* =========================================================
   موبايل
   ========================================================= */

@media (max-width: 600px) {

    .products-page .cart-modal .cart-content {

        width:
            92%;

        border-radius:
            20px;

    }


    .products-page .cart-modal .cart-content > h2 {

        font-size:
            24px;

    }


    .products-page .cart-modal .cart-item-image {

        width:
            70px;

        height:
            70px;

    }


    .products-page .cart-modal #cartTotal {

        font-size:
            18px;

    }

}


/* =========================================================
   موبايل
   ========================================================= */

@media (max-width: 600px) {

    .products-page .cart-modal .cart-content {

        width:
            92%;

        border-radius:
            20px;

    }

    .products-page .cart-modal .cart-title {

        font-size:
            24px;

    }

    .products-page .cart-total {

        font-size:
            19px;

    }

}

/* =========================================================
   موبايل
   ========================================================= */

@media (max-width: 600px) {

    .products-page .cart-modal .cart-content {

        width: 92%;

        border-radius: 20px;

        padding: 16px;
    }


    .products-page .cart-modal .cart-title {

        font-size: 24px;
    }


    .products-page .cart-item img {

        width: 70px;
        height: 70px;
    }


    .products-page .cart-item h3,
    .products-page .cart-item h4 {

        font-size: 16px;
    }


    .products-page .cart-total {

        font-size: 19px;
    }

}
/* =========================================================
   PREMIUM CHECKOUT
   ========================================================= */

.products-page .checkout-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background:
        rgba(8, 3, 1, 0.78);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


/* =========================================================
   صندوق Checkout
   ========================================================= */

.products-page .checkout-content {

    width: min(950px, 94vw);

    max-height: 92vh;

    overflow-y: auto;

    position: relative;

    padding: 28px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #1b0904,
            #0b0302 55%,
            #170704
        ) !important;

    border:
        1px solid #9b5d25 !important;

    border-radius:
        24px;

    color:
        #e8c48b !important;

    box-shadow:

        0 30px 80px
        rgba(0,0,0,0.75),

        0 0 45px
        rgba(170,100,35,0.14);

}


/* =========================================================
   زر الإغلاق
   ========================================================= */

.products-page .checkout-close {

    position: absolute;

    top: 18px;

    left: 18px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #2b1208 !important;

    border:
        1px solid #875126 !important;

    border-radius:
        50%;

    color:
        #d89b51 !important;

    font-size:
        17px;

    cursor:
        pointer;

    transition:
        0.25s;

}


.products-page .checkout-close:hover {

    background:
        #713b1c !important;

    color:
        #fff !important;

    border-color:
        #c8873d !important;

    transform:
        rotate(90deg);

}


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

.products-page .checkout-header {

    text-align:
        center;

    margin-bottom:
        25px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(184,119,48,0.38);

}


.products-page .checkout-header h2 {

    margin:
        0 0 8px;

    color:
        #e5b66f !important;

    font-size:
        32px;

    font-weight:
        900;

}


.products-page .checkout-header > i {

    color:
        #c8873d;

    font-size:
        30px;

    margin-left:
        8px;

}


.products-page .checkout-header p {

    margin:
        0;

    color:
        #9f7a56 !important;

    font-size:
        14px;

}


/* =========================================================
   Body
   ========================================================= */

.products-page .checkout-body {

    display:
        grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap:
        22px;

}


/* =========================================================
   الفورم
   ========================================================= */

.products-page .checkout-form {

    padding:
        20px;

    background:
        linear-gradient(
            145deg,
            #1b0a05,
            #100503
        ) !important;

    border:
        1px solid
        rgba(168,100,38,0.55);

    border-radius:
        18px;

}


/* =========================================================
   كل خانة
   ========================================================= */

.products-page .checkout-field {

    margin-bottom:
        17px;

}


.products-page .checkout-field:last-child {

    margin-bottom:
        0;

}


.products-page .checkout-field label {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        8px;

    color:
        #d9a45f !important;

    font-size:
        15px;

    font-weight:
        800;

}


.products-page .checkout-field label i {

    color:
        #c8873d;

    width:
        18px;

    text-align:
        center;

}


/* =========================================================
   Inputs
   ========================================================= */

.products-page .checkout-field input,
.products-page .checkout-field select,
.products-page .checkout-field textarea {

    width:
        100%;

    box-sizing:
        border-box;

    background:
        #120604 !important;

    border:
        1px solid
        rgba(172,105,43,0.58) !important;

    border-radius:
        11px;

    color:
        #ead0a4 !important;

    outline:
        none;

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        0.25s;

}


.products-page .checkout-field input,
.products-page .checkout-field select {

    height:
        47px;

    padding:
        0 14px;

}


.products-page .checkout-field textarea {

    min-height:
        105px;

    padding:
        13px 14px;

    resize:
        vertical;

}


.products-page .checkout-field input::placeholder,
.products-page .checkout-field textarea::placeholder {

    color:
        #75583f !important;

}


.products-page .checkout-field input:focus,
.products-page .checkout-field select:focus,
.products-page .checkout-field textarea:focus {

    border-color:
        #c8873d !important;

    box-shadow:
        0 0 0 3px
        rgba(200,135,61,0.09);

}


/* =========================================================
   Select
   ========================================================= */

.products-page .checkout-field select {

    appearance:
        auto;

    cursor:
        pointer;

}


.products-page .checkout-field select option {

    background:
        #160704;

    color:
        #e8c48b;

}


/* =========================================================
   ملخص الطلب
   ========================================================= */

.products-page .checkout-summary {

    padding:
        22px;

    background:
        linear-gradient(
            145deg,
            #1d0b05,
            #100402
        ) !important;

    border:
        1px solid
        rgba(168,100,38,0.55);

    border-radius:
        18px;

}


.products-page .checkout-summary h3 {

    margin:
        0 0 20px;

    padding-bottom:
        15px;

    border-bottom:
        1px solid
        rgba(184,119,48,0.35);

    color:
        #e4b873 !important;

    font-size:
        20px;

    font-weight:
        900;

}


.products-page .checkout-summary h3 i {

    color:
        #c8873d;

    margin-left:
        8px;

}


/* =========================================================
   صفوف الملخص
   ========================================================= */

.products-page .summary-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        16px 0;

    border-bottom:
        1px dashed
        rgba(170,105,42,0.35);

}


.products-page .summary-row span {

    color:
        #b9956d;

    font-size:
        15px;

}


.products-page .summary-row strong {

    color:
        #e0ad65 !important;

    font-size:
        17px;

}


/* =========================================================
   الإجمالي النهائي
   ========================================================= */

.products-page .summary-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        18px;

    padding:
        18px;

    background:
        linear-gradient(
            135deg,
            #3a1a09,
            #211006
        ) !important;

    border:
        1px solid
        #9b5d25;

    border-radius:
        14px;

}


.products-page .summary-total span {

    color:
        #e3b66f;

    font-size:
        17px;

    font-weight:
        800;

}


.products-page .summary-total span i {

    color:
        #c8873d;

    margin-left:
        7px;

}


.products-page .summary-total strong {

    color:
        #f0c27b !important;

    font-size:
        24px;

    font-weight:
        900;

}


/* =========================================================
   ملاحظة التوصيل
   ========================================================= */

.products-page .delivery-note {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        18px;

    padding:
        14px;

    background:
        #130604 !important;

    border:
        1px solid
        rgba(151,91,38,0.4);

    border-radius:
        12px;

    color:
        #997653;

    font-size:
        12px;

    line-height:
        1.7;

}


.products-page .delivery-note i {

    color:
        #c8873d;

    font-size:
        20px;

    flex-shrink:
        0;

}


/* =========================================================
   زر تأكيد الطلب
   ========================================================= */

.products-page .confirm-order-btn {

    width:
        100%;

    height:
        54px;

    margin-top:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    background:
        linear-gradient(
            135deg,
            #b87335,
            #713b1c
        ) !important;

    border:
        1px solid
        #d09551 !important;

    border-radius:
        13px;

    color:
        #fff0d0 !important;

    font-size:
        17px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 8px 25px
        rgba(159,91,34,0.3);

    transition:
        0.25s;

}


.products-page .confirm-order-btn i {

    font-size:
        20px;

}


.products-page .confirm-order-btn:hover {

    background:
        linear-gradient(
            135deg,
            #ce8741,
            #874820
        ) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(190,120,55,0.4);

}


/* =========================================================
   Scrollbar
   ========================================================= */

.products-page .checkout-content::-webkit-scrollbar {

    width:
        7px;

}


.products-page .checkout-content::-webkit-scrollbar-track {

    background:
        #0d0302;

}


.products-page .checkout-content::-webkit-scrollbar-thumb {

    background:
        #75401f;

    border-radius:
        20px;

}


/* =========================================================
   الموبايل
   ========================================================= */

@media (max-width: 750px) {

    .products-page .checkout-content {

        padding:
            20px;

        max-height:
            94vh;

    }


    .products-page .checkout-body {

        grid-template-columns:
            1fr;

    }


    .products-page .checkout-header h2 {

        font-size:
            26px;

    }

}


@media (max-width: 450px) {

    .products-page .checkout-content {

        padding:
            16px;

        border-radius:
            18px;

    }


    .products-page .checkout-form,
    .products-page .checkout-summary {

        padding:
            15px;

    }

}