/* ==========================================================================
   Store + category pages
   ========================================================================== */

.term-hero { background: var(--hero-bg); color: var(--hero-text); }
.term-hero .container { padding-block: var(--space-5) var(--space-8); }
.term-hero .breadcrumbs { margin-bottom: var(--space-6); color: var(--hero-text-muted); }

.term-hero__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-7);
}
.term-hero__media {
    display: grid;
    place-items: center;
    width: 120px; height: 120px;
    padding: 14px;
    border-radius: 24px;
    background: #FFFFFF;
    color: #1F3BFF;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-size: 2rem;
}
.term-hero--category .term-hero__media { background: var(--color-accent); color: var(--color-ink); }
.term-hero__media .category-img { width: 56px; height: 56px; }

.term-hero__eyebrow { color: var(--color-accent); }
.term-hero__title {
    margin: 0 0 var(--space-3);
    color: var(--hero-text);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.term-hero__intro { max-width: 640px; margin: 0 0 var(--space-4); color: var(--hero-text-soft); }

.term-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.term-hero__stats li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--hero-chip);
    font-size: var(--fs-sm);
}
.term-hero__stats strong { font-weight: 700; }
.term-hero__stat--verified { background: var(--color-accent) !important; color: var(--color-ink); }

/* Star rating driven by --rating (0–5) */
.rating {
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 80px; height: 16px;
    background: linear-gradient(90deg, var(--color-accent) calc(var(--rating, 0) / 5 * 100%), rgba(255, 255, 255, 0.3) 0);
    -webkit-mask: var(--star) 0 0 / 16px 16px repeat-x;
    mask: var(--star) 0 0 / 16px 16px repeat-x;
}

.term-hero__action { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.term-hero__domain { color: var(--hero-text-muted); font-family: var(--font-mono); font-size: var(--fs-sm); }

@media (max-width: 991.98px) {
    .term-hero__inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); }
    .term-hero__action { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
    .term-hero__media { width: 96px; height: 96px; }
}
@media (max-width: 640px) {
    .term-hero .container { padding-bottom: var(--space-7); }
    .term-hero .breadcrumbs { margin-bottom: var(--space-4); }
    .term-hero__inner { grid-template-columns: 1fr; }
    .term-hero__media { width: 80px; height: 80px; padding: 10px; border-radius: 18px; }
    .term-hero__action .btn { width: 100%; }
}

/* Pull the filter tabs up onto the hero edge */
.term-page .page-section { padding-top: var(--space-6); }

/* Pinned offer */
.pinned-offer { display: flex; flex-direction: column; gap: var(--space-3); }
.pinned-offer__media img { width: 100%; border-radius: var(--radius-xl); }

/* Content sections */
.content-card__section { margin-top: var(--space-6); }

/* FAQ */
.faq h2 { margin-bottom: var(--space-4); }
.faq__item { border-top: 1px solid var(--color-border); }
.faq__item:last-of-type { border-bottom: 1px solid var(--color-border); }
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question .icon { color: var(--color-primary); transition: transform var(--transition-fast); }
.faq__item[open] .faq__question .icon { transform: rotate(180deg); }
.faq__answer { padding-bottom: var(--space-4); color: var(--color-muted); }