/*
 * Oud Al Khoori – WooCommerce Styles
 * Matching live site: oudalkhoori.com/en
 */

:root {
    --oak-primary: #c4956a;
    --oak-primary-hover: #1a1510;
    --oak-dark: #121212;
    --oak-dark-75: rgba(18, 18, 18, 0.75);
    --oak-dark-55: rgba(18, 18, 18, 0.55);
    --oak-dark-15: rgba(18, 18, 18, 0.15);
    --oak-dark-08: rgba(18, 18, 18, 0.08);
    --oak-light: #f3f3f3;
    --oak-light-warm: #faf6f1;
    --oak-bg: #ffffff;
    --oak-img-bg: #f7f7f7;
    --oak-font: 'Lato', sans-serif;
    --oak-radius: 40px;
    --oak-spacing: 0.06rem;
    --oak-badge: #c0542e;
}

/* ========== GENERAL ========== */
.woocommerce,
.woocommerce-page {
    font-family: var(--oak-font);
    color: var(--oak-dark-75);
    letter-spacing: var(--oak-spacing);
    line-height: 1.8;
}

.woocommerce .woocommerce-breadcrumb {
    font-size: 14px;
    color: rgba(18, 18, 18, 0.55);
    letter-spacing: 0.6px;
    margin-bottom: 2rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: #121212;
    text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* ========== NOTICES — below fixed header ========== */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    border-top-color: var(--oak-primary);
    background: var(--oak-light-warm);
    color: var(--oak-dark);
    border-radius: 0;
    margin-top: 0;
    position: relative;
    z-index: 10;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
    color: var(--oak-primary);
}

/* ========== BUTTONS ========== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--oak-primary);
    color: #fff;
    border: 1px solid var(--oak-primary);
    border-radius: var(--oak-radius);
    font-family: var(--oak-font);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 0.75rem 2rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-transform: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--oak-primary-hover);
    color: #fff;
    border-color: var(--oak-primary-hover);
}

.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled {
    background-color: var(--oak-light);
    color: var(--oak-dark-55);
    border-color: var(--oak-light);
}

/* ========== SHOP / ARCHIVE ========== */
.woocommerce .products ul,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 8px;
    row-gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Inside sidebar layout, keep 4 cols on wide screens */
.oak-products-grid .woocommerce ul.products,
.oak-products-grid ul.products {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 8px;
    row-gap: 40px;
}

@media (max-width: 1199px) {
    .oak-products-grid ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 999px) {
    .woocommerce .products ul,
    .woocommerce ul.products,
    .oak-products-grid ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .woocommerce .products ul,
    .woocommerce ul.products,
    .oak-products-grid ul.products {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 4px;
        row-gap: 28px;
    }
}

@media (max-width: 479px) {
    .woocommerce .products ul,
    .woocommerce ul.products,
    .oak-products-grid ul.products {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 4px;
        row-gap: 24px;
    }
}

/* Kill default clearfix that creates blank grid slot */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
    display: none;
}

.woocommerce ul.products li.product {
    text-align: center;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Force image container to 2:3 ratio */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product a img {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover;
    object-position: center;
    background: #f3f3f3;
    transition: opacity 0.5s ease-in-out;
}

.woocommerce ul.products li.product a img:hover {
    opacity: 0.85;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--oak-font);
    font-size: 15px;
    font-weight: 400;
    color: rgb(18, 18, 18);
    padding: 0.25rem 0 0.5rem;
    text-align: center;
    letter-spacing: 0.6px;
    line-height: 1.333;
}

.woocommerce ul.products li.product .price {
    color: rgb(18, 18, 18);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.5;
}

.woocommerce ul.products li.product .price del {
    color: #d33915;
    font-size: 16px;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 400;
}

.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .oak-badge-sale {
    background: #d33915;
    color: #fff;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    min-height: auto;
    min-width: auto;
    line-height: 1;
    padding: 5px 13px 6px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    margin: 0;
    z-index: 2;
}

.woocommerce ul.products li.product .onsale.oak-badge-soldout,
.woocommerce ul.products li.product .oak-badge-soldout {
    background: rgba(18, 18, 18, 0.7);
}

body.rtl .woocommerce ul.products li.product .onsale {
    left: auto;
    right: 10px;
}

.woocommerce ul.products li.product .star-rating {
    color: #121212;
    margin: 0 auto 0.5rem;
}

/* Hide add-to-cart / read-more on product cards (matches live site) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable {
    display: none;
}

/* ========== SINGLE PRODUCT ========== */

/* Two-column layout: image left, summary right */
.woocommerce div.product {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 50px 36px;
}

/* Full-width elements */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
    clear: both;
}

/* Product row: two-column with sticky image.
   LTR: image on the left, summary on the right (default).
   RTL (Arabic): image on the right, summary on the left — matches live site. */
.oak-product-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 2rem;
}
/* In RTL (Arabic), `direction: rtl` on <body> already lays out flex children
   right-to-left, so the first child (image) lands on the right naturally —
   no flex-direction override needed. */

/* Image wrapper - sticky within the row only.
   50% width capped at 585px to match the reference site (oudalkhoori.com) —
   image stays at its full natural aspect ratio (no cropping) and the summary
   column flexes to fill the rest. */
.oak-product-images {
    position: sticky;
    top: 100px;
    width: 50%;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Summary wrapper */
.oak-product-summary {
    flex: 1;
    min-width: 0;
    padding-top: 0;
}

.oak-product-summary .summary {
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Share link */
.oak-share-link {
    margin-bottom: 20px;
}

.oak-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--oak-font);
    font-size: 14px;
    color: rgb(18, 18, 18);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.oak-share-btn:hover {
    color: rgba(18, 18, 18, 0.65);
}

/* Vendor / Brand name */
.oak-product-vendor {
    font-size: 10px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 1.3px;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 8px;
}

/* Sale badge next to price */
.woocommerce div.product .summary .price .onsale,
.woocommerce div.product .oak-sale-badge {
    display: inline-block;
    background: #d33915;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 0;
    line-height: 1;
    vertical-align: middle;
    margin-inline-start: 8px;
}

/* Product details table */
.oak-product-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
    border-top: 1px solid rgba(18, 18, 18, 0.1);
}

.oak-product-details-table tr {
    border-bottom: 1px solid rgba(18, 18, 18, 0.1);
}

.oak-product-details-table td {
    padding: 12px 0;
    font-family: var(--oak-font);
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.5;
    vertical-align: top;
}

.oak-product-details-table .oak-detail-label {
    font-weight: 700;
    color: rgb(18, 18, 18);
    white-space: nowrap;
    padding-inline-end: 24px;
    width: 1%;
    text-transform: capitalize;
}

.oak-product-details-table .oak-detail-value {
    font-weight: 500;
    color: rgba(18, 18, 18, 0.75);
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .woocommerce div.product {
        padding: 0 16px 24px;
        margin-top: 76px;
    }

    .oak-product-row {
        flex-direction: column;
        gap: 16px;
    }

    .oak-product-images {
        position: relative;
        width: 100%;
        top: auto;
        max-height: 60vh;
        overflow: hidden;
    }

    .oak-product-images img {
        max-height: 60vh;
        object-fit: contain;
    }

    .oak-product-summary {
        padding-top: 0;
    }

    .oak-share-link {
        margin-bottom: 8px;
    }

    .oak-product-vendor {
        margin-bottom: 4px;
    }

    .woocommerce div.product .product_title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .woocommerce div.product .variations tr {
        gap: 8px;
        margin-bottom: 12px;
    }

    .oak-variation-pill {
        padding: 6px 12px;
        font-size: 13px;
    }

    .oak-product-details-table td {
        font-size: 12px;
    }
}

/* Back to Store link */
.oak-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--oak-font);
    font-size: 14px;
    color: rgba(18, 18, 18, 0.55);
    text-decoration: none;
    letter-spacing: 0.6px;
    margin-bottom: 1.25rem;
    transition: color 0.3s;
}

.oak-back-link:hover {
    color: #121212;
}

/* ===== PRODUCT GALLERY (single clean block) ===== */

/* Reset WooCommerce defaults */
.woocommerce div.product div.images,
.oak-product-images .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-bottom: 0;
    opacity: 1 !important;
}

/* Hide zoom icon */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
}

/* Main image — column width stays 50%, but the image itself is capped at
   600px tall and uses object-fit: contain so the whole image stays visible
   (no cropping). On portrait sources, letterbox shows on the sides. */
.woocommerce div.product div.images img {
    border-radius: 0;
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    display: block;
}

/* Flexslider viewport — let it handle its own width */
.oak-product-images .flex-viewport {
    width: 100% !important;
    overflow: hidden;
}

/* Thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 80px;
    opacity: 0.5;
    transition: opacity 0.3s;
    cursor: pointer;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    border-radius: 0;
    background: #f7f7f7;
    max-height: none;
    object-fit: cover;
}

.woocommerce div.product div.images .flex-control-thumbs li.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li:hover {
    opacity: 1;
}

/* Summary (right side) */
.woocommerce div.product div.summary {
    margin-bottom: 0;
    padding-top: 0;
    float: none !important;
    width: 100% !important;
}

/* Title */
.woocommerce div.product .product_title {
    font-family: var(--oak-font);
    font-size: 30px;
    font-weight: 400;
    color: rgb(18, 18, 18);
    margin: 0 0 12px;
    letter-spacing: 0.6px;
    line-height: 1.3;
}

@media (min-width: 750px) {
    .woocommerce div.product .product_title {
        font-size: 40px;
    }
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: rgb(18, 18, 18);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.3px;
    line-height: 1.5;
    margin-bottom: 20px;
}

@media (min-width: 750px) {
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 18px;
    }
}

.woocommerce div.product p.price del {
    color: #d33915;
    font-size: 16px;
    font-weight: 400;
}

.woocommerce div.product p.price ins {
    text-decoration: none;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
    color: rgba(18, 18, 18, 0.75);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    letter-spacing: 0.6px;
}

/* Shipping note */
.woocommerce div.product .product_meta {
    font-size: 14px;
    color: rgba(18, 18, 18, 0.55);
    letter-spacing: 0.6px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(18, 18, 18, 0.08);
}

.woocommerce div.product .product_meta a {
    color: rgba(18, 18, 18, 0.75);
    text-decoration: underline;
}

/* Variations / Size selector */
.woocommerce div.product .variations {
    margin-bottom: 1.5rem;
}

.woocommerce div.product .variations table,
.woocommerce div.product .variations tbody {
    display: block;
    width: 100%;
}

/* Stacked layout: label on top, value pills on the next row.
   Aligned to start (left in LTR, right in RTL) — never centered. */
.woocommerce div.product .variations tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    text-align: start;
}

.woocommerce div.product .variations td.label {
    border: none;
    padding: 0;
    white-space: normal;
    width: auto;
    text-align: start;
}

.woocommerce div.product .variations td.value {
    border: none;
    padding: 0;
    width: 100%;
    flex: none;
    text-align: start;
}

/* Pills row sits at the start (left in LTR, right in RTL) */
.oak-variation-pills {
    justify-content: flex-start;
}

.woocommerce div.product .variations label {
    font-family: var(--oak-font);
    font-size: 13px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 0.4px;
    line-height: 1.5;
    margin: 0;
}

.woocommerce div.product .variations label::after {
    content: ':';
}

.woocommerce div.product .variations select {
    border: 1px solid rgba(18, 18, 18, 0.55);
    border-radius: 40px;
    padding: 10px 20px;
    font-family: var(--oak-font);
    font-size: 16px;
    letter-spacing: 0.6px;
    min-width: 120px;
}

/* Variation pill buttons */
.oak-variation-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oak-variation-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    /* padding: 8px 16px; */
    padding: 0px 5px;
    border: 1px solid var(--oak-primary);
    border-radius: 10px;
    background: #fff;
    font-family: var(--oak-font);
    font-size: 14px;
    font-weight: 400;
    color: rgb(18, 18, 18);
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: all 0.15s;
}

.oak-variation-pill:hover {
    border-color: var(--oak-primary);
    color: var(--oak-primary);
}

.oak-variation-pill.active {
    background: var(--oak-primary);
    border-color: var(--oak-primary);
    color: #fff;
}

.oak-variation-pill.active:hover {
    background: var(--oak-primary-hover);
    border-color: var(--oak-primary-hover);
    color: #fff;
}

/* Hide reset variations link */
.woocommerce div.product .reset_variations {
    display: none !important;
}

/* Quantity & cart form */
.woocommerce div.product form.cart {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Quantity block — label inline with buttons */
div.quantity.oak-quantity,
.woocommerce div.product form.cart div.quantity.oak-quantity,
.woocommerce div.product .single_variation_wrap div.quantity.oak-quantity {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    float: none !important;
    border: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

/* Variation price (shown after selecting a variation) */
.woocommerce div.product .woocommerce-variation-price {
    margin: 0;
}

.woocommerce div.product .woocommerce-variation-price .price {
    margin-bottom: 4px !important;
    font-size: 16px;
}

.woocommerce div.product .woocommerce-variation-availability {
    display: none;
}

/* Single variation wrapper */
.woocommerce div.product .single_variation_wrap {
    margin-top: 0;
}

.woocommerce div.product .single_variation_wrap .single_variation {
    margin-bottom: 0;
}

/* Variations form overall spacing */
.woocommerce div.product .variations_form .variations {
    margin-bottom: 0;
}

.woocommerce div.product .variations_form .single_variation_wrap {
    padding-top: 0;
}

.woocommerce div.product form.cart .quantity {
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 0;
    width: auto;
    float: none;
    margin: 0 0 16px;
}

.woocommerce div.product form.cart .quantity .qty {
    border: none;
    border-left: 1px solid rgba(18, 18, 18, 0.15);
    border-right: 1px solid rgba(18, 18, 18, 0.15);
    border-radius: 0;
    padding: 12px 8px;
    width: 50px;
    text-align: center;
    font-family: var(--oak-font);
    font-size: 0.95rem;
    -moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to cart button — matches global button style */
.woocommerce div.product form.cart .single_add_to_cart_button {
    width: max-content;
    border-radius: 40px;
    padding: 14px 32px;
    font-family: var(--oak-font);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    background: var(--oak-primary) !important;
    border: 1px solid var(--oak-primary) !important;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none !important;
    outline: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--oak-primary-hover) !important;
    border-color: var(--oak-primary-hover) !important;
    color: #fff !important;
}

/* Disabled / Sold out button — outline style */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
    background: #fff !important;
    border: 1px solid rgba(18, 18, 18, 0.3) !important;
    color: rgba(18, 18, 18, 0.4) !important;
    cursor: not-allowed;
    opacity: 1 !important;
    text-transform: capitalize;
}

/* Tabs - collapsible style matching live site */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 3rem;
    border-top: 1px solid rgba(18, 18, 18, 0.08);
    clear: both;
    width: 100%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    content: none;
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 1rem 1.5rem;
    font-family: var(--oak-font);
    font-weight: 400;
    color: rgba(18, 18, 18, 0.55);
    font-size: 14px;
    letter-spacing: 0.6px;
    text-transform: none;
    transition: color 0.3s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #121212;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 2px solid #121212;
    margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #121212;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs .panel {
    color: rgba(18, 18, 18, 0.75);
    line-height: 1.8;
    padding: 2rem 0;
    font-size: 16px;
    letter-spacing: 0.6px;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    display: none; /* Hide "Description" heading inside panel */
}

/* Related & Upsells — "You may also like" */
.woocommerce div.product .related,
.woocommerce div.product .upsells {
    grid-column: 1 / -1;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(18, 18, 18, 0.08);
    clear: both;
    width: 100%;
}

.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 767px) {
    .woocommerce div.product .related ul.products,
    .woocommerce div.product .upsells ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
}

.woocommerce div.product .related h2,
.woocommerce div.product .upsells h2 {
    font-family: var(--fontSecondary);
    font-size: 24px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 0.6px;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 24px;
}

/* Responsive: mobile */
@media (max-width: 767px) {
    .woocommerce div.product {
        padding: 27px 16px;
    }

    .woocommerce div.product .product_title {
        font-size: 1.5rem;
    }
}

/* ========== CART — EMPTY STATE ========== */
.woocommerce-cart .woocommerce {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 24px;
    text-align: center;
}

.woocommerce-cart .woocommerce .cart-empty {
    font-size: 18px;
    color: var(--oak-dark);
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    background: none;
    border: none;
    padding: 0;
}

.woocommerce-cart .woocommerce .cart-empty::before {
    display: none;
}

.woocommerce-cart .woocommerce .return-to-shop {
    margin-top: 0;
}

.woocommerce-cart .woocommerce .return-to-shop .button {
    background: var(--oak-primary);
    color: #fff;
    border: 1px solid var(--oak-primary);
    border-radius: var(--oak-radius);
    padding: 14px 40px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.woocommerce-cart .woocommerce .return-to-shop .button:hover {
    background: var(--oak-primary-hover);
    border-color: var(--oak-primary-hover);
}

/* Cart page with items */
.woocommerce-cart .woocommerce:has(.shop_table) {
    min-height: auto;
    display: block;
    text-align: left;
    padding: 0;
}

/* ========== CART ========== */
.woocommerce table.shop_table {
    border: 1px solid var(--oak-dark-08);
    border-radius: 0;
    border-collapse: collapse;
}

.woocommerce table.shop_table th {
    /*background: var(--oak-light);*/
    color: var(--oak-dark);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: var(--oak-spacing);
    padding: 1rem 1.25rem;
    text-transform: none;
}
body.rtl .woocommerce-column.woocommerce-column--billing-address .woocommerce-column__title {
    padding-right: 10px;
}
body.rtl .woocommerce-column.woocommerce-column--shipping-address .woocommerce-column__title {
    padding-right: 10px;
}
body.rtl .woocommerce-column.woocommerce-column--shipping-address address {
    border-bottom: 0px !important;
}

.woocommerce table.shop_table td {
    padding: 1.25rem;
    border-top: 1px solid var(--oak-dark-08);
    vertical-align: middle;
}

/* Cart thumbnail */
.woocommerce table.shop_table td.product-thumbnail,
body.rtl .woocommerce table.shop_table td.product-thumbnail,
body.rtl .woocommerce-cart .cart_item .product-thumbnail {
    width: 160px !important;
    min-width: 160px !important;
    padding: 1rem !important;
    text-align: center !important;
    visibility: visible !important;
    display: table-cell !important;
}

.woocommerce table.shop_table td.product-thumbnail a,
body.rtl .woocommerce table.shop_table td.product-thumbnail a {
    display: inline-block !important;
}

.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce-cart table.shop_table .product-thumbnail img,
.woocommerce-cart .cart_item .product-thumbnail img,
body.rtl .woocommerce table.shop_table td.product-thumbnail img,
body.rtl .woocommerce-cart .cart_item .product-thumbnail img {
    display: block !important;
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    object-fit: cover !important;
    background: var(--oak-img-bg) !important;
    border-radius: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 auto !important;
    float: none !important;
}

@media (max-width: 767px) {
    .woocommerce table.shop_table td.product-thumbnail,
    body.rtl .woocommerce table.shop_table td.product-thumbnail {
        width: 100px !important;
        min-width: 100px !important;
        padding: 0.5rem !important;
    }
    .woocommerce table.shop_table td.product-thumbnail img,
    body.rtl .woocommerce table.shop_table td.product-thumbnail img {
        width: 90px !important;
        height: 90px !important;
        max-width: 90px !important;
        min-width: 90px !important;
    }
}

/* Broad cart-page image targeting — covers custom plugin cart layouts (Funnelkit, Cart Booster, etc.) */
.woocommerce-cart .cart-item img,
.woocommerce-cart .cart_item img.attachment-woocommerce_thumbnail,
.woocommerce-cart .product-image img,
.woocommerce-cart [class*="cart-item"] img,
.woocommerce-cart [class*="cart_item"] img,
.woocommerce-cart .product img.wp-post-image {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--oak-img-bg) !important;
}

/* Force currency symbol SVG visible on cart + side cart */
.woocommerce-cart .woocommerce-Price-currencySymbol,
.woocommerce-cart .woocommerce-Price-amount svg,
.woocommerce-cart .amount svg,
.xoo-wsc-modal .woocommerce-Price-currencySymbol,
.xoo-wsc-modal .woocommerce-Price-amount svg,
.xoo-wsc-modal .amount svg,
.xoo-wsc-container .woocommerce-Price-currencySymbol,
.xoo-wsc-container .woocommerce-Price-amount svg,
.xoo-wsc-container .amount svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 0.9em !important;
    height: 0.9em !important;
    fill: currentColor !important;
    vertical-align: -0.08em !important;
}

/* Restore the dash AFTER price for the side cart checkout button only (Arabic) */
body.rtl a.xoo-wsc-ft-btn-checkout .amount::after {
    content: "-" !important;
    display: inline !important;
    margin: 0 8px !important;
    font-weight: bold !important;
}

/* Side cart price row "qty X price = subtotal" — force LTR rendering even in RTL/Arabic
   so the math reads naturally left-to-right as: 1 X 175.00 = 175.00 */
.xoo-wsc-qty-price {
    direction: ltr !important;
    text-align: left !important;
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    unicode-bidi: isolate !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

body.rtl .xoo-wsc-qty-price {
    direction: ltr !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

.xoo-wsc-qty-price > span {
    display: inline-flex !important;
    align-items: baseline !important;
    flex-shrink: 0;
}

/* Hide the struck-through original price — keep only the current price for clean math display */
.xoo-wsc-qty-price del,
.xoo-wsc-qty-price .screen-reader-text {
    display: none !important;
}

.xoo-wsc-qty-price ins {
    text-decoration: none !important;
    background: transparent !important;
}

@media (max-width: 767px) {
    .woocommerce-cart .cart-item img,
    .woocommerce-cart .cart_item img.attachment-woocommerce_thumbnail,
    .woocommerce-cart .product-image img,
    .woocommerce-cart [class*="cart-item"] img,
    .woocommerce-cart [class*="cart_item"] img,
    .woocommerce-cart .product img.wp-post-image {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
    }
}

.woocommerce table.shop_table td.product-name a {
    color: var(--oak-dark);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: var(--oak-spacing);
}

.woocommerce table.shop_table td.product-name a:hover {
    color: var(--oak-primary);
}

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
    font-weight: 500;
    color: var(--oak-dark);
    font-size: 0.95rem;
}

/* Remove button */
.woocommerce a.remove {
    color: var(--oak-dark-55) !important;
    font-size: 1.5rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

.woocommerce a.remove:hover {
    background: var(--oak-primary);
    color: #fff !important;
}

/* Coupon input */
.woocommerce .cart .coupon .input-text {
    border: 1px solid var(--oak-dark-15);
    border-radius: 0;
    padding: 0.7rem 1rem;
    font-family: var(--oak-font);
    font-size: 0.9rem;
    min-width: 200px;
}

/* Update cart button */
.woocommerce .cart .button[name="update_cart"] {
    background: var(--oak-primary) !important;
    color: #fff !important;
    border: 1px solid var(--oak-primary) !important;
}

.woocommerce .cart .button[name="update_cart"]:hover {
    background: var(--oak-primary-hover) !important;
    color: #fff !important;
    border-color: var(--oak-primary-hover) !important;
}

.woocommerce .cart .button[name="update_cart"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cart totals */
.woocommerce .cart-collaterals {
    margin-top: 2.5rem;
}

.woocommerce .cart-collaterals .cart_totals {
    border: none;
    padding: 0;
    float: right;
    width: 100%;
    max-width: 480px;
}

.woocommerce .cart-collaterals .cart_totals h2 {
    font-family: var(--oak-font);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--oak-dark);
    margin-bottom: 1.25rem;
    letter-spacing: var(--oak-spacing);
}

.woocommerce .cart-collaterals .cart_totals table {
    border: 1px solid var(--oak-dark-08);
}

.woocommerce .cart-collaterals .cart_totals table th {
    background: var(--oak-light);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 1rem 1.25rem;
    width: 35%;
}

.woocommerce .cart-collaterals .cart_totals table td {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
}

/* Proceed to checkout */
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 32px;
    font-size: 1rem;
    border-radius: var(--oak-radius);
    background: var(--oak-primary);
    border-color: var(--oak-primary);
    margin-top: 1.25rem;
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--oak-primary-hover);
    border-color: var(--oak-primary-hover);
}

/* ========== CHECKOUT ========== */

/* Phone field validation — override WooCommerce green/red */
.form-row.oak-phone-invalid.woocommerce-validated input#billing_phone,
.form-row.oak-phone-invalid input#billing_phone {
    border-color: #d33915 !important;
}
.form-row.oak-phone-valid input#billing_phone {
    border-color: #69bf4a !important;
}

/* Phone field on Arabic checkout — keep digits in LTR reading order
   (+971-... reads left to right) but right-align the whole block so the
   field visually matches the other RTL inputs.
   Higher-specificity selectors + !important to beat WC + plugin defaults. */
body.rtl input[type="tel"],
body.rtl input#billing_phone,
body.rtl input#shipping_phone,
body.rtl .woocommerce form .form-row input#billing_phone,
body.rtl .woocommerce form .form-row input#shipping_phone,
body.rtl .woocommerce-checkout #billing_phone,
body.rtl .woocommerce-checkout #shipping_phone {
    direction: ltr !important;
    text-align: right !important;
    unicode-bidi: embed !important;
}

/* Checkout page container */
.woocommerce-checkout .woocommerce {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 50px 36px;
}

/* Checkout as grid: form left, order right */
.woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    align-items: start;
}

/* Customer details (billing + shipping + notes) take left column */
.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / 4;
}

/* Billing and shipping stack vertically */
.woocommerce-checkout .col2-set {
    display: block;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
    margin-bottom: 24px;
}

/* Ship to different address — below billing */
.woocommerce-checkout .col2-set .col-2 h3 {
    font-size: 16px;
    margin-top: 8px;
}

/* Order notes — below shipping, inside left column */
.woocommerce-checkout .woocommerce-additional-fields {
    grid-column: 1;
    margin-top: 0;
}

/* Order heading + order review take right column */
.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--oak-font);
    font-size: 20px;
    font-weight: 400;
    color: #121212;
    letter-spacing: 0.6px;
    margin: 0 0 16px;
    padding-top: 0;
}

.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 96px;
}

/* Headings */
.woocommerce-checkout h3 {
    font-family: var(--oak-font);
    font-size: 20px;
    font-weight: 400;
    color: #121212;
    letter-spacing: 0.6px;
    margin: 0 0 20px;
}

/* Billing/Shipping fields in single column */
.woocommerce-checkout .col2-set {
    display: block;
}

/* Form fields */
.woocommerce form .form-row label {
    color: rgba(18, 18, 18, 0.75);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.woocommerce form .form-row {
    margin-bottom: 16px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid rgba(18, 18, 18, 0.55);
    border-radius: 0;
    padding: 12px 14px;
    color: #121212;
    background: #fff;
    font-family: var(--oak-font);
    font-size: 16px;
    letter-spacing: 0.6px;
    width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: #121212;
    outline: none;
    box-shadow: none;
}

/* Country field — show as read-only */
.woocommerce-checkout #billing_country_field select,
.woocommerce-checkout #shipping_country_field select {
    pointer-events: none;
    background: #f5f5f5;
    color: rgba(18, 18, 18, 0.75);
}

/* Order review table */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    border: 1px solid rgba(18, 18, 18, 0.1);
    border-collapse: collapse;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    font-weight: 600;
    color: #121212;
    background: rgba(18, 18, 18, 0.02);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-size: 16px;
    font-weight: 700;
    color: #121212;
}

/* Payment section */
.woocommerce-checkout #payment {
    background: rgba(18, 18, 18, 0.02);
    border: 1px solid rgba(18, 18, 18, 0.08);
    border-radius: 0;
    padding: 20px;
    margin-top: 20px;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.woocommerce-checkout #payment .payment_method label {
    font-size: 15px;
    color: #121212;
}

/* Place order button */
.woocommerce-checkout #place_order {
    width: 100%;
    background: var(--oak-primary);
    border: 1px solid var(--oak-primary);
    color: #fff;
    border-radius: 40px;
    padding: 14px 32px;
    font-family: var(--oak-font);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
}

.woocommerce-checkout #place_order:hover {
    background: var(--oak-primary-hover);
    border-color: var(--oak-primary-hover);
}

/* ===== CHECKOUT MOBILE ===== */
@media (max-width: 767px) {
    .woocommerce-checkout .woocommerce {
        padding: 92px 16px 24px;
    }

    .woocommerce-checkout form.woocommerce-checkout {
        grid-template-columns: 1fr;
    }

    .woocommerce-checkout #customer_details {
        grid-column: 1;
        grid-row: auto;
    }

    .woocommerce-checkout #order_review_heading {
        grid-column: 1;
        grid-row: auto;
        margin-top: 24px;
    }

    .woocommerce-checkout #order_review {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }

    .woocommerce-checkout h3 {
        font-size: 18px;
    }
}

/* ========== THANK YOU / ORDER RECEIVED ========== */
.woocommerce-order-received .woocommerce {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 50px 60px;
}

/* Page heading ("Checkout") */
.woocommerce-order-received .entry-title,
.woocommerce-order-received .page-title,
.woocommerce-order-received h1.entry-title {
    font-family: var(--oak-font);
    font-size: 32px;
    font-weight: 700;
    color: #121212;
    letter-spacing: 0;
    margin: 0 0 12px;
}

/* "Thank you. Your order has been received." */
.woocommerce-order-received .woocommerce-thankyou-order-received,
.woocommerce-order-received p.woocommerce-thankyou-order-received {
    font-family: var(--oak-font);
    font-size: 26px;
    font-weight: 600;
    color: #121212;
    letter-spacing: 0.3px;
    line-height: 1.3;
    margin: 0 0 28px;
}

/* Order overview bar — horizontal flex with vertical separators */
.woocommerce-order-received ul.woocommerce-order-overview,
.woocommerce-order-received ul.order_details {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding: 16px 0;
    margin: 0 0 36px;
    border: none;
    background: transparent;
}

.woocommerce-order-received ul.woocommerce-order-overview::before,
.woocommerce-order-received ul.woocommerce-order-overview::after,
.woocommerce-order-received ul.order_details::before,
.woocommerce-order-received ul.order_details::after {
    content: none !important;
    display: none !important;
}

.woocommerce-order-received ul.woocommerce-order-overview li,
.woocommerce-order-received ul.order_details li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 28px;
    margin: 0;
    border: none;
    border-right: 1px solid rgba(18, 18, 18, 0.15);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(18, 18, 18, 0.6);
    text-align: left;
    line-height: 1.4;
}

.woocommerce-order-received ul.woocommerce-order-overview li:first-child,
.woocommerce-order-received ul.order_details li:first-child {
    padding-left: 0;
}

.woocommerce-order-received ul.woocommerce-order-overview li:last-child,
.woocommerce-order-received ul.order_details li:last-child {
    border-right: none;
}

.woocommerce-order-received ul.woocommerce-order-overview li strong,
.woocommerce-order-received ul.order_details li strong {
    display: block;
    font-family: var(--oak-font);
    font-size: 16px;
    font-weight: 700;
    color: #121212;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
    line-height: 1.4;
}

/* RTL: flip dividers */
body.rtl .woocommerce-order-received ul.woocommerce-order-overview li,
body.rtl .woocommerce-order-received ul.order_details li {
    border-right: none;
    border-left: 1px solid rgba(18, 18, 18, 0.15);
    text-align: right;
}

body.rtl .woocommerce-order-received ul.woocommerce-order-overview li:first-child,
body.rtl .woocommerce-order-received ul.order_details li:first-child {
    padding-left: 28px;
    padding-right: 0;
}

body.rtl .woocommerce-order-received ul.woocommerce-order-overview li:last-child,
body.rtl .woocommerce-order-received ul.order_details li:last-child {
    border-left: none;
}

/* Order details panel wrapper — gradient header on top, table below */
.woocommerce-order-details {
    border: 1px solid rgba(18, 18, 18, 0.1);
    border-radius: 6px;
    padding: 0;
    margin-bottom: 32px;
    background: #fff;
    overflow: hidden;
}

/* "Order details" heading — flat light bar (no gradient) */
.woocommerce-order-details > h2,
.woocommerce-order-received .woocommerce-order-details__title {
    font-family: var(--oak-font);
    font-size: 20px;
    font-weight: 700;
    color: #121212;
    letter-spacing: 0;
    margin: 0;
    padding: 18px 28px;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

/* Order details table */
.woocommerce-order-received .woocommerce-table--order-details,
.woocommerce-order-details .woocommerce-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin: 0;
}

.woocommerce-order-received .woocommerce-table--order-details thead th {
    font-family: var(--oak-font);
    font-size: 14px;
    font-weight: 700;
    color: #121212;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.1);
}

body.rtl .woocommerce-order-received .woocommerce-table--order-details thead th {
    text-align: right;
}

.woocommerce-order-received .woocommerce-table--order-details tbody td,
.woocommerce-order-received .woocommerce-table--order-details tfoot td,
.woocommerce-order-received .woocommerce-table--order-details tfoot th {
    font-family: var(--oak-font);
    font-size: 14px;
    color: rgba(18, 18, 18, 0.7);
    padding: 18px 28px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
    background: transparent;
    text-align: left;
    vertical-align: middle;
}

body.rtl .woocommerce-order-received .woocommerce-table--order-details tbody td,
body.rtl .woocommerce-order-received .woocommerce-table--order-details tfoot td,
body.rtl .woocommerce-order-received .woocommerce-table--order-details tfoot th {
    text-align: right;
}

/* Both columns left-aligned in cell, value column starts further right via th width */
.woocommerce-order-received .woocommerce-table--order-details thead th:last-child,
.woocommerce-order-received .woocommerce-table--order-details tbody td:last-child,
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
    text-align: left;
}

body.rtl .woocommerce-order-received .woocommerce-table--order-details thead th:last-child,
body.rtl .woocommerce-order-received .woocommerce-table--order-details tbody td:last-child,
body.rtl .woocommerce-order-received .woocommerce-table--order-details tfoot td {
    text-align: right;
}

/* Bold left-column labels (Subtotal, Shipping, Total) */
.woocommerce-order-received .woocommerce-table--order-details tfoot th {
    font-weight: 700;
    color: #121212;
    text-align: left;
    width: 50%;
}

body.rtl .woocommerce-order-received .woocommerce-table--order-details tfoot th {
    text-align: right;
}

/* Last row — no bottom border */
.woocommerce-order-received .woocommerce-table--order-details tbody tr:last-child td,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th {
    border-bottom: none;
}

/* Product link — brand blue, no underline */
.woocommerce-order-received .woocommerce-table--order-details .order_item .product-name a {
    color: #2b6cb0;
    text-decoration: none;
    font-weight: 400;
}

.woocommerce-order-received .woocommerce-table--order-details .order_item .product-name a:hover {
    text-decoration: underline;
}

.woocommerce-order-received .woocommerce-table--order-details .product-quantity {
    color: #121212;
    font-weight: 700;
    margin-left: 4px;
}

/* Final total row — same weight as other label rows (matches reference) */
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 14px;
    font-weight: 700;
    color: #121212;
}

/* Customer details wrapper — no border, just spacing for the address grid */
.woocommerce-customer-details {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: 28px;
}

/* Hide the "Customer details" h2 — column titles serve that purpose */
.woocommerce-customer-details > h2,
.woocommerce-order-received .woocommerce-customer-details__title {
    display: none;
}

section.woocommerce-columns.col2-set.addresses,
.woocommerce-customer-details .col2-set,
.woocommerce-customer-details > .woocommerce-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
}

section.woocommerce-columns.col2-set.addresses::before,
section.woocommerce-columns.col2-set.addresses::after,
.woocommerce-customer-details .col2-set::before,
.woocommerce-customer-details .col2-set::after {
    content: none !important;
    display: none !important;
}

/* Address cards — visible border + soft shadow; same in LTR and RTL. */
.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2,
.woocommerce-customer-details .woocommerce-column,
body.rtl .woocommerce-customer-details .col-1,
body.rtl .woocommerce-customer-details .col-2,
body.rtl .woocommerce-customer-details .woocommerce-column {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(18, 18, 18, 0.18) !important;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(18, 18, 18, 0.06);
    position: relative;
}

/* Card title — generous padding so text never touches the card border.
   Use longhand properties + max specificity to beat any global heading reset. */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title,
body.rtl .woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
    font-family: var(--oak-font);
    font-size: 16px;
    font-weight: 700;
    color: #121212;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-top: 20px !important;
    padding-right: 28px !important;
    padding-bottom: 14px !important;
    padding-left: 28px !important;
    background: transparent;
    border: none;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}
.woocommerce-order-received .woocommerce-column__title::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
}
/* Billing card → credit-card icon */
.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-column__title::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b88360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
}
/* Shipping card → truck icon */
.woocommerce-order-received .woocommerce-column--shipping-address .woocommerce-column__title::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b88360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 3h15v13H1z'/><polygon points='16 8 20 8 23 11 23 16 16 16 16 8'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>");
}

/* Subtle separator under title — uses an inset rule so it doesn't touch card edges */
.woocommerce-order-received .woocommerce-column__title::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 56px;
    height: 1px;
    background: rgba(18, 18, 18, 0.06);
}
body.rtl .woocommerce-order-received .woocommerce-column__title::after {
    left: 28px;
    right: 28px;
}

.woocommerce-order-received address,
body.rtl .woocommerce-order-received address {
    font-style: normal;
    font-size: 14px;
    color: rgba(18, 18, 18, 0.75);
    line-height: 1.85;
    letter-spacing: 0;
    padding: 22px 28px 24px;
    background: transparent;
    border: none !important;
    border-radius: 0;
    margin: 0;
}

/* Phone and email rows — same plain text style as address lines above */
.woocommerce-order-received address .woocommerce-customer-details--phone,
.woocommerce-order-received address .woocommerce-customer-details--email,
body.rtl .woocommerce-order-received address .woocommerce-customer-details--phone,
body.rtl .woocommerce-order-received address .woocommerce-customer-details--email {
    margin: 6px 0 0;
    padding: 0;
    color: rgba(18, 18, 18, 0.75);
}

/* Hide WooCommerce's default ::before icons on phone/email rows. They use
   the WooCommerce icon font (codepoints \e037 / \e02f); when our Frutiger
   override changes the inherited font, they render as the chain/envelope
   fallback emojis instead. Cleaner without them. */
.woocommerce-order-received .woocommerce-customer-details--phone::before,
.woocommerce-order-received .woocommerce-customer-details--email::before,
body.rtl .woocommerce-order-received .woocommerce-customer-details--phone::before,
body.rtl .woocommerce-order-received .woocommerce-customer-details--email::before {
    content: none !important;
    display: none !important;
}
/* Phone always reads LTR even on Arabic pages — use isolate-override so the
   "+" sign is forced to render at the start (left) of the digits, not at the
   visual end as RTL bidi would otherwise do. */
.woocommerce-order-received address .woocommerce-customer-details--phone,
body.rtl .woocommerce-order-received address .woocommerce-customer-details--phone {
    direction: ltr !important;
    unicode-bidi: isolate-override !important;
    display: inline-block;
}
body.rtl .woocommerce-order-received address .woocommerce-customer-details--phone {
    text-align: right;
    float: right;
    clear: both;
}

.woocommerce-order-received address p {
    margin: 4px 0 0;
}

.woocommerce-order-received address .woocommerce-customer-details--phone,
.woocommerce-order-received address .woocommerce-customer-details--email {
    color: rgba(18, 18, 18, 0.75);
    margin: 6px 0 0;
}

.woocommerce-order-received .order-again {
    margin-top: 16px;
}

@media (max-width: 767px) {
    .woocommerce-order-received .woocommerce {
        padding: 92px 16px 32px;
    }

    .woocommerce-order-received .entry-title,
    .woocommerce-order-received h1.entry-title {
        font-size: 24px;
    }

    .woocommerce-order-received ul.woocommerce-order-overview,
    .woocommerce-order-received ul.order_details {
        flex-direction: column;
        gap: 12px;
        padding: 12px 0;
    }

    .woocommerce-order-received ul.woocommerce-order-overview li,
    .woocommerce-order-received ul.order_details li {
        border-right: none;
        border-bottom: 1px solid rgba(18, 18, 18, 0.1);
        padding: 8px 0 12px;
    }

    .woocommerce-order-received ul.woocommerce-order-overview li:last-child,
    .woocommerce-order-received ul.order_details li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    body.rtl .woocommerce-order-received ul.woocommerce-order-overview li,
    body.rtl .woocommerce-order-received ul.order_details li {
        border-left: none;
        border-bottom: 1px solid rgba(18, 18, 18, 0.1);
        padding: 8px 0 12px;
    }

    /* Mobile: tighter inside-cell padding for table & address cards */
    .woocommerce-order-details > h2,
    .woocommerce-order-received .woocommerce-order-details__title,
    .woocommerce-order-received .woocommerce-column__title {
        padding: 14px 18px;
        font-size: 17px;
    }

    .woocommerce-order-received .woocommerce-table--order-details thead th,
    .woocommerce-order-received .woocommerce-table--order-details tbody td,
    .woocommerce-order-received .woocommerce-table--order-details tfoot td,
    .woocommerce-order-received .woocommerce-table--order-details tfoot th {
        padding: 14px 18px;
    }

    .woocommerce-order-received address {
        padding: 16px 18px;
    }

    section.woocommerce-columns.col2-set.addresses,
    .woocommerce-customer-details .col2-set,
    .woocommerce-customer-details > .woocommerce-columns {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ========== MY ACCOUNT ========== */
.woocommerce-account .woocommerce-MyAccount-navigation {
    border: none;
    border-right: 1px solid rgba(18, 18, 18, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.85rem 1.25rem;
    color: rgba(18, 18, 18, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.06rem;
    transition: color 0.3s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: #121212;
    font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #121212;
}

/* My Account page container — full width by default */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px 40px;
}

/* Login / Register form — only narrow when logged out (form is the direct/only child) */
.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 600px;
}

.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
    border: 1px solid rgba(18, 18, 18, 0.08);
    padding: 2rem;
    border-radius: 0;
    background: #fff;
}

.woocommerce form.woocommerce-form-login h2,
.woocommerce form.woocommerce-form-register h2,
.woocommerce .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
    font-family: var(--oak-font);
    font-weight: 400;
    letter-spacing: 0.06rem;
}

/* Login/register form inputs — constrain height */
.woocommerce form.woocommerce-form-login input.input-text,
.woocommerce form.woocommerce-form-register input.input-text,
.woocommerce form.lost_reset_password input.input-text {
    height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

.woocommerce form.woocommerce-form-login .form-row,
.woocommerce form.woocommerce-form-register .form-row {
    margin-bottom: 14px;
}

.woocommerce form.woocommerce-form-login label,
.woocommerce form.woocommerce-form-register label {
    font-size: 13px;
    margin-bottom: 4px;
}

/* Login button */
.woocommerce form.woocommerce-form-login button[type="submit"],
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
    border-radius: var(--oak-radius);
    padding: 10px 28px !important;
}

/* ========== PAGINATION ========== */
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    margin: 0;
    padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-family: var(--oak-font);
    font-size: 0.9rem;
    letter-spacing: 0.06rem;
    color: rgba(18, 18, 18, 0.6);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.3s;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    color: #121212;
    border-color: rgba(18, 18, 18, 0.15);
    background: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    color: var(--oak-dark);
    font-weight: 700;
    border-color: var(--oak-primary);
    background: transparent;
}

/* Prev/Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
    font-size: 1.1rem;
    color: #121212;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a.prev:hover,
.woocommerce nav.woocommerce-pagination ul li a.next:hover {
    color: rgba(18, 18, 18, 0.5);
    border: none;
}

/* ========== QUANTITY INPUT ========== */
.woocommerce .quantity .qty {
    border: 1px solid rgba(18, 18, 18, 0.55);
    border-radius: 0;
    padding: 0.6rem;
    text-align: center;
    width: 4.5rem;
    font-family: var(--oak-font);
}

/* Custom quantity with +/- buttons */
.oak-quantity {
    border: none !important;
}

.oak-qty-label {
    display: inline-block !important;
    white-space: nowrap;
    font-family: var(--oak-font);
    font-size: 13px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 0.4px;
    line-height: 1.5;
    margin: 0;
}

.oak-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(18, 18, 18, 0.55);
    border-radius: 40px;
    overflow: hidden;
}

.oak-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 42px;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #121212;
    cursor: pointer;
    font-family: var(--oak-font);
    transition: background 0.2s;
    padding: 0;
}

.oak-qty-btn:hover {
    background: rgba(18, 18, 18, 0.04);
}

.oak-qty-wrap .qty {
    border: none !important;
    border-left: 1px solid rgba(18, 18, 18, 0.2) !important;
    border-right: 1px solid rgba(18, 18, 18, 0.2) !important;
    width: 50px !important;
    height: 42px;
    text-align: center;
    font-family: var(--oak-font);
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    -moz-appearance: textfield;
}

.oak-qty-wrap .qty::-webkit-outer-spin-button,
.oak-qty-wrap .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ========== ORDERBY / RESULT COUNT ========== */
.woocommerce .woocommerce-ordering select {
    border: 1px solid rgba(18, 18, 18, 0.55);
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    color: #121212;
    border-radius: 0;
    font-family: var(--oak-font);
    letter-spacing: 0.06rem;
}

.woocommerce .woocommerce-result-count {
    color: rgba(18, 18, 18, 0.55);
    font-size: 0.9rem;
    letter-spacing: 0.06rem;
}

/* ========== PAGE TITLES ========== */
.woocommerce .woocommerce-products-header__title,
.woocommerce .page-title {
    font-family: var(--oak-font);
    font-size: 2rem;
    font-weight: 400;
    color: #121212;
    margin-bottom: 1.5rem;
    letter-spacing: 0.06rem;
    text-align: start;
}

/* Hide default archive title (we use oak-page-title) */
.oak-shop-page .woocommerce-products-header {
    display: none;
}

/* Hide breadcrumb on shop page (matches live site) */
.oak-shop-page .woocommerce-breadcrumb {
    display: none;
}

/* ========== PLACEHOLDER IMAGE FIX ========== */
.woocommerce ul.products li.product a img.wp-post-image,
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover;
    background: #f3f3f3;
}

/* (single product layout is in SINGLE PRODUCT section above) */

/* ========== MINI CART ========== */
.woocommerce .widget_shopping_cart .cart_list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.woocommerce .widget_shopping_cart .cart_list li a {
    color: #121212;
    text-decoration: none;
    font-weight: 400;
}

.woocommerce .widget_shopping_cart .total {
    border-top: 1px solid rgba(18, 18, 18, 0.08);
    padding-top: 0.75rem;
    font-weight: 700;
}

.woocommerce .widget_shopping_cart .buttons a {
    border-radius: 40px;
}

/* ========== SVG CURRENCY SYMBOL — inherit text color everywhere ========== */
.woocommerce-Price-amount svg,
.amount svg,
.price svg {
    display: inline-block !important;
    width: 0.9em !important;
    height: 0.9em !important;
    vertical-align: -0.08em !important;
    fill: currentColor !important;
    transition: fill 0.3s ease;
}

/* Price layout — keep number + currency icon on one line.
   Stay inline (NOT flex) so the native <del> line-through can draw
   continuously across both digits and the SVG icon. */
.woocommerce-Price-amount,
.woocommerce-Price-amount > bdi {
    white-space: nowrap;
}

/* In RTL, force every price to render LTR so the currency symbol stays
   on the LEFT (visual start) of the digits, not flipped to the right
   by the BiDi algorithm. Applies to all prices: cart rows, totals,
   order tables, side cart, etc. */
body.rtl .woocommerce-Price-amount,
body.rtl .woocommerce-Price-amount bdi,
body.rtl .amount,
body.rtl .price .amount {
    direction: ltr !important;
    unicode-bidi: embed !important;
    display: inline-block;
}

/* When the amount is inside <del> (sale-original price), draw the
   line-through on the inline-block child too. Inline-block traps the
   parent's text-decoration, so we re-apply it explicitly. */
del .woocommerce-Price-amount,
del .woocommerce-Price-amount bdi,
del .amount,
del .amount bdi,
.price del,
.price del *,
del.woocommerce-Price-amount,
ins ~ del,
ins ~ del * {
    text-decoration: line-through !important;
    text-decoration-color: inherit;
}
del .woocommerce-Price-currencySymbol svg {
    text-decoration: line-through !important;
}
.woocommerce-Price-currencySymbol {
margin-inline: -4px;
}

/* ========== SIDE CART PLUGIN (xoo-wsc) ========== */

/* SVG dirham in side cart — match the sizing/baseline used elsewhere on the
   site so the symbol sits flush against the digits instead of riding high. */
.xoo-wsc-container .woocommerce-Price-amount svg,
.xoo-wsc-container .amount svg,
.xoo-wsc-modal .woocommerce-Price-amount svg,
.xoo-wsc-modal .amount svg,
.xoo-wsc-container .woocommerce-Price-currencySymbol svg,
.xoo-wsc-modal .woocommerce-Price-currencySymbol svg {
    display: inline-block !important;
    width: 0.85em !important;
    height: 0.85em !important;
    vertical-align: -0.12em !important;
    margin: 0 0.15em 0 0 !important;
    fill: currentColor !important;
}
body.rtl .xoo-wsc-container .woocommerce-Price-amount svg,
body.rtl .xoo-wsc-container .amount svg,
body.rtl .xoo-wsc-modal .woocommerce-Price-amount svg,
body.rtl .xoo-wsc-modal .amount svg {
    margin: 0 0 0 0.15em !important;
}

/* Product image in side cart — ensure visible and proper size */
.xoo-wsc-product-image,
.xoo-wsc-img,
.xoo-wsch-img,
.xoo-wsc-product img,
.xoo-wsc-cart-prod-img,
.xoo-wsc-cart-prod-img img {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    object-fit: cover !important;
    background: #f7f7f7 !important;
}

/* Generic fallback: any img inside the product row */
.xoo-wsc-product img,
.xoo-wsc-modal .xoo-wsc-product img {
    width: 80px !important;
    height: auto !important;
    max-width: 80px !important;
}

/* Checkout button — keep text + price on one line */
.xoo-wsc-ft-btn-checkout,
.xoo-wsc-ft-btn a {
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

/* Side cart buttons — brand styling */
.xoo-wsc-ft-btn a {
    border-radius: var(--oak-radius) !important;
    font-family: var(--oak-font) !important;
    letter-spacing: 0.5px !important;
}

/* Price amounts in side cart — keep inline (no flex, so native <del> line-through can cross digits + SVG icon) */
.xoo-wsc-container .amount,
.xoo-wsc-container .woocommerce-Price-amount {
    white-space: nowrap !important;
    display: inline !important;
}

/* XOO Side Cart checkout button — Arabic only.
   1) Render the price as "symbol then number" (e.g. ب 317.00) by forcing
      inline-flex + direction: ltr on the amount span. The amount span's
      source order is [symbol-span, "&nbsp;317.00" text-node].
   2) Null the plugin's default `.amount:before { content: "-" }` (which puts
      a dash before the price) and re-add the dash AFTER the price via :after.
   Other languages keep the plugin's stock layout. */
body.rtl .xoo-wsc-ft-btn-checkout .woocommerce-Price-amount {
    display: inline-flex !important;
    align-items: baseline !important;
    direction: ltr !important;
}

body.rtl a.xoo-wsc-ft-btn-checkout .amount:before {
    content: none !important;
}

body.rtl a.xoo-wsc-ft-btn-checkout .amount:after {
    content: "-";
    margin: 0 8px;
    font-weight: bold;
}

/* ========== THANK YOU PAGE ========== */
.woocommerce .woocommerce-thankyou-order-received {
    font-family: var(--oak-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: #121212;
    letter-spacing: 0.06rem;
}

/* ========== WRAPPER / CONTENT AREA ========== */
.woocommerce .content-area,
.woocommerce-page .content-area {
    max-width: 1400px;
    margin: 0 auto;
    padding: 36px 16px;
}

@media (max-width: 749px) {
    .woocommerce .content-area,
    .woocommerce-page .content-area {
        padding: 27px 8px;
    }
}

/* ========== SHOP PAGE LAYOUT ========== */
.oak-shop-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 50px 36px;
}

.oak-page-title {
    font-family: var(--oak-font);
    font-size: 30px;
    font-weight: 400;
    color: #121212;
    letter-spacing: 0.6px;
    line-height: 1.3;
    margin: 0 0 1.5rem;
    text-align: start;
}

@media (min-width: 750px) {
    .oak-page-title {
        font-size: 40px;
    }
}

/* Top bar: Sort by + product count */
.oak-top-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.oak-top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oak-sort-label {
    font-size: 14px;
    color: rgba(18, 18, 18, 0.85);
    letter-spacing: 0.4px;
    line-height: 1.5;
}

.oak-top-bar .woocommerce-ordering {
    float: none;
    margin: 0;
}

.oak-top-bar .woocommerce-ordering select {
    border: none;
    background: transparent;
    font-size: 14px;
    color: rgba(18, 18, 18, 0.75);
    font-weight: 400;
    font-family: var(--oak-font);
    letter-spacing: 0.4px;
    line-height: 1.5;
    padding: 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(18, 18, 18, 0.3);
    border-radius: 0;
}

.oak-top-bar .woocommerce-result-count {
    float: none;
    margin: 0;
    font-size: 14px;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 0.6px;
    line-height: 1.5;
}

/* Main layout: sidebar + grid */
.oak-shop-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* ========== LEFT SIDEBAR ========== */
.oak-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    padding-top: 8px;
    padding-inline-end: 30px;
}

.oak-filter-heading {
    font-family: var(--oak-font);
    font-size: 15px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.85);
    letter-spacing: 0.4px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oak-filter-clear {
    font-size: 14px;
    color: rgba(18, 18, 18, 0.75);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.oak-filter-clear:hover {
    color: #121212;
}

/* Active filter tags */
.oak-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.oak-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2.5px 13px;
    box-shadow: 0 0 0 1px rgb(18, 18, 18);
    border: none;
    border-radius: 26px;
    font-size: 14px;
    color: rgb(18, 18, 18);
    text-decoration: none;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.oak-active-tag:hover {
    border-color: #121212;
    color: #121212;
}

.oak-active-tag-x {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
}

.oak-filter-group {
    border-top: 1px solid rgba(18, 18, 18, 0.1);
    padding: 1rem 0;
}

.oak-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--oak-font);
    font-size: 14px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 0.4px;
    line-height: 1.3;
    cursor: pointer;
}

.oak-filter-toggle svg {
    transition: transform 0.3s;
}

.oak-filter-group.collapsed .oak-filter-toggle svg {
    transform: rotate(-90deg);
}

.oak-filter-content {
    padding-top: 0.75rem;
    transition: max-height 0.3s ease;
}

.oak-filter-group.collapsed .oak-filter-content {
    display: none;
}

.oak-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.oak-category-list li {
    margin-bottom: 0.4rem;
}

.oak-cat-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--oak-font);
    font-size: 14px;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 0.6px;
    line-height: 1.8;
    padding: 4px 0;
    transition: color 0.3s;
}

.oak-cat-link:hover {
    color: #121212;
}

.oak-cat-link.active {
    color: #121212;
    font-weight: 700;
}

/* Checkbox style */
.oak-checkbox {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(18, 18, 18, 0.3);
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
}

.oak-checkbox.checked {
    background: #121212;
    border-color: #121212;
}

.oak-checkbox.checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.oak-cat-count {
    color: rgba(18, 18, 18, 0.4);
    font-size: 14px;
}

/* Parent category label (non-clickable heading) */
.oak-cat-parent {
    margin-bottom: 4px;
}

.oak-cat-parent-label {
    display: block;
    font-family: var(--oak-font);
    font-size: 14px;
    font-weight: 600;
    color: rgb(18, 18, 18);
    letter-spacing: 0.6px;
    padding: 6px 0;
}

/* Subcategory list — indented */
.oak-subcategory-list {
    list-style: none;
    padding: 0 0 0 8px;
    margin: 0 0 8px;
}

body.rtl .oak-subcategory-list {
    padding: 0 8px 0 0;
}

/* Price filter */
.oak-price-max-hint {
    font-size: 14px;
    color: rgba(18, 18, 18, 0.75);
    margin-bottom: 0.75rem;
}

.oak-price-filter {
    margin: 0;
}

/* Price filter — inline: From: [input] To: [input] */
.oak-price-inputs-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.oak-price-inputs-inline label {
    font-family: var(--oak-font);
    font-size: 13px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.75);
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.oak-price-inputs-inline input[type="number"] {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid rgba(18, 18, 18, 0.55);
    border-radius: 0;
    font-family: var(--oak-font);
    font-size: 13px;
    color: rgb(18, 18, 18);
    letter-spacing: 0.4px;
    background: #fff;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.oak-price-inputs-inline input[type="number"]::-webkit-outer-spin-button,
.oak-price-inputs-inline input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.oak-price-inputs-inline input[type="number"]::placeholder {
    color: rgba(18, 18, 18, 0.35);
}

.oak-price-inputs-inline input[type="number"]:focus {
    border-color: #121212;
    outline: none;
}

/* Product grid area */
.oak-products-grid {
    flex: 1;
    min-width: 0;
}

.oak-products-grid .woocommerce-result-count,
.oak-products-grid .woocommerce-ordering {
    display: none; /* Hidden here, shown in top bar */
}

/* Clear floats in grid area */
.oak-products-grid ul.products {
    clear: both;
}

/* Product card: price above title, centered text */
.woocommerce ul.products li.product .price {
    margin-top: 0.75rem;
    margin-bottom: 0;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.5;
    color: rgb(18, 18, 18);
}

.woocommerce ul.products li.product .price del {
    color: #d33915;
    font-size: 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0.25rem 0 0.5rem;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.6px;
    line-height: 1.333;
    color: rgb(18, 18, 18);
}

/* Tablet: sidebar above grid */
@media (max-width: 899px) and (min-width: 750px) {
    .oak-shop-layout {
        flex-direction: column;
        gap: 24px;
    }

    .oak-sidebar {
        width: 100%;
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0 24px;
        padding-inline-end: 0;
    }

    .oak-filter-heading {
        width: 100%;
    }

    .oak-filter-group {
        flex: 1;
        min-width: 200px;
    }

    .oak-mobile-filter-btn { display: none; }
}

/* Mobile: sidebar as drawer */
@media (max-width: 749px) {
    .oak-shop-page {
        padding: 92px 15px 27px;
    }

    .oak-page-title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    /* Mobile filter row */
    .oak-mobile-filter-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .oak-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: none;
        background: none;
        font-family: var(--oak-font);
        font-size: 14px;
        color: rgb(18,18,18);
        letter-spacing: 0.6px;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .oak-mobile-filter-btn svg {
        width: 16px;
        height: 16px;
    }

    .oak-mobile-product-count {
        font-size: 14px;
        color: rgba(18,18,18,0.75);
        letter-spacing: 0.6px;
    }

    /* Hide desktop sort bar on mobile */
    .oak-top-bar {
        display: none;
    }

    /* Hide sidebar by default on mobile */
    .oak-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background: #fff;
        padding: 0;
        overflow-y: auto;
        flex-direction: column;
        width: 100%;
    }

    .oak-sidebar.oak-sidebar-open {
        display: flex;
    }

    .oak-sidebar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(18,18,18,0.1);
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }

    .oak-sidebar-mobile-header span {
        font-size: 16px;
        font-weight: 400;
        color: rgb(18,18,18);
    }

    .oak-sidebar-mobile-close {
        background: none;
        border: none;
        font-size: 24px;
        color: rgb(18,18,18);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .oak-sidebar .oak-filter-heading {
        padding: 16px 20px 0;
    }

    .oak-sidebar .oak-active-filters {
        padding: 8px 20px 0;
    }

    .oak-sidebar .oak-filter-group {
        padding: 12px 20px;
        margin: 0;
    }

    /* Apply button at bottom */
    .oak-sidebar-mobile-apply {
        display: block;
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 16px 20px;
        border-top: 1px solid rgba(18,18,18,0.1);
    }

    .oak-sidebar-mobile-apply button {
        width: 100%;
        padding: 12px;
        background: rgb(18,18,18);
        color: #fff;
        border: none;
        font-family: var(--oak-font);
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* Product grid mobile */
    .oak-shop-layout {
        gap: 0;
    }

    .oak-products-grid ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
}

/* Hide mobile-only elements on desktop */
@media (min-width: 750px) {
    .oak-mobile-filter-row { display: none !important; }
    .oak-sidebar-mobile-header { display: none !important; }
    .oak-sidebar-mobile-apply { display: none !important; }
}

/* ========== UNIFIED PRODUCT CARD (used on shop, category, homepage) ========== */

/* Hide any leftover WooCommerce default elements inside the li */
.woocommerce ul.products li.product > a:not(.oak-product-card),
.woocommerce ul.products li.product > .price,
.woocommerce ul.products li.product > .star-rating,
.woocommerce ul.products li.product > .woocommerce-loop-product__title,
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > span.onsale {
    display: none !important;
}

.oak-product-card { text-decoration: none; text-align: center; display: block; position: relative; }
.oak-product-card-img { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #f3f3f3; margin-bottom: 8px; }
.oak-product-card-img img { width: 100% !important; height: 100% !important; object-fit: cover; transition: opacity 0.4s ease, transform 0.5s ease; aspect-ratio: 2/3; }
.oak-product-card-img .oak-img-hover { position: absolute; inset: 0; opacity: 0; }

/* Hover behavior:
   - Main image is NEVER faded out — it stays visible underneath. For single-image
     cards this prevents the empty/black flash; for two-image cards the gallery
     image is absolutely-positioned on top, so when its opacity reaches 1 it
     fully covers the main image anyway.
   - Main image gets a subtle zoom on hover, which is the only visible effect
     for single-image cards and adds a nice motion cue for two-image cards. */
.oak-product-card:hover .oak-img-hover { opacity: 1; }
.oak-product-card:hover .oak-img-main { transform: scale(1.06); }
.oak-product-card-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 12px; font-weight: 400; letter-spacing: 1px; padding: 5px 13px; line-height: 1; border-radius: 0; }
.oak-product-card-badge.oak-badge-sale { background: #d33915; color: #fff; }
.oak-product-card-badge.oak-badge-soldout { background: rgba(18, 18, 18, 0.7); color: #fff; }
body.rtl .oak-product-card-badge { left: auto; right: 10px; }
.oak-product-card-price { font-size: 16px; color: rgb(18,18,18); letter-spacing: 1px; line-height: 1.5; margin-bottom: 4px; text-align: center; }
.oak-product-card-price del { color: #d33915; font-size: 16px; }
.oak-product-card-title { font-size: 15px; font-weight: 400; color: rgb(18,18,18); letter-spacing: 0.6px; line-height: 1.333; text-align: center; margin: 0; }
.oak-product-card:hover .oak-product-card-title { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 749px) {
    .oak-product-card-price { font-size: 13px; letter-spacing: 0.5px; }
    .oak-product-card-title { font-size: 11px; }
    .oak-product-card-badge { font-size: 10px; padding: 3px 8px; top: 6px; left: 6px; }
    body.rtl .oak-product-card-badge { left: auto; right: 6px; }
}

/* ========== SALE / SOLD OUT BADGE ========== */
.woocommerce span.onsale {
    background: #d33915;
    color: #fff;
    border-radius: 0;
    padding: 5px 13px 6px;
    font-size: 12px;
    font-weight: 400;
    min-width: auto;
    min-height: auto;
    line-height: 1;
    letter-spacing: 1px;
    top: 10px;
    left: 10px;
    right: auto;
    margin: 0;
    position: absolute;
    z-index: 2;
}

/* Sold out badge on shop/category grid */
.woocommerce span.onsale.oak-badge-soldout {
    background: rgba(18, 18, 18, 0.7);
}

.woocommerce ul.products li.product .onsale {
    background: #d33915;
    border-radius: 0;
    top: 10px;
    left: 10px;
    right: auto;
}

.woocommerce ul.products li.product .onsale.oak-badge-soldout {
    background: rgba(18, 18, 18, 0.7);
}

body.rtl .woocommerce span.onsale,
body.rtl .woocommerce ul.products li.product .onsale {
    left: auto;
    right: 10px;
}

/* Single product inline badge (next to price) */
.oak-sale-badge {
    display: inline-block;
    background: #d33915;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 0;
    line-height: 1;
    vertical-align: middle;
    margin-inline-start: 8px;
}

.oak-badge-soldout-inline {
    background: rgba(18, 18, 18, 0.7);
}

/* ========== VARIANT / SIZE PILLS ========== */
.woocommerce .variations select {
    border: 1px solid rgba(18, 18, 18, 0.55);
    border-radius: 40px;
    padding: 0.5rem 1rem;
    font-family: var(--oak-font);
    letter-spacing: 0.06rem;
}

/* ========== GIFT SECTION ========== */
.gift-section-layout {
    display: flex;
    align-items: center;
    gap: 40px;
}

.gift-text-panel {
    width: 300px;
    flex-shrink: 0;
    text-align: center;
    padding: 20px 0;
}

.gift-shop-btn {
    display: inline-block;
    background: #c4956a;
    color: #fff;
    padding: 12px 40px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 40px;
    text-decoration: none;
    transition: background 0.3s;
}

.gift-shop-btn:hover {
    background: #1a1510;
}

.gift-slider-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.gift-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8e0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.gift-nav-prev {
    left: -18px;
}

.gift-nav-next {
    right: -18px;
}

.gift-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}

.gift-slider::-webkit-scrollbar {
    display: none;
}

.gift-card {
    flex: 0 0 270px;
    scroll-snap-align: start;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    height: 340px;
    text-decoration: none;
}

.gift-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

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

.gift-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
}

.gift-card-info {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 16px;
}

.gift-card-price {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--oak-font);
}

.gift-card-title {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    margin: 4px 0 0;
    font-family: var(--oak-font);
}

/* ===== GIFT SECTION MOBILE ===== */
@media (max-width: 768px) {
    .gift-section-layout {
        flex-direction: column;
        gap: 24px;
        padding: 0 20px;
    }

    .gift-text-panel {
        width: 100%;
        padding: 0;
    }

    .gift-slider-wrap {
        width: 100%;
    }

    .gift-nav-btn {
        width: 30px;
        height: 30px;
    }

    .gift-nav-prev {
        left: 4px;
    }

    .gift-nav-next {
        right: 4px;
    }

    .gift-card {
        flex: 0 0 220px;
        height: 280px;
    }

    .gift-section {
        padding: 40px 0 !important;
    }
}

/* ========== DIRECTIONAL DEFAULTS (LTR) ========== */
.product-badge {
    left: 8px;
    right: auto;
}

.promo-shop-btn-corner {
    right: 28px;
    left: auto;
}

.video-play-btn {
    right: 24px;
    left: auto;
}

.cart-badge,
.site-header .cart-badge {
    right: -6px;
    left: auto;
    background: black !important;
    color: #fff !important;
    /* border: 2px solid #fff; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.woocommerce-table tr{
    padding: 10px;
}
.woocommerce-Price-currencySymbol .woocommerce-Price-amount.amountb svg{
    margin-top: -3px !important;
}
.xoo-wsch-new.xoo-wsch-top {
    display: grid;
    grid-template-columns: none;
}