/* ========= The Mom Shows — Professional UI ========= */
*{box-sizing:border-box}
:root{
  --ink:#111; --muted:#6b7280; --line:#ececec; --bg:#fafafa; --paper:#fff;
  --brand:#7b3fd3; --brand-2:#d63384;
  --radius:14px; --shadow:0 4px 16px rgba(17,24,39,.08); --shadow-sm:0 2px 8px rgba(17,24,39,.06);
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}

/* Container */
.tms-container{max-width:1120px;margin:0 auto;padding:0 16px}

/* Header */
.tms-header {
  background: #ffffff;
  border-bottom: 1px solid #f1f1f5;
}

.tms-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;              /* tighter than hero but still comfy */
}
.tms-brand{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--brand-2);font-size:20px}
.tms-nav{display:flex;gap:18px;margin-left:auto}
.tms-nav a{color:#333;font-weight:700}
.tms-header__menu{display:none;margin-left:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:18px;cursor:pointer;box-shadow:var(--shadow-sm)}
@media (max-width:860px){ .tms-nav{display:none} .tms-header__menu{display:block} }

/* Drawer */
.tms-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.2s;z-index:150}
.tms-overlay.is-show{opacity:1;pointer-events:auto}
.tms-drawer{position:fixed;top:0;right:0;bottom:0;width:82%;max-width:360px;background:#fff;border-left:1px solid var(--line);padding:18px 16px 20px;box-shadow:var(--shadow);transform:translateX(100%);transition:transform .28s ease;z-index:160}
.tms-drawer.is-open{transform:translateX(0)}
.tms-drawer__close{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:18px;cursor:pointer;margin-left:auto;display:block;margin-bottom:6px}
.tms-drawer__links a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);font-weight:700;color:#333}
body.tms-lock{overflow:hidden;height:100vh}

/* Hero */
.tms-hero{text-align:center;padding:22px 0 8px}
.tms-hero h1{margin:0 0 6px;line-height:1.18;font-size:28px}
.tms-hero__sub{color:var(--muted);margin:0 0 12px}
.tms-search{max-width:560px;margin:0 auto}
.tms-input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);font-size:16px}

/* Carousel */
.tms-carousel{margin:16px 0}
.tms-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tms-section__head h2{margin:0}
.tms-carousel__arrows{display:flex;gap:8px}
.tms-arrow{background:#fff;border:1px solid var(--line);border-radius:999px;width:36px;height:36px;cursor:pointer;box-shadow:var(--shadow-sm)}
@media (max-width:720px){ .tms-carousel__arrows{display:none} }
.tms-scroller{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 10px}
.tms-card--slide{flex:0 0 auto;width:300px;scroll-snap-align:start}
@media (min-width:980px){ .tms-card--slide{width:320px} }
@media (max-width:640px){ .tms-card--slide{width:85vw;max-width:420px} }

/* Chips (below featured) */
.tms-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:8px 0 16px}
.tms-chip{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);font-weight:800;cursor:pointer}
.tms-chip.is-active{background:#f3e8ff;border-color:#b990ff;color:#6a30c1}

/* Grid */
.tms-gridwrap h2{margin:14px 0 10px}
.tms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
@media (max-width:860px){ .tms-grid{grid-template-columns:repeat(2,1fr);gap:12px} }
@media (max-width:420px){ .tms-grid{grid-template-columns:1fr;gap:12px} }
.tms-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.tms-card img{width:100%;height:200px;object-fit:cover}
@media (min-width:980px){ .tms-card img{height:220px} }
.tms-card__pad{padding:12px}
.tms-card__title{font-weight:900;margin-bottom:4px}
.tms-card__meta{font-size:14px;color:var(--muted)}

/* Banners/Ads */
.tms-adslot{margin:10px 0 16px;text-align:center}
.tms-banner img{max-width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-sm)}

/* Footer */
.tms-footer{margin-top:30px;background:#fff;border-top:1px solid var(--line)}
.tms-footer__inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:16px 0}
.tms-footer__brand .tms-brand{color:var(--brand-2);font-weight:900}
.tms-footer__brand small{display:block;color:var(--muted)}
.tms-footer__links{display:flex;gap:16px;flex-wrap:wrap}
.tms-footer__links a{color:#333;font-weight:700}
.tms-footer__social a{margin-left:10px;font-size:18px}
.tms-footer__copy{text-align:center;color:var(--muted);font-size:13px;padding:10px 0;border-top:1px solid var(--line)}

/* --- Header alignment fixes --- */
.tms-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #ececec}
.tms-header__inner{display:flex;align-items:center;justify-content:space-between;gap:10px;height:60px;padding:0}
.tms-brand{display:flex;align-items:center;gap:8px;font-weight:900;color:#d63384;font-size:20px;line-height:1}
.tms-nav{display:flex;gap:18px;margin-left:auto}
.tms-nav a{font-weight:700;color:#333}
.tms-header__menu{display:none;margin-left:8px;background:#fff;border:1px solid #ececec;border-radius:12px;padding:8px 10px;font-size:18px;line-height:1;box-shadow:0 2px 8px rgba(17,24,39,.06)}
@media (max-width:860px){ .tms-nav{display:none} .tms-header__menu{display:block} }

/* Make sure page content never hides behind sticky header */
.tms-container:first-of-type, main.tms-container{scroll-margin-top:72px}

/* Drawer polish */
.tms-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.2s;z-index:150}
.tms-overlay.is-show{opacity:1;pointer-events:auto}
.tms-drawer{position:fixed;top:0;right:0;bottom:0;width:82%;max-width:360px;background:#fff;border-left:1px solid #ececec;padding:18px 16px 20px;box-shadow:0 4px 16px rgba(17,24,39,.08);transform:translateX(100%);transition:transform .28s ease;z-index:160}
.tms-drawer.is-open{transform:translateX(0)}
.tms-drawer__close{background:#fff;border:1px solid #ececec;border-radius:12px;padding:6px 10px;font-size:18px;line-height:1;display:block;margin:0 0 8px auto}
.tms-drawer__links a{display:block;padding:12px 4px;border-bottom:1px solid #f1f1f1;font-weight:700;color:#333}
body.tms-lock{overflow:hidden;height:100vh}

/* --- Footer alignment fixes --- */
.tms-footer{margin-top:28px;background:#fff;border-top:1px solid #ececec}
.tms-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding:16px 0;text-align:center}
.tms-footer__brand{display:flex;flex-direction:column;align-items:center}
.tms-footer__links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.tms-footer__links a{font-weight:700;color:#333}
.tms-footer__social{display:flex;gap:10px;justify-content:center}
.tms-footer__copy{text-align:center;color:#6b7280;font-size:13px;padding:10px 0;border-top:1px solid #f2f2f2}

/* Space above chips so they don't collide with carousel scrollbar */
.tms-chips{margin-top:12px}

/* ===== Header logo-first layout ===== */
.tms-header {
  background: #ffffff;
  border-bottom: 1px solid #f1f1f5;
}

.tms-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;              /* tighter than hero but still comfy */
}

.tms-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;                 /* touch target + small breathing room */
  border-radius: 10px;
}

.tms-brand img {
  display: block;
  height: 32px;                     /* keep logo crisp */
  width: auto;
}

/* Hide the inline nav on small screens if you weren’t already */
@media (max-width: 860px) {
  .tms-nav { display: none; }
}

/* Menu button padding/shape */
.tms-header__menu {
  appearance: none;
  background: #ffffff;
  border: 1px solid #ececf2;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* ===== Drawer improvements ===== */
.tms-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: #ffffff;
  border-left: 1px solid #eee;
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 1000;
  padding: 18px 18px 24px;          /* <-- more padding all around */
}

.tms-drawer.is-open { transform: translateX(0); }

.tms-drawer__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;       /* large touch target */
  border-radius: 12px;
  border: 1px solid #ececf2;
  background: #fff;
  font-size: 18px;
}

.tms-drawer__links {
  display: grid;
  gap: 8px;
  margin-top: 54px;                /* clears the close button area */
}

.tms-drawer__links a {
  display: block;
  padding: 12px 12px;              /* comfy clickable rows */
  border-radius: 12px;
  font-weight: 700;
  color: #2f2f3a;
  border: 1px solid #f0f0f4;
  background: #fafafe;
}

.tms-drawer__links a:active {
  transform: translateY(1px);
}

/* Overlay keeps same behavior; ensure it covers screen and is tappable */
.tms-overlay.is-show {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 900;
}