/* ==========================================================
   /templates — every design, with search and filters.
   Mobile first (390px), then tablet and desktop.
   ========================================================== */

.page-gallery { background: #f7efe6; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tl { position: relative; padding: calc(var(--nav-h) + 22px) 0 48px; overflow: hidden; isolation: isolate; }
.tl-scene { position: fixed; inset: 0; z-index: -2; background: var(--scene) center / cover no-repeat, #f7efe6; }
.tl-scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(255, 252, 247, 0.6), transparent 60%); }
.tl-petals { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Heading ---------- */
.tl-head { text-align: center; }
.tl-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 0.66rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.tl-eyebrow span { font-size: 0.8rem; letter-spacing: 0; color: var(--gold); }
.tl-title { margin: 0 0 8px; font: 400 1.95rem/1.1 var(--serif); color: #4a3424; }
.tl-sub { margin: 0 auto 16px; max-width: 520px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.tl-sub br { display: none; }

.tl-search { position: relative; display: flex; align-items: center; gap: 10px; width: min(520px, 100%); margin: 0 auto 16px; padding: 2px 6px 2px 16px; border-radius: 999px; background: rgba(255, 252, 247, 0.9); border: 1px solid rgba(168, 132, 79, 0.3); box-shadow: 0 14px 30px -22px rgba(74, 52, 36, 0.45); transition: box-shadow 0.4s, border-color 0.4s; }
.tl-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(168, 132, 79, 0.14); }
.tl-search svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.tl-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: transparent; font: 400 16px var(--sans); color: var(--ink); outline: none; }
.tl-search input::placeholder { color: #a8957f; }
.tl-search kbd { display: none; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); font: 500 0.7rem var(--sans); color: var(--ink-soft); }

/* Occasion filters: icon tiles in one row, with a gliding underline */
.tl-occasions { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 auto 10px; padding-bottom: 10px; max-width: 560px; }
.tl-occ { display: grid; justify-items: center; gap: 5px; min-height: 56px; padding: 8px 2px; border: 0; border-radius: 14px; background: rgba(255, 252, 247, 0.55); cursor: pointer; color: #8a7462; font: 600 0.6rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.35s, background 0.35s; }
.tl-occ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease); }
.tl-occ:hover { color: var(--lavender); }
.tl-occ:hover svg { transform: rotate(-12deg) scale(1.1); }
.tl-occ.is-active { color: #5a3f68; background: rgba(255, 252, 247, 0.95); }
.tl-occ-line { position: absolute; left: 0; bottom: 2px; height: 2px; width: 40px; background: linear-gradient(90deg, transparent, #7b5a8f, transparent); transition: transform 0.6s var(--ease), width 0.6s var(--ease); }

/* Style chips scroll sideways on phones (inside their own row, never the page) */
.tl-styles { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; margin: 0 -16px 10px; padding: 2px 16px 6px; scrollbar-width: none; }
.tl-styles::-webkit-scrollbar { display: none; }
.tl-style { flex-shrink: 0; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(168, 132, 79, 0.3); background: rgba(255, 252, 247, 0.75); cursor: pointer; font: 500 0.78rem var(--sans); color: var(--ink-soft); transition: background 0.35s, border-color 0.35s, color 0.35s; }
.tl-style sup { font: 600 0.55rem var(--sans); color: var(--gold); margin-left: 2px; }
.tl-style:hover { border-color: var(--gold); color: var(--ink); }
.tl-style.is-active { background: #4a3424; border-color: #4a3424; color: #f6eadb; }
.tl-style.is-active sup { color: var(--gold-light); }
.tl-count { margin: 0 0 18px; font: italic 400 0.92rem var(--serif); color: var(--gold-deep); }

/* ---------- Groups of phones ---------- */
.tl-group { margin-bottom: 30px; padding: 14px 12px 18px; border-radius: 20px; background: rgba(255, 252, 247, 0.72); border: 1px solid rgba(168, 132, 79, 0.18); }
.tl-group[hidden] { display: none; }
.tl-group-title { margin: 0 0 12px; padding: 0 2px 8px; border-bottom: 1px solid var(--line); font: 400 1.3rem/1.2 var(--serif); color: #4a3424; }
.tl-group-title sup { font: 600 0.62rem var(--sans); color: var(--gold); }

.tl-empty { padding: 20px 0 40px; text-align: center; }
.tl-empty h2, .tl-cta h2 { margin: 0 0 8px; font: 400 1.6rem/1.15 var(--serif); color: #4a3424; }
.tl-empty p, .tl-cta p { margin: 0 auto 16px; max-width: 460px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.tl-empty-actions, .tl-cta-actions { display: grid; gap: 10px; }
.tl-empty-actions .btn, .tl-cta-actions .btn { width: 100%; height: 46px; font-size: 0.72rem; letter-spacing: 0.14em; }
.tl-cta { margin-top: 30px; padding: 26px 18px; border-radius: 20px; text-align: center; background: rgba(255, 252, 247, 0.8); border: 1px solid var(--line); }
.tl-cta h2 em { color: var(--lavender); }

@media (min-width: 640px) {
  .tl-title { font-size: 2.8rem; }
  .tl-group { padding: 20px 20px 24px; }
  .tl-empty-actions, .tl-cta-actions { display: flex; justify-content: center; }
  .tl-empty-actions .btn, .tl-cta-actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .tl { padding: calc(var(--nav-h) + 50px) 0 90px; }
  .tl-title { font-size: 4rem; margin-bottom: 14px; }
  .tl-sub { font-size: 1rem; margin-bottom: 26px; }
  .tl-search { margin-bottom: 26px; }
  .tl-search kbd { display: inline-block; }
  .tl-occasions { display: flex; justify-content: center; gap: 10px 26px; max-width: none; }
  .tl-occ { min-height: 0; padding: 6px 4px; background: none; font-size: 0.7rem; letter-spacing: 0.2em; }
  .tl-occ.is-active { background: none; }
  .tl-styles { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0 auto 16px; max-width: 900px; padding: 0; }
  .tl-count { margin-bottom: 36px; }
  .tl-group { margin-bottom: 44px; padding: 28px 32px 34px; border-radius: 28px; }
  .tl-group-title { font-size: 2rem; margin-bottom: 24px; }
  .tl-cta { margin-top: 70px; padding: 50px 24px; }
  .tl-empty h2, .tl-cta h2 { font-size: 2.6rem; }
  .tl-empty p, .tl-cta p { font-size: 1.02rem; }
}