/*
  FEMICORE_PAGE_ACCENTS
  Product-specific visual accents, loaded ONLY on guides/bladder-control-supplements/.
  This page has no top header/nav by design (BOF Visual Redesign 01 correction pass) —
  Trendelyo branding appears only in the footer (trendelyo-base.css). This file only
  reduces visual shock in the Google Ad -> guide -> FemiCore order page transition
  (item 12 of the visual continuity brief), it does not replace Trendelyo's identity.

  Tokens below are OBSERVED from getfemicore.com/text.php via computed-style inspection
  in the browser on 2026-08-26 (colors/radius/button treatment) — no vendor HTML, CSS,
  JS, image, or font file was copied. See FEMICORE_VISUAL_REFERENCE in
  docs/funnel/TRENDELYO-WEBSITE-FOUNDATION-01.md for the full source notes.
*/
:root {
  --fc-cta-start: #f2925a;
  --fc-cta-end: #ea7a3c;
  --fc-cta-text: #ffffff;
  --fc-badge: #f58284;
  --fc-card-radius: 16px;
}

.trust-bar {
  background: var(--t-bg);
  border-bottom: 3px solid var(--fc-badge);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--t-ink);
}
.trust-bar-sep { margin: 0 8px; color: var(--fc-badge); font-weight: 700; }

.guide-femicore .cta-button {
  display: inline-block;
  font-family: Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, var(--fc-cta-start), var(--fc-cta-end));
  color: var(--fc-cta-text);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(234, 122, 60, 0.35);
}
.guide-femicore .cta-button:hover { filter: brightness(1.04); }
.guide-femicore .cta-button:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 2px; }
.guide-femicore .cta-sub { font-size: 0.85rem; color: var(--t-muted); margin-top: 10px; }
.affiliate-micro-disclosure { font-size: 0.78rem; color: var(--t-muted); margin-top: 10px; }

.guide-femicore .cta-block {
  text-align: center;
  margin: 2.4em 0;
  padding: 26px;
  background: #f9f5f0;
  border: 1px solid var(--t-border);
  border-radius: var(--fc-card-radius);
}

.guide-femicore .card { border-radius: var(--fc-card-radius); }

.hero-eyebrow {
  display: inline-block;
  background: var(--fc-badge);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.guide-femicore .price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.2em 0;
}
.guide-femicore .price-table th, .guide-femicore .price-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--t-border);
}
.guide-femicore .price-table th { color: var(--t-accent-dark); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.guide-femicore .price-note { font-size: 0.82rem; color: var(--t-muted); }

.guide-femicore .criteria-inline {
  font-size: 0.95rem;
  color: var(--t-muted);
  margin: 1em 0 1.6em;
  padding-left: 1.2em;
}
.guide-femicore .criteria-inline li { margin-bottom: 0.3em; }

/* No header above this page (top branding removed by design) — the trust bar carries
   that role now, so the hero keeps its own breathing room below it. */
main.guide-femicore.hero-bof { padding-top: 22px; }

.footer-brand {
  font-weight: 700;
  color: var(--t-accent-dark);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

/* Wider desktop container for this guide only — body copy stays at a comfortable
   reading width via .guide-narrow, the hero grid is allowed to use the full span. */
main.guide-femicore { max-width: 1120px; }
.guide-narrow { max-width: 720px; margin: 0 auto; }

/* Hero: mobile-first stacking order is the real DOM order (head -> image -> body), so
   no CSS reordering is needed below the desktop breakpoint. Desktop switches to a
   two-column grid via named areas. */
.hero-image-link {
  display: block;
  border-radius: var(--fc-card-radius);
  margin: 0 auto 18px;
  max-width: 320px;
}
.hero-image-link:focus-visible,
.product-visual-link:focus-visible {
  outline: 3px solid var(--t-ink);
  outline-offset: 2px;
}
.hero-image-link:hover .hero-product-img,
.product-visual-link:hover .product-visual-img {
  filter: brightness(0.97);
}
.hero-product-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fc-card-radius);
}

.hero-panel-card {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--fc-card-radius);
  padding: 22px 24px;
  margin-bottom: 1.6em;
}

.product-visual-row {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 1.6em 0;
}
.product-visual-row .card { margin: 0; flex: 1; }
.product-visual-link { display: block; flex-shrink: 0; border-radius: var(--fc-card-radius); }
.product-visual-img {
  display: block;
  width: 140px;
  height: auto;
  border-radius: var(--fc-card-radius);
  border: 1px solid var(--t-border);
}
@media (max-width: 640px) {
  .product-visual-row { flex-direction: column; }
  .product-visual-img { width: 160px; }
}
.hero-panel-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-accent-dark);
  margin-bottom: 12px;
}
.hero-panel-list { list-style: none; margin: 0; padding: 0; }
.hero-panel-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.hero-panel-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fc-cta-end);
  font-weight: 700;
}
.hero-panel-footnote {
  font-size: 0.78rem;
  color: var(--t-muted);
  margin: 10px 0 0;
}

.ingredients-subhead {
  font-size: 1.02rem;
  color: var(--t-accent-dark);
  margin: 1.6em 0 0.8em;
}
.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0 0 0.6em;
  padding: 0;
}
.ingredient-card {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.92rem;
  text-align: center;
}
.ingredients-note { font-size: 0.82rem; color: var(--t-muted); }

.price-row-best { background: #f9f5f0; }
.price-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--t-accent-dark);
  background: #eaf1ee;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
}

.refund-card {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-left: 4px solid var(--fc-cta-end);
  border-radius: var(--fc-card-radius);
  padding: 18px 22px;
}
.refund-card p { margin: 0; }

/* Hero body: mobile puts the short lede + CTA immediately after the image, then the
   rest of the lede, verified points, and facts card follow. Desktop resets to the
   original reading order (both lede halves, then criteria, then facts card, then CTA). */
.hero-body { display: flex; flex-direction: column; }
.lede-short { order: 1; }
.hero-cta { order: 2; }
.lede-rest { order: 3; }
.criteria-inline { order: 4; }
.hero-panel-card { order: 5; }

@media (min-width: 860px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "head visual" "body visual";
    column-gap: 40px;
    row-gap: 12px;
    align-items: start;
  }
  .hero-head { grid-area: head; }
  .hero-image-link { grid-area: visual; max-width: none; margin: 0; position: sticky; top: 24px; }
  .hero-body { grid-area: body; }

  .lede-short { order: 1; }
  .lede-rest { order: 2; }
  .criteria-inline { order: 3; }
  .hero-panel-card { order: 4; }
  .hero-cta { order: 5; }
}

@media (max-width: 480px) {
  .guide-femicore.hero-bof h1 { margin-top: 4px; font-size: 1.6rem; }
  .guide-femicore .lede { font-size: 1.02rem; }
  .guide-femicore .criteria-inline { margin: 0.6em 0 0.8em; }
  .guide-femicore .hero-cta { margin-top: 0.3em; }
  .hero-image-link { max-width: 200px; }
  .ingredient-grid { grid-template-columns: repeat(2, 1fr); }
  .price-tag { display: block; width: fit-content; margin: 4px 0 0; }
  .price-table th, .price-table td { padding: 10px 6px; font-size: 0.85rem; }
}