/* tytl-site: home sections, label details on products, announcement bar, phone bottom nav.
   Spec: wp/DESIGN.md. Tokens (--c-*, --section, --gutter…) come from the child theme, with fallbacks. */

.tytl-wrap { width: calc(100% - 2 * var(--gutter, 20px)); max-width: var(--theme-normal-container-max-width, 1290px); margin-inline: auto; }
.tytl-lede { font-size: 16px; color: var(--c-text, #444); max-width: 34em; margin: 0; }
.tytl-meta { font-size: 13px; color: var(--c-muted, #6b6b6b); margin: 0; }
.tytl-eyebrow { font-size: 16px; font-weight: 500; color: var(--c-heading, #3d2633); margin: 0 0 8px; }
.tytl-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 30px; background: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; color: var(--c-heading, #3d2633); }
.tytl-pill::before { content: "✦"; font-size: 12px; color: var(--c-primary, #c64080); }

.tytl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 30px; border: 1px solid transparent; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.tytl-btn--primary { background: var(--c-primary, #c64080); color: #fff; }
.tytl-btn--primary:hover { background: var(--c-primary-hover, #a62d66); color: #fff; }
.tytl-btn--ghost { border-color: var(--c-primary, #c64080); color: var(--c-primary, #c64080); background: #fff; }
.tytl-btn--ghost:hover { background: var(--c-primary, #c64080); color: #fff; }

/* Announcement bar */
.tytl-announce { background: var(--c-deep, #4a1f36); color: #fff; font-size: 14px; line-height: 1.4; text-align: center; padding: 10px var(--gutter, 20px); }
.tytl-announce a { color: #fff; font-weight: 600; }

/* Hero: blush panel inside the container; header + hero fit one screen on load. */
.tytl-hero { padding: 16px 0 0; }
.tytl-hero__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; background: var(--c-tile, #fdf2f7); border-radius: var(--r-img, 20px); padding: clamp(24px, 4vw, 56px); }
.tytl-hero__title { font-size: var(--fs-h1, 56px); max-width: 13ch; margin: 16px 0 14px; }
.tytl-search { margin-top: 24px; display: flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--c-border, #e5e5e5); border-radius: 30px; max-width: 520px; }
.tytl-search input[type="search"] { flex: 1; min-width: 0; border: 0; padding: 0 18px; min-height: 44px; font: inherit; font-size: 15px; background: transparent; box-shadow: none; border-radius: 30px; }
.tytl-search input[type="search"]:focus { outline: none; }
.tytl-search:focus-within { border-color: var(--c-primary, #c64080); }
.tytl-search button { border: 0; border-radius: 30px; background: var(--c-primary, #c64080); color: #fff; padding: 0 22px; min-height: 44px; font: inherit; font-weight: 500; cursor: pointer; }
.tytl-search button:hover { background: var(--c-primary-hover, #a62d66); }
.tytl-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.tytl-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 30px; border: 1px solid var(--c-border, #e5e5e5); background: #fff; text-decoration: none; font-size: 13px; font-weight: 500; color: var(--c-heading, #3d2633); }
.tytl-chip:hover { border-color: var(--c-heading, #3d2633); }
/* Hero shelf: poster height follows the viewport so the hero never runs past the first screen */
.tytl-hero .tytl-reels--shelf .tytl-reel__media { aspect-ratio: auto; height: clamp(220px, calc(100svh - 400px), 400px); }
.tytl-hero .tytl-reel__source { display: none; }

/* Sections */
.tytl-sec { padding-block: var(--section, 48px); }
.tytl-sec + .tytl-sec--light { padding-top: 0; }
.tytl-sec--tile { background: var(--c-tile, #fdf2f7); }
.tytl-sec--tile + .tytl-sec--light { padding-top: var(--section, 48px); }
.tytl-sec__head { margin-bottom: var(--head-gap, 24px); }
.tytl-sec__head--center { text-align: center; }
.tytl-sec__head--center .tytl-sec__lede { margin-inline: auto; }
.tytl-sec__head h2 { margin: 0; }
.tytl-sec__lede { margin: 10px 0 0; max-width: 40em; color: var(--c-text, #444); }
.tytl-sec__more { margin-top: var(--head-gap, 24px); text-align: center; }
.tytl-sec .woocommerce { margin: 0; }

/* Problem finder rows */
.tytl-finder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border, #e5e5e5); }
.tytl-finder__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--c-border, #e5e5e5); text-decoration: none; color: var(--c-heading, #3d2633); }
.tytl-finder__text { display: grid; gap: 2px; }
.tytl-finder__name { font-family: var(--f-serif, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.tytl-finder__name sup { font-size: 13px; margin-left: 4px; top: -0.6em; }
.tytl-finder__note { font-size: 14px; color: var(--c-muted, #6b6b6b); }
.tytl-finder__thumb img { display: block; width: 96px; height: 96px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--c-border, #e5e5e5); padding: 8px; }
.tytl-finder__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border, #e5e5e5); display: grid; place-items: center; transition: background-color 0.2s, border-color 0.2s; }
.tytl-finder__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tytl-finder__row:hover .tytl-finder__arrow { background: var(--c-primary, #c64080); border-color: var(--c-primary, #c64080); color: #fff; }
.tytl-finder__row:hover .tytl-finder__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (min-width: 1200px) {
  .tytl-finder { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .tytl-finder li:nth-child(-n + 2) { border-top: 1px solid var(--c-border, #e5e5e5); }
}

/* Articles */
.tytl-articles { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; text-align: left; }
.tytl-feature { display: grid; gap: 12px; align-content: start; }
.tytl-feature__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-img, 20px); }
.tytl-feature h3 { font-size: clamp(24px, calc(24px + 8 * var(--rate, 0)), 32px); margin: 0; }
.tytl-feature h3 a, .tytl-article-list a { text-decoration: none; color: inherit; }
.tytl-feature h3 a:hover, .tytl-article-list a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tytl-article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border, #e5e5e5); }
.tytl-article-list li { padding: 18px 0; border-bottom: 1px solid var(--c-border, #e5e5e5); display: grid; gap: 4px; }
.tytl-article-list h3 { font-family: var(--f-sans, sans-serif); font-style: normal; letter-spacing: 0; font-size: 18px; font-weight: 500; line-height: 1.45; margin: 0; }

/* Ordering steps (icon-box pattern) */
.tytl-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; max-width: 1100px; }
.tytl-steps li { counter-increment: step; display: grid; justify-items: center; text-align: center; gap: 10px; }
.tytl-steps li::before { content: counter(step); width: 64px; height: 64px; border-radius: 50%; background: var(--c-soft, #f9dce9); display: grid; place-items: center; font-family: var(--f-serif, sans-serif); font-weight: 700; font-size: 26px; color: var(--c-primary, #c64080); margin-bottom: 6px; }
.tytl-steps h3 { margin: 0; }
.tytl-steps p { margin: 0; max-width: 300px; font-size: 15px; color: var(--c-muted, #6b6b6b); }
.tytl-contact { margin-top: var(--head-gap, 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Label details on product cards and product pages */
.tytl-badges { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; pointer-events: none; }
.tytl-single-tags .tytl-badges { position: static; justify-content: flex-start; pointer-events: auto; }
.tytl-badge { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 30px; line-height: 1.3; }
.tytl-badge--rx { background: var(--c-rx-bg, #fff1cc); color: var(--c-rx, #6f4500); }
.tytl-badge--video { margin-left: auto; background: #fff; color: var(--c-heading, #3d2633); display: inline-flex; gap: 5px; align-items: center; }
.tytl-badge--video svg { width: 10px; height: 10px; fill: currentColor; }
.tytl-for { display: inline-flex; align-self: flex-start; align-items: center; max-width: 100%; font-size: 13px; font-weight: 500; color: var(--c-text, #444); border: 1px solid var(--c-border, #e5e5e5); padding: 2px 10px; border-radius: 30px; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tytl-dose { font-size: 13px; line-height: 1.5; color: var(--c-muted, #6b6b6b); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tytl-dose b { color: var(--c-text, #444); font-weight: 500; }
.tytl-dose--single { font-size: 15px; display: block; padding: 12px 16px; background: var(--c-tile, #fdf2f7); border-radius: 15px; }
.tytl-single-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tytl-single-tags .tytl-for { margin: 0; }
.tytl-rx-note { background: var(--c-rx-bg, #fff1cc); color: var(--c-rx, #6f4500); padding: 12px 16px; border-radius: 15px; font-size: 14px; }
.tytl-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 8px 0 16px; }
.tytl-ask .tytl-link, .tytl-link { font-weight: 500; color: var(--c-primary, #c64080); text-underline-offset: 4px; }

/* Desktop/tablet one-tap contact (replaces the Chaty widget) */
/* Sits above Blocksy's back-to-top button (bottom-right, ~50px) */
.tytl-float { position: fixed; z-index: 98; right: 20px; bottom: 84px; display: grid; gap: 10px; justify-items: end; }
.tytl-float a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 14px; border-radius: 30px; font-size: 15px; font-weight: 600; text-decoration: none; color: #fff; box-shadow: 0 6px 20px rgba(74, 31, 54, 0.22); transition: transform 0.2s; }
.tytl-float a:hover { transform: translateY(-2px); color: #fff; }
.tytl-float svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tytl-float__zalo { background: #0068ff; }
.tytl-float__call { background: var(--c-primary, #c64080); }

/* Phone bottom navigation */
.tytl-action-bar { display: none; }
@media (max-width: 767px) {
  .tytl-action-bar { position: fixed; z-index: 99; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(66px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--c-border, #e5e5e5); }
  .tytl-action-bar a { display: grid; justify-items: center; align-content: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--c-heading, #3d2633); text-decoration: none; }
  .tytl-action-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
  .tytl-action-bar a[aria-current="page"] { color: var(--c-primary, #c64080); }
  .tytl-action-bar a[aria-current="page"] svg { fill: var(--c-soft, #f9dce9); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* Tablet */
@media (max-width: 1199px) {
  .tytl-articles { grid-template-columns: 1fr; }
  /* Narrow hero shelf: posters only; captions and product rows live in the video section */
  .tytl-hero .tytl-reel__caption, .tytl-hero .tytl-tie { display: none; }
}
/* Mobile */
@media (max-width: 767px) {
  .tytl-announce { font-size: 13px; padding-block: 10px; }
  .tytl-announce__more { display: none; }
  .tytl-hero { padding-top: 12px; }
  .tytl-hero__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; overflow: hidden; }
  .tytl-hero__title { margin: 12px 0 10px; }
  .tytl-hero .tytl-lede { font-size: 15px; }
  .tytl-search { margin-top: 18px; }
  .tytl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .tytl-chips::-webkit-scrollbar { display: none; }
  .tytl-chip { flex: none; }
  .tytl-hero .tytl-reels--shelf { margin-inline: 0; padding-inline: 0; grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
  .tytl-hero .tytl-reels--shelf .tytl-reel__media { height: clamp(150px, calc(100svh - 640px), 260px); }
  .tytl-finder__row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .tytl-finder__arrow { display: none; }
  .tytl-finder__name { font-size: 18px; }
  .tytl-finder__note { font-size: 13px; }
  .tytl-finder__thumb img { width: 76px; height: 76px; border-radius: 12px; padding: 6px; }
  .tytl-steps { grid-template-columns: 1fr; gap: 28px; }
  .tytl-contact .tytl-btn { flex: 1 1 100%; }
  /* The bottom nav carries Zalo/Gọi on phones */
  .tytl-float { display: none; }
}
@media (max-width: 767px) and (max-height: 760px) {
  .tytl-hero .tytl-lede { display: none; }
}