/* ============================================================
   01. Fonts & Import
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');


/* ============================================================
   02. Global Variables
   ============================================================ */
body {
    /* Brand colors — Oud Al Assam palette */
    --base-color:             #AF231C; /* Pantone 2350 C — Primary Red */
    --base-color-hover:       #4E0000; /* Pantone 4975 C — Deep Burgundy */
    --base-color-shadow:      rgba(78, 0, 0, 0.15);
    --base-color-shadow-soft: rgba(78, 0, 0, 0.12);
    --dark-color:             #4E0000; /* Pantone 4975 C — Deep Burgundy */
    --accent-color:           #EFB661; /* Pantone 2009 C — Gold */
    --accent-color-shadow:    rgba(239, 182, 97, 0.20);
    --secound-color:          #F1EEDB; /* Pantone 468 C (40%) — Warm Cream */

    /* Text */
    --text-dark:  #2c2c2a;
    --text-muted: #888;

    /* Borders */
    --border-light: #e0ddd6;

    /* Fonts */
    --font-ar: 'Almarai', sans-serif;
    --font-en: Arial, sans-serif;

    /* Layout */
    --logo-height:   90px;
    --radius-card:   16px;
    --radius-sm:     6px;
    --radius-circle: 50%;
    --transition:    0.2s ease;

    /* Global background — drawn in CSS from the brand's star/diamond highlight-cover
       icons (traced to SVG) instead of a tiled raster image; zero HTTP requests */
    background-color: var(--secound-color) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27%23EFB661%27%20fill-opacity%3D%270.4%27%3E%3Cg%20transform%3D%22translate%2825.0%2025.0%29%20scale%281.105263157894737%29%20translate%28-19.0%20-19.0%29%22%3E%3Cpath%20d%3D%22M8%200h3v1h-3zM27%200h3v1h-3zM8%201h3v1h-3zM27%201h3v1h-3zM8%202h3v1h-3zM27%202h3v1h-3zM8%203h6v1h-6zM24%203h6v1h-6zM8%204h6v1h-6zM24%204h6v1h-6zM8%205h6v1h-6zM24%205h6v1h-6zM8%206h9v1h-9zM21%206h9v1h-9zM8%207h9v1h-9zM21%207h9v1h-9zM0%208h8v1h-8zM11%208h6v1h-6zM21%208h6v1h-6zM30%208h8v1h-8zM0%209h8v1h-8zM11%209h6v1h-6zM21%209h6v1h-6zM30%209h8v1h-8zM0%2010h8v1h-8zM11%2010h6v1h-6zM21%2010h6v1h-6zM30%2010h8v1h-8zM3%2011h8v1h-8zM14%2011h3v1h-3zM21%2011h3v1h-3zM27%2011h8v1h-8zM3%2012h8v1h-8zM14%2012h3v1h-3zM21%2012h3v1h-3zM27%2012h8v1h-8zM3%2013h8v1h-8zM14%2013h3v1h-3zM21%2013h3v1h-3zM27%2013h8v1h-8zM4%2014h8v1h-8zM14%2014h3v1h-3zM21%2014h3v1h-3zM26%2014h8v1h-8zM6%2015h8v1h-8zM24%2015h8v1h-8zM6%2016h8v1h-8zM24%2016h8v1h-8zM6%2017h8v1h-8zM24%2017h8v1h-8zM6%2020h8v1h-8zM24%2020h8v1h-8zM6%2021h8v1h-8zM24%2021h8v1h-8zM6%2022h8v1h-8zM24%2022h8v1h-8zM4%2023h8v1h-8zM14%2023h3v1h-3zM21%2023h3v1h-3zM26%2023h8v1h-8zM3%2024h8v1h-8zM14%2024h3v1h-3zM21%2024h3v1h-3zM27%2024h8v1h-8zM3%2025h8v1h-8zM14%2025h3v1h-3zM21%2025h3v1h-3zM27%2025h8v1h-8zM3%2026h8v1h-8zM14%2026h3v1h-3zM21%2026h3v1h-3zM27%2026h8v1h-8zM0%2027h8v1h-8zM11%2027h6v1h-6zM21%2027h6v1h-6zM30%2027h8v1h-8zM0%2028h8v1h-8zM11%2028h6v1h-6zM21%2028h6v1h-6zM30%2028h8v1h-8zM0%2029h8v1h-8zM11%2029h6v1h-6zM21%2029h6v1h-6zM30%2029h8v1h-8zM8%2030h9v1h-9zM21%2030h9v1h-9zM8%2031h9v1h-9zM21%2031h9v1h-9zM8%2032h6v1h-6zM24%2032h6v1h-6zM8%2033h6v1h-6zM24%2033h6v1h-6zM8%2034h6v1h-6zM24%2034h6v1h-6zM8%2035h3v1h-3zM27%2035h3v1h-3zM8%2036h3v1h-3zM27%2036h3v1h-3zM8%2037h3v1h-3zM27%2037h3v1h-3z%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2875.0%2025.0%29%20scale%282.5%29%20translate%28-8.0%20-8.0%29%22%3E%3Cpath%20d%3D%22M6%200h4v1h-4zM5%201h6v1h-6zM5%202h6v1h-6zM4%203h8v1h-8zM3%204h10v1h-10zM2%205h12v1h-12zM1%206h5v1h-5zM10%206h5v1h-5zM0%207h5v1h-5zM11%207h5v1h-5zM0%208h5v1h-5zM11%208h5v1h-5zM1%209h5v1h-5zM10%209h5v1h-5zM2%2010h12v1h-12zM3%2011h10v1h-10zM4%2012h8v1h-8zM5%2013h6v1h-6zM5%2014h6v1h-6zM6%2015h4v1h-4z%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2825.0%2075.0%29%20scale%282.5%29%20translate%28-8.0%20-8.0%29%22%3E%3Cpath%20d%3D%22M6%200h4v1h-4zM5%201h6v1h-6zM5%202h6v1h-6zM4%203h8v1h-8zM3%204h10v1h-10zM2%205h12v1h-12zM1%206h5v1h-5zM10%206h5v1h-5zM0%207h5v1h-5zM11%207h5v1h-5zM0%208h5v1h-5zM11%208h5v1h-5zM1%209h5v1h-5zM10%209h5v1h-5zM2%2010h12v1h-12zM3%2011h10v1h-10zM4%2012h8v1h-8zM5%2013h6v1h-6zM5%2014h6v1h-6zM6%2015h4v1h-4z%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2875.0%2075.0%29%20scale%281.105263157894737%29%20translate%28-19.0%20-19.0%29%22%3E%3Cpath%20d%3D%22M8%200h3v1h-3zM27%200h3v1h-3zM8%201h3v1h-3zM27%201h3v1h-3zM8%202h3v1h-3zM27%202h3v1h-3zM8%203h6v1h-6zM24%203h6v1h-6zM8%204h6v1h-6zM24%204h6v1h-6zM8%205h6v1h-6zM24%205h6v1h-6zM8%206h9v1h-9zM21%206h9v1h-9zM8%207h9v1h-9zM21%207h9v1h-9zM0%208h8v1h-8zM11%208h6v1h-6zM21%208h6v1h-6zM30%208h8v1h-8zM0%209h8v1h-8zM11%209h6v1h-6zM21%209h6v1h-6zM30%209h8v1h-8zM0%2010h8v1h-8zM11%2010h6v1h-6zM21%2010h6v1h-6zM30%2010h8v1h-8zM3%2011h8v1h-8zM14%2011h3v1h-3zM21%2011h3v1h-3zM27%2011h8v1h-8zM3%2012h8v1h-8zM14%2012h3v1h-3zM21%2012h3v1h-3zM27%2012h8v1h-8zM3%2013h8v1h-8zM14%2013h3v1h-3zM21%2013h3v1h-3zM27%2013h8v1h-8zM4%2014h8v1h-8zM14%2014h3v1h-3zM21%2014h3v1h-3zM26%2014h8v1h-8zM6%2015h8v1h-8zM24%2015h8v1h-8zM6%2016h8v1h-8zM24%2016h8v1h-8zM6%2017h8v1h-8zM24%2017h8v1h-8zM6%2020h8v1h-8zM24%2020h8v1h-8zM6%2021h8v1h-8zM24%2021h8v1h-8zM6%2022h8v1h-8zM24%2022h8v1h-8zM4%2023h8v1h-8zM14%2023h3v1h-3zM21%2023h3v1h-3zM26%2023h8v1h-8zM3%2024h8v1h-8zM14%2024h3v1h-3zM21%2024h3v1h-3zM27%2024h8v1h-8zM3%2025h8v1h-8zM14%2025h3v1h-3zM21%2025h3v1h-3zM27%2025h8v1h-8zM3%2026h8v1h-8zM14%2026h3v1h-3zM21%2026h3v1h-3zM27%2026h8v1h-8zM0%2027h8v1h-8zM11%2027h6v1h-6zM21%2027h6v1h-6zM30%2027h8v1h-8zM0%2028h8v1h-8zM11%2028h6v1h-6zM21%2028h6v1h-6zM30%2028h8v1h-8zM0%2029h8v1h-8zM11%2029h6v1h-6zM21%2029h6v1h-6zM30%2029h8v1h-8zM8%2030h9v1h-9zM21%2030h9v1h-9zM8%2031h9v1h-9zM21%2031h9v1h-9zM8%2032h6v1h-6zM24%2032h6v1h-6zM8%2033h6v1h-6zM24%2033h6v1h-6zM8%2034h6v1h-6zM24%2034h6v1h-6zM8%2035h3v1h-3zM27%2035h3v1h-3zM8%2036h3v1h-3zM27%2036h3v1h-3zM8%2037h3v1h-3zM27%2037h3v1h-3z%22/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 56px 56px;
}


/* ============================================================
   03. Typography & Font Fixes
   ============================================================ */
:lang(ar) { font-family: var(--font-ar); }
:lang(en) { font-family: var(--font-en); }

/* Prevent Arabic font from overriding Font Awesome */
.fas,
.far,
.fab,
.fa,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
}


/* ============================================================
   04. Utilities
   ============================================================ */
.hidden { display: none; }


/* ============================================================
   05. Header
   ============================================================ */
header .headerTop {
    background: linear-gradient(to left, var(--dark-color), var(--base-color));
}

.notification {
    background: var(--secound-color);
    color: var(--base-color);
}

.headerBottomLeft a.logo {
    max-width: none;
    display: block;
}

.headerBottomLeft a.logo img,
.footerLogo a.logoo img {
    height: var(--logo-height);
    width: auto;
    max-height: none;
}

.menuIcon svg path {
    stroke: var(--base-color) !important;
}

.module-cart .bi-cart {
    color: var(--base-color) !important;
}

.innerTop {
    position: relative;
    background: url(https://oudalasam.phenixorders.com/storage/phenixorders_oudalasam/modules/customimages/69fee0fa17740.webp) no-repeat bottom;
    background-size: 100% 200%;
}

.innerTop fieldset {
    background: none;
}

#content-search .page-header {
    background-image: url(https://oudalasam.phenixorders.com/storage/phenixorders_oudalasam/modules/customimages/69fee0fa17740.webp) !important;
}


/* ============================================================
   06. Banner / Hero Slider
   ============================================================ */
.banner-section {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.banner-main {
    width: 100%;
    position: relative;
}

.banner_slider .item {
    width: 100%;
}

.banner_slider .banner-card {
    display: block;
    width: 100%;
    height: 480px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
}

/* Owl — nav arrows */
.banner_slider .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
}

.banner_slider .owl-nav button {
    pointer-events: all;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--base-color) !important;
    font-size: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.banner_slider .owl-nav button:hover {
    background: var(--base-color) !important;
    color: #fff !important;
    transform: scale(1.08);
}

.banner_slider .owl-nav button i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 14px;
}

/* Owl — dots */
.banner_slider .owl-dots {
    position: absolute;
    bottom: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.banner_slider .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.5);
    transition: background var(--transition), width var(--transition);
}

.banner_slider .owl-dot.active span {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}

.banner_slider .owl-dot:hover span {
    background: rgba(255, 255, 255, 0.8);
}


/* ============================================================
   07. Home Category Cards
   ============================================================ */
.categories__list .devora-cat-card {
    border-radius: unset;
}

.devora-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #ffffff;
    border: 0.5px solid var(--secound-color);
    border-radius: var(--radius-card);
    padding: 16px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.devora-cat-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px var(--accent-color-shadow);
}

.cat-icon-wrap {
    width: 48%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: var(--radius-circle);
    overflow: hidden;
    border: 2px solid var(--secound-color);
    margin-bottom: 8%;
    display: block;
    padding: 0;
    flex-shrink: 0;
    transition: border-color var(--transition);
}

.devora-cat-card:hover .cat-icon-wrap {
    border-color: var(--accent-color);
}

.cat-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
}

.cat-name {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--text-dark);
    direction: rtl;
    transition: color var(--transition);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.devora-cat-card:hover .cat-name {
    color: var(--base-color);
}


/* ============================================================
   08. Main Category Nav — Pill Chips
   ============================================================ */

/* Hide heading */
.mainCategory h2 {
    display: none !important;
}

.mainCategory {
    padding: 1rem 0;
}

/* Hidden on all breakpoints — mobile pill nav no longer needed (2026-07-11)
@media (min-width: 769px) {
    .mainCategory {
        display: none !important;
    }
}
*/
.mainCategory {
    display: none !important;
}

/* Slick wrapper */
.main-list.slick-slider {
    display: flex !important;
    justify-content: center !important;
}

/* Pill link */
.main-list .slick-slide a,
.main-list li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1.5px solid var(--base-color) !important;
    border-radius: 999px !important;
    padding: 8px 16px 8px 12px !important;
    min-height: unset !important;
    margin: 0 !important;
    transition: background var(--transition), color var(--transition) !important;
}

.main-list .slick-slide a:hover,
.main-list li a:hover {
    background: rgba(175, 35, 28, 0.06) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Active pill */
.main-list .slick-slide a.active,
.main-list li a.active {
    background: var(--base-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Image circle */
.main-list .slick-slide .cat-image,
.main-list li .cat-image {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: none !important;
    margin-bottom: 0 !important;
    background: rgba(175, 35, 28, 0.1) !important;
    flex-shrink: 0 !important;
}

.main-list .slick-slide a.active .cat-image,
.main-list li a.active .cat-image {
    background: rgba(255, 255, 255, 0.2) !important;
}

.main-list .slick-slide .cat-image img,
.main-list li .cat-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Label */
.main-list .slick-slide .cat-name,
.main-list li .cat-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    color: var(--base-color) !important;
    direction: rtl !important;
    height: auto !important;
    white-space: nowrap !important;
}

.main-list .slick-slide a.active .cat-name,
.main-list li a.active .cat-name {
    color: #ffffff !important;
}

/* Static list fallback */
.main-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.main-list li {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
}

.mainCategory ul li a {
    border-radius: 999px !important;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .main-list .slick-slide .cat-image,
    .main-list li .cat-image {
        width: 28px !important;
        height: 28px !important;
    }

    .main-list .slick-slide .cat-name,
    .main-list li .cat-name {
        font-size: 12px !important;
    }

    .main-list .slick-slide a,
    .main-list li a {
        padding: 7px 12px 7px 10px !important;
    }
}


/* ============================================================
   09. Product Cards
   ============================================================ */
.product-card .card {
    border-radius: 12px;
    border: 0.5px solid var(--border-light);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.product-card .card:hover {
    border-color: #bbb;
}

.card-img-top {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: transparent;
    justify-content: center;
    align-items: center;
}

.card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body {
    padding: 10px 12px 12px !important;
}

.card-title.eq-height {
    height: auto !important;
    min-height: 37px; /* reserve space for 2 lines so name length can't shift card height */
    margin-bottom: 4px;
}

.card-title a.show-material-details {
    font-size: 13px !important;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-title a.show-material-details span {
    font-size: 11px !important;
    color: var(--text-muted);
}

/* Price */
.profuct-price {
    list-style: none;
    padding: 0 !important;
    margin-bottom: 8px !important;
}

.profuct-price .list-group-item {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.eq-height-prices {
    height: auto !important;
}

.price.after {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--base-color);
    display: flex;
    gap: 4px;
    align-items: baseline;
    flex-direction: row-reverse;
}

/* NEW badge */
.newProduct {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 0 !important;
    list-style: none;
}

.newProduct .d-flex {
    display: block !important;
}

.newItem {
    background: var(--accent-color) !important;
    color: var(--dark-color) !important;
    font-size: 10px !important;
    font-weight: 700;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: none !important;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* Actions */
.card-footer-actions {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.btn-add-options {
    width: 100% !important;
    background: var(--base-color) !important;
}

.btn-add-options.unavailable {
    width: 100% !important;
    background: #f2f0eb !important;
    border: 0.5px solid #ddd !important;
    border-radius: var(--radius-sm) !important;
    color: #999 !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    cursor: default;
    text-align: center;
    white-space: nowrap;
}

.btn-add-options.unavailable span {
    font-size: 11px;
}

.btn-quick-view {
    display: none !important;
}


/* ============================================================
   10. Slick Slider Controls
   ============================================================ */
.slick-dots li button {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: #ccc;
    border: none;
    font-size: 0;
    padding: 0;
}

.slick-dots li.slick-active button {
    background: var(--base-color);
}

.slick-prev,
.slick-next {
    font-size: 0;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 0.5px solid #ddd;
    border-radius: var(--radius-circle);
    box-shadow: none;
    z-index: 10;
}

.slick-prev:hover,
.slick-next:hover {
    background: var(--secound-color);
}


/* ============================================================
   11. Single Product Page
   ============================================================ */

/* Page header */
.page-header {
    background-size: cover;
    background-position: center;
    padding: 3rem 1rem;
    text-align: center;
    direction: rtl;
}

.page-header__title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Breadcrumb */
.page-header__breadcrumb {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.breadcrumb__item {
    color: var(--secound-color);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--transition);
}

.breadcrumb__item:hover {
    color: #fff;
}

.breadcrumb__divider {
    color: var(--secound-color);
    opacity: 0.6;
    font-size: 12px;
    transform: scaleX(-1);
    display: inline-block;
}

.breadcrumb__current {
    color: #fff;
    font-size: 13px;
}

/* Layout */
.single-product-section {
    padding: 2rem 0;
    direction: rtl;
}

.single-product-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f2ed;
}

.single-product-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

/* Info */
.detail-info {
    direction: rtl;
    text-align: right;
}

.title-detail {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.info-title {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 6px;
    direction: rtl;
}

/* Price */
.product-pricing {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.current-price-wrapper {
    color: var(--base-color);
    font-size: 22px;
    font-weight: 700;
    direction: rtl;
}

.old-price-wrapper {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 14px;
}

.discount-badge {
    background: var(--accent-color);
    color: var(--dark-color);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
}

/* Unit selector */
.units-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
    direction: rtl;
}

.unit-card { cursor: pointer; }

.unit-card input[type="radio"] { display: none; }

.unit-card__content {
    border: 0.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    text-align: center;
    min-width: 60px;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.unit-card__content:hover {
    border-color: var(--base-color);
    color: var(--base-color);
}

.unit-card input[type="radio"]:checked + .unit-card__content {
    background: var(--base-color);
    border-color: var(--base-color);
    color: #fff;
}

/* Notes */
.mynote {
    border: 0.5px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-ar) !important;
    font-size: 13px !important;
    resize: vertical;
    direction: rtl;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.mynote:focus {
    border-color: var(--base-color) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Quantity */
.quantity-btn {
    display: flex;
    align-items: center;
    border: 0.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.quantity-btn .minus,
.quantity-btn .plus {
    background: var(--secound-color);
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--base-color);
    font-size: 12px;
    transition: background var(--transition), color var(--transition);
}

.quantity-btn .minus:hover,
.quantity-btn .plus:hover {
    background: var(--base-color);
    color: #fff;
}

.quantity-btn .qty-val {
    border: none !important;
    text-align: center;
    width: 44px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    background: #fff;
}

/* Add to cart */
.button-add-to-cart {
    background: var(--base-color) !important;
    border-color: var(--base-color) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-ar) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition) !important;
}

.button-add-to-cart:hover {
    background: var(--base-color-hover) !important;
    border-color: var(--base-color-hover) !important;
    color: #fff !important;
}

/* Meta */
.product-info {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}

.product-info__key {
    margin: 0;
    color: var(--text-muted);
}

.product-info__value {
    color: var(--text-dark);
    font-weight: 500;
}


/* ============================================================
   12. Quick View Modal
   ============================================================ */
.modal-content {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

.modal-body { padding: 0; }

.close-modal {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--secound-color);
    border: none;
    border-radius: var(--radius-circle);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--base-color);
    cursor: pointer;
    z-index: 10;
    transition: background var(--transition), color var(--transition);
}

.close-modal:hover {
    background: var(--base-color);
    color: #fff;
}

.details img#cart-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.details fieldset {
    padding: 16px;
    border: none;
    background: var(--secound-color);
    text-align: right;
}

.product-modal-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color);
    margin-bottom: 4px;
}

.product-modal-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--base-color);
}

#panel-details { padding: 16px; }

.section { margin-bottom: 1.25rem; }

.section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 10px;
    text-align: right;
}

/* Unit options */
.product-modal-sizes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-modal-sizes .form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    direction: rtl;
    transition: border-color var(--transition), background var(--transition);
}

.product-modal-sizes .form-group.selected {
    border-color: var(--base-color);
    background: rgba(78, 0, 0, 0.04);
}

.product-modal-sizes .form-group:hover {
    border-color: var(--base-color);
}

.custom-control-input {
    accent-color: var(--base-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.custom-control-description {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    margin-right: 8px;
}

.product-price-catalog {
    font-size: 13px;
    font-weight: 600;
    color: var(--base-color);
}

.strike-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 12px;
}

.divnote textarea {
    width: 100%;
    border: 0.5px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-ar) !important;
    font-size: 13px !important;
    padding: 8px 10px;
    resize: vertical;
    direction: rtl;
    color: var(--text-dark);
    min-height: 80px;
}

.divnote textarea:focus {
    border-color: var(--base-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Modal footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 0.5px solid var(--border-light);
    background: #fff;
    direction: rtl;
}

.modal-footer .number {
    display: flex;
    align-items: center;
    border: 0.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.modal-footer .number .minus,
.modal-footer .number .plus {
    background: var(--secound-color);
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--base-color);
    font-size: 16px;
    font-weight: 700;
    user-select: none;
    transition: background var(--transition), color var(--transition);
}

.modal-footer .number .minus:hover,
.modal-footer .number .plus:hover {
    background: var(--base-color);
    color: #fff;
}

.modal-footer .number input {
    border: none !important;
    text-align: center;
    width: 44px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    background: #fff;
}

.modal-footer .add-to-cart,
.modal-footer .update-cart {
    flex: 1;
    background: var(--base-color) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-family: var(--font-ar) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    cursor: pointer;
    transition: background var(--transition) !important;
}

.modal-footer .add-to-cart:hover,
.modal-footer .update-cart:hover {
    background: var(--base-color-hover) !important;
}


/* ============================================================
   13. Side Cart
   ============================================================ */
.sideCart .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--border-light);
    direction: rtl;
}

.sideCart .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color);
}

.sideCart .yourOeder li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--border-light);
    direction: rtl;
    gap: 8px;
}

.sideCart .totalDetails {
    padding: 12px 16px;
    background: var(--secound-color);
    font-size: 13px;
    direction: rtl;
    text-align: right;
    border-top: 0.5px solid var(--border-light);
}

.sideCart .totalDetails > div {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: var(--text-dark);
}

.sideCart .total.order-total {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--base-color);
    direction: rtl;
    border-top: 1.5px solid rgba(78, 0, 0, 0.15);
}

/* Footer buttons */
.sideCart .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-top: 0.5px solid var(--border-light) !important;
    background: #fff !important;
    direction: rtl !important;
}

.sideCart .modal-footer .promo-subtotal-btn {
    flex: 1 !important;
    min-width: 0 !important;
}

.sideCart .modal-footer .all-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: transparent !important;
    border: 1.5px solid var(--base-color) !important;
    color: var(--base-color) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-ar) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background var(--transition), color var(--transition) !important;
}

.sideCart .modal-footer .all-btn:hover {
    background: var(--base-color) !important;
    color: #fff !important;
}

.sideCart .modal-footer > button {
    flex: 1 !important;
    min-width: 0 !important;
    background: var(--base-color) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-family: var(--font-ar) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background var(--transition) !important;
}

.sideCart .modal-footer > button:hover {
    background: var(--base-color-hover) !important;
}


/* ============================================================
   14. Checkout & Order Success
   ============================================================ */
.page-checkout .innerContent aside nav h2 {
    background-color: var(--base-color);
}

.page-checkout .innerContent main form button {
    background-color: var(--base-color);
}

.page-checkout-success {
    padding: 2rem 1rem;
    direction: rtl;
}

.page-checkout-success .box {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    justify-content: center !important;
    background: #fff;
    border-radius: 20px;
    border: 0.5px solid var(--border-light);
    padding: 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.page-checkout-success .box > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    flex: 1;
    min-width: 220px;
}

.page-checkout-success .box > div:first-child img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.page-checkout-success .box > div:first-child .text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.8;
}

.page-myOrder {
    flex: 2;
    min-width: 300px;
}

.myOrderInfo .head {
    font-size: 20px;
    font-weight: 700;
    color: var(--base-color);
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 1rem;
    border-bottom: 1.5px solid var(--secound-color);
}

/* Order table */
.cart-table-data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 1.5rem;
    direction: rtl;
}

.cart-table-data thead tr {
    background: var(--secound-color);
}

.cart-table-data thead th {
    padding: 10px 12px;
    font-weight: 600;
    color: var(--base-color);
    text-align: right;
    border: none;
}

.cart-table-data tbody tr {
    border-bottom: 0.5px solid var(--border-light);
    transition: background var(--transition);
}

.cart-table-data tbody tr:hover {
    background: rgba(241, 234, 218, 0.3);
}

.cart-table-data tbody td {
    padding: 10px 12px;
    color: var(--text-dark);
    text-align: right;
    vertical-align: middle;
}

.cart-table-data .totalPrice .product-price-catalog {
    font-weight: 700;
    color: var(--base-color);
}

/* Price summary */
.text-start {
    background: var(--secound-color);
    border-radius: 10px;
    padding: 14px 16px !important;
    margin-bottom: 1rem;
    direction: rtl;
    text-align: right !important;
}

.text-start .product-price-catalog {
    font-size: 13px !important;
    color: var(--text-dark);
    font-weight: 500;
    display: flex !important;
    justify-content: space-between;
    padding: 4px 0 !important;
    border-bottom: 0.5px solid rgba(78, 0, 0, 0.08);
}

.text-start .product-price-catalog:last-child {
    border-bottom: none;
    font-size: 15px !important;
    font-weight: 700;
    color: var(--base-color);
    margin-top: 4px;
    padding-top: 8px !important;
    border-top: 1.5px solid rgba(78, 0, 0, 0.15);
}

.btn-go-home {
    display: block !important;
    width: 100%;
    text-align: center;
    background: var(--base-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 20px !important;
    font-family: var(--font-ar) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none;
    margin-top: 1rem !important;
    transition: background var(--transition) !important;
}

.btn-go-home:hover {
    background: var(--base-color-hover) !important;
    color: #fff !important;
}


/* ============================================================
   15. Footer
   ============================================================ */
footer {
    background: var(--dark-color);
}

footer::before {
    /* Drawn in CSS from the same divider artwork (triangle + twin-petal motif on a
       baseline), traced to SVG in --dark-color — zero HTTP requests */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20169%20208%27%20fill%3D%27%234E0000%27%3E%3Cg%20transform%3D%22translate%280%2081%29%20scale%282.375%202.5%29%22%3E%3Cpath%20d%3D%22M5%201h2v1h-2zM17%201h2v1h-2zM5%202h2v1h-2zM17%202h2v1h-2zM5%203h4v1h-4zM15%203h4v1h-4zM5%204h4v1h-4zM15%204h4v1h-4zM5%205h6v1h-6zM13%205h6v1h-6zM0%206h5v1h-5zM7%206h4v1h-4zM13%206h4v1h-4zM19%206h5v1h-5zM0%207h5v1h-5zM7%207h4v1h-4zM13%207h4v1h-4zM19%207h5v1h-5zM2%208h5v1h-5zM9%208h2v1h-2zM13%208h2v1h-2zM17%208h5v1h-5zM2%209h5v1h-5zM9%209h2v1h-2zM13%209h2v1h-2zM17%209h5v1h-5zM4%2010h5v1h-5zM15%2010h5v1h-5zM4%2011h5v1h-5zM15%2011h5v1h-5z%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2886%2081%29%20scale%282.25%202.5%29%22%3E%3Cpath%20d%3D%22M11%200h2v1h-2zM11%201h2v1h-2zM9%202h6v1h-6zM9%203h6v1h-6zM7%204h10v1h-10zM7%205h10v1h-10zM5%206h14v1h-14zM5%207h14v1h-14zM3%208h18v1h-18zM3%209h18v1h-18zM0%2010h10v1h-10zM14%2010h10v1h-10zM0%2011h9v1h-9zM15%2011h9v1h-9z%22/%3E%3C/g%3E%3Crect%20x%3D%220%22%20y%3D%22122%22%20width%3D%22169%22%20height%3D%225%22/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: auto 100%;
    opacity: 0.85;
}

/* Light text on dark footer */
footer p,
footer span,
footer li,
footer label,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: var(--secound-color) !important;
}

footer a {
    color: var(--secound-color) !important;
    transition: color var(--transition);
}

footer a:hover {
    color: var(--accent-color) !important;
    text-decoration: none;
}

/* Subtle dividers inside footer */
footer hr,
footer .border,
footer [class*="border"] {
    border-color: rgba(241, 238, 219, 0.12) !important;
}

/* Logo stays visible on dark */
.footerLogo a.logoo img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* Footer contact strip — red, keep as-is */
footer .footer-contact {
    background-color: var(--base-color);
    color: white;
}

footer .footer-contact .footer-contact__content h4 {
    color: var(--secound-color);
}

footer .footer-contact .footer-contact__content span {
    color: var(--secound-color);
}

footer .footer-contact .icon svg path {
    fill: var(--base-color) !important;
}

footer .footer-contact .title {
    color: var(--base-color) !important;
}


/* ============================================================
   16. Contact Page
   ============================================================ */
.page-contactUs .innerContent aside nav li .icon {
    background-color: var(--base-color) !important;
}

.page-contactUs .innerContent aside nav li .group .title {
    color: var(--base-color) !important;
}

.page-contactUs .innerContent aside nav.socailMedia h2 span {
    color: var(--base-color) !important;
}

.page-contactUs .innerContent aside nav.socailMedia ul li a {
    background: var(--base-color) !important;
}

.page-contactUs .innerContent main form h2 span {
    color: var(--base-color) !important;
}

.page-contactUs .innerContent main form button {
    background: var(--base-color) !important;
}


/* ============================================================
   17. Menu Page — Sidebar & Filters
   ============================================================ */
.content .topContent .veiws .active path,
.content .topContent .veiws path {
    fill: var(--base-color);
}

.page-menu3.category #collapseTwo button {
    background-color: var(--base-color);
}

.page-menu3.category #collapseTwo button:hover {
    background-color: var(--secound-color);
    color: black;
}

.slider-container .price-slider {
    background: var(--base-color);
}

/* Active category link in sidebar */
.page-menu3 .card-body ul li a[style*="color"] {
    color: var(--base-color) !important;
}

/* Breathing room above the category section — .mainCategory used to provide
   this via its own padding, but it's now hidden (see section 08) */
.page-menu.page-content .innerContent {
    padding-top: 1.5rem;
}


/* ============================================================
   18. Responsive
   ============================================================ */
@media (max-width: 768px) {
    .banner_slider .banner-card {
        height: 220px;
    }

    .banner_slider .owl-nav button {
        width: 36px;
        height: 36px;
        font-size: 13px !important;
    }

    .page-checkout-success .box {
        flex-direction: column;
        padding: 1.5rem;
    }

    .page-myOrder {
        width: 100%;
    }

    .cart-table-data {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .banner_slider .banner-card {
        height: 160px;
    }
}


/* ============================================================
   19. Brand Polish — Section Headings & Accents
   ============================================================ */

/* Gold underline accent on homepage/menu section headings */
.home-section-title,
.section-head,
.products-section > h2,
.products-section > h3,
.home-products .title,
.sec-title,
.sectionTitle {
    position: relative;
    padding-bottom: 10px;
}

.home-section-title::after,
.section-head::after,
.products-section > h2::after,
.products-section > h3::after,
.home-products .title::after,
.sec-title::after,
.sectionTitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

/* Gold accent on active category nav icon wrap */
.main-list .slick-slide a.active .cat-image,
.main-list li a.active .cat-image {
    background: rgba(239, 182, 97, 0.25) !important;
}

/* Gold focus ring on inputs */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--accent-color-shadow) !important;
}

/* Gold highlight on text selection */
::selection {
    background: var(--accent-color);
    color: var(--dark-color);
}

/* Subtle gold top-border on product card hover */
.product-card .card:hover {
    border-color: var(--accent-color);
}


/* ============================================================
   20. Brand Dividers — Pattern 2A
   ============================================================ */
.brand-divider {
    width: 100%;
    display: block;
    min-height: 54px;
    background-image: url(https://oudalasam.phenixorders.com/storage/phenixorders_oudalasam/modules/customimages/69ff4ea63699b.webp);
    background-repeat: repeat-x;
    background-size: auto 54px;
    background-position: center;
    opacity: 0.65;
    pointer-events: none;
}