/* =========================================================
   Tonic details page
   --gin-primary / --gin-secondary come from the tonic's own colours (inline CssVars).
   ========================================================= */

.tonic-page {
    --tp-accent: var(--gin-primary, #c06c9a);
    --tp-accent-2: var(--gin-secondary, #bfd641);
    --tp-ink: #161b26;
    --tp-ink-soft: #4b5563;
    --tp-ink-faint: #7a8291;
    --tp-surface: #ffffff;
    --tp-surface-alt: #f7f8fb;
    --tp-line: rgba(15, 23, 36, .09);
    --tp-shadow: 0 1px 2px rgba(15, 23, 36, .04), 0 18px 44px -30px rgba(15, 23, 36, .30);
    --tp-accent-ink: color-mix(in oklab, var(--tp-accent) 62%, #15171a);
    --tp-accent-wash: color-mix(in oklab, var(--tp-accent) 10%, #fff);
    --tp-star: #f5a623;
    --tp-radius: 20px;

    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem 16px 3rem;
    color: var(--tp-ink);
}

[data-theme="dark"] .tonic-page {
    --tp-ink: #f1edf9;
    --tp-ink-soft: #c9c2d9;
    --tp-ink-faint: #9890ab;
    --tp-surface: #1e2230;
    --tp-surface-alt: #252a3a;
    --tp-line: rgba(255, 255, 255, .10);
    --tp-shadow: 0 18px 44px -30px rgba(0, 0, 0, .7);
    --tp-accent-ink: color-mix(in oklab, var(--tp-accent) 55%, #fff);
    --tp-accent-wash: color-mix(in oklab, var(--tp-accent) 16%, #1e2230);
}

/* ---------- Breadcrumb ---------- */
.tonic-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--tp-ink-faint);
    margin: .25rem 0 1rem;
}

    .tonic-crumbs a {
        color: var(--tp-ink-soft);
        text-decoration: none;
        font-weight: 600;
    }

        .tonic-crumbs a:hover {
            color: var(--tp-accent-ink);
        }

    .tonic-crumbs .fa-chevron-right {
        font-size: .6rem;
        opacity: .6;
    }

    .tonic-crumbs [aria-current] {
        color: var(--tp-ink);
        font-weight: 600;
    }

/* ---------- Hero ---------- */
.tonic-hero {
    display: grid;
    grid-template-columns: minmax(260px, 5fr) 7fr;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    overflow: hidden;
}

.tonic-hero__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(120% 90% at 50% 100%, color-mix(in oklab, var(--tp-accent) 30%, transparent) 0%, transparent 60%),
        linear-gradient(160deg,
            color-mix(in oklab, var(--tp-accent) 14%, var(--tp-surface)) 0%,
            color-mix(in oklab, var(--tp-accent-2) 12%, var(--tp-surface)) 100%);
    isolation: isolate;
}

.tonic-hero__image {
    max-height: 360px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 18px rgba(15, 23, 36, .22));
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.tonic-hero__stage:hover .tonic-hero__image {
    transform: translateY(-6px) rotate(-1.5deg);
}

.tonic-hero__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.25rem 2.5rem;
    min-width: 0;
}

.tonic-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.tonic-eyebrow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--tp-accent-wash);
    color: var(--tp-accent-ink);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tonic-eyebrow__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

.tonic-admin-edit {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tp-ink-soft);
    background: transparent;
    border: 1px dashed var(--tp-line);
    border-radius: 999px;
    cursor: pointer;
}

    .tonic-admin-edit:hover {
        color: var(--tp-ink);
        border-color: var(--tp-accent);
    }

.tonic-title {
    margin: 0;
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--tp-ink);
    overflow-wrap: anywhere;
}

.tonic-brand {
    margin: -.5rem 0 0;
    font-size: 1rem;
    color: var(--tp-ink-soft);
}

    .tonic-brand strong {
        color: var(--tp-ink);
    }

.tonic-lead {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--tp-ink-soft);
    max-width: 60ch;
}

.tonic-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tonic-facts:empty {
        display: none;
    }

    .tonic-facts li {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .4rem .8rem;
        border-radius: 10px;
        background: var(--tp-surface-alt);
        border: 1px solid var(--tp-line);
        font-size: .85rem;
        font-weight: 600;
        color: var(--tp-ink);
    }

        .tonic-facts li i {
            color: var(--tp-accent-ink);
            font-size: .85rem;
        }

/* ---------- Rating ---------- */
.tonic-rating {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.1rem;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    background: var(--tp-surface-alt);
    border: 1px solid var(--tp-line);
}

.tonic-rating__community {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1.1rem;
    border-right: 1px solid var(--tp-line);
    min-width: 84px;
}

.tonic-rating__score {
    line-height: 1;
    font-weight: 800;
    color: var(--tp-ink);
}

.tonic-rating__value {
    font-size: 2.2rem;
    letter-spacing: -.03em;
}

.tonic-rating__max {
    font-size: .95rem;
    color: var(--tp-ink-faint);
    margin-left: 2px;
}

.tonic-rating__score--empty {
    font-size: 1.8rem;
    color: var(--tp-ink-faint);
}

.tonic-rating__caption {
    margin-top: .35rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tp-ink-faint);
    white-space: nowrap;
}

    .tonic-rating__caption .fa-star {
        color: var(--tp-star);
    }

.tonic-rating__mine {
    min-width: 0;
}

.tonic-rating__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tp-ink-soft);
    margin-bottom: .35rem;
}

.tonic-rating__badge {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink);
    font-size: .75rem;
    letter-spacing: 0;
}

.tonic-stars {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
}

.tonic-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: color-mix(in oklab, var(--tp-ink-faint) 70%, transparent);
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform .12s ease, color .12s ease, background .12s ease;
}

    .tonic-star:hover {
        transform: scale(1.15);
        color: var(--tp-star);
    }

    .tonic-star:focus-visible {
        outline: 2px solid var(--tp-accent);
        outline-offset: 1px;
    }

    .tonic-star.is-filled {
        color: var(--tp-star);
    }

    .tonic-star:disabled {
        cursor: progress;
        opacity: .6;
    }

/* hover preview: light up every star up to the hovered one */
.tonic-stars:hover .tonic-star {
    color: var(--tp-star);
}

    .tonic-stars:hover .tonic-star:hover ~ .tonic-star {
        color: color-mix(in oklab, var(--tp-ink-faint) 70%, transparent);
    }

/* ---------- Buttons ---------- */
.tonic-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

    .tonic-cta:empty {
        display: none;
    }

.tonic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border-radius: 12px;
    border: 1px solid var(--tp-line);
    background: var(--tp-surface);
    color: var(--tp-ink);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .tonic-btn:hover {
        color: var(--tp-ink);
        border-color: color-mix(in oklab, var(--tp-accent) 50%, var(--tp-line));
        transform: translateY(-1px);
        box-shadow: 0 10px 22px -16px rgba(15, 23, 36, .5);
    }

.tonic-btn--primary {
    background: var(--tp-ink);
    border-color: var(--tp-ink);
    color: var(--tp-surface);
}

    .tonic-btn--primary:hover {
        color: var(--tp-surface);
        border-color: var(--tp-ink);
    }

.tonic-btn--block {
    width: 100%;
}

/* ---------- Content layout ---------- */
.tonic-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
    align-items: start;
}

.tonic-main,
.tonic-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.tonic-side {
    position: sticky;
    top: 1rem;
}

.tonic-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    padding: 1.5rem 1.6rem;
}

.tonic-card__title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tp-ink);
}

.tonic-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--tp-accent-wash);
    color: var(--tp-accent-ink);
    font-size: .85rem;
}

.tonic-prose p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--tp-ink-soft);
    max-width: 70ch;
}

    .tonic-prose p:last-child {
        margin-bottom: 0;
    }

.tonic-empty {
    margin: 0;
    font-size: .92rem;
    font-style: italic;
    color: var(--tp-ink-faint);
}

/* ---------- Ingredients / advices ---------- */
.tonic-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tonic-ingredients li {
        padding: .4rem .85rem;
        border-radius: 999px;
        background: var(--tp-accent-wash);
        border: 1px solid color-mix(in oklab, var(--tp-accent) 22%, transparent);
        color: var(--tp-ink);
        font-size: .88rem;
        font-weight: 600;
    }

.tonic-advices {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}

    .tonic-advices li {
        position: relative;
        padding: .75rem 1rem .75rem 2.4rem;
        border-radius: 12px;
        background: var(--tp-surface-alt);
        color: var(--tp-ink-soft);
        line-height: 1.6;
    }

        .tonic-advices li::before {
            content: "";
            position: absolute;
            left: 1rem;
            top: 1.25rem;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--tp-accent);
        }

/* ---------- Specs ---------- */
.tonic-specs {
    margin: 0;
}

    .tonic-specs > div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .6rem 0;
        border-bottom: 1px solid var(--tp-line);
    }

        .tonic-specs > div:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .tonic-specs > div:first-child {
            padding-top: 0;
        }

    .tonic-specs dt {
        font-size: .85rem;
        font-weight: 500;
        color: var(--tp-ink-faint);
    }

    .tonic-specs dd {
        margin: 0;
        font-size: .92rem;
        font-weight: 700;
        color: var(--tp-ink);
        text-align: right;
    }

/* ---------- Shops ---------- */
.tonic-shops {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

    .tonic-shops a {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .65rem .8rem;
        border-radius: 12px;
        border: 1px solid var(--tp-line);
        color: var(--tp-ink);
        font-weight: 700;
        text-decoration: none;
        transition: border-color .15s ease, background .15s ease;
    }

        .tonic-shops a:hover {
            border-color: color-mix(in oklab, var(--tp-accent) 50%, var(--tp-line));
            background: var(--tp-surface-alt);
            color: var(--tp-ink);
        }

.tonic-shops__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--tp-accent-wash);
    color: var(--tp-accent-ink);
    font-size: .8rem;
}

.tonic-shops__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tonic-shops__go {
    font-size: .75rem;
    color: var(--tp-ink-faint);
}

/* ---------- Related gins ---------- */
.tonic-gins {
    margin-top: 1.25rem;
}

.tonic-gins__count {
    margin-left: auto;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--tp-surface-alt);
    color: var(--tp-ink-faint);
    font-size: .75rem;
    font-weight: 700;
}

.tonic-gins__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.tonic-gin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1rem .6rem .85rem;
    border-radius: 16px;
    background: var(--tp-surface-alt);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink);
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .tonic-gin-card:hover,
    .tonic-gin-card:focus-visible {
        color: var(--tp-ink);
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--tp-accent) 45%, var(--tp-line));
        box-shadow: 0 14px 28px -18px rgba(15, 23, 36, .55);
        outline: none;
    }

.tonic-gin-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: 100%;
}

    .tonic-gin-card__thumb img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

.tonic-gin-card__name {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tonic-back {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .tonic-hero {
        grid-template-columns: 1fr;
    }

    .tonic-hero__stage {
        min-height: 300px;
        padding: 2rem 1rem;
    }

    .tonic-hero__image {
        max-height: 260px;
    }

    .tonic-hero__info {
        padding: 1.5rem 1.25rem 1.75rem;
    }

    .tonic-layout {
        grid-template-columns: 1fr;
    }

    .tonic-side {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .tonic-rating {
        grid-template-columns: 1fr;
        gap: .9rem;
    }

    .tonic-rating__community {
        flex-direction: row;
        align-items: baseline;
        gap: .75rem;
        padding: 0 0 .9rem;
        border-right: 0;
        border-bottom: 1px solid var(--tp-line);
    }

    /* the 10 stars share the available width so they always stay on one row */
    .tonic-star {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 30px;
        height: 28px;
        font-size: .95rem;
    }

    .tonic-card {
        padding: 1.25rem 1.1rem;
    }

    .tonic-cta .tonic-btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tonic-hero__image,
    .tonic-btn,
    .tonic-star,
    .tonic-gin-card {
        transition: none;
    }
}