/* ============================================================================
   Shared Golchha product card + layout system.
   Used by product_card.php's gc_product_card() on every storefront page
   (homepage sections, shop-by-category, shop-by-brand, search, related products).
   Link this file in the page <head>; call gc_product_card($product) in a
   .gc-grid (full listing) or .gc-prow (homepage strip / related) container.
   ========================================================================= */

/* ---- Layout: full responsive grid for listing pages (all results) -------- */
.gc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 576px)  { .gc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 992px)  { .gc-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* ---- Layout: homepage / related strip (2-row grid desktop, 2-up swipe mobile) */
.gc-prow { }
@media (min-width: 768px)  { .gc-prow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 992px)  { .gc-prow { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .gc-prow { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 767.98px) {
    .gc-prow {
        display: flex; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 12px; padding-bottom: 6px;
        scrollbar-width: none;
    }
    .gc-prow::-webkit-scrollbar { display: none; height: 0; }
    .gc-prow > .gc-card,
    .gc-prow > .gc-cat { flex: 0 0 46%; scroll-snap-align: start; }
}

/* ---- Product card -------------------------------------------------------- */
.gc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ececf1; border-radius: 12px; overflow: hidden; min-width: 0; transition: box-shadow .15s, transform .15s; }
.gc-card:hover { box-shadow: 0 .5rem 1.25rem rgba(20,20,60,.12); transform: translateY(-2px); }
.gc-card-media { position: relative; padding: 12px; background: #fafafc; }
.gc-card-imgwrap { display: block; }
.gc-card-img { display: block; width: 100%; height: 150px; object-fit: contain; }
.gc-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 6px; line-height: 1; }
.gc-badge-disc  { background: #e8f7ee; color: #0b7a37; }   /* green "-NN%" deal chip — a discount is a saving (benefit) */
.gc-badge-order { background: #fff3e0; color: #b26a00; }   /* amber status chip, distinct from the green deal chip */
.gc-wish { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ececf1; background: #fff; color: #9aa1ac; display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; padding: 0; transition: color .15s, border-color .15s; }
.gc-wish:hover { color: #d6323b; border-color: #f2c4c7; }
.gc-wish.is-wished { color: #d6323b; }
.gc-guest .gc-wish { display: none !important; }   /* wishlist needs login — hide the heart for guests */
.gc-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 10px 12px 12px; }
.gc-code { font-size: .72rem; font-weight: 700; color: #d6323b; margin-bottom: 2px; }
.gc-title { display: block; font-size: .86rem; font-weight: 600; color: #20232a; line-height: 1.3; min-height: 2.25rem; text-decoration: none; margin-bottom: 8px; }
.gc-title:hover { color: #d6323b; }
.gc-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; margin-bottom: 10px; min-height: 1.4rem; }
.gc-price { font-size: 1rem; font-weight: 800; color: #20232a; }
.gc-mrp { font-size: .8rem; color: #9aa1ac; text-decoration: line-through; }
.gc-price-order { font-size: .9rem; font-weight: 700; color: #b26a00; }
/* Scoped to .gc-card so the card button always wins over a page's own
   .add-to-cart styling (the shared button also carries the add-to-cart class). */
.gc-card .gc-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; border: none; border-radius: 8px; padding: .5rem .75rem; font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: none; background: #20232a; color: #fff; transition: background .15s; box-shadow: none; }
.gc-card .gc-add:hover { background: #000; color: #fff; }
.gc-card .gc-add-enquire { background: #fff; color: #20232a; border: 1.5px solid #20232a; }
.gc-card .gc-add-enquire:hover { background: #20232a; color: #fff; }

/* Roomier cards on the full listing grid (category / brand / search): bigger
   product image, larger title/price and more padding, so they don't feel
   cramped. The compact homepage/related strips (.gc-prow) are unaffected. */
@media (min-width: 768px) {
    .gc-grid .gc-card-media { padding: 16px; }
    .gc-grid .gc-card-img   { height: 200px; }
    .gc-grid .gc-card-body  { padding: 14px 16px 16px; }
    .gc-grid .gc-code       { font-size: .76rem; margin-bottom: 3px; }
    .gc-grid .gc-title      { font-size: .95rem; min-height: 2.7rem; margin-bottom: 10px; }
    .gc-grid .gc-price      { font-size: 1.15rem; }
    .gc-grid .gc-mrp        { font-size: .85rem; }
    .gc-grid .gc-price-row  { margin-bottom: 12px; }
    .gc-grid .gc-add        { padding: .62rem .75rem; font-size: .88rem; }
    .gc-grid .gc-wish       { width: 36px; height: 36px; font-size: 1.2rem; }
}

/* ---- Category tile (uses .gc-prow / .gc-grid layout) --------------------- */
.gc-cat { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid #ececf1; border-radius: 12px; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.gc-cat:hover { box-shadow: 0 .5rem 1.25rem rgba(20,20,60,.12); transform: translateY(-2px); }
.gc-cat img { width: 100%; height: 120px; object-fit: contain; padding: 10px; background: #fafafc; }
.gc-cat .gc-cat-name { text-align: center; font-size: .8rem; font-weight: 700; color: #20232a; line-height: 1.3; padding: 8px 6px; min-height: 3.2em; display: flex; align-items: center; justify-content: center; }

/* ---- Brand strip --------------------------------------------------------- */
.gc-brandrow { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 12px; padding-bottom: 8px; scrollbar-width: none; }
.gc-brandrow::-webkit-scrollbar { display: none; height: 0; }
.gc-brand { flex: 0 0 46%; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid #ececf1; border-radius: 12px; overflow: hidden; }
@media (min-width: 576px)  { .gc-brand { flex-basis: 30%; } }
@media (min-width: 768px)  { .gc-brand { flex-basis: 18%; } }
@media (min-width: 1200px) { .gc-brand { flex-basis: 12.5%; } }
.gc-brand img { width: 100%; height: 90px; object-fit: contain; padding: 10px; background: #fafafc; }
.gc-brand .gc-brand-name { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: #20232a; padding: 6px 4px; border-top: 1px solid #f1f1f5; }