/* TAHAN — Base element defaults built on tokens */
:root {
  color-scheme: light;
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guards against absolutely-positioned menus/dropdowns
    widening the page on narrow screens; inner rails keep their own scroll */
}
h1, h2, h3, h4, .u-display {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--brand-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--burgundy-600); }
.u-bengali { font-family: var(--font-bengali); }
.u-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* Wide outlined band CTA — thin border, restrained type, spans the content
   column. Reserved for one strong call per section; primary actions stay
   filled buttons. */
.tahan-cta-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 24px;
  border: 1.5px solid var(--coral);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--coral-deep);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.tahan-cta-outline:hover { background: var(--coral); color: #FFFFFF; }

/* Section eyebrow heading — "✨ Label   View all »" */
.tahan-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.tahan-section-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.tahan-view-all {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--coral-deep);
  text-decoration: underline;
  text-decoration-color: var(--coral-tint);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.tahan-view-all:hover { color: var(--coral); }

/* Featured/popular card — image with a dark gradient footer and white type,
   used to set high-priority items apart from the plain editorial card. */
.tahan-card-dark {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  background: var(--navy);
}
.tahan-card-dark .tahan-card-dark-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 16px 16px;
  background: linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,0.78) 62%, rgba(7,22,39,0.94) 100%);
}
.tahan-card-dark .tahan-card-dark-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0;
}
.tahan-card-dark .tahan-card-dark-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}
/* Hero banner frame — one fixed aspect for all three slides so switching
   never shifts the layout. Higher specificity than the legacy fixed-height
   rule the pages still carry inline, so the aspect ratio governs everywhere. */
.tahan-hero-grid .tahan-hero-art { height: auto !important; }

/* Below Bootstrap's lg: the 21:9 collection banner gets too short to hold its
   type, so it steps up through the tiers. */
@media (max-width: 991.98px) {
  .tahan-collection-banner { aspect-ratio: 16 / 9 !important; }
}

@media (max-width: 575.98px) {
  .tahan-collection-banner { aspect-ratio: 4 / 3 !important; }
}

/* Header collapses below Bootstrap's md, like navbar-expand-md. */
@media (max-width: 767.98px) {
  /* Bottom tab bar takes over primary navigation on phones; the body gains
     matching padding so it never sits on top of the footer. */
  .tahan-tabbar { display: flex !important; }
  body { padding-bottom: 64px; }
  .tahan-header-search { display: none !important; }
  .tahan-hamburger-btn { display: flex !important; }
  .tahan-desktop-nav { display: none !important; }
  .tahan-action-label { display: none !important; }
  .tahan-logo-sub { display: none !important; }
  .tahan-header-row { gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; }
}

.tahan-card-dark .tahan-card-dark-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(11,31,58,0.72);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  backdrop-filter: blur(2px);
}