/* teas.co.uk — header touch layer (tablet + mobile)
   ADDITIVE. Load AFTER teas-header.css. Breakpoints: 1180 / 1024 / 760 / 460. */

@keyframes teasSheetIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes teasFade    { from { opacity: 0; } to { opacity: 1; } }

.tmp-drawer { display: none; position: fixed; inset: 0; z-index: 2000; }
.tmp-drawer.is-open { display: block; }
.tmp-scrim { position: absolute; inset: 0; background: rgba(4,34,32,.46); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: teasFade .22s ease both; }
.tmp-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: 430px; max-width: 92%; display: flex; flex-direction: column; background: #fff; box-shadow: -30px 0 90px -40px rgba(4,34,32,.7); animation: teasSheetIn .28s cubic-bezier(.2,.75,.3,1) both; }
.tmp-sheet-edge { flex: none; height: 4px; animation: teasHue 26s linear infinite; background: linear-gradient(90deg,#5eead4,#8cc4ff,#ffbe84,#f0a8c8,#5eead4); }
.tmp-sheet-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(4,34,32,.10); }
.tmp-sheet-brand { display: inline-flex; align-items: center; gap: 10px; color: #042220; text-decoration: none; }
.tmp-sheet-brand span:first-child { width: 36px; height: 36px; border-radius: 50%; background: #1faa9c; display: inline-flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 20px; }
.tmp-sheet-brand span:last-child { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 21px; }
.tmp-sheet-x { width: 44px; height: 44px; flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(4,34,32,.12); background: #fff; color: #042220; cursor: pointer; }
.tmp-sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 14px 20px; }
.tmp-sheet-search { display: flex; align-items: center; gap: 10px; min-height: 50px; margin-bottom: 16px; padding: 0 16px; border-radius: 999px; background: #eff7f6; border: 1px solid rgba(4,34,32,.10); color: #4b5551; font-size: 15.5px; text-decoration: none; }

.tmp-sheet-nav { display: flex; flex-direction: column; margin-bottom: 20px; }
.tmp-sheet-nav a { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border-bottom: 1px solid rgba(4,34,32,.09); color: #0E0F12; font-size: 17px; font-weight: 600; text-decoration: none; }
.tmp-sheet-nav a:last-child { border-bottom: 0; }
.tmp-sheet-nav a svg { margin-left: auto; stroke: #8a938f; }
.tmp-sheet-nav a[aria-current="page"] { background: #0a4444; color: #fff; font-weight: 700; border-radius: 14px; border-bottom: 0; }
.tmp-sheet-nav a[aria-current="page"] svg { stroke: currentColor; }

/* accordions — one open at a time, BY FAMILY open by default */
.tmp-acc { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 10px; padding: 0 14px; border: 1px solid rgba(4,34,32,.10); border-radius: 14px; background: #eff7f6; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0b6b5f; }
.tmp-acc:first-of-type { margin-top: 0; }
.tmp-acc svg { margin-left: auto; transition: transform .2s ease; }
.tmp-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.tmp-acc-body { display: none; padding: 12px 0 4px; }
.tmp-acc-body.is-open { display: block; }

/* in the drawer the family tiles are 2-up, 62px, and DO show the sub copy */
.tmp-acc-body .tmp-fams { grid-template-columns: 1fr 1fr; gap: 10px; }
.tmp-acc-body .tmp-fam { min-height: 62px; padding: 10px 13px; border-left-color: #0b8b7a; align-items: center; flex-wrap: wrap; }
.tmp-acc-body .tmp-fam-ico { width: 32px; height: 32px; font-size: 16px; }
.tmp-acc-body .tmp-fam-label { white-space: normal; font-size: 15px; }
.tmp-acc-body .tmp-fam-sub { display: block; flex: 0 0 100%; padding-left: 41px; margin-top: 1px; font-size: 13px; line-height: 1.35; color: #4b5551; font-weight: 400; }
.tmp-acc-body .tmp-chip { min-height: 46px; padding: 0 16px; font-size: 15px; }
.tmp-acc-body .tmp-brandrow { min-height: 46px; font-size: 15px; }
.tmp-acc-body .tmp-feat { min-height: 60px; padding: 12px 15px; }

.tmp-sheet-foot { flex: none; padding: 12px 14px; border-top: 1px solid rgba(4,34,32,.10); background: #eff7f6; }
.tmp-sheet-foot .tmp-allshop { display: flex; justify-content: center; width: 100%; min-height: 52px; font-size: 16px; }
.tmp-sheet-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tmp-sheet-actions a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; background: #fff; border: 1px solid rgba(4,34,32,.12); color: #042220; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.tmp-sheet-foot .tmp-note { justify-content: center; width: 100%; margin-top: 10px; }
body.tmp-locked { overflow: hidden; }
body.tmp-locked .tal-launcher { display: none; }

/* ── 1180: iPad landscape keeps the real nav; the mega just tightens ── */
@media (max-width: 1180px) {
  .tmp-topbar { gap: 4px; font-size: 13px; }
  .tmp-nav > a { padding: 10px 13px; }
  .tmp-mega { left: 28px; right: 28px; }
  .tmp-cols { grid-template-columns: minmax(0,1fr) 268px; gap: 20px 24px; }
  .tmp-fams { grid-template-columns: repeat(3, minmax(0,1fr)); }
  /* two columns here, not three — By moment drops to its own row and the labels
     stop clipping. This matches screens/03-tablet-landscape-1180-mega-panel.png. */
  .tmp-sub { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

/* ── 1024: burger takes over, mega dropdown retired ── */
@media (max-width: 1024px) {
  .tmp-nav { display: none; }
  .tmp-burger { display: inline-flex; }
  .tmp-mega { display: none !important; }
  .tmp-topbar { gap: 6px; padding: 7px 10px; flex-wrap: nowrap; justify-content: space-between; }
  .tmp-shell { padding-left: 18px; padding-right: 18px; }
}

/* ── 760: sheet goes full-bleed ── */
@media (max-width: 760px) {
  .tmp-shell { padding-left: 14px; padding-right: 14px; }
  .tmp-topbar { border-radius: 26px; }
  .tmp-sheet { width: 100%; max-width: 100%; }
}

/* ── 460: phones ── */
@media (max-width: 460px) {
  .tmp-acc-body .tmp-fams, .tmp-feat-list { grid-template-columns: 1fr; }
  .tmp-brand-word, .tmp-bag-label, .tmp-bag-rule, .tmp-bag-total { display: none; }
  .tmp-bag { padding: 0 8px; }
  .tmp-sheet-body { padding: 12px 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tmp-sheet, .tmp-scrim, .tmp-sheet-edge { animation: none !important; }
}