/**
 * SuperSquare Storefront — Product Card Component (v3.3, final replacement)
 *
 * A soft, glass-surfaced card — the opposite silhouette from the previous
 * hard-edged brutalist version: large rounded corners, no border, gentle
 * blurred shadow on hover. Every data point (brand, rating, reviews, price,
 * old price, discount, stock, delivery) is rendered by
 * supersquare_render_product_card() in inc/catalog.php — this file only
 * restyles the presentation.
 *
 * @package SuperSquare_Storefront
 */

:root{
  --pc-ink:#1b1b23;
  --pc-ink-soft:#6b6b78;
  --pc-mist:#f5f4fb;
  --pc-violet:#6c5ce7;
  --pc-teal:#00c9a7;
  --pc-gradient:linear-gradient(120deg,var(--pc-violet),var(--pc-teal));
}

.ssq-product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#ffffff;
  border:1px solid #f0eff7;
  border-radius:20px;
  padding:.9rem;
  overflow:hidden;
  transition:box-shadow .25s ease,transform .25s ease;
}

.ssq-product-card:hover{
  box-shadow:0 22px 48px rgba(27,27,35,.1);
  transform:translateY(-5px);
}

/* Top bar: sale/stock badges + wishlist */
.ssq-card-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.6rem;z-index:2}
.ssq-card-badges{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.ssq-card-badge{font-size:.64rem;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;line-height:1.3}
.ssq-badge-sale{background:var(--pc-gradient);color:#fff}
.ssq-badge-soldout{background:var(--pc-ink);color:#fff}

.ssq-card-wishlist-btn{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;
  color:var(--pc-ink-soft);
  background:var(--pc-mist);
  border:0;
  border-radius:50%;
  cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.ssq-card-wishlist-btn:hover,.ssq-card-wishlist-btn.is-active{color:#fff;background:var(--pc-gradient)}
.ssq-card-wishlist-btn.is-active svg path{fill:#fff}

/* Image */
.ssq-card-image-wrap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;width:100%;
  margin-bottom:.9rem;
  overflow:hidden;
  border-radius:16px;
  background:var(--pc-mist);
}
.ssq-card-img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ssq-product-card:hover .ssq-card-img{transform:scale(1.05)}
.ssq-card-image-fallback{display:grid;place-items:center;width:100%;aspect-ratio:1/1;background:var(--pc-mist);color:var(--pc-ink-soft);font-size:clamp(2rem,8vw,3.4rem);font-weight:700;line-height:1}

/* Utility actions (quick view / compare) — revealed on hover/focus */
.ssq-card-utility-actions{display:flex;position:absolute;z-index:3;right:.6rem;bottom:calc(.9rem + .6rem);gap:.35rem;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.ssq-product-card:hover .ssq-card-utility-actions,.ssq-product-card:focus-within .ssq-card-utility-actions{opacity:1;transform:none}
.ssq-card-tool{min-height:32px;padding:.35rem .7rem;color:var(--pc-ink);font-size:.64rem;font-weight:700;border:0;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 8px 20px rgba(27,27,35,.12);cursor:pointer}
.ssq-card-tool[aria-pressed="true"]{color:#fff;background:var(--pc-gradient)}

/* Body */
.ssq-card-body{display:flex;flex-direction:column;flex:1}
.ssq-card-brand{display:block;margin-bottom:.25rem;overflow:hidden;color:var(--pc-violet);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap}
.ssq-card-cat{margin-bottom:.25rem;font-size:.66rem;font-weight:600;color:var(--pc-ink-soft)}
.ssq-card-cat a{color:var(--pc-ink-soft)}
.ssq-card-cat a:hover{color:var(--pc-violet)}

.ssq-card-title{min-height:2.7em;margin:0 0 .5rem;font-size:.9rem;font-weight:600;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ssq-card-title a{color:var(--pc-ink)}
.ssq-card-title a:hover{color:var(--pc-violet)}

.ssq-card-rating{display:flex;align-items:center;gap:.35rem;min-height:1.2rem;margin-bottom:.45rem;font-size:.72rem}
.ssq-rating-stars{color:#ffb020;letter-spacing:1px}
.ssq-star{color:#e5e3ef}
.ssq-star.is-filled{color:#ffb020}
.ssq-rating-count{color:var(--pc-ink-soft)}

.ssq-card-pricing{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem;margin-top:auto;margin-bottom:.4rem}
.ssq-card-price-html{font-size:1.05rem;font-weight:700;color:var(--pc-ink)}
.ssq-card-price-html del{color:#a6a4b3;font-size:.8rem;font-weight:400;margin-right:.3rem}
.ssq-card-price-html ins{text-decoration:none;color:var(--pc-violet)}
.ssq-card-save-badge{font-size:.66rem;font-weight:700;color:#0a8f74;background:#e3f8f2;padding:1px 8px;border-radius:999px}

.ssq-card-availability{display:flex;min-height:1.4rem;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;margin:0 0 .65rem;color:var(--pc-ink-soft);font-size:.66rem;line-height:1.3}
.ssq-card-availability .is-available{color:#0a8f74;font-weight:700}
.ssq-card-availability .is-unavailable{color:#d1355c;font-weight:700}

/* Actions: Add to Cart + Buy Now — same pill footprint. Add to Cart is now
   the quiet outline action; Buy Now is the confident gradient-filled one
   with a directional arrow — the inverse of every earlier pairing. */
.ssq-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.1rem}

.ssq-btn-card-cart,.ssq-btn-card-buy{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:42px;padding:.6rem .7rem;
  font-size:.76rem;font-weight:700;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

.ssq-btn-card-cart{background:#fff;color:var(--pc-ink)!important;border:1.5px solid #e5e3ef}
.ssq-btn-card-cart:hover{border-color:var(--pc-violet);color:var(--pc-violet)!important}
.ssq-btn-card-cart.loading::after{content:"";display:inline-block;width:11px;height:11px;border:2px solid rgba(108,92,231,.3);border-top-color:var(--pc-violet);border-radius:50%;animation:ssqSpin .6s linear infinite;margin-left:4px}
.ssq-btn-card-cart.added::after{content:" \2713";margin-left:4px}

.ssq-btn-card-buy{background:var(--pc-gradient);color:#ffffff!important;border:0;box-shadow:0 10px 22px rgba(108,92,231,.28)}
.ssq-btn-card-buy::after{content:"\2192";font-size:.85em}
.ssq-btn-card-buy:hover{box-shadow:0 14px 28px rgba(108,92,231,.4)}

@keyframes ssqSpin{to{transform:rotate(360deg)}}

/* Products Grid System */
.ssq-products-grid{display:grid;gap:1.15rem}
.ssq-grid-4col{grid-template-columns:repeat(4,1fr)}
.ssq-grid-3col{grid-template-columns:repeat(3,1fr)}
.ssq-grid-2col{grid-template-columns:repeat(2,1fr)}

@media (max-width:1199px){.ssq-grid-4col{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.ssq-grid-4col,.ssq-grid-3col{grid-template-columns:repeat(2,1fr);gap:.8rem}}
@media (max-width:480px){
  .ssq-grid-4col,.ssq-grid-3col{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .ssq-product-card{padding:.65rem;border-radius:16px}
  .ssq-card-cat,.ssq-card-brand,.ssq-rating-count{display:none}
  .ssq-card-title{font-size:.8rem}
  .ssq-card-price-html{font-size:.92rem}
  .ssq-card-actions{grid-template-columns:1fr}
  .ssq-btn-card-cart,.ssq-btn-card-buy{min-height:40px;font-size:.72rem}
}

/* Quick View dialog */
.ssq-quick-dialog{width:min(92vw,540px);max-height:90vh;padding:2.5rem 1.25rem 1.25rem;overflow:auto;border:0;border-radius:28px;box-shadow:0 30px 90px rgba(27,27,35,.3)}
.ssq-quick-dialog::backdrop{background:rgba(27,27,35,.55);backdrop-filter:blur(6px)}
.ssq-quick-dialog__close{position:absolute;top:.75rem;right:.75rem;width:36px;height:36px;border:0;border-radius:50%;background:var(--pc-mist);font-size:1.5rem;cursor:pointer}
.ssq-quick-dialog .ssq-product-card{max-width:100%;box-shadow:none}

@media (hover:none){.ssq-card-utility-actions{opacity:1;transform:none}}
@media (max-width:480px){.ssq-card-tool{min-height:36px}.ssq-card-actions{grid-template-columns:1fr 1fr}}