/* SAJANIYA CUSTOM CSS — WoodMart Child Theme
   Consolidated from WoodMart Custom CSS and WordPress Additional CSS.
   Keep the original backups. Do not paste into both old locations.
*/

/* ===== PART 1: ORIGINAL WOODMART CUSTOM CSS ===== */

/* =========================================================
   SAJANIYA HOMEPAGE STICKY HEADER
   Normal:
   transparent + white text/icons/logo

   Scrolled:
   white background + black text/icons + colored logo
   Desktop + Tablet + Mobile
   ========================================================= */


/* ---------------------------------------------------------
   1. STICKY HEADER BACKGROUND = WHITE
   --------------------------------------------------------- */

body.home .whb-header.whb-sticked .whb-general-header,
body.home .whb-header.whb-sticked .whb-header-bottom,
body.home .whb-header.whb-sticked .whb-top-bar,
body.home .whb-sticky-shadow.whb-sticked .whb-row:last-child,
body.home .whb-sticked .whb-row {
    background-color: #ffffff !important;
    background-image: none !important;
}


/* Remove black/dark sticky background */
body.home .whb-sticked .whb-color-light:not(.whb-with-bg),
body.home .whb-sticked .whb-color-dark:not(.whb-with-bg) {
    background-color: #ffffff !important;
}


/* ---------------------------------------------------------
   2. MAIN MENU = BLACK
   --------------------------------------------------------- */

body.home .whb-sticked .wd-nav-header {
    --nav-color: #111111 !important;
    --nav-color-hover: #111111 !important;
    --nav-color-active: #111111 !important;
    --nav-chevron-color: #111111 !important;
}


body.home .whb-sticked .wd-nav-header > li > a,
body.home .whb-sticked .wd-nav-header > li > a > span,
body.home .whb-sticked .wd-header-main-nav li > a,
body.home .whb-sticked .wd-header-main-nav li > a > span {
    color: #111111 !important;
}


/* Works when homepage header row is still using
   WoodMart LIGHT color scheme */
body.home .whb-sticked
:is(.color-scheme-light, .whb-color-light)
.wd-nav[class*="wd-style-"] {
    --nav-color: #111111 !important;
    --nav-color-hover: #111111 !important;
    --nav-color-active: #111111 !important;
    --nav-chevron-color: #111111 !important;
}


/* ---------------------------------------------------------
   3. HEADER ICONS = BLACK
   Search / Account / Wishlist / Cart
   --------------------------------------------------------- */

body.home .whb-sticked .wd-tools-element {
    --wd-header-el-color: #111111 !important;
    --wd-header-el-color-hover: #000000 !important;
}


body.home .whb-sticked .whb-color-light .wd-tools-element,
body.home .whb-sticked .color-scheme-light .wd-tools-element {
    --wd-header-el-color: #111111 !important;
    --wd-header-el-color-hover: #000000 !important;
}


/* Icon links */
body.home .whb-sticked .wd-tools-element > a,
body.home .whb-sticked .wd-tools-element .wd-tools-icon,
body.home .whb-sticked .wd-tools-element .wd-tools-text {
    color: #111111 !important;
}


/* SVG icons */
body.home .whb-sticked .wd-tools-element svg,
body.home .whb-sticked .wd-header-search svg,
body.home .whb-sticked .wd-header-my-account svg,
body.home .whb-sticked .wd-header-wishlist svg,
body.home .whb-sticked .wd-header-cart svg {
    color: #111111 !important;
}


/* ---------------------------------------------------------
   4. MOBILE MENU / HAMBURGER = BLACK
   --------------------------------------------------------- */

body.home .whb-sticked .wd-header-mobile-nav,
body.home .whb-sticked .wd-header-mobile-nav > a,
body.home .whb-sticked .wd-header-mobile-nav .wd-tools-icon {
    color: #111111 !important;
}


body.home .whb-sticked .wd-header-mobile-nav {
    --wd-header-el-color: #111111 !important;
    --wd-header-el-color-hover: #000000 !important;
}


/* ---------------------------------------------------------
   5. CART / WISHLIST COUNTERS
   Keep pink bubble but readable
   --------------------------------------------------------- */

body.home .whb-sticked .wd-tools-count {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   6. STICKY HEADER SHADOW
   --------------------------------------------------------- */

body.home .whb-sticked {
    box-shadow:
        0 3px 16px rgba(0, 0, 0, 0.08) !important;
}


/* ---------------------------------------------------------
   7. TABLET + MOBILE
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    body.home .whb-sticked .whb-general-header,
    body.home .whb-sticked .whb-header-bottom,
    body.home .whb-sticked .whb-row {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    body.home .whb-sticked .wd-tools-element,
    body.home .whb-sticked .wd-header-mobile-nav {
        --wd-header-el-color: #111111 !important;
        --wd-header-el-color-hover: #000000 !important;
    }

    body.home .whb-sticked .wd-header-mobile-nav,
    body.home .whb-sticked .wd-header-mobile-nav > a,
    body.home .whb-sticked .wd-tools-element > a {
        color: #111111 !important;
    }
}


/* ---------------------------------------------------------
   8. PHONE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    body.home .whb-sticked .whb-general-header,
    body.home .whb-sticked .whb-row {
        background: #ffffff !important;
    }

    body.home .whb-sticked {
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.08) !important;
    }
}

/* Sajaniya menu labels */
.wd-nav > li > a .menu-label,
.wd-nav > li > a .menu-label *,
.wd-nav .menu-label {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Sajaniya clickable video */
.sajaniya-video-link {
    position: relative !important;
}

.sajaniya-video-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
}

/* Header must remain above video */
.whb-header {
    z-index: 50 !important;
}


/* =====================================================
   SAJANIYA CATEGORY GRID
   Premium Shopify-style hover effect
   ===================================================== */

/* Individual category columns */
.saj-category-grid .wpb_column {
    overflow: hidden;
}

/* Image/card container */
.saj-category-grid .wpb_single_image,
.saj-category-grid .wd-image,
.saj-category-grid figure {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

/* Image */
.saj-category-grid img {
    display: block;
    width: 100%;
    height: auto;

    transform: scale(1);
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;

    will-change: transform;
}

/* Premium zoom on desktop */
@media (hover: hover) and (pointer: fine) {

    .saj-category-grid .wpb_column:hover img {
        transform: scale(1.055);
    }

}

/* Touch / mobile effect */
@media (hover: none) {

    .saj-category-grid .wpb_column:active img {
        transform: scale(1.035);
    }

}

/* Smooth card */
.saj-category-grid .wpb_column {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Very small lift on desktop */
@media (hover: hover) and (pointer: fine) {

    .saj-category-grid .wpb_column:hover {
        transform: translateY(-3px);
    }

}

/* Prevent zoomed image escaping */
.saj-category-grid .vc_column-inner,
.saj-category-grid .wpb_wrapper {
    overflow: hidden;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .saj-category-grid img,
    .saj-category-grid .wpb_column {
        transition: none !important;
        transform: none !important;
    }

}

/* =========================================================
   SAJANIYA INSTAGRAM SLIDER
   FINAL CSS
   Full-width background + 10-image slider
   Desktop: 5 visible
   Tablet: 3 visible
   Mobile: 2 visible
========================================================= */


/* =========================================================
   1. FULL WIDTH SECTION
========================================================= */

.saj-instagram-section {
    --saj-bg: #faf9f7;
    --saj-text: #151515;
    --saj-muted: #555555;
    --saj-arrow-border: #dddddd;

    position: relative;

    /* Break out of WoodMart / WPBakery container */
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 68px 20px 64px;

    background-color: var(--saj-bg);

    overflow: hidden;
}


/* Prevent sizing problems */

.saj-instagram-section *,
.saj-instagram-section *::before,
.saj-instagram-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   2. INNER CONTENT WIDTH
========================================================= */

.saj-instagram-inner {
    position: relative;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto;
}


/* =========================================================
   3. INSTAGRAM HEADING
========================================================= */

.saj-instagram-header {
    width: 100%;

    margin: 0 0 42px;

    text-align: center;
}


.saj-instagram-handle {
    display: inline-block;

    margin: 0;

    color: var(--saj-text) !important;

    font-size: 25px;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 0.7px;

    text-decoration: none !important;

    transition:
        opacity 0.25s ease;
}


.saj-instagram-handle:hover {
    color: var(--saj-text) !important;

    opacity: 0.65;
}


/* Subtitle */

.saj-instagram-subtitle {
    margin: 17px 0 0;

    color: var(--saj-muted);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   4. SLIDER WRAPPER
========================================================= */

.saj-instagram-slider-wrap {
    position: relative;

    width: 100%;
}


/* Actual visible area */

.saj-instagram-slider {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* =========================================================
   5. SLIDER TRACK
========================================================= */

.saj-instagram-track {
    display: flex;
    gap: 12px;

    transform: translate3d(0, 0, 0);

    transition:
        transform 1050ms cubic-bezier(0.16, 1, 0.3, 1);

    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;
}

/* =========================================================
   6. INDIVIDUAL IMAGE
========================================================= */

.saj-instagram-item {
    position: relative;

    /*
       Desktop:
       5 images visible
       4 gaps x 12px = 48px
    */

    flex: 0 0 calc((100% - 48px) / 5);

    display: block;

    min-width: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background-color: #eeeeee;

    text-decoration: none !important;
}


/* Image */

.saj-instagram-item img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.4s ease;

    backface-visibility: hidden;
}


/* =========================================================
   7. IMAGE HOVER OVERLAY
========================================================= */

.saj-instagram-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

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

    background-color: rgba(0, 0, 0, 0);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        background-color 0.35s ease;
}


/* Instagram icon */

.saj-instagram-overlay svg {
    display: block;

    width: 42px;
    height: 42px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transform:
        translateY(8px)
        scale(0.90);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   8. DESKTOP IMAGE HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .saj-instagram-item:hover img {
        transform: scale(1.06);
    }


    .saj-instagram-item:hover
    .saj-instagram-overlay {

        opacity: 1;

        background-color:
            rgba(0, 0, 0, 0.20);
    }


    .saj-instagram-item:hover
    .saj-instagram-overlay svg {

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   9. PREVIOUS / NEXT ARROWS
========================================================= */

.saj-instagram-arrow {
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 44px;
    height: 44px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 1px solid var(--saj-arrow-border);
    border-radius: 50%;

    background-color: #ffffff !important;

    color: #222222 !important;

    cursor: pointer;

    transform:
        translateY(-50%);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease,
        background-color 0.25s ease;
}


/* Arrow SVG */

.saj-instagram-arrow svg {
    display: block;

    width: 19px;
    height: 19px;

    margin: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Left arrow */

.saj-instagram-prev {
    left: -22px;
}


/* Right arrow */

.saj-instagram-next {
    right: -22px;
}


/* Arrow hover */

@media (hover: hover) and (pointer: fine) {

    .saj-instagram-arrow:not(:disabled):hover {

        background-color: #ffffff !important;

        color: #111111 !important;

        transform:
            translateY(-50%)
            scale(1.07);

        box-shadow:
            0 6px 18px
            rgba(0, 0, 0, 0.12);
    }
}


/* Disabled arrow */

.saj-instagram-arrow:disabled {
    opacity: 0.35;

    cursor: default;

    pointer-events: none;
}


/* =========================================================
   10. FOLLOW BUTTON
========================================================= */

.saj-instagram-follow-wrap {

    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 38px;
}


.saj-instagram-follow {

    min-width: 270px;
    min-height: 52px;

    display: inline-flex;

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

    gap: 10px;

    padding: 14px 32px;

    background-color: #202020;

    border:
        1px solid #202020;

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.6px;

    text-decoration: none !important;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Follow Instagram icon */

.saj-instagram-follow svg {

    display: block;

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Follow button hover */

@media (hover: hover) and (pointer: fine) {

    .saj-instagram-follow:hover {

        background-color: #ffffff;

        color: #202020 !important;

        transform:
            translateY(-2px);

        box-shadow:
            0 8px 20px
            rgba(0, 0, 0, 0.10);
    }
}


/* =========================================================
   11. TABLET
   3 IMAGES VISIBLE
========================================================= */

@media (max-width: 1024px) {

    .saj-instagram-section {

        padding:
            55px
            28px
            58px;
    }


    .saj-instagram-header {

        margin-bottom: 35px;
    }


    .saj-instagram-track {

        gap: 10px;
    }


    .saj-instagram-item {

        /*
           3 images
           2 gaps x 10px = 20px
        */

        flex:
            0 0
            calc((100% - 20px) / 3);
    }


    .saj-instagram-prev {

        left: -18px;
    }


    .saj-instagram-next {

        right: -18px;
    }

}


/* =========================================================
   12. MOBILE
   2 IMAGES VISIBLE
========================================================= */

@media (max-width: 600px) {

    .saj-instagram-section {

        padding:
            42px
            20px
            45px;
    }


    .saj-instagram-header {

        margin-bottom: 27px;
    }


    .saj-instagram-handle {

        font-size: 20px;

        letter-spacing: 0.4px;
    }


    .saj-instagram-subtitle {

        max-width: 310px;

        margin:
            11px auto
            0;

        font-size: 13px;

        line-height: 1.55;
    }


    .saj-instagram-track {

        gap: 7px;
    }


    .saj-instagram-item {

        /*
           2 images
           1 gap = 7px
        */

        flex:
            0 0
            calc((100% - 7px) / 2);
    }


    /* Smaller arrows */

    .saj-instagram-arrow {

        width: 38px;
        height: 38px;
    }


    .saj-instagram-arrow svg {

        width: 17px;
        height: 17px;
    }


    .saj-instagram-prev {

        left: -15px;
    }


    .saj-instagram-next {

        right: -15px;
    }


    /* Follow button */

    .saj-instagram-follow-wrap {

        margin-top: 27px;
    }


    .saj-instagram-follow {

        width: 100%;

        max-width: 290px;

        min-width: 0;

        min-height: 48px;
    }


    /* Mobile touch effect */

    .saj-instagram-item:active img {

        transform:
            scale(1.025);
    }

}


/* =========================================================
   13. VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .saj-instagram-section {

        padding-left: 17px;
        padding-right: 17px;
    }


    .saj-instagram-arrow {

        width: 34px;
        height: 34px;
    }


    .saj-instagram-prev {

        left: -12px;
    }


    .saj-instagram-next {

        right: -12px;
    }

}


/* =========================================================
   14. ACCESSIBILITY
========================================================= */

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

    .saj-instagram-track,
    .saj-instagram-item img,
    .saj-instagram-overlay,
    .saj-instagram-overlay svg,
    .saj-instagram-arrow,
    .saj-instagram-follow {

        transition: none !important;
    }

}


/* ==========================================
   SAJANIYA - TRANSPARENT WISHLIST
   Product Loop Item: 11863
========================================== */

/* Wishlist wrapper */

.wd-loop-item-11863 .wd-loop-prod-thumb .wd-wishlist-btn,
.wd-loop-item-11863 .wd-loop-prod-thumb .sajaniya-wishlist-button {

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

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

    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 1px solid #e9a1ad !important;
    border-radius: 50% !important;

    box-shadow: none !important;

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

    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove inner white background */

.wd-loop-item-11863 .wd-wishlist-btn > a,
.wd-loop-item-11863 .wd-wishlist-btn > a.wd-action-btn,
.wd-loop-item-11863 .sajaniya-wishlist-button a {

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

    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    color: #ffffff !important;

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

/* White heart icon */

.wd-loop-item-11863 .wd-wishlist-btn a::before,
.wd-loop-item-11863 .wd-wishlist-btn a::after,
.wd-loop-item-11863 .sajaniya-wishlist-button a::before {

    color: #ffffff !important;
}

/* SVG heart */

.wd-loop-item-11863 .wd-wishlist-btn svg,
.wd-loop-item-11863 .sajaniya-wishlist-button svg {

    width: 21px !important;
    height: 21px !important;

    fill: none !important;
    stroke: #ffffff !important;
}

/* Hover */

.wd-loop-item-11863 .wd-wishlist-btn:hover,
.wd-loop-item-11863 .sajaniya-wishlist-button:hover {

    background: rgba(233, 52, 98, 0.12) !important;

    border-color: #e93462 !important;
}

/* Mobile */

@media (max-width: 767px) {

    .wd-loop-item-11863 .wd-wishlist-btn,
    .wd-loop-item-11863 .sajaniya-wishlist-button {

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

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

}


/* ==========================================
   SAJANIYA - SHOPIFY STYLE PRODUCT LOOP
   Target: WoodMart Loop Item 11863
========================================== */

/* Product title */

.wd-loop-item-11863 .wd-loop-prod-title {

    text-align: left !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.5 !important;

    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

/* Price container */

.wd-loop-item-11863 .wd-loop-prod-price {

    text-align: left !important;

    font-size: 15px !important;

    line-height: 1.5 !important;
}

/* Regular price */

.wd-loop-item-11863 .price del {

    color: #888888 !important;

    opacity: 1 !important;

    font-weight: 400 !important;

    margin-right: 6px !important;
}

/* Sale price */

.wd-loop-item-11863 .price ins {

    color: #222222 !important;

    font-weight: 600 !important;

    text-decoration: none !important;
}

/* Discount percentage: visible on product cards and other loops. */

.wd-loop-item-11863 .sajaniya-loop-discount {

    display: inline-block !important;

    color: #df3333 !important;

    font-size: 11px !important;

    font-weight: 400 !important;

    margin-left: 5px !important;

    white-space: nowrap !important;
}

/* Mobile */

@media (max-width: 767px) {

    .wd-loop-item-11863 .wd-loop-prod-title {

        font-size: 13px !important;
    }

    .wd-loop-item-11863 .wd-loop-prod-price {

        font-size: 13px !important;
    }

    .wd-loop-item-11863 .sajaniya-loop-discount {

        font-size: 12px !important;

        margin-left: 7px !important;
    }

}

/* ===== PART 2: ORIGINAL WORDPRESS ADDITIONAL CSS ===== */

/* ==========================================================
   SAJANIYA - FEATURED OSHO MEDITATION COLLECTION

   Desktop : 4 cards
   Tablet  : 2 cards
   Mobile  : 2 cards per row - NO slider/swipe

   Desktop : Shopify-style hover
   Mobile  : Shopify-style touch/press effect
   ========================================================== */


/* ==========================================================
   1. SECTION
   ========================================================== */

.saj-categories {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 55px 20px 65px;
}


/* ==========================================================
   2. HEADING
   ========================================================== */

.saj-categories-head {
    margin: 0 0 20px;
}

.saj-categories-eyebrow {
    display: block;

    margin: 0 0 10px;

    color: #858585;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.saj-categories-head h2 {
    margin: 0 !important;

    color: #151515 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ==========================================================
   3. CATEGORY GRID
   ========================================================== */

.saj-categories-grid {
    display: grid !important;

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

    gap: 10px !important;

    width: 100%;
}


/* ==========================================================
   4. CATEGORY CARD
   ========================================================== */

.saj-category {
    position: relative;

    display: block !important;

    width: 100%;
    min-width: 0;

    background: #ffffff !important;

    border-radius: 4px;

    overflow: hidden;

    color: #111111 !important;
    text-decoration: none !important;

    transform: translateY(0);

    box-shadow:
        0 0 0 rgba(0, 0, 0, 0);

    transition:
        transform .22s ease,
        box-shadow .22s ease !important;

    -webkit-tap-highlight-color: transparent;
}


/* Remove WoodMart link styling */

.saj-category:hover,
.saj-category:focus,
.saj-category:active {
    color: #111111 !important;
    text-decoration: none !important;
}


/* ==========================================================
   5. IMAGE CONTAINER
   ========================================================== */

.saj-category-img {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #f7f5f3;

    border-radius: 4px 4px 0 0;
}


/* ==========================================================
   6. IMAGE
   ========================================================== */

.saj-category-img img {
    display: block !important;

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

    object-fit: cover !important;

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

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

    transform: none !important;

    transition: none !important;
}


/* ==========================================================
   7. CATEGORY TITLE
   ========================================================== */

.saj-category-title {
    display: flex;

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

    min-height: 38px;

    margin: 0 !important;

    padding: 9px 5px !important;

    background: #ffffff !important;

    color: #111111 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    letter-spacing: 0 !important;

    text-align: center;
    text-transform: uppercase;

    opacity: 1 !important;
}


/* ==========================================================
   8. DESKTOP HOVER
   Shopify-style lifted card + shadow
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    .saj-category:hover {
        transform: translateY(-2px) !important;

        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.12) !important;
    }

    /* No image zoom */
    .saj-category:hover .saj-category-img img {
        transform: none !important;
    }

    .saj-category:hover .saj-category-title {
        color: #111111 !important;
        opacity: 1 !important;
    }
}


/* ==========================================================
   9. TABLET
   2 cards per row
   ========================================================== */

@media (max-width: 1024px) {

    .saj-categories {
        max-width: 760px;
        padding: 45px 20px 55px;
    }

    .saj-categories-head {
        margin-bottom: 19px;
    }

    .saj-categories-head h2 {
        font-size: 24px !important;
    }

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

        gap: 14px !important;
    }

    .saj-category-title {
        font-size: 12.5px !important;
    }
}


/* ==========================================================
   10. MOBILE
   Shopify style - 2 cards per row
   NO swipe / NO slider
   ========================================================== */

@media (max-width: 767px) {

    /* Section */

    .saj-categories {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding: 35px 10px 45px;

        overflow: visible;
    }


    /* Heading */

    .saj-categories-head {
        margin-bottom: 18px;
    }

    .saj-categories-eyebrow {
        margin-bottom: 7px;

        font-size: 10px !important;
        font-weight: 400 !important;

        letter-spacing: 1.5px;
    }

    .saj-categories-head h2 {
        margin: 0 !important;

        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;

        letter-spacing: .5px;
    }


    /* 2 cards per row */

    .saj-categories-grid {
        display: grid !important;

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

        gap: 10px !important;

        width: 100% !important;

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

        overflow: visible !important;
    }


    /* Card */

    .saj-category {
        width: 100% !important;
        min-width: 0 !important;

        background: #ffffff !important;

        border-radius: 3px;

        overflow: hidden;

        /*
         * IMPORTANT:
         * Do NOT use transform:none !important here.
         * It would block the mobile touch effect.
         */

        transform: translateY(0);

        box-shadow:
            0 0 0 rgba(0, 0, 0, 0);

        transition:
            transform .18s ease,
            box-shadow .18s ease !important;
    }


    /* Image */

    .saj-category-img {
        width: 100%;

        aspect-ratio: 4 / 5;

        overflow: hidden;

        background: #f7f5f3;

        border-radius: 3px 3px 0 0;
    }

    .saj-category-img img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        transform: none !important;
    }


    /* Category title */

    .saj-category-title {
        min-height: 42px;

        padding: 8px 4px !important;

        background: #ffffff !important;

        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;

        text-align: center;
    }
}


/* ==========================================================
   11. MOBILE + TABLET TOUCH EFFECT
   Equivalent of Shopify hover on touch devices
   ========================================================== */

@media (hover: none), (pointer: coarse) {

    .saj-category:active {
        transform:
            translateY(-2px)
            scale(.99) !important;

        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.14) !important;
    }

    .saj-category:active .saj-category-title {
        color: #111111 !important;
        opacity: 1 !important;
    }
}


/* ==========================================================
   12. KEYBOARD ACCESSIBILITY
   ========================================================== */

.saj-category:focus-visible {
    outline: none;

    transform: translateY(-2px) !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.12) !important;
}


/* =========================================
   SAJANIYA JOURNAL — BOTTOM ACTIONS
   ========================================= */

.sajaniya-journal .sajaniya-journal-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    margin-top:20px;
}

/* Continue Reading */
.sajaniya-journal .sajaniya-journal-actions > a{
    margin:0 !important;
}

/* Share button */
.sajaniya-journal .sajaniya-share-btn{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    padding:0;
    margin:0;

    display:inline-flex;
    align-items:center;
    gap:7px;

    color:#111;
    font-family:inherit;
    font-size:13px;
    line-height:1;
    font-weight:600;
    letter-spacing:.5px;

    cursor:pointer;
    transition:opacity .25s ease;
}

.sajaniya-journal .sajaniya-share-btn:hover{
    opacity:.55;
}

.sajaniya-journal .sajaniya-share-icon{
    width:16px;
    height:16px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sajaniya-journal .sajaniya-share-icon svg{
    width:16px;
    height:16px;
    display:block;
    fill:currentColor;
}

/* Mobile */
@media (max-width:767px){

    .sajaniya-journal .sajaniya-journal-actions{
        gap:20px;
        margin-top:16px;
    }

    .sajaniya-journal .sajaniya-share-btn{
        font-size:12px;
    }
}

/* =====================================================
   SAJANIYA BLOG CARD - COMPACT CONTENT
   ===================================================== */

.sajaniya-journal .blog-post-loop .article-body-container,
.sajaniya-journal .blog-post-loop .article-inner,
.sajaniya-journal .blog-post-loop .entry-content {
    min-height: 0 !important;
    height: auto !important;
}

/* Remove flex stretching inside card content */
.sajaniya-journal .blog-post-loop .article-body-container {
    display: block !important;
    padding-bottom: 25px !important;
}

/* Excerpt */
.sajaniya-journal .blog-post-loop .entry-content,
.sajaniya-journal .blog-post-loop .article-body-container > .entry-content {
    margin-bottom: 18px !important;
}

/* Read more area */
.sajaniya-journal .read-more-section {
    margin-top: 18px !important;
    padding-top: 0 !important;
}

/* Our custom actions */
.sajaniya-journal .sajaniya-journal-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;

    position: static !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* Continue reading + share */
.sajaniya-journal .sajaniya-journal-actions a,
.sajaniya-journal .sajaniya-share-btn {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .sajaniya-journal .sajaniya-journal-actions {
        gap: 22px !important;
        margin-top: 15px !important;
    }

    .sajaniya-journal .blog-post-loop .article-body-container {
        padding-bottom: 22px !important;
    }
}




/* ==============================================
   SAJANIYA GLOBAL BREADCRUMBS
   Premium Minimal Design
   Desktop + Tablet + Mobile
============================================== */

/* Main breadcrumb container */

.saj-global-breadcrumb {
    display: block;
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    background: #ffffff;
    border-bottom: 1px solid #f0ede8;

    box-sizing: border-box;
}

/* Full-width, left-aligned inner container */

.saj-global-breadcrumb-inner {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 12px 30px;

    box-sizing: border-box;
}

/* Rank Math breadcrumb wrapper */

.saj-global-breadcrumb .rank-math-breadcrumb {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    text-align: left;
}

/* Breadcrumb text and alignment */

.saj-global-breadcrumb .rank-math-breadcrumb p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 8px;

    margin: 0;
    padding: 0;

    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;

    text-align: left;
    color: #77716a;
}

/* Breadcrumb links */

.saj-global-breadcrumb .rank-math-breadcrumb a {
    display: inline-block;

    color: #77716a;
    text-decoration: none;

    font-size: inherit;
    font-weight: 400;

    transition: color 0.2s ease;
}

/* Link hover */

.saj-global-breadcrumb .rank-math-breadcrumb a:hover {
    color: #aa854b;
    text-decoration: none;
}

/* Current page title */

.saj-global-breadcrumb .rank-math-breadcrumb .last {
    color: #26231e;
    font-weight: 500;
}

/* Breadcrumb separator */

.saj-global-breadcrumb .rank-math-breadcrumb .separator {
    display: inline-block;

    color: #aaa39a;

    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

/* Keyboard accessibility */

.saj-global-breadcrumb a:focus-visible {
    outline: 2px solid #aa854b;
    outline-offset: 3px;
    border-radius: 2px;
}

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

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

    .saj-global-breadcrumb-inner {
        padding: 11px 22px;
    }

    .saj-global-breadcrumb .rank-math-breadcrumb p {
        font-size: 12px;
        gap: 7px;
    }

}

/* ==============================================
   MOBILE
============================================== */

@media (max-width: 767px) {

    .saj-global-breadcrumb-inner {
        padding: 10px 15px;
    }

    .saj-global-breadcrumb .rank-math-breadcrumb p {
        font-size: 11px;
        line-height: 1.6;
        gap: 6px;
    }

    .saj-global-breadcrumb .rank-math-breadcrumb .separator {
        font-size: 12px;
    }

    .saj-global-breadcrumb .rank-math-breadcrumb .last {
        overflow-wrap: anywhere;
    }

}

/* ==============================================
   SMALL MOBILE
============================================== */

@media (max-width: 380px) {

    .saj-global-breadcrumb-inner {
        padding: 9px 12px;
    }

    .saj-global-breadcrumb .rank-math-breadcrumb p {
        font-size: 10.5px;
        gap: 5px;
    }

}

/* =========================================================
   SAJANIYA - PRODUCT LOOP AND SINGLE PRODUCT PRICE
   Consolidated: no legacy priority-11 price-details styling.
   Requires updated inc/sajaniya-product-loop.php.
   ========================================================= */

/* Product sizes on cards */
.sajaniya-loop-sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 5px 0 10px 5px !important;
    padding: 0;
    border: 0;
    background: transparent;
}

.sajaniya-loop-sizes .sajaniya-size-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #444;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

/* Discount on product cards; specific WoodMart loop item rules above remain. */
.sajaniya-loop-discount {
    display: inline-block;
    margin-left: 6px;
    padding: 0;
    color: #df3333;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Price, discount and tax are rendered inside one WooCommerce price element. */
.single-product .summary .price .sajaniya-single-price-inline {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-start;
    flex-wrap: nowrap !important;
    gap: 0 10px;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: baseline;
}

.single-product .summary .price .sajaniya-single-price-inline del,
.single-product .summary .price .sajaniya-single-price-inline ins {
    display: inline !important;
    flex-shrink: 0;
    margin: 0 !important;
    white-space: nowrap !important;
}

.single-product .summary .price .sajaniya-single-price-inline ins {
    text-decoration: none !important;
}

.single-product .summary .price .sajaniya-single-price-inline .sajaniya-single-discount {
    display: inline-block !important;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: #df3333 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

.single-product .summary .price .sajaniya-single-price-inline .sajaniya-inclusive-tax {
    display: inline-block !important;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: #777 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    .sajaniya-loop-sizes {
        gap: 8px;
        margin-left: 5px !important;
    }

    .sajaniya-loop-sizes .sajaniya-size-item {
        font-size: 11px;
    }

    .sajaniya-loop-discount {
        margin-left: 6px;
        font-size: 11px;
    }

    .single-product .summary .price .sajaniya-single-price-inline {
        gap: 0 6px;
    }

    .single-product .summary .price .sajaniya-single-price-inline .sajaniya-single-discount {
        font-size: 11px !important;
    }

    .single-product .summary .price .sajaniya-single-price-inline .sajaniya-inclusive-tax {
        font-size: 10px !important;
    }
}


/* =====================================================
   SAJANIYA - SINGLE PRODUCT SIZE SWATCHES
   Premium neutral design
===================================================== */

/* Default size buttons */
.single-product .variations_form
.wd-swatches-product[data-id="pa_size"] .wd-swatch {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #E9B83F;
    border-radius: 50%;
    box-shadow: none;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

/* Hover */
@media (hover: hover) {
    .single-product .variations_form
    .wd-swatches-product[data-id="pa_size"] .wd-swatch:not(.wd-disabled):hover {
        background-color: #E9B83F;
        color: #ffffff;
        border-color: #E9B83F;
    }
}

/* Selected size */
.single-product .variations_form
.wd-swatches-product[data-id="pa_size"] .wd-swatch.wd-active,
.single-product .variations_form
.wd-swatches-product[data-id="pa_size"] .wd-swatch.active {
    background-color: #E9B83F;
    color: #ffffff;
    border-color: #E9B83F;
}

/* Selected size remains dark on hover */
.single-product .variations_form
.wd-swatches-product[data-id="pa_size"] .wd-swatch.wd-active:hover,
.single-product .variations_form
.wd-swatches-product[data-id="pa_size"] .wd-swatch.active:hover {
    background-color: #E9B83F;
    color: #ffffff;
    border-color: #E9B83F;
}

/* =====================================================
   SAJANIYA SINGLE PRODUCT
   EXACT 60% GALLERY / 40% PRODUCT DETAILS
   DESKTOP ONLY
===================================================== */

@media (min-width: 1025px) {

    /* Main product layout */
    body.single-product
    .product-image-summary-inner.wd-grid-g {
        grid-template-columns:
            minmax(0, 60fr)
            minmax(0, 40fr) !important;
    }

    /* Left: Product gallery */
    body.single-product
    .product-image-summary-inner.wd-grid-g
    > .product-images.wd-grid-col {
        grid-column: 1 / 2 !important;
        width: 100%;
        min-width: 0;
    }

    /* Right: Product information */
    body.single-product
    .product-image-summary-inner.wd-grid-g
    > .summary.entry-summary.wd-grid-col {
        grid-column: 2 / 3 !important;
        width: 100%;
        min-width: 0;
    }

}