/* ==========================================================================
   XLORD — هوية المتجر
   يُحمّل على شاشات المتجر وتفاصيل المنتج فقط. السلة والدفع لا يتأثران.
   ========================================================================== */

.xshop,
.xpdp-wrap {
    /* الأحمر من هوية العلامة كما هو */
    --x-red: #B30C20;
    --x-red-hot: #d10c24;

    /* حياد مائل لدرجة الأحمر - لا أسود ولا أبيض خالص */
    --x-ground: oklch(0.155 0.008 22);
    --x-panel: oklch(0.205 0.011 22);
    --x-panel-up: oklch(0.255 0.014 22);
    --x-line: oklch(0.33 0.016 22);
    --x-ink: oklch(0.97 0.006 22);
    --x-ink-dim: oklch(0.75 0.012 22);
    /* 0.66 وليس أقل: عند 0.58 يهبط تباين النص الثانوي فوق اللوح الداكن تحت 4.5:1 */
    --x-ink-faint: oklch(0.66 0.014 22);

    /* اللوح الفاتح الذي تجلس عليه صور المنتجات */
    --x-plate: oklch(0.965 0.003 22);

    --x-gap: clamp(14px, 1.6vw, 22px);
    --x-pad: clamp(18px, 2vw, 30px);

    background: var(--x-ground);
    color: var(--x-ink);
    font-family: "Cairo", sans-serif;
}

/* الحاوية الخارجية للقالب تفقد حشوتها ليصبح السواد كامل العرض */
body.post-type-archive-product .single-products-page,
body.tax-product_cat .single-products-page,
body.tax-product_tag .single-products-page,
body.single-product .single-products-page {
    padding: 0;
}

.xshop *,
.xpdp-wrap * {
    border-radius: 0;
}

.xshop a,
.xpdp-wrap a {
    color: inherit;
    text-decoration: none;
}

/* ============================ فتات التنقل ============================ */

.xshop .woocommerce-breadcrumb,
.xpdp-wrap .woocommerce-breadcrumb {
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px 12px 0;
    font-size: 13px;
    color: var(--x-ink-faint);
    letter-spacing: .02em;
}

.xshop .woocommerce-breadcrumb a:hover,
.xpdp-wrap .woocommerce-breadcrumb a:hover {
    color: var(--x-red-hot);
}

/* ============================ ترويسة المتجر ============================ */

.xshop-hero {
    padding: clamp(36px, 6vw, 84px) 0 clamp(28px, 4vw, 52px);
    position: relative;
    overflow: hidden;
}

/* الشطبة المائلة المأخوذة من العلبة */
.xshop-hero:before {
    content: "";
    position: absolute;
    top: -40%;
    left: -6%;
    width: clamp(140px, 18vw, 300px);
    height: 180%;
    background: var(--x-red);
    opacity: .16;
    transform: skewX(-18deg);
    pointer-events: none;
}

.xshop-title {
    font-size: clamp(2.6rem, 8vw, 5.75rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -0.02em;
    color: var(--x-ink);
    margin: 0;
}

.xshop-rule {
    display: block;
    width: clamp(70px, 9vw, 130px);
    height: 5px;
    background: var(--x-red);
    margin: clamp(16px, 2vw, 26px) 0 0;
}

.xshop-intro {
    max-width: 68ch;
    margin-top: clamp(14px, 1.8vw, 22px);
    color: var(--x-ink-dim);
    font-size: 1rem;
    line-height: 1.85;
}

.xshop-intro p:last-child {
    margin-bottom: 0;
}

/* ============================ شريط الأدوات ============================ */

.xshop-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--x-line);
    border-bottom: 1px solid var(--x-line);
    margin-bottom: var(--x-gap);
}

.xshop-bar:empty {
    display: none;
}

.xshop .woocommerce-result-count {
    margin: 0;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--x-ink-faint);
}

.xshop .woocommerce-ordering {
    margin: 0;
}

.xshop .woocommerce-ordering select {
    background: var(--x-panel) !important;
    border: 1px solid var(--x-line) !important;
    color: var(--x-ink);
    height: 42px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.xshop .woocommerce-ordering select:focus-visible {
    outline: 2px solid var(--x-red-hot);
    outline-offset: 2px;
}

/* ============================ شبكة المنتجات ============================ */

.xshop ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
    gap: 1px;
    background: var(--x-line);
    border: 1px solid var(--x-line);
    list-style: none;
    margin: 0 0 clamp(36px, 5vw, 64px);
    padding: 0;
}

.xshop ul.products:before,
.xshop ul.products:after {
    content: none;
}

/* ووكومرس يفرض padding:0 و margin على li.product بأولوية (0,3,2)
   لذلك كل قواعد البطاقة تُكتب بأولوية أعلى، وإلا تُلغى */
.xshop ul.products li.product.xcard,
.xpdp ul.products li.product.xcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--x-panel);
    padding: var(--x-pad);
    margin: 0;
    width: auto;
    float: none;
    clear: none;
    list-style: none;
    transition: background .45s cubic-bezier(.22, 1, .36, 1);
}

.xshop ul.products li.product.xcard:hover,
.xpdp ul.products li.product.xcard:hover {
    background: var(--x-panel-up);
}

/* الخط الأحمر الذي يزحف أعلى البطاقة */
.xcard:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 3px;
    width: 0;
    background: var(--x-red-hot);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.xcard:hover:after,
.xcard:focus-within:after {
    width: 100%;
}

.xcard > a {
    display: contents;
}

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

/* صور المنتجات ملتقطة على خلفيات فاتحة - نوحّدها في لوح فاتح واحد
   بدل خلفيات متضاربة فوق الأسود */
.xcard-media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: clamp(16px, 1.8vw, 24px);
    background: var(--x-plate);
}

.xcard-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.xcard:hover .xcard-media img {
    transform: scale(1.06);
}

/* الوسم الأحمر في زاوية العلبة */
.xcard-tag {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    background: var(--x-red);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    opacity: 0;
    transform: translate(6px, -6px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.xcard:hover .xcard-tag {
    opacity: 1;
    transform: translate(0, 0);
}

.xcard .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--x-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 5px 12px;
    margin: 0;
    min-height: 0;
    min-width: 0;
    line-height: 1.6;
}

/* --- نص المنتج --- */

.xcard-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
}

.xshop ul.products li.product.xcard .xcard-body h2,
.xshop ul.products li.product.xcard .xcard-body h3,
.xshop ul.products li.product.xcard .woocommerce-loop-product__title,
.xpdp ul.products li.product.xcard .xcard-body h2,
.xpdp ul.products li.product.xcard .xcard-body h3,
.xpdp ul.products li.product.xcard .woocommerce-loop-product__title {
    font-size: clamp(1.05rem, 1.3vw, 1.3rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--x-ink);
    margin: 0;
    padding: 0;
}

.xcard-excerpt {
    margin: 0;
    font-size: .875rem;
    line-height: 1.75;
    color: var(--x-ink-faint);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.xcard .price {
    margin: 4px 0 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--x-ink);
    letter-spacing: -0.01em;
}

.xcard .price del {
    color: var(--x-ink-faint);
    font-weight: 400;
    font-size: .85em;
    margin-left: 8px;
}

.xcard .price ins {
    text-decoration: none;
    color: var(--x-red-hot);
}

/* --- زر البطاقة --- */

.xshop ul.products li.product.xcard .button,
.xshop ul.products li.product.xcard .added_to_cart,
.xpdp ul.products li.product.xcard .button,
.xpdp ul.products li.product.xcard .added_to_cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: auto 0 0;
    padding: 16px 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--x-ink);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    cursor: pointer;
    transition: color .3s ease;
    width: fit-content;
}

.xcard .button:after,
.xcard .added_to_cart:after {
    content: "←";
    display: inline-block;
    color: var(--x-red-hot);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.xcard:hover .button,
.xcard:hover .added_to_cart {
    color: var(--x-red-hot);
}

.xcard:hover .button:after,
.xcard:hover .added_to_cart:after {
    transform: translateX(-7px);
}

.xcard .button.loading,
.xcard .button.added {
    opacity: .55;
}

/* --- تثبيت قواعد البطاقة أمام ستايل ووكومرس والقالب ---
   الأصلي: ".woocommerce ul.products li.product a img{height:250px}" وأمثاله،
   وأولويتها أعلى من المحددات القصيرة أعلاه. --- */

.xshop ul.products li.product.xcard .xcard-media,
.xpdp ul.products li.product.xcard .xcard-media {
    background: var(--x-plate);
    margin-bottom: clamp(16px, 1.8vw, 24px);
}

.xshop ul.products li.product.xcard .xcard-media img,
.xpdp ul.products li.product.xcard .xcard-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 8%;
    object-fit: contain;
    box-shadow: none;
}

.xshop ul.products li.product.xcard .xcard-excerpt,
.xpdp ul.products li.product.xcard .xcard-excerpt {
    margin: 0;
    color: var(--x-ink-faint);
}

.xshop ul.products li.product.xcard .price,
.xpdp ul.products li.product.xcard .price {
    margin: 4px 0 0;
    padding: 0;
    color: var(--x-ink);
    font-size: 1.15rem;
    font-weight: 900;
}

.xshop ul.products li.product.xcard .price ins,
.xpdp ul.products li.product.xcard .price ins {
    background: none;
    color: var(--x-red-hot);
    text-decoration: none;
}

.xshop ul.products li.product.xcard .star-rating,
.xpdp ul.products li.product.xcard .star-rating {
    color: var(--x-red-hot);
    margin: 2px 0;
}

/* ============================ ترقيم الصفحات ============================ */

.xshop .woocommerce-pagination {
    margin: 0 0 clamp(48px, 7vw, 90px);
}

.xshop .woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    border: 0 !important;
    margin: 0;
    padding: 0;
}

.xshop .woocommerce-pagination ul li {
    border: 0 !important;
    overflow: visible;
}

.xshop .woocommerce-pagination a,
.xshop .woocommerce-pagination span {
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
    background: var(--x-panel);
    border: 1px solid var(--x-line);
    color: var(--x-ink-dim);
    font-weight: 700;
    font-size: 15px;
    transition: all .3s ease;
}

.xshop .woocommerce-pagination a:hover {
    border-color: var(--x-red-hot);
    color: var(--x-ink);
}

.xshop .woocommerce-pagination .current {
    background: var(--x-red);
    border-color: var(--x-red);
    color: #fff;
}

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

.xshop .woocommerce-info,
.xshop .woocommerce-message,
.xshop .woocommerce-error {
    background: var(--x-panel);
    border: 1px solid var(--x-line);
    border-top: 3px solid var(--x-red);
    color: var(--x-ink-dim);
    padding: 20px 24px;
    margin: 0 0 var(--x-gap);
    list-style: none;
}

/* ==========================================================================
   صفحة تفاصيل المنتج
   ========================================================================== */

.xpdp-wrap {
    padding-bottom: clamp(48px, 7vw, 96px);
}

.xpdp {
    padding-top: clamp(24px, 3vw, 44px);
}

/* minmax(0,…) وليس 1fr المجردة: خلايا الشبكة تأخذ min-width:auto افتراضيا،
   وشريط مصغرات السلايدر عرضه الداخلي بعشرات الآلاف من البكسلات، فيمدّد
   العمود معه ويتضخم عرض الصفحة كلها على الجوال. */
.xpdp-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    padding-bottom: clamp(36px, 5vw, 72px);
}

.xpdp-gallery,
.xpdp .summary {
    min-width: 0;
}

@media (min-width: 992px) {
    .xpdp-main {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    /* أوصاف المنتجات طويلة جدا - نثبّت المعرض حتى لا يبقى نصف العمود فارغا */
    .xpdp-gallery {
        position: sticky;
        top: 24px;
    }
}

/* --- المعرض --- */

.xpdp-gallery {
    position: relative;
    background: var(--x-plate);
    border: 1px solid var(--x-line);
    padding: clamp(16px, 2.2vw, 34px);
}

.xpdp-gallery img {
    max-width: 100%;
    height: auto;
    object-fit: contain !important;
}

.xpdp-gallery .onsale {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background: var(--x-red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 8px 18px;
    margin: 0;
}

/* توافق مع اضافة معرض المنتج
   الاضافة تكتب inline: "float:right; max-width:50%" لانها مصممة لتخطيط
   ووكومرس القديم (المعرض والملخص جنب بعض داخل حاوية واحدة). في تخطيط
   الشبكة الجديد صار المعرض في خليّة مستقلة، فنصف العرض يترك نصف اللوح
   فارغا ويجعل الصورة صغيرة ومزاحة. الـ !important ضروري لتجاوز الـ inline. */
.xpdp-gallery #wpgs-gallery,
.xpdp-gallery .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    background: transparent;
}

.xpdp-gallery .wcgs-carousel {
    width: 100% !important;
    max-width: 100% !important;
}

/* شريط المصغرات: يبقى محصورا داخل اللوح مهما كان عرضه الداخلي */
.xpdp-gallery .gallery-navigation-carousel-wrapper,
.xpdp-gallery .gallery-navigation-carousel {
    max-width: 100%;
    overflow: hidden;
}

.xpdp-gallery .gallery-navigation-carousel .wcgs-thumb {
    border: 1px solid oklch(0.88 0.004 22);
    background: var(--x-plate);
}

.xpdp-gallery .gallery-navigation-carousel .slick-current .wcgs-thumb,
.xpdp-gallery .gallery-navigation-carousel .wcgs-thumb:hover {
    border-color: var(--x-red-hot);
}

/* ستايل القالب يقص المصغرات بـ cover - العلب لا يجوز قصها */
.xpdp-gallery .gallery-navigation-carousel .wcgs-thumb img {
    object-fit: contain !important;
    padding: 6px;
}

/* --- الملخص --- */

.xpdp .summary {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.xpdp .product_title {
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--x-ink);
    margin: 0 0 clamp(14px, 1.8vw, 22px);
}

.xpdp .product_title:after {
    content: "";
    display: block;
    width: 66px;
    height: 5px;
    background: var(--x-red);
    margin-top: clamp(14px, 1.8vw, 22px);
}

.xpdp .summary .price {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 900;
    color: var(--x-ink);
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

.xpdp .summary .price del {
    color: var(--x-ink-faint);
    font-weight: 400;
    font-size: .6em;
}

.xpdp .summary .price ins {
    text-decoration: none;
    color: var(--x-red-hot);
}

.xpdp .woocommerce-product-details__short-description {
    color: var(--x-ink-dim);
    font-size: 1rem;
    line-height: 1.95;
    max-width: 70ch;
}

.xpdp .woocommerce-product-details__short-description ul,
.xpdp .woocommerce-product-details__short-description ol {
    padding-right: 20px;
    margin-bottom: 14px;
}

.xpdp .woocommerce-product-details__short-description li {
    margin-bottom: 6px;
}

.xpdp .woocommerce-product-details__short-description strong,
.xpdp .woocommerce-product-details__short-description b {
    color: var(--x-ink);
}

/* --- الاضافة للسلة (تصميم فقط - السلوك كما هو) --- */

.xpdp form.cart {
    margin: clamp(22px, 3vw, 34px) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.xpdp form.cart .quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--x-line);
    background: var(--x-panel);
    height: 54px;
}

.xpdp form.cart .quantity input.qty {
    width: 62px;
    height: 100%;
    background: none;
    border: 0;
    color: var(--x-ink);
    text-align: center;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.xpdp form.cart .quantity button.plus,
.xpdp form.cart .quantity button.minus {
    width: 46px;
    height: 100%;
    background: none;
    border: 0;
    color: var(--x-ink-dim);
    cursor: pointer;
    transition: color .25s ease, background .25s ease;
}

.xpdp form.cart .quantity button.plus:hover,
.xpdp form.cart .quantity button.minus:hover {
    color: var(--x-ink);
    background: var(--x-panel-up);
}

.xpdp form.cart button.single_add_to_cart_button,
.xpdp .summary .button {
    height: 54px;
    padding: 0 clamp(28px, 4vw, 52px);
    background: var(--x-red);
    border: 0;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.xpdp form.cart button.single_add_to_cart_button:hover,
.xpdp .summary .button:hover {
    background: var(--x-red-hot);
    transform: translateY(-2px);
}

.xpdp form.cart button.single_add_to_cart_button:focus-visible,
.xpdp .summary .button:focus-visible {
    outline: 2px solid var(--x-ink);
    outline-offset: 3px;
}

/* خيارات المنتج المتغير */

.xpdp table.variations {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: collapse;
}

.xpdp table.variations th,
.xpdp table.variations td {
    padding: 10px 0;
    border: 0;
    vertical-align: middle;
}

.xpdp table.variations th {
    color: var(--x-ink-dim);
    font-weight: 700;
    font-size: .9rem;
    text-align: right;
    width: 120px;
}

.xpdp table.variations select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--x-panel);
    border: 1px solid var(--x-line);
    color: var(--x-ink);
    font-family: inherit;
}

/* --- بيانات المنتج كورقة مواصفات --- */

.xpdp .product_meta {
    margin: clamp(22px, 3vw, 34px) 0 0;
    padding: 0;
    border-top: 1px solid var(--x-line);
    font-size: .9rem;
    color: var(--x-ink-faint);
}

.xpdp .product_meta > span {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 0;
    border-bottom: 1px solid var(--x-line);
}

.xpdp .product_meta a {
    color: var(--x-ink-dim);
}

.xpdp .product_meta a:hover {
    color: var(--x-red-hot);
}

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

.xpdp .woocommerce-tabs {
    margin: clamp(36px, 5vw, 72px) 0 0;
    border-top: 1px solid var(--x-line);
    padding-top: clamp(24px, 3vw, 40px);
}

.xpdp .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 40px);
    list-style: none;
    margin: 0 0 clamp(22px, 3vw, 36px);
    padding: 0;
    border: 0;
}

.xpdp .woocommerce-tabs ul.tabs:before,
.xpdp .woocommerce-tabs ul.tabs li:before,
.xpdp .woocommerce-tabs ul.tabs li:after {
    content: none !important;
}

.xpdp .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    margin: 0;
    padding: 0 0 12px;
    box-shadow: none !important;
}

.xpdp .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0;
    color: var(--x-ink-faint);
    font-size: clamp(.95rem, 1.3vw, 1.15rem);
    font-weight: 700;
    transition: color .3s ease;
}

.xpdp .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--x-red) !important;
}

.xpdp .woocommerce-tabs ul.tabs li.active a,
.xpdp .woocommerce-tabs ul.tabs li a:hover {
    color: var(--x-ink);
}

.xpdp .woocommerce-Tabs-panel {
    color: var(--x-ink-dim);
    font-size: 1rem;
    line-height: 1.95;
    max-width: 78ch;
}

.xpdp .woocommerce-Tabs-panel h2 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--x-ink);
    margin-bottom: 16px;
}

.xpdp .woocommerce-Tabs-panel table {
    width: 100%;
    border-collapse: collapse;
}

.xpdp .woocommerce-Tabs-panel table th,
.xpdp .woocommerce-Tabs-panel table td {
    padding: 13px 16px;
    border: 1px solid var(--x-line);
    text-align: right;
}

.xpdp .woocommerce-Tabs-panel table th {
    background: var(--x-panel);
    color: var(--x-ink);
    font-weight: 700;
    width: 220px;
}

/* ============================ منتجات ذات صلة ============================ */

.xpdp .related,
.xpdp .upsells {
    margin-top: clamp(40px, 6vw, 80px);
    padding-top: clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--x-line);
    clear: both;
}

.xpdp .related > h2,
.xpdp .upsells > h2 {
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    font-weight: 900;
    color: var(--x-ink);
    margin: 0 0 clamp(20px, 2.6vw, 32px);
    letter-spacing: -0.01em;
}

.xpdp .related > h2:after,
.xpdp .upsells > h2:after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    background: var(--x-red);
    margin-top: 14px;
}

.xpdp .related ul.products,
.xpdp .upsells ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 1px;
    background: var(--x-line);
    border: 1px solid var(--x-line);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================ التقييمات ============================ */

.xpdp .star-rating {
    color: var(--x-red-hot);
}

.xpdp #reviews .comment-text,
.xpdp #reviews .comment_container {
    background: var(--x-panel);
    border: 1px solid var(--x-line);
    padding: 18px;
}

.xpdp #reviews input,
.xpdp #reviews textarea {
    width: 100%;
    background: var(--x-panel);
    border: 1px solid var(--x-line);
    color: var(--x-ink);
    padding: 12px 14px;
    font-family: inherit;
}

/* ============================ الشاشات الصغيرة ============================ */

@media (max-width: 575px) {

    /* عمودان على الجوال: 16 منتجا في عمود واحد يصنع صفحة بطول 7 آلاف بكسل */
    .xshop ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* بنفس أولوية قواعد البطاقة أعلاه، وإلا لا تُطبّق */
    .xshop ul.products li.product.xcard,
    .xpdp ul.products li.product.xcard {
        padding: 12px;
    }

    .xshop ul.products li.product.xcard .xcard-media,
    .xpdp ul.products li.product.xcard .xcard-media {
        aspect-ratio: 1 / 1;
        margin-bottom: 12px;
    }

    .xshop ul.products li.product.xcard .woocommerce-loop-product__title,
    .xshop ul.products li.product.xcard .xcard-body h2,
    .xpdp ul.products li.product.xcard .woocommerce-loop-product__title,
    .xpdp ul.products li.product.xcard .xcard-body h2 {
        font-size: .95rem;
    }

    /* المنتجات ذات الصلة تتبع نفس شبكة العمودين */
    .xpdp .related ul.products,
    .xpdp .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* لا مساحة لسطرين من الوصف داخل بطاقة بعرض 170 بكسل */
    .xcard-excerpt {
        display: none;
    }

    .xshop-bar {
        justify-content: flex-start;
    }

    .xpdp form.cart {
        gap: 10px;
    }

    .xpdp form.cart button.single_add_to_cart_button {
        flex: 1 1 100%;
    }
}

@media (max-width: 359px) {
    .xshop ul.products {
        grid-template-columns: 1fr;
    }
}

/* ============================ تفضيل تقليل الحركة ============================ */

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

    .xshop *,
    .xpdp-wrap * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}