/* ============================================================
   S.T ACCESSORIES
   CUSTOMER RESPONSIVE — PREMIUM FINAL
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}
@supports (overflow: clip) {
    html { overflow-x: clip !important; }
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}
@supports (overflow: clip) {
    body { overflow-x: clip !important; }
}

img,
video,
iframe {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}


/* ============================================================
   GLOBAL
   ============================================================ */

@media (max-width: 767px) {

    :root {
        --mobile-space: 16px;
        --mobile-radius: 12px;
        --lux-brown: #332318;
        --lux-gold: #ad8657;
        --cream: #f8f4eb;
    }

    body {
        overflow-x: hidden !important;
    }

    main {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    section {
        max-width: 100%;
    }

    .container,
    .container-fluid,
    .page-container,
    .main-container,
    .content-container {
        width: calc(100% - 32px) !important;
        max-width: 1200px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


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

@media (max-width: 767px) {

    header {
        width: 100% !important;
        max-width: 100% !important;
        z-index: 3000 !important;
    }

    .header-row-top {
        width: 100%;
        min-height: 62px !important;
        height: 62px !important;
        padding: 0 12px !important;

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

        gap: 7px;
    }

    .logo {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
    }

    .logo img {
        width: auto !important;
        height: 42px !important;
        max-width: 110px;
        object-fit: contain;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 6px !important;
        min-width: 0;
    }

    .header-actions a,
    .header-actions button {
        width: 34px;
        height: 34px;
        min-width: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hamburger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;

        border-radius: 50% !important;

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


/* ============================================================
   TOP BAR
   ============================================================ */

@media (max-width: 767px) {

    .top-bar {
        width: 100%;
        min-height: 36px;
        padding: 7px 12px !important;
    }

    .top-bar-viewport {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .tb-slide {
        width: 100%;
        max-width: 100%;
        font-size: 11px !important;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


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

@media (max-width: 767px) {

    .hero {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;

        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .slide {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .slide.active {
        position: relative !important;
    }

    .slide-img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;

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

        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-content {
        display: none !important;
    }

    .arrow {
        display: none !important;
    }

    .dots {
        bottom: 8px !important;
        z-index: 20 !important;
    }
}


/* ============================================================
   FEATURES
   ============================================================ */

@media (max-width: 767px) {

    .features {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .feature-item {
        min-height: 78px;

        padding: 12px 18px !important;

        display: flex !important;
        align-items: center;
        gap: 13px;

        border-left: 0 !important;
    }

    .feature-item i,
    .feature-item svg {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;

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

        border-radius: 50%;
        background: #f1ede5;
    }

    .feature-item h3,
    .feature-item strong {
        margin: 0 0 3px;
        font-size: 16px !important;
        line-height: 1.4;
    }

    .feature-item p,
    .feature-item span {
        margin: 0;
        font-size: 12px !important;
        line-height: 1.7;
    }
}


/* ============================================================
   SECTION HEADERS
   ============================================================ */

@media (max-width: 767px) {

    .section-header,
    .ll-section-header,
    .rev-head {
        width: 100%;
        padding-inline: 8px !important;
        margin-bottom: 25px !important;

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

        text-align: center;
    }

    .section-header h2,
    .ll-section-header h2,
    .rev-head h2 {
        margin: 0;
        font-size: clamp(23px, 7vw, 31px) !important;
        line-height: 1.4;
    }

    .section-header p,
    .ll-section-header p,
    .rev-head p {
        max-width: 330px;
        margin: 8px auto 0;
        font-size: 13px;
        line-height: 1.8;
    }
}


/* ============================================================
   DYNAMIC PRODUCTS
   ============================================================ */

@media (max-width: 767px) {

    #dynamicSections {
        width: 100%;
        padding: 0 16px !important;
        overflow: hidden;
    }

    #dynamicSections section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    #dynamicSections section > div:nth-child(2) {

        width: 100% !important;

        display: grid !important;

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

        gap: 12px !important;

        transform: none !important;
        overflow: visible !important;
    }


    /* -----------------------------------------
       ONE PRODUCT
       ----------------------------------------- */

    #dynamicSections section > div:nth-child(2):has(> :only-child) {

        grid-template-columns:
            minmax(220px, 270px) !important;

        justify-content: center !important;
    }

    #dynamicSections section > div:nth-child(2) > :only-child {

        width: 100% !important;
        max-width: 270px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ============================================================
   PRODUCT GRIDS
   ============================================================ */

@media (max-width: 767px) {

    .products-grid,
    .product-grid,
    .products-list,
    .products-container,
    #productsGrid,
    #productGrid {

        width: 100% !important;

        display: grid !important;

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

        gap: 12px !important;

        align-items: start;

        overflow: visible !important;
    }


    /* ONE PRODUCT */

    .products-grid:has(> :only-child),
    .product-grid:has(> :only-child),
    .products-list:has(> :only-child),
    .products-container:has(> :only-child),
    #productsGrid:has(> :only-child),
    #productGrid:has(> :only-child) {

        grid-template-columns:
            minmax(220px, 270px) !important;

        justify-content: center !important;
    }


    .products-grid > :only-child,
    .product-grid > :only-child,
    .products-list > :only-child,
    .products-container > :only-child,
    #productsGrid > :only-child,
    #productGrid > :only-child {

        width: 100% !important;
        max-width: 270px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ============================================================
   PRODUCT CARDS
   ============================================================ */

@media (max-width: 767px) {

    .na-card,
    .llc,
    .product-card,
    .product-item,
    .product-box {

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        border-radius: 12px !important;

        overflow: hidden !important;

        background: #fff;
    }


    .na-img-wrap,
    .llc-img,
    .product-image,
    .product-card-image {

        width: 100%;
        overflow: hidden;
    }


    .na-card img,
    .llc img,
    .product-card img,
    .product-item img {

        display: block;

        width: 100%;
        max-width: 100%;

        height: auto;
    }


    .na-info,
    .llc-info {

        min-width: 0;
        padding: 12px !important;
    }


    .na-name,
    .llc-name,
    .product-name {

        font-size: 14px !important;
        line-height: 1.5 !important;

        overflow-wrap: anywhere;
    }


    .na-price,
    .llc-price,
    .product-price {

        font-size: 15px !important;
    }


    .na-wish,
    .na-quickview {

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

        bottom: 8px !important;

        border-radius: 50%;
    }


    .na-wish {
        right: 8px !important;
    }

    .na-quickview {
        left: 8px !important;
    }
}


/* ============================================================
   PRODUCT SLIDERS — MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .na-slider-wrapper,
    .ll-slider-wrapper,
    .promo-slider-wrapper {

        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    .na-track-outer,
    .ll-track-outer,
    .promo-track-outer {

        width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .na-track-outer::-webkit-scrollbar,
    .ll-track-outer::-webkit-scrollbar,
    .promo-track-outer::-webkit-scrollbar {
        display: none;
    }


    .na-arrow,
    .ll-arrow,
    .promo-arrow,
    .cat-arrow {
        display: none !important;
    }


    .na-track,
    .ll-track,
    .promo-container {

        transform: none !important;

        transition: none !important;
    }


    .na-card {

        width: min(68vw, 250px) !important;

        flex: 0 0 auto;
    }


    .llc {

        width: min(58vw, 220px) !important;

        flex: 0 0 auto;
    }
}


/* ============================================================
   LUXURY PROMO
   ============================================================ */

@media (max-width: 767px) {

    .lux-promo,
    .ll {

        padding:
            45px
            16px
            50px !important;

        overflow: hidden;
    }


    .lux-promo-wrap {

        width: 100%;
        max-width: 100%;
    }


    .lux-head {

        margin-bottom: 28px;
    }


    .lux-head h2,
    .ll-section-header h2 {

        font-size:
            clamp(26px, 7vw, 34px) !important;

        line-height: 1.4;
    }


    .lux-head p {

        max-width: 330px;

        margin:
            10px auto 0;

        font-size: 13px;

        line-height: 1.8;
    }


    .lux-frame {

        width: 100%;
        max-width: 100%;

        padding: 6px;

        border-radius: 18px;
    }


    .lux-img {

        border-radius: 13px;
    }


    .lux-corner {

        display: none;
    }


    .lux-cta {

        padding:
            13px 28px;

        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .cd-items {

        padding:
            10px 14px !important;
    }


    .cd-head,
    .cd-ship-bar,
    .cd-foot {

        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    .cd-qty-btn {

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


    .cd-qty-val {

        width: 38px !important;
    }


    .cd-remove-btn {

        width: 34px;
        height: 34px;
    }
}


/* ============================================================
   QUICK VIEW
   ============================================================ */

@media (max-width: 480px) {

    .qv-modal {

        width:
            calc(100vw - 24px) !important;

        max-width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100dvh - 24px) !important;

        overflow-y: auto;

        border-radius: 16px !important;
    }


    .qv-image {

        width: 100%;

        min-height: 230px;

        height: 230px;
    }


    .qv-close {

        width: 40px;
        height: 40px;
    }
}


/* ============================================================
   SEARCH
   ============================================================ */

@media (max-width: 767px) {

    .search-input-wrap input,
    .footer-newsletter input {

        font-size: 16px !important;
    }
}


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

@media (max-width: 480px) {

    #toast-msg {

        left: 12px !important;
        right: 12px !important;

        width: auto !important;

        max-width: none !important;

        bottom:
            calc(75px + env(safe-area-inset-bottom))
            !important;

        border-radius: 12px !important;

        text-align: center;
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

@media (max-width: 767px) {

    .site-footer {

        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }


    .footer-bottom {

        padding-bottom:
            calc(24px + env(safe-area-inset-bottom))
            !important;
    }
}


/* ============================================================
   FLOATING BUTTONS
   ============================================================ */

@media (max-width: 767px) {

    .wa-float,
    .btt-btn {

        z-index: 2500 !important;
    }
}


/* ============================================================
   TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .na-card:hover,
    .llc:hover,
    .category-card:hover,
    .promo-card:hover {

        transform: none !important;
    }


    .na-card:hover img,
    .llc:hover img,
    .category-card:hover img {

        transform: none !important;
    }
}


/* ============================================================
   SMALL PHONES 360px
   ============================================================ */

@media (max-width: 380px) {

    :root {
        --mobile-space: 12px;
    }


    .header-row-top {

        padding-inline:
            9px !important;
    }


    .logo img {

        height: 38px !important;
        max-width: 95px;
    }


    #dynamicSections {

        padding-inline:
            12px !important;
    }


    #dynamicSections section > div:nth-child(2) {

        gap: 9px !important;
    }


    .products-grid,
    .product-grid,
    .products-list,
    .products-container,
    #productsGrid,
    #productGrid {

        gap: 9px !important;
    }


    .na-name,
    .llc-name,
    .product-name {

        font-size: 13px !important;
    }
}


/* ============================================================
   TABLETS
   ============================================================ */

@media (min-width: 768px) and (max-width: 991px) {

    .products-grid,
    .product-grid,
    .products-list,
    .products-container,
    #productsGrid,
    #productGrid {

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

        gap: 18px;
    }


    .header-row-top {

        padding-inline:
            20px !important;
    }
}


/* ============================================================
   NO HORIZONTAL SCROLL — FINAL
   ============================================================ */

@media (max-width: 991px) {

    body,
    main,
    section,
    header,
    footer {

        max-width: 100vw;
    }


    .container,
    .row,
    .grid,
    .flex-row {

        min-width: 0;
        max-width: 100%;
    }


    iframe,
    video,
    canvas {

        max-width: 100%;
    }
}


/* ============================================================
   S.T ACCESSORIES
   FINAL CUSTOMER RESPONSIVE
   2026-09-23
   ============================================================ */

:root {
    --cr-max: 1240px;
    --cr-side: clamp(14px, 4vw, 42px);
    --cr-radius: 16px;
    --cr-shadow: 0 10px 35px rgba(42, 27, 18, .08);
}

/* ============================================================
   1. GLOBAL
   ============================================================ */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    touch-action: manipulation;
}

.container,
.page-container,
.products-container,
.categories-container,
.account-container,
.checkout-container,
.cart-container {
    width: min(var(--cr-max), calc(100% - (var(--cr-side) * 2)));
    margin-inline: auto;
}


/* ============================================================
   2. HEADER
   ============================================================ */

@media (max-width: 991px) {

    header {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .header-row-top {
        min-height: 64px;
        height: 64px !important;
        padding-inline: 12px !important;
        gap: 8px !important;
    }

    .logo {
        flex: 0 0 auto;
    }

    .logo img {
        width: auto !important;
        height: 43px !important;
        max-width: 130px;
        object-fit: contain;
    }

    .header-actions {
        gap: 5px !important;
    }

    .header-actions button,
    .header-actions a,
    .hamburger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .top-bar-viewport {
        min-width: 0;
    }

    .top-bar {
        min-height: 34px;
        font-size: 11px !important;
        padding-inline: 10px !important;
    }
}


/* ============================================================
   3. MOBILE NAV
   ============================================================ */

@media (max-width: 991px) {

    nav {
        width: min(330px, 86vw) !important;
        max-width: 86vw !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    nav ul,
    nav .menu,
    nav .nav-list {
        width: 100%;
    }

    nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 10px 18px;
        font-size: 15px;
    }

    .nav-overlay {
        width: 100vw !important;
        height: 100dvh !important;
    }
}


/* ============================================================
   4. HERO
   ============================================================ */

.hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.slide {
    max-width: 100% !important;
    overflow: hidden !important;
}

.slide-img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 767px) {

    .hero {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .slide.active {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    .slide:not(.active) {
        position: absolute !important;
        inset: 0 !important;
    }

    .slide-img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }
}


/* ============================================================
   5. FEATURES — المميزات
   ============================================================ */

.features {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {

    .features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .feature-item {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 92px;
        padding: 18px 10px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .feature-item .feature-icon {
        flex: 0 0 auto;
    }

    .feature-item h3,
    .feature-item h4 {
        font-size: 15px !important;
        line-height: 1.5;
        margin: 0;
    }

    .feature-item p {
        font-size: 11px !important;
        line-height: 1.6;
        margin-top: 3px;
    }
}

@media (max-width: 420px) {

    .features {
        grid-template-columns: 1fr !important;
    }

    .feature-item {
        min-height: 78px;
        padding: 13px 18px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e5dacb !important;
    }

    .feature-item:last-child {
        border-bottom: 0 !important;
    }
}


/* ============================================================
   6. SECTIONS
   ============================================================ */

section {
    max-width: 100%;
    overflow: hidden;
}

.section-header,
.ll-section-header,
.rev-head {
    max-width: 100%;
}

@media (max-width: 767px) {

    section {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .section-header {
        margin-bottom: 24px !important;
    }

    .section-header h2,
    .ll-section-header h2,
    .rev-head h2 {
        font-size: clamp(25px, 7vw, 32px) !important;
        line-height: 1.35;
    }

    .section-header p,
    .ll-section-header p,
    .rev-head p {
        font-size: 12px !important;
        line-height: 1.8;
    }
}


/* ============================================================
   7. NEW PRODUCTS — لو منتج واحد يظهر في المنتصف
   ============================================================ */

/* الحاوية */
.na-track {
    display: flex;
    flex-wrap: nowrap;
}

/* لو فيه كارت واحد فقط */
.na-track:has(.na-card:only-child) {
    justify-content: center !important;
    transform: none !important;
}

/* الكارت الواحد */
.na-card:only-child {
    margin-inline: auto !important;
}

@media (max-width: 768px) {

    .na-track {
        width: 100% !important;
        justify-content: flex-start;
    }

    .na-track:has(.na-card:only-child) {
        justify-content: center !important;
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .na-card {
        width: min(78vw, 290px) !important;
        max-width: 290px !important;
        flex: 0 0 auto !important;
    }

    .na-card:only-child {
        margin-inline: auto !important;
    }
}

@media (max-width: 420px) {

    .na-card {
        width: min(82vw, 285px) !important;
        max-width: 285px !important;
    }
}


/* ============================================================
   8. PRODUCT CARD
   ============================================================ */

.na-card,
.llc,
.category-card,
.promo-card {
    max-width: 100%;
}

.na-img-wrap {
    width: 100%;
    overflow: hidden;
}

.na-img-wrap img {
    display: block;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {

    .na-card {
        border-radius: 0 !important;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(42, 27, 18, .08);
    }

    .na-info {
        padding: 14px 10px 13px !important;
    }

    .na-name {
        font-size: 15px !important;
        line-height: 1.5;
    }

    .na-price {
        font-size: 15px !important;
    }

    .na-old-price {
        font-size: 12px !important;
    }

    .na-cart-btn {
        min-height: 44px !important;
        width: 100% !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    .na-wish,
    .na-quickview {
        width: 38px !important;
        height: 38px !important;
        bottom: 9px !important;
    }
}


/* ============================================================
   9. BEST SELLERS
   ============================================================ */

@media (max-width: 767px) {

    .ll {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .ll-track-outer {
        overflow: visible !important;
    }

    .ll-track {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        transform: none !important;
    }

    .llc {
        width: 100% !important;
        flex: none !important;
    }

    .llc-info {
        padding: 13px 11px 15px !important;
    }

    .llc-name {
        font-size: 14px !important;
    }

    .llc-price {
        font-size: 16px !important;
    }
}


/* ============================================================
   10. CATEGORIES
   ============================================================ */

@media (max-width: 767px) {

    #catTrack {
        display: flex !important;
        gap: 12px !important;
        width: max-content !important;
    }

    #catTrack .category-card {
        width: min(43vw, 170px) !important;
        min-width: min(43vw, 170px) !important;
    }

    .category-card {
        border-radius: 14px !important;
    }

    .category-card img {
        max-width: 100%;
    }
}

@media (max-width: 380px) {

    #catTrack .category-card {
        width: 46vw !important;
        min-width: 46vw !important;
    }
}


/* ============================================================
   11. PROMO BANNERS
   ============================================================ */

@media (max-width: 767px) {

    .promo-container {
        gap: 12px !important;
        padding-inline: 4px;
    }

    .promo-card {
        width: min(88vw, 390px) !important;
        min-width: min(88vw, 390px) !important;
        border-radius: 15px !important;
        overflow: hidden;
    }
}


/* ============================================================
   12. PRODUCT DETAILS
   ============================================================ */

@media (max-width: 767px) {

    .product-details,
    .product-page,
    .product-detail-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .product-gallery,
    .product-info {
        width: 100% !important;
        max-width: 100% !important;
    }

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

    .product-title {
        font-size: 24px !important;
        line-height: 1.4;
    }

    .product-price {
        font-size: 21px !important;
    }

    .product-actions,
    .product-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .product-actions button,
    .product-buttons button,
    .product-actions a,
    .product-buttons a {
        width: 100% !important;
        min-height: 48px !important;
    }
}


/* ============================================================
   13. PRODUCTS LIST
   ============================================================ */

@media (max-width: 767px) {

    .products-grid,
    .product-grid,
    .products-container .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .products-grid > *,
    .product-grid > * {
        min-width: 0 !important;
    }
}

@media (max-width: 360px) {

    .products-grid,
    .product-grid,
    .products-container .grid {
        gap: 8px !important;
    }
}


/* ============================================================
   14. CART
   ============================================================ */

@media (max-width: 767px) {

    .cart-container,
    .cart-page {
        width: calc(100% - 20px) !important;
        margin-inline: auto !important;
    }

    .cart-item {
        display: grid !important;
        grid-template-columns: 76px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center;
        padding: 12px 0 !important;
    }

    .cart-item img {
        width: 76px !important;
        height: 92px !important;
        object-fit: cover;
        border-radius: 8px;
    }

    .cart-item-name {
        font-size: 13px !important;
        line-height: 1.5;
    }

    .cart-item-price {
        font-size: 13px !important;
    }

    .cart-summary {
        width: 100% !important;
    }

    .cart-summary button,
    .checkout-btn {
        width: 100% !important;
        min-height: 48px !important;
    }
}


/* ============================================================
   15. CHECKOUT
   ============================================================ */

@media (max-width: 767px) {

    .checkout-container {
        width: calc(100% - 20px) !important;
    }

    .checkout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .checkout-form,
    .checkout-summary {
        width: 100% !important;
        max-width: 100% !important;
    }

    input,
    select,
    textarea {
        max-width: 100%;
    }

    input,
    select {
        min-height: 46px;
    }

    textarea {
        min-height: 110px;
    }
}


/* ============================================================
   16. ACCOUNT PAGES
   ============================================================ */

@media (max-width: 767px) {

    .account-container {
        width: calc(100% - 20px) !important;
    }

    .account-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .account-sidebar,
    .account-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .account-sidebar a {
        min-height: 46px;
        display: flex;
        align-items: center;
    }

    .order-card,
    .conversation-card {
        width: 100% !important;
        overflow: hidden;
    }
}


/* ============================================================
   17. CHAT
   ============================================================ */

@media (max-width: 767px) {

    .chat-container,
    .conversation-container {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - 110px);
    }

    .chat-messages {
        padding: 12px !important;
    }

    .message {
        max-width: 84% !important;
    }

    .chat-input-area {
        padding: 8px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }

    .chat-input-area input {
        min-height: 44px;
        font-size: 16px !important;
    }
}


/* ============================================================
   18. QUICK VIEW / MODALS
   ============================================================ */

@media (max-width: 767px) {

    .qv-modal {
        width: calc(100vw - 20px) !important;
        max-width: 520px !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        border-radius: 18px !important;
    }

    .qv-image {
        width: 100% !important;
        min-height: 240px !important;
        height: auto !important;
    }

    .qv-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .qv-content {
        padding: 16px !important;
    }
}


/* ============================================================
   19. SEARCH
   ============================================================ */

@media (max-width: 767px) {

    .search-overlay,
    .search-modal {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .search-input-wrap {
        width: calc(100% - 24px) !important;
        margin-inline: auto !important;
    }

    .search-input-wrap input {
        width: 100% !important;
        min-height: 48px;
        font-size: 16px !important;
    }
}


/* ============================================================
   20. FOOTER
   ============================================================ */

@media (max-width: 767px) {

    .site-footer {
        width: 100% !important;
        overflow: hidden;
    }

    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer-column {
        width: 100% !important;
    }

    .footer-newsletter {
        width: 100% !important;
    }

    .footer-newsletter form {
        display: flex !important;
        gap: 7px !important;
    }

    .footer-newsletter input {
        min-width: 0 !important;
        width: 100% !important;
    }
}


/* ============================================================
   21. FLOATING BUTTONS
   ============================================================ */

@media (max-width: 767px) {

    .wa-float {
        width: 50px !important;
        height: 50px !important;
        right: 12px !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }

    .btt-btn {
        width: 42px !important;
        height: 42px !important;
        left: 12px !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}


/* ============================================================
   22. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px) {

    .container,
    .page-container,
    .products-container {
        width: calc(100% - 36px);
    }

    .products-grid,
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .na-card {
        width: 270px !important;
    }
}


/* ============================================================
   23. SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

    .header-row-top {
        padding-inline: 8px !important;
        gap: 4px !important;
    }

    .logo img {
        max-width: 105px;
        height: 38px !important;
    }

    .header-actions button,
    .header-actions a,
    .hamburger {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }

    .top-bar {
        font-size: 10px !important;
    }

    .section-header h2,
    .ll-section-header h2 {
        font-size: 24px !important;
    }
}


/* ============================================================
   24. IOS / SAFE AREA
   ============================================================ */

@supports (padding: max(0px)) {

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .site-footer {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}


/* ============================================================
   25. ACCESSIBILITY / TOUCH
   ============================================================ */

@media (hover: none) {

    .na-card:hover,
    .llc:hover,
    .promo-card:hover,
    .category-card:hover {
        transform: none !important;
    }

    .lux-frame:hover {
        transform: none !important;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   26. FINAL OVERFLOW GUARD
   ============================================================ */

@media (max-width: 767px) {

    .row,
    .flex-row,
    .grid,
    [class*="grid"],
    [class*="container"] {
        max-width: 100%;
        min-width: 0;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
    }

    iframe {
        width: 100%;
        max-width: 100%;
    }
}


/* ============================================================
   27. ONE PRODUCT CENTER — FINAL
   ============================================================ */

@media (max-width: 767px) {

    .na-track:has(.na-card:only-child) {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        width: 100% !important;
        transform: none !important;
        margin-inline: auto !important;
    }

    .na-track:has(.na-card:only-child) .na-card {
        flex: 0 0 auto !important;
        margin: 0 auto !important;
    }

    .na-track-outer:has(.na-card:only-child) {
        overflow-x: hidden !important;
    }
}


/* ============================================================
   END
   ============================================================ */



/* ============================================================
   S.T ACCESSORIES — PREMIUM FEATURES RESPONSIVE
   إعادة تصميم قسم المميزات بالكامل
   ============================================================ */

.features {
    position: relative !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 28px var(--pad-x, 20px) !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;

    background: transparent !important;
    border: 0 !important;
}


/* الكارت */
.features .feature-item {
    position: relative !important;

    min-width: 0 !important;
    min-height: 100px !important;

    padding: 18px 16px !important;

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

    text-align: center !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbf8f3 100%
        ) !important;

    border: 1px solid rgba(181, 138, 82, 0.16) !important;
    border-radius: 18px !important;

    box-shadow:
        0 5px 18px rgba(62, 42, 29, 0.055),
        0 1px 3px rgba(62, 42, 29, 0.04) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


/* إلغاء الفواصل القديمة */
.features .divider {
    display: none !important;
}


/* الأيقونة */
.features .feature-item i,
.features .feature-item .feature-icon,
.features .feature-item svg {
    flex-shrink: 0 !important;
}


/* لو الأيقونة FontAwesome */
.features .feature-item > i {
    width: 48px !important;
    height: 48px !important;

    margin: 0 0 11px !important;

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

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #f7f0e7,
            #eee5da
        ) !important;

    color: #aa8250 !important;

    font-size: 21px !important;

    box-shadow:
        inset 0 0 0 1px rgba(181,138,82,.08),
        0 4px 12px rgba(62,42,29,.06) !important;
}


/* العنوان */
.features .feature-item h3,
.features .feature-item h4,
.features .feature-item .feature-title,
.features .feature-item strong {
    margin: 0 !important;

    color: #2f2118 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;

    font-weight: 400 !important;
}


/* الوصف */
.features .feature-item p,
.features .feature-item span {
    margin: 4px 0 0 !important;

    color: #9b8d82 !important;

    font-size: 11px !important;
    line-height: 1.6 !important;

    font-weight: 400 !important;
}


/* تأثير بسيط للكمبيوتر */
@media (hover: hover) and (min-width: 769px) {

    .features .feature-item:hover {
        transform: translateY(-4px) !important;

        border-color: rgba(181,138,82,.34) !important;

        box-shadow:
            0 12px 28px rgba(62,42,29,.10),
            0 2px 5px rgba(62,42,29,.04) !important;
    }

    .features .feature-item:hover > i {
        background: #3b2a1f !important;
        color: #d8b27b !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 481px) and (max-width: 991px) {

    .features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;

        padding: 24px 20px !important;
    }

    .features .feature-item {
        min-height: 110px !important;
    }
}


/* ============================================================
   MOBILE — 2 × 2
   ============================================================ */

@media (max-width: 480px) {

    .features {
        width: 100% !important;

        box-sizing: border-box !important;

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

        gap: 10px !important;

        padding:
            16px 12px 20px !important;

        margin: 0 !important;
    }


    .features .feature-item {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 112px !important;

        box-sizing: border-box !important;

        padding: 14px 8px !important;

        border-radius: 16px !important;
    }


    .features .feature-item > i {
        width: 42px !important;
        height: 42px !important;

        margin-bottom: 8px !important;

        font-size: 18px !important;
    }


    .features .feature-item h3,
    .features .feature-item h4,
    .features .feature-item .feature-title,
    .features .feature-item strong {
        font-size: 14px !important;

        line-height: 1.45 !important;
    }


    .features .feature-item p,
    .features .feature-item span {
        margin-top: 3px !important;

        font-size: 10.5px !important;

        line-height: 1.5 !important;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 360px) {

    .features {
        gap: 8px !important;

        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .features .feature-item {
        min-height: 105px !important;

        padding: 11px 6px !important;

        border-radius: 14px !important;
    }

    .features .feature-item > i {
        width: 38px !important;
        height: 38px !important;

        margin-bottom: 7px !important;

        font-size: 16px !important;
    }

    .features .feature-item h3,
    .features .feature-item h4,
    .features .feature-item .feature-title,
    .features .feature-item strong {
        font-size: 13px !important;
    }

    .features .feature-item p,
    .features .feature-item span {
        font-size: 9.5px !important;
    }
}


/* ============================================================
   VERY SMALL / OLD PHONES
   ============================================================ */

@media (max-width: 320px) {

    .features {
        grid-template-columns: 1fr !important;
    }

    .features .feature-item {
        min-height: 82px !important;

        flex-direction: row !important;

        justify-content: flex-start !important;

        text-align: right !important;

        gap: 12px !important;

        padding: 12px 14px !important;
    }

    .features .feature-item > i {
        margin: 0 !important;
        flex: 0 0 40px !important;
    }
}


/* ============================================================
   RTL POLISH
   ============================================================ */

html[dir="rtl"] .features,
body[dir="rtl"] .features {
    direction: rtl !important;
}


/* منع أي حدود قديمة من الظهور */
.features .feature-item:nth-child(1),
.features .feature-item:nth-child(2),
.features .feature-item:nth-child(3),
.features .feature-item:nth-child(4),
.features .feature-item:nth-child(5),
.features .feature-item:nth-child(6),
.features .feature-item:nth-child(7),
.features .feature-item:nth-child(8) {
    border-left: 1px solid rgba(181,138,82,.16) !important;
    border-right: 1px solid rgba(181,138,82,.16) !important;
    border-top: 1px solid rgba(181,138,82,.16) !important;
    border-bottom: 1px solid rgba(181,138,82,.16) !important;
}



/* ============================================================
   HERO — PREMIUM RESPONSIVE
   أطول على الموبايل + الصورة كاملة بدون قص
   ============================================================ */

.hero {
    position: relative !important;
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    overflow: hidden !important;

    background: #f7f2e9 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* السلايد */
.hero .slide {
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    inset: auto !important;

    background: transparent !important;

    overflow: hidden !important;
}


/* السلايدات غير النشطة */
.hero .slide:not(.active) {
    position: absolute !important;
    inset: 0 !important;
}


/* الصورة */
.hero .slide-img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    min-height: 0 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    background: #f7f2e9 !important;

    user-select: none !important;
    -webkit-user-drag: none !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 992px) {

    .hero {
        max-width: 100% !important;
    }

    .hero .slide-img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 481px) and (max-width: 991px) {

    .hero {
        width: 100% !important;
        height: auto !important;

        /* أطول من الديسكتوب */
        min-height: 280px !important;

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

    .hero .slide {
        width: 100% !important;
        height: auto !important;
    }

    .hero .slide-img {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

    .hero .arrow {
        display: none !important;
    }

    .hero .dots {
        bottom: 12px !important;
        z-index: 20 !important;
    }
}


/* ============================================================
   MOBILE
   الصورة كاملة + ارتفاع أكبر
   ============================================================ */

@media (max-width: 480px) {

    .hero {
        width: 100% !important;

        height: auto !important;

        /*
         * بنسيب ارتفاع الصورة الطبيعي
         * عشان مفيش قص نهائيًا.
         */
        min-height: 0 !important;

        aspect-ratio: auto !important;

        display: block !important;

        overflow: hidden !important;

        background: #f7f2e9 !important;
    }


    .hero .slide {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;

        display: block !important;

        overflow: hidden !important;
    }


    .hero .slide:not(.active) {
        position: absolute !important;
        inset: 0 !important;
    }


    .hero .slide-img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        min-height: 0 !important;

        /*
         * أهم سطر:
         * الصورة كلها تظهر بدون قص
         */
        object-fit: contain !important;
        object-position: center center !important;

        background: #f7f2e9 !important;

        margin: 0 auto !important;
    }


    /* إخفاء الأسهم */
    .hero .arrow {
        display: none !important;
    }


    /* النقط */
    .hero .dots {
        position: absolute !important;

        bottom: 10px !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        z-index: 30 !important;

        display: flex !important;

        gap: 7px !important;
    }


    .hero .dots button,
    .hero .dot {
        width: 7px !important;
        height: 7px !important;

        border-radius: 50% !important;
    }
}


/* ============================================================
   موبايلات صغيرة
   ============================================================ */

@media (max-width: 380px) {

    .hero .slide-img {
        width: 100% !important;
        height: auto !important;
    }

    .hero .dots {
        bottom: 8px !important;
    }
}


/* ============================================================
   منع أي كود قديم من إجبار الهيرو على ارتفاع ثابت
   ============================================================ */

@media (max-width: 768px) {

    .hero,
    .hero .slide,
    .hero .slide-img {
        max-height: none !important;
    }

}


/* ============================================================
   لمسة احترافية
   ============================================================ */

.hero {
    isolation: isolate !important;

    box-shadow:
        0 1px 0 rgba(181,138,82,.12),
        0 8px 25px rgba(62,42,29,.05) !important;
}


/* بدون أي فراغ بين الهيرو والقسم التالي */
.hero + section {
    margin-top: 0 !important;
}


/* ============================================================
   ACCESSIBILITY / PERFORMANCE
   ============================================================ */

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

    .hero *,
    .hero .slide,
    .hero .slide-img {
        animation: none !important;
        transition: none !important;
    }

}


/* ============================================================
   HERO — زيادة الارتفاع بشكل بسيط واحترافي
   ============================================================ */

@media (max-width: 480px) {

    .hero {
        padding: 14px 0 18px !important;
        background: #f7f2e9 !important;

        /* شكل أنعم */
        box-shadow:
            0 4px 18px rgba(62, 42, 29, 0.08) !important;
    }

    .hero .slide {
        padding: 0 !important;
    }

    .hero .slide-img {
        width: 100% !important;
        height: auto !important;

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

        /* تمنع أي فراغ جانبي */
        margin: 0 auto !important;
    }

    .hero .dots {
        bottom: 12px !important;
    }
}


/* شاشات الموبايل الصغيرة جدًا */
@media (max-width: 380px) {

    .hero {
        padding-top: 12px !important;
        padding-bottom: 16px !important;
    }

}


/* تابلت */
@media (min-width: 481px) and (max-width: 991px) {

    .hero {
        padding: 12px 0 16px !important;
    }

}



/* ============================================================
   S.T ACCESSORIES
   FINAL MOBILE LUXURY FIX
   ============================================================ */


/* ============================================================
   1 — HERO
   الصورة كاملة بدون قص وبدون فراغات غريبة
   ============================================================ */

@media (max-width: 768px) {

    .hero {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;

        background: #f7f2e9 !important;

        box-shadow: none !important;
    }


    .hero .slide {
        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;

        overflow: hidden !important;
    }


    .hero .slide:not(.active) {
        position: absolute !important;
        inset: 0 !important;
    }


    .hero .slide-img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

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

        background: transparent !important;
    }


    /* الأسهم مش محتاجينها على الموبايل */
    .hero .arrow {
        display: none !important;
    }


    /* نقاط السلايدر */
    .hero .dots {
        bottom: 8px !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        z-index: 20 !important;
    }

}


/* ============================================================
   2 — FEATURES SECTION
   تحويل 2×2 إلى قائمة Luxury كاملة
   ============================================================ */

@media (max-width: 768px) {

    .features {
        width: 100% !important;

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

        padding: 0 !important;
        margin: 0 !important;

        background: #faf8f3 !important;

        border-top: 1px solid rgba(181,138,82,.18) !important;
    }


    /* كل Feature صف كامل */
    .features .feature-item {

        width: 100% !important;

        min-width: 100% !important;

        height: 78px !important;
        min-height: 78px !important;

        box-sizing: border-box !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 16px !important;

        padding: 10px 18px !important;

        margin: 0 !important;

        background: #fff !important;

        border: 0 !important;

        border-bottom: 1px solid #e5dccd !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        text-align: right !important;
    }


    /* آخر عنصر */
    .features .feature-item:last-child {
        border-bottom: 0 !important;
    }


    /* إلغاء أي تقسيمات قديمة */
    .features .divider {
        display: none !important;
    }


    /* ========================================================
       ICON
       ======================================================== */

    .features .feature-item > i,
    .features .feature-item .feature-icon,
    .features .feature-item .icon {

        flex: 0 0 46px !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        display: flex !important;

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

        border-radius: 50% !important;

        background: #f4efe7 !important;

        color: #ad8750 !important;

        font-size: 21px !important;

        margin: 0 !important;
    }


    /* ========================================================
       CONTENT
       ======================================================== */

    .features .feature-item > div,
    .features .feature-content,
    .features .feature-text {

        flex: 1 !important;

        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: center !important;

        text-align: right !important;

        margin: 0 !important;
    }


    .features .feature-item h3,
    .features .feature-item h4,
    .features .feature-item .feature-title {

        margin: 0 0 3px !important;

        padding: 0 !important;

        font-size: 16px !important;

        line-height: 1.35 !important;

        font-weight: 400 !important;

        color: #2e2119 !important;
    }


    .features .feature-item p,
    .features .feature-item span,
    .features .feature-item .feature-desc {

        margin: 0 !important;

        padding: 0 !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        color: #9a8d81 !important;
    }


    /* ========================================================
       لو الأيقونة في HTML قبل النص
       ======================================================== */

    .feature-item {
        direction: rtl !important;
    }


    /* ========================================================
       إزالة أي hover على اللمس
       ======================================================== */

    .features .feature-item:hover {
        transform: none !important;

        box-shadow: none !important;

        background: #fff !important;
    }

}


/* ============================================================
   3 — موبايلات صغيرة جدًا
   ============================================================ */

@media (max-width: 380px) {

    .features .feature-item {

        height: 72px !important;
        min-height: 72px !important;

        padding: 8px 14px !important;

        gap: 13px !important;
    }


    .features .feature-item > i,
    .features .feature-item .feature-icon,
    .features .feature-item .icon {

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        font-size: 19px !important;
    }


    .features .feature-item h3,
    .features .feature-item h4,
    .features .feature-item .feature-title {

        font-size: 15px !important;
    }


    .features .feature-item p,
    .features .feature-item span,
    .features .feature-item .feature-desc {

        font-size: 11px !important;
    }

}


/* ============================================================
   4 — منع أي Grid قديم من تحويل الـ Features إلى 2×2
   ============================================================ */

@media (max-width: 768px) {

    .features,
    .features > *,
    .features .feature-item {

        grid-template-columns: none !important;
    }


    .features {

        display: flex !important;
        flex-wrap: nowrap !important;
    }


    .features .feature-item {

        flex: 0 0 100% !important;
    }

}


/* ============================================================
   5 — تحسين المسافة بين HERO و FEATURES
   ============================================================ */

@media (max-width: 768px) {

    .hero + .features,
    .hero + section .features {

        margin-top: 0 !important;
    }

}


/* ============================================================
   6 — منع السكرول الأفقي
   ============================================================ */

html,
body {

    max-width: 100% !important;

    overflow-x: hidden !important;
}



/* ============================================================
   SAMA ACCESSORIES
   PREMIUM MOBILE FEATURES
   FINAL DESIGN
   ============================================================ */


/* ------------------------------------------------------------
   RESET OLD FEATURES STYLES
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    .features {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

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

        gap: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #f7f3eb !important;

        border: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* إلغاء كل الفواصل القديمة */
    .features .divider {
        display: none !important;
    }


    /* --------------------------------------------------------
       FEATURE CARD
       -------------------------------------------------------- */

    .features .feature-item {

        position: relative !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: 86px !important;
        min-height: 86px !important;

        flex: 0 0 86px !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 15px !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 12px 18px !important;

        background:
            linear-gradient(
                90deg,
                #ffffff 0%,
                #fffdf9 70%,
                #f9f4eb 100%
            ) !important;

        border: 0 !important;

        border-bottom: 1px solid rgba(181,138,82,.22) !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;

        text-align: right !important;

        direction: rtl !important;

        overflow: hidden !important;
    }


    /* --------------------------------------------------------
       GOLD ACCENT LINE
       -------------------------------------------------------- */

    .features .feature-item::before {

        content: "" !important;

        position: absolute !important;

        right: 0 !important;
        top: 15px !important;
        bottom: 15px !important;

        width: 3px !important;

        border-radius: 4px 0 0 4px !important;

        background:
            linear-gradient(
                to bottom,
                transparent,
                #b58a52 25%,
                #d6b47a 75%,
                transparent
            ) !important;
    }


    /* --------------------------------------------------------
       ICON WRAPPER
       -------------------------------------------------------- */

    .features .feature-item > i,
    .features .feature-item > .feature-icon,
    .features .feature-item > .icon,
    .features .feature-item .feature-icon,
    .features .feature-item .icon {

        position: relative !important;

        flex: 0 0 48px !important;

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;

        max-width: 48px !important;
        max-height: 48px !important;

        display: flex !important;

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

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;

        background: #f4eee5 !important;

        border: 1px solid rgba(181,138,82,.20) !important;

        color: #ad8550 !important;

        font-size: 20px !important;

        line-height: 1 !important;

        box-shadow:
            inset 0 0 0 5px rgba(255,255,255,.65),
            0 4px 12px rgba(62,42,29,.06) !important;

        transform: none !important;
    }


    /* --------------------------------------------------------
       لو الأيقونة FontAwesome
       -------------------------------------------------------- */

    .features .feature-item > i::before,
    .features .feature-item .feature-icon::before,
    .features .feature-item .icon::before {

        color: #ad8550 !important;

        font-size: 20px !important;
    }


    /* --------------------------------------------------------
       CONTENT
       -------------------------------------------------------- */

    .features .feature-item > div,
    .features .feature-item .feature-content,
    .features .feature-item .feature-text {

        position: relative !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: center !important;

        gap: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: right !important;

        background: transparent !important;

        box-shadow: none !important;

        border: 0 !important;
    }


    /* --------------------------------------------------------
       TITLE
       -------------------------------------------------------- */

    .features .feature-item h3,
    .features .feature-item h4,
    .features .feature-item .feature-title {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #2c211a !important;

        font-size: 16px !important;

        font-weight: 400 !important;

        line-height: 1.4 !important;

        text-align: right !important;

        letter-spacing: 0 !important;

        background: transparent !important;

        border: 0 !important;
    }


    /* --------------------------------------------------------
       DESCRIPTION
       -------------------------------------------------------- */

    .features .feature-item p,
    .features .feature-item span,
    .features .feature-item .feature-desc {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #9a8d80 !important;

        font-size: 12px !important;

        font-weight: 400 !important;

        line-height: 1.5 !important;

        text-align: right !important;

        background: transparent !important;

        border: 0 !important;
    }


    /* --------------------------------------------------------
       REMOVE ALL OLD BACKGROUNDS / SHAPES
       -------------------------------------------------------- */

    .features .feature-item *,
    .features .feature-item *::before,
    .features .feature-item *::after {

        background-image: none !important;
    }


    /* نرجع خلفية الأيقونة */
    .features .feature-item > i,
    .features .feature-item > .feature-icon,
    .features .feature-item > .icon,
    .features .feature-item .feature-icon,
    .features .feature-item .icon {

        background: #f4eee5 !important;
    }


    /* --------------------------------------------------------
       HOVER / TOUCH
       -------------------------------------------------------- */

    .features .feature-item:hover {

        transform: none !important;

        background:
            linear-gradient(
                90deg,
                #ffffff 0%,
                #fffdf9 70%,
                #f9f4eb 100%
            ) !important;

        box-shadow: none !important;
    }


    /* --------------------------------------------------------
       LAST ITEM
       -------------------------------------------------------- */

    .features .feature-item:last-child {

        border-bottom: 0 !important;
    }


    /* --------------------------------------------------------
       SMALL PHONE
       -------------------------------------------------------- */

    @media (max-width: 380px) {

        .features .feature-item {

            height: 80px !important;
            min-height: 80px !important;

            flex-basis: 80px !important;

            padding: 10px 15px !important;

            gap: 13px !important;
        }


        .features .feature-item > i,
        .features .feature-item > .feature-icon,
        .features .feature-item > .icon,
        .features .feature-item .feature-icon,
        .features .feature-item .icon {

            flex-basis: 44px !important;

            width: 44px !important;
            height: 44px !important;

            min-width: 44px !important;
            min-height: 44px !important;

            font-size: 18px !important;
        }


        .features .feature-item h3,
        .features .feature-item h4,
        .features .feature-item .feature-title {

            font-size: 15px !important;
        }


        .features .feature-item p,
        .features .feature-item span,
        .features .feature-item .feature-desc {

            font-size: 11px !important;
        }
    }

}


/* ============================================================
   DESKTOP / TABLET — DON'T BREAK ORIGINAL DESIGN
   ============================================================ */

@media (min-width: 769px) {

    .features .feature-item {
        box-sizing: border-box;
    }

}


/* ============================================================
   HERO + FEATURES TRANSITION
   ============================================================ */

@media (max-width: 768px) {

    .hero {
        margin-bottom: 0 !important;
    }

    .features {
        margin-top: 0 !important;

        box-shadow:
            0 -4px 18px rgba(62,42,29,.035) !important;
    }

}