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

/* ==========================================================================
   Crew — Shop / catalog (Figma node 41:6698)
   Loaded only on catalog pages, and every rule is scoped under body.crew-shop
   (the class is added only while the new layout is switched on).
   ========================================================================== */

body.crew-shop {
    --crew-navy: #030883;
    --crew-gray: #f0eeed;
    --crew-red: #ff3333;
    --crew-line: rgba(0, 0, 0, 0.1);
}

/* ---------- Page title area: the design has only a breadcrumb ---------- */

body.crew-shop .wd-page-title {
    display: none;
}

body.crew-shop .shop-loop-head .wd-breadcrumbs,
body.crew-shop .shop-loop-head .wd-products-per-page,
body.crew-shop .shop-loop-head .wd-products-shop-view,
body.crew-shop .shop-loop-head .woocommerce-result-count,
body.crew-shop .shop-loop-head .woocommerce-ordering {
    display: none;
}

/* ---------- Layout: sidebar (295px) + grid (925px), 20px gap ---------- */

body.crew-shop .wd-content-layout {
    position: relative;
    max-width: 1270px;
    margin-inline: auto;
    padding-top: 0;
}

@media (min-width: 1025px) {
    body.crew-shop .wd-content-layout.wd-grid-g {
        grid-template-columns: 295px minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
        margin-top: 76px;
    }

    /* the toolbar (per page / view / sorting / count) is not part of the design on desktop */
    body.crew-shop .shop-loop-head {
        display: none;
    }

    body.crew-shop .wd-content-layout > .wd-grid-col {
        grid-column: auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

/* breadcrumb is printed inside the content column; lift it above both columns */

body.crew-shop .wd-content-area {
    position: relative;
}

body.crew-shop .crew-shop-breadcrumb {
    position: absolute;
    top: -52px;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 100%;
    color: #555;
    font-size: 16.6px;
    line-height: 16px;
}

@media (min-width: 1025px) {
    body.crew-shop .crew-shop-breadcrumb {
        inset-inline-start: calc(-1 * (295px + 20px));
        width: calc(100% + 315px);
    }
}

body.crew-shop .crew-shop-breadcrumb .wd-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #555;
    font-size: 16.6px;
    line-height: 16px;
}

body.crew-shop .crew-shop-breadcrumb a {
    color: #555;
}

body.crew-shop .crew-shop-breadcrumb .wd-last {
    color: #141414;
}

body.crew-shop .crew-shop-breadcrumb .wd-delimiter {
    display: inline-block;
    width: 7px;
    height: 12px;
    margin: 0 4px;
    font-size: 0;
    background: #969696;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M7 0v12L0 6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M7 0v12L0 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html:not([dir='rtl']) body.crew-shop .crew-shop-breadcrumb .wd-delimiter {
    transform: scaleX(-1);
}

/* ---------- Sidebar = the "filter" card ---------- */

body.crew-shop aside.wd-sidebar .widget-area {
    padding: 20px 24px 24px;
    border: 1px solid var(--crew-line);
    border-radius: 20px;
    background: #fff;
}

body.crew-shop .crew-shop-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--crew-line);
}

body.crew-shop .crew-shop-filter__title {
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

body.crew-shop .crew-shop-filter__icon {
    width: 24px;
    height: 24px;
    background: #969696;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 3v18M12 3v18M19 3v18'/%3E%3Ccircle cx='5' cy='9' r='2' fill='%23fff'/%3E%3Ccircle cx='12' cy='15' r='2' fill='%23fff'/%3E%3Ccircle cx='19' cy='8' r='2' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 3v18M12 3v18M19 3v18'/%3E%3Ccircle cx='5' cy='9' r='2' fill='%23fff'/%3E%3Ccircle cx='12' cy='15' r='2' fill='%23fff'/%3E%3Ccircle cx='19' cy='8' r='2' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.crew-shop .crew-shop-filter__form {
    margin: 0;
}

body.crew-shop .crew-shop-filter__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

body.crew-shop .crew-shop-filter__list li {
    margin: 0;
    padding: 0;
}

body.crew-shop .crew-shop-filter__list label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    cursor: pointer;
    transition: color 0.2s;
}

body.crew-shop .crew-shop-filter__list label:hover,
body.crew-shop .crew-shop-filter__list label.is-checked {
    color: var(--crew-navy);
}

body.crew-shop .crew-shop-filter__list label.is-checked {
    font-weight: 700;
}

body.crew-shop .crew-shop-filter__list input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.crew-shop .crew-shop-filter__list i {
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3L5 8l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3L5 8l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.crew-shop .crew-shop-filter__list label.is-checked i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}

body.crew-shop .crew-shop-filter__apply {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    min-height: 0;
    margin: 0;
    padding: 0 24px;
    border: 0;
    border-radius: 62px;
    background: var(--crew-navy);
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

body.crew-shop .crew-shop-filter__apply:hover {
    background: var(--crew-navy);
    opacity: 0.9;
}

/* the other real filter widgets (price, brand, colour, stock, ...) live in the same card */

body.crew-shop aside.wd-sidebar .widget-area .sidebar-widget {
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--crew-line);
}

body.crew-shop aside.wd-sidebar .widget-title {
    margin: 0 0 16px;
    color: #000;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
}

/* ---------- Product grid: 3 columns, 20px gaps, Figma product card ---------- */

body.crew-shop .products.wd-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}

body.crew-shop .products.wd-products > .wd-product {
    width: auto;
    max-width: none;
    min-width: 0;
}

body.crew-shop .wd-products .wd-product {
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: none;
}

body.crew-shop .wd-products .wd-product::before,
body.crew-shop .wd-products .wd-product::after,
body.crew-shop .wd-products .wd-product-wrapper::before,
body.crew-shop .wd-products .wd-product-wrapper::after {
    display: none !important;
}

body.crew-shop .wd-products .wd-product-wrapper {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

body.crew-shop .wd-products .wd-product-thumb {
    position: relative;
    margin-bottom: 11px;
    aspect-ratio: 295 / 298;
    overflow: hidden;
    border-radius: 20px;
    background: var(--crew-gray);
}

body.crew-shop .wd-products .wd-product-img-link {
    display: block;
    height: 100%;
}

body.crew-shop .wd-products .wd-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

body.crew-shop .wd-products .wd-product-grid-slider-nav,
body.crew-shop .wd-products .wd-product-cats,
body.crew-shop .wd-products .wd-product-footer .wd-action-buttons {
    display: none;
}

/* wishlist heart (WoodMart button) top-start of the tile */
body.crew-shop .wd-products .wd-buttons {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    z-index: 2;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
}

body.crew-shop .wd-products .wd-wishlist-btn {
    margin: 0;
}

body.crew-shop .wd-products .wd-wishlist-btn > a {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

body.crew-shop .wd-products .wd-wishlist-btn .wd-action-icon,
body.crew-shop .wd-products .wd-wishlist-btn .wd-action-text {
    display: none;
}

body.crew-shop .wd-products .wd-wishlist-btn > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--crew-red);
    -webkit-mask: url('../images/heart.svg') center / 20px 17px no-repeat;
    mask: url('../images/heart.svg') center / 20px 17px no-repeat;
}

/* sale label kept (WoodMart), drawn as the pink pill */
body.crew-shop .wd-products .product-labels {
    position: absolute;
    inset: auto 12px 12px auto;
    z-index: 2;
}

body.crew-shop .wd-products .product-label {
    position: static;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 6px 14px;
    border-radius: 62px;
    background: rgba(255, 51, 51, 0.1);
    color: #f33;
    font-size: 12px;
    line-height: 16px;
}

/* title row: title (start) + cart icon (end); then rating; then price */
body.crew-shop .wd-products .product-element-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'title cart' 'rating rating' 'price price';
    align-items: start;
    gap: 11px 8px;
    margin: 0 !important; /* WoodMart's hover style pulls this block up */
    padding: 0;
    text-align: start;
}

body.crew-shop .wd-products .wd-product-header,
body.crew-shop .wd-products .wd-product-footer,
body.crew-shop .wd-products .wd-add-btn {
    display: contents;
}

body.crew-shop .wd-products .wd-entities-title {
    grid-area: title;
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

body.crew-shop .wd-products .wd-entities-title a {
    color: #000;
}

body.crew-shop .wd-products .wd-entities-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.crew-shop .wd-products .star-rating {
    grid-area: rating;
    justify-self: start;
    margin: 0;
    font-size: 14px;
}

body.crew-shop .wd-products .wrap-price {
    grid-area: price;
}

body.crew-shop .wd-products .wrap-price .price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

body.crew-shop .wd-products .wrap-price .price ins {
    order: -1;
    background: none;
    color: #000;
    text-decoration: none;
}

body.crew-shop .wd-products .wrap-price .price del {
    color: #999;
    opacity: 1;
}

body.crew-shop .wd-products .wd-add-btn .add-to-cart-loop {
    grid-area: cart;
    display: block;
    position: relative;
    visibility: visible;
    opacity: 1;
    transform: none;
    width: 32px;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url('../images/cart.svg') left center / 61px 20.25px no-repeat;
    box-shadow: none;
    font-size: 0;
    overflow: hidden;
    text-indent: -999px;
}

body.crew-shop .wd-products .wd-add-btn .add-to-cart-loop::before,
body.crew-shop .wd-products .wd-add-btn .add-to-cart-loop::after {
    display: none;
}

body.crew-shop .wd-products .added_to_cart {
    display: none;
}

/* ---------- Pagination: [back]  1 2 3 ... 8 9 10  [next] ---------- */

body.crew-shop nav.woocommerce-pagination {
    margin: 40px 0 0;
}

body.crew-shop nav.woocommerce-pagination .page-numbers {
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.crew-shop nav.woocommerce-pagination .page-numbers li {
    margin: 0;
    border: 0;
}

body.crew-shop nav.woocommerce-pagination a.page-numbers,
body.crew-shop nav.woocommerce-pagination span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

body.crew-shop nav.woocommerce-pagination a.page-numbers:hover {
    color: var(--crew-navy);
}

body.crew-shop nav.woocommerce-pagination span.page-numbers.current {
    background: var(--crew-navy);
    color: #fff;
}

body.crew-shop nav.woocommerce-pagination .page-numbers li:has(> .prev),
body.crew-shop nav.woocommerce-pagination .page-numbers li:has(> .next) {
    flex: 1 1 0;
}

body.crew-shop nav.woocommerce-pagination .page-numbers li:has(> .next) {
    display: flex;
    justify-content: flex-end;
}

body.crew-shop nav.woocommerce-pagination a.prev,
body.crew-shop nav.woocommerce-pagination a.next {
    gap: 8px;
    height: 36px;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid var(--crew-line);
    background: #fff;
    color: #000;
    font-family: 'Almarai', Arial, sans-serif;
    font-weight: 400;
    direction: rtl;
}

/* WoodMart draws its own arrow on prev/next; the design's arrow is the one below */
body.crew-shop nav.woocommerce-pagination a.prev::before,
body.crew-shop nav.woocommerce-pagination a.prev::after,
body.crew-shop nav.woocommerce-pagination a.next::before,
body.crew-shop nav.woocommerce-pagination a.next::after {
    display: none;
}

body.crew-shop .crew-shop-pg-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #000;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h10M7 2l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h10M7 2l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.crew-shop a.prev .crew-shop-pg-arrow {
    transform: scaleX(-1);
}

/* ---------- Empty state ---------- */

body.crew-shop .woocommerce-info,
body.crew-shop .wd-no-products {
    padding: 48px 24px;
    border: 1px solid var(--crew-line);
    border-radius: 20px;
    background: #fff;
    color: rgba(0, 0, 0, 0.6);
    font-size: 18px;
    text-align: center;
}

/* ==========================================================================
   Tablet / mobile: WoodMart turns the sidebar into its off-canvas filter drawer;
   only the "filters" button stays in the toolbar.
   ========================================================================== */

@media (max-width: 1024px) {
    body.crew-shop .shop-loop-head {
        display: flex;
        justify-content: flex-start;
        margin: 0 0 20px;
    }

    body.crew-shop .shop-loop-head .wd-shop-tools {
        display: flex;
        align-items: center;
    }

    body.crew-shop .shop-loop-head .wd-show-sidebar-btn {
        display: inline-flex;
    }

    /* WoodMart's "Show sidebar" button, drawn as the design's filter pill */
    body.crew-shop .wd-show-sidebar-btn > a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 20px;
        border: 1px solid var(--crew-line);
        border-radius: 62px;
        background: #fff;
        color: #000;
    }

    body.crew-shop .wd-show-sidebar-btn .wd-action-text {
        font-size: 0;
    }

    body.crew-shop .wd-show-sidebar-btn .wd-action-text::after {
        content: 'الفلتر';
        font-size: 16px;
        line-height: 1;
    }

    body.crew-shop .crew-shop-breadcrumb {
        position: static;
        width: auto;
        margin-bottom: 16px;
    }

    body.crew-shop .wd-content-layout {
        padding-top: 16px;
    }

    body.crew-shop aside.wd-sidebar .widget-area {
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    body.crew-shop .wd-products .wd-entities-title {
        font-size: 16px;
    }

    body.crew-shop .wd-products .wrap-price .price {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    body.crew-shop .products.wd-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    body.crew-shop .wd-products .wd-entities-title {
        font-size: 15px;
    }

    body.crew-shop .wd-products .wrap-price .price {
        font-size: 16px;
        gap: 4px 6px;
    }

    body.crew-shop nav.woocommerce-pagination a.page-numbers,
    body.crew-shop nav.woocommerce-pagination span.page-numbers {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
    }
}