/* ── Product Card ── */
.product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.product-item:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.10);
    transform: translateY(-3px);
}

/* Fixed image area */
.product-item figure {
    height: 200px;
    margin: 0;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.product-item figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform .3s;
}
.product-item:hover figure img {
    transform: scale(1.05);
}

/* Card body stretches to fill remaining space */
.product-item .d-flex.flex-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Product name fixed height — 2 lines */
.product-item h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 10px 10px 4px;
    line-height: 1.5;
}

/* Price row */
.product-item .d-flex.justify-content-center {
    margin-bottom: 8px;
    font-size: 13px;
}
.product-item .d-flex.justify-content-center del {
    color: #aaa;
    font-size: 12px;
}
.product-item .d-flex.justify-content-center .fw-semibold {
    color: #1a56db;
    font-size: 14px;
    font-weight: 700 !important;
}

/* Button area always at bottom */
.product-item .button-area {
    margin-top: auto;
    padding: 0 10px 12px !important;
}

/* ── Add to Cart / Qty buttons ── */
.state-add,
.state-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* "Add to Cart" button */
.state-add .atc-btn {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

/* "Details" button */
.state-add .btn-outline-secondary,
.state-qty .btn-outline-secondary.flex-fill {
    flex: 1;
    font-size: 12px;
    padding: 7px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Qty − / + buttons */
.state-qty .qty-minus,
.state-qty .qty-plus {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 16px;
    line-height: 1;
    border-radius: 6px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Qty input */
.state-qty .qty-input {
    width: 44px !important;
    height: 32px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    border-radius: 6px !important;
    flex-shrink: 0;
}

/* col height equalizer — makes all cards in a row same height */
.product-grid .col {
    display: flex;
}
.product-grid .col > .product-item {
    width: 100%;
}

/* ── Cart badge ── */
.cart-count-badge {
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
}

/* ── Responsive Fixes ── */

/* Header: tighten gap on small screens */
@media (max-width: 575px) {
    header .row.py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    header .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

/* Hero banner: reduce height on mobile */
@media (max-width: 767px) {
    .slideshow .swiper-slide { min-height: 220px; }
    .slideshow .jarallax-img { object-fit: cover; height: 220px; }
    .banner-content { padding-top: 1rem !important; }
}

/* Product grid: 2 columns on xs, 2 on sm, 3 on md+ */
@media (max-width: 575px) {
    .product-grid { --bs-gutter-x: 0.5rem; }
    .product-item figure { height: 150px; }
    .product-item h3 { font-size: 12px !important; min-height: 36px; }
}

/* Cart table: ensure custom text input doesn't overflow */
@media (max-width: 575px) {
    .custom-text-input { font-size: 12px; }
    #cart-body td { padding: 0.4rem 0.3rem; }
}

/* Checkout: bank QR code stacks below table on mobile */
@media (max-width: 575px) {
    #bank-details .d-flex.gap-3 { flex-direction: column; align-items: center; }
    #bank-details .text-center { margin-top: 0.75rem; }
}

/* Tags sidebar: hide scrollbar track on mobile */
.d-md-none .overflow-auto::-webkit-scrollbar { height: 4px; }
.d-md-none .overflow-auto::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 2px; }

/* Footer: center text on mobile */
@media (max-width: 767px) {
    footer .copyright, footer .credit-link { text-align: center !important; }
    footer .col-md-3 { margin-bottom: 1.5rem; }
}

/* Cart popup: full width on very small screens */
@media (max-width: 400px) {
    #cart-popup { width: 280px !important; }
}

/* Product details: sticky info only on lg+ */
@media (max-width: 991px) {
    .single-product .product-info { position: static !important; }
    .single-product .row.g-5 { --bs-gutter-y: 1.5rem; }
}