/*
Theme Name: AffiliateCMS Child
Theme URI: https://lat.vn/
Description: Child theme for AffiliateCMS Theme. Add your custom styles and overrides here.
Author: AffiliateCMS Team
Author URI: https://lat.vn/
Template: affiliateCMS-theme
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliatecms-child
*/

/* ==========================================================================
   Custom Styles - Add your overrides below
   ========================================================================== */

/* ============================================================
   BRAND TOKENS - FungiPop (rule H2: 1 bộ token tập trung duy nhất).
   Override đúng token :root có sẵn của theme cha (tokens.css).

   Dark Green #0F4C3A - primary (CTA/link/navbar), FungiPop_Brandkit
   Orange     #FF7A1A - accent (mascot cap color, badges, icons)
   Cream      #FFF8E8 - light surface / footer text
   Beige      #E8DCC3 - secondary border/surface

   KHÁC shrimpyo.com (site chị em cùng stack): FungiPop's wordmark logo is
   FULL-COLOR (dark green + orange text on transparent bg), not white
   line-art. Verified via WCAG contrast math before writing this file:
     - Dark Green #0F4C3A vs white:  9.93:1 (excellent on any light bg)
     - Orange     #FF7A1A vs white:  2.61:1 (FAILS AA - never use as a
       filled button/background with white text)
     - Orange     #FF7A1A vs black:  8.05:1 (fine as icon/text ON a light
       bg when paired with dark text, or on a dark bg as a small accent)
   Consequence: the HEADER stays on the theme's normal light surface (the
   logo is fully readable there) - there is no forced dark color-token
   band here, unlike shrimpyo's header/footer. The FOOTER is still a
   deliberate dark green band (matches portfolio convention), but instead
   of the raster wordmark (which would go dark-green-on-dark-green and
   vanish) it renders the mascot icon (self-contained colors, reads on
   anything) + a plain text wordmark colored via the footer's own
   --color-text token. See footer.php.
   ============================================================ */
:root {
    --color-primary: #0F4C3A;
    --color-primary-hover: #0B3B2D;
    --color-primary-dark: #082C21;
    --color-primary-light: #E3F0EA;
    --color-primary-rgb: 15, 76, 58;

    --color-accent: #FF7A1A;
    --color-accent-hover: #E56A0F;
    --color-accent-light: #FFEEDD;
    --color-accent-pure: #FF7A1A;

    --color-border-strong: #C9BC9C;

    --font-heading: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
    --font-badge: 'Fredoka', var(--font-sans);
}

h1, h2, h3, h4, h5, h6,
.fgp-cat-title,
.fgp-who-title,
.fgp-hero__col--feat h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
}

/* ============================================================
   HEADER (header.php): topbar + navbar accent + mega-dropdown category +
   FTC disclosure bar. Stays on the theme's normal light surface tokens
   (--color-bg/--color-text/... unchanged) - the full-color logo reads
   fine here, no forced dark band needed (see BRAND TOKENS note above).
   ============================================================ */
.fgp-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--duration-200) var(--ease-out);
}

.fgp-header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.fgp-topbar {
    background: var(--color-bg);
}

.fgp-topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.fgp-hamburger {
    display: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--color-text);
}

.fgp-ic-close {
    display: none;
}

.fgp-mnav-toggle:checked ~ .fgp-topbar .fgp-ic-open {
    display: none;
}

.fgp-mnav-toggle:checked ~ .fgp-topbar .fgp-ic-close {
    display: inline;
}

.fgp-logo-wrap {
    margin: 0;
    flex-shrink: 0;
}

.fgp-logo {
    font-family: var(--font-sans);
    font-weight: var(--font-bold);
    font-size: 1.4rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fgp-logo__img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .fgp-logo__img {
        height: 48px;
        max-width: 260px;
    }
}

@media (max-width: 480px) {
    .fgp-logo__img {
        height: 32px;
        max-width: 170px;
    }
}

.fgp-searchpill {
    flex: 1;
    max-width: 420px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.fgp-searchpill i {
    color: var(--color-text-subtle);
}

.fgp-searchpill input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text);
    outline: none;
}

.fgp-searchpill button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
}

.fgp-m-searchbtn,
.fgp-mobile-search {
    display: none;
}

/* ---- Navbar accent (mega-dropdown category) ---- */
.fgp-navbar {
    background: var(--color-primary);
}

.fgp-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* 2026-09-16: category names ở site này dài hơn hẳn mức thiết kế ban đầu của
   header.php (trung bình ~35 ký tự, có tên tới 46 ký tự "Monotubs, Martha
   Tents & Fruiting Chambers"), tổng chiều rộng 5 mục + "All Categories" vượt
   xa .container (1200px). Không co giãn (flex-shrink mặc định =1) khiến chữ
   tràn ra khỏi khung mục, còn cả hàng nav thì tràn ra khỏi .container gây
   scrollbar ngang toàn trang, lệch hẳn so với header phía trên. Fix: cho
   chính .fgp-navbar__nav tự cuộn ngang bên trong nó (ẩn scrollbar, vẫn kéo
   được bằng chuột/touch), không để tràn ra ngoài trang. .fgp-ni + nút
   "How We Review" giữ nguyên kích thước (flex-shrink:0) để không bị bóp méo.
   Cùng gốc lỗi + cùng cách sửa với shrimpyo.com (site chị em cùng thiết kế
   header, category cũng dài, xem style.css của site đó). */
/* 2026-09-16 (sửa lại lần 2): bản overflow-x:auto/overflow-y:hidden ban đầu
   vô tình cắt luôn dropdown ".fgp-submenu" của "All Categories" (phần tử
   absolute nằm dưới hàng nav - CSS không cho overflow-x khác 'visible' mà
   overflow-y vẫn 'visible' thật sự, engine luôn ép cả 2 trục cùng clip).
   Sau khi giảm primary_cats xuống 2 mục (header.php), nav không còn đủ dài để
   tràn khung trong trường hợp bình thường, nên bỏ hẳn overflow-x ở đây, chỉ
   giữ flex-shrink:0 trên từng mục (không cho chữ bị bóp méo nếu có lỡ chật). */
.fgp-navbar__nav {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.fgp-ni {
    position: relative;
    flex-shrink: 0;
}

.fgp-navbar__right {
    flex-shrink: 0;
}

.fgp-ni > a {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: var(--space-4) var(--space-4);
    color: #fff;
    font-weight: var(--font-semibold);
    font-size: 0.9rem;
    white-space: nowrap;
}

.fgp-ni > a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.fgp-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: none;
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    min-width: 220px;
    display: none;
    flex-direction: column;
    z-index: 50;
}

.fgp-submenu--allcats {
    columns: 2;
    min-width: 320px;
}

.fgp-submenu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.fgp-submenu a:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

.fgp-ni:hover .fgp-submenu {
    display: flex;
}

.fgp-navbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-shrink: 0;
}

.fgp-navbar__right a {
    color: #fff;
    font-weight: var(--font-bold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fgp-navbar__right a:hover {
    text-decoration: underline;
    color: #fff;
}

.fgp-mobile-nav {
    display: none;
}

/* ---- FTC disclosure bar (markup có sẵn ở theme cha, restyle lại) ---- */
.post-disclosure {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
}

.post-disclosure__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.post-disclosure__icon {
    display: none;
}

.post-disclosure__text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.post-disclosure__link {
    font-weight: var(--font-semibold);
    color: var(--color-text);
    text-decoration: underline;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .fgp-searchpill {
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .fgp-hamburger {
        display: block;
    }

    .fgp-searchpill {
        display: none;
    }

    .fgp-m-searchbtn {
        display: flex;
        align-items: center;
        margin-left: auto;
        font-size: 1.2rem;
        color: var(--color-text);
    }

    .fgp-msearch-toggle:checked ~ .fgp-mobile-search {
        display: block;
    }

    .fgp-mobile-search {
        background: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-4);
    }

    .fgp-mobile-search form {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        padding: var(--space-2) var(--space-4);
    }

    .fgp-mobile-search input {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
    }

    .fgp-navbar {
        display: none;
    }

    .fgp-mnav-toggle:checked ~ .fgp-mobile-nav {
        display: block;
    }

    .fgp-mobile-nav {
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-2) var(--space-4);
    }

    .fgp-mobile-nav details {
        border-bottom: 1px solid var(--color-border-subtle);
        padding: var(--space-3) 0;
    }

    .fgp-mobile-nav summary {
        font-weight: var(--font-semibold);
        cursor: pointer;
        color: var(--color-text);
    }

    .fgp-mobile-nav__sub {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-3);
        padding-left: var(--space-4);
    }

    .fgp-mobile-nav__sub a {
        color: var(--color-text-secondary);
        font-size: 0.9rem;
    }

    .fgp-mobile-nav__sep {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--color-text-subtle);
        padding: var(--space-3) 0;
    }

    .fgp-mobile-nav__accent {
        display: block;
        padding: var(--space-2) 0;
        color: var(--color-primary);
        font-weight: var(--font-bold);
    }
}

@media (max-width: 480px) {
    .fgp-submenu--allcats {
        columns: 1;
    }
}

/* ============================================================
   CATEGORY ARCHIVE PAGE (category.php)
   ============================================================ */
.fgp-catpage-head {
    text-align: center;
    padding: var(--space-10) 0 var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
}

.fgp-catpage-head .breadcrumb {
    justify-content: center;
    margin-bottom: var(--space-4);
}

.fgp-catpage-head__title {
    font-size: 2.2rem;
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.fgp-catpage-head__desc {
    max-width: 720px;
    margin: var(--space-4) auto 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.fgp-catpage-head__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.fgp-chip {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
}

.fgp-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .fgp-catpage-head__title {
        font-size: 1.6rem;
    }
}

/* ============================================================
   QUICK PICKS SUMMARY (single post)
   ============================================================ */
.fgp-quickpicks {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--content-section-spacing, var(--space-8)) 0;
}

.fgp-quickpicks__title {
    margin-top: 0 !important;
}

.fgp-quickpicks .acms-grid {
    max-width: 100% !important;
}

/* ---- Homepage (front-page.php) ---- */

.fgp-tagline {
    text-align: center;
    padding: var(--space-12) var(--container-padding) var(--space-10);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}
.fgp-tagline h1 {
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
.fgp-tagline p {
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto var(--space-6);
}
.fgp-tagline form {
    display: flex;
    max-width: 480px;
    margin: 0 auto;
    gap: var(--space-2);
}
.fgp-tagline input[type="search"] {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
}
.fgp-tagline button {
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
}
.fgp-tagline button:hover { background: var(--color-primary-hover); }

.fgp-block,
.fgp-catblock {
    margin: var(--space-12) 0;
}
.fgp-sechead h2,
.fgp-who-title,
.fgp-cat-title a {
    color: var(--color-text);
}
.fgp-cat-title {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-1);
}
.fgp-cat-title a { text-decoration: none; }
.fgp-cat-title a:hover { color: var(--color-primary); }
.fgp-ch { margin-bottom: var(--space-5); }
.fgp-subs {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.fgp-subs a { color: var(--color-text-secondary); }
.fgp-subs a:hover { color: var(--color-primary); }

.fgp-empty {
    color: var(--color-text-muted);
    padding: var(--space-8);
    text-align: center;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
}

/* Why FungiPop / team */
.fgp-who {
    background: var(--color-bg-alt);
    padding: var(--space-12) 0;
    margin-top: var(--space-12);
}
.fgp-who-title {
    font-size: var(--text-3xl);
    text-align: center;
    margin: 0 0 var(--space-4);
}
.fgp-sub {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-2);
    color: var(--color-text-secondary);
}
.fgp-sub a { color: var(--color-primary); }

.fgp-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    margin: var(--space-8) 0;
}
.fgp-stat { text-align: center; }
.fgp-stat b {
    display: block;
    font-size: var(--text-3xl);
    color: var(--color-primary);
}
.fgp-stat span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.fgp-teamlbl {
    text-align: center;
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-5);
    color: var(--color-text);
}
.fgp-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-6);
    max-width: var(--container-lg);
    margin: 0 auto;
}
.fgp-member {
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
}
.fgp-member img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    object-fit: cover;
    margin: 0 auto var(--space-2);
    display: block;
}
.fgp-member b {
    display: block;
    font-size: var(--text-sm);
}
.fgp-member span {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.fgp-member:hover b { color: var(--color-primary); }

/* ---- Hero 3 cột (Latest / Featured / Trending) ---- */
.fgp-hero {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border);
}
.fgp-hero__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
}
.fgp-hero__item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.fgp-hero__item a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.fgp-hero__item a:hover { color: var(--color-primary); }
.fgp-hero__col--feat img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
    margin-bottom: var(--space-3);
}
.fgp-hero__col--feat h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.fgp-hero__col--feat h3 a { color: var(--color-text); text-decoration: none; }
.fgp-hero__col--feat p { color: var(--color-text-secondary); }

.fgp-date {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}
.fgp-byline {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---- Category block layout: lead-list ---- */
.fgp-cols {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
}
.fgp-lead img { width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.fgp-lead h3 { margin: var(--space-2) 0; }
.fgp-lead h3 a { color: var(--color-text); text-decoration: none; }
.fgp-lead p { color: var(--color-text-secondary); margin-top: var(--space-2); }
.fgp-list .fgp-li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.fgp-list .fgp-li a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.fgp-list .fgp-li a:hover { color: var(--color-primary); }

/* ---- Category block layout: compact-list ---- */
.fgp-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
.fgp-crow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}
.fgp-crow:hover { background: var(--color-surface-hover); }
.fgp-crow img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }

/* ---- Category block layout: carousel ---- */
.fgp-carousel {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.fgp-carousel .fgp-carousel__item {
    flex: 0 0 260px;
    scroll-snap-align: start;
}

/* ---- Newsletter band ---- */
.fgp-news {
    background: var(--color-text);
    color: var(--color-surface);
    margin-top: var(--space-12);
}
.fgp-news__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) var(--container-padding);
    flex-wrap: wrap;
}
.fgp-news__eyebrow {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-primary-light);
}
.fgp-news__text strong { display: block; font-size: var(--text-xl); margin: var(--space-1) 0; }
.fgp-news__text p { color: var(--color-border); margin: 0; }
.fgp-news__form { display: flex; gap: var(--space-2); }
.fgp-news__form input[type="email"] {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    min-width: 260px;
}
.fgp-news__form button {
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: #2B1400;
    cursor: pointer;
    font-weight: var(--font-semibold);
}
.fgp-news__form button:hover { background: var(--color-accent-hover); color: #fff; }
.fgp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fgp-news__msg { font-weight: var(--font-medium); }
.fgp-news__msg--error { color: var(--color-error); }

/* ---- Pillars (Who we are / What we do / How we do it) ---- */
.fgp-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin: var(--space-8) 0;
}
.fgp-pillar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.fgp-pillar__title { font-weight: var(--font-semibold); margin-bottom: var(--space-2); }
.fgp-pillar p { color: var(--color-text-secondary); margin: 0; font-size: var(--text-sm); }
.fgp-pillar a { color: var(--color-primary); }

/* ============================================================
   FOOTER: deliberate dark green band (portfolio convention). See BRAND
   TOKENS note at the top of this file for why the logo IMAGE is not
   used here - footer.php renders the mascot icon + a plain text
   wordmark instead, both colored via THIS scoped token override.
   ============================================================ */
.fgp-footer {
    --color-bg: #0F4C3A;
    --color-bg-alt: #14624A;
    --color-surface: #123D2F;
    --color-surface-raised: #175A44;
    --color-text: #FFF8E8;
    --color-text-secondary: #CFE3D8;
    --color-text-muted: #93B3A4;
    --color-text-subtle: #6F9584;
    --color-border: #1F6B52;
    --color-border-subtle: #175A44;

    background: var(--color-bg);
    color: var(--color-text-secondary);
    margin-top: var(--space-12);
}
.fgp-footer__top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-10);
    padding: var(--space-12) var(--container-padding) var(--space-8);
}
.fgp-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.fgp-footer__mascot {
    display: block;
    height: 40px;
    width: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.fgp-footer__wordmark {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: 1.3rem;
    color: var(--color-text);
}
.fgp-footer__desc { color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 320px; }
.fgp-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.fgp-footer__cols h5 { color: #fff; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 var(--space-3); }
.fgp-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.fgp-footer__cols li { margin-bottom: var(--space-2); }
.fgp-footer__cols a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); }
.fgp-footer__cols a:hover { color: #fff; }
.fgp-footer__disclosure {
    padding: var(--space-4) var(--container-padding);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}
.fgp-footer__disclosure a { color: var(--color-text-secondary); }
.fgp-footer__bottom {
    padding: var(--space-4) var(--container-padding) var(--space-6);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* Responsive check: 1080 / 768 / 480 */
@media (max-width: 1080px) {
    .fgp-hero { grid-template-columns: 1fr; }
    .fgp-cols { grid-template-columns: 1fr; }
    .fgp-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .fgp-tagline h1 { font-size: var(--text-3xl); }
    .fgp-stats { gap: var(--space-6); }
    .fgp-pillars { grid-template-columns: 1fr; }
    .fgp-compact { grid-template-columns: 1fr; }
    .fgp-footer__cols { grid-template-columns: 1fr 1fr; }
    .fgp-news__wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .fgp-tagline { padding: var(--space-8) var(--space-4); }
    .fgp-tagline form { flex-direction: column; }
    .fgp-tagline h1 { font-size: var(--text-2xl); }
    .fgp-stats { gap: var(--space-4); flex-wrap: wrap; row-gap: var(--space-4); }
    .fgp-team { grid-template-columns: repeat(2, 1fr); }
    .fgp-news__form { flex-direction: column; width: 100%; }
    .fgp-news__form input[type="email"] { min-width: 0; width: 100%; }
    .fgp-footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Post views: hide the "0 views" badge site-wide until traffic is real
   (same rationale/hook already applied on sibling sites - core theme
   prints post-hero__views unconditionally, editing parent theme files
   is not allowed per rule I1, so CSS is the only hook point).
   ============================================================ */
.post-card__views,
.post-card__footer-item--views,
.post-hero__views {
    display: none;
}

/* ============================================================
 * ABOUT PAGE: trust-item row cuối trang (page-about.php override)
 * ============================================================ */
.fgp-about-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    list-style: none;
    max-width: 800px;
    margin: var(--space-8) auto 0;
    padding: var(--space-6) 0 0;
    border-top: 1px solid var(--color-border);
}

.fgp-about-trust__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.fgp-about-trust__item i {
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .fgp-about-trust {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
}

/* ============================================================
 * SITEWIDE DISCLOSURE BAR: hàng badge phía trên câu disclosure
 * (template-parts/single/disclosure.php override).
 * ============================================================ */
.fgp-disclosure-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-1);
    padding: 0;
}

.fgp-disclosure-badges__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.fgp-disclosure-badges__item i {
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .fgp-disclosure-badges {
        gap: var(--space-1) var(--space-3);
    }
}

/* ============================================================
 * PSILOCYBIN EDUCATION notice band (isolated, non-monetized category).
 * Applied via body class from single.php content filter or category
 * template - see mu-plugin fungipop-no-monetize-guard.php (Phase 4).
 * ============================================================ */
.fgp-no-monetize-notice {
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text);
}

/* ==========================================================================
   Deals gift button + /deals/ page (mu-plugin fgp-deals-gift.php)
   Colors and spacing come from the shared tokens above and the parent theme.
   The button is a plain link to /deals/. It never opens an overlay.
   Placed bottom-left so it stays clear of the TOC action bar and the
   notification toast, which both sit bottom-right.
   ========================================================================== */

.deals-gift-wrap {
    position: fixed;
    left: var(--space-4);
    bottom: var(--space-6);
    z-index: var(--z-fixed, 100);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.deals-gift {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-accent);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.deals-gift:hover,
.deals-gift:focus-visible {
    background: var(--color-primary);
    color: var(--color-bg);
    transform: translateY(-2px);
}

.deals-gift:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

.deals-gift__icon {
    flex: 0 0 auto;
    overflow: visible;
}

.deals-gift__label {
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}

/* Attention cues start only when the script adds .is-live (after a short
   delay or once the reader has scrolled a bit) and stop on their own. */

/* Soft ring that ripples out from the button. */
.deals-gift::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-accent);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.deals-gift-wrap.is-live .deals-gift::before {
    animation: deals-ring 2.2s ease-out 0.4s 5;
}

/* The lid lifts a little, like the gift is about to open. */
.deals-gift__lid {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.deals-gift-wrap.is-live .deals-gift__lid {
    animation: deals-lid 3s ease-in-out 1s 4;
}

/* Tap hint, touch screens only. */
.deals-gift__hand {
    display: none;
    position: absolute;
    right: -0.5rem;
    bottom: -1rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text);
    fill: var(--color-surface);
    pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
    .deals-gift-wrap.is-live .deals-gift__hand {
        display: block;
        animation: deals-tap 1.4s ease-in-out 1.2s 4;
    }
}

/* Hint bubble. Hidden until the script marks the wrapper live. */
.deals-gift__tip {
    display: none;
}

.deals-gift-wrap.is-live .deals-gift__tip {
    display: block;
    animation: deals-tip-in 0.4s ease both;
}

.deals-gift__tiprow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: min(18rem, calc(100vw - 2rem));
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

/* Small tail pointing down at the button. */
.deals-gift__tiprow::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    bottom: -0.4rem;
    width: 0.75rem;
    height: 0.75rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    transform: rotate(45deg);
}

.deals-gift__tiptext {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.deals-gift__tiptext:hover {
    color: var(--color-accent);
}

.deals-gift__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.deals-gift__close:hover,
.deals-gift__close:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

@keyframes deals-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes deals-lid {
    0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
    82% { transform: translateY(-3px) rotate(-10deg); }
    92% { transform: translateY(-1px) rotate(-3deg); }
}

@keyframes deals-tap {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-4px, -6px); }
}

@keyframes deals-tip-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .deals-gift,
    .deals-gift::before,
    .deals-gift__lid,
    .deals-gift__hand,
    .deals-gift-wrap.is-live .deals-gift__tip {
        animation: none !important;
        transition: none;
    }
}

@media (max-width: 480px) {
    .deals-gift-wrap {
        left: var(--space-3);
        bottom: var(--space-4);
    }

    .deals-gift {
        padding: var(--space-3);
    }

    /* Icon-only button on small phones to keep clear of content. */
    .deals-gift__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media print {
    .deals-gift-wrap {
        display: none;
    }
}

.deals-page__disclosure {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.deals-page__lead {
    margin: var(--space-5, 1.25rem) 0;
    color: var(--color-text-secondary);
}

.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8, 2rem);
}

.deals-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.deals-card__title {
    margin: 0;
    font-size: 1.125rem;
}

.deals-card__text {
    flex: 1 1 auto;
    margin: 0;
    color: var(--color-text-secondary);
}

.deals-card__btn {
    align-self: flex-start;
}

.deals-page__subhead {
    margin: var(--space-6) 0 var(--space-3);
    font-size: 1.25rem;
}

.deals-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.deals-cats a {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    text-decoration: none;
}

.deals-cats a:hover,
.deals-cats a:focus-visible {
    border-color: var(--color-accent);
}

.deals-page__note,
.deals-page__fine {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.deals-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.deals-product {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.deals-product__img {
    display: block;
    padding: var(--space-3);
    background: var(--color-surface-raised);
    text-align: center;
}

.deals-product__img img {
    width: 100%;
    max-width: 12rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.deals-product__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.deals-product__badge {
    align-self: flex-start;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-accent-light);
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.deals-product__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.deals-product__title:hover {
    color: var(--color-accent);
}

.deals-product__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: 0;
}

.deals-product__price {
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 800;
}

.deals-product__was {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.deals-product__save {
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 700;
}

.deals-product__stamp {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.deals-product__btn {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 480px) {
    .deals-products {
        grid-template-columns: 1fr;
    }
}