/* ==========================================================================
   TrustWorldHub — design system
   Tokens mirror trustworldhub.com (HSL triplets, consumed via hsl(var(--x)))
   ========================================================================== */

:root {
    /* Brand / trust */
    --trust-green: 160 84% 39%;
    --trust-green-light: 160 70% 45%;
    --trust-green-dark: 160 84% 32%;

    /* Star rating scale (histogram bars only) */
    --star-5: 160 84% 39%;
    --star-4: 160 70% 45%;
    --star-3: 45 93% 47%;
    --star-2: 25 95% 53%;
    --star-1: 0 84% 60%;

    /* Surfaces */
    --background: 0 0% 100%;
    --background-secondary: 220 14% 96%;
    --background-muted: 220 13% 91%;
    --card: 0 0% 100%;
    --card-border: 220 13% 91%;
    --popover: 0 0% 100%;

    /* Text */
    --foreground: 220 9% 15%;
    --foreground-secondary: 220 9% 46%;
    --foreground-muted: 220 8% 65%;
    --muted-foreground: 220 9% 46%;

    /* Interactive */
    --primary: 160 84% 39%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 14% 96%;
    --secondary-foreground: 220 9% 15%;
    --muted: 220 14% 96%;
    --accent: 160 30% 95%;
    --accent-foreground: 160 84% 32%;
    --destructive: 0 84% 60%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 160 84% 39%;

    /* Chrome */
    --footer: 220 13% 10%;
    --footer-foreground: 220 8% 75%;

    /* Informational callout */
    --info: 199 89% 48%;
    --info-background: 199 89% 96%;
    --info-foreground: 199 89% 30%;

    --radius: 0.5rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    overflow-x: hidden;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* iOS Safari zooms the whole page when a focused field is under 16px.
   Only emulators are immune, so force 16px on touch-sized screens. */
@media (max-width: 639px) {
    input, select, textarea { font-size: 16px !important; }
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Admin-only chrome. This is cosmetic only — every endpoint it drives is
   enforced server-side, so hiding it is convenience, not the security. */
.admin-only { display: none !important; }
body.is-admin .admin-only { display: revert !important; }
body.is-admin .card.admin-only { display: block !important; }
body:not(.is-admin) button.company-logo { cursor: default; }
body:not(.is-admin) button.company-logo::after { content: none; }

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn:disabled { pointer-events: none; opacity: .5; }

.btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background-color: hsl(var(--trust-green) / .9); }

.btn-outline { background-color: hsl(var(--background)); border-color: hsl(var(--input)); color: hsl(var(--foreground)); }
.btn-outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn-ghost { background-color: transparent; color: hsl(var(--footer-foreground)); }
.btn-ghost:hover { color: hsl(var(--primary-foreground)); }

.btn-block { width: 100%; }
.btn-sm { font-size: 0.8125rem; padding: 0.375rem 0.75rem; }

@media (max-width: 639px) { .hero-actions .btn { width: 100%; } }

/* ==========================================================================
   Header (dark chrome)
   ========================================================================== */

.site-header {
    background-color: hsl(var(--footer));
    color: hsl(var(--footer-foreground));
    border-bottom: 1px solid rgb(255 255 255 / .05);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
}
@media (min-width: 768px) { .header-row { padding: 1rem 0; } }

.brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 1; min-width: 0; }
.brand svg { flex-shrink: 0; }

/* Header logo image — matches the reference sizing (h-8 / sm:h-10 / md:h-12).
   Width is capped so a wide wordmark never pushes the nav off a small screen. */
.brand-logo {
    display: block; height: 2rem; width: auto;
    max-width: 8.25rem; border-radius: 4px; object-fit: contain;
}
@media (min-width: 640px) { .brand-logo { height: 2.5rem; max-width: 12rem; } }
@media (min-width: 768px) { .brand-logo { height: 3rem; max-width: 16rem; } }

.brand-fallback { align-items: center; gap: 0.5rem; }
.brand-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) { .brand-name { font-size: 1.375rem; } }

.header-search { display: none; flex: 1; max-width: 28rem; margin: 0 1rem; }
@media (min-width: 768px) { .header-search { display: flex; } }
@media (min-width: 1024px) { .header-search { margin: 0 1.5rem; } }

.search-pill { position: relative; width: 100%; }
.search-pill svg {
    position: absolute; left: 0.9375rem; top: 50%; transform: translateY(-50%);
    color: hsl(var(--muted-foreground)); pointer-events: none;
}
.search-pill input {
    width: 100%;
    height: 2.5rem;
    padding: 0 1rem 0 2.75rem;
    border: 0;
    border-radius: 9999px;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}
@media (min-width: 1024px) { .search-pill input { height: 2.75rem; } }
.search-pill input::placeholder { color: hsl(var(--muted-foreground)); }
.search-pill input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.header-nav { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .header-nav { gap: 0.75rem; } }
@media (min-width: 1024px) { .header-nav { gap: 1.25rem; } }

.header-link { font-size: 0.875rem; color: hsl(var(--footer-foreground)); display: none; }
.header-link:hover { color: #fff; }
@media (min-width: 1024px) { .header-link { display: block; } }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem; border-radius: 9999px; border: 0; background: transparent;
    color: inherit; cursor: pointer; transition: background-color .15s;
}
.icon-btn:hover { background-color: hsl(var(--secondary) / .2); }

.header-login { display: none; }
@media (min-width: 640px) { .header-login { display: inline-flex; } }

/* Below 640px the CTA collapses to an icon-only square, as on the reference,
   so the logo and nav both fit on a 375px screen. */
.header-cta svg { display: none; }
.header-cta .cta-label { display: inline; }
@media (max-width: 639px) {
    .header-cta { padding-left: 0.625rem; padding-right: 0.625rem; }
    .header-cta svg { display: block; }
    .header-cta .cta-label { display: none; }
}

.header-search-mobile { display: block; padding-bottom: 0.75rem; }
@media (min-width: 768px) { .header-search-mobile { display: none; } }

/* ==========================================================================
   Breadcrumb strip
   ========================================================================== */

.breadcrumb-bar {
    background-color: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
}
/* On mobile the breadcrumb keeps its own line and the store picker drops
   below it full-width, instead of the two fighting over 343px. */
.breadcrumb-row {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.5rem; padding: 0.5rem 0;
}
@media (min-width: 640px) {
    .breadcrumb-row {
        flex-direction: row; align-items: center; justify-content: space-between;
        gap: 1rem; padding: 0.75rem 0;
    }
}

.breadcrumb {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 640px) { .breadcrumb { font-size: 0.875rem; } }
.breadcrumb a:hover { color: hsl(var(--foreground)); }
.breadcrumb .sep { margin: 0 0.5rem; }
.breadcrumb .current { color: hsl(var(--foreground)); }

.store-select {
    width: 100%;
    font-size: 0.8125rem;
    padding: 0.5rem 0.625rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    cursor: pointer;
}
@media (min-width: 640px) {
    .store-select { width: auto; flex-shrink: 0; max-width: 16rem; padding: 0.375rem 0.625rem; }
}

/* ==========================================================================
   Page grid
   ========================================================================== */

.page-main { flex: 1; }

/* Vertical only — the `padding` shorthand here would wipe out .container's
   horizontal padding and make the whole column run edge-to-edge on mobile. */
.page-body { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 640px) { .page-body { padding-top: 2rem; padding-bottom: 2rem; } }

.layout-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) {
    .layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
    .layout-main { grid-column: span 2 / span 2; }
}

.layout-main > * + * { margin-top: 1.5rem; }
@media (min-width: 640px) { .layout-main > * + * { margin-top: 2rem; } }

.layout-aside > * + * { margin-top: 1rem; }
@media (min-width: 640px) { .layout-aside > * + * { margin-top: 1.5rem; } }

.card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: var(--radius);
    padding: 1rem;
}
@media (min-width: 640px) { .card { padding: 1.5rem; } }

/* ==========================================================================
   Hero — company identity
   ========================================================================== */

.company-hero { display: flex; flex-direction: row; gap: 1rem; }
@media (min-width: 640px) { .company-hero { gap: 1.5rem; } }

.company-logo {
    width: 4rem; height: 4rem;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    object-fit: cover;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: hsl(var(--secondary));
    color: hsl(var(--foreground));
    font-size: 1.5rem; font-weight: 700;
}
@media (min-width: 640px) { .company-logo { width: 6rem; height: 6rem; font-size: 2.25rem; } }

/* The hero tile is a button so it doubles as the logo upload target. */
button.company-logo { cursor: pointer; padding: 0; position: relative; overflow: hidden; }
button.company-logo::after {
    content: 'Upload logo';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: rgb(0 0 0 / .6); color: #fff;
    font-size: 0.6875rem; font-weight: 600; text-align: center;
    opacity: 0; transition: opacity .15s;
}
button.company-logo:hover::after,
button.company-logo:focus-visible::after { opacity: 1; }

.company-hero-body {
    flex: 1;
    display: flex; flex-direction: row; justify-content: space-between;
    gap: 0.5rem; min-width: 0;
}
@media (min-width: 640px) { .company-hero-body { gap: 1rem; } }

.company-identity { flex: 1; min-width: 0; }

.company-identity h1 {
    font-size: 1.125rem; font-weight: 700; color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 640px) { .company-identity h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } }

.company-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.25rem; margin-bottom: 0.5rem; font-size: 0.75rem;
}
@media (min-width: 640px) { .company-meta { gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.875rem; } }

.company-meta .review-count-link { color: hsl(var(--foreground)); text-decoration: underline; }
.company-meta .review-count-link:hover { text-decoration: none; }
.company-meta .dot { color: hsl(var(--muted-foreground)); display: none; }
@media (min-width: 640px) { .company-meta .dot { display: inline; } }
.company-meta .inline-score { display: inline-flex; align-items: center; gap: 0.5rem; }
.company-meta .inline-score .value { font-weight: 600; color: hsl(var(--foreground)); }

.category-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .category-tags { gap: 0.5rem; margin-bottom: 1rem; } }

.category-tag {
    display: inline-flex;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;   /* a tag takes its own line rather than splitting a word */
}

/* Very narrow phones (<=400px): claw back width for the identity column so
   two-word tags still fit on one line. */
@media (max-width: 400px) {
    .company-logo { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
    .company-hero { gap: 0.75rem; }
    .category-tag { font-size: 0.8125rem; padding: 0.1875rem 0.625rem; }
    .company-score .score-value { font-size: 1.625rem; }
    .company-score .score-label { font-size: 0.6875rem; }
}

.hero-actions { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; gap: 0.75rem; } }
.hero-actions .btn { font-size: 0.75rem; }
@media (min-width: 640px) { .hero-actions .btn { font-size: 0.875rem; } }

.company-score { text-align: right; flex-shrink: 0; }
.company-score .score-value {
    font-size: 1.875rem; font-weight: 700; color: hsl(var(--foreground));
    margin-bottom: 0.25rem; line-height: 1.1;
}
@media (min-width: 640px) { .company-score .score-value { font-size: 3rem; } }
@media (min-width: 1024px) { .company-score .score-value { font-size: 3.75rem; } }
.company-score .stars { justify-content: flex-end; }
.company-score .score-label {
    color: hsl(var(--trust-green)); font-weight: 600;
    font-size: 0.75rem; margin-top: 0.25rem;
}
@media (min-width: 640px) { .company-score .score-label { font-size: 1rem; margin-top: 0.5rem; } }
@media (min-width: 1024px) { .company-score .score-label { font-size: 1.125rem; } }

/* ==========================================================================
   Stars
   ========================================================================== */

.stars { display: inline-flex; gap: 0.125rem; }
.stars svg { width: 1rem; height: 1rem; }
.stars.stars-sm svg { width: 0.75rem; height: 0.75rem; }
.stars .star-on { fill: hsl(var(--trust-green)); color: hsl(var(--trust-green)); }
.stars .star-off { fill: hsl(var(--muted)); color: hsl(var(--muted)); }
.stars-hide-mobile { display: none; }
@media (min-width: 640px) { .stars-hide-mobile { display: inline-flex; } }

/* ==========================================================================
   Rating histogram
   ========================================================================== */

.histogram-rows > * + * { margin-top: 0.5rem; }

.histogram-row {
    display: grid;
    grid-template-columns: 72px 1fr 44px;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    background: none; border: 0; padding: 0; width: 100%;
    text-align: left; cursor: pointer; color: inherit;
}
@media (min-width: 640px) { .histogram-row { grid-template-columns: 84px 1fr 52px; } }

.histogram-row .label,
.histogram-row .pct { white-space: nowrap; color: hsl(var(--muted-foreground)); }
.histogram-row .pct { text-align: right; }
.histogram-row:hover .label,
.histogram-row:hover .pct,
.histogram-row.is-active .label,
.histogram-row.is-active .pct { color: hsl(var(--foreground)); }

.histogram-row .track {
    display: block;
    min-width: 0; height: 0.5rem;
    background-color: hsl(var(--muted));
    border-radius: 9999px; overflow: hidden;
}
.histogram-row .fill { display: block; height: 100%; transition: width .4s ease; }
.fill-5 { background-color: hsl(var(--star-5)); }
.fill-4 { background-color: hsl(var(--star-4)); }
.fill-3 { background-color: hsl(var(--star-3)); }
.fill-2 { background-color: hsl(var(--star-2)); }
.fill-1 { background-color: hsl(var(--star-1)); }

.score-explainer {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) { .score-explainer { font-size: 0.875rem; } }
.score-explainer:hover { color: hsl(var(--foreground)); }

/* ==========================================================================
   Info callout + response rate
   ========================================================================== */

.info-box {
    display: flex; align-items: flex-start; gap: 0.75rem;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--info) / .2);
    background-color: hsl(var(--info-background));
    padding: 1rem;
    color: hsl(var(--info-foreground));
}
.info-box .icon {
    width: 2rem; height: 2rem; border-radius: 9999px;
    background-color: hsl(var(--info) / .1);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-box p { font-size: 0.875rem; line-height: 1.625; }

.response-rate {
    display: flex; align-items: flex-start; gap: 0.75rem;
    font-size: 0.75rem; color: hsl(var(--foreground));
}
@media (min-width: 640px) { .response-rate { font-size: 0.875rem; } }
.response-rate svg { color: hsl(var(--muted-foreground)); flex-shrink: 0; margin-top: 2px; }
.response-rate .sub { color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   Reviews section
   ========================================================================== */

.section-title {
    font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground));
    margin-bottom: 1rem;
}
@media (min-width: 640px) { .section-title { font-size: 1.5rem; margin-bottom: 1.5rem; } }

/* Mobile: chips scroll sideways on one line, search full width, selects side
   by side. From 640px up it collapses back to a single inline row. */
.review-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.review-toolbar > .filter-chips,
.review-toolbar > .toolbar-field.is-search { grid-column: 1 / -1; }

@media (min-width: 640px) {
    .review-toolbar { display: flex; flex-wrap: wrap; align-items: center; }
}

.filter-chips {
    display: flex; gap: 0.375rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.125rem;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips .chip { flex-shrink: 0; }

@media (min-width: 640px) {
    .filter-chips { flex-wrap: wrap; overflow-x: visible; margin-right: auto; }
}

.chip {
    border-radius: 9999px;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    padding: 0.3125rem 0.75rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.chip.is-active {
    background-color: hsl(var(--accent));
    border-color: hsl(var(--trust-green) / .35);
    color: hsl(var(--accent-foreground));
    font-weight: 600;
}

.toolbar-field { position: relative; min-width: 0; }
.toolbar-field input,
.toolbar-field select {
    width: 100%;
    height: 2.5rem;               /* comfortable tap target on touch */
    font-size: 0.8125rem;
    padding: 0 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}
.toolbar-field input { padding-left: 2rem; }

@media (min-width: 640px) {
    .toolbar-field input,
    .toolbar-field select { width: auto; height: 2.25rem; }
    .toolbar-field input { min-width: 12rem; }
}
.toolbar-field .field-icon {
    position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%);
    color: hsl(var(--muted-foreground)); pointer-events: none;
}
.toolbar-field input:focus-visible,
.toolbar-field select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }

.reviews-list > * + * { margin-top: 1rem; }

.review-card {
    border-radius: var(--radius);
    border: 1px solid hsl(var(--card-border));
    background-color: hsl(var(--card));
    padding: 1rem;
    transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1);
    animation: fade-in .3s ease-in-out;
}
@media (min-width: 640px) { .review-card { padding: 1.5rem; } }
.review-card:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.review-head {
    display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .review-head { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

.review-author { display: flex; align-items: center; gap: 0.75rem; }

.avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 500; flex-shrink: 0;
}
@media (min-width: 640px) { .avatar { width: 3rem; height: 3rem; font-size: 0.875rem; } }

.review-author .name {
    font-weight: 500; font-size: 0.875rem; color: hsl(var(--foreground));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 640px) { .review-author .name { font-size: 1rem; } }

.review-author .sub {
    display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) { .review-author .sub { font-size: 0.875rem; } }

/* Stacked on mobile, indented to line up under the author name (as on the
   reference); back to the top-right corner from 640px up. */
.review-time {
    font-size: 0.75rem; color: hsl(var(--muted-foreground));
    padding-left: 3.25rem;
}
@media (min-width: 640px) { .review-time { font-size: 0.875rem; padding-left: 0; } }

.review-stars { margin-bottom: 0.75rem; }

.review-card h3 {
    font-weight: 600; font-size: 0.875rem; color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}
@media (min-width: 640px) { .review-card h3 { font-size: 1rem; } }

.review-body {
    font-size: 0.875rem; color: hsl(var(--foreground-secondary));
    line-height: 1.625; margin-bottom: 1rem;
}
@media (min-width: 640px) { .review-body { font-size: 1rem; } }

.review-reply {
    border-left: 3px solid hsl(var(--border));
    background-color: hsl(var(--secondary) / .5);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.review-reply .reply-head {
    font-size: 0.8125rem; font-weight: 600; color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
}
.review-reply p { font-size: 0.875rem; color: hsl(var(--foreground-secondary)); }

.review-facts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) { .review-facts { font-size: 0.875rem; } }
.review-facts .sep { display: none; margin: 0 0.5rem; }
.review-facts .verified { width: 100%; margin-top: 0.25rem; }
@media (min-width: 640px) {
    .review-facts .sep { display: inline; }
    .review-facts .verified { width: auto; margin-top: 0; }
}

.review-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}
@media (min-width: 640px) { .review-actions { gap: 1rem; } }

.review-action {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.75rem; color: hsl(var(--muted-foreground));
    background: none; border: 0; cursor: pointer;
    min-height: 44px;              /* touch target, same as the reference */
    padding: 0 0.5rem; margin: 0 -0.5rem;
    transition: color .15s;
}
@media (min-width: 640px) { .review-action { font-size: 0.875rem; } }
.review-action:hover { color: hsl(var(--foreground)); }
.review-action.is-voted { color: hsl(var(--trust-green)); font-weight: 600; }

.reviews-empty, .reviews-loading {
    padding: 3rem 1rem; text-align: center;
    color: hsl(var(--muted-foreground)); font-size: 0.875rem;
    border: 1px dashed hsl(var(--border)); border-radius: var(--radius);
}

/* Pagination */
.pagination {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.75rem; margin-top: 1.5rem;
}
@media (min-width: 640px) { .pagination { flex-direction: row; gap: 1rem; } }
.pagination .btn { width: 100%; }
@media (min-width: 640px) { .pagination .btn { width: auto; } }
.pagination .page-indicator {
    font-size: 0.75rem; color: hsl(var(--muted-foreground)); order: -1;
}
@media (min-width: 640px) { .pagination .page-indicator { font-size: 0.875rem; order: 0; } }

/* Closing summary */
.all-reviews-summary {
    padding-top: 1.5rem;
    border-top: 1px solid hsl(var(--border));
}
@media (min-width: 640px) { .all-reviews-summary { padding-top: 2rem; } }
.all-reviews-summary .score-row {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
@media (min-width: 640px) { .all-reviews-summary .score-row { justify-content: flex-start; } }
.all-reviews-summary .score-row .value { font-size: 1.5rem; font-weight: 700; }
@media (min-width: 640px) { .all-reviews-summary .score-row .value { font-size: 1.875rem; } }
.all-reviews-summary h3 {
    font-size: 1.125rem; font-weight: 600; margin-top: 1rem; text-align: center;
}
@media (min-width: 640px) { .all-reviews-summary h3 { font-size: 1.25rem; text-align: left; } }
.all-reviews-summary p {
    font-size: 0.875rem; color: hsl(var(--muted-foreground)); text-align: center;
}
@media (min-width: 640px) { .all-reviews-summary p { font-size: 1rem; text-align: left; } }
.all-reviews-summary p a { color: hsl(var(--primary)); }
.all-reviews-summary p a:hover { text-decoration: underline; }

/* ==========================================================================
   Sidebar cards
   ========================================================================== */

.subscription-line {
    display: flex; align-items: center; gap: 0.5rem;
    color: hsl(var(--trust-green)); font-weight: 500; margin-bottom: 1rem;
    font-size: 0.875rem;
}

.card h3.card-title {
    font-weight: 600; color: hsl(var(--foreground));
    margin-bottom: 1rem; font-size: 0.875rem;
}
@media (min-width: 640px) { .card h3.card-title { font-size: 1rem; } }

.contact-list > * + * { margin-top: 0.75rem; }
.contact-row {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.75rem;
}
@media (min-width: 640px) { .contact-row { font-size: 0.875rem; } }
.contact-row svg { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.contact-row a { color: hsl(var(--primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row a:hover { text-decoration: underline; }

.card-header-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;
}
.card-header-row h3 { font-weight: 600; font-size: 0.875rem; }
@media (min-width: 640px) { .card-header-row h3 { font-size: 1rem; } }
.card-header-row .nav-arrows { display: flex; gap: 0.25rem; }
.card-header-row .nav-arrows button {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: calc(var(--radius) - 3px);
    border: 0; background: transparent; color: hsl(var(--muted-foreground));
    cursor: pointer;
}
.card-header-row .nav-arrows button:hover { background-color: hsl(var(--secondary)); }
.card-header-row .nav-arrows button:disabled { opacity: .35; cursor: default; }

.similar-list { margin: 0 -1rem; }
@media (min-width: 640px) { .similar-list { margin: 0 -1.5rem; } }

.similar-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    transition: background-color .15s;
    cursor: pointer;
}
@media (min-width: 640px) { .similar-item { padding: 1rem 1.5rem; } }
.similar-item:last-child { border-bottom: 0; }
.similar-item:hover { background-color: hsl(var(--secondary) / .5); }
.similar-item h4 { font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.25rem; font-size: 0.9375rem; }
.similar-item .domain { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.similar-item .rating { display: flex; align-items: center; gap: 0.5rem; }
.similar-item .rating .value { font-weight: 600; font-size: 0.875rem; }
.similar-item .rating .count { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

.aside-note { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; line-height: 1.6; }

/* ==========================================================================
   Admin dashboard
   ========================================================================== */

.admin-header {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem;
}
.admin-header h2 { font-size: 1.5rem; font-weight: 700; }
.admin-header p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; margin-top: 0.25rem; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.stat-box {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: var(--radius);
    padding: 1.25rem;
}
.stat-box .stat-num { display: block; font-size: 1.875rem; font-weight: 700; color: hsl(var(--foreground)); }
.stat-box .stat-label { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }

.admin-section-title { margin: 2rem 0 1rem; font-size: 1.125rem; font-weight: 600; }

.stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.store-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: var(--radius);
    padding: 1.25rem;
}
.store-card .store-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.store-card .store-card-logo {
    width: 2.75rem; height: 2.75rem; border-radius: calc(var(--radius) - 2px);
    background-color: hsl(var(--secondary)); color: hsl(var(--foreground));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.125rem; flex-shrink: 0;
}
.store-card h4 { font-size: 1rem; font-weight: 600; }
.store-card .domain { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.store-card .store-card-stats {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; margin-bottom: 1rem;
}
.store-card .store-card-stats .value { font-weight: 600; }
.store-card .store-card-stats .count { color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background-color: rgb(0 0 0 / .55);
    display: none; align-items: center; justify-content: center;
    padding: 1rem; overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }

.modal-card {
    background-color: hsl(var(--popover));
    border-radius: var(--radius);
    border: 1px solid hsl(var(--card-border));
    width: 100%; max-width: 34rem;
    max-height: 90vh; overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .2), 0 8px 10px -6px rgb(0 0 0 / .2);
    animation: fade-in .2s ease-in-out;
}

.modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.modal-header h3 { font-size: 1.125rem; font-weight: 600; }
.close-btn {
    border: 0; background: transparent; cursor: pointer;
    color: hsl(var(--muted-foreground)); font-size: 1.125rem; line-height: 1;
    padding: 0.25rem;
}
.close-btn:hover { color: hsl(var(--foreground)); }

.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block; font-size: 0.8125rem; font-weight: 500;
    color: hsl(var(--foreground)); margin-bottom: 0.375rem;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}
.form-group textarea { resize: vertical; }
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }

.field-hint { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.375rem; }

/* Logo upload controls (add-store modal + admin branding card) */
.logo-upload-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo-upload-row input[type="file"] { flex: 1; min-width: 12rem; font-size: 0.8125rem; }

.logo-upload-preview {
    width: 4.5rem; height: 4.5rem; flex-shrink: 0;
    border: 1px dashed hsl(var(--border));
    border-radius: var(--radius);
    background-color: hsl(var(--background-secondary));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-size: 0.6875rem; color: hsl(var(--muted-foreground));
}
.logo-upload-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* The header logo is white-on-dark, so preview it on the header colour. */
#headerLogoPreview { width: 10rem; background-color: hsl(var(--footer)); border-style: solid; padding: 0.5rem; }

.form-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.star-picker { display: flex; gap: 0.375rem; }
.star-picker button {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: hsl(var(--muted)); line-height: 0;
}
.star-picker button svg { width: 2rem; height: 2rem; }
.star-picker button.is-on { color: hsl(var(--trust-green)); }
.star-picker button.is-on svg { fill: currentColor; }

.modal-footer {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.badge-preview-box {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background-color: hsl(var(--background-secondary));
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.badge-preview-box .preview-label {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
}
.modal-card textarea.code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    background-color: hsl(var(--background-secondary));
}

.trust-badge-widget {
    display: inline-flex; align-items: center; gap: 0.75rem;
    background: #fff; border: 1px solid hsl(var(--card-border));
    border-radius: var(--radius); padding: 0.75rem 1rem;
    font-family: Inter, system-ui, sans-serif;
}
.trust-badge-widget .badge-score { font-size: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); }
.trust-badge-widget .badge-meta { display: flex; flex-direction: column; gap: 2px; }
.trust-badge-widget .badge-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast-stack {
    position: fixed; z-index: 200; bottom: 1rem; right: 1rem;
    display: flex; flex-direction: column-reverse; gap: 0.5rem;
    max-width: 22rem;
}
.toast {
    background-color: hsl(var(--footer)); color: #fff;
    border-radius: var(--radius); padding: 0.75rem 1rem;
    font-size: 0.875rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3);
    animation: fade-in .2s ease-in-out;
}
.toast.is-error { background-color: hsl(var(--destructive)); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background-color: hsl(var(--footer));
    color: hsl(var(--footer-foreground));
    margin-top: 3rem;
}
.footer-grid {
    display: grid; grid-template-columns: 1fr; gap: 2rem;
    padding: 3rem 0;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer-grid h3 { font-weight: 600; color: #fff; margin-bottom: 1rem; font-size: 1rem; }
.footer-grid ul { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.footer-grid ul a:hover { color: #fff; }

.footer-social { display: flex; align-items: center; gap: 1rem; }
.footer-social a:hover { color: #fff; }

.footer-bottom {
    padding-bottom: 3rem;
}
.footer-bottom-inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: space-between; gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid hsl(var(--footer-foreground) / .2);
}
@media (min-width: 768px) { .footer-bottom-inner { flex-direction: row; } }
.footer-bottom-inner .footer-brand { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 600; }
.footer-brand-fallback { display: flex; align-items: center; gap: 0.5rem; }
/* A class selector outranks the browser's [hidden] rule, so restate it. */
[hidden] { display: none !important; }
.footer-logo { height: 1.75rem; width: auto; max-width: 11rem; object-fit: contain; display: block; }
@media (min-width: 768px) { .footer-logo { height: 2rem; max-width: 14rem; } }

/* The footer sits on the dark surface, so preview the logo there too. */
#footerLogoPreview { width: 10rem; background-color: hsl(var(--footer)); border-style: solid; padding: 0.5rem; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.75rem; }
.footer-legal a:hover { color: #fff; }
.footer-copy { font-size: 0.75rem; }