/* ============================================================
   JINRO — COCKTAIL RECIPE SYSTEM (cocktail.html + cocktail-detail.html)

   Not a new design system: reuses foundation.css tokens (--jr-*),
   components.css primitives (.jr-section-shell, .jr-focus-ring, the
   .jr-focus-ring), same as products.html/enjoy.html/news.html. The card/
   typography/CTA language mirrors enjoy.css's
   .enjoy-recipe-card family so List ↔ Detail read as one system.
   Everything here is scoped under .cocktail-page / .cocktail-detail-page
   so it can never leak onto TOP/Products/Product Detail/ENJOY/NEWS.
   ============================================================ */

/* ---- Shared content axis (List + Detail) — reuses the exact same
   formula as TOP's .top-products__inner / .jr-section-shell (1440px
   box cap, clamp(24px, 5.56vw, 80px) gutter at tablet+desktop, 20px
   gutter at mobile) so recipe cards land on TOP's card width, not a
   page-local one. See card unification pass — cocktail/products/TOP
   card grids now all share this axis instead of three separate
   gutter systems. ---- */
.cocktail-page .cocktail-container,
.cocktail-detail-page .cocktail-container,
.cooking-page .cocktail-container,
.cooking-detail-page .cocktail-container {
    box-sizing: border-box;
    width: calc(100% - (var(--jr-gutter-mobile) * 2));
    margin-inline: auto;
}

@media (min-width: 768px) {
    .cocktail-page .cocktail-container,
    .cocktail-detail-page .cocktail-container,
    .cooking-page .cocktail-container,
    .cooking-detail-page .cocktail-container {
        width: 100%;
        max-width: var(--jr-container-wide);
        padding-inline: clamp(24px, 5.56vw, var(--jr-gutter-pc));
    }
}

/* ---- Shared section heading (PICK UP / Result Header title) ------- */

/* ============================================================
   Neither page has a hero band under the fixed header, so — same
   reasoning as product-detail.css — the header is pinned to its solid
   look here instead of the transparent-over-dark-hero state.
   ============================================================ */
.cocktail-page [data-jr-header],
.cocktail-detail-page [data-jr-header],
.cooking-page [data-jr-header],
.cooking-detail-page [data-jr-header] {
    color: var(--jr-color-ink) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

/* ---- Product Filter — now sits between the COCKTAIL RECIPES header and
   the grid (moved from the page top); margin-top reuses the same 32px
   heading-to-content gap already used elsewhere on this page (e.g.
   .cocktail-pickup-grid, .cocktail-grid), so no new spacing value. */
.cocktail-page .cocktail-filter,
.cooking-page .cocktail-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.cocktail-page .cocktail-filter__chip,
.cooking-page .cocktail-filter__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 6px 22px 6px 6px;
    color: var(--jr-color-muted);
    background: #fff;
    border: 1px solid var(--jr-color-line);
    border-radius: 999px;
    font-size: 18px;
    font-weight: var(--jr-button-font-weight);
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--jr-duration-base) var(--jr-ease-standard),
                border-color var(--jr-duration-base) var(--jr-ease-standard);
}

.cocktail-page .cocktail-filter__chip--all,
.cooking-page .cocktail-filter__chip--all {
    padding: 0 24px;
    min-height: 44px;
}

.cocktail-page .cocktail-filter__bottle,
.cooking-page .cocktail-filter__bottle {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--jr-color-surface-soft);
    border-radius: 50%;
}

.cocktail-page .cocktail-filter__chip:hover,
.cooking-page .cocktail-filter__chip:hover {
    color: var(--jr-color-ink);
    border-color: var(--jr-color-red);
}

.cocktail-page .cocktail-filter__chip.is-active,
.cooking-page .cocktail-filter__chip.is-active {
    color: var(--jr-color-ink);
    border-color: var(--jr-color-ink);
    font-weight: 700;
}

.cocktail-page .cocktail-filter__chip--all.is-active,
.cooking-page .cocktail-filter__chip--all.is-active {
    color: var(--jr-color-red);
    border-color: var(--jr-color-red);
}

.cocktail-page .cocktail-filter__chip:focus-visible,
.cooking-page .cocktail-filter__chip:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

/* ---- Recipe Card family (List Grid + PICK UP share this) ----------- */
.cocktail-page .cocktail-card,
.cooking-page .cocktail-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.cocktail-page .cocktail-card__media,
.cooking-page .cocktail-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--jr-color-surface-soft);
}

.cocktail-page .cocktail-card__media img,
.cooking-page .cocktail-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--jr-duration-base) var(--jr-ease-standard);
}

.cocktail-page .cocktail-card:hover .cocktail-card__media img,
.cocktail-page .cocktail-card:focus-visible .cocktail-card__media img,
.cooking-page .cocktail-card:hover .cocktail-card__media img,
.cooking-page .cocktail-card:focus-visible .cocktail-card__media img {
    transform: scale(1.035);
}

.cocktail-page .cocktail-card:focus-visible,
.cooking-page .cocktail-card:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 4px;
    border-radius: 16px;
}

.cocktail-page .cocktail-card__label,
.cooking-page .cocktail-card__label {
    margin: 16px 0 0;
    color: var(--jr-color-red);
    font-size: var(--jr-card-label-size);
    font-weight: var(--jr-card-label-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cocktail-page .cocktail-card__name,
.cooking-page .cocktail-card__name {
    margin: 12px 0 0;
    color: var(--jr-color-ink);
    font-size: var(--jr-card-title-size);
    font-weight: var(--jr-card-title-weight);
    letter-spacing: -0.015em;
    line-height: var(--jr-card-title-line-height);
}

.cocktail-page .cocktail-card__desc,
.cooking-page .cocktail-card__desc {
    margin: 10px 0 0;
    color: var(--jr-color-muted);
    font-size: var(--jr-card-desc-size);
    font-weight: var(--jr-card-desc-weight);
    line-height: var(--jr-card-desc-line-height);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* PICK UP おすすめクッキングレシピ cards only: show the full description
   instead of clamping to 2 lines + ellipsis. Scoped to
   .cocktail-card--pickup so cocktail.html's own PICK UP cards and the
   cooking.html COOKING RECIPES list grid (which doesn't use this
   modifier) keep the clamp behavior unchanged. */
.cooking-page .cocktail-card--pickup .cocktail-card__desc {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
}

/* ============================================================
   Recipe Search — ONE component shared by cocktail.html and
   cooking.html. It sits inside .cocktail-container at the top of the
   PICK UP section, so it inherits the page's existing content axis and
   needs no width/gutter rules of its own. Behaviour lives in
   assets/js/cocktail.js, the same file that already owns the product
   filter, so the two conditions combine there rather than in a second
   renderer.

   Deliberately an input, not a pill: 8px radius (recruit.css's control
   radius), a hairline border and no shadow, so it never reads as one of
   the site's 999px pill CTAs.
   ============================================================ */
.cocktail-page .recipe-search,
.cooking-page .recipe-search {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    /* No max-width: the field spans .cocktail-container, so its left and
       right edges land exactly on the recipe grid's outer columns at every
       breakpoint. The container already supplies the page gutter — this
       must never be widened to the viewport. */
    width: 100%;
    height: 56px;
    margin: 0 0 64px;
    padding: 0 8px 0 18px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    transition: border-color var(--jr-duration-base) var(--jr-ease-standard);
}

.cocktail-page .recipe-search:focus-within,
.cooking-page .recipe-search:focus-within {
    border-color: var(--jr-color-red);
}

.cocktail-page .recipe-search__icon,
.cooking-page .recipe-search__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--jr-color-muted);
}

.cocktail-page .recipe-search__icon svg,
.cooking-page .recipe-search__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.cocktail-page .recipe-search__input,
.cooking-page .recipe-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: var(--jr-color-ink);
    background: none;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 16px;
}

.cocktail-page .recipe-search__input::placeholder,
.cooking-page .recipe-search__input::placeholder {
    color: var(--jr-color-muted);
}

/* The component draws its own clear button, so suppress the engine's. */
.cocktail-page .recipe-search__input::-webkit-search-decoration,
.cocktail-page .recipe-search__input::-webkit-search-cancel-button,
.cooking-page .recipe-search__input::-webkit-search-decoration,
.cooking-page .recipe-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* 44px touch target; the visible glyph is smaller. */
.cocktail-page .recipe-search__clear,
.cooking-page .recipe-search__clear {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--jr-color-muted);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: color var(--jr-duration-base) var(--jr-ease-standard);
}

.cocktail-page .recipe-search__clear svg,
.cooking-page .recipe-search__clear svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.cocktail-page .recipe-search__clear:hover,
.cooking-page .recipe-search__clear:hover {
    color: var(--jr-color-ink);
}

.cocktail-page .recipe-search__clear:focus-visible,
.cooking-page .recipe-search__clear:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .cocktail-page .recipe-search,
    .cooking-page .recipe-search {
        height: 54px;
        margin-bottom: 28px;
        padding-left: 14px;
    }

    .cocktail-page .recipe-search__input,
    .cooking-page .recipe-search__input {
        /* >=16px so iOS Safari does not zoom the page on focus. */
        font-size: 16px;
    }
}

/* ============================================================
   PICK UP / Recommended Recipes — .recipe-pickup

   ONE component for both list pages; cocktail.html and cooking.html
   differ only by the --cocktail / --cooking theme modifier (a tint) and
   their own copy. Grid, card, typography and spacing are identical.

   Hierarchy the block is built around:
     title (.jr-section-title, unchanged shared token)
     rule + crown  ─── ♛ ───
     PICK UP       (JINRO Red, uppercase)
     one line of supporting copy
     .recipe-pickup__frame  — groups all four recipes on one tinted
                              surface (no outline), so they read as one
                              recommendation rather than four loose cards

   The frame sits inside .cocktail-container, so its left/right edges land
   on the same axis as the Recipe Search above it and the recipe list
   below — no new max-width is introduced anywhere on the page.
   ============================================================ */
/* Top padding is scoped to this section only — the shared
   --jr-section-space-y token is untouched. */
.cocktail-page .cocktail-pickup,
.cooking-page .cocktail-pickup {
    padding: 80px 0 0;
}

.cocktail-page .cocktail-pickup__title,
.cooking-page .cocktail-pickup__title {
    color: var(--jr-color-ink);
    text-align: center;
}

/* Mobile: 33px titles such as おすすめクッキングレシピ wrapped as レシ / ピ. */
@media (max-width: 767px) {
    .cocktail-page .cocktail-pickup__title,
    .cooking-page .cocktail-pickup__title {
        word-break: auto-phrase;
        text-wrap: balance;
    }
}

/* ---- Eyebrow: rule + crown, PICK UP, supporting copy ---- */
.recipe-pickup__eyebrow {
    margin-top: clamp(20px, 2vw, 28px);
    text-align: center;
}

/* The rule is drawn as two borders on the flex line either side of the
   crown, so it needs no extra elements and scales with the container. */
.recipe-pickup__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 320px;
    margin: 0 auto;
}

.recipe-pickup__rule::before,
.recipe-pickup__rule::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--jr-color-red);
    opacity: 0.55;
}

.recipe-pickup__crown {
    flex: none;
    width: 22px;
    height: 22px;
    fill: var(--jr-color-red);
}

.recipe-pickup__label {
    margin: 8px 0 0;
    color: var(--jr-color-red);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.recipe-pickup__lead {
    margin: 8px 0 0;
    color: var(--jr-color-ink);
    font-size: var(--jr-content-body-size);
    font-weight: 500;
    line-height: var(--jr-content-body-line-height);
}

/* ---- The framed group ---- */
/* No outline: the recommendations sit on their tint rather than inside a
   red box. border-radius stays because it still shapes that background;
   padding, grid, gaps and card sizing are unchanged. */
.recipe-pickup__frame {
    margin-top: 80px;
    padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
    border: 0;
    border-radius: 16px;
}

/* Theme = a barely-there tint that separates the recommendation from the
   plain list below it. No background image, no strong gradient. */
.recipe-pickup--cocktail .recipe-pickup__frame { background: #fffafb; }
.recipe-pickup--cooking .recipe-pickup__frame { background: #fffcf7; }

/* Grid sits inside the frame; the row gap drops from the old 80px
   because the frame's own padding now provides the outer breathing room. */
.cocktail-page .cocktail-pickup-grid,
.cooking-page .cocktail-pickup-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    margin-top: 0;
}

/* Recommendation cards stay OPEN — image, label, title, description on
   the frame's surface. The frame is the only box; a per-card panel,
   border or shadow would turn these back into product tiles. Titles and
   descriptions are capped at two lines so the four columns keep an even
   visual height without touching the recipe data. */
.recipe-pickup__frame .cocktail-card__name,
.recipe-pickup__frame .cocktail-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ---- Result Header + Grid --------------------------------------------- */
.cocktail-page .cocktail-result-header,
.cooking-page .cocktail-result-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 80px;
    padding-bottom: 20px;
}

.cocktail-page .cocktail-result-header__title,
.cooking-page .cocktail-result-header__title {
    color: var(--jr-color-ink);
}

/* Cocktail List page title — deliberately excluded from the shared
   .jr-section-title system (Products/Enjoy/TOP/PICK UP おすすめカクテル
   still use that). This is its own component-scoped token. */
.cocktail-page .cocktail-list-title,
.cooking-page .cocktail-list-title {
    margin: 0;
    font-size: var(--jr-cocktail-list-title-size);
    font-weight: var(--jr-cocktail-list-title-weight);
    line-height: var(--jr-cocktail-list-title-line-height);
}

.cocktail-page .cocktail-result-header__count,
.cooking-page .cocktail-result-header__count {
    margin: 0;
    color: var(--jr-color-muted);
    font-size: 16px;
}

.cocktail-page .cocktail-result-header__count strong,
.cooking-page .cocktail-result-header__count strong {
    color: var(--jr-color-ink);
    font-weight: 700;
}

.cocktail-page .cocktail-grid,
.cooking-page .cocktail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 80px 24px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

/* .recipe-fav-shell is the grid item once a card has a favourite heart
   (assets/js/recipe-favorites.js), so the filter/search hidden state has
   to collapse it too — [hidden] alone loses to the shell's display:flex. */
.cocktail-page .cocktail-grid[hidden],
.cocktail-page .cocktail-card[hidden],
.cocktail-page .recipe-fav-shell[hidden],
.cooking-page .cocktail-grid[hidden],
.cooking-page .cocktail-card[hidden],
.cooking-page .recipe-fav-shell[hidden] {
    display: none;
}

.cocktail-page .cocktail-grid__empty,
.cooking-page .cocktail-grid__empty {
    grid-column: 1 / -1;
    padding: 64px 0;
    color: var(--jr-color-muted);
    font-size: 16px;
    text-align: center;
}

/* ---- Pagination --------------------------------------------------------- */
.cocktail-page .cocktail-pagination,
.cooking-page .cocktail-pagination,
.news-page .cocktail-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
    padding-bottom: var(--jr-section-space-y);
}

.cocktail-page .cocktail-pagination__list,
.cooking-page .cocktail-pagination__list,
.news-page .cocktail-pagination__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cocktail-page .cocktail-pagination__arrow,
.cocktail-page .cocktail-pagination__page,
.cooking-page .cocktail-pagination__arrow,
.cooking-page .cocktail-pagination__page,
.news-page .cocktail-pagination__arrow,
.news-page .cocktail-pagination__page {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--jr-color-ink);
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 15px;
    font-weight: var(--jr-button-font-weight);
    cursor: pointer;
    transition: background var(--jr-duration-base) var(--jr-ease-standard),
                color var(--jr-duration-base) var(--jr-ease-standard),
                border-color var(--jr-duration-base) var(--jr-ease-standard);
}

/* Prev/Next get a light circular border so they read as controls even
   when not hovered/disabled — number pills stay borderless, matching
   the "current page" fill being the only pill with a visible edge. */
.cocktail-page .cocktail-pagination__arrow,
.cooking-page .cocktail-pagination__arrow,
.news-page .cocktail-pagination__arrow {
    border: 1px solid var(--jr-color-line);
}

.cocktail-page .cocktail-pagination__arrow-icon,
.cooking-page .cocktail-pagination__arrow-icon,
.news-page .cocktail-pagination__arrow-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cocktail-page .cocktail-pagination__ellipsis,
.cooking-page .cocktail-pagination__ellipsis,
.news-page .cocktail-pagination__ellipsis {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jr-color-muted);
}

.cocktail-page .cocktail-pagination__page:hover,
.cocktail-page .cocktail-pagination__arrow:not(:disabled):hover,
.cooking-page .cocktail-pagination__page:hover,
.cooking-page .cocktail-pagination__arrow:not(:disabled):hover,
.news-page .cocktail-pagination__page:hover,
.news-page .cocktail-pagination__arrow:not(:disabled):hover {
    color: var(--jr-color-red);
}

.cocktail-page .cocktail-pagination__arrow:not(:disabled):hover,
.cooking-page .cocktail-pagination__arrow:not(:disabled):hover,
.news-page .cocktail-pagination__arrow:not(:disabled):hover {
    border-color: var(--jr-color-red);
}

.cocktail-page .cocktail-pagination__page.is-active,
.cooking-page .cocktail-pagination__page.is-active,
.news-page .cocktail-pagination__page.is-active {
    color: #fff;
    background: #121212;
}

.cocktail-page .cocktail-pagination__page.is-active:hover,
.cooking-page .cocktail-pagination__page.is-active:hover,
.news-page .cocktail-pagination__page.is-active:hover {
    color: #fff;
}

.cocktail-page .cocktail-pagination__arrow:disabled,
.cooking-page .cocktail-pagination__arrow:disabled,
.news-page .cocktail-pagination__arrow:disabled {
    color: var(--jr-color-muted);
    border-color: var(--jr-color-line);
    cursor: default;
    background: none;
}

.cocktail-page .cocktail-pagination__arrow:focus-visible,
.cocktail-page .cocktail-pagination__page:focus-visible,
.cooking-page .cocktail-pagination__arrow:focus-visible,
.cooking-page .cocktail-pagination__page:focus-visible,
.news-page .cocktail-pagination__arrow:focus-visible,
.news-page .cocktail-pagination__page:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

/* ============================================================
   DETAIL
   ============================================================ */
.cocktail-detail-page .cocktail-detail,
.cooking-detail-page .cocktail-detail {
    padding: 56px 0 var(--jr-section-space-y);
}

/* PC/Tablet: two grid-template-areas columns — "visual" (image + CTA,
   one sticky unit) and "info" (label/title/desc/ingredients/steps).
   No align-items override: grid items default to stretch, so the
   shorter "visual" column's cell is as tall as "info", giving the
   sticky wrapper room to travel — align-self:start on the wrapper
   itself keeps its own box sized to its content instead of stretching. */
.cocktail-detail-page .cocktail-detail__grid,
.cooking-detail-page .cocktail-detail__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: "visual info";
    gap: 64px;
}

.cocktail-detail-page .cocktail-detail__visual-sticky,
.cooking-detail-page .cocktail-detail__visual-sticky {
    grid-area: visual;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-self: start;
    position: sticky;
    top: 120px;
}

.cocktail-detail-page .cocktail-detail__media,
.cooking-detail-page .cocktail-detail__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--jr-color-surface-soft);
}

.cocktail-detail-page .cocktail-detail__media img,
.cooking-detail-page .cocktail-detail__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cocktail-detail-page .cocktail-detail__info,
.cooking-detail-page .cocktail-detail__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.cocktail-detail-page .cocktail-detail__label,
.cooking-detail-page .cocktail-detail__label {
    margin: 0;
    color: var(--jr-color-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Title + favourite on one row. The heart is flex:none and the title
   takes the remaining space, so a long title wraps within its own column
   instead of pushing the heart out of the container. align-items:start
   keeps the heart on the title's FIRST line at every width — on Mobile a
   wrapped title grows downward and the heart stays put beside line one,
   never squeezed into the text. */
.cocktail-detail-page .cocktail-detail__titlerow,
.cooking-detail-page .cocktail-detail__titlerow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cocktail-detail-page .cocktail-detail__titlerow .cocktail-detail__title,
.cooking-detail-page .cocktail-detail__titlerow .cocktail-detail__title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nudges the 44px button box so the drawn heart optically aligns with
   the title's cap height rather than sitting low. */
.cocktail-detail-page .cocktail-detail__fav,
.cooking-detail-page .cocktail-detail__fav {
    flex: none;
    display: flex;
    margin-top: 6px;
}

.cocktail-detail-page .cocktail-detail__title,
.cooking-detail-page .cocktail-detail__title {
    margin: 10px 0 0;
    color: var(--jr-color-ink);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.cocktail-detail-page .cocktail-detail__desc,
.cooking-detail-page .cocktail-detail__desc {
    margin: 20px 0 0;
    color: var(--jr-color-text);
    font-size: var(--jr-content-body-size);
    line-height: var(--jr-content-body-line-height);
}

/* ---- Ingredients / 材料 ------------------------------------------------- */
.cocktail-detail-page .cocktail-ingredients,
.cooking-detail-page .cocktail-ingredients {
    margin-top: 40px;
    padding-top: 32px;
}

.cocktail-detail-page .cocktail-ingredients__heading,
.cooking-detail-page .cocktail-ingredients__heading,
.cocktail-detail-page .cocktail-steps__heading,
.cooking-detail-page .cocktail-steps__heading {
    margin: 0 0 16px;
    color: var(--jr-color-ink);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

.cocktail-detail-page .cocktail-steps__heading,
.cooking-detail-page .cocktail-steps__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 32px;
}

.cocktail-detail-page .cocktail-steps__heading-icon,
.cooking-detail-page .cocktail-steps__heading-icon {
    flex: none;
    width: 40px;
    height: 40px;
}

.cocktail-detail-page .cocktail-ingredients__serving,
.cooking-detail-page .cocktail-ingredients__serving {
    margin: -8px 0 16px;
    color: var(--jr-color-muted);
    font-size: 14px;
    font-weight: 500;
}

.cocktail-detail-page .cocktail-ingredients__list,
.cooking-detail-page .cocktail-ingredients__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--jr-color-line);
}

.cocktail-detail-page .cocktail-ingredients__list > div,
.cooking-detail-page .cocktail-ingredients__list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--jr-color-line);
}

.cocktail-detail-page .cocktail-ingredients__list dt,
.cooking-detail-page .cocktail-ingredients__list dt {
    margin: 0;
    color: var(--jr-color-ink);
    font-size: 15px;
    font-weight: 500;
}

.cocktail-detail-page .cocktail-ingredients__list dd,
.cooking-detail-page .cocktail-ingredients__list dd {
    margin: 0;
    color: var(--jr-color-muted);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- 作り方 / Steps — now flows inside .cocktail-detail__info, directly
   under 材料, instead of its own full-width section below; no divider
   line above it anymore (only var(--jr-color-line) row dividers inside
   .cocktail-ingredients__list are kept). ------------------------------ */
.cocktail-detail-page .cocktail-steps-section,
.cooking-detail-page .cocktail-steps-section {
    margin-top: 56px;
}

/* Single column: .cocktail-steps now lives inside the narrower ~0.9fr
   right column (previously a full-width section), so the 2-up card
   layout no longer has room — same card design, stacked instead. */
.cocktail-detail-page .cocktail-steps,
.cooking-detail-page .cocktail-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cocktail-detail-page .cocktail-steps__item,
.cooking-detail-page .cocktail-steps__item {
    display: flex;
    gap: 20px;
    padding: 28px 24px;
    background: var(--jr-color-surface-soft);
    border-radius: 16px;
}

.cocktail-detail-page .cocktail-steps__number,
.cooking-detail-page .cocktail-steps__number {
    flex: none;
    color: var(--jr-color-red);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cocktail-detail-page .cocktail-steps__text,
.cooking-detail-page .cocktail-steps__text {
    margin: 6px 0 0;
    color: var(--jr-color-text);
    font-size: var(--jr-content-supporting-size);
    line-height: var(--jr-content-supporting-line-height);
}

/* ---- Back CTA — reuses the shared outline pill CTA button exactly as
   declared in enjoy.css (.enjoy-page .enjoy-cta-link: white bg, 1.2px ink
   outline, 999px pill, centered text, chevron, ink-fill hover). Same
   values, scoped to this page since cocktail-detail.html doesn't load
   enjoy.css — not a new button design. */
.cocktail-detail-page .cocktail-back-cta,
.cooking-detail-page .cocktail-back-cta {
    display: flex;
    justify-content: center;
}

.cocktail-detail-page .enjoy-cta-link,
.cooking-detail-page .enjoy-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 56px;
    padding: 0 28px;
    color: var(--jr-color-ink);
    border: 1.2px solid var(--jr-color-ink);
    border-radius: 999px;
    font-size: 16px;
    font-weight: var(--jr-button-font-weight);
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--jr-duration-base) var(--jr-ease-standard),
                background var(--jr-duration-base) var(--jr-ease-standard);
}

.cocktail-detail-page .enjoy-cta-link:hover,
.cooking-detail-page .enjoy-cta-link:hover,
.cocktail-detail-page .enjoy-cta-link:focus-visible,
.cooking-detail-page .enjoy-cta-link:focus-visible {
    color: #fff;
    background: var(--jr-color-ink);
}

.cocktail-detail-page .enjoy-cta-link svg,
.cooking-detail-page .enjoy-cta-link svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Pairing ("料理に合うお酒") — Cooking-only content block, absent from
   Cocktail Detail. Reuses the shared ingredients/steps heading typography
   (same margin/font-size/weight) rather than a new heading style, and a
   minimal pill-link item styled from existing tokens (matches the bottle
   circle already used by .cocktail-filter__bottle) instead of a new
   product/link component. */
.cocktail-detail-page .cocktail-pairing,
.cooking-detail-page .cocktail-pairing {
    margin-top: 56px;
}

.cocktail-detail-page .cocktail-pairing__list,
.cooking-detail-page .cocktail-pairing__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cocktail-detail-page .cocktail-pairing__item,
.cooking-detail-page .cocktail-pairing__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 22px 8px 8px;
    color: var(--jr-color-ink);
    text-decoration: none;
    border: 1px solid var(--jr-color-line);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: color var(--jr-duration-base) var(--jr-ease-standard),
                border-color var(--jr-duration-base) var(--jr-ease-standard);
}

.cocktail-detail-page .cocktail-pairing__item:hover,
.cocktail-detail-page .cocktail-pairing__item:focus-visible,
.cooking-detail-page .cocktail-pairing__item:hover,
.cooking-detail-page .cocktail-pairing__item:focus-visible {
    color: var(--jr-color-red);
    border-color: var(--jr-color-red);
}

.cocktail-detail-page .cocktail-pairing__bottle,
.cooking-detail-page .cocktail-pairing__bottle {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--jr-color-surface-soft);
    border-radius: 50%;
}

/* ============================================================
   Tablet (768–1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 2x2 inside one frame at this width — not 3-up, which would leave
       a single orphan card on the second row. */
    .cocktail-page .cocktail-pickup-grid,
    .cooking-page .cocktail-pickup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .cocktail-page .cocktail-grid,
    .cooking-page .cocktail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 20px; }

    .cocktail-detail-page .cocktail-detail__grid,
    .cooking-detail-page .cocktail-detail__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .cocktail-detail-page .cocktail-detail__title,
    .cooking-detail-page .cocktail-detail__title { font-size: 32px; }
    /* Header is 64px tall at this breakpoint (see components.css
       .jr-site-header --jr-header-height), same +24px breathing room. */
    .cocktail-detail-page .cocktail-detail__visual-sticky,
    .cooking-detail-page .cocktail-detail__visual-sticky { top: 88px; }
}

/* ============================================================
   Mobile (max 767px)
   ============================================================ */
@media (max-width: 767px) {
    .cocktail-page .cocktail-filter,
    .cooking-page .cocktail-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--jr-gutter-mobile) * -1);
        padding-inline: var(--jr-gutter-mobile);
    }

    .cocktail-page .cocktail-filter::-webkit-scrollbar,
    .cooking-page .cocktail-filter::-webkit-scrollbar { display: none; }

    /* Mobile keeps the same 2x2 in one frame — never a carousel. */
    .cocktail-page .cocktail-pickup-grid,
    .cooking-page .cocktail-pickup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }

    .recipe-pickup__frame { padding: 20px 14px; border-radius: 14px; }
    .recipe-pickup__label { font-size: 16px; }
    .recipe-pickup__rule { max-width: 220px; }
    .recipe-pickup__crown { width: 19px; height: 19px; }
    .cocktail-page .cocktail-grid,
    .cooking-page .cocktail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }

    .cocktail-page .cocktail-card__desc,
    .cooking-page .cocktail-card__desc { -webkit-line-clamp: 2; }

    .cooking-page .cocktail-card--pickup .cocktail-card__desc {
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        overflow: visible;
    }

    .cocktail-page .cocktail-result-header,
    .cooking-page .cocktail-result-header { margin-top: 56px; }

    /* Sticky off: dissolve the wrapper (display:contents) so its two
       children (image, CTA) rejoin .cocktail-detail__grid as independent
       items, then place all three top-level items — media / info / cta —
       in that exact reading order via grid-template-areas. Pure CSS
       reordering; the DOM itself is untouched. */
    .cocktail-detail-page .cocktail-detail__grid,
    .cooking-detail-page .cocktail-detail__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "info" "cta";
        gap: 40px;
    }
    .cocktail-detail-page .cocktail-detail__visual-sticky,
    .cooking-detail-page .cocktail-detail__visual-sticky {
        display: contents;
        position: static;
    }
    .cocktail-detail-page .cocktail-detail__media,
    .cooking-detail-page .cocktail-detail__media { grid-area: media; }
    .cocktail-detail-page .cocktail-back-cta,
    .cooking-detail-page .cocktail-back-cta { grid-area: cta; }
    .cocktail-detail-page .cocktail-detail__title,
    .cooking-detail-page .cocktail-detail__title { font-size: 28px; }
    .cocktail-detail-page .cocktail-ingredients__list dt,
    .cocktail-detail-page .cocktail-ingredients__list dd,
    .cooking-detail-page .cocktail-ingredients__list dt,
    .cooking-detail-page .cocktail-ingredients__list dd { font-size: 14px; }
    .cocktail-detail-page .cocktail-ingredients__list > div,
    .cooking-detail-page .cocktail-ingredients__list > div { gap: 8px; }
    .cocktail-detail-page .enjoy-cta-link,
    .cooking-detail-page .enjoy-cta-link { width: 100%; max-width: 360px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cocktail-page .cocktail-card__media img,
    .cocktail-page .cocktail-card__arrow,
    .cooking-page .cocktail-card__media img {
        transition: none;
    }
    .cocktail-page .cocktail-card:hover .cocktail-card__media img,
    .cooking-page .cocktail-card:hover .cocktail-card__media img { transform: none; }
}

/* ---- Cooking List page (cooking.html) ----------------------------------
   cooking.html is built from the same markup/classes as cocktail.html
   (PICK UP + Filter + Grid + Pagination) — every .cocktail-* selector
   above already covers .cooking-page too, so there is no Cooking-only
   layout override left here. The only page-only difference is an
   explicit white background (already true via the foundation.css
   body base, stated here for clarity). */
.cooking-page {
    background: #fff;
}