/* ==========================================================================
   Shared components (markup in assets/js/components/common.js)
   ========================================================================== */

/* ---------- Surfaces & labels ---------- */

.surface-card {
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--ring), var(--shadow-card);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate-400);
}

/* Soft tinted background behind category and product artwork.
   Needs --tint and --accent-soft (set by App.utils.categoryStyle). */
.tinted {
  background:
    radial-gradient(120% 90% at 20% 0%, #fff 0%, transparent 55%),
    linear-gradient(150deg, var(--tint) 0%, var(--accent-soft) 100%);
}

/* Small rounded label with a coloured dot, e.g. "Category", "Product 360" */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.8);
  box-shadow: var(--ring-black);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--slate-600);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tag__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--accent);
}

.tag--caps {
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate-500);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.count-pill {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgb(15 23 42 / 0.05);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
}

/* Heading row above a grid: title + description on the left, count on the right */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-head__title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--slate-900);
}

.section-head__text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--slate-500);
}

/* ---------- Back button + breadcrumb ---------- */

.page-nav {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.back-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--ring-strong), var(--shadow-soft);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--slate-700);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 150ms var(--ease);
}

.back-button:hover {
  background: #fff;
  color: var(--slate-900);
  box-shadow: var(--ring-strong), var(--shadow-card);
}

.back-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgb(15 23 42 / 0.05);
  transition: all 150ms var(--ease);
}

.back-button__icon .icon {
  transition: transform 150ms var(--ease);
}

.back-button:hover .back-button__icon {
  background: var(--slate-900);
  color: #fff;
}

.back-button:hover .back-button__icon .icon {
  transform: translateX(-0.125rem);
}

.breadcrumb {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--ring-strong), var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0 0.125rem;
  min-width: 0;
}

.breadcrumb__sep {
  color: var(--slate-400);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 220px;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  color: var(--slate-600);
  transition: all 150ms var(--ease);
}

.breadcrumb__link:hover {
  background: rgb(15 23 42 / 0.06);
  color: var(--slate-900);
}

/* The current page, filled with the page's accent (set via --crumb-bg) */
.breadcrumb__current {
  max-width: 260px;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--crumb-bg, var(--brand-600));
  box-shadow: var(--shadow-soft);
  font-weight: 700;
  color: #fff;
}

@media (min-width: 768px) {
  .breadcrumb__list {
    font-size: 13px;
  }
}

/* ---------- Artwork: category & product visuals ---------- */

.visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.visual__dots {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image: radial-gradient(rgb(15 23 42 / 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
}

.visual__glow {
  position: absolute;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.75);
  filter: blur(40px);
}

/* The fallback artwork is laid out as if its children sat directly in .visual */
.visual__art {
  display: contents;
}

.visual.has-photo .visual__art {
  display: none;
}

/* Category: a hero emoji with two smaller ones floating beside it. Sizes
   shrink with the tile (container query units) but never exceed --size. */
.visual--category {
  container-type: inline-size;
}

.visual--category .visual__glow {
  width: min(calc(var(--size) * 2), 60cqw);
  height: min(calc(var(--size) * 2), 60cqw);
}

.visual__side {
  position: absolute;
  font-family: var(--font-emoji);
  line-height: 1;
  opacity: 0.9;
}

.visual__side--left {
  left: 11%;
  top: 44%;
  font-size: min(calc(var(--size) * 0.42), 12cqw);
  rotate: -12deg;
}

.visual__side--right {
  right: 14%;
  bottom: 15%;
  font-size: min(calc(var(--size) * 0.46), 13cqw);
  rotate: 10deg;
}

.visual__hero {
  position: relative;
  font-family: var(--font-emoji);
  font-size: min(var(--size), 30cqw);
  line-height: 1;
  filter: drop-shadow(0 14px 14px rgb(15 23 42 / 0.18));
  transition: transform 500ms var(--ease-out);
}

.visual--category .visual__photo {
  position: relative;
  width: auto;
  height: 92%;
  max-width: 92%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 700ms var(--ease);
}

/* Product: a single emoji, or a monogram medallion when there's no emoji */
.visual--product .visual__dots {
  opacity: 0.5;
}

.visual--product .visual__glow {
  width: calc(var(--size) * 1.8);
  height: calc(var(--size) * 1.8);
  background: rgb(255 255 255 / 0.7);
}

.visual__emoji {
  position: relative;
  font-family: var(--font-emoji);
  font-size: var(--size);
  line-height: 1;
  filter: drop-shadow(0 12px 12px rgb(15 23 42 / 0.18));
  transition: transform 500ms var(--ease-out);
}

.visual__monogram {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size) * 1.45);
  height: calc(var(--size) * 1.45);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--ring-black), var(--shadow-card);
  font-size: calc(var(--size) * 0.5);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--accent);
  transition: transform 500ms var(--ease-out);
}

.visual--product .visual__photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .visual__side {
    animation: float 6s ease-in-out infinite;
  }

  .visual__side--left  { animation-delay: -2s; }
  .visual__side--right { animation-delay: -4s; }
}

/* Hovering a card animates its artwork */
:is(.category-card, .product-card):hover :is(.visual__hero, .visual__emoji) {
  transform: rotate(-6deg) scale(1.1);
}

:is(.category-card, .product-card):hover .visual__monogram {
  transform: scale(1.1);
}

:is(.category-card, .product-card):hover .visual__photo {
  transform: scale(1.05);
}

/* ---------- Cards ---------- */

.category-card,
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: #fff;
  box-shadow: var(--ring), var(--shadow-card);
  transition: all 300ms var(--ease-out);
}

.category-card {
  border-radius: 28px;
}

.category-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--ring), var(--shadow-lift);
}

.category-card__media,
.product-card__media {
  position: relative;
}

.category-card__visual {
  aspect-ratio: 4 / 3;
  border-radius: 22px;
}

.category-card__count {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--ring-black);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-700);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.category-card__arrow {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--ring-black);
  color: var(--slate-700);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 300ms var(--ease);
}

.category-card__arrow .icon {
  transition: transform 300ms var(--ease);
}

.category-card:hover .category-card__arrow {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

.category-card:hover .category-card__arrow .icon {
  transform: rotate(45deg);
}

.category-card__body {
  padding: 0.875rem 0.75rem 0.625rem;
}

.category-card__title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--slate-900);
}

.category-card__preview {
  margin-top: 0.125rem;
  font-size: 13px;
  color: var(--slate-500);
}

.category-card__more {
  color: var(--slate-400);
}

@media (min-width: 640px) {
  .category-card__arrow {
    display: flex;
  }
}

.product-card {
  border-radius: 1.5rem;
}

.product-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--ring), var(--shadow-lift);
}

.product-card__visual {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
}

.product-card__badge {
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--ring-black);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--slate-600);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.375rem;
}

.product-card__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--slate-800);
}

.product-card__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--slate-100);
  color: var(--slate-500);
  transition: all 300ms var(--ease);
}

.product-card__arrow .icon {
  transition: transform 300ms var(--ease);
}

.product-card:hover .product-card__arrow {
  background: var(--accent);
  color: #fff;
}

.product-card:hover .product-card__arrow .icon {
  transform: translateX(0.125rem);
}