/**
 * ExtraCoins — Studio / Boutique
 * Gallery layout for high-ticket singles and slabs.
 * Follows html[data-theme=light|dark] — does not fight the store chrome.
 */

body.ec-mode-studio {
  --ec-studio-page: #f3efe8;
  --ec-studio-card: #fffcf8;
  --ec-studio-well: #ece7df;
  --ec-studio-ink: #1c1917;
  --ec-studio-muted: #57534e;
  --ec-studio-faint: #78716c;
  --ec-studio-line: rgba(28, 25, 23, 0.1);
  --ec-studio-shadow: 0 18px 40px -24px rgba(28, 25, 23, 0.28);
  --ec-studio-chip: #f5f0e8;
  --ec-studio-chip-ink: #44403c;
  background: var(--ec-studio-page);
  color: var(--ec-studio-ink);
}

html[data-theme="dark"] body.ec-mode-studio,
html.ec-dark body.ec-mode-studio {
  --ec-studio-page: #0c0d12;
  --ec-studio-card: #16141a;
  --ec-studio-well: #0a090c;
  --ec-studio-ink: #f4efe8;
  --ec-studio-muted: #c4b8a8;
  --ec-studio-faint: #8a8074;
  --ec-studio-line: rgba(244, 239, 232, 0.1);
  --ec-studio-shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.65);
  --ec-studio-chip: #241f1a;
  --ec-studio-chip-ink: #d6cbbd;
  background: var(--ec-studio-page) !important;
  color: var(--ec-studio-ink) !important;
}

body.ec-mode-studio .ec-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  body.ec-mode-studio .ec-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem;
  }
}

body.ec-mode-studio .ec-studio-kicker {
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-studio-faint);
}

body.ec-mode-studio h1 {
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ec-studio-ink) !important;
}

body.ec-mode-studio .text-slate-500,
body.ec-mode-studio .text-slate-600,
html[data-theme="dark"] body.ec-mode-studio .text-slate-500,
html[data-theme="dark"] body.ec-mode-studio .text-slate-600 {
  color: var(--ec-studio-muted) !important;
}

body.ec-mode-studio .ec-studio-card,
html[data-theme="dark"] body.ec-mode-studio .product-card.ec-studio-card {
  background: var(--ec-studio-card) !important;
  border: 1px solid var(--ec-studio-line) !important;
  border-radius: 1.35rem;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.ec-mode-studio .ec-studio-card:hover,
html[data-theme="dark"] body.ec-mode-studio .product-card.ec-studio-card:hover {
  transform: translateY(-3px);
  border-color: rgba(120, 113, 108, 0.35) !important;
  box-shadow: var(--ec-studio-shadow) !important;
}

html[data-theme="dark"] body.ec-mode-studio .ec-studio-card:hover {
  border-color: rgba(212, 196, 176, 0.28) !important;
}

/* Photo well — square, contain, not a cropped thumbnail */
body.ec-mode-studio .ec-studio-card > a.block {
  display: block;
  padding: 0.85rem 0.85rem 0;
  background: var(--ec-studio-card);
}
body.ec-mode-studio .ec-studio-card .ec-product-image-wrap {
  aspect-ratio: 1 / 1;
  background: var(--ec-studio-well) !important;
  border-radius: 0.9rem;
  overflow: hidden;
}
body.ec-mode-studio .ec-studio-card .ec-product-image,
body.ec-mode-studio .ec-studio-card img,
body.ec-mode-studio .ec-studio-card video {
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: transparent !important;
}

body.ec-mode-studio .ec-studio-card .p-4 {
  padding: 1.15rem 1.2rem 1.3rem;
}

body.ec-mode-studio .ec-studio-card a.font-semibold {
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ec-studio-ink) !important;
}
body.ec-mode-studio .ec-studio-card a.font-semibold:hover {
  color: var(--ec-studio-muted) !important;
}

body.ec-mode-studio .ec-studio-card .text-xs.text-slate-500,
body.ec-mode-studio .ec-studio-card .line-clamp-2.text-slate-500 {
  color: var(--ec-studio-muted) !important;
}

body.ec-mode-studio .ec-studio-card .text-amber-700 {
  color: var(--ec-studio-faint) !important;
  letter-spacing: 0.14em;
  font-weight: 650;
}

body.ec-mode-studio .ec-studio-card .bg-emerald-100,
body.ec-mode-studio .ec-studio-card .bg-sky-100,
body.ec-mode-studio .ec-studio-card .bg-amber-100,
html[data-theme="dark"] body.ec-mode-studio .ec-studio-card .bg-emerald-100,
html[data-theme="dark"] body.ec-mode-studio .ec-studio-card .bg-sky-100,
html[data-theme="dark"] body.ec-mode-studio .ec-studio-card .bg-amber-100 {
  background: var(--ec-studio-chip) !important;
  color: var(--ec-studio-chip-ink) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--ec-studio-line);
}

body.ec-mode-studio .ec-studio-card .price,
body.ec-mode-studio .ec-studio-card [data-ec-live-price] {
  font-size: 1.2rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ec-studio-ink) !important;
}

body.ec-mode-studio .ec-studio-card .ec-volume-breaks,
html[data-theme="dark"] body.ec-mode-studio .ec-studio-card .ec-volume-breaks {
  background: var(--ec-studio-well) !important;
  border-color: var(--ec-studio-line) !important;
  color: var(--ec-studio-muted) !important;
}

body.ec-mode-studio .ec-studio-card .ec-stock-badge {
  background: rgba(28, 25, 23, 0.72);
  font-weight: 550;
  letter-spacing: 0.04em;
}
html[data-theme="dark"] body.ec-mode-studio .ec-studio-card .ec-stock-badge {
  background: rgba(0, 0, 0, 0.62);
}

body.ec-mode-studio .ec-catalog-toolbar,
html[data-theme="dark"] body.ec-mode-studio .ec-catalog-toolbar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
}
body.ec-mode-studio .ec-catalog-sort-select,
html[data-theme="dark"] body.ec-mode-studio .ec-catalog-sort-select {
  background: var(--ec-studio-card) !important;
  color: var(--ec-studio-ink) !important;
  border-color: var(--ec-studio-line) !important;
}
body.ec-mode-studio a.ec-catalog-chip,
html[data-theme="dark"] body.ec-mode-studio a.ec-catalog-chip {
  background: var(--ec-studio-chip);
  border-color: var(--ec-studio-line);
  color: var(--ec-studio-muted);
}
body.ec-mode-studio a.ec-catalog-chip.is-active,
html[data-theme="dark"] body.ec-mode-studio a.ec-catalog-chip.is-active {
  background: var(--ec-studio-ink);
  color: var(--ec-studio-card);
  border-color: var(--ec-studio-ink);
}

body.ec-mode-studio .ec-shop-pagination,
html[data-theme="dark"] body.ec-mode-studio .ec-shop-pagination {
  background: var(--ec-studio-card) !important;
  border-color: var(--ec-studio-line) !important;
  color: var(--ec-studio-ink);
  box-shadow: none !important;
}
body.ec-mode-studio .ec-shop-pagination a:hover {
  background: var(--ec-studio-well) !important;
}

body.ec-mode-studio .rounded-3xl.bg-white,
html[data-theme="dark"] body.ec-mode-studio .rounded-3xl.bg-white {
  background: var(--ec-studio-card) !important;
  border-color: var(--ec-studio-line) !important;
  color: var(--ec-studio-ink) !important;
}

body.ec-mode-studio .ec-img-placeholder {
  background: var(--ec-studio-well) !important;
  color: var(--ec-studio-muted) !important;
  border-color: var(--ec-studio-line) !important;
}
body.ec-mode-studio .ec-img-placeholder__title {
  color: var(--ec-studio-ink) !important;
}
body.ec-mode-studio .ec-img-placeholder__icon {
  background: var(--ec-studio-card) !important;
  border-color: var(--ec-studio-line) !important;
  color: var(--ec-studio-faint) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.ec-mode-studio .ec-studio-card {
    transition: none;
  }
  body.ec-mode-studio .ec-studio-card:hover {
    transform: none;
  }
}