/**
 * BrandCoves Products — Frontend card styles
 * Shared across all network drivers. Each driver adds a .bc-card--{slug} modifier.
 */

/* ── Custom properties ───────────────────────────────────────────────────── */
:root {
  --bc-card-bg:          #ffffff;
  --bc-card-border:      #e8e8e8;
  --bc-card-radius:      12px;
  --bc-card-shadow:      0 2px 12px rgba(0,0,0,.08);
  --bc-card-shadow-hover:0 8px 28px rgba(0,0,0,.14);
  --bc-card-gap:         14px;
  --bc-card-img-h:       200px;

  --bc-color-title:      #111111;
  --bc-color-brand:      #666666;
  --bc-color-merchant:   #888888;
  --bc-color-price:      #111111;
  --bc-color-sale:       #c0392b;
  --bc-color-btn-bg:     #1a1a1a;
  --bc-color-btn-text:   #ffffff;
  --bc-color-btn-hover:  #333333;

  --bc-font-base:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bc-font-size-sm:     0.75rem;
  --bc-font-size-base:   0.875rem;
  --bc-font-size-price:  1.125rem;
}

/* ── Base card ───────────────────────────────────────────────────────────── */
.bc-product-card {
  display:        flex;
  flex-direction: column;
  background:     var(--bc-card-bg);
  border:         1px solid var(--bc-card-border);
  border-radius:  var(--bc-card-radius);
  box-shadow:     var(--bc-card-shadow);
  overflow:       hidden;
  font-family:    var(--bc-font-base);
  transition:     box-shadow .2s ease, transform .2s ease;
  max-width:      280px;
}

.bc-product-card:hover {
  box-shadow: var(--bc-card-shadow-hover);
  transform:  translateY(-2px);
}

/* ── Image ───────────────────────────────────────────────────────────────── */
.bc-product-image {
  display: block;
  overflow: hidden;
  height: var(--bc-card-img-h);
  background: #f5f5f5;
  flex-shrink: 0;
}

.bc-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  transition: transform .3s ease;
}

.bc-product-card:hover .bc-product-image img {
  transform: scale(1.04);
}

/* ── Info block ──────────────────────────────────────────────────────────── */
.bc-product-info {
  display:        flex;
  flex-direction: column;
  gap:            var(--bc-card-gap);
  padding:        16px;
  flex:           1;
}

/* ── Merchant tag ────────────────────────────────────────────────────────── */
.bc-merchant-tag {
  font-size:      var(--bc-font-size-sm);
  color:          var(--bc-color-merchant);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight:    500;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.bc-product-title {
  margin:         0;
  font-size:      var(--bc-font-size-base);
  font-weight:    600;
  line-height:    1.4;
  color:          var(--bc-color-title);
  display:        -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}

.bc-product-title a {
  color: inherit;
  text-decoration: none;
}

.bc-product-title a:hover {
  text-decoration: underline;
}

/* ── Brand ───────────────────────────────────────────────────────────────── */
.bc-brand {
  font-size:  var(--bc-font-size-sm);
  color:      var(--bc-color-brand);
  font-style: italic;
}

/* ── Price ───────────────────────────────────────────────────────────────── */
.bc-price {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  font-size:   var(--bc-font-size-price);
  font-weight: 700;
  color:       var(--bc-color-price);
}

.bc-price-currency {
  font-size:   0.85em;
  font-weight: 500;
}

.bc-sale-price {
  font-size:  0.8em;
  font-weight: 400;
  color:       var(--bc-color-sale);
  text-decoration: line-through;
}

/* ── Buy button ──────────────────────────────────────────────────────────── */
.bc-buy-btn {
  display:         block;
  margin-top:      auto;
  padding:         10px 16px;
  background:      var(--bc-color-btn-bg);
  color:           var(--bc-color-btn-text);
  text-align:      center;
  text-decoration: none;
  border-radius:   8px;
  font-size:       var(--bc-font-size-base);
  font-weight:     600;
  transition:      background .18s ease;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.bc-buy-btn:hover {
  background: var(--bc-color-btn-hover);
  color:      var(--bc-color-btn-text);
}

/* ── Fallback card ───────────────────────────────────────────────────────── */
.bc-card--fallback {
  opacity: .7;
  min-height: 80px;
}

.bc-no-results {
  margin:    0;
  font-size: var(--bc-font-size-base);
  color:     var(--bc-color-brand);
}

/* ── Amazon local-price buttons ──────────────────────────────────────────── */
.bc-local-prices {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-top:     auto;
}

.bc-local-price-btn {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         7px 12px;
  background:      #fff8f0;
  border:          1px solid #ffe0b2;
  border-radius:   7px;
  text-decoration: none;
  font-size:       var(--bc-font-size-sm);
  font-family:     var(--bc-font-base);
  transition:      background .15s ease, border-color .15s ease;
}

.bc-local-price-btn:hover {
  background:    #fff1dc;
  border-color:  #FF9900;
}

.bc-lp-store {
  color:       #555;
  font-weight: 500;
}

.bc-lp-price {
  color:       #b45309;
  font-weight: 700;
  font-size:   0.82rem;
  white-space: nowrap;
}

/* ── Network modifier: Awin ──────────────────────────────────────────────── */
.bc-card--awin .bc-buy-btn {
  background: #00aff0;
}

.bc-card--awin .bc-buy-btn:hover {
  background: #0090cc;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .bc-product-card {
    max-width: 100%;
  }
  :root {
    --bc-card-img-h: 160px;
  }
}