/*
 * RBX Variation Showcase – Frontend Styles
 * Grid system: 8-point base unit (--rbx-u = 8px)
 * ─────────────────────────────────────────────────
 */

/* ── Design Tokens ───────────────────────────────────────────────── */
:root {
  --rbx-u:        8px;   /* base grid unit                   */

  /* spacing scale: multiples of 8px */
  --rbx-space-1:  calc(var(--rbx-u) * 1);   /*  8px */
  --rbx-space-2:  calc(var(--rbx-u) * 2);   /* 16px */
  --rbx-space-3:  calc(var(--rbx-u) * 3);   /* 24px */
  --rbx-space-4:  calc(var(--rbx-u) * 4);   /* 32px */
  --rbx-space-5:  calc(var(--rbx-u) * 5);   /* 40px */
  --rbx-space-6:  calc(var(--rbx-u) * 6);   /* 48px */

  /* colours */
  --rbx-ink:        #0f172a;
  --rbx-ink-mid:    #475569;
  --rbx-ink-muted:  #94a3b8;
  --rbx-surface:    #ffffff;
  --rbx-surface-2:  #f8fafc;
  --rbx-border:     #e2e8f0;
  --rbx-accent:     #0ea5e9;
  --rbx-accent-dk:  #0284c7;
  --rbx-accent-bg:  #f0f9ff;
  --rbx-price:      #16a34a;
  --rbx-radius:     12px;
  --rbx-radius-sm:  6px;
  --rbx-shadow:     0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --rbx-shadow-hov: 0 4px 8px rgba(0,0,0,.1), 0 12px 32px rgba(0,0,0,.08);
}

/* ── Layout: Showcase Grid ───────────────────────────────────────── */
.rbx-showcase {
  display: grid;
  gap: var(--rbx-space-4);
  grid-template-columns: 1fr;
  padding: var(--rbx-space-4) 0;
  box-sizing: border-box;
}

.rbx-showcase.rbx-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rbx-showcase.rbx-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rbx-showcase.rbx-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .rbx-showcase.rbx-cols-3,
  .rbx-showcase.rbx-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rbx-showcase,
  .rbx-showcase.rbx-cols-2,
  .rbx-showcase.rbx-cols-3,
  .rbx-showcase.rbx-cols-4 { grid-template-columns: 1fr; }
}

/* ── Product Card ────────────────────────────────────────────────── */
.rbx-product {
  background: var(--rbx-surface);
  border: 1px solid var(--rbx-border);
  border-radius: var(--rbx-radius);
  box-shadow: var(--rbx-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.rbx-product:hover {
  box-shadow: var(--rbx-shadow-hov);
  transform: translateY(-2px);
}

/* ── Product Image ───────────────────────────────────────────────── */
.rbx-product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rbx-surface-2);
  flex-shrink: 0;
}
.rbx-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.rbx-product:hover .rbx-product-image img {
  transform: scale(1.04);
}

/* ── Product Body ────────────────────────────────────────────────── */
.rbx-product-body {
  display: flex;
  flex-direction: column;
  gap: var(--rbx-space-2);
  padding: var(--rbx-space-3);
  flex: 1;
}

/* ── Product Name ────────────────────────────────────────────────── */
.rbx-product-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rbx-ink);
  letter-spacing: -0.01em;
}
.rbx-product-name a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.rbx-product-name a:hover { color: var(--rbx-accent); }

/* ── Short Description ───────────────────────────────────────────── */
.rbx-short-desc {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--rbx-ink-mid);
}
.rbx-short-desc p:first-child { margin-top: 0; }
.rbx-short-desc p:last-child  { margin-bottom: 0; }

/* ── Variations (flexbox) ────────────────────────────────────────── */
.rbx-variations {
  margin-top: var(--rbx-space-1);
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  overflow: hidden;
}

/* Every row: flex, equal-width cells via CSS custom property */
.rbx-var-row {
  display: flex;
  align-items: center;
  gap: 0;
  transition: background .12s;
}
.rbx-var-row + .rbx-var-row {
  border-top: 1px solid var(--rbx-border);
}

/* Header row */
.rbx-var-header {
  background: var(--rbx-ink);
}
.rbx-var-header .rbx-var-label {
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Data rows */
.rbx-var-row:not(.rbx-var-header):nth-child(even) { background: var(--rbx-surface-2); }
.rbx-var-row:not(.rbx-var-header):hover            { background: var(--rbx-accent-bg); }

/* Each cell: equal flex share */
.rbx-var-cell {
  flex: 1 1 0;
  padding: var(--rbx-space-1) var(--rbx-space-2);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--rbx-ink-mid);
  min-width: 0;
}

/* Price cell — right-aligned, green, bold */
.rbx-var-price {
  color: var(--rbx-price);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.rbx-var-price .woocommerce-Price-amount { color: inherit; }
.rbx-var-price del { color: var(--rbx-ink-muted); font-weight: 400; margin-right: 4px; }

/* ── "More variations" note ──────────────────────────────────────── */
.rbx-more-note {
  margin: var(--rbx-space-1) 0 0;
  font-size: .75rem;
  color: var(--rbx-ink-muted);
  text-align: right;
  font-style: italic;
}

/* ── View Product Button ─────────────────────────────────────────── */
.rbx-view-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rbx-space-1);
  margin-top: auto;
  padding: calc(var(--rbx-space-1) + 4px) var(--rbx-space-3);
  background: var(--rbx-accent);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--rbx-radius-sm);
  text-decoration: none;
  transition: background .15s, gap .2s;
  align-self: flex-start;
}
.rbx-view-btn:hover {
  background: var(--rbx-accent-dk);
  color: #fff;
  gap: calc(var(--rbx-space-1) + 4px);
}
.rbx-btn-arrow {
  font-style: normal;
  font-weight: 700;
  transition: transform .2s;
}
.rbx-view-btn:hover .rbx-btn-arrow { transform: translateX(2px); }

/* ── No-products fallback ────────────────────────────────────────── */
.rbx-no-products {
  padding: var(--rbx-space-3);
  background: var(--rbx-surface-2);
  border: 1px dashed var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  color: var(--rbx-ink-muted);
  text-align: center;
  font-size: .875rem;
}