/* =====================================================================
   Shop: product grid & cards, filters, toolbar, WhatsApp Cart
   ===================================================================== */

/* ---------- Product grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.product-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Product card ---------- */
.product-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--light-gold); }

.product-media { position: relative; aspect-ratio: 1 / 1.08; background: var(--cream); overflow: hidden; }
.product-img-link, .product-img-link img { display: block; width: 100%; height: 100%; }
.product-img-link img { object-fit: cover; transition: transform .9s var(--ease); }
.product-card:hover .product-img-link img { transform: scale(1.06); }

.product-badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-direction: column; gap: .35rem; z-index: 2; }
.product-badges span, .gallery-main .badge-sale { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; }
.badge-sale { background: var(--dark-brown); color: var(--light-gold); }
.badge-new { background: var(--gold-gradient); color: var(--white); }
.badge-out { background: rgba(255, 255, 255, .92); color: var(--muted); border: 1px solid var(--line); }

.wishlist-btn { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); color: var(--dark-brown); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), color .2s; }
.wishlist-btn:hover { transform: scale(1.1); color: var(--primary-gold); }
.wishlist-btn.active { color: #C0392B; }
.wishlist-btn.active i { animation: heart .4s var(--ease); }
@keyframes heart { 50% { transform: scale(1.35); } }

.quick-cart { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 2; border: 0; border-radius: 999px; background: rgba(52, 17, 0, .88); color: var(--light-gold); font-size: .78rem; letter-spacing: .06em; padding: .55rem; display: flex; align-items: center; justify-content: center; gap: .4rem; opacity: 0; transform: translateY(10px); transition: all .3s var(--ease); backdrop-filter: blur(4px); }
.product-card:hover .quick-cart, .quick-cart:focus-visible { opacity: 1; transform: translateY(0); }
.quick-cart:hover { background: var(--dark-brown); color: var(--white); }

.product-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--primary-gold); font-weight: 500; }
.product-title { font-size: 1.22rem; margin: .2rem 0 .35rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.product-title a { color: var(--dark-brown); }
.product-title a:hover { color: var(--primary-gold); }
.product-price { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .9rem; }
.price-now { font-weight: 600; font-size: 1.05rem; color: var(--dark-brown); }
.price-was { color: #A8998C; font-size: .88rem; }
.product-actions { display: grid; gap: .5rem; margin-top: auto; }
.product-actions .btn { width: 100%; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Shop layout ---------- */
.shop-filters .offcanvas-body { padding: 0; }
.filter-block { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.filter-block h3 { font-size: 1.25rem; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.filter-list, .filter-list ul { list-style: none; padding: 0; margin: 0; }
.filter-list ul { padding-left: .9rem; border-left: 1px solid var(--line); margin: .15rem 0 .4rem .3rem; }
.filter-list a { display: block; padding: .32rem 0; color: var(--brown-soft); font-size: .92rem; }
.filter-list a:hover, .filter-list a.active { color: var(--primary-gold); }
.filter-list a.active { font-weight: 600; }
.filter-list a.active::before { content: '◆'; font-size: .55rem; margin-right: .45rem; vertical-align: middle; }
.filter-block .form-check { margin-bottom: .35rem; }

.shop-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.result-count { color: var(--muted); font-size: .9rem; }
.sort-form { margin-left: auto; }
.sort-form .form-select { min-width: 190px; border-radius: 999px; }

/* Pagination */
.pagination { gap: .35rem; }
.page-link { border-radius: 50% !important; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--dark-brown); border-color: var(--line); padding: 0; }
.page-link:hover { background: var(--cream); color: var(--primary-gold); border-color: var(--light-gold); }
.page-item.active .page-link { background: var(--primary-gold); border-color: var(--primary-gold); color: var(--white); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(230, 195, 106, .35); }

/* ---------- Quantity control ---------- */
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.qty-control button { width: 42px; height: 44px; border: 0; background: transparent; color: var(--dark-brown); font-size: 1rem; }
.qty-control button:hover { background: var(--cream); color: var(--primary-gold); }
.qty-control input { width: 48px; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; background: transparent; }
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-control input:focus { outline: none; }
.qty-control.sm button { width: 34px; height: 36px; }
.qty-control.sm input { width: 38px; }

/* ---------- WhatsApp Cart ---------- */
.cart-table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cart-table { --bs-table-bg: transparent; }
.cart-table thead th { background: var(--cream); font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 1rem; border-color: var(--line); }
.cart-img { width: 96px; }
.cart-img img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.cart-name a { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--dark-brown); display: block; line-height: 1.25; }
.cart-name a:hover { color: var(--primary-gold); }
.cart-name small { display: block; color: var(--muted); font-size: .78rem; }
.btn-remove { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--muted); }
.btn-remove:hover { border-color: #C0392B; color: #C0392B; }
tr.removing { opacity: .3; transition: opacity .3s; }

.cart-summary { position: sticky; top: 110px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.cart-summary h2 { font-size: 1.7rem; margin-bottom: 1.2rem; }
.summary-row { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.summary-row.total { font-weight: 600; font-size: 1.15rem; color: var(--dark-brown); border-bottom: 0; }
.summary-note { font-size: .82rem; color: var(--muted); margin: .4rem 0 1.2rem; }

.product-grid.grid-4-sm2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .product-grid.grid-4-sm2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }