/* data-card.css — visuals for the category-thumb / price-sparkline
   components (see includes/data_visual.php). Kept as a separate file
   rather than hand-edited into site.css, since site.css is a compiled
   build artifact (Tailwind) that a future build would overwrite. Reuses
   the same --color-* custom properties site.css already defines on :root,
   loaded after site.css so those tokens are available here. */

.product-card__media .cat-thumb,
.product-hero__cat-thumb {
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--color-line, #e4ddd0);
  background: var(--color-paper, #fafafa);
}

/* Per-product generative visual -- see render_product_visual() in
   data_visual.php. Deliberately soft-edged/abstract (never a hard geometric
   pattern) so it reads as decorative, not as an attempt to depict the
   actual item. */
.product-visual {
  border-radius: 10px;
  border: 1px solid var(--color-line, #e4ddd0);
  max-width: 100%;
}

.product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper, #fafafa);
  aspect-ratio: 1 / 1;
}

/* [2026-07-25] Real Amazon product photos (image_url) reinstated -- see
   product-card.php / product.php. Photos vary in aspect ratio (unlike the
   uniform square icons they replaced) -- aspect-ratio:1 on the container
   above keeps every card's image slot the same size across a grid
   regardless of each photo's natural proportions, and object-fit: contain
   keeps a tall or wide product fully visible within that fixed box instead
   of being cropped or stretched. */
.product-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Hero image on product.php -- wrapped in its own fixed-ratio box (the <a>
   linking to Amazon) separate from .product-page__media's aspect-ratio:auto
   above, which exists for the image+chart STACK, not the image alone. */
.product-page__media > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  background: var(--color-paper, #fafafa);
  border-radius: 10px;
}
.product-page__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* [2026-07-24] site.css forces .product-page__media into aspect-ratio:1 --
   sized correctly for the original square product PHOTO, but now that this
   holds a shorter icon+price-chart stack instead, that forced square left a
   large empty gap below the content while the info column (title, price,
   specs table) runs much taller -- looked unbalanced/unfinished. Overriding
   to size to its actual content instead of a fixed square. Flex column so
   the icon and chart-row stack with sensible, even spacing rather than
   whatever the aspect-ratio box happened to leave. */
.product-page__media {
  aspect-ratio: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.product-page__media .chart-row {
  width: 100%;
  max-width: 280px;
  margin: 0;
}

.product-hero__cat-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.chart-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-paper, #fafafa);
  border: 1px solid var(--color-line, #e4ddd0);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
}
.chart-row svg { flex-shrink: 0; }

.price-block { text-align: right; }
.price-label {
  font-size: 0.62rem;
  color: var(--color-ink-soft, #4a453f);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.price-now {
  font-family: var(--font-display, serif);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink, #1c1917);
}

.thin-note {
  font-size: 0.72rem;
  color: var(--color-ink-soft, #4a453f);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 5px;
}
.thin-note svg { flex-shrink: 0; opacity: 0.6; }

.product-hero__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

/* Brand chip monogram -- see render_brand_monogram() in data_visual.php.
   --tile-accent is already set per-chip by the existing tile-accent-N
   classes (index.php/brands.php apply them via category_accent_class());
   this just consumes that same token rather than introducing a new one. */
.brand-chip__media .brand-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 64px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tile-accent, var(--color-brand, #1f4d3d)) 14%, white);
  color: var(--tile-accent, var(--color-brand, #1f4d3d));
  font-family: var(--font-display, serif);
  font-weight: 700;
  font-size: 1.6rem;
}

/* Real brand logo -- see render_brand_logo() in data_visual.php. Sits on
   the same tinted chip background as the monogram fallback so the two look
   like one consistent system regardless of which a given brand gets. */
.brand-chip__media .brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 64px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tile-accent, var(--color-brand, #1f4d3d)) 14%, white);
  color: var(--tile-accent, var(--color-brand, #1f4d3d));
  padding: 18px;
}
.brand-chip__media .brand-logo svg { width: 100%; height: 100%; }

/* Product-type icon on a solid category color -- see render_product_icon()
   in data_visual.php. Replaces the abstract gradient (.product-visual,
   above -- left in place but unused) and the earlier category photo. */
.product-icon {
  border-radius: 10px;
  border: 1px solid var(--color-line, #e4ddd0);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.product-icon svg { width: 46%; height: 46%; }

/* [2026-07-24] "Refresh Price & BSR" button (product.php) -- see
   api/refresh-price.php and static/js/refresh-price.js. */
.product-page__refresh {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 20px;
}
.product-page__refresh [data-refresh-btn]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.product-page__refresh [data-refresh-status] {
  margin: 0;
}
.product-page__refresh [data-refresh-status].is-error {
  color: var(--color-danger, #b3261e);
}

/* [2026-07-24] Hero carousel slide -- now shows a real category photo as
   its background (see index.php + category_photo_url() in data_visual.php)
   instead of a 200px product icon. Without the icon's own intrinsic size,
   the slide's height had nothing left to size itself by except the badge/
   title/price pills, so it collapsed to a thin, content-driven strip that
   also varied slide-to-slide (different title lengths wrap differently) --
   looked flat and caused inconsistent viewport height between slides. A
   fixed aspect-ratio gives every slide the same real photo-card proportions
   regardless of its text content. */
/* [2026-07-24] Static brand illustration, replacing the per-product
   carousel entirely (see index.php for why -- pairing one specific
   product's title/price with a generic category icon/photo made an
   implicit claim the image didn't back up). Purely decorative, so it
   doesn't need the carousel's own sizing/slide machinery -- just fill the
   hero's right grid column at a sensible, contained size. */
.hero__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.hero__illustration svg {
  width: 100%;
  max-width: 480px;
  height: auto;
}