/*
 * components.css — reusable UI pieces: icons, cards, icon tiles, chips/pills,
 * impact counters, stat bands, photo tiles, CTA band, feature split,
 * value-chain steps, product cards, the WhatsApp button, the social rail and
 * the back-to-top button. These are shared, not page-specific.
 */

/* -------------------------------------------------------------------------
 * Icons (Lucide, inlined by the icon() helper)
 *
 * An icon is sized from the text around it and inherits currentColor, so it
 * never needs a colour of its own.
 * ---------------------------------------------------------------------- */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.2em;
}

.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 2.25em; height: 2.25em; }
/* Hairline weight for large decorative icons. */
.icon--light { stroke-width: 1.5; }

/* -------------------------------------------------------------------------
 * Icon tile
 * ---------------------------------------------------------------------- */
.icon-tile {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--gg-radius);
    background: var(--gg-green-100);
    color: var(--gg-green-700);
}

.icon-tile--gold { background: var(--gg-gold-100); color: var(--gg-gold-700); }
.icon-tile--dark { background: rgba(255, 255, 255, 0.08); color: var(--gg-gold-300); }
.icon-tile--lg { width: 4rem; height: 4rem; border-radius: var(--gg-radius-lg); }

.icon-tile svg { width: 1.5rem; height: 1.5rem; }
.icon-tile--lg svg { width: 2rem; height: 2rem; }

/* Round icon badge used by the stat band (Welthungerhilfe-style). */
.icon-round {
    width: 4.25rem;
    height: 4.25rem;
    display: grid;
    place-items: center;
    margin-inline: auto;
    border-radius: 50%;
    border: 2px solid currentColor;
    color: var(--gg-gold-400);
}

.icon-round svg { width: 2rem; height: 2rem; }

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-4);
    padding: var(--gg-space-6);
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    box-shadow: var(--gg-shadow-sm);
    transition: transform var(--gg-speed) var(--gg-ease), box-shadow var(--gg-speed) var(--gg-ease), border-color var(--gg-speed) var(--gg-ease);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gg-shadow);
    border-color: var(--gg-green-200);
}

.card h3 { margin: 0; }
.card p { margin: 0; color: var(--gg-ink-muted); }

.card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: auto;
    font-family: var(--gg-font-display);
    font-weight: 600;
    font-size: var(--gg-text-sm);
    color: var(--gg-primary);
    text-decoration: none;
}

.card__link:hover { color: var(--gg-primary-strong); }
.card__link svg { width: 1em; height: 1em; transition: transform var(--gg-speed) var(--gg-ease); }
.card__link:hover svg { transform: translateX(3px); }

/* Dark card variant (used on deep-green bands) */
.card--dark {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--gg-ink-200); }
.card--dark:hover { border-color: rgba(251, 191, 36, 0.5); }
.card--dark .card__link { color: var(--gg-gold-300); }

/* -------------------------------------------------------------------------
 * Badges / pills
 * ---------------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35rem 0.8rem;
    border-radius: var(--gg-radius-full);
    background: var(--gg-green-50);
    border: 1px solid var(--gg-green-100);
    color: var(--gg-green-800);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.pill--gold { background: var(--gg-gold-50); border-color: var(--gg-gold-100); color: var(--gg-gold-800); }
.pill--on-dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--gg-ink-100); }

/* Check list */
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.6rem;
    color: var(--gg-ink-700);
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--gg-green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%230a7247' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0.7rem no-repeat;
}

.section--dark .check-list li { color: var(--gg-ink-200); }
.section--dark .check-list li::before { background-color: rgba(255, 255, 255, 0.1); }

/* A short emphasised line under body copy (e.g. "LEARN → PRACTICE → BUILD → EARN") */
.lead-line {
    margin-top: var(--gg-space-5);
    padding-left: var(--gg-space-4);
    border-left: 3px solid var(--gg-accent-strong);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    letter-spacing: 0.04em;
    color: var(--gg-green-800);
}

.section--dark .lead-line { color: var(--gg-gold-300); }

/* -------------------------------------------------------------------------
 * Impact counters
 * ---------------------------------------------------------------------- */
.counter {
    font-family: var(--gg-font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--gg-gold-300);
}

.counter__label { margin-top: 0.4rem; font-size: var(--gg-text-sm); color: var(--gg-ink-300); }

/* -------------------------------------------------------------------------
 * Feature split (image / content two-column)
 * ---------------------------------------------------------------------- */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.feature--reverse .feature__media { order: 2; }

.feature__media {
    position: relative;
    border-radius: var(--gg-radius-xl);
    overflow: hidden;
    min-height: 20rem;
}

.feature__content h2 { margin-top: var(--gg-space-3); }

@media (max-width: 52rem) {
    .feature { grid-template-columns: 1fr; }
    .feature--reverse .feature__media { order: 0; }
}

/* -------------------------------------------------------------------------
 * CTA band
 * ---------------------------------------------------------------------- */
.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--gg-radius-xl);
    padding: clamp(2.5rem, 5vw, 4.5rem);
    background: linear-gradient(120deg, var(--gg-green-800), var(--gg-green-950));
    color: var(--gg-ink-100);
    text-align: center;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60rem 60rem at 120% -20%, rgba(251, 191, 36, 0.22), transparent 55%),
        radial-gradient(40rem 40rem at -20% 120%, rgba(21, 175, 106, 0.28), transparent 55%);
    pointer-events: none;
}

.cta-band > * { position: relative; }

.cta-band h2 { color: #fff; max-width: 42rem; margin-inline: auto; }
.cta-band p { color: var(--gg-ink-200); max-width: 38rem; margin-inline: auto; }

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-4);
    justify-content: center;
    margin-top: var(--gg-space-6);
}

/* -------------------------------------------------------------------------
 * Value chain (7 steps)
 * ---------------------------------------------------------------------- */
.value-chain { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gg-space-3); margin-top: var(--gg-space-7); }

.value-chain__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gg-space-3);
    padding: var(--gg-space-4) var(--gg-space-3);
    text-align: center;
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
}

.value-chain__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.05rem;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 2px solid var(--gg-gold-500);
    border-right: 2px solid var(--gg-gold-500);
    transform: translateY(-50%) rotate(45deg);
}

.value-chain__num {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-gold-700);
}

.value-chain__name { font-weight: 600; font-size: var(--gg-text-sm); color: var(--gg-ink-800); }

@media (max-width: 56rem) {
    .value-chain { grid-template-columns: repeat(2, 1fr); }
    .value-chain__step:not(:last-child)::after { display: none; }
}

/* -------------------------------------------------------------------------
 * Button row (CTA groups)
 * ---------------------------------------------------------------------- */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-4);
    margin-top: var(--gg-space-6);
}

.btn-row--center { justify-content: center; }

/* -------------------------------------------------------------------------
 * Photographs
 * ---------------------------------------------------------------------- */
.photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--gg-radius-lg);
    box-shadow: var(--gg-shadow-lg);
    background: var(--gg-ink-100);
}

.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.photo--wide img { aspect-ratio: 16 / 9; }
.photo--tall img { aspect-ratio: 3 / 4; }

/* Posters and diagrams must not be cropped. */
.photo--contain { background: #fff; border: 1px solid var(--gg-border); box-shadow: var(--gg-shadow); }
.photo--contain img { object-fit: contain; aspect-ratio: 3 / 2; }

.photo__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--gg-space-5) var(--gg-space-4) var(--gg-space-4);
    background: linear-gradient(transparent, rgba(5, 41, 27, 0.88));
    color: #fff;
    font-size: var(--gg-text-card);
    font-weight: 500;
}

/* Two-up / three-up photo strips */
.photo-grid { display: grid; gap: var(--gg-space-4); grid-template-columns: repeat(3, 1fr); }
.photo-grid .photo img { aspect-ratio: 1 / 1; }

/* Three squares on a phone are too small to read; two is the floor. */
@media (max-width: 42rem) {
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .photo-grid .photo img { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------------------
 * Chip — a solid label above a heading, in place of the rule-and-caps eyebrow
 * where a section needs more weight.
 * ---------------------------------------------------------------------- */
.chip {
    display: inline-block;
    margin: 0 0 var(--gg-space-4);
    padding: 0.4rem 0.9rem;
    background: var(--gg-accent-strong);
    color: #fff;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chip--green { background: var(--gg-primary); }
.chip--dark { background: var(--gg-green-950); }

/* -------------------------------------------------------------------------
 * Photo tile — a photograph that *is* the link, with the title sitting on it.
 * Used for "what we do" grids on a colour band.
 * ---------------------------------------------------------------------- */
.tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--gg-radius);
    background: var(--gg-green-900);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--gg-shadow);
}

.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--gg-ease);
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 30, 20, 0.92) 12%, rgba(4, 30, 20, 0.35) 55%, rgba(4, 30, 20, 0.1) 100%);
}

.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
.tile:hover, .tile:focus-visible { color: #fff; }

.tile__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: var(--gg-space-5);
}

.tile__title {
    display: block;
    margin: 0;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xl);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.tile__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--gg-space-3);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-gold-300);
}

.tile:hover .tile__meta .icon { transform: translateX(3px); }
.tile__meta .icon { transition: transform var(--gg-speed) var(--gg-ease); }

/* The icon-only variant, for tiles with no photograph yet. */
.tile--icon { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.tile--icon .tile__glyph { position: relative; z-index: 1; color: var(--gg-gold-300); }
.tile--icon .tile__glyph svg { width: 3rem; height: 3rem; }

/* -------------------------------------------------------------------------
 * Stat band — round icon, big number, rule, label; divided by hairlines.
 * ---------------------------------------------------------------------- */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--gg-space-6) 0;
}

.stat {
    padding-inline: var(--gg-space-5);
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.stat:first-child { border-left: 0; }

.stat__value {
    margin: var(--gg-space-4) 0 0;
    font-family: var(--gg-font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
}

.stat__rule {
    width: 2.5rem;
    height: 3px;
    margin: var(--gg-space-3) auto;
    border: 0;
    background: var(--gg-accent);
}

.stat__label { margin: 0; font-size: var(--gg-text-sm); color: var(--gg-ink-200); }

@media (max-width: 60rem) {
    .stat { border-left: 0; }
}

/* -------------------------------------------------------------------------
 * WhatsApp floating button
 * ---------------------------------------------------------------------- */
.whatsapp-fab {
    position: fixed;
    right: var(--gg-space-5);
    bottom: var(--gg-space-5);
    z-index: 60;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: var(--gg-shadow-lg);
    transition: transform var(--gg-speed) var(--gg-ease);
}

.whatsapp-fab:hover { transform: scale(1.06); color: #fff; }
.whatsapp-fab svg { width: 1.75rem; height: 1.75rem; }

/* -------------------------------------------------------------------------
 * Floating AI assistant
 *
 * Rendered only when a DeepSeek key is configured (partials/ai-chat). The FAB
 * sits above the WhatsApp button; on small screens the panel becomes a bottom
 * sheet that clears both the WhatsApp FAB and the floating quick-nav.
 * ---------------------------------------------------------------------- */
.ai-chat__fab {
    position: fixed;
    right: var(--gg-space-5);
    bottom: calc(var(--gg-space-5) + 4rem);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3rem;
    padding: 0 1rem 0 0.8rem;
    border: 0;
    border-radius: 999px;
    background: var(--gg-green-950);
    color: #fff;
    font-family: var(--gg-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: var(--gg-shadow-lg);
    cursor: pointer;
    transition: transform var(--gg-speed) var(--gg-ease);
}

.ai-chat__fab:hover { transform: scale(1.04); }
.ai-chat__fab svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ai-chat__fab-label { white-space: nowrap; }

.ai-chat__panel {
    position: fixed;
    right: var(--gg-space-5);
    bottom: calc(var(--gg-space-5) + 8rem);
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(70vh, 40rem);
    background: #fff;
    color: var(--gg-ink);
    border: 1px solid var(--gg-green-950);
    border-radius: 1rem;
    box-shadow: var(--gg-shadow-lg);
    overflow: hidden;
}

.ai-chat__panel[hidden] { display: none; }

.ai-chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: var(--gg-green-950);
    color: #fff;
}

.ai-chat__title { margin: 0; font-family: var(--gg-font-display); font-size: 0.9375rem; font-weight: 700; }
.ai-chat__subtitle { margin: 0; font-size: 0.75rem; opacity: 0.75; }

.ai-chat__close {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.ai-chat__close:hover { background: rgba(255, 255, 255, 0.12); }
.ai-chat__close svg { width: 1.1rem; height: 1.1rem; }

.ai-chat__log {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-chat__msg { margin: 0; max-width: 85%; }
.ai-chat__msg p {
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-chat__msg--bot { align-self: flex-start; }
.ai-chat__msg--bot p { background: var(--gg-surface-alt); border-bottom-left-radius: 0.25rem; }

.ai-chat__msg--user { align-self: flex-end; }
.ai-chat__msg--user p { background: var(--gg-green-900); color: #fff; border-bottom-right-radius: 0.25rem; }

.ai-chat__msg--typing p { display: flex; gap: 0.3rem; }
.ai-chat__msg--typing span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    animation: ai-chat-blink 1s infinite ease-in-out;
}
.ai-chat__msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat__msg--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-chat-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.ai-chat__composer {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--gg-border);
}

.ai-chat__input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--gg-border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.875rem;
    background: #fff;
    color: var(--gg-ink);
}

.ai-chat__input:focus { outline: var(--gg-focus); outline-offset: 1px; }

.ai-chat__send {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: var(--gg-green-950);
    color: #fff;
    cursor: pointer;
}
.ai-chat__send:hover { background: var(--gg-green-900); }
.ai-chat__send svg { width: 1.1rem; height: 1.1rem; }

.ai-chat__foot {
    margin: 0;
    padding: 0.4rem 1rem 0.7rem;
    /* Was 11px, which is below the floor the token scale sets for anything
       anyone is expected to read — and this line is the one that redirects a
       pricing question to a human, so it is worth reading. */
    font-size: var(--gg-text-xs);
    line-height: 1.45;
    color: var(--gg-ink-muted);
}

@media (max-width: 60rem) {
    .ai-chat__fab {
        bottom: calc(var(--gg-space-3) + var(--gg-mobile-bar-h) + 4rem + env(safe-area-inset-bottom, 0px));
    }

    .ai-chat__panel {
        left: var(--gg-space-3);
        right: var(--gg-space-3);
        bottom: calc(var(--gg-space-3) + var(--gg-mobile-bar-h) + 8rem + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: 60vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat__fab { transition: none; }
    .ai-chat__msg--typing span { animation: none; }
}

/* -------------------------------------------------------------------------
 * Social links
 * ---------------------------------------------------------------------- */
.social { display: flex; flex-wrap: wrap; gap: var(--gg-space-3); margin: 0; padding: 0; list-style: none; }

.social a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--gg-radius);
    background: rgba(255, 255, 255, 0.06);
    color: var(--gg-ink-200);
    transition: background-color var(--gg-speed) var(--gg-ease), color var(--gg-speed) var(--gg-ease);
}

.social a:hover { background: var(--gg-gold-500); color: #fff; }
.social svg { width: 1.1rem; height: 1.1rem; }

/* Compact variant for the header utility bar. */
.social--sm { gap: var(--gg-space-2); }
.social--sm a { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: transparent; color: var(--gg-ink-200); }
.social--sm a:hover { background: var(--gg-gold-500); color: #fff; }
.social--sm svg { width: 0.95rem; height: 0.95rem; }

/* -------------------------------------------------------------------------
 * Social rail — the fixed column of icons on the right edge (desktop only).
 * ---------------------------------------------------------------------- */
.social-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 55;
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-rail a {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    background: var(--gg-green-900);
    color: #fff;
    transition: background-color var(--gg-speed) var(--gg-ease);
}

.social-rail a:hover { background: var(--gg-accent-strong); color: #fff; }
.social-rail svg { width: 1.05rem; height: 1.05rem; }

@media (max-width: 68rem) {
    .social-rail { display: none; }
}

/* -------------------------------------------------------------------------
 * Back to top — appears once the page has scrolled (js/ui.js).
 * ---------------------------------------------------------------------- */
.to-top {
    position: fixed;
    right: var(--gg-space-5);
    bottom: calc(var(--gg-space-5) + 4.25rem);
    z-index: 60;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--gg-radius);
    background: var(--gg-green-900);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--gg-speed) var(--gg-ease), transform var(--gg-speed) var(--gg-ease), visibility var(--gg-speed);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gg-accent-strong); }

/* -------------------------------------------------------------------------
 * Floating quick-nav (phones only)
 *
 * Five destinations pinned to the bottom of the screen, so the things people
 * actually came for do not require opening the hamburger first. Hidden from
 * 60rem up, where the full menu bar is already visible.
 * ---------------------------------------------------------------------- */
.mobile-bar { display: none; }

@media (max-width: 60rem) {
    /* One source of truth: the bar's own height, the padding that keeps it off
       the page content, and the two floating buttons that sit above it all
       read this. Changing it in one place keeps them from drifting apart. */
    :root { --gg-mobile-bar-h: 60px; }

    .mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        display: block;
        background: var(--gg-green-900);
        /* Clears the iOS home indicator; 0 on everything else. */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 24px -8px rgba(0, 0, 0, 0.45);
    }

    .mobile-bar__list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-bar__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        /* A thumb target, not a pixel hunt. */
        min-height: var(--gg-mobile-bar-h);
        padding: 0.35rem 0.15rem;
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
        transition: color var(--gg-speed) var(--gg-ease), background var(--gg-speed) var(--gg-ease);
    }

    .mobile-bar__icon { display: grid; place-items: center; }
    .mobile-bar__icon svg { width: 1.25rem; height: 1.25rem; }

    /*
     * Fixed two-line box. "Solar Services" needs two lines at this size, and
     * without a fixed box its cell grew taller than the rest and pushed its
     * icon out of line with the other four.
     */
    .mobile-bar__label {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.1em;
        font-family: var(--gg-font-display);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.05;
        text-align: center;
    }

    .mobile-bar__link.is-active,
    .mobile-bar__link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
    .mobile-bar__link.is-active { box-shadow: inset 0 2px 0 0 var(--gg-accent); }
    .mobile-bar__link:focus-visible { outline: var(--gg-focus); outline-offset: -3px; }

    /*
     * Everything that floats above the page has to clear the bar, or it sits
     * on top of the last paragraph of every page on the site.
     */
    body { padding-bottom: calc(var(--gg-mobile-bar-h) + env(safe-area-inset-bottom, 0px)); }

    .whatsapp-fab { bottom: calc(var(--gg-space-3) + var(--gg-mobile-bar-h) + env(safe-area-inset-bottom, 0px)); }
    .to-top { bottom: calc(var(--gg-space-3) + var(--gg-mobile-bar-h) + 4.25rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 60rem) and (prefers-reduced-motion: reduce) {
    .mobile-bar__link { transition: none; }
}

/* -------------------------------------------------------------------------
 * Shop search bar — sits directly under the shop hero.
 * ---------------------------------------------------------------------- */
.shop-search { background: var(--gg-green-900); padding-block: var(--gg-space-4); }

.shop-search__form {
    display: flex;
    align-items: stretch;
    max-width: 48rem;
    margin-inline: auto;
    border-radius: var(--gg-radius);
    overflow: hidden;
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow);
}

.shop-search__category {
    appearance: none;
    flex: none;
    width: 11rem;
    padding: 0 2rem 0 var(--gg-space-4);
    border: 0;
    border-right: 1px solid var(--gg-border);
    background: var(--gg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.65rem center / 1rem;
    font: inherit;
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-800);
}

.shop-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.9rem var(--gg-space-4);
    border: 0;
    font: inherit;
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-900);
}

.shop-search__input:focus { outline: none; }
.shop-search__form:focus-within { outline: var(--gg-focus); outline-offset: 2px; }

.shop-search__submit {
    flex: none;
    width: 3.5rem;
    border: 0;
    background: var(--gg-green-950);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color var(--gg-speed) var(--gg-ease);
}

.shop-search__submit:hover { background: var(--gg-accent-strong); }

@media (max-width: 42rem) {
    .shop-search__category { display: none; }
}

/* -------------------------------------------------------------------------
 * Shop: toolbar, filter sidebar and product cards
 *
 * Product cards sit in a shared sheet divided by hairlines rather than as
 * separate floating cards — it reads as a catalogue, not a marketing grid.
 * ---------------------------------------------------------------------- */
.shop-layout {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: var(--gg-space-6);
    align-items: start;
}

.shop-aside { position: sticky; top: calc(var(--gg-header-h) + var(--gg-space-4)); display: grid; gap: var(--gg-space-6); }

.filter-group { border: 1px solid var(--gg-border); border-radius: var(--gg-radius); background: var(--gg-surface); }

.filter-group__title {
    margin: 0;
    padding: var(--gg-space-4);
    border-bottom: 1px solid var(--gg-border);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-base);
    font-weight: 700;
}

.filter-list { margin: 0; padding: var(--gg-space-2); list-style: none; display: grid; }

.filter-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-3);
    padding: 0.6rem 0.75rem;
    border-radius: var(--gg-radius-sm);
    color: var(--gg-ink-700);
    font-size: var(--gg-text-sm);
    text-decoration: none;
}

.filter-list a > span:first-child { display: inline-flex; align-items: center; gap: 0.55rem; }
.filter-list a:hover { background: var(--gg-green-50); color: var(--gg-green-800); }
.filter-list a.is-active { background: var(--gg-green-50); color: var(--gg-green-800); font-weight: 600; }
.filter-list__count { color: var(--gg-ink-muted); font-size: var(--gg-text-xs); }

.filter-group__body { padding: var(--gg-space-4); display: grid; gap: var(--gg-space-3); }

.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-4);
    padding-bottom: var(--gg-space-4);
    margin-bottom: var(--gg-space-5);
    border-bottom: 1px solid var(--gg-border);
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-muted);
}

.shop-toolbar__controls { display: flex; align-items: center; gap: var(--gg-space-4); }

.select {
    appearance: none;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-sm);
    background: var(--gg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.5rem center / 1rem;
    font: inherit;
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-800);
}

/* The catalogue sheet */
/* Catalogue grid.
 *
 * Separated cards rather than one bordered table: it is how a shop reads, and
 * it lets each card carry its own shadow and lift. Square media, because a
 * catalogue of mixed photography only looks ordered when every tile is the
 * same shape — the shop reference the client picked uses 1:1 throughout. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--gg-space-5);
}

.product-grid--4 { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }

.product {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--gg-space-4);
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: 20px;
    /* transform + box-shadow only: the compositor handles both, so a grid of
       these can hover without the browser re-laying out the page. */
    transition: transform 0.4s var(--gg-ease), box-shadow 0.3s var(--gg-ease), border-color 0.3s var(--gg-ease);
}

@media (hover: hover) {
    .product:hover {
        transform: translateY(-5px);
        border-color: transparent;
        box-shadow: 0 18px 38px -14px rgba(13, 23, 18, 0.28);
        z-index: 1;
    }
}

.product__media {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--gg-space-4);
    overflow: hidden;
    background: var(--gg-ink-50);
    border-radius: 14px;
    color: var(--gg-green-700);
}

.product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--gg-ease);
}

@media (hover: hover) {
    .product:hover .product__media img { transform: scale(1.06); }
}
.product__media .icon { width: 2.5rem; height: 2.5rem; }

.product__category { margin: 0 0 0.35rem; font-size: var(--gg-text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--gg-ink-muted); }

.product__name {
    margin: 0;
    font-family: var(--gg-font);
    /* A product name is the card's heading, not a label — 14px made it read
       as caption text under its own photograph. */
    font-size: var(--gg-text-card);
    font-weight: 500;
    line-height: 1.45;
    color: var(--gg-ink-800);
    /* Two lines, so every card in a row lines up. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product__price {
    margin: var(--gg-space-3) 0 var(--gg-space-4);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    font-weight: 700;
    color: var(--gg-ink-900);
}

.product__price small { display: block; font-family: var(--gg-font); font-size: var(--gg-text-xs); font-weight: 400; color: var(--gg-ink-muted); }

.product__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-sm);
    background: var(--gg-ink-50);
    color: var(--gg-ink-800);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gg-speed) var(--gg-ease), color var(--gg-speed) var(--gg-ease);
}

.product__action:hover { background: var(--gg-primary); border-color: var(--gg-primary); color: #fff; }

.product__badge {
    position: absolute;
    top: var(--gg-space-4);
    left: var(--gg-space-4);
    z-index: 1;
    padding: 0.2rem 0.5rem;
    border-radius: var(--gg-radius-sm);
    background: var(--gg-green-900);
    color: #fff;
    font-size: var(--gg-text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product__badge--muted { background: var(--gg-ink-500); }

@media (max-width: 68rem) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-aside { position: static; }
    .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 42rem) {
    .product-grid, .product-grid--4 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Form feedback (shared by auth, portal and admin)
 * ---------------------------------------------------------------------- */
.field { margin-bottom: var(--gg-space-4); }

.field__error { margin: var(--gg-space-2) 0 0; font-size: var(--gg-text-sm); color: var(--gg-danger); }

.field__label { display: block; font-weight: 600; margin-bottom: var(--gg-space-2); }

.field__radio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--gg-space-2);
    font-weight: 500;
    cursor: pointer;
}
.field__radio input { width: auto; }

.field__optional { color: var(--gg-ink-muted); font-weight: 400; }
.field__hint { margin: var(--gg-space-2) 0 0; font-size: var(--gg-text-xs); color: var(--gg-ink-muted); }

.alert {
    padding: var(--gg-space-3) var(--gg-space-4);
    margin-bottom: var(--gg-space-4);
    border-radius: var(--gg-radius);
    font-size: var(--gg-text-sm);
    border: 1px solid transparent;
}

.alert--error { background: #fdecea; border-color: #f5c6c0; color: #8a1f14; }
.alert--success { background: var(--gg-green-50); border-color: var(--gg-green-100); color: var(--gg-green-800); }
.alert--warning { background: #fff8e6; border-color: #f0dca8; color: #7a5b00; }

/* -------------------------------------------------------------------------
 * Cart (session cart page)
 * ---------------------------------------------------------------------- */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--gg-space-6); align-items: start; }

.cart__list { display: grid; gap: var(--gg-space-4); }

.cart__row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto auto 2.25rem;
    align-items: center;
    gap: var(--gg-space-4);
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-space-4);
}

.cart__media {
    width: 5rem;
    height: 4rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--gg-ink-50);
    border-radius: var(--gg-radius-sm);
    color: var(--gg-green-700);
}
.cart__media img { width: 100%; height: 100%; object-fit: cover; }
.cart__media .icon { width: 2rem; height: 2rem; }

.cart__name { margin: 0; font-size: var(--gg-text-lg); }
.cart__meta { margin: 0.25rem 0 0; font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }

.cart__qty { display: flex; align-items: center; gap: 0.4rem; }
.cart__qty input { width: 4.25rem; padding: 0.45rem 0.5rem; text-align: center; }

.cart__line { margin: 0; font-family: var(--gg-font-display); font-weight: 700; font-size: var(--gg-text-lg); }

.cart__remove {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--gg-radius-sm);
    background: transparent;
    color: var(--gg-ink-muted);
    cursor: pointer;
}
.cart__remove:hover { background: #f8d7da; color: #842029; }

.cart__summary {
    position: sticky;
    top: calc(var(--gg-header-h) + 1rem);
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-space-5);
}

.cart__summary-title { margin-bottom: var(--gg-space-4); }
.cart__subtotal { display: flex; justify-content: space-between; margin: 0 0 var(--gg-space-3); font-size: var(--gg-text-lg); }
.cart__note { margin: 0 0 var(--gg-space-4); font-size: var(--gg-text-sm); color: var(--gg-ink-muted); }
.cart__summary .button--block { width: 100%; margin-top: var(--gg-space-3); }

@media (max-width: 56rem) {
    .cart { grid-template-columns: 1fr; }
    .cart__summary { position: static; }
    .cart__row { grid-template-columns: 4rem minmax(0, 1fr) auto 2.25rem; }
    .cart__qty { grid-column: 2; }
}

/* -------------------------------------------------------------------------
 * Install prompt (PWA)
 *
 * Small on purpose, and it removes itself after a few seconds — an offer to
 * notice, not a dialog to deal with. It sits above the floating mobile bar
 * rather than over it, and is hidden outright for anyone already running the
 * installed app.
 * ---------------------------------------------------------------------- */
.pwa-toast {
    position: fixed;
    left: 50%;
    bottom: var(--gg-space-5);
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.6rem 0.6rem 0.6rem 0.9rem;
    border-radius: var(--gg-radius-full);
    background: var(--gg-green-950);
    color: #fff;
    box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.5);
    /* Starts below and transparent so it can slide up into place. */
    opacity: 0;
    transform: translate(-50%, 1rem);
    transition: opacity var(--gg-speed) var(--gg-ease), transform var(--gg-speed) var(--gg-ease);
}

.pwa-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.pwa-toast__text {
    font-family: var(--gg-font-display);
    font-size: 0.8125rem;
    line-height: 1.25;
}

.pwa-toast__install {
    flex: none;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: var(--gg-radius-full);
    background: var(--gg-accent);
    color: var(--gg-green-950);
    font-family: var(--gg-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.pwa-toast__close {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.pwa-toast__close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Clear the floating quick-nav rather than landing on top of it. */
@media (max-width: 60rem) {
    .pwa-toast { bottom: calc(var(--gg-mobile-bar-h) + var(--gg-space-3)); }
}

/* Already installed: never draw it at all. */
@media (display-mode: standalone) {
    .pwa-toast { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-toast { transition: none; }
}

/* -------------------------------------------------------------------------
 * Certificate verification (/verify/{code})
 * ---------------------------------------------------------------------- */
.verify-card {
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--gg-space-6);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow);
    text-align: center;
}

.verify-card__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--gg-space-4);
    border-radius: 50%;
}
.verify-card__icon svg { width: 2rem; height: 2rem; }
.verify-card__icon--good { background: #e7f6ec; color: #0a7247; }
.verify-card__icon--bad { background: #fdeaea; color: #c0392b; }
.verify-card__icon--muted { background: var(--gg-surface-alt); color: var(--gg-ink-muted); }

.verify-card__title { margin-bottom: var(--gg-space-2); font-family: var(--gg-font-display); font-size: var(--gg-text-3xl); }
.verify-card__lead { margin: 0 0 var(--gg-space-5); color: var(--gg-ink-muted); }

.verify-card__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-space-3);
    margin: 0;
    text-align: left;
}
.verify-card__facts div { padding: var(--gg-space-3); background: var(--gg-surface-alt); border-radius: var(--gg-radius); }
.verify-card__facts dt { font-size: var(--gg-text-xs); color: var(--gg-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.verify-card__facts dd { margin: 0.25rem 0 0; font-weight: 600; }
.verify-card__facts div:first-child:last-child { grid-column: 1 / -1; }

/* -------------------------------------------------------------------------
 * Product gallery (detail page): primary image + click-to-swap thumbnails
 * ---------------------------------------------------------------------- */
.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--gg-space-3); margin-top: var(--gg-space-3); }
.product-gallery__thumb {
    width: 4.5rem;
    height: 3.375rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--gg-radius);
    overflow: hidden;
    background: var(--gg-surface);
    cursor: pointer;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb.is-active { border-color: var(--gg-accent-strong); }