/* TOGOPEPTIDE — Catalog polish (Cluster 04)
   Polish layer for shop.html + category.html.
   Items: 131 density easing, 132 hover preview chips, 133 skeleton fade,
          140 category tint, 142 reset-filters pill, 145 sticky toolbar,
          146 A-Z jump index, 150 card hover.
   Uses existing tokens (var(--color-bg), --color-accent, --color-border, etc.).
   All animations respect prefers-reduced-motion. */

/* ── 133 · Skeleton fade-out (no-flash if data resolves <80ms) ─────── */
.shop-grid .skeleton{
  transition: opacity 220ms ease-out;
}
.shop-grid[data-skel-fade="true"] .skeleton{
  opacity: 0;
  pointer-events: none;
}

/* ── 131 · Density transition: cubic-bezier on grid layout change ──── */
.shop-grid{
  transition:
    grid-template-columns 360ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-grid[data-density-anim="true"] > .card{
  animation: togo-catalog-density-pop 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes togo-catalog-density-pop{
  0%   { opacity: 0.4; transform: translateY(4px) scale(0.98); }
  100% { opacity: 1;   transform: translateY(0)   scale(1);    }
}

/* ── 150 · Catalog card hover: subtle scale + glow + Y translate ───── */
.shop-grid .card{
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease;
  will-change: transform;
}
.shop-grid .card:hover{
  transform: translateY(-3px) scale(1.014);
  box-shadow:
    0 12px 28px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--color-border-strong, rgba(255, 255, 255, 0.16)),
    0 0 24px -6px var(--color-accent-glow, rgba(224, 27, 27, 0.35));
}
.shop-grid .card:focus-visible{
  outline: 2px solid var(--color-accent, #e01b1b);
  outline-offset: 3px;
}

/* Same hover treatment on the category-page grids (top picks + main grid) */
.category-top-picks .card,
#category-grid .card{
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease;
}
.category-top-picks .card:hover,
#category-grid .card:hover{
  transform: translateY(-3px) scale(1.014);
  box-shadow:
    0 12px 28px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--color-border-strong, rgba(255, 255, 255, 0.16)),
    0 0 24px -6px var(--color-accent-glow, rgba(224, 27, 27, 0.35));
}

/* ── 132 · Hover preview chips (COA + fresh-batch info) ─────────────── */
.togo-card-preview{
  position: absolute;
  inset: auto 8px 8px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  z-index: 2;
}
.shop-grid .card:hover .togo-card-preview,
#category-grid .card:hover .togo-card-preview,
.category-top-picks .card:hover .togo-card-preview{
  opacity: 1;
  transform: translateY(0);
}
.togo-card-preview__chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.78);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.togo-card-preview__chip--coa{
  border-color: var(--color-success, #2ec27e);
  color: var(--color-success, #2ec27e);
}
.togo-card-preview__chip--fresh{
  border-color: var(--color-warning, #f0b429);
  color: var(--color-warning, #f0b429);
}
.togo-card-preview__chip svg{
  width: 10px; height: 10px;
}
/* Touch devices: always show (no real hover) */
@media (hover: none){
  .togo-card-preview{ opacity: 1; transform: none; }
}

/* ── 142 · Reset-filters pill (always visible while >=1 filter active) ── */
.togo-reset-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--color-accent-soft, rgba(224, 27, 27, 0.12));
  color: var(--color-accent, #e01b1b);
  border: 1px solid var(--color-border-accent, rgba(224, 27, 27, 0.28));
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease, transform 160ms ease;
}
.togo-reset-pill:hover{
  background: var(--color-accent, #e01b1b);
  color: #fff;
}
.togo-reset-pill svg{
  width: 11px; height: 11px;
  flex-shrink: 0;
}

/* ── 145 · Sticky toolbar on scroll ──────────────────────────────────── */
.shop-toolbar{
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--color-bg, #050505);
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -12px;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.shop-toolbar[data-stuck="true"]{
  border-bottom-color: var(--color-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.5);
}
/* Section--surface uses raised bg; align sticky bg to it */
.section--surface .shop-toolbar{
  background: var(--color-bg-elevated, #0b0b0d);
}

/* ── 146 · A-Z jump index ────────────────────────────────────────────── */
.togo-az-index{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}
.togo-az-index__label{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #8c8c92);
  text-transform: uppercase;
  padding: 4px 6px 4px 2px;
  align-self: center;
}
.togo-az-index__btn{
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--color-text-muted, #8c8c92);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.togo-az-index__btn[data-disabled="true"]{
  opacity: 0.28;
  cursor: not-allowed;
}
.togo-az-index__btn:not([data-disabled="true"]):hover{
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #fff);
}
.togo-az-index__btn[data-active="true"]{
  background: var(--color-accent, #e01b1b);
  color: #fff;
}

/* ── 140 · Per-category branded color tint ──────────────────────────── */
/* Only applies on category.html (body[data-page="category"]) when a tint
   key is set by JS. 6% haze over surface — keeps body bg dark. */
body[data-page="category"][data-cat-tint] .cat-hero{
  position: relative;
}
body[data-page="category"][data-cat-tint] .cat-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cat-tint-color, transparent);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
body[data-page="category"][data-cat-tint] .cat-hero > *{
  position: relative;
  z-index: 1;
}
/* Tint colors per category (subtle haze) */
body[data-cat-tint="fat_loss"]  { --cat-tint-color: #e01b1b; }   /* red */
body[data-cat-tint="recovery"]  { --cat-tint-color: #2ec27e; }   /* green */
body[data-cat-tint="muscle"]    { --cat-tint-color: #f0b429; }   /* amber */
body[data-cat-tint="skin"]      { --cat-tint-color: #f08abf; }   /* pink */
body[data-cat-tint="cognitive"] { --cat-tint-color: #5091ff; }   /* blue */
body[data-cat-tint="longevity"] { --cat-tint-color: #b07fff; }   /* purple */
body[data-cat-tint="other"]     { --cat-tint-color: #8c8c92; }   /* neutral */

/* Use tint color as section--surface accent on category page only */
body[data-page="category"][data-cat-tint] .section--surface{
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--cat-tint-color) 4%, transparent),
    transparent
  );
}

/* ── Reduced motion: disable transforms, animations, transitions ─────── */
@media (prefers-reduced-motion: reduce){
  .shop-grid,
  .shop-grid .card,
  .category-top-picks .card,
  #category-grid .card,
  .togo-card-preview,
  .togo-reset-pill,
  .shop-toolbar,
  .togo-az-index__btn,
  .shop-grid .skeleton{
    transition: none !important;
    animation: none !important;
  }
  .shop-grid .card:hover,
  .category-top-picks .card:hover,
  #category-grid .card:hover{
    transform: none;
  }
}

/* ── Mobile: lighter sticky + hide A-Z on small screens ──────────────── */
@media (max-width: 640px){
  .togo-az-index{ display: none; }
  .shop-toolbar{ position: static; }
}