/* ======================================================
   WORKTOGO – MASTER SHOP.CSS (FINAL UNIVERSAL VERSION)
   Replace ALL old CSS with this file
   Shop + Shortcode + Grocery + General = Same Engine
   Compact, Mobile Friendly, No Breaks
====================================================== */

/* ===============================
   BRAND COLORS (LOCKED)
=============================== */
:root{
    --wt-brand-green:#1fa84f;
    --wt-brand-green-hover:#168a40;
}


/* ======================================================
   SEARCH BAR
====================================================== */
.dgwt-wcas-sf-wrapp{
    background:#fff!important;
    border:1px solid #d9d9d9!important;
    border-radius:12px!important;
    padding:6px 12px!important;
    height:42px!important;
    display:flex!important;
    align-items:center!important;
    box-shadow:0 2px 6px rgba(0,0,0,.07)!important;
}
.dgwt-wcas-sf-wrapp:focus-within{
    border-color:#bfbfbf!important;
    box-shadow:0 3px 10px rgba(0,0,0,.12)!important;
}
.dgwt-wcas-search-input{
    background:transparent!important;
    border:none!important;
    width:100%!important;
    padding:4px!important;
    font-size:15px!important;
    color:#222!important;
}
.dgwt-wcas-search-input::placeholder{color:#888!important;}
.dgwt-wcas-search-input:focus{outline:none!important;}


/* ======================================================
   CATEGORY SLIDER (SHORTCODE)
====================================================== */
.wt-room-cats{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:10px 8px;
}
.wt-cat-box{
    width:74px;
    text-align:center;
}
.wt-cat-box img{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.wt-cat-box span{
    font-size:10.5px;
    font-weight:600;
    color:#222;
}


/* ======================================================
   MASTER GRID (SHOP + SHORTCODE SAME)
====================================================== */
.woocommerce ul.products,
.wt-room-products{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
    padding:0!important;
    margin:0!important;
    list-style:none!important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after{
    display:none!important;
    content:none!important;
}

@media(min-width:768px){
    .woocommerce ul.products,
    .wt-room-products{
        grid-template-columns:repeat(3,1fr)!important;
    }
}

@media(min-width:1024px){
    .woocommerce ul.products,
    .wt-room-products{
        grid-template-columns:repeat(4,1fr)!important;
    }
}


/* ======================================================
   PRODUCT CARD (SHOP + SHORTCODE)
====================================================== */
.woocommerce ul.products li.product,
.wt-room-products li.product{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    float:none!important;
    display:flex!important;
    flex-direction:column!important;
    background:#ffffff!important;
    border-radius:14px!important;
    overflow:hidden!important;
    position:relative!important;
    box-shadow:0 4px 12px rgba(0,0,0,0.08)!important;
}











/* ======================================================
   IMAGE (COMPACT & BALANCED)
====================================================== */
.woocommerce ul.products li.product img,
.wt-room-products li.product img{
    width:100%!important;
    height:150px!important;
    object-fit:cover!important;
}

@media(max-width:600px){
    .woocommerce ul.products li.product img,
    .wt-room-products li.product img{
        height:120px!important;
    }
}


/* ======================================================
   SALE BADGE (UNIVERSAL FIX)
====================================================== */
.woocommerce ul.products li.product span.onsale,
.wt-room-products li.product span.onsale{
    background:#ff9800!important;
    color:#fff!important;
    font-size:11px!important;
    padding:5px 10px!important;
    border-radius:20px!important;
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    z-index:6!important;
    line-height:1!important;
}


/* ======================================================
   WISHLIST ICON
====================================================== */
.yith-wcwl-add-to-wishlist-button-over-image{
    position:absolute!important;
    top:8px!important;
    left:8px!important;
    background:#fff!important;
    width:34px!important;
    height:34px!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:0 3px 8px rgba(0,0,0,0.15)!important;
    z-index:6!important;
}


/* ======================================================
   CONTENT MARGINS
====================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .blinkit-qty-box,
.wt-room-products li.product .woocommerce-loop-product__title,
.wt-room-products li.product .price,
.wt-room-products li.product .button,
.wt-room-products li.product .blinkit-qty-box{
    margin-left:8px!important;
    margin-right:8px!important;
}


/* ======================================================
   TITLE
====================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wt-room-products li.product .woocommerce-loop-product__title{
    font-size:13.5px!important;
    font-weight:600!important;
    margin-top:8px!important;
    margin-bottom:4px!important;
    min-height:32px!important;
    color:#111!important;
}


/* ======================================================
   PRICE
====================================================== */
.woocommerce ul.products li.product .price,
.wt-room-products li.product .price{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:6px!important;
    margin-bottom:6px!important;
}
.woocommerce ul.products li.product .price del,
.wt-room-products li.product .price del{
    color:#e53935!important;
    font-size:12px!important;
    font-weight:600!important;
}
.woocommerce ul.products li.product .price ins,
.wt-room-products li.product .price ins{
    color:#2e7d32!important;
    font-size:15px!important;
    font-weight:800!important;
    text-decoration:none!important;
}


/* ======================================================
   BUTTON
====================================================== */
.woocommerce ul.products li.product .button,
.wt-room-products li.product .button{
    width:calc(100% - 16px)!important;
    background:var(--wt-brand-green)!important;
    color:#fff!important;
    font-size:12.5px!important;
    font-weight:600!important;
    padding:10px 0!important;
    border-radius:9px!important;
    margin:10px 8px 12px!important;
    text-align:center!important;
}
.woocommerce ul.products li.product .button:hover,
.wt-room-products li.product .button:hover{
    background:var(--wt-brand-green-hover)!important;
}


/* ======================================================
   QTY BOX
====================================================== */
.woocommerce ul.products li.product .blinkit-qty-box,
.wt-room-products li.product .blinkit-qty-box{
    width:calc(100% - 16px)!important;
    margin:10px 8px 12px!important;
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    background:#f5f7fa!important;
    border-radius:9px!important;
    padding:5px!important;
}
.woocommerce ul.products li.product .blinkit-qty-box button,
.wt-room-products li.product .blinkit-qty-box button{
    width:32px!important;
    height:32px!important;
    border:none!important;
    background:var(--wt-brand-green)!important;
    color:#fff!important;
    border-radius:7px!important;
    font-size:16px!important;
}
.woocommerce ul.products li.product .blinkit-qty-box input,
.wt-room-products li.product .blinkit-qty-box input{
    width:36px!important;
    text-align:center!important;
    border:none!important;
    background:transparent!important;
    font-weight:600!important;
}


/* ======================================================
   VIEW ALL BUTTON (SHORTCODE)
====================================================== */
.wt-view-all{
    width:100%;
    display:flex;
    justify-content:flex-end;
    margin:8px 0 16px;
    padding-right:10px;
}
.wt-view-all a{
    background:var(--wt-brand-green);
    color:#fff;
    padding:8px 18px;
    border-radius:22px;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.wt-view-all a:hover{
    background:var(--wt-brand-green-hover);
}


/* ======================================================
   SECTION THEMES (SHORTCODE ROOMS)
====================================================== */

/* Grocery */
.wt-section-grocery{
    background:#f3faf6;
    padding:10px!important;
    border-radius:18px;
}
.wt-section-grocery .wt-room-products li.product{
    border:1px solid #dcefe5;
}

/* General */
.wt-section-general{
    background:#f6f7fb;
    padding:10px!important;
    border-radius:18px;
}
.wt-section-general .wt-room-products li.product{
    border:1px solid #e2e6f0;
}


/* ======================================================
   SAFETY (SHOP + SHORTCODE)
====================================================== */
.woocommerce ul.products li.product *,
.wt-room-products li.product *{
    max-width:100%!important;
    box-sizing:border-box!important;
}











/* ======================================================
   WORKTOGO – PRODUCT CARD HEIGHT COMPACT FIX
   PURPOSE: Reduce card height without cutting title
   PAGE: Shop + Shortcode
   DEVICE: All (especially mobile)
   STATUS: SAFE OVERRIDE
====================================================== */

/* Title ko compact banao, text cut nahi hoga */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wt-room-products li.product .woocommerce-loop-product__title{
    line-height:1.25!important;
    margin-top:6px!important;
    margin-bottom:3px!important;
    min-height:28px!important;
}

/* Price area compact */
.woocommerce ul.products li.product .price,
.wt-room-products li.product .price{
    margin-bottom:4px!important;
    gap:4px!important;
}

/* Button spacing reduce */
.woocommerce ul.products li.product .button,
.wt-room-products li.product .button{
    margin:6px 8px 8px!important;
    padding:8px 0!important;
    font-size:12px!important;
}

/* Qty box spacing reduce */
.woocommerce ul.products li.product .blinkit-qty-box,
.wt-room-products li.product .blinkit-qty-box{
    margin:6px 8px 8px!important;
    padding:4px!important;
}

/* Image thoda compact */
.woocommerce ul.products li.product img,
.wt-room-products li.product img{
    height:140px!important;
}

@media(max-width:600px){
  .woocommerce ul.products li.product img,
  .wt-room-products li.product img{
      height:110px!important;
  }
}











/* =========================================
   WORKTOGO – GRID TITLE 2 LINE + SAFE DOT DOT
   Clean clamp, no cutting, no overlay effect
========================================= */

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.wt-room-products li.product h2.woocommerce-loop-product__title{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;

    line-height: 1.35 !important;
    max-height: 3em !important;     /* thoda extra space */
    min-height: 3em !important;

    padding: 0 !important;
    margin-bottom: 6px !important;
    background: transparent !important;
}



