/* =========================================================
   NAVGRAH — SHOP / PRODUCT ARCHIVE
   =========================================================
   Scope:
   - Shop
   - Product Categories
   - Product Tags

   IMPORTANT:
   - WooCommerce functionality is NOT modified here.
   - Native category links remain native.
   - Native price filter remains native.
   - Product links remain native.
   - Shared WooCommerce hero is styled only in
     woocommerce-hero.css.
   ========================================================= */


/* =========================================================
   SHOP FOUNDATION
   ========================================================= */

.navgrah-shop-page {
    width: 100%;
    overflow: hidden;
}

.navgrah-shop-page *,
.navgrah-shop-page *::before,
.navgrah-shop-page *::after {
    box-sizing: border-box;
}


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

.navgrah-shop-content {
    width: 100%;
    padding: 72px 32px 110px;
    background: #f7f5ef;
}

.navgrah-shop-container {
    width: min(1320px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 64px;

    align-items: start;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.navgrah-shop-sidebar {
    min-width: 0;
}

.navgrah-shop-filter-block {
    margin: 0 0 38px;
    padding: 0 0 34px;

    border-bottom: 1px solid rgba(41, 38, 51, 0.12);
}

.navgrah-shop-filter-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}


/* =========================================================
   SIDEBAR HEADINGS
   ========================================================= */

.navgrah-filter-eyebrow {
    display: block;

    margin: 0 0 10px;

    color: #b88622;

    font-family: "Times New Roman", Times, serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2.4px;
    line-height: 1.4;

    text-transform: uppercase;
}

.navgrah-shop-filter-block h2 {
    margin: 0 0 21px;

    color: #292633;

    font-family: "Times New Roman", Times, serif;
    font-size: 26px;
    font-weight: 500;

    line-height: 1.1;
}


/* =========================================================
   CATEGORY LINKS
   ========================================================= */

.navgrah-shop-categories {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;
}

.navgrah-category-link {
    position: relative;

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

    min-height: 40px;

    padding: 9px 0;

    color: #575159;

    border-bottom: 1px solid rgba(41, 38, 51, 0.07);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;

    line-height: 1.4;
    text-decoration: none;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}

.navgrah-category-link:last-child {
    border-bottom: 0;
}

.navgrah-category-link:hover {
    padding-left: 5px;
    color: #b88622;
}

.navgrah-category-all {
    color: #b88622;
    font-weight: 600;
}

.navgrah-category-count {
    flex: 0 0 auto;

    color: #aaa4a8;

    font-size: 10px;

    margin-left: 12px;
}


/* =========================================================
   PRICE FILTER
   ========================================================= */

.navgrah-price-widget {
    width: 100%;
}

.navgrah-price-widget .widget {
    margin: 0;
}

.navgrah-price-widget .widget-title {
    display: none;
}

.navgrah-price-widget form {
    margin: 0;
}

.navgrah-price-widget .price_slider_wrapper {
    padding-top: 8px;
}


/* ---------------------------------------------------------
   IMPORTANT:
   WooCommerce's native price filter uses jQuery UI.

   Explicit positioning is provided here so the handles
   remain visible, correctly positioned and draggable even
   if the theme's jQuery UI stylesheet is not providing
   these declarations.
   --------------------------------------------------------- */

.navgrah-price-widget .price_slider,
.navgrah-price-widget .ui-slider {
    position: relative;

    width: auto;
    height: 2px;

    margin: 0 6px 24px;

    background: rgba(41, 38, 51, 0.14);

    border-radius: 0;
}


/* Slider selected range */

.navgrah-price-widget .ui-slider-range {
    position: absolute;

    top: 0;
    bottom: 0;

    height: 2px;

    background: #b88622;

    border-radius: 0;
}


/* ---------------------------------------------------------
   PRICE SLIDER HANDLES
   --------------------------------------------------------- */

.navgrah-price-widget .ui-slider-handle {
    position: absolute;

    top: 50%;

    width: 12px;
    height: 12px;

    margin-top: -6px;
    margin-left: -6px;

    display: block;

    background: #b88622;

    border: 2px solid #f7f5ef;
    border-radius: 50%;

    box-shadow:
        0 0 0 1px rgba(184, 134, 34, 0.30);

    z-index: 5;

    cursor: grab;

    outline: none;
}

.navgrah-price-widget .ui-slider-handle:hover {
    box-shadow:
        0 0 0 1px rgba(184, 134, 34, 0.50),
        0 1px 5px rgba(41, 38, 51, 0.12);
}

.navgrah-price-widget .ui-slider-handle:active {
    cursor: grabbing;
}


/* ---------------------------------------------------------
   PRICE AMOUNT AREA
   --------------------------------------------------------- */

.navgrah-price-widget .price_slider_amount {
    display: flex;

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

    gap: 12px;
}

.navgrah-price-widget .price_label {
    color: #777177;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}


/* ---------------------------------------------------------
   PRICE FILTER BUTTON
   --------------------------------------------------------- */

.navgrah-price-widget button,
.navgrah-price-widget .button {
    min-height: 32px;

    padding: 8px 14px;

    color: #fff;
    background: #b88622;

    border: 1px solid #b88622;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .7px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}

.navgrah-price-widget button:hover,
.navgrah-price-widget .button:hover {
    color: #fff;

    background: #9d7318;
    border-color: #9d7318;
}


/* =========================================================
   PRODUCTS AREA
   ========================================================= */

.navgrah-shop-products {
    min-width: 0;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.navgrah-shop-toolbar {
    display: flex;

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

    min-height: 40px;

    margin-bottom: 30px;
    padding-bottom: 17px;

    border-bottom: 1px solid rgba(41, 38, 51, 0.12);
}

.navgrah-product-count {
    color: #777177;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.navgrah-product-count span {
    color: #292633;
    font-weight: 600;
}

.navgrah-shop-ordering {
    margin-left: auto;
}

.navgrah-shop-ordering .woocommerce-ordering {
    float: none;
    margin: 0;
}

.navgrah-shop-ordering select {
    min-width: 175px;
    height: 35px;

    padding: 7px 32px 7px 11px;

    color: #4e4a50;
    background: transparent;

    border: 1px solid rgba(41, 38, 51, 0.16);
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;

    outline: none;

    cursor: pointer;
}

.navgrah-shop-ordering select:hover,
.navgrah-shop-ordering select:focus {
    border-color: rgba(184, 134, 34, 0.55);
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

/* =========================================================
   PRODUCT GRID
   ========================================================= */

.navgrah-product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 52px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.navgrah-product-card {
    position: relative;

    min-width: 0;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.navgrah-product-image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #eceae3;

    text-decoration: none;

    cursor: pointer;
}

.navgrah-product-image img.navgrah-product-img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;
    object-position: center;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.navgrah-product-card:hover
.navgrah-product-image
img.navgrah-product-img {
    transform: scale(1.035);
}


/* =========================================================
   BADGES
   ========================================================= */

.navgrah-product-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    padding: 5px 8px;

    color: #fff;
    background: #b88622;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 700;

    letter-spacing: .7px;
    line-height: 1;

    text-transform: uppercase;
}

.navgrah-sale-badge {
    background: #8b5d2a;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.navgrah-product-info {
    position: relative;

    padding: 16px 1px 0;

    z-index: 2;
}

.navgrah-product-category {
    display: block;

    margin: 0 0 7px;

    color: #9b7830;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 600;

    letter-spacing: 1.1px;
    line-height: 1.3;

    text-transform: uppercase;
}

.navgrah-product-title {
    margin: 0;

    color: #292633;

    font-family: "Times New Roman", Times, serif;
    font-size: 19px;
    font-weight: 500;

    line-height: 1.22;
}

.navgrah-product-title a {
    color: inherit;

    text-decoration: none;

    transition: color .2s ease;
}

.navgrah-product-title a:hover {
    color: #b88622;
}


/* =========================================================
   PRICE
   ========================================================= */

.navgrah-product-price {
    margin-top: 8px;

    color: #b88622;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;

    line-height: 1.5;
}

.navgrah-product-price del {
    margin-right: 5px;

    color: #9b9699;
}

.navgrah-product-price ins {
    color: #b88622;

    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   VIEW PRODUCT — CLICKABLE LINK
   ========================================================= */

.navgrah-product-view {
    position: relative !important;

    z-index: 100 !important;

    display: inline-flex !important;

    align-items: center;

    width: max-content;

    margin-top: 18px;
    padding: 0 0 3px;

    color: #ffffff !important;
	background: #241238 !important;

	border: 1px solid #241238 !important;
    border-bottom: 1px solid rgba(184, 134, 34, 0.50);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .7px;
    line-height: 1.4;

    text-decoration: none !important;
    text-transform: uppercase;

    pointer-events: auto !important;

    cursor: pointer !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none;

    transition:
        color .2s ease,
        border-color .2s ease;
}


.navgrah-product-view::after {
    content: "→";

    display: inline-block;

    margin-left: 7px;

    pointer-events: none;

    transition: transform .2s ease;
}


.navgrah-product-view:hover {
    color: #b88622 !important;

    border-bottom-color: #b88622;
}


.navgrah-product-view:hover::after {
    transform: translateX(3px);
}


.navgrah-product-view:focus,
.navgrah-product-view:focus-visible {
    color: #b88622 !important;

    outline: none;

    border-bottom-color: #b88622;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.navgrah-shop-pagination {
    margin-top: 70px;
    padding-top: 27px;

    border-top: 1px solid rgba(41, 38, 51, 0.12);

    text-align: center;
}

.navgrah-shop-pagination ul.page-numbers {
    display: flex;

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

    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.navgrah-shop-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
}

.navgrah-shop-pagination .page-numbers {
    display: inline-flex;

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

    min-width: 33px;
    height: 33px;

    color: #5d575e;
    background: transparent;

    border: 1px solid rgba(41, 38, 51, 0.13);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;

    text-decoration: none;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.navgrah-shop-pagination .page-numbers:hover,
.navgrah-shop-pagination .page-numbers.current {
    color: #fff;

    background: #b88622;

    border-color: #b88622;
}

/* =========================================================
   LARGE DESKTOP / TABLET
   ========================================================= */

@media (max-width: 1300px) and (min-width: 1101px) {

    .navgrah-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 22px;
    }

}

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

@media (max-width: 1100px) {

    .navgrah-shop-content {
        padding: 60px 25px 90px;
    }

    .navgrah-shop-container {
        grid-template-columns:
            210px minmax(0, 1fr);

        gap: 40px;
    }

    .navgrah-product-grid {
        column-gap: 20px;
        row-gap: 45px;
    }

}


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

@media (max-width: 800px) {

    .navgrah-shop-content {
        padding: 48px 22px 80px;
    }

    .navgrah-shop-container {
        display: block;
    }

    .navgrah-shop-sidebar {
        margin-bottom: 45px;
    }

    .navgrah-shop-categories {
        display: grid;

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

        column-gap: 30px;
    }

}


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

@media (max-width: 600px) {

    .navgrah-shop-content {
        padding: 38px 16px 70px;
    }

    .navgrah-shop-sidebar {
        margin-bottom: 35px;
    }

    .navgrah-shop-categories {
        grid-template-columns: 1fr;
    }

    .navgrah-shop-toolbar {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        min-height: 0;

        margin-bottom: 24px;
    }

    .navgrah-shop-ordering {
        width: 100%;

        margin-left: 0;
    }

    .navgrah-shop-ordering .woocommerce-ordering {
        width: 100%;
    }

    .navgrah-shop-ordering select {
        width: 100%;
    }

    .navgrah-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 36px 12px;
    }

    .navgrah-product-info {
        padding-top: 11px;
    }

    .navgrah-product-category {
        font-size: 7px;
        letter-spacing: .7px;
    }

    .navgrah-product-title {
        font-size: 15px;
    }

    .navgrah-product-price {
        margin-top: 6px;
        font-size: 11px;
    }

    .navgrah-product-view {
        margin-top: 12px;
        font-size: 8px;
    }

}

/* =========================================================
   NAVGRAH SHOP — PRODUCT GRID BREAKPOINTS
   ========================================================= */

/* 5 products — 900px and above */
.shop-shell .woocommerce ul.products.columns-5 {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.shop-shell .woocommerce ul.products.columns-5 li.product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   899px → 600px
   4 products
   ========================================================= */

@media (max-width: 899px) {

    .shop-shell .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   599px → 400px
   3 products
   ========================================================= */

@media (max-width: 599px) {

    .shop-shell .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   399px and below
   2 products
   ========================================================= */

@media (max-width: 399px) {

    .shop-shell .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

/* =========================================================
   VIEW PRODUCT — BUTTON
   ========================================================= */

.navgrah-shop-page .navgrah-product-view {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    margin-top: 9px;
    padding: 8px 13px !important;

    color: #ffffff !important;
    background: #b88622 !important;

    border: 1px solid #b88622 !important;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .7px;
    line-height: 1.2;

    text-decoration: none !important;
    text-transform: uppercase;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.navgrah-shop-page .navgrah-product-view::after {
    content: "→";

    margin-left: 7px;

    transition: transform .2s ease;
}

.navgrah-shop-page .navgrah-product-view:hover {
    color: #ffffff !important;
    background: #241238 !important;
    border-color: #241238 !important;

    transform: translateY(-1px);
}

.navgrah-shop-page .navgrah-product-view:hover::after {
    transform: translateX(3px);
}

/* =========================================================
   PRODUCT CARD — EQUAL ROW ALIGNMENT
   ========================================================= */

.navgrah-shop-page .navgrah-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.navgrah-shop-page .navgrah-product-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.navgrah-shop-page .navgrah-product-view {
    margin-top: auto;
    align-self: flex-start;
}