/* ========= GRID ========= */
.gplmart-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
}

/* ========= PREMIUM FLOATING CARD ========= */
.gplmart-card{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#fcfdfd 100%);
    border-radius:30px;
    border:1px solid rgba(15,23,42,.05);
    box-shadow:
        0 12px 28px rgba(15,23,42,.05),
        0 28px 70px rgba(15,23,42,.08);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    isolation:isolate;
}

.gplmart-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.70), transparent 40%);
    pointer-events:none;
}

.gplmart-card:hover{
    transform:translateY(-8px);
    border-color:rgba(0,170,99,.18);
    box-shadow:
        0 22px 55px rgba(15,23,42,.12),
        0 38px 90px rgba(0,170,99,.10);
}

/* ========= PREMIUM IMAGE PANEL ========= */
.gplmart-image{
    position:relative;
    margin:20px;
    padding:16px;
    border-radius:24px;
    background:radial-gradient(circle at top left,#f4fff8 0%,#ffffff 75%);
    border:1px solid rgba(15,23,42,.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 10px 24px rgba(15,23,42,.05);
    overflow:hidden;
}

.gplmart-image img{
    display:block;
    width:100%;
    border-radius:16px;
    transition:transform .45s ease;
}

.gplmart-card:hover .gplmart-image img{
    transform:scale(1.03);
}

/* ========= CONTENT ========= */
.gplmart-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:0 30px 30px;
}

.gplmart-category{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color:#6b7280;
    font-size:10px;
    font-weight:500;
    margin-bottom:14px;
    text-transform: uppercase;
}

/* Category ke left me pure CSS SVG Tag Icon */
.gplmart-category::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background-color: #6b7280;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581a2.25 2.25 0 0 0 3.181 0l5.103-5.103a2.25 2.25 0 0 0 0-3.181l-9.581-9.58A2.25 2.25 0 0 0 9.568 3Z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 6h.008v.008H6V6Z' /%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581a2.25 2.25 0 0 0 3.181 0l5.103-5.103a2.25 2.25 0 0 0 0-3.181l-9.581-9.58A2.25 2.25 0 0 0 9.568 3Z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 6h.008v.008H6V6Z' /%3E%3C/svg%3E") no-repeat center / contain;
}

.gplmart-title{
    text-align:center;
    font-size:18px;
    line-height:1.35;
    font-weight:700;
    color:#111827;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
}

/* ========= PRICE + DISCOUNT STACK ========= */
.gplmart-bottom{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    position:relative;
    z-index:2;
    padding-top:10px;
    gap:14px; /* Uniform grid gap badha diya taaki price exact centre lag sake */
}

/* Discount badge */
.gplmart-discount{
    position:relative;
    left:0;
    top:0;
    margin:0; /* Ekdam clean positioning bina unwanted gaps ke */
    display:flex;
    justify-content:flex-start;
    align-self:flex-start;
    z-index:6;
}

.gplmart-discount span,
.gplmart-discount .amount,
.gplmart-discount b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 14px 6px 12px;
    border-top-right-radius:999px;
    border-bottom-right-radius:999px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    background:linear-gradient(135deg,#111827 0%,#1f2937 48%,#0f766e 100%);
    color:#ecfeff;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
        0 12px 26px rgba(15,23,42,.24),
        0 24px 44px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.10);
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(8px);
}

.gplmart-discount span::before,
.gplmart-discount .amount::before,
.gplmart-discount b::before{
    content:"";
    display:inline-block;
    width:14px;
    height:14px;
    margin-right:7px;
    clip-path:polygon(50% 0%,61% 36%,100% 36%,67% 58%,78% 100%,50% 76%,22% 100%,33% 58%,0 36%,39% 36%);
    background:linear-gradient(180deg,#fde68a 0%,#f59e0b 100%);
    box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.gplmart-discount span::after,
.gplmart-discount .amount::after,
.gplmart-discount b::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.16) 35%,rgba(255,255,255,.04) 50%,transparent 65%);
    transform:translateX(-120%);
    animation:badgeSweep 3.2s infinite;
}

@keyframes badgeSweep{
    0%{transform:translateX(-120%);}
    55%{transform:translateX(120%);}
    100%{transform:translateX(120%);}
}

/* Price capsule (Position upari shift ki gayi hai symmetrical dikhne ke liye) */
.gplmart-price{
    position:relative;
    top:0;
    left:0;
    margin: -2px 0 2px 0; /* Negitive margin-top se isko thoda upar shift karke exact middle mein kiya gaya */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:fit-content;
    padding:5px 16px;
    background:linear-gradient(180deg,#00aa63 0%,#008b52 100%);
    border-top-right-radius:999px;
    border-bottom-right-radius:999px;
    box-shadow:
        0 10px 22px rgba(0,0,0,.14),
        0 2px 0 rgba(255,255,255,.16) inset;
    border:1px solid rgba(255,255,255,.14);
    z-index:5;
}

.gplmart-price del{
    color:rgba(255,255,255,0.62);
    font-size:12px;
    font-weight:500;
    text-decoration:line-through;
}

.gplmart-price ins{
    color:#ffffff;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.01em;
}

/* ========= BUY BUTTON ========= */
.gplmart-buy-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:54px;
    padding:11px 18px;
    border-radius:999px;
    background:linear-gradient(180deg,#18cc78 0%,#00a862 100%);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    letter-spacing:.2px;
    border:1px solid rgba(255,255,255,.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 10px 20px rgba(0,170,99,.18),
        0 18px 34px rgba(0,170,99,.12);
    transition:.35s ease;
}

.gplmart-buy-btn:hover{
    transform:translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,170,99,.30);
}

.gplmart-card:hover .gplmart-buy-btn{
    transform:translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 12px 24px rgba(0,170,99,.20),
        0 22px 40px rgba(0,170,99,.12);
}

/* ========= LOAD MORE BUTTON ========= */
.gplmart-loadmore-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:40px 0 10px;
    clear:both;
}

.gplmart-load-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:220px;
    height:56px;
    padding:0 36px;
    border:none;
    border-radius:999px;
    background:linear-gradient(180deg,#18dd7b 0%,#00be6f 100%);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:
        0 10px 25px rgba(0,170,99,.20),
        inset 0 2px 0 rgba(255,255,255,.25);
    transition:all .3s ease;
}

.gplmart-load-more:hover{
    transform:translateY(-3px);
    background:linear-gradient(180deg,#12cc70 0%,#00aa63 100%);
    box-shadow:
        0 18px 40px rgba(0,170,99,.30),
        inset 0 2px 0 rgba(255,255,255,.35);
}

.gplmart-load-more:active{
    transform:translateY(0);
}

/* ========= SKELETON ========= */
.gplmart-skeleton{
    pointer-events:none;
}

.gplmart-skeleton .gplmart-content{
    padding:18px;
}

.sk-image{
    border-radius:0;
    background:#f2f4f7;
    min-height:170px;
}

.sk-title{
    width:100%;
    height:16px;
    border-radius:20px;
    margin-bottom:10px;
}

.sk-title.short{ width:72%; }
.sk-discount{ width:84px; height:28px; border-radius:30px; margin:18px 0 0; }
.sk-price{ width:110px; height:24px; border-radius:30px; margin:14px 0 0; }
.sk-button{ margin-top:auto; height:48px; border-radius:999px; }

.shimmer{
    background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 50%,#f2f2f2 75%);
    background-size:300% 100%;
    animation:gplmart-shimmer .9s linear infinite;
}

@keyframes gplmart-shimmer{
    0%{ background-position:100% 0; }
    100%{ background-position:-100% 0; }
}

/* ========= TABS ========= */
.gplmart-tab{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 0;
    background:none;
    border:none;
    color:#6b7280;
    font-weight:600;
    cursor:pointer;
    transition:color .3s ease;
}

.gplmart-tab:hover{
    color:#111827;
}

.gplmart-tab::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:0;
    height:3px;
    border-radius:999px;
    background:#00aa63;
    transform:translateX(-50%);
    transition:width .30s ease;
}

.gplmart-tab.active{
    color:#111827;
}

.gplmart-tab.active::after{
    width:42px;
}

/* ========= VIEW ALL ========= */
.gplmart-view-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:20px;
    padding:12px 30px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    box-shadow:
        0 12px 28px rgba(17,24,39,.16),
        0 26px 50px rgba(17,24,39,.10);
    transition:.3s;
}

.gplmart-view-all:hover{
    background:#00aa63;
    color:#fff;
    transform:translateY(-2px);
}

/* ===== Ultra Premium Glass Badge ===== */
.gplmart-type-badge {
    position: absolute;
    top: 19px;
    left: 19px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(6, 15, 10, .72) 0%, rgba(10, 28, 18, .66) 55%, rgba(3, 10, 7, .78) 100%);
    border: 1px solid rgba(120, 255, 180, .22);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        0 10px 24px rgba(0,0,0,.26),
        0 1px 0 rgba(255,255,255,.10) inset,
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(0,0,0,.14);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;
}

.gplmart-type-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), transparent 34%, rgba(255,255,255,.03) 68%, transparent 100%),
        radial-gradient(circle at 20% 18%, rgba(120,255,180,.12), transparent 35%);
    pointer-events: none;
}

.gplmart-type-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: 0 0 5px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

/* Theme variants */
.badge-theme { color: #86efac; border-color: rgba(134,239,172,.24); }
.badge-theme::before { background: linear-gradient(180deg,#bbf7d0 0%,#22c55e 100%); box-shadow: 0 0 0 3px rgba(34,197,94,.12), 0 0 12px rgba(34,197,94,.26); }
.badge-plugin { color: #93c5fd; border-color: rgba(147,197,253,.24); }
.badge-plugin::before { background: linear-gradient(180deg,#dbeafe 0%,#3b82f6 100%); box-shadow: 0 0 0 3px rgba(59,130,246,.12), 0 0 12px rgba(59,130,246,.26); }
.badge-membership { color: #fcd34d; border-color: rgba(252,211,77,.24); }
.badge-membership::before { background: linear-gradient(180deg,#fef3c7 0%,#f59e0b 100%); box-shadow: 0 0 0 3px rgba(245,158,11,.12), 0 0 12px rgba(245,158,11,.26); }
.badge-updater { color: #c4b5fd; border-color: rgba(196,181,253,.24); }
.badge-updater::before { background: linear-gradient(180deg,#ede9fe 0%,#8b5cf6 100%); box-shadow: 0 0 0 3px rgba(139,92,246,.12), 0 0 12px rgba(139,92,246,.26); }
.badge-product { color: #e5e7eb; border-color: rgba(229,231,235,.18); }
.badge-product::before { background: linear-gradient(180deg,#f3f4f6 0%,#9ca3af 100%); box-shadow: 0 0 0 3px rgba(156,163,175,.10), 0 0 10px rgba(156,163,175,.20); }

/* ========= RESPONSIVE BREAKPOINTS ========= */
@media (max-width:1200px){
    .gplmart-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:991px){
    .gplmart-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
    .gplmart-title{ font-size:18px; min-height:52px; margin-bottom:12px; }
}

@media (max-width:576px){
    .gplmart-grid{ grid-template-columns:1fr; gap:28px; }
    .gplmart-card{ border-radius:22px; margin-bottom:8px; }
    .gplmart-image{ padding:18px 14px 24px; }
    .gplmart-content{ padding:18px 14px 12px; }
    .gplmart-title{ font-size:17px; min-height:auto; margin-bottom:14px; }
    .gplmart-bottom{ gap:10px; } /* Mobile optimization */
    .gplmart-discount{ margin-bottom:0; }
    .gplmart-price{ margin: -2px 0 2px 0; padding:4px 12px; }
    .gplmart-price ins{ font-size:16px; }
    .gplmart-discount span,
    .gplmart-discount .amount,
    .gplmart-discount b{
        min-height:28px;
        padding:5px 10px;
        font-size:10px;
    }
    .gplmart-type-badge {
        top: 10px;
        left: 10px;
        transform: none;
        padding: 4px 9px 4px 8px;
        gap: 4px;
        font-size: 7px;
    }
}