/* ============================================================
   GLOBAL PRODUCT CARD  +  LISTING PAGE STYLES  v3
   public/frontEnd/css/product-card.css

   Scopes:  .gpc*   = product card
            .lp-*   = listing page shared (search/brand/vendor)
            .vs-*   = vendor shop header
   ============================================================ */

:root {
    --gpc-p:   var(--sh-p, #e8500a);
    --gpc-pd:  color-mix(in srgb, var(--sh-p, #e8500a) 82%, #000);
    --gpc-ps:  color-mix(in srgb, var(--sh-p, #e8500a) 10%, #fff);
    --gpc-t1:  #111827;
    --gpc-t2:  #374151;
    --gpc-mu:  #6b7280;
    --gpc-bd:  #e5e7eb;
    --gpc-sur: #ffffff;
    --gpc-bg:  #f5f6fa;
    --gpc-r:   12px;
    --gpc-t:   .24s cubic-bezier(.4,0,.2,1);
    --gpc-s1:  0 1px 4px rgba(0,0,0,.05);
    --gpc-s2:  0 6px 22px rgba(0,0,0,.09);
    --gpc-s3:  0 14px 42px rgba(0,0,0,.14);
}

/* ════════════════════════════════════════════════════
   PRODUCT CARD
════════════════════════════════════════════════════ */
.gpc {
    display: flex; flex-direction: column;
    background: var(--gpc-sur);
    border-radius: var(--gpc-r);
    border: 1.5px solid var(--gpc-bd);
    overflow: hidden; position: relative;
    transition: transform var(--gpc-t), box-shadow var(--gpc-t), border-color var(--gpc-t);
    box-shadow: var(--gpc-s1); height: 100%;
}
.gpc:hover { transform: translateY(-5px); box-shadow: var(--gpc-s3); border-color: var(--gpc-p); }

/* image zone */
.gpc__img-zone {
    position: relative; background: #f8f9fa;
    overflow: hidden; aspect-ratio: 1/1; flex-shrink: 0;
}
.gpc__img-link { display: block; width: 100%; height: 100%; }
.gpc__img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .44s cubic-bezier(.4,0,.2,1); }
.gpc:hover .gpc__img { transform: scale(1.07); }

/* badges */
.gpc__badges { position:absolute; top:9px; left:9px; z-index:3; display:flex; flex-direction:column; gap:4px; }
.gpc__badge  { font-size:10px; font-weight:800; padding:2px 9px; border-radius:20px; line-height:1.5; letter-spacing:.03em; }
.gpc__badge--sale { background: linear-gradient(135deg,#ef4444,#dc2626); color:#fff; box-shadow:0 2px 6px rgba(239,68,68,.3); }
.gpc__badge--new  { background: linear-gradient(135deg,#10b981,#059669); color:#fff; }

/* wishlist */
.gpc__wish {
    position:absolute; top:9px; right:9px; z-index:3;
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.92); border:1.5px solid var(--gpc-bd);
    color:#bbb; font-size:13px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; backdrop-filter:blur(4px);
    transition:background var(--gpc-t),color var(--gpc-t),border-color var(--gpc-t),transform var(--gpc-t);
}
.gpc__wish:hover,.gpc__wish.wishlisted { background:#fff0ef; color:#ef4444; border-color:#ef4444; transform:scale(1.14); }

/* quick view */
.gpc__qv-overlay {
    position:absolute; inset:0; z-index:2;
    background:rgba(0,0,0,.28);
    display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px;
    opacity:0; transition:opacity var(--gpc-t);
}
.gpc:hover .gpc__qv-overlay { opacity:1; }
.gpc__qv-btn {
    background:#fff; color:var(--gpc-t1); border:none; border-radius:20px;
    padding:6px 15px; font-size:12px; font-weight:700;
    display:inline-flex; align-items:center; gap:5px;
    cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18);
    transition:background var(--gpc-t),color var(--gpc-t),transform var(--gpc-t);
}
.gpc__qv-btn:hover { background:var(--gpc-p); color:#fff; transform:translateY(-2px); }

/* body */
.gpc__body { display:flex; flex-direction:column; gap:6px; padding:11px 12px 13px; flex:1; }
.gpc__cat-pill {
    display:inline-block; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--gpc-p); background:var(--gpc-ps);
    padding:2px 8px; border-radius:12px; text-decoration:none;
    width:fit-content; transition:background var(--gpc-t),color var(--gpc-t);
}
.gpc__cat-pill:hover { background:var(--gpc-p); color:#fff; }
.gpc__name {
    margin:0; font-size:13.5px; font-weight:600; color:var(--gpc-t1);
    line-height:1.4; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em;
}
.gpc__name a { color:inherit; text-decoration:none; }
.gpc__name a:hover { color:var(--gpc-p); }
.gpc__rating { display:flex; align-items:center; gap:5px; }
.gpc__stars  { display:flex; gap:1.5px; color:#f59e0b; font-size:11px; }
.gpc__review-count { font-size:11px; color:var(--gpc-mu); }
.gpc__price-row { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-top:1px; }
.gpc__price     { font-size:16px; font-weight:800; color:var(--gpc-p); line-height:1; }
.gpc__old-price { font-size:12px; color:#9ca3af; text-decoration:line-through; font-weight:400; }

/* CTA */
.gpc__cta { display:flex; gap:7px; margin-top:4px; }
.gpc__btn-order {
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 10px; background:var(--gpc-p); color:#fff;
    border:none; border-radius:8px; font-size:12.5px; font-weight:700;
    cursor:pointer; text-decoration:none; font-family:inherit;
    transition:background var(--gpc-t),transform var(--gpc-t),box-shadow var(--gpc-t);
    white-space:nowrap;
}
.gpc__btn-order:hover {
    background:var(--gpc-pd); color:#fff; transform:translateY(-1px);
    box-shadow:0 4px 12px color-mix(in srgb, var(--gpc-p) 35%, transparent);
}
.gpc__btn-cart {
    flex-shrink:0; width:38px; height:38px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--gpc-ps); color:var(--gpc-p);
    border:1.5px solid var(--gpc-bd); border-radius:8px; font-size:15px;
    cursor:pointer; text-decoration:none; font-family:inherit;
    transition:background var(--gpc-t),color var(--gpc-t),border-color var(--gpc-t),transform var(--gpc-t);
}
.gpc__btn-cart:hover { background:var(--gpc-p); color:#fff; border-color:var(--gpc-p); transform:translateY(-1px); }

/* mobile tweaks */
@media (max-width: 575.98px) {
    .gpc__body { padding:9px 9px 11px; gap:5px; }
    .gpc__name { font-size:12.5px; }
    .gpc__price { font-size:14px; }
    .gpc__btn-order { padding:8px; font-size:11.5px; }
    .gpc__btn-cart  { width:34px; height:34px; font-size:13px; }
    .gpc__qv-overlay { display:none; }
}

/* ════════════════════════════════════════════════════
   LISTING PAGE SHARED  .lp-*
════════════════════════════════════════════════════ */
.lp-page { background:var(--gpc-bg); min-height:60vh; }

/* topbar */
.lp-topbar { background:var(--gpc-sur); border-bottom:1px solid var(--gpc-bd); padding:11px 0; margin-bottom:18px; }
.lp-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; flex-wrap:wrap; }
.lp-breadcrumb a { color:var(--gpc-mu); text-decoration:none; transition:color var(--gpc-t); }
.lp-breadcrumb a:hover { color:var(--gpc-p); }
.lp-breadcrumb .sep { color:#d1d5db; font-size:10px; }
.lp-breadcrumb strong { color:var(--gpc-t1); font-weight:600; }

/* toolbar */
.lp-toolbar {
    background:var(--gpc-sur); border:1.5px solid var(--gpc-bd); border-radius:12px;
    padding:12px 18px; margin-bottom:20px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.lp-result-count { font-size:13.5px; color:var(--gpc-mu); font-weight:500; }
.lp-result-count strong { color:var(--gpc-t1); font-weight:700; }
.lp-toolbar-right { display:flex; align-items:center; gap:10px; }
.lp-sort-select {
    border:1.5px solid var(--gpc-bd); border-radius:8px;
    padding:7px 32px 7px 12px; font-size:13px; font-family:inherit;
    color:var(--gpc-t2); background:#fff; appearance:none; cursor:pointer; outline:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
    transition:border-color var(--gpc-t),box-shadow var(--gpc-t);
}
.lp-sort-select:focus { border-color:var(--gpc-p); box-shadow:0 0 0 3px var(--gpc-ps); }
.lp-filter-btn {
    display:none; align-items:center; gap:7px; padding:7px 14px;
    border:1.5px solid var(--gpc-bd); border-radius:8px;
    background:#fff; color:var(--gpc-t2); font-size:13px; font-weight:600;
    cursor:pointer; font-family:inherit;
    transition:border-color var(--gpc-t),background var(--gpc-t),color var(--gpc-t);
}
.lp-filter-btn:hover { border-color:var(--gpc-p); background:var(--gpc-ps); color:var(--gpc-p); }
@media (max-width:767.98px) { .lp-filter-btn { display:flex; } }

/* product grid */
.lp-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px; margin-bottom:30px;
}
@media (max-width:1399.98px) { .lp-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:991.98px)  { .lp-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:767.98px)  { .lp-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:374.98px)  { .lp-grid { grid-template-columns:1fr; } }

/* empty state */
.lp-empty {
    grid-column:1/-1;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:60px 20px; text-align:center;
}
.lp-empty-icon {
    width:80px; height:80px; border-radius:50%;
    background:var(--gpc-ps); color:var(--gpc-p);
    font-size:30px; display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
}
.lp-empty h3 { font-size:18px; font-weight:700; color:var(--gpc-t1); margin-bottom:8px; }
.lp-empty p  { color:var(--gpc-mu); font-size:14px; margin:0; }
.lp-empty-btn {
    margin-top:16px; display:inline-flex; align-items:center; gap:7px;
    padding:10px 22px; background:var(--gpc-p); color:#fff;
    border-radius:8px; font-weight:700; text-decoration:none;
    transition:background var(--gpc-t),transform var(--gpc-t);
}
.lp-empty-btn:hover { background:var(--gpc-pd); color:#fff; transform:translateY(-1px); }

/* pagination wrapper – wraps {{ $products->links() }} */
.lp-pagination { padding:4px 0 32px; }
.lp-pagination .pagination {
    display:flex; justify-content:center; flex-wrap:wrap; gap:5px;
    list-style:none; margin:0; padding:0;
}
.lp-pagination .page-item .page-link {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; padding:0 8px; border-radius:9px;
    border:1.5px solid var(--gpc-bd); background:var(--gpc-sur);
    color:var(--gpc-t2); font-size:13.5px; font-weight:600;
    transition:background var(--gpc-t),color var(--gpc-t),border-color var(--gpc-t),transform var(--gpc-t);
}
.lp-pagination .page-item .page-link:hover {
    background:var(--gpc-p); color:#fff; border-color:var(--gpc-p); transform:translateY(-1px);
}
.lp-pagination .page-item.active .page-link {
    background:var(--gpc-p); color:#fff; border-color:var(--gpc-p); pointer-events:none;
}
.lp-pagination .page-item.disabled .page-link {
    background:#f9fafb; color:#d1d5db; border-color:#f3f4f6; cursor:not-allowed;
}

/* ════════════════════════════════════════════════════
   VENDOR SHOP HEADER  .vs-*
════════════════════════════════════════════════════ */
.vs-header {
    border-radius:16px; overflow:hidden;
    margin-bottom:24px; position:relative; min-height:180px;
}
.vs-banner { position:absolute; inset:0; background-size:cover; background-position:center; }
.vs-banner::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 100%);
}
.vs-header-content {
    position:relative; z-index:2; padding:32px 28px;
    display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
@media (max-width:767.98px) {
    .vs-header-content { flex-direction:column; text-align:center; padding:24px 16px; gap:16px; }
}
.vs-logo-wrap { position:relative; flex-shrink:0; }
.vs-logo {
    width:100px; height:100px; border-radius:50%;
    border:4px solid rgba(255,255,255,.9);
    box-shadow:0 4px 20px rgba(0,0,0,.3);
    object-fit:cover; display:block;
}
.vs-logo-placeholder {
    width:100px; height:100px; border-radius:50%;
    border:4px solid rgba(255,255,255,.9);
    background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:40px; font-weight:800; color:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.vs-verified {
    position:absolute; bottom:2px; right:2px;
    width:28px; height:28px; border-radius:50%;
    background:#0d6efd; display:flex; align-items:center; justify-content:center;
    border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.vs-verified i { color:#fff; font-size:13px; }
.vs-info { flex:1; min-width:0; }
.vs-shop-name {
    font-size:26px; font-weight:800; color:#fff;
    margin:0 0 14px; text-shadow:0 2px 8px rgba(0,0,0,.4); line-height:1.2;
}
@media (max-width:575.98px) { .vs-shop-name { font-size:20px; } }
.vs-stats { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:767.98px) { .vs-stats { justify-content:center; } }
.vs-stat {
    background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2); border-radius:10px;
    padding:10px 16px; color:#fff; text-align:center; min-width:76px;
}
.vs-stat-num  { display:block; font-size:20px; font-weight:800; line-height:1; }
.vs-stat-lbl  { display:block; font-size:11px; opacity:.85; margin-top:3px; }
.vs-stat-stars { display:flex; gap:2px; color:#fbbf24; font-size:13px; justify-content:center; margin-bottom:3px; }