/* ================================
   FONTS
================================ */
@import url(//fonts.googleapis.com/css?family=Old+Standard+TT:400,700);

/* ================================
   GLOBAL COLORS (FIXED GREYS)
   ================================ */
:root {
    --grey-dark: #434343;
    --grey: #666666;
    --grey-light: #cccccc;
    --grey-border: #e6e6e6;
    --grey-bg: #f8f8f8;
}

/* ================================
   HEADER
================================ */
.header { background: #ffffff; }

#LogoContainer h1 a { color: var(--grey-dark); }
#LogoContainer h1 a:hover { color: var(--grey-light); }

#Header .PageMenu .sf-menu > li > a,
#Header .PageMenu .sf-menu > li > a::before {
    color: var(--grey-dark);
}

/* ================================
   MENUS
================================ */
.PageMenu li a::after,
.SideCategoryListClassic .category-list li a::after {
    background: var(--grey-light) !important;
}

.PageMenu li ul {
    background: #f0efed;
}

.PageMenu li ul:before {
    border-color: transparent transparent #f0efed transparent;
}

.PageMenu li ul li a,
.SubCategoryList li a {
    color: var(--grey-dark);
}

/* ================================
   SEARCH
================================ */
#SearchForm input.Textbox {
    background-color: #ffffff;
}

#SearchForm {
    background-color: rgba(248,248,248,0.95);
}

/* ================================
   TOP BAR
================================ */
.TopMenu {
    background: var(--grey-light);
    color: #ffffff;
}

.TopMenu a:hover { color: #ffffff; }

.TopMenu .CartBorder { border: none; }

.TopMenu li .icon { color: #ffffff; }

/* ================================
   PAGE BACKGROUNDS
================================ */
.main .inner,
.page {
    background: #ffffff;
}

.footer-main,
.newsletter-subscription,
.footer-links {
    background: var(--grey-bg);
    color: var(--grey);
}

.footer-links a,
.footer-main a {
    color: var(--grey);
}

.footer-links a:hover,
.footer-main a:hover {
    color: var(--grey-light);
}

/* ================================
   BUTTONS (FIXED GREY SYSTEM)
================================ */
.btn {
    background-color: #ffffff;
    border-color: var(--grey-border);
    color: var(--grey);
    font-family: Arial, sans-serif;
}

.btn:hover {
    background-color: var(--grey-border);
    color: var(--grey-dark);
}

.btn.alt {
    background-color: #ffffff;
    border-color: var(--grey-border);
    color: var(--grey);
}

.btn.alt:hover {
    background-color: var(--grey-bg);
}

.btn.text { color: var(--grey); }

/* strong CTA */
.btn.strongCta {
    background-color: #ffffff;
    color: var(--grey-light);
    border-color: var(--grey-light);
}

.btn.strongCta:hover {
    background-color: var(--grey-light);
    color: #ffffff;
}

/* ================================
   PRODUCT GRID (FIXED + SHARP IMAGES)
================================ */

/* Grid layout */
#home .ProductList li,
.productPage .ProductList li,
#CategoryContent .ProductList li {
    width: 33.333% !important;
    padding: 15px;
    box-sizing: border-box;
    float: left;
}

/* Image container (IMPORTANT FOR QUALITY) */
.ProductList .ProductImage {
    width: 100%;
    min-height: 420px; /* increased for furniture */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
}

/* Image itself */
.ProductList .ProductImage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

/* hover zoom */
.ProductList .ProductImage img:hover {
    transform: scale(1.04);
}

/* Product text */
.ProductList .ProductDetails a {
    font-size: 16px;
    color: var(--grey-dark);
}

.ProductList em {
    color: var(--grey);
}

.ProductList .p-price {
    color: var(--grey-dark);
    font-weight: 600;
}

/* ================================
   IMPORTANT IMAGE NOTE
================================ */
/*
To avoid BLUR:
You MUST use in template:
- standard_url OR
- zoom_url

NOT thumbnail_url
*/

/* ================================
   RESPONSIVE GRID
================================ */
@media screen and (max-width: 1024px) {
    #home .ProductList li,
    .productPage .ProductList li,
    #CategoryContent .ProductList li {
        width: 50% !important;
    }
}

@media screen and (max-width: 480px) {
    #home .ProductList li,
    .productPage .ProductList li,
    #CategoryContent .ProductList li {
        width: 100% !important;
    }
}

/* ================================
   PRODUCT DETAILS PAGE
================================ */
#ProductDetails h1 {
    color: var(--grey-dark);
}

#prodAccordion .subtitle {
    color: var(--grey-dark);
}

/* ================================
   FORMS
================================ */
input.Textbox,
textarea,
select {
    border: 1px solid var(--grey-border);
    color: var(--grey);
}

/* ================================
   BORDERS FIXED (NO PINK BUGS)
================================ */
.TitleHeading {
    border-bottom: 1px solid var(--grey-border);
}

.ProductList.List .ProductDetails {
    border-top: 1px solid var(--grey-border);
}

/* ================================
   FACETS / FILTERS
================================ */
.facet-container {
    border-top: 1px solid var(--grey-border);
}

.facet-container .facet-option:hover {
    background: var(--grey-bg);
}

.facet-container .facet-option .facet-option-product-count {
    color: var(--grey-light);
}

/* ================================
   FOOTER
================================ */
.footer-main h4 {
    color: var(--grey-dark);
}

.footer-main,
.footer-links,
.newsletter-subscription {
    color: var(--grey);
}

/* ================================
   LINKS
================================ */
a {
    color: var(--grey);
}

a:hover {
    color: var(--grey-light);
}
/* =========================
   PRODUCT IMAGE SHARP FIX
========================= */

.ProductList .ProductImage,
.ProductList .ProductImage a {
    display: block;
    overflow: hidden;
}

/* 🔥 force proper scaling (prevents blur) */
.ProductList .ProductImage img {
    width: 100%;
    height: auto !important;

    /* prevents ugly scaling artifacts */
    image-rendering: auto;
    transform: translateZ(0);
}

/* =========================
   MAKE GRID IMAGES BIGGER
========================= */
.ProductList li {
    padding: 10px;
}

/* increase image container size */
.ProductList .ProductImage {
    min-height: 320px;
}

/* optional: even larger desktop grid */
@media only screen and (min-width: 1024px) {
    #home .ProductList li,
    #CategoryContent .ProductList li {
        width: 25%; /* 4 per row instead of 3 */
    }

    .ProductList .ProductImage {
        min-height: 380px;
    }
}

/* =========================
   FORCE CORRECT IMAGE FIT
========================= */
.ProductList .ProductImage img {
    object-fit: contain;
}

/* =========================
   FIX GREY COLORS (STOP PINK OVERRIDES)
========================= */

body,
p,
a,
.ProductDetails,
.ProductPrice {
    color: #666 !important;
}

a:hover {
    color: #ccc !important;
}

/* override weird theme accents */
.TopMenu,
.TopMenu a,
.footer-main,
.footer-links {
    color: #666 !important;
}

/* remove accidental accent bleed */
* {
    accent-color: #666;
}
/* ===== PRODUCT GRID IMAGE FIX ===== */
.ProductList.Grid .ProductImage {
    position: relative;
    overflow: hidden;
    min-height: 320px; /* adjust size for bigger images */
}

.ProductList.Grid .ProductImage img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* prevents stretching blur */
    image-rendering: auto;
    transform: translateZ(0);
}

/* QuickView red outline fix */
.ProductImage.QuickView,
.ProductImage.QuickView a,
.ProductImage.QuickView img {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Smooth hover effect */
.ProductList.Grid .ProductImage:hover img {
    transform: scale(1.02);
    transition: transform 0.25s ease;
}
.ProductList.Grid .ProductImage {
    overflow: hidden;
    background: #fff;
}

.ProductList.Grid .ProductImage-img {
    width: 100%;
    height: 360px;        /* IMPORTANT: controls sharpness */
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Product Grid */
.ProductList.Grid .ProductImage {
    overflow: hidden;
    text-align: center;
    display: block;
    width: 100%;
}

.ProductList.Grid .ProductImage-img {
    width: 100%;
    height: auto;
    max-width: 600px; /* adjust if needed for grid */
    object-fit: contain; /* preserves aspect ratio */
}

/* Remove QuickView */
.QuickViewBtn,
.QuickViewModal,
#ModalContainer.QuickViewModal {
    display: none !important;
}

/* Ensure product details still look good */
.ProductDetails {
    text-align: center;
    margin-top: 10px;
}

.ProductDetails a.pname {
    color: #666;
    font-weight: normal;
    text-decoration: none;
}

.ProductDetails a.pname:hover {
    color: #434343;
}

/* Price styling */
.ProductList .p-price {
    display: block;
    margin-top: 5px;
    color: #434343;
    font-weight: bold;
}

/* Ratings */
.ProductPriceRating img {
    width: 13px;
    height: 13px;
    vertical-align: middle;
}

/* Compare button */
.ProductCompareButton {
    margin-top: 5px;
}

/* Add to cart button */
.ProductActionAdd a.btn {
    display: inline-block;
    margin-top: 5px;
}
/* ===== Reduce gap between product image, title, and price ===== */

.ProductList .ProductImage {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}

.ProductList .ProductDetails {
    margin-top: 0 !important;
    padding-top: 4px !important;
}

.ProductList .ProductDetails .pname {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.ProductList .p-price {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    display: block;
}

/* If rating/comparison is pushing spacing */
.ProductPriceRating,
.ProductCompareButton,
.ProductActionAdd {
    margin-top: 4px !important;
}

/* ===== FORCE tight product card spacing ===== */

/* kill bottom spacing per product tile */
.ProductList li,
.ProductList .Grid__item {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
}

/* remove image spacing */
.ProductList .ProductImage {
    margin: 0 !important;
    padding: 0 !important;
}

/* remove title spacing completely */
.ProductList .ProductDetails {
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
}

/* tighten title text */
.ProductList .ProductDetails a.pname {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block;
}

/* tighten price spacing */
.ProductList .p-price {
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    display: block;
}

/* remove any extra spacing from rating/compare/add blocks */
.ProductPriceRating,
.ProductCompareButton,
.ProductActionAdd {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}