/* ═══════════════════════════════════════════
   PRODUCT CARDS  –  Professional Edition
   ═══════════════════════════════════════════ */
:root {
    --pc-radius      : 12px;
    --pc-shadow      : 0 2px 12px rgba(0,0,0,.08);
    --pc-shadow-hover: 0 12px 32px rgba(0,0,0,.14);
    --pc-accent      : #1a1a1a;
    --pc-accent-alt  : #e63946;
    --pc-txt         : #1a1a1a;
    --pc-txt-muted   : #888;
    --pc-bg          : #fff;
    --pc-border      : #ebebeb;
    --pc-transition  : .32s cubic-bezier(.4,0,.2,1);
}

/* ── Card shell ── */
.pc-item { list-style: none; }

.pc-card {
	height: 100%;
    background    : var(--pc-bg);
    border-radius : var(--pc-radius);
    border        : 1px solid var(--pc-border);
    box-shadow    : var(--pc-shadow);
    overflow      : hidden;
    transition    : box-shadow var(--pc-transition), transform var(--pc-transition);
    display       : flex;
    flex-direction: column;
}
.pc-card:hover {
    box-shadow: var(--pc-shadow-hover);
    transform : translateY(-3px);
}

/* ── Image zone ── */
.pc-img-wrap {
    position    : relative;
    display     : block;
    overflow    : hidden;
    aspect-ratio: 1 / 1;
    background  : #f7f7f7;
}

.pc-img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    position  : absolute;
    inset     : 0;
    transition: opacity var(--pc-transition), transform var(--pc-transition);
}
.pc-img--main  { opacity: 1; }
.pc-img--hover { opacity: 0; }

.pc-card:hover .pc-img--main  { opacity: 0; }
.pc-card:hover .pc-img--hover { opacity: 1; transform: scale(1.04); }

/* ── Badge ── */
.pc-badge {
    position      : absolute;
    top           : 12px;
    left          : 12px;
    z-index       : 4;
    font-size     : 10px;
    font-weight   : 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding       : 4px 10px;
    border-radius : 20px;
}
.pc-badge--sale { background: var(--pc-accent-alt); color: #fff; }
.pc-badge--new  { background: var(--pc-accent);     color: #fff; }

/* ── Side gallery – BOTTOM STRIP AUTO SCROLL ── */
.pc-side-gallery {
    position  : absolute;
    left      : 0;
    right     : 0;
    bottom    : 0;
    z-index   : 5;
    display   : flex;
    padding   : 8px 10px;
    background: linear-gradient(to top, rgba(0,0,0,.50) 0%, transparent 100%);
    transform : translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow  : hidden;
}
.pc-card:hover .pc-side-gallery {
    transform: translateY(0);
}

.pc-gallery-track {
    display   : flex;
    gap       : 6px;
    animation : galleryScroll 6s linear infinite;
    will-change: transform;
}

@keyframes galleryScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* WooCommerce default override — gallery thumbs */
.woocommerce ul.products li.product .pc-side-thumb,
ul.products li.product .pc-side-thumb,
.pc-gallery-track img.pc-side-thumb {
    width        : 44px !important;
    height       : 44px !important;
    margin       : 0 !important;
    object-fit   : cover !important;
    display      : block !important;
    flex-shrink  : 0 !important;
    border-radius: 5px !important;
    border       : 2px solid rgba(255,255,255,.7) !important;
    box-shadow   : none !important;
}
.pc-side-thumb:hover {
    border-color: #fff;
    transform   : scale(1.1);
}

/* ── Action bar ── */
.pc-actions {
    position  : absolute;
    bottom    : 56px;
    left      : 0;
    right     : 0;
    z-index   : 6;
    display   : flex;
    gap       : 6px;
    padding   : 10px;
    transform : translateY(100%);
    transition: transform var(--pc-transition);
}
.pc-card:hover .pc-actions {
    transform: translateY(0);
}

.pc-action-btn {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    padding    : 8px 14px;
    border     : none;
    border-radius: 6px;
    cursor     : pointer;
    font-size  : 12px;
    font-weight: 600;
    letter-spacing: .04em;
    transition : background .2s, color .2s;
    background : #fff;
    color      : var(--pc-txt);
    white-space: nowrap;
}
.pc-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pc-action-btn:hover { background: var(--pc-accent); color: #fff; }

.pc-action-btn--wish {
	
    padding   : 8px 10px;
    margin-left: auto;
    flex-shrink: 0;
}
a.added_to_cart.wc-forward {
/*     color: #1ca1b6; */
    position: absolute;
    right: 25px;
    bottom: 75px;
display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--pc-accent);
    color: #fff !important;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.pc-action-btn--wish:hover svg { stroke: #fff; }

/* ── Info zone ── */
.pc-info {
    padding       : 16px;
    display       : flex;
    flex-direction: column;
    flex          : 1;
}

.pc-cat {
    font-size     : 10px;
    font-weight   : 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color         : var(--pc-txt-muted);
    margin        : 0 0 6px;
}

.pc-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.35;

    display: -webkit-box;
    -webkit-line-clamp: 2;   /* max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;

    min-height: calc(3em * 2); /* height fix */
}
.pc-title a { color: var(--pc-txt); text-decoration: none; }
.pc-title a:hover { color: var(--pc-accent-alt); }

/* ── Stars ── */
.pc-stars {
    display    : flex;
    align-items: center;
    gap        : 2px;
    margin-bottom: 12px;
}
.pc-star {
    width       : 13px;
    height      : 13px;
    stroke      : #f4a823;
    fill        : none;
    stroke-width: 1.8;
}
.pc-star.filled { fill: #f4a823; }
.pc-review-count {
    font-size : 11px;
    color     : var(--pc-txt-muted);
    margin-left: 4px;
}

/* ── Footer row ── */
.pc-footer {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 10px;
    margin-top     : auto;
    padding-top    : 14px;
    border-top     : 1px solid var(--pc-border);
}

.pc-price { font-size: 16px; font-weight: 700; color: var(--pc-txt); }
.pc-price del { font-weight: 400; color: var(--pc-txt-muted); font-size: 13px; }
.pc-price ins  { text-decoration: none; color: var(--pc-accent-alt); }

.pc-atc-btn {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    padding    : 9px 14px;
    background : var(--pc-accent);
    color      : #fff !important;
    border     : none;
    border-radius: 7px;
    font-size  : 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor     : pointer;
    text-decoration: none;
    transition : background .2s, transform .15s;
    white-space: nowrap;
}
.pc-atc-btn svg { width: 14px; height: 14px; }
.pc-atc-btn:hover { background: var(--pc-accent-alt); transform: scale(1.03); }

.pc-atc-btn--select {
    background: transparent;
    color     : var(--pc-accent) !important;
    border    : 1.5px solid var(--pc-accent);
}
.pc-atc-btn--select:hover {
    background: var(--pc-accent);
    color     : #fff !important;
}

.pc-out-of-stock {
    font-size : 11px;
    color     : var(--pc-txt-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════
   QUICK VIEW MODAL
   ═══════════════════════════════════════════ */
#quick-view-modal {
    position       : fixed;
    inset          : 0;
    z-index        : 99999;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 20px;
}
.qv-backdrop {
    position  : absolute;
    inset     : 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}
.qv-box {
    position     : relative;
    z-index      : 1;
    background   : #fff;
    border-radius: 14px;
    width        : min(900px, 100%);
    max-height   : 90vh;
    overflow     : auto;
    box-shadow   : 0 24px 80px rgba(0,0,0,.22);
    animation    : qvSlideIn .28s ease;
}
@keyframes qvSlideIn {
    from { opacity: 0; transform: scale(.95) translateY(16px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.qv-close {
    position     : absolute;
    top          : 14px;
    right        : 16px;
    z-index      : 10;
    background   : #f2f2f2;
    border       : none;
    border-radius: 50%;
    width        : 36px;
    height       : 36px;
    font-size    : 20px;
    line-height  : 1;
    cursor       : pointer;
    color        : #555;
    transition   : background .2s;
}
.qv-close:hover { background: #e0e0e0; }

.qv-content { padding: 0; min-height: 200px; }

/* ── Spinner ── */
.qv-spinner {
    display        : flex;
    justify-content: center;
    align-items    : center;
    padding        : 60px;
}
.qv-spinner span {
    width        : 36px;
    height       : 36px;
    border       : 3px solid #eee;
    border-top-color: var(--pc-accent);
    border-radius: 50%;
    animation    : spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal inner layout ── */
.qv-inner {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 0;
}

.qv-gallery {
    background   : #f7f7f7;
    padding      : 28px;
    border-radius: 14px 0 0 14px;
}
.qv-main-img-wrap {
    aspect-ratio : 1 / 1;
    overflow     : hidden;
    border-radius: 8px;
    background   : #fff;
}
.qv-main-img-wrap img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: opacity .25s;
}
.qv-thumbs {
    display   : flex;
    gap       : 8px;
    margin-top: 12px;
    flex-wrap : wrap;
}
.qv-thumb {
    width        : 58px;
    height       : 58px;
    object-fit   : cover;
    border-radius: 6px;
    border       : 2px solid transparent;
    cursor       : pointer;
    transition   : border-color .2s;
}
.qv-thumb.active,
.qv-thumb:hover { border-color: var(--pc-accent); }

.qv-details {
    padding       : 32px 28px;
    display       : flex;
    flex-direction: column;
    gap           : 14px;
}
.qv-cat {
    font-size     : 11px;
    font-weight   : 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color         : var(--pc-txt-muted);
    margin        : 0;
}
.qv-title {
    font-size  : 22px;
    font-weight: 700;
    margin     : 0;
    line-height: 1.3;
}
.qv-price { font-size: 20px; font-weight: 700; }
.qv-price ins { text-decoration: none; color: var(--pc-accent-alt); }
.qv-price del { color: var(--pc-txt-muted); font-size: 15px; }
.qv-desc {
    font-size  : 14px;
    color      : #555;
    line-height: 1.6;
}

.qv-qty-wrap {
    display    : flex;
    align-items: center;
    gap        : 10px;
    margin-bottom: 4px;
}
.qv-qty-wrap label { font-size: 13px; font-weight: 600; }
.qv-qty-wrap input[type="number"] {
    width        : 62px;
    padding      : 7px 10px;
    border       : 1.5px solid var(--pc-border);
    border-radius: 6px;
    font-size    : 14px;
}

.qv-atc-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    width          : 100%;
    padding        : 13px;
    background     : var(--pc-accent);
    color          : #fff !important;
    border         : none;
    border-radius  : 8px;
    font-size      : 14px;
    font-weight    : 700;
    cursor         : pointer;
    text-decoration: none;
    transition     : background .2s;
}
.qv-atc-btn:hover { background: var(--pc-accent-alt); }

.qv-full-link {
    font-size  : 13px;
    color      : var(--pc-txt-muted);
    text-decoration: none;
    text-align : center;
    margin-top : auto;
}
.qv-full-link:hover { color: var(--pc-txt); }

/* ── Body scroll lock ── */
body.qv-open { overflow: hidden; }

/* ── Responsive ── */
@media (max-width: 680px)galleryScroll  {
    .qv-inner   { grid-template-columns: 1fr; }
    .qv-gallery { border-radius: 14px 14px 0 0; padding: 18px; }
    .qv-details { padding: 20px 18px; }

    .pc-actions { bottom: 52px; }
}







/* ═══════════════════════════════════════════
   CART PAGE RESPONSIVE OPTIMIZATION
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Table ko block mein badalna */
    .woocommerce-cart-form table.shop_table_responsive tr,
    .woocommerce-cart-form table.shop_table_responsive td {
        display: block;
        width: 100%;
        text-align: right !important;
        box-sizing: border-box;
    }

    /* Table header ko hide karna (kyunki mobile pe label side mein aayenge) */
    .woocommerce-cart-form table.shop_table.cart thead {
        display: none;
    }

    .woocommerce-cart-form table.shop_table.cart tr {
        margin-bottom: 20px;
        border: 1px solid var(--pc-border);
        border-radius: var(--pc-radius);
        padding: 10px;
        background: var(--pc-bg);
    }

    /* Product label dikhane ke liye (Before content) */
    .woocommerce-cart-form table.shop_table_responsive tr td::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        color: var(--pc-txt-muted);
    }

    /* Image aur Remove button ko center/adjust karna */
    .woocommerce-cart-form table.shop_table_responsive tr td.product-thumbnail {
        text-align: center !important;
    }
    
    .woocommerce-cart-form table.shop_table_responsive tr td.product-thumbnail::before {
        display: none; /* Image ke aage 'Product' likha hua accha nahi lagta */
    }

    .woocommerce-cart-form table.shop_table_responsive tr td.product-remove {
        text-align: center !important;
        border-bottom: 1px solid var(--pc-border);
        margin-bottom: 10px;
    }

    /* Coupon aur Update Cart section */
    .woocommerce-cart-form .actions {
        text-align: center !important;
    }

    .woocommerce-cart-form .coupon {
        width: 100% !important;
        float: none !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .woocommerce-cart-form .coupon input#coupon_code {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Cart Totals Section */
    .cart-collaterals {
        width: 100% !important;
    }

    .cart_totals {
        width: 100% !important;
        float: none !important;
        padding: 20px;
        background: #f9f9f9;
        border-radius: var(--pc-radius);
    }










/* ═══════════════════════════════════════════
   ULTIMATE CART RESPONSIVE (CENTER ALIGN)
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Pure Form aur Table ko block banana */
    .woocommerce-cart .woocommerce,
    .woocommerce-cart-form,
    .shop_table.cart {
        display: block !important;
        width: 100% !important;
    }

    /* Table Headers ko hide karna */
    .shop_table.cart thead {
        display: none !important;
    }

    /* Har product row ko ek card banana aur center karna */
    .shop_table.cart tr.cart_item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* SAB KUCH CENTER */
        justify-content: center !important;
        padding: 20px 10px !important;
        margin-bottom: 20px !important;
        background: var(--pc-bg) !important;
        border: 1px solid var(--pc-border) !important;
        border-radius: var(--pc-radius) !important;
        box-shadow: var(--pc-shadow) !important;
    }

    /* Table cells (td) ko center karna */
    .shop_table.cart td {
        display: block !important;
        width: 100% !important;
        text-align: center !important; /* TEXT CENTER */
        padding: 10px 0 !important;
        border: none !important;
    }

    /* Thumbnail (Image) styling */
    .shop_table.cart td.product-thumbnail {
        padding-bottom: 15px !important;
    }
    .shop_table.cart td.product-thumbnail img {
        width: 120px !important; /* Thodi badi image center mein */
        height: auto !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
    }

    /* Label dikhane ke liye (Price, Quantity, Total) */
    .shop_table.cart td:not(.product-thumbnail):not(.product-remove)::before {
        content: attr(data-title) ": ";
        font-weight: 700;
        display: block; /* Label ko upar dikhane ke liye */
        margin-bottom: 4px;
        color: var(--pc-txt-muted);
        font-size: 12px;
        text-transform: uppercase;
    }

    /* Quantity input ko center align karna */
    .shop_table.cart td.product-quantity .quantity {
        display: flex !important;
        justify-content: center !important;
    }

    /* Coupon aur Update button wala section */
    .shop_table.cart td.actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .woocommerce-cart-form .coupon {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #coupon_code {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 0 10px 0 !important;
        text-align: center !important;
    }

    /* Buttons ko bada aur center karna */
    .woocommerce .cart .button, 
    .woocommerce .cart input.button {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
    }

    /* CART TOTALS (SABSE NICHE WALA BOX) */
    .cart-collaterals {
        display: flex !important;
        justify-content: center !important;
    }

    .cart_totals {
        width: 100% !important;
        float: none !important;
        padding: 25px !important;
        background: #fdfdfd !important;
        border: 1px solid var(--pc-border) !important;
        border-radius: var(--pc-radius) !important;
    }

    .cart_totals table {
        width: 100% !important;
    }

    .cart_totals table tr {
        display: flex !important;
        justify-content: space-between !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid var(--pc-border) !important;
    }

    .wc-proceed-to-checkout {
        padding-top: 20px !important;
    }

    .checkout-button {
        width: 100% !important;
        text-align: center !important;
        font-size: 16px !important;
        padding: 15px !important;
    }
}