/* ============================================================
   CUSTOM — Per-store overrides for Template TF
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* Rakesh 2026-10-29: overflow:hidden makes min-height 0, so 26 categories shrank instead of scrolling - keep full height, sidebar scrolls */
.menu-buttons .menu-button { flex-shrink: 0; }

/* ===== PT HERO SLIDESHOW on TF (Hakka Culture, Rakesh 2026-11-03): PT style.css block, verbatim ===== */
.hero-slides {
  overflow: hidden;
  background: #181410;
}
.hero-slides .hero-slide,
.hero-slides .hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-slides .hero-slide {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity;
}
.hero-slides .hero-slide.is-active { opacity: 1; z-index: 2; }
.hero-slides .hero-slide.is-leaving { opacity: 0; z-index: 1; }
.hero-slides .hero-slide img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}
/* one continuous drift per slide, covering fade-in + hold + fade-out */
.hero-slides .kb-1 img { animation: heroKb1 9.6s linear both; }
.hero-slides .kb-2 img { animation: heroKb2 9.6s linear both; }
.hero-slides .kb-3 img { animation: heroKb3 9.6s linear both; }
.hero-slides .kb-4 img { animation: heroKb4 9.6s linear both; }
.hero-slides .kb-5 img { animation: heroKb5 9.6s linear both; }
@keyframes heroKb1 { from { transform: scale(1.02) translate3d(0, 0, 0); }      to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes heroKb2 { from { transform: scale(1.14) translate3d(1.5%, 0, 0); }   to { transform: scale(1.03) translate3d(0, 0, 0); } }
@keyframes heroKb3 { from { transform: scale(1.08) translate3d(-2.5%, 0, 0); }  to { transform: scale(1.08) translate3d(2.5%, 0, 0); } }
@keyframes heroKb4 { from { transform: scale(1.03) translate3d(0, 1%, 0); }     to { transform: scale(1.15) translate3d(1%, -1.5%, 0); } }
@keyframes heroKb5 { from { transform: scale(1.12) translate3d(0, -1.5%, 0); }  to { transform: scale(1.02) translate3d(0, 0, 0); } }
/* a single slide is a still photo */
.hero-slides .hero-slide:only-of-type img { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-slides .hero-slide { transition: none; }
  .hero-slides .hero-slide img { animation: none !important; transform: none; }
}

/* paused = the drift stops too */
.hero-slides.is-paused .hero-slide img { animation-play-state: paused; }
/* caption + pause/play: absolutely placed, so they never shift layout */
.hero-slides__ui {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 3vw, 2rem);
  top: 0.9rem;
  flex-direction: row-reverse;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(70vw, 28rem);
  pointer-events: none;
}
.hero-slides__caption {
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.3;
}
.hero-slides__toggle {
  pointer-events: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.hero-slides__toggle[hidden] { display: none; }
.hero-slides__toggle:hover { background: rgba(0, 0, 0, 0.8); }
.hero-slides__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hero-slides__toggle .ico-play { display: none; }
.hero-slides__toggle.is-paused .ico-play { display: inline; }
.hero-slides__toggle.is-paused .ico-pause { display: none; }
@media (max-width: 600px) {
  .hero-slides__ui { top: 0.6rem; right: 0.75rem; flex-direction: column; align-items: flex-end; gap: 0.35rem; max-width: 58vw; }
  .hero-slides__toggle { min-height: 40px; padding: 0 0.75rem; }
  .hero-slides__caption { font-size: 0.75rem; text-align: right; }
}

/* Hakka Culture: real round HC badge logo (Brandy THEME.md): height 85, width follows the badge, never stretched */
.brand img { width: auto; height: 85px; padding: 0; background: none; box-shadow: none; border-radius: 50%; }
@media (max-width: 600px) { .brand img { height: 64px; } }
.foot-brand img { width: 120px; height: auto; padding: 0; background: none; border-radius: 50%; }
/* TF dish hero: keep the photo's own aspect (no stretch; Fusion 28 lesson) */
.dish-hero-image img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* PT copy carry-over: no 01/02/03 sequence numbers on FAQ questions or menu-band category tiles; About chapters without numbers */
.qa summary::before, .cat-tile::before { content: none; display: none; }
.chapters .chapter { grid-template-columns: 1fr; }

/* header is inlined in the HTML: hide the breadcrumb fallback from first paint (no shift when JS adds .header-loaded) */
#header-container[data-inline] ~ .breadcrumb-container { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-slides__toggle { display: none; } }
/* phones get the cross-fade without the Ken Burns drift (software-raster cost on mobile; Lighthouse) */
@media (max-width: 600px) { .hero-slides .hero-slide img { animation: none !important; transform: none; } }