.category_text{
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    transition: 0.3s;
    padding: 1px 0 8px 0;
    height: 50px;
}
.category_text:hover{
    gap: 20px;
    color: gray;
}

.features {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 12px;
    align-items: start;
}

.features .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px 6px;
}

.features .feature-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f7f7f7;
}

.features .feature-item .icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #111;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.features .feature-item h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.features .feature-item p {
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.3;
    color: #666;
}

@media (max-width: 991px) {
    .features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .features {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 4px 12px;
    }

    .features .feature-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .features .feature-item:last-child {
        border-bottom: none;
    }

    .features .feature-item .icon {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
    }

    .features .feature-item .icon svg {
        width: 16px;
        height: 16px;
    }

    .features .feature-item h3 {
        font-size: 0.78rem;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .features .feature-item p {
        font-size: 0.7rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #888;
    }

    .features .feature-item br {
        display: none;
    }
}
  .product-grid {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        gap: 10px !important;
    }

    .product-grid .product-div {
        flex: 0 0 16%;
        max-width: 16%;
        padding: 0.5rem;
        box-sizing: border-box;
    }

    .image-wrapper {
        width: 100%;
        height: 300px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f8f8;
    }

    .product-image {
     
        height: 100%;
        object-fit: contain;
    }
    .product-div {
        width: 100%;
        padding: 0px;
        box-sizing: border-box;
        transition: all 0.3s ease;
    }

    .product-div:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.02);
    }

    @media (max-width: 991.98px) {
        .product-grid .product-div {
            flex: 0 0 33.3333%;
            max-width: 33.3333%;
            padding: 0.5rem;
        }

        .image-wrapper {
            height: 260px;
        }
    }

    /* Tablet-specific: improve layout for tablets (portrait and landscape) */
    @media (min-width: 768px) and (max-width: 1024px) {
        .product-grid {
            gap: 14px !important;
        }

        /* Use two columns on most tablets to avoid cramped cards */
        .product-grid .product-div {
            flex: 0 0 48%;
            max-width: 48%;
            padding: 0.5rem;
        }

        /* Slightly taller images for tablets while keeping aspect ratio */
        .image-wrapper {
            height: 320px;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .imgsize img{
            height: auto;
            max-height: 280px;
            width: 100%;
            object-fit: cover;
        }
    }

    @media (max-width: 576.98px) {
        .product-grid .product-div {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0.5rem;
        }

        .image-wrapper {
            height: auto;
        }

        .product-image {
            height: auto;
            width: 100%;
            object-fit: contain;
        }
    }

    /* Ensure single-column on very narrow screens to avoid overflow */
    @media (max-width: 400px) {
        .product-grid .product-div {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .image-wrapper {
            height: auto;
        }
        .product-image {
            width: 100%;
            height: auto;
            object-fit: contain;
        }
    }
    
    
    .zoom {
        overflow: hidden;
        position: relative;
        cursor: crosshair;
        width: 100%; /* Adjust to fit your design */
        height: auto;
    }

    .zoom img {
        transition: transform 0.2s ease-out;
        transform-origin: center center;
        display: block;
        width: 100%;
        height: auto;
    }
    .img-fluid {
        max-width: 100%;
        height: auto;
    }
    
    .content-container {
        position: relative;
    }
    
    .content {
        overflow: hidden;
        transition: max-height 0.5s ease;
    }
    
    .content.expanded {
        max-height: none;
    }
    
    .read-more-btn {
        background: none;
        border: none;
        color: #dbb745;
        cursor: pointer;
        padding: 0;
        margin-top: 10px;
        display: block;
    }
    .content {
        max-height: 140px;   
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .content.expanded {
        max-height: 1000px;  
    }
    .imgsize img{
        height: 240px;
    }

/* Ensure product card text is centered and consistent height across cards */
.product-grid .product-div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-grid .product-div .category_text {
    text-align: center !important;
    min-height: 48px; /* reserve space for 1-2 lines of title */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-grid .product-div p {
    text-align: center;
}

@media (max-width: 767.98px) {
    /* on small screens slightly reduce reserved title height */
    .product-grid .product-div .category_text {
        min-height: 56px;
    }
}

/* Make category product_section on home equal-height cards and responsive */
.container-field .product_section{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    align-items: start;
}

/* Prevent overlapping with previous large category images by clearing floats
   and ensuring the product section starts below previous content. */
.container-field .product_section{
    clear: both;
    margin-top: 22px;
    position: relative;
    z-index: 1;
}

.container-field .product_section .product_item{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
}

.container-field .product_section .product_item .image_section{
    flex: 0 0 auto;
}

.container-field .product_section .product_item .content{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px 18px 6px;
}

@media (max-width: 768px){
    .container-field .product_section{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px){
    .container-field .product_section{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .container-field .product_section .product_item .content{
        padding: 6px 4px 12px;
    }

    .container-field .product_section .product_item .content a,
    .container-field .product_section .product_item .content p,
    .container-field .product_section .product_item .content span,
    .container-field .product_section .product_item .content del {
        font-size: 0.8rem !important;
        line-height: 1.2;
    }
}

/* Tablet landscape/medium screens: use 3 columns to match desktop feel */
@media (min-width: 769px) and (max-width: 1199.98px){
    .container-field .product_section{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px){
    .container-field .product_section{
        grid-template-columns: 1fr;
    }
}

/* extra spacing for tablets to avoid visual overlap */
@media (min-width: 768px) and (max-width: 1024px){
    .container-field .product_section{
        margin-top: 30px;
    }
}

/* Product-listing grid: percentage flex widths plus a fixed gap caused some
   adjacent cards to touch. Grid owns both the column widths and the gutters. */
#product-container.product-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:24px 16px !important;
    margin:0;
}

#product-container.product-grid .product-div{
    flex:none;
    width:auto;
    max-width:none;
    min-width:0;
    padding:0;
}

/* Product uploads do not all share the same aspect ratio. Give every listing
   image an identical responsive frame so portrait source files cannot leave
   uneven visual gaps between cards. */
#product-container.product-grid .image-wrapper{
    height:auto;
    aspect-ratio:3 / 4;
}

#product-container.product-grid .product-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

@media (min-width:992px) and (max-width:1199.98px){
    #product-container.product-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

@media (min-width:768px) and (max-width:991.98px){
    #product-container.product-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:767.98px){
    #product-container.product-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px 12px !important;
    }
}

@media (max-width:400px){
    #product-container.product-grid{
        grid-template-columns:1fr;
    }
}

/* Compact service-benefit strip for a cleaner storefront rhythm. */
.features{gap:8px;padding:8px 12px}
.features .feature-item{gap:3px;padding:4px 6px}
.features .feature-item .icon{height:34px;width:34px}
.features .feature-item .icon svg{height:16px;width:16px}
.features .feature-item h3{font-size:.78rem;line-height:1.15}
.features .feature-item p{font-size:.68rem;line-height:1.2}
@media(max-width:576px){.features{padding:2px 10px}.features .feature-item{padding:5px 0}.features .feature-item .icon{height:28px;width:28px}.features .feature-item h3{font-size:.72rem}.features .feature-item p{font-size:.64rem}}
/* Extra-tight benefit strip spacing. */
.features{gap:4px;padding:4px 10px}
.features .feature-item{gap:2px;padding:2px 4px}
.features .feature-item .icon{height:28px;width:28px}
.features .feature-item .icon svg{height:13px;width:13px}
.features .feature-item h3{font-size:.68rem;line-height:1.05}
.features .feature-item p{font-size:.58rem;line-height:1.1}
@media(max-width:576px){.features{padding:0 8px}.features .feature-item{padding:3px 0}.features .feature-item .icon{height:25px;width:25px}.features .feature-item h3{font-size:.68rem}.features .feature-item p{font-size:.58rem}}
/* Keep the desktop benefit strip on one compact visual band. */
@media(min-width:577px){
  .features{height:76px;overflow:hidden;align-items:center}
  .features .feature-item{min-height:0;overflow:hidden}
  .features .feature-item h3{white-space:nowrap}
  .features .feature-item p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:577px){
  .features{box-sizing:border-box;height:60px;padding:2px 8px;gap:2px}
  .features .feature-item{box-sizing:border-box;gap:1px;padding:1px 3px}
  .features .feature-item .icon{height:24px;width:24px}
  .features .feature-item .icon svg{height:11px;width:11px}
  .features .feature-item h3{font-size:.6rem}
  .features .feature-item p{font-size:.5rem;line-height:1;max-width:100%}
}