/* ========================================
   SAYA WEAR — COMPLETE THEME CSS
   ======================================== */

:root {
    color-scheme: light !important;

    --saya-page: #FFF9EE;
    --saya-text: #80695B;
    --saya-dark: #604D43;
    --saya-rose: #9F624B;
    --saya-blush: #EFDAC7;
    --saya-beige: #C6B294;
    --saya-gold: #F4C66B;
}

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

html,
body {
    background-color: var(--saya-page) !important;
    color: var(--saya-text) !important;
    color-scheme: light !important;
}

/* ========================================
   HERO BANNER
   صورة كبيرة فوق وصف المتجر
   ======================================== */

body .hero-area .flex.items-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

body .hero-area .flex.items-center > a.inline-block {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 25px 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

body .hero-area .flex.items-center > a.inline-block img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

body .hero-area .flex.items-center > div {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    line-height: 2 !important;
}

/* دمج أسطر وصف المتجر العلوي */

body .hero-area .flex.items-center > div p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 2 !important;
}

body .hero-area .flex.items-center > div p::after {
    content: " " !important;
}

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

header,
.s-header,
.store-header {
    background-color: var(--saya-page) !important;
    color: var(--saya-text) !important;
}

/* أزرار الهيدر */

header button,
header .btn,
header .button,
.s-header button,
.s-header .btn,
.s-header .button,
.store-header button,
.store-header .btn,
.store-header .button {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--saya-blush) !important;
    border: 1px solid var(--saya-beige) !important;
    color: var(--saya-dark) !important;
}

/* النص داخل أزرار الهيدر */

header button *,
header .btn *,
header .button *,
.s-header button *,
.s-header .btn *,
.s-header .button *,
.store-header button *,
.store-header .btn *,
.store-header .button * {
    color: var(--saya-dark) !important;
}

/* مرور المؤشر على أزرار الهيدر */

header button:hover,
header .btn:hover,
header .button:hover,
.s-header button:hover,
.s-header .btn:hover,
.s-header .button:hover,
.store-header button:hover,
.store-header .btn:hover,
.store-header .button:hover {
    background-color: var(--saya-rose) !important;
    border-color: var(--saya-rose) !important;
    color: #FFF9EE !important;
}

header button:hover *,
header .btn:hover *,
header .button:hover *,
.s-header button:hover *,
.s-header .btn:hover *,
.s-header .button:hover *,
.store-header button:hover *,
.store-header .btn:hover *,
.store-header .button:hover * {
    color: #FFF9EE !important;
}

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

header svg,
.s-header svg,
.store-header svg {
    color: var(--saya-text) !important;
    stroke: var(--saya-text) !important;
}

header button:hover svg,
.s-header button:hover svg,
.store-header button:hover svg {
    color: #FFF9EE !important;
    stroke: #FFF9EE !important;
}

/* ========================================
   MAIN ACTION BUTTONS
   ======================================== */

.s-button-primary,
.s-button-primary-outline,
.s-fast-checkout-button {
    border-color: var(--saya-rose) !important;
    color: var(--saya-rose) !important;
}

.s-button-primary:hover,
.s-button-primary-outline:hover,
.s-fast-checkout-button:hover {
    background-color: var(--saya-rose) !important;
    border-color: var(--saya-rose) !important;
    color: #FFF9EE !important;
}

.s-button-primary:hover *,
.s-button-primary-outline:hover *,
.s-fast-checkout-button:hover * {
    color: #FFF9EE !important;
}

/* ========================================
   PRODUCT OPTIONS
   خانات المقاسات
   ======================================== */

.s-product-options,
.product-options,
.s-product-option {
    color: var(--saya-text) !important;
}

/* جميع أزرار المقاسات */

.s-product-options button,
.product-options button,
.s-product-option button,
.s-size-option,
.size-option,
.product-size button {
    background-color: var(--saya-blush) !important;
    background-image: none !important;
    color: var(--saya-dark) !important;
    border: 1px solid var(--saya-beige) !important;
    box-shadow: none !important;
}

/* النص داخل المقاس */

.s-product-options button *,
.product-options button *,
.s-product-option button *,
.s-size-option *,
.size-option *,
.product-size button * {
    color: var(--saya-dark) !important;
}

/* مرور المؤشر على المقاس */

.s-product-options button:hover,
.product-options button:hover,
.s-product-option button:hover,
.s-size-option:hover,
.size-option:hover,
.product-size button:hover {
    background-color: var(--saya-rose) !important;
    border-color: var(--saya-rose) !important;
    color: #FFF9EE !important;
}

.s-product-options button:hover *,
.product-options button:hover *,
.s-product-option button:hover *,
.s-size-option:hover *,
.size-option:hover *,
.product-size button:hover * {
    color: #FFF9EE !important;
}

/* المقاس المحدد */

.s-product-options button.active,
.s-product-options button.selected,
.product-options button.active,
.product-options button.selected,
.s-size-option.active,
.s-size-option.selected,
.size-option.active,
.size-option.selected {
    background-color: var(--saya-rose) !important;
    border-color: var(--saya-rose) !important;
    color: #FFF9EE !important;
}

/* النص داخل المقاس المحدد */

.s-product-options button.active *,
.s-product-options button.selected *,
.product-options button.active *,
.product-options button.selected *,
.s-size-option.active *,
.s-size-option.selected *,
.size-option.active *,
.size-option.selected * {
    color: #FFF9EE !important;
}

/* المقاسات غير المتاحة */

.s-product-options button:disabled,
.product-options button:disabled,
.s-product-option button:disabled,
.s-size-option:disabled,
.size-option:disabled,
.product-size button:disabled {
    background-color: #E8DED2 !important;
    border-color: var(--saya-beige) !important;
    color: #9C8A7D !important;
    opacity: 1 !important;
}

/* ========================================
   تنظيف المسافات بعد وصف المنتج
   ======================================== */

[data-testid="store-product-description"],
[data-testid="store-product-description"] article,
.product__description,
.product__description article {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

[data-testid="store-product-description"] article > *:last-child,
.product__description article > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* إزالة الأسطر الفارغة داخل الوصف */

[data-testid="store-product-description"] p:empty,
[data-testid="store-product-description"] div:empty,
.product__description p:empty,
.product__description div:empty {
    display: none !important;
}

[data-testid="store-product-description"] p:has(> br:only-child),
.product__description p:has(> br:only-child) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

[data-testid="store-product-description"] p > br:only-child,
[data-testid="store-product-description"] br + br,
.product__description p > br:only-child,
.product__description br + br {
    display: none !important;
}

/* تقليل مسافات العناصر الواقعة بين الوصف والمقاسات */

[data-testid="store-product-social-share"],
[data-testid="store-product-installment"],
[data-testid="store-product-metadata"],
salla-social-share,
salla-installment,
salla-metadata {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* ضبط بداية نموذج المنتج */

[data-testid="store-product-form"],
form.product-form,
.product-form {
    padding-top: 0 !important;
}

/* ضبط المسافة داخل خيارات المقاس */

[data-testid="store-product-form"] salla-product-options,
form.product-form salla-product-options,
.product-form salla-product-options,
[data-testid="store-product-form"] .s-product-options,
form.product-form .s-product-options,
.product-form .s-product-options,
[data-testid="store-product-form"] .product-options,
form.product-form .product-options,
.product-form .product-options {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.s-product-options-option-label {
    margin-top: 0 !important;
    margin-bottom: 7px !important;
}

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

.s-quantity-input-button {
    min-width: 44px !important;
    min-height: 44px !important;
    background-color: var(--saya-blush) !important;
    border-color: var(--saya-beige) !important;
    color: var(--saya-dark) !important;
}

.s-quantity-input-button:hover {
    background-color: var(--saya-rose) !important;
    border-color: var(--saya-rose) !important;
    color: #FFF9EE !important;
}

/* ========================================
   INPUTS / SELECT
   ======================================== */

input,
textarea,
select {
    background-color: var(--saya-page) !important;
    color: var(--saya-text) !important;
    border-color: var(--saya-beige) !important;
    color-scheme: light !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--saya-rose) !important;
    outline-color: var(--saya-rose) !important;
}

select option {
    background-color: var(--saya-page) !important;
    color: var(--saya-text) !important;
}

/* ========================================
   FOOTER DESCRIPTION
   دمج أسطر وصف المتجر
   ======================================== */

.store-footer__inner div:has(> .footer-logo) {
    display: block !important;
}

.store-footer__inner .footer-logo {
    display: block !important;
    margin-bottom: 20px !important;
}

.store-footer__inner .footer-logo ~ p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 2 !important;
}

.store-footer__inner .footer-logo ~ p::after {
    content: " " !important;
}

/* مسافة قبل السجل والتوثيق */

.store-footer__inner .footer-logo ~ .flex.gap-4 {
    display: flex !important;
    margin-top: 22px !important;
}

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

@media (max-width: 767px) {
    body .hero-area .flex.items-center > a.inline-block {
        margin-bottom: 16px !important;
        border-radius: 8px !important;
    }

    body .hero-area .flex.items-center > a.inline-block img {
        border-radius: 8px !important;
    }

    header button,
    .s-header button,
    .store-header button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .store-footer__inner .footer-logo ~ .flex.gap-4 {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    /* تقليل المسافة أسفل معرض صور المنتج */

    .container--product-details > .flex > .sidebar {
        margin-bottom: 6px !important;
    }

    .container--product-details > .flex > .main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* رفع المقاسات والكمية والأزرار داخل الفراغ */

    body .container--product-details .main-content > form,
    body .container--product-details .main-content form.product-form,
    body .container--product-details .main-content .product-form,
    body form[data-testid="store-product-form"] {
        margin-top: -125px !important;
        padding-top: 0 !important;
    }

    [data-testid="store-product-form"] salla-product-options,
    form.product-form salla-product-options,
    .product-form salla-product-options,
    [data-testid="store-product-form"] .s-product-options,
    form.product-form .s-product-options,
    .product-form .s-product-options,
    [data-testid="store-product-form"] .product-options,
    form.product-form .product-options,
    .product-form .product-options {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ========================================
   FORCE LIGHT MODE
   ======================================== */

@media (prefers-color-scheme: dark) {
    html,
    body {
        background-color: var(--saya-page) !important;
        color: var(--saya-text) !important;
        color-scheme: light !important;
    }

    header,
    .s-header,
    .store-header {
        background-color: var(--saya-page) !important;
    }

    header button,
    header .btn,
    header .button,
    .s-header button,
    .s-header .btn,
    .s-header .button,
    .store-header button,
    .store-header .btn,
    .store-header .button {
        background-color: var(--saya-blush) !important;
        border-color: var(--saya-beige) !important;
        color: var(--saya-dark) !important;
    }

    header button:hover,
    header .btn:hover,
    header .button:hover,
    .s-header button:hover,
    .s-header .btn:hover,
    .s-header .button:hover,
    .store-header button:hover,
    .store-header .btn:hover,
    .store-header .button:hover {
        background-color: var(--saya-rose) !important;
        border-color: var(--saya-rose) !important;
        color: #FFF9EE !important;
    }

    .s-product-options button,
    .product-options button,
    .s-product-option button,
    .s-size-option,
    .size-option,
    .product-size button {
        background-color: var(--saya-blush) !important;
        border-color: var(--saya-beige) !important;
        color: var(--saya-dark) !important;
    }

    .s-product-options button.active,
    .s-product-options button.selected,
    .product-options button.active,
    .product-options button.selected,
    .s-size-option.active,
    .s-size-option.selected,
    .size-option.active,
    .size-option.selected {
        background-color: var(--saya-rose) !important;
        border-color: var(--saya-rose) !important;
        color: #FFF9EE !important;
    }

    input,
    textarea,
    select {
        background-color: var(--saya-page) !important;
        color: var(--saya-text) !important;
        border-color: var(--saya-beige) !important;
    }
}

/* إخفاء شعار المتجر والوصف من ذيل الصفحة */

.store-footer__inner .footer-logo,
.store-footer__inner .footer-logo ~ p {
    display: none !important;
}

/* إظهار عنوان المقاس والكلمة المساعدة */

.s-product-options-option-label,
.s-product-options-option-label b,
.s-product-options-option-label small {
    color: #604D43 !important;
    opacity: 1 !important;
}

/* إظهار معلومات وأيقونات رأس الصفحة */

.store-header .header-btn,
.store-header .header-btn i,
.store-header .login-item a,
.store-header .login-item i,
.store-header .cart-item a,
.store-header .cart-item i,
.store-header .s-cart-summary-wrapper,
.store-header .s-cart-summary-icon,
.store-header .s-cart-summary-content,
.store-header .s-cart-summary-total,
.store-header .sicon-sar {
    color: #604D43 !important;
    opacity: 1 !important;
}

/* لون رسمة السلة */

.store-header .s-cart-summary-wrapper svg,
.store-header .s-cart-summary-wrapper svg path {
    fill: #604D43 !important;
}

/* إضافة كلمة السلة بجانب أيقونتها */

.store-header .s-cart-summary-wrapper::before {
    content: "السلة";
    display: inline-block;
    color: #604D43 !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    margin-inline-end: 6px;
}