/* ===========================================================================
   SKD Birdy — طبقة اللمسات النهائية
   ---------------------------------------------------------------------------
   تُحمَّل بعد theme-modern.css. مستقلّة عنه تماماً:
   حذف سطر تحميلها من head.blade.php يُلغي هذه اللمسات وحدها
   ويُبقي الاتجاه العصري كما هو.

   تذكير: الثيم يضبط جذر الخط على 62.5% (1rem = 10px)، فكل القيم بالبكسل.
   وكل حركة هنا مشروطة بـ prefers-reduced-motion احتراماً لمن يُعطّلها.
   =========================================================================== */

:root {
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-1: .18s;
    --dur-2: .28s;
}

/* ---------------------------------------------------------------------------
   1) أساسيات كانت غائبة
--------------------------------------------------------------------------- */

/* التمرير إلى مرساة داخل الصفحة كان يقفز فجأة */
html { scroll-behavior: smooth; }

/* الترويسة لاصقة، فبدون هذا يختفي العنوان المقصود تحتها عند القفز إليه */
[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* تحديد النص كان بالأزرق الافتراضي الغريب عن هوية الموقع */
::selection { background: var(--brand-soft); color: var(--ink); }

/* ---------------------------------------------------------------------------
   2) حركة الظهور عند التمرير
   الأقسام كانت تظهر دفعةً واحدة بلا تدرّج. الفئة .reveal تُضاف
   بجافاسكربت؛ وفي غيابها يبقى المحتوى ظاهراً طبيعياً (لا يعتمد
   الظهور على نجاح الجافاسكربت).
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .5s var(--ease), transform .5s var(--ease);
        will-change: opacity, transform;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   3) بطاقة المنتج — تفاعل أوضح
--------------------------------------------------------------------------- */

.single-grid-product-v2 {
    transition: transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}

.single-grid-product-v2:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

/* الصورة تكبر قليلاً داخل إطارها بدل أن تبقى ساكنة */
.single-grid-product-v2 .product-top {
    overflow: hidden;
}

.single-grid-product-v2 .product-top .product-thumbnal {
    transition: transform .45s var(--ease);
}

.single-grid-product-v2:hover .product-top .product-thumbnal {
    transform: scale(1.05);
}

/* أزرار المقارنة والمفضّلة كانت تظهر فوراً وبثبات؛
   نجعلها تنزلق بهدوء عند المرور على البطاقة. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .single-grid-product-v2 .prdouct-btn-wrapper {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--dur-2) var(--ease),
                    transform var(--dur-2) var(--ease);
    }

    .single-grid-product-v2:hover .prdouct-btn-wrapper,
    .single-grid-product-v2:focus-within .prdouct-btn-wrapper {
        opacity: 1;
        transform: none;
    }
}

.single-grid-product-v2 .product-btn {
    transition: background var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease);
}

.single-grid-product-v2 .product-btn:hover {
    background: var(--brand);
    color: #fff;
    transform: scale(1.08);
}

/* اسم المنتج: خطّ سفلي ينمو بدل تغيّر لون مفاجئ */
.single-grid-product-v2 .product-name .product-link {
    background-image: linear-gradient(var(--brand), var(--brand));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size var(--dur-2) var(--ease),
                color var(--dur-1) var(--ease);
}

.single-grid-product-v2 .product-name .product-link:hover {
    background-size: 100% 1px;
    color: var(--brand);
}

/* ---------------------------------------------------------------------------
   4) الأزرار
--------------------------------------------------------------------------- */

.single-grid-product-v2 .add-cart,
.btn-one,
.btn-two {
    position: relative;
    transition: background var(--dur-1) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                transform var(--dur-1) var(--ease);
}

.single-grid-product-v2 .add-cart:hover,
.btn-one:hover,
.btn-two:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(236, 128, 33, .28);
}

/* ضغطة الزر لم يكن لها أي ارتداد يؤكّد الاستجابة */
.single-grid-product-v2 .add-cart:active,
.btn-one:active,
.btn-two:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   5) إتاحة الوصول — مؤشّر تركيز موحّد
   كان كثير من العناصر التفاعلية بلا إطار تركيز مرئي،
   فيتعذّر تتبّع الموضع عند التنقّل بلوحة المفاتيح.
--------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.product-btn:focus-visible,
.add-cart:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------------
   6) شريط التمرير — كان بالشكل الافتراضي الثقيل
--------------------------------------------------------------------------- */

@media (min-width: 992px) {
    * { scrollbar-width: thin; scrollbar-color: #c9d0d8 transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: #c9d0d8;
        border-radius: 999px;
        border: 2px solid var(--surface);
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
}

/* ---------------------------------------------------------------------------
   7) بطاقات المدوّنة والتصنيفات — نفس لغة الحركة
--------------------------------------------------------------------------- */

.single-grid-blog-v2,
.popular-categories-area-v2 .single-catagory {
    transition: transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}

.single-grid-blog-v2:hover,
.popular-categories-area-v2 .single-catagory:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
}

/* ---------------------------------------------------------------------------
   8) زر العودة إلى الأعلى
--------------------------------------------------------------------------- */

.back-to-top,
#backtotop {
    transition: transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}

.back-to-top:hover,
#backtotop:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
}

/* ---------------------------------------------------------------------------
   9) عرض شريحة المنتج
   عُطِّل autoWidth في main.js (كان يُنشئ صفاً ثانياً فارغاً)، وصار Owl
   يحسب عرض الشريحة بنفسه؛ فالعرض الثابت 280px الموروث من refresh.css
   لم يعد صحيحاً ويترك فجوات بين البطاقات.
--------------------------------------------------------------------------- */

.recommend-product-slide.owl-carousel .owl-item > .single-grid-product-v2 {
    width: 100%;
}

/* ---------------------------------------------------------------------------
   10) شارات المنتج: نسبة الخصم والكمية المتبقية
   الثيم كان يُخفي الشارات بـ opacity:0 ولا يُظهرها إلا عند المرور
   بالفأرة — فلا يراها زائر الجوال إطلاقاً، وهي أهمّ ما يجذب العين.
   كما كان يفرض دائرة 56px لا تتّسع لنصّ مثل "بقي 3 فقط".
   نجعلها ظاهرة دائماً، وبشكل حبّة تتمدّد بحسب النص.
--------------------------------------------------------------------------- */

.single-grid-product-v2 .product-top .product-flags {
    top: 12px;
    inset-inline: 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    align-items: flex-start;
    pointer-events: none;
    z-index: 3;
}

.single-grid-product-v2 .product-top .product-flags .product-flag,
.single-grid-product .product-top .product-flags .product-flag {
    /* إلغاء الدائرة الثابتة */
    width: auto;
    height: auto;
    line-height: 1;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    /* الأهم: ظاهرة دائماً لا عند المرور فقط */
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}

/* نسبة الخصم: أبرز شارة، بلون العلامة */
.single-grid-product-v2 .product-top .product-flags .product-flag.discount {
    background-color: var(--brand);
    color: #fff;
}

/* الندرة: أحمر هادئ يميّزها عن الخصم دون صراخ */
.single-grid-product-v2 .product-top .product-flags .product-flag.stock,
.single-grid-product .product-top .product-flags .product-flag.stock {
    background-color: #b42318;
    color: #fff;
}

/* وسم المنتج الحرّ (ItemTag) يبقى محايداً */
.single-grid-product-v2 .product-top .product-flags .product-flag.sale {
    background-color: var(--ink);
    color: #fff;
}

/* تثبيت مواضع التأخير التي كان الثيم يستعملها للظهور المتدرّج */
.single-grid-product-v2 .product-top .product-flags .product-flag:nth-child(1),
.single-grid-product-v2 .product-top .product-flags .product-flag:nth-child(2),
.single-grid-product-v2 .product-top .product-flags .product-flag:nth-child(3) {
    transition-delay: 0s;
}

/* ---------------------------------------------------------------------------
   11) نفس معالجة الشارات لبطاقة النسخة الأولى
   صفحات قوائم المنتجات (كل المنتجات، التصنيف، البحث…) تستعمل
   .single-grid-product لا .single-grid-product-v2، وقواعد القسم 10
   لم تشملها: فبقيت الشارات ممتدّة بعرض البطاقة (268px) وبخلفية
   سوداء موروثة من الثيم بدل لون العلامة.
--------------------------------------------------------------------------- */

.single-grid-product .product-top .product-flags {
    top: 12px;
    inset-inline: 12px;
    left: auto;
    right: auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: start;
    pointer-events: none;
    z-index: 3;
}

.single-grid-product .product-top .product-flags .product-flag {
    width: auto;
    height: auto;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}

.single-grid-product .product-top .product-flags .product-flag.discount {
    background-color: var(--brand);
    color: #fff;
}

.single-grid-product .product-top .product-flags .product-flag.sale {
    background-color: var(--ink);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   12) شبكة التصنيفات — إعادة تصميم
   كان القسم عمودين: عنوان وزر يساراً، وقائمة روابط نصّية داخل
   مستطيلات يميناً. لا صور ولا دلالة على محتوى كل تصنيف.
   صار شبكة بطاقات بصورة حقيقية وعدد منتجات.
--------------------------------------------------------------------------- */

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
    border-color: var(--brand);
}

.category-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    /* نسبة ثابتة تمنع قفز التخطيط قبل تحميل الصور */
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
    overflow: hidden;
}

.category-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform .45s var(--ease);
}

.category-card:hover .category-card__media img {
    transform: scale(1.06);
}

.category-card__media i {
    font-size: 40px;
    color: var(--brand);
}

.category-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 16px;
}

.category-card__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.category-card__count {
    font-size: 13px;
    color: var(--ink-3);
}

/* السهم يتحرّك باتجاه القراءة، فيصحّ في العربية والتركية معاً */
.category-card__go {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    transition: background var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease),
                transform var(--dur-2) var(--ease);
}

.category-card:hover .category-card__go {
    background: var(--brand);
    color: #fff;
    transform: translateX(2px);
}

[dir="rtl"] .category-card__go i { transform: scaleX(-1); }
[dir="rtl"] .category-card:hover .category-card__go { transform: translateX(-2px); }

/* بطاقة "كل المنتجات": بلا صورة، فتملأ لونَ العلامة بدل فراغ */
.category-card--all {
    justify-content: flex-end;
    min-height: 180px;
    background: linear-gradient(135deg, var(--brand-soft), var(--surface));
    border-color: var(--brand-soft);
}

.category-card--all .category-card__name { color: var(--brand); }

@media (max-width: 575.98px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }
    .category-card__body { padding: 10px 12px 12px; }
    .category-card__name { font-size: 14px; }
    .category-card__go { display: none; }
}

/* ---------------------------------------------------------------------------
   13) البطل — خلفية حيّة بدل مستطيل رمادي مسطّح
   كان القسم لوناً واحداً باهتاً (#f7f8f9) يملأ عرض الشاشة.
   نضيف تدرّجاً ناعماً وهالتين لونيتين خلف الصورة، ونحصر
   القسم داخل حاوية بزوايا دائرية فيبدو لوحة لا شريطاً.
--------------------------------------------------------------------------- */

.hero-section-v2 {
    background: transparent;
    padding-inline: var(--sp-4);
    padding-block: var(--sp-5);
}

.hero-section-v2 .signle-banner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(60% 90% at 88% 18%, rgba(236, 128, 33, .16), transparent 62%),
        radial-gradient(52% 80% at 6% 92%, rgba(45, 168, 154, .13), transparent 60%),
        linear-gradient(135deg, #fdfdfe 0%, #f4f6f8 100%);
}

/* حلقة خفيفة تفصل اللوحة عن بياض الصفحة دون خطّ حادّ */
.hero-section-v2 .signle-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .05);
    pointer-events: none;
}

.hero-section-v2 .hero-content {
    position: relative;
    z-index: 2;
}

.hero-section-v2 .signle-banner .hero-title,
.hero-section-v2 .hero-title {
    letter-spacing: -0.03em;
}

/* الصورة تطفو برفق؛ موقوفة عند تقليل الحركة */
@media (prefers-reduced-motion: no-preference) {
    .hero-section-v2 .hero-image {
        animation: heroFloat 7s ease-in-out infinite;
    }

    @keyframes heroFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-12px); }
    }
}

@media (max-width: 767.98px) {
    .hero-section-v2 { padding-inline: var(--sp-3); }
    .hero-section-v2 .signle-banner { border-radius: 20px; }
}

/* ---------------------------------------------------------------------------
   14) عناوين الأقسام — خطّ متدرّج بدل شرطة رمادية
--------------------------------------------------------------------------- */

.section-header-two .section-title::after {
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* ---------------------------------------------------------------------------
   15) شريط الماركات — كان شاحباً جداً (شعارات رمادية بلا إطار)
--------------------------------------------------------------------------- */

.brads-area-v2 .sigle-brad {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 18px;
    transition: border-color var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}

.brads-area-v2 .sigle-brad:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-1);
    transform: translateY(-2px);
}

/* الشعارات كانت باهتة بفلتر رمادي؛ نُظهرها بلونها عند المرور */
.brads-area-v2 .sigle-brad img {
    filter: grayscale(100%);
    opacity: .65;
    transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.brads-area-v2 .sigle-brad:hover img {
    filter: none;
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   16) بطاقات المدوّنة — صورة حقيقية بدل صندوق نصّي
   القالب كان يعرض النصّ فقط رغم وجود صورة مخزَّنة لكل مقال،
   فبدت البطاقات فارغة. أُضيفت الصورة في blog-card.blade.php،
   وهنا تنسيقها.
--------------------------------------------------------------------------- */

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.blog-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-2);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.blog-card:hover .blog-card__media img { transform: scale(1.05); }

.blog-card .blog-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    flex: 1 1 auto;
}

.blog-card .blog-date {
    font-size: 12px;
    color: var(--ink-3);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.blog-card .blog-title {
    font-size: 17px;
    line-height: 1.4;
    margin: 0;
}

.blog-card .blog-title .blog-link {
    color: var(--ink);
    transition: color var(--dur-1) var(--ease);
}

.blog-card:hover .blog-title .blog-link { color: var(--brand); }

/* الزرّ إلى أسفل البطاقة دائماً فتتساوى البطاقات مهما اختلف العنوان */
.blog-card .blog-btn {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
}

/* ---------------------------------------------------------------------------
   17) العرض الخاص — كان صورتين زخرفيتين وخلفية بيضاء
--------------------------------------------------------------------------- */

.spectial-offer-area .spectial-offer-wrap {
    background:
        radial-gradient(70% 100% at 85% 15%, rgba(236, 128, 33, .14), transparent 60%),
        linear-gradient(135deg, #fbfcfd, #f3f5f7);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: var(--sp-6) var(--sp-5);
    overflow: hidden;
}

.spectial-offer-area .offer-info { margin-top: 0 !important; }

.spectial-offer-area .offet-text {
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 6px;
}

.spectial-offer-area .offer-catagory {
    font-size: clamp(26px, 20px + 1.6vw, 40px);
    line-height: 1.2;
    margin-bottom: var(--sp-5);
}

@media (max-width: 767.98px) {
    .spectial-offer-area .spectial-offer-wrap {
        padding: var(--sp-5) var(--sp-4);
        border-radius: 20px;
        text-align: center;
    }
    .spectial-offer-area .offer-info { margin-top: var(--sp-4) !important; }
}

/* ---------------------------------------------------------------------------
   18) صفحة المنتج
   الصورة الرئيسية والمصغّرات كانت بلا إطار، وزرّ الفيديو أحمر
   فاقع (rgba(255,0,0,.7)) مكتوب داخل <style> في head.blade.php،
   غريب عن هوية الموقع ويغطّي وسط الصورة.
--------------------------------------------------------------------------- */

.product-thumbnail-image,
.product-thumb-silide-v2 .single-thumb,
.product-thumb-silide-v2 .slick-slide > div {
    border-radius: var(--r-md);
    overflow: hidden;
}

.product-thumbnail-image {
    background: var(--surface);
    border: 1px solid var(--line);
}

/* زرّ تشغيل الفيديو: من مستطيل أحمر وسط الصورة إلى حبّة أنيقة
   أسفلها. المحدِّد أقوى من قاعدة <style> المضمَّنة. */
body .video-play-button,
.single-slide .video-play-button {
    top: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    background-color: rgba(28, 31, 35, .78);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: var(--shadow-2);
    transition: background-color var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease);
}

body .video-play-button:hover {
    background-color: var(--brand);
    transform: translateX(-50%) translateY(-2px);
}

/* تبويبات الوصف والتقييمات */
.nav-tabs-menu .nav-tabs {
    gap: 8px;
    border-bottom: 1px solid var(--line);
}

.nav-tabs-menu .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    font-weight: 600;
    color: var(--ink-3);
    transition: color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease);
}

.nav-tabs-menu .nav-tabs .nav-link:hover { color: var(--brand); }

.nav-tabs-menu .nav-tabs .nav-link.active {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--line);
    border-bottom-color: transparent;
}

/* ---------------------------------------------------------------------------
   19) صفحات السلة والدفع — الجداول والملخّص داخل بطاقات
--------------------------------------------------------------------------- */

.cart-area .cart-wrapper,
.cart-area .table-responsive,
.checkout-area .checkout-form,
.checkout-area .order-summary,
.cart-totals {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}

.cart-area .table-responsive { overflow: hidden; }

.cart-area table th {
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--line);
}

.cart-area table td { border-bottom: 1px solid var(--line); }
.cart-area table tr:last-child td { border-bottom: 0; }

/* حقول الإدخال في الدفع: نفس لغة الحقول في بقية الموقع */
.checkout-area input[type="text"],
.checkout-area input[type="email"],
.checkout-area input[type="tel"],
.checkout-area input[type="number"],
.checkout-area textarea,
.checkout-area select {
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    transition: border-color var(--dur-1) var(--ease),
                box-shadow var(--dur-1) var(--ease);
}

.checkout-area input:focus,
.checkout-area textarea:focus,
.checkout-area select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(236, 128, 33, .14);
    outline: none;
}

/* الثيم يلوّن التبويب النشط بمحدِّد من ستة مستويات يتضمّن .nav-item
   ويسبق قواعد القسم 18، فبقي رمادياً. نطابق تخصيصه هنا. */
.product-single-area .product-bottom-info .nav-tabs-menu .nav-tabs .nav-item .nav-link.active,
.product-single-area-v2 .product-bottom-info .nav-tabs-menu .nav-tabs .nav-item .nav-link.active,
.product-single-area-v3 .product-bottom-info .nav-tabs-menu .nav-tabs .nav-item .nav-link.active {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--line);
    border-bottom-color: transparent;
}

.product-single-area .product-bottom-info .nav-tabs-menu .nav-tabs .nav-item .nav-link,
.product-single-area-v2 .product-bottom-info .nav-tabs-menu .nav-tabs .nav-item .nav-link,
.product-single-area-v3 .product-bottom-info .nav-tabs-menu .nav-tabs .nav-item .nav-link {
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   20) قسم المقالات — تخطيط تحريري
   كان عنواناً وزرّاً في عمود، وبطاقة واحدة بجانبه، ثم ثلاث بطاقات
   في صفّ منفصل — بلا تسلسل واضح. والبطاقة الأولى كانت تحمل
   d-none d-lg-block فيختفي مقال كامل على الجوال.
   صار مقالاً رئيسياً كبيراً وقائمةً مضغوطة بجانبه.
--------------------------------------------------------------------------- */

.blog-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--sp-6);
    align-items: start;
    margin-top: var(--sp-6);
}

/* ---- المقال الرئيسي ---- */

.blog-lead {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}

.blog-lead:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
}

.blog-lead__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-2);
}

.blog-lead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.blog-lead:hover .blog-lead__media img { transform: scale(1.04); }

.blog-lead__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 26px;
}

.blog-lead__date,
.blog-mini__date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ink-3);
}

.blog-lead__title {
    font-size: clamp(20px, 16px + .8vw, 26px);
    line-height: 1.3;
    margin: 0;
}

.blog-lead__title a {
    color: var(--ink);
    transition: color var(--dur-1) var(--ease);
}

.blog-lead:hover .blog-lead__title a { color: var(--brand); }

.blog-lead__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-2);
}

.blog-lead__link,
.blog-side__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    align-self: flex-start;
}

.blog-lead__link i,
.blog-side__all i {
    font-size: 11px;
    transition: transform var(--dur-1) var(--ease);
}

.blog-lead__link:hover i,
.blog-side__all:hover i { transform: translateX(3px); }

/* السهم ينعكس مع اتجاه القراءة */
[dir="rtl"] .blog-lead__link i,
[dir="rtl"] .blog-side__all i { transform: scaleX(-1); }

[dir="rtl"] .blog-lead__link:hover i,
[dir="rtl"] .blog-side__all:hover i { transform: scaleX(-1) translateX(3px); }

/* ---- قائمة المقالات الجانبية ---- */

.blog-side {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.blog-mini {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 14px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px;
    transition: border-color var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}

.blog-mini:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-1);
    transform: translateX(2px);
}

[dir="rtl"] .blog-mini:hover { transform: translateX(-2px); }

.blog-mini__media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
}

.blog-mini__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-mini__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.blog-mini__title {
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
}

.blog-mini__title a {
    color: var(--ink);
    /* عنوانان كحدّ أقصى فتبقى البطاقات متساوية */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-1) var(--ease);
}

.blog-mini:hover .blog-mini__title a { color: var(--brand); }

.blog-side__all {
    justify-content: center;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    align-self: stretch;
    transition: border-color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease);
}

.blog-side__all:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

@media (max-width: 991.98px) {
    .blog-layout {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

@media (max-width: 575.98px) {
    .blog-mini { grid-template-columns: 84px 1fr; }
    .blog-mini__title { font-size: 14px; }
    .blog-lead__body { padding: 18px 16px 20px; }
}

/* الصورتان الزخرفيتان (line-shape) كانتا تُرسمان فوق النصّ فتقطعان
   عنوان العرض بصرياً. نُبقيهما خلفه ونخفّف حدّتهما. */
.spectial-offer-area .spectial-offer-wrap .line-shape-one,
.spectial-offer-area .spectial-offer-wrap .line-shape-two {
    z-index: 0;
    opacity: .35;
    pointer-events: none;
}

.spectial-offer-area .offer-info,
.spectial-offer-area .offer-image {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   21) توزيع الشارات على طرفَي البطاقة
   حين يجتمع خصم وكمية منخفضة على منتج واحد كانت الشارتان
   تتراكمان عمودياً فوق الصورة (قِيس: ارتفاع 54px من أصل 268px
   للصورة) لأن الحاوية بعرض أوسع شارة و flex-wrap يدفع الثانية
   إلى سطر جديد. نُوزّعهما على الطرفين: الخصم في بداية السطر
   والكمية في نهايته، فلا تراكم ولا تغطية.
--------------------------------------------------------------------------- */

.single-grid-product .product-top .product-flags,
.single-grid-product-v2 .product-top .product-flags {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

/* شارة الكمية إلى الطرف المقابل دائماً، حتى لو غاب الخصم */
.single-grid-product .product-top .product-flags .product-flag.stock,
.single-grid-product-v2 .product-top .product-flags .product-flag.stock {
    margin-inline-start: auto;
}

/* على البطاقات الضيّقة يكفي نصّ أقصر حتى لا يلتصق الطرفان */
@media (max-width: 575.98px) {
    .single-grid-product .product-top .product-flags .product-flag,
    .single-grid-product-v2 .product-top .product-flags .product-flag {
        padding: 5px 8px;
        font-size: 11px;
    }
}

/* الحاوية كانت تُحسب بعرض أوسع شارة (82px) لا بعرض البطاقة،
   لأن قيمة right وردت كإزاحة لا كتثبيت على الحافة. نثبّت
   الطرفين صراحةً بخصائص منطقية تصحّ في العربية والتركية. */
.single-grid-product .product-top .product-flags,
.single-grid-product-v2 .product-top .product-flags {
    inset-inline-start: 12px;
    inset-inline-end: 12px;
    width: auto;
}

/* السبب الحقيقي للتراكم: الثيم يضبط flex-direction: column على
   حاوية الشارات، فكانت space-between و nowrap توزّعهما عمودياً
   لا أفقياً. نصّ الاتجاه صراحةً. */
.single-grid-product .product-top .product-flags,
.single-grid-product-v2 .product-top .product-flags {
    flex-direction: row;
}

/* ---------------------------------------------------------------------------
   22) صفحة "اتصل بنا"
   الثيم يلوّن الجملة تحت العنوان بـ #fff وهي مصمَّمة لخلفية داكنة
   لم تعد موجودة؛ فكانت أبيض على #f7f8f9 أي غير مقروءة عملياً.
--------------------------------------------------------------------------- */

.contact-us-area .contact-form-area .contct-form-top .form-subtitle,
.contact-us-area .form-subtitle {
    color: var(--ink-2);
}

.contact-us-area .contact-form-area {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: var(--sp-6) var(--sp-5);
}

/* بطاقات وسائل التواصل في أعلى الصفحة */
.contact-us-area .contact-us-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
    margin-block: var(--sp-6);
}

.contact-us-area .single-contact-us {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    transition: border-color var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}

.contact-us-area .single-contact-us:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-1);
    transform: translateY(-3px);
}

/* حقول النموذج بنفس لغة بقية الموقع */
.contact-us-area input[type="text"],
.contact-us-area input[type="email"],
.contact-us-area input[type="tel"],
.contact-us-area textarea,
.ring-area input,
.ring-area textarea,
.ring-area select {
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    transition: border-color var(--dur-1) var(--ease),
                box-shadow var(--dur-1) var(--ease);
}

.contact-us-area input:focus,
.contact-us-area textarea:focus,
.ring-area input:focus,
.ring-area textarea:focus,
.ring-area select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(236, 128, 33, .14);
    outline: none;
}

/* ---------------------------------------------------------------------------
   23) ترويسة الصفحات الداخلية — كانت شريطاً رمادياً مسطّحاً
--------------------------------------------------------------------------- */

.breadcrumb-area {
    background:
        radial-gradient(60% 120% at 88% 10%, rgba(236, 128, 33, .10), transparent 60%),
        linear-gradient(135deg, #fbfcfd, #f3f5f7);
    border-bottom: 1px solid var(--line);
}

.breadcrumb-area .page-title {
    font-size: clamp(24px, 19px + 1.1vw, 34px);
    margin-bottom: 8px;
}

.breadcrumb-area .breadcrumb-pages .page-item,
.breadcrumb-area .breadcrumb-pages .page-item-link {
    font-size: 14px;
    color: var(--ink-3);
}

.breadcrumb-area .breadcrumb-pages .page-item-link:hover { color: var(--brand); }

/* بطاقات وسائل التواصل تستعمل .contact-info-content لا
   .single-contact-us، فلم تلتقط قواعد القسم 22. */
.contact-us-area .contact-us-top .contact-info-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-4);
    height: 100%;
    transition: border-color var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}

.contact-us-area .contact-us-top .contact-info-content:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-1);
    transform: translateY(-3px);
}

.contact-us-area .contact-info-title {
    font-size: 17px;
    margin-block: 10px 6px;
}

/* ---------------------------------------------------------------------------
   24) صفحة "من نحن"
   كتل المزايا والرسالة كانت نصّاً حرّاً بلا حدود ولا فواصل بصرية،
   فتبدو الصفحة كتلة واحدة طويلة.
--------------------------------------------------------------------------- */

.our-features-area .single-features {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-4);
    height: 100%;
    transition: border-color var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}

.our-features-area .single-features:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-1);
    transform: translateY(-3px);
}

.our-features-area .features-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.our-features-area .features-title {
    font-size: 17px;
    margin-block: 12px 8px;
}

.about-us-area .about-us-image img {
    border-radius: var(--r-lg);
}

/* كتل الرسالة والقيم: خطّ جانبي يفصل كل كتلة عن جارتها */
.about-widget,
.single-widget {
    padding-inline-start: var(--sp-4);
    border-inline-start: 3px solid var(--brand-soft);
}

.about-widget:hover,
.single-widget:hover {
    border-inline-start-color: var(--brand);
}

/* ---------------------------------------------------------------------------
   25) صفحة طلب الأساور (ring) — نموذج داخل بطاقة
--------------------------------------------------------------------------- */

.ring-area form,
.ring-form-area {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: var(--sp-6) var(--sp-5);
}

@media (max-width: 767.98px) {
    .ring-area form,
    .ring-form-area,
    .contact-us-area .contact-form-area {
        padding: var(--sp-5) var(--sp-4);
        border-radius: var(--r-md);
    }
}

/* ---------------------------------------------------------------------------
   26) روابط الاتصال في التذييل وصفحة اتصل بنا
   كان الهاتف والبريد نصّاً غير قابل للنقر، فزائر الجوال لا
   يستطيع الاتصال أو المراسلة إلا بنسخهما يدوياً.
--------------------------------------------------------------------------- */

.footer-contact-link {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease);
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: var(--brand);
    border-block-end-color: currentColor;
}

/* الأرقام والبُرد تُكتب من اليسار حتى داخل صفحة عربية */
.footer-contact-link[dir="ltr"] {
    display: inline-block;
    unicode-bidi: embed;
}

/* مساحة نقر مريحة على الجوال */
@media (max-width: 767.98px) {
    .footer-contact-link {
        display: inline-block;
        padding-block: 4px;
    }
}

/* ---------------------------------------------------------------------------
   27) سلة المشتريات الجانبية — إعادة بناء
   العنصر يعيد استعمال .single-grid-product وهو صنف بطاقة شبكة
   المنتجات، فورث تخطيطاً طويلاً وعرضاً ثابتاً للصورة.
   قِيس: ارتفاع العنصر 344px، وعرض حاوية الصورة 137px بينما
   عمود الشبكة 72px — فتفيض الصورة وتغطّي اسم المنتج.
   محدِّدات الثيم من ثلاثة مستويات، فنطابقها هنا وإلا لا تُطبَّق.
--------------------------------------------------------------------------- */

.cart-product-item {
    margin-bottom: 10px;
}

.cart-product-item .single-grid-product {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
        "image  name"
        "image  qty"
        "price  price";
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: none;
    transition: border-color var(--dur-2) var(--ease);
}

.cart-product-item .single-grid-product:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--brand);
}

/* الصورة: الثيم يفرض 137px وهامشاً جانبياً 20px */
.cart-product-item .single-grid-product .product-top {
    grid-area: image;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
}

.cart-product-item .single-grid-product .product-top .product-thumbnal {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.cart-product-item .single-grid-product:hover .product-top .product-thumbnal {
    transform: none;
}

/* الثيم يجعل .product-info كتلة طويلة؛ نُذيبها فتصعد أبناؤها
   إلى الشبكة مباشرة. */
.cart-product-item .single-grid-product .product-info {
    display: contents;
}

.cart-product-item .single-grid-product .product-info .product-name-part {
    grid-area: name;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cart-product-item .single-grid-product .product-info .product-name {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35;
    /* سطران كحدّ أقصى: أسماء المنتجات هنا طويلة */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-product-item .single-grid-product .product-info .product-name .product-link {
    color: var(--ink);
    font-size: inherit;
    line-height: inherit;
}

/* عدّاد الكمية وزرّ الإزالة في سطر واحد تحت الاسم */
.cart-product-item .single-grid-product .product-info .cart-quantity {
    width: auto;
    max-width: 96px;
    margin: 0;
    height: 26px;
}

.cart-product-item .single-grid-product .product-info .cart-quantity .qtybutton {
    width: 26px;
    height: 26px;
    min-width: 26px;
    line-height: 24px;
    padding: 0;
    font-size: 13px;
}

.cart-product-item .single-grid-product .product-info .cart-quantity .qty-input {
    width: 36px;
    height: 26px;
    padding: 0;
    line-height: 26px;
    text-align: center;
    font-size: 13px;
}

.cart-product-item .single-grid-product .product-info .cart-remove-btn {
    align-self: flex-start;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-3);
    background: none;
    border: 0;
    text-decoration: underline;
}

.cart-product-item .single-grid-product .product-info .cart-remove-btn:hover {
    color: #b42318;
}

/* السعر في سطره الخاص بمحاذاة النهاية */
.cart-product-item .single-grid-product .product-info .product-price {
    grid-area: price;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.cart-product-item .single-grid-product .product-info .product-price .regular-price {
    font-size: 12px;
    color: var(--ink-3);
    text-decoration: line-through;
}

.cart-product-item .single-grid-product .product-info .product-price .price {
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
}

/* الكمية وزرّ الإزالة في سطر واحد بدل سطرين، فيقصر الصفّ */
.cart-product-item .single-grid-product .product-info .product-name-part {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "title title"
        "qty   remove";
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
}

.cart-product-item .single-grid-product .product-info .product-name {
    grid-area: title;
}

.cart-product-item .single-grid-product .product-info .cart-quantity {
    grid-area: qty;
}

.cart-product-item .single-grid-product .product-info .cart-remove-btn {
    grid-area: remove;
    justify-self: start;
    align-self: center;
}

/* ---------------------------------------------------------------------------
   28) أسفل السلة الجانبية — الإجمالي وطريق إتمام الشراء
   كان الزبون قد لا ينتبه إلى أين يُكمل: الإجمالي وزرّ المتابعة
   بلا فصل بصري عن قائمة المنتجات، والزرّ لا يختلف كثيراً عمّا
   حوله. نجعل المنطقة ملتصقة بأسفل اللوحة ونُبرز الزرّ.
--------------------------------------------------------------------------- */

.cart-sidebar-menu .total-bottom-part,
.total-bottom-part {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 16px 0 4px;
    margin-top: var(--sp-4);
}

.total-bottom-part .total-count {
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.total-bottom-part .total-count h3 {
    font-size: 15px;
    color: var(--ink-2);
    margin: 0;
}

.total-bottom-part .total-count h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand);
    margin: 0;
}

/* الزرّ هو الخطوة التالية، فيجب أن يكون أوضح عنصر في اللوحة */
.total-bottom-part .proceed-to-btn {
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(236, 128, 33, .30);
    transition: background var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}

.total-bottom-part .proceed-to-btn:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(236, 128, 33, .34);
}

.total-bottom-part .proceed-to-btn:active {
    transform: translateY(0);
}

/* "عرض السلة" خيار ثانوي، فيبقى رابطاً هادئاً تحت الزرّ */
.total-bottom-part .view-cart-go {
    text-align: center;
    margin-top: 10px;
}

.total-bottom-part .view-cart-go a {
    font-size: 13px;
    color: var(--ink-3);
    text-decoration: underline;
    transition: color var(--dur-1) var(--ease);
}

.total-bottom-part .view-cart-go a:hover {
    color: var(--brand);
}

/* ---------------------------------------------------------------------------
   29) صفحة السلة — صارت وجهة زرّ السلة بدل اللوحة الجانبية
   فيجب أن تكون واضحة: جدول مقروء، وملخّص بارز، وزرّ دفع لا
   يُخطئه الزبون.
--------------------------------------------------------------------------- */

.cart-page-area .cart-page-item td,
.cart-page-area table th {
    vertical-align: middle;
}

.cart-page-area table th {
    background: var(--surface-2);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}

.cart-page-area .cart-page-item td {
    border-bottom: 1px solid var(--line);
    padding-block: 14px;
}

.cart-page-area .cart-page-item:last-child td {
    border-bottom: 0;
}

.cart-page-area .cart-page-item .product-thumbnal,
.cart-page-area .cart-page-item img {
    border-radius: var(--r-sm);
}

/* صندوقا رمز الخصم والمجموع */
.cart-page-bottom-box,
.cart-page-sub-total-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}

.cart-page-sub-total-box {
    box-shadow: var(--shadow-1);
}

/* زرّ إتمام الشراء: أوضح عنصر في الصفحة */
.cart-page-area .proceed-to-btn,
.cart-page-area .proceed-to-checkout-btn {
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(236, 128, 33, .30);
    transition: background var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}

.cart-page-area .proceed-to-btn:hover,
.cart-page-area .proceed-to-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(236, 128, 33, .34);
}

@media (max-width: 767.98px) {
    /* الجدول يتحوّل إلى تمرير أفقي بدل ضغط الأعمدة */
    .cart-page-area .table-responsive {
        overflow-x: auto;
    }

    .cart-page-bottom-box,
    .cart-page-sub-total-box {
        padding: var(--sp-4);
        border-radius: var(--r-md);
    }
}

/* تنبيه الشحن والضريبة أسفل المجموع */
.cart-total-note {
    margin: 10px 0 14px;
    font-size: 12.5px;
    color: var(--ink-3);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   30) كتلة العنوان والتواصل في التذييل
   كانت داخل قائمة social-media نفسها، والثيم يجعل كل رابط فيها
   دائرةً 40×40، فظهر الهاتف والبريد كدائرتين فوق نصّ العنوان.
   صارت كتلة <address> مستقلّة.
--------------------------------------------------------------------------- */

.footer-contact-block {
    margin: 18px 0 0;
    font-style: normal;
    line-height: 1.8;
}

.footer-address {
    margin: 0 0 12px;
    color: #c3cbd4;
    font-size: 14px;
}

.footer-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
}

.footer-contact-row i {
    flex: 0 0 auto;
    width: 15px;
    font-size: 12px;
    color: var(--brand);
    text-align: center;
}

/* إلغاء شكل الدائرة الموروث من روابط الشبكات الاجتماعية */
.footer-area-v2 .footer-widget-area .footer-contact-block .footer-contact-link,
.footer-contact-block .footer-contact-link {
    display: inline;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: inherit;
    color: #c3cbd4;
    /* البريد الطويل يلتفّ عند الحاجة بدل أن يخرج عن العمود */
    word-break: break-word;
}

.footer-contact-block .footer-contact-link:hover {
    color: var(--brand);
}

/* الأرقام والبُرد تُقرأ من اليسار داخل الصفحة العربية */
.footer-contact-block .footer-contact-link[dir="ltr"] {
    unicode-bidi: embed;
}