/* ============================================================
   JINRO Renewal — Shared component scaffolding

   These are low-specificity, opt-in structures for the renewal templates.
   The current proposal uses different class names and remains unaffected.
   Final visual styling will be added only after TOP design work begins.
   ============================================================ */

/* ============================================================
   Canonical horizontal content container — single source of truth for
   content max-width/gutter across the whole site (GNB/Footer excepted,
   those keep their own width system). Every other content container —
   .jr-section-shell below, .cocktail-container (cocktail.css),
   .wrap.jr-section-shell (below), the KV/
   product-detail.css's banner/lineup/subnav
   inners, and TOP's .top-*__inner sections (styles.css) — resolves to
   this same formula via the --jr-layout-max / --jr-gutter-* tokens in
   foundation.css. Flip --jr-layout-max there (e.g. to "100%") and all
   of them move together; no per-file override needed.
   ============================================================ */

.enjoy-page .jr-page-kv__title,
.cocktail-page .jr-page-kv__title,
.cooking-page .jr-page-kv__title,
.cocktail-detail-page .jr-page-kv__title,
.cooking-detail-page .jr-page-kv__title {
    font-family: var(--jr-font-enjoy-heading);
    font-weight: 700;
    line-height: inherit;
    letter-spacing: -0.035em;
}

/* ============================================================
   Age verification — shared product-detail gate
   ============================================================ */
.jr-age-modal[hidden] { display: none; }
.jr-age-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}
.jr-age-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.jr-age-modal__dialog {
    position: relative;
    width: min(100%, 600px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 56px clamp(28px, 5vw, 64px) 44px;
    color: var(--jr-color-white);
    text-align: center;
    background: var(--jr-color-red);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(18, 18, 18, 0.22);
}
.jr-age-modal__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
}
.jr-age-modal__title {
    margin: 18px 0 0;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.2;
    letter-spacing: -0.04em;
}
.jr-age-modal__rule {
    display: block;
    width: 56px;
    height: 1px;
    margin: 28px auto 30px;
    background: var(--jr-color-white);
}
.jr-age-modal__question {
    margin: 0;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 700;
    line-height: 1.4;
}
.jr-age-modal__description {
    margin: 20px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.8;
}
.jr-age-modal__actions {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}
.jr-age-modal__actions button {
    min-height: 52px;
    padding: 12px 20px;
    font: inherit;
    font-weight: var(--jr-font-weight-bold);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.jr-age-modal__yes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--jr-color-red);
    background: var(--jr-color-white);
    border: 1px solid var(--jr-color-white);
    border-radius: 999px;
}
.jr-age-modal__yes span { font-size: 22px; line-height: 1; }
.jr-age-modal__no {
    color: var(--jr-color-white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 999px;
}
.jr-age-modal__yes:hover { background: var(--jr-color-surface-soft); }
.jr-age-modal__no:hover {
    color: var(--jr-color-red);
    background: var(--jr-color-white);
}
.jr-age-modal__actions button:focus-visible {
    outline: 2px solid var(--jr-color-white);
    outline-offset: 4px;
}
.jr-age-modal__note {
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 767px) {
    .jr-age-modal { padding: 20px; }
    .jr-age-modal__dialog { max-height: calc(100dvh - 40px); padding: 40px 24px 32px; }
    .jr-age-modal__description { font-size: 14px; }
}

/* ============================================================
   Card typography — single source of truth for the three roles used
   inside any card-shaped content (product/cocktail/recipe cards, TOP's
   feature/column/company cards, etc.): Label / Title / Description.
   Values live in foundation.css (--jr-card-label/title/desc-size/
   -weight/-line-height). These classes are opt-in hooks for new markup;
   existing selectors (.product-name, .product-desc, .cocktail-card__
   label/__name/__desc, .enjoy-recipe-card__label/__name,
   .top-enjoy__feature-copy p/h3, .top-company__card-title/-desc,
   .top-column__article h3, .product-detail-lineup__name) reference the
   same tokens directly instead of duplicating these classes, so both
   paths move together. NOT for Section Title / KV Title /
   GNB / 2nd-level nav / buttons / badges / tabs / dates / meta /
   specifications / Footer / article h2-h3 body headings. */

.jr-card-title {
    font-size: var(--jr-card-title-size);
    font-weight: var(--jr-card-title-weight);
    line-height: var(--jr-card-title-line-height);
}

.jr-card-desc {
    font-size: var(--jr-card-desc-size);
    font-weight: var(--jr-card-desc-weight);
    line-height: var(--jr-card-desc-line-height);
}

/* Shared visual language extracted from the TOP page. .jr-section-shell
   is a .jr-content-container alias kept for backward compatibility with
   existing markup — same tokens, same result. */
.jr-section-shell {
    box-sizing: border-box;
    width: min(100% - 80px, 1280px);
    margin-inline: auto;
}

/* Wide shell — the .wrap.jr-section-shell used by Products, News and every
   Product Detail page: full width with the shared responsive gutter, capped
   at the site layout max on desktop, inset 20px on mobile. */
.products-page .wrap,
.news-page .wrap,
.product-detail-page .wrap {
    max-width: none;
}

.products-page .wrap.jr-section-shell,
.news-page .wrap.jr-section-shell,
.product-detail-page .wrap.jr-section-shell {
    box-sizing: border-box;
    width: 100%;
    padding-inline: clamp(24px, 5.56vw, 80px);
}

@media (min-width: 1024px) {
    .products-page .wrap.jr-section-shell,
    .news-page .wrap.jr-section-shell,
    .product-detail-page .wrap.jr-section-shell {
        max-width: var(--jr-layout-max);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .products-page .wrap.jr-section-shell,
    .news-page .wrap.jr-section-shell,
    .product-detail-page .wrap.jr-section-shell {
        width: calc(100% - 40px);
        padding-inline: 0;
    }
}

/* Canonical Section Heading. Deliberately sets no foreground color: it
   inherits its surface's (ink on light, white inside .jr-dark-section). */
.jr-section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jr-space-2);
    margin: 0 0 clamp(48px, 6vw, 82px);
    text-align: center;
}

.jr-section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.jr-section-title {
    font-family: var(--jr-font-brand-heading);
    margin: 0;
    font-size: var(--jr-section-title-size);
    font-weight: var(--jr-section-title-weight);
    line-height: var(--jr-section-title-line-height);
    letter-spacing: var(--jr-section-title-letter-spacing);
    /* Wrap Japanese at phrase boundaries on narrow widths (e.g.
       "採用に関する / よくあるご質問", not "…よくあるご / 質問").
       Unsupported browsers keep the default per-character wrap. */
    word-break: auto-phrase;
}

.jr-intro-title {
    font-family: var(--jr-font-brand-heading);
    font-size: var(--jr-intro-title-size);
    font-weight: var(--jr-intro-title-weight);
    line-height: var(--jr-intro-title-line-height);
    letter-spacing: var(--jr-intro-title-letter-spacing);
}

/* Lead — Section Description under a Section Title. Light surface by default;
   .jr-dark-section flips it to the on-dark tint. */
.jr-section-intro {
    margin: 17px 0 0;
    color: var(--jr-color-text);
    font-size: var(--jr-content-body-size);
    font-weight: var(--jr-content-body-weight);
    line-height: var(--jr-content-body-line-height);
    letter-spacing: normal;
}

.jr-dark-section .jr-section-intro {
    color: rgba(255, 255, 255, 0.72);
}

.jr-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3.2vw, 48px);
}

.jr-media-card {
    display: block;
    aspect-ratio: 1.72 / 1;
    overflow: hidden;
    background: var(--jr-color-surface-soft);
    border-radius: 16px;
}

.jr-media-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--jr-duration-slow) var(--jr-ease-standard);
}

.jr-media-card:hover img,
.jr-media-card:focus-visible img {
    transform: scale(1.035);
}

.jr-media-card:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 5px;
}

/* ============================================================
   Shared Promo Card — a 2-column "photo + title/desc/arrow" link card,
   mastered 1:1 from TOP's 企業情報 section (originally .top-company__*,
   styles.css) and extracted here so any page needing that exact same
   card doesn't re-declare it (first consumer beyond TOP: recruit.html's
   募集職種). Grid gap, media radius/aspect-ratio, content spacing,
   typography tokens and the arrow's size/position/hover are the single
   source of truth here — styles.css keeps only what's genuinely
   TOP-specific (section heading, per-card object-position, the
   scroll-reveal stagger var). Changing a value here changes every
   consumer; that is the point. Image + Title/Desc/Arrow only — no
   eyebrow, no dim/gradient overlay.
   ============================================================ */
.jr-promo-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.8vw, 40px);
}

.jr-promo-card {
    min-width: 0;
    display: block;
    color: var(--jr-color-ink);
    text-decoration: none;
}

.jr-promo-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    background: #d9dde0;
}

.jr-promo-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.07);
    transition: background var(--jr-duration-base) var(--jr-ease-standard);
    pointer-events: none;
}

.jr-promo-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 700ms var(--jr-ease-standard);
}

.jr-promo-card__content {
    min-height: 114px;
    position: relative;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 22px 52px 22px 0;
}

.jr-promo-card__title {
    font-size: var(--jr-card-title-size);
    font-weight: var(--jr-card-title-weight);
    line-height: var(--jr-card-title-line-height);
    letter-spacing: var(--jr-card-title-letter-spacing);
}

.jr-promo-card__desc {
    font-size: var(--jr-card-desc-size);
    font-weight: var(--jr-card-desc-weight);
    line-height: var(--jr-card-desc-line-height);
    color: var(--jr-color-muted);
    letter-spacing: 0.02em;
}

.jr-promo-card__arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    transform: translateY(-50%);
    transition: color var(--jr-duration-base) ease, transform var(--jr-duration-base) var(--jr-ease-standard);
}

.jr-promo-card:hover .jr-promo-card__media img,
.jr-promo-card:focus-visible .jr-promo-card__media img { transform: scale(1.035); }

.jr-promo-card:hover .jr-promo-card__media::after,
.jr-promo-card:focus-visible .jr-promo-card__media::after { background: rgba(0, 0, 0, 0.15); }

.jr-promo-card:hover .jr-promo-card__arrow,
.jr-promo-card:focus-visible .jr-promo-card__arrow {
    color: var(--jr-color-red);
    transform: translate(5px, -50%);
}

.jr-promo-card:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 5px;
}

@media (max-width: 767px) {
    .jr-promo-card-grid { grid-template-columns: 1fr; gap: 38px; }
    .jr-promo-card__media { aspect-ratio: 1.35 / 1; }
    .jr-promo-card__content { min-height: 86px; padding: 15px 52px 15px 0; text-align: left; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
    .jr-promo-card__media::after,
    .jr-promo-card__media img,
    .jr-promo-card__arrow { transition: none; }
    .jr-promo-card:hover .jr-promo-card__media img { transform: none; }
    .jr-promo-card:hover .jr-promo-card__arrow { transform: translateY(-50%); }
}

.jr-dark-section {
    color: var(--jr-color-white);
    background: #121212;
}

/* ============================================================
   Shared News Row — single source of truth for a horizontal
   date/category/title/arrow news row, used by news.html's list and
   news-detail.html's 最新のニュース. Values are mastered 1:1 from the
   TOP page's already-approved NEWS RELEASE row (styles.css's
   .top-news__row family) — this is a deliberate extraction, not a new
   design. TOP's own .top-news__* selectors are intentionally left
   untouched (nothing here is riskier than adding a new opt-in class); a
   future TOP rebuild could adopt .jr-news-row directly, but that is not
   done as part of this change.

   Two page-agnostic pieces:
     .jr-news-row-list   the <ul>/<div> wrapper — list reset + the top
                          divider line (every page's list start gets the
                          same divider TOP's does, not just row bottoms).
     .jr-news-row         the clickable row itself, plus its
                          __meta/__date/__category/__title/__arrow
                          children. Consumers wrap each row in whatever
                          list-item element fits their markup (news.html
                          uses <li>, matching its existing semantic list
                          structure) — the grid lives on .jr-news-row
                          itself, so the wrapper tag doesn't affect it.
   ============================================================ */
.jr-news-row-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--jr-color-line);
}

/* Shared inline chevron used in place of text arrow glyphs (→ / > / ↗),
   used well beyond news rows (CTA links across enjoy/company/support/
   product pages). Lives here, not styles.css (TOP-only), because most
   consumers never load that file — without this, the bare <svg> falls
   back to the browser's default black fill and renders as a solid
   triangle instead of a thin chevron stroke. */
.jr-arrow-icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jr-news-row {
    min-height: 106px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: clamp(18px, 2vw, 32px);
    border-bottom: 1px solid var(--jr-color-line);
    color: inherit;
    text-decoration: none;
}

.jr-news-row__meta {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: clamp(12px, 1.5vw, 24px);
}

.jr-news-row__date {
    color: var(--jr-color-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.jr-news-row__category {
    color: var(--jr-color-red);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.jr-news-row__title {
    min-width: 0;
    margin: 0;
    padding-block: 20px;
    font-size: clamp(16px, 1.389vw, 20px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.02em;
    transition: transform var(--jr-duration-base) var(--jr-ease-standard), color var(--jr-duration-base) ease;
}

.jr-news-row__arrow {
    justify-self: end;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--jr-color-ink);
    transition: transform var(--jr-duration-base) var(--jr-ease-standard), color var(--jr-duration-base) ease;
}

.jr-news-row:hover .jr-news-row__title,
.jr-news-row:focus-visible .jr-news-row__title {
    color: var(--jr-color-red);
    transform: translateX(5px);
}

.jr-news-row:hover .jr-news-row__arrow,
.jr-news-row:focus-visible .jr-news-row__arrow {
    color: var(--jr-color-red);
    transform: translateX(5px);
}

.jr-news-row:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 4px;
}

@media (max-width: 767px) {
    .jr-news-row {
        min-height: 0;
        grid-template-columns: 1fr 44px;
        grid-template-areas: "meta arrow" "title arrow";
        column-gap: 12px;
        padding: 16px 0 15px;
    }
    .jr-news-row__meta { grid-area: meta; display: flex; align-items: center; gap: 12px; }
    .jr-news-row__date { font-size: 11px; }
    .jr-news-row__category { font-size: 11px; }
    .jr-news-row__title { grid-area: title; padding: 9px 0 2px; font-size: 16px; line-height: 1.65; }
    .jr-news-row__arrow { grid-area: arrow; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .jr-news-row__title,
    .jr-news-row__arrow {
        transition: none;
    }
    .jr-news-row:hover .jr-news-row__title,
    .jr-news-row:hover .jr-news-row__arrow {
        transform: none;
    }
}

@media (min-width: 768px) {
    .jr-section-shell {
        width: 100%;
        padding-inline: clamp(24px, 5.56vw, 80px);
    }
}

/* Beyond the 1440 content grid, pin .jr-section-shell to the same
   centered max-width as .jr-content-container instead of letting the
   clamp()'d padding-inline above keep the content area itself growing
   past 1440px on wide monitors (768–1439px unaffected — the cap only
   ever binds once the natural width would exceed --jr-layout-max). */
@media (min-width: 1024px) {
    .jr-section-shell {
        max-width: var(--jr-layout-max);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .jr-section-shell { width: calc(100% - 40px); }
    .jr-section-heading { margin-bottom: 40px; }
    .jr-media-grid { grid-template-columns: 1fr; gap: 45px; }
    .jr-media-card { aspect-ratio: 1.42 / 1; }
}

/* ============================================================
   Shared Page KV — single source of truth for the 1st-level page hero
   across every subpage that uses it (products.html, enjoy.html,
   news.html, and future company.html/support.html migrations).

   Master design = products.html's 商品一覧 KV, extracted as-is — height,
   typography, gutter, alignment and responsive behavior are fixed here
   and must not be redeclared per page. Only title text, background
   image, image object-position, and the imageless .jr-page-kv--solid
   variant may differ per page.

   Fully componentized: assets/partials/page-kv.html is the only copy
   of the markup, loaded at runtime by assets/js/page-kv.js into a
   [data-jr-page-kv-mount data-page-kv-key="…"] placeholder — pages
   never write this HTML themselves, and title/image live in
   page-kv.js's PAGE_KV_CONFIG, not in any page file.

   Image + Title only by default — no eyebrow label, dim/gradient overlay,
   or decorative background text. An opt-in transparent visual-title layer
   may sit between __media and __inner without changing the default path.
   PC/Tablet (≥768px) center the title vertically, left-aligned; Mobile
   (≤767px) top-anchors it, left-aligned, capped by the shared
   .jr-section-shell gutter.
   ============================================================ */
.jr-page-kv {
    position: relative;
    overflow: hidden;
    min-height: min(72vh, 720px);
}

.jr-page-kv--solid {
    background: #121212;
}

.jr-page-kv__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.jr-page-kv__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
}

/* Opt-in transparent artwork (currently Enjoy only). It uses the same
   dimensions and object-fit/object-position as the photo, which preserves
   the source artwork's intended registration at every breakpoint. */
.jr-page-kv__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.jr-page-kv__overlay picture,
.jr-page-kv__overlay-image {
    display: block;
    width: 100%;
    height: 100%;
}

.jr-page-kv__overlay-image {
    object-fit: cover;
    object-position: center 44%;
}

.jr-page-kv--has-overlay .jr-page-kv__overlay {
    animation: jr-page-kv-overlay-in 720ms var(--jr-ease-standard) 640ms both;
}

@keyframes jr-page-kv-overlay-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jr-page-kv__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: min(72vh, 720px);
    padding-bottom: clamp(68px, 7vw, 104px);
    text-align: left;
}

/* The 1440 content-grid cap beyond 1024px comes from .jr-section-shell
   itself now (also applied to .jr-page-kv__inner in the markup) — see
   the shared cap rule above, driven by --jr-layout-max. No page-local
   override needed here anymore. */

.jr-page-kv__title {
    font-family: var(--jr-font-brand-heading);
    margin: 0;
    color: #fff;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.005em;
}

/* Opt-in via page-kv.js's titleHtml (a deliberate 2-line title, e.g.
   recruit.html — never a width-driven auto-wrap): only line-height
   changes so the two lines aren't cramped. font-size/weight/
   letter-spacing stay the shared rule above, untouched. */
.jr-page-kv--two-line .jr-page-kv__title {
    line-height: 1.15;
}

/* Light KV theme — two independent flags, both reusable by any future
   1st-level page, kept separate because they answer different questions:

   1. Header/GNB legibility (data-jr-kv-theme="light" on <body>) — is the
      photo bright enough overall that the header strip needs ink text?
      A <body> flag because the header sits outside <main>, so nothing
      inside .jr-page-kv can reach it directly. GNB nav-link text/
      dropdown chevrons/search icon already use color:inherit/currentColor
      so they follow the header's color automatically; the logo
      (.jr-site-header__logo-image--red) and the active-link underline
      (explicit var(--jr-color-red), not inherited) are untouched by
      design — both stay red in every theme.
   2. KV title legibility (.jr-page-kv--ink-title, set by page-kv.js from
      PAGE_KV_CONFIG's titleTheme) — is THIS SPECIFIC photo's title-anchor
      area light? Company's photo is bright at the top (needs #1) but
      still dark enough where the title sits (does NOT need #2) — the two
      do not always travel together, so never assume one implies the
      other. Recruit's photo needs both. */
body[data-jr-kv-theme="light"] .jr-site-header[data-jr-header-state="transparent"] {
    color: var(--jr-color-ink);
}

.jr-page-kv--ink-title .jr-page-kv__title {
    color: var(--jr-color-ink);
}

/* PC — vertical center within the KV height, left-aligned. */
@media (min-width: 1024px) {
    .jr-page-kv__inner {
        justify-content: center;
        padding-bottom: 0;
    }
}

/* Tablet — top-anchored, left-aligned (same anchor as Mobile, PC keeps
   vertical center). */
@media (min-width: 768px) and (max-width: 1023px) {
    .jr-page-kv__inner {
        justify-content: flex-start;
        padding-bottom: 0;
        padding-top: 120px;
    }
    .jr-page-kv__title { font-size: 51px; }
}

/* Mobile — top-anchored, left-aligned. */
@media (max-width: 767px) {
    .jr-page-kv,
    .jr-page-kv__inner { min-height: 520px; }
    .jr-page-kv__inner {
        justify-content: flex-start;
        padding-bottom: 0;
        padding-top: 80px;
    }
    .jr-page-kv__title { font-size: 37px; }
}

@media (prefers-reduced-motion: reduce) {
    .jr-page-kv--has-overlay .jr-page-kv__overlay {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Recipe Favourite — ONE component for every recipe surface
   (enjoy.html's previews, cocktail.html / cooking.html lists and their
   PICK UP rows, and both detail pages). Built and toggled by
   assets/js/recipe-favorites.js; no page or card renderer styles a
   heart of its own.

   .recipe-fav-shell is a positioning wrapper the script puts around a
   card so the button can be the card link's SIBLING (an <a> may not
   contain a <button>) while sitting over the image. It adds no box of
   its own, so card size, grid columns and typography are untouched.

   Two variants, same visual language: --card overlays a recipe image,
   --detail sits inline beside a detail-page title. Both keep a 44x44
   hit area while the drawn glyph stays small.
   ============================================================ */
.recipe-fav-shell {
    position: relative;
    display: flex;
}

.recipe-fav-shell > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.recipe-fav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--jr-color-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--jr-duration-base) var(--jr-ease-standard);
}

.recipe-fav svg {
    position: relative;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill var(--jr-duration-base) var(--jr-ease-standard);
}

.recipe-fav:hover {
    color: var(--jr-color-red);
}

.recipe-fav:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: -4px;
    border-radius: 50%;
}

/* Selected — outline heart fills with JINRO Red. */
.recipe-fav[aria-pressed="true"] {
    color: var(--jr-color-red);
}

.recipe-fav[aria-pressed="true"] svg {
    fill: currentColor;
}

/* ---- Card variant: overlay on the thumbnail's bottom-right --------
   .recipe-fav-anchor reproduces the thumbnail's box — full card width at
   the card's top, same 1:1 ratio every recipe thumbnail uses — so the
   single inset below is measured from the IMAGE's bottom-right corner,
   not the card's. One value covers PC/Tablet/Mobile; there is no
   per-breakpoint or per-page override.

   pointer-events:none keeps the overlay out of the way: only the button
   re-enables pointer events, so every other part of the thumbnail still
   opens the recipe. */
.recipe-fav-anchor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1 / 1;
    z-index: 2;
    pointer-events: none;
}

.recipe-fav--card {
    position: absolute;
    right: 12px;
    bottom: 12px;
    pointer-events: auto;
}

/* The white disc is drawn by a pseudo-element, so the button keeps its
   full 44px target while the visible control stays compact. */
.recipe-fav--card::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    transition: background var(--jr-duration-base) var(--jr-ease-standard);
}

.recipe-fav--card:hover::before {
    background: #fff;
}

/* ---- Detail variant: inline next to the recipe title --------------- */
.recipe-fav--detail {
    flex: none;
    margin-left: 4px;
}

.recipe-fav--detail svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 767px) {
    .recipe-fav--card::before { width: 28px; height: 28px; }
}

/* ============================================================
   Header clearance for pages with no Page KV / hero

   Pages whose <main> starts straight with content (product detail,
   cocktail/cooking list + detail, news detail) have nothing full-bleed
   under the fixed .jr-site-header, so they need its height as top
   padding or the first block renders behind the nav. Pages that open
   with a .jr-page-kv (products / enjoy / news / company / recruit /
   support) deliberately do NOT get this — their KV art is meant to run
   under the transparent header.

   The values match .jr-site-header's own --jr-header-height (96px PC /
   64px at <=1023px); that custom property is scoped to the header
   element itself, so it cannot be referenced from here.
   ============================================================ */
.product-detail-page > main,
.cocktail-page > main,
.cocktail-detail-page > main,
.cooking-page > main,
.cooking-detail-page > main,
.news-detail-page > main {
    padding-top: 96px;
}

@media (max-width: 1023px) {
    .product-detail-page > main,
    .cocktail-page > main,
    .cocktail-detail-page > main,
    .cooking-page > main,
    .cooking-detail-page > main,
    .news-detail-page > main {
        padding-top: 64px;
    }
}

/* Shared header */
.jr-skip-link {
    position: fixed;
    z-index: 1200;
    top: var(--jr-space-3);
    left: var(--jr-space-3);
    padding: var(--jr-space-3) var(--jr-space-4);
    color: var(--jr-color-white);
    font-weight: var(--jr-font-weight-semibold);
    text-decoration: none;
    background: var(--jr-color-ink);
    transform: translateY(calc(-100% - var(--jr-space-6)));
    transition: transform var(--jr-duration-fast) ease;
}

.jr-skip-link:focus {
    transform: none;
}

.jr-site-header {
    --jr-header-height: 96px;
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto;
    width: 100%;
    height: var(--jr-header-height);
    color: var(--jr-color-white);
    background: transparent;
    transition:
        transform 0.4s ease-out,
        color var(--jr-duration-base) ease,
        background-color var(--jr-duration-base) ease;
}

.jr-site-header[data-jr-header-visibility="hidden"] {
    transform: translateY(-100%);
}

.jr-site-header[data-jr-header-visibility="visible"] {
    transform: translateY(0);
}

.jr-site-header[data-jr-header-state="solid"],
.jr-site-header[data-jr-nav-open="true"] {
    color: var(--jr-color-ink);
    background: rgba(255, 255, 255, 0.98);
}

/* 商品一覧 mega-menu open — a fully opaque white panel from the header
   down through the dropdown, no matter the scroll-based transparent/solid
   state above (source order makes this win the tie when both apply at
   once, e.g. scrolled past the hero AND hovering 商品一覧). No rgba/backdrop
   here on purpose: the hero must never show through. */
.jr-site-header[data-jr-megamenu-open="true"] {
    color: #111;
    background: #ffffff;
}

.jr-site-header__inner {
    position: relative;
    width: min(calc(100% - 64px), var(--jr-container-wide));
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(22px, 2vw, 36px);
}

.jr-site-header__logo {
    position: relative;
    width: 128px;
    height: 42px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.jr-site-header__logo-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity var(--jr-duration-fast) ease;
}

.jr-site-header__logo-image--red {
    opacity: 1;
    color: var(--jr-color-red);
}

.jr-site-header__logo-image--white {
    opacity: 0;
    color: #fff;
}

/* Single-file logo recoloring: logo.svg is the only mark kept in the repo
   (logo-red.svg was deleted). mask-image uses the SVG's alpha shape only,
   so it recolors correctly regardless of the file's own internal fill —
   set `color` on each usage to pick red / white / grey / etc. */
.jr-logo-mark {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("../images/logo.svg") center / contain no-repeat;
    mask: url("../images/logo.svg") center / contain no-repeat;
}

.jr-site-header__nav {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    margin-left: 0;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: clamp(28px, calc(1.35vw + 12px), 38px);
    transform: translateX(-50%);
}

.jr-site-header__nav-link {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    font-size: 20px;
    font-weight: var(--jr-font-weight-semibold);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.jr-site-header__nav-chevron {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--jr-duration-fast) ease;
}

.jr-site-header__nav-link--has-menu.is-open .jr-site-header__nav-chevron {
    transform: rotate(180deg);
}

.jr-site-header__nav-link--has-menu.is-open {
    color: var(--jr-color-red);
}

.jr-site-header__nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--jr-color-red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--jr-duration-base) var(--jr-ease-standard);
}

.jr-site-header__nav-link:is(:hover, :focus-visible)::after,
.jr-site-header__nav-link.is-active::after,
.jr-site-header__nav-link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* While a mega-menu is open, only the one link actually driving it (.is-open)
   should read as "active" — otherwise the current page's own permanent
   underline (e.g. TOP via [aria-current="page"]) stays lit at the same time
   and it looks like two nav items are highlighted at once. */
.jr-site-header[data-jr-megamenu-open="true"] .jr-site-header__nav-link.is-active::after,
.jr-site-header[data-jr-megamenu-open="true"] .jr-site-header__nav-link[aria-current="page"]::after {
    transform: scaleX(0);
}

.jr-site-header[data-jr-megamenu-open="true"] .jr-site-header__nav-link.is-open::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Desktop mega-menu banner — hover-triggered by [data-jr-nav-trigger] links
   (see assets/js/nav-dropdown.js), spans full width just below the header.
   Positioned absolute against .jr-site-header itself (its nearest
   positioned ancestor, fixed) so it always sits right under the header
   regardless of the header's own scroll show/hide transform. */
.jr-nav-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--jr-color-surface);
    border-top: 1px solid var(--jr-color-line);
    box-shadow: 0 12px 24px rgba(18, 18, 18, 0.06);
    transform: translateY(-8px);
    transition: opacity var(--jr-duration-fast) ease, transform var(--jr-duration-fast) ease, visibility var(--jr-duration-fast) ease;
}

.jr-nav-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.jr-nav-dropdown__inner {
    width: 100%;
    max-width: var(--jr-container-wide);
    margin-inline: auto;
    padding: 40px clamp(24px, 5.56vw, 80px);
}

.jr-nav-dropdown__group {
    display: none;
    gap: 40px;
}

.jr-nav-dropdown__group.is-active {
    display: flex;
}

/* Left intro pane — title + red pill CTA, separated from the product links
   by a vertical divider (its own right border). */
.jr-nav-dropdown__intro {
    flex: 0 0 24%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 20px;
    padding-right: 40px;
    border-right: 1px solid var(--jr-color-line);
}

.jr-nav-dropdown__intro-title {
    display: block;
    margin: 0;
    color: #111;
    font-size: 24px;
    font-weight: var(--jr-font-weight-semibold);
    letter-spacing: -0.02em;
    text-decoration: none;
}

.jr-nav-dropdown__intro-title:hover {
    color: var(--jr-color-red);
}

.jr-nav-dropdown__links {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 14px;
}

.jr-nav-dropdown__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.jr-nav-dropdown__col a {
    color: #111;
    font-size: 18px;
    font-weight: var(--jr-font-weight-semibold);
    line-height: 1.6;
    text-decoration: none;
    transition: color var(--jr-duration-fast) ease;
}

.jr-nav-dropdown__col a:hover,
.jr-nav-dropdown__col a:focus-visible,
.jr-nav-dropdown__col a.is-active,
.jr-nav-dropdown__col a[aria-current="page"] {
    color: var(--jr-color-red);
}

@media (max-width: 1023px) {
    .jr-nav-dropdown {
        display: none;
    }
}

.jr-site-header__actions {
    margin-left: auto;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--jr-space-2);
}

.jr-site-header__global {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    color: inherit;
    font-size: 16px;
    font-weight: var(--jr-font-weight-medium);
    text-decoration: none;
    border: 0;
    transition: color var(--jr-duration-fast) ease;
}

.jr-site-header__global:hover {
    color: var(--jr-color-red);
}

.jr-site-header__global-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.jr-external-mark {
    font-size: 1.05em;
    line-height: 1;
}

.jr-icon-button {
    width: 44px;
    height: 44px;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.jr-icon-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.jr-site-header__toggle {
    display: none;
}

.jr-site-header__toggle-lines {
    position: relative;
    width: 22px;
    height: 16px;
    display: block;
}

.jr-site-header__toggle-lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition:
        inset var(--jr-duration-fast) ease,
        opacity var(--jr-duration-fast) ease,
        transform var(--jr-duration-fast) ease;
}

.jr-site-header__toggle-lines span:first-child { top: 0; }
.jr-site-header__toggle-lines span:nth-child(2) { top: 7px; }
.jr-site-header__toggle-lines span:last-child { top: 14px; }

.jr-site-header[data-jr-nav-open="true"] .jr-site-header__toggle-lines span:first-child {
    top: 7px;
    transform: rotate(45deg);
}

.jr-site-header[data-jr-nav-open="true"] .jr-site-header__toggle-lines span:nth-child(2) {
    opacity: 0;
}

.jr-site-header[data-jr-nav-open="true"] .jr-site-header__toggle-lines span:last-child {
    top: 7px;
    transform: rotate(-45deg);
}

.jr-mobile-drawer {
    display: none;
}

.jr-mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    background: rgba(18, 18, 18, 0.42);
    border: 0;
    cursor: pointer;
}

/* Shared quick-actions group — online store card, fixed bottom-right,
   follows scroll on every page. Hidden until scrolled past the hero (fades
   in via opacity — see .is-visible). Footer-avoidance is a *separate*
   concern: assets/js/quick-actions.js drives --jr-quick-actions-lift on
   every scroll frame (rAF-synced) and it moves the group via `transform`,
   which is deliberately left out of `transition` below — any easing here
   would make the group visibly "chase" the footer instead of moving in
   lockstep with it. */
.jr-quick-actions {
    --jr-quick-actions-base-bottom: 24px;
    --jr-quick-actions-lift: 0px;
    position: fixed;
    z-index: 900;
    right: 24px;
    bottom: var(--jr-quick-actions-base-bottom);
    transform: translateY(calc(-1 * var(--jr-quick-actions-lift)));
    will-change: transform;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--jr-duration-fast) ease, visibility var(--jr-duration-fast) ease;
}

.jr-quick-actions.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.jr-store-widget {
    width: 308px;
    max-width: calc(100vw - 48px);
    padding: 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--jr-color-surface);
    border: 1px solid var(--jr-color-line);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(18, 18, 18, 0.09);
    box-sizing: border-box;
}

.jr-store-widget__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jr-store-widget__cart {
    display: flex;
    flex: none;
    color: var(--jr-color-red);
}

.jr-store-widget__cart svg {
    width: 20px;
    height: 20px;
}

.jr-store-widget__title {
    flex: 1;
    margin: 0;
    color: var(--jr-color-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
}

/* Closes the whole panel (see assets/js/quick-actions.js) — not a
   collapse/compact toggle. Plain X, no circular background, sized for a
   44x44 hit area while the visible glyph stays small like the reference. */
.jr-store-widget__close {
    width: 44px;
    height: 44px;
    margin: -12px -12px -12px 0;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jr-color-ink);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: color var(--jr-duration-fast) ease;
}

.jr-store-widget__close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.jr-store-widget__close:hover,
.jr-store-widget__close:focus-visible {
    color: var(--jr-color-red);
}

.jr-store-widget__divider {
    display: block;
    height: 1px;
    background: var(--jr-color-line);
}

.jr-store-widget__desc {
    margin: 0 0 2px;
    color: var(--jr-color-muted);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
}

.jr-store-widget__link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 4px 0;
    text-decoration: none;
}

.jr-store-widget__logo {
    flex: none;
    width: 62px;
    height: 33px;
    object-fit: contain;
}

.jr-store-widget__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jr-store-widget__name {
    color: var(--jr-color-ink);
    font-size: 15px;
    font-weight: var(--jr-font-weight-semibold);
}

.jr-store-widget__sub {
    color: var(--jr-color-muted);
    font-size: 12px;
}

.jr-store-widget__arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--jr-color-line);
    border-radius: 50%;
    color: var(--jr-color-ink);
    background: transparent;
    transition: border-color var(--jr-duration-fast) ease, background-color var(--jr-duration-fast) ease, color var(--jr-duration-fast) ease;
}

.jr-store-widget__arrow svg {
    width: 16px;
    height: 16px;
}

.jr-store-widget__link:hover .jr-store-widget__arrow,
.jr-store-widget__link:focus-visible .jr-store-widget__arrow {
    background: var(--jr-color-red);
    border-color: var(--jr-color-red);
    color: #fff;
}

.jr-store-widget__link:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 4px;
    border-radius: 12px;
}

.jr-store-widget__external {
    display: flex;
    color: var(--jr-color-muted);
}

.jr-store-widget__external svg {
    width: 16px;
    height: 16px;
}

/* Below 768px the right-side floating card is replaced outright by
   .jr-store-bar (a full-width bottom nav bar) — not shrunk into it. Keep
   the two layouts in fully separate rule sets so neither breakpoint's CSS
   has to compromise for the other. */
@media (max-width: 767px) {
    .jr-quick-actions {
        display: none;
    }
}

/* Mobile store bar — full-width fixed bottom nav, hidden until scrolled
   past the hero (see .is-visible, toggled by assets/js/quick-actions.js
   on the same scroll threshold as the desktop card). Unlike the desktop
   card it never has to dodge the footer: .jr-site-footer instead reserves
   --jr-store-bar-height + safe-area of bottom padding so the bar can stay
   put and simply sit on top of that reserved space. */
.jr-store-bar {
    display: none;
}

@media (max-width: 767px) {
    :root {
        --jr-store-bar-height: 68px;
    }

    .jr-store-bar {
        position: fixed;
        z-index: 900;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: calc(var(--jr-store-bar-height) + env(safe-area-inset-bottom));
        padding: 0 12px env(safe-area-inset-bottom);
        box-sizing: border-box;
        background: var(--jr-color-surface);
        border-top: 1px solid var(--jr-color-line);
        box-shadow: 0 -4px 16px rgba(18, 18, 18, 0.05);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(100%);
        transition: opacity var(--jr-duration-fast) ease, transform var(--jr-duration-fast) ease, visibility var(--jr-duration-fast) ease;
    }

    .jr-store-bar.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .jr-store-bar__link {
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        height: 52px;
        margin-block: 0;
        padding-inline: 6px;
        border: 1px solid var(--jr-color-line);
        border-radius: 8px;
        text-decoration: none;
    }

    .jr-store-bar__link:active {
        background: var(--jr-color-surface-soft);
    }

    .jr-store-bar__logo {
        height: 36px;
        width: auto;
        max-width: 100%;
    }
}

/* Shared footer */
.jr-site-footer {
    position: relative;
    z-index: 70;
    width: 100%;
    color: var(--jr-color-text);
    background: #fff;
    border-top: 1px solid var(--jr-color-line);
}

@media (max-width: 767px) {
    /* Reserve room for .jr-store-bar (fixed bottom nav) so it never covers
       the footer's own last content instead of the bar chasing the
       footer's position — see the comment above .jr-store-bar. */
    .jr-site-footer {
        padding-bottom: calc(var(--jr-store-bar-height) + env(safe-area-inset-bottom) + 16px);
    }
}

.jr-site-footer__inner {
    width: 100%;
    padding-inline: var(--jr-gutter);
    margin-inline: auto;
    padding-block: clamp(56px, 7vw, 96px) var(--jr-space-8);
}

.jr-site-footer__logo {
    /* Height-driven: width follows logo.svg's own 121.844:40 ratio
       (44px tall -> ~134px wide), so the mark can't be distorted. */
    height: 44px;
    aspect-ratio: 121.844 / 40;
    display: inline-flex;
    align-items: center;
    color: var(--jr-color-red);
}

.jr-site-footer__logo img {
    width: auto;
    height: 44px;
    max-width: 100%;
    object-fit: contain;
}

.jr-site-footer__logo .jr-logo-mark {
    width: 100%;
    height: 100%;
}

.jr-site-footer__link:is(:hover, :focus-visible) {
    color: var(--jr-color-red);
}

.jr-site-footer__bottom {
    margin-top: clamp(40px, 6vw, 72px);
    padding-top: var(--jr-space-6);
    border-top: 1px solid var(--jr-color-line);
}

.jr-site-footer__copyright {
    margin: 0;
    color: var(--jr-color-muted);
    font-size: var(--jr-text-xs);
    letter-spacing: 0.02em;
}

/* Full footer — logo/back-to-top row, tagline, four-column nav, oversized
   wordmark, legal bar. Scoped to --full so it doesn't touch the plain
   footer still used on pages that share this file's base footer rules. */
.jr-site-footer--full .jr-site-footer__inner {
    padding-block: clamp(56px, 6vw, 88px);
}

.jr-site-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* PC/Tablet: Global JINRO sits immediately left of ↑ TOP, both right-
   aligned as one group (.jr-site-footer__top's space-between puts the
   logo on the left and this whole group on the right) — independent of
   the .jr-site-footer__nav column grid below. Hidden on Mobile, where
   .jr-site-footer__brand (its own row, further down) is the one shown
   instead — see the display toggles beside each variant below. */
.jr-site-footer__top-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.jr-site-footer__global--top {
    display: inline-flex;
}

.jr-site-footer__totop {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    background: var(--jr-color-ink);
    border: 1px solid var(--jr-color-ink);
    border-radius: 50%;
    transition: color var(--jr-duration-fast) ease, background-color var(--jr-duration-fast) ease, border-color var(--jr-duration-fast) ease;
}

.jr-site-footer__totop:hover,
.jr-site-footer__totop:focus-visible {
    color: var(--jr-color-ink);
    background: transparent;
    border-color: var(--jr-color-line);
}

.jr-site-footer__totop-arrow {
    font-size: 18px;
    line-height: 1;
}

.jr-site-footer__tagline {
    margin: 16px 0 0;
    color: var(--jr-color-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* 商品一覧 gets two grid tracks (of the nav's six) so its 2-column product
   list has real room to breathe instead of squeezing into the same width
   as a single-link column like ニュース. */
.jr-site-footer__nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px clamp(24px, 4vw, 56px);
    margin-top: clamp(40px, 5vw, 64px);
}

.jr-site-footer__col--products {
    grid-column: span 2;
}

.jr-site-footer__col-title {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.jr-site-footer__col-title a {
    color: var(--jr-color-ink);
    text-decoration: none;
    transition: color var(--jr-duration-fast) ease;
}

.jr-site-footer__col-title a:is(:hover, :focus-visible) {
    color: var(--jr-color-red);
}

.jr-site-footer__col-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 商品一覧 only — reads column-first (JINRO / JINRO DRY, 一品眞露 / JINRO35°, …)
   simply because that's the source order; no reordering needed. */
.jr-site-footer__product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.jr-site-footer__col-list a {
    color: var(--jr-color-muted);
    font-size: 18px;
    line-height: 1.5;
    text-decoration: none;
    transition: color var(--jr-duration-fast) ease;
}

.jr-site-footer__col-list a:is(:hover, :focus-visible) {
    color: var(--jr-color-red);
}

/* Wordmark removed — brand row is now just the Global JINRO button,
   right-aligned in normal flow (no fixed-height box to leave an empty
   gap behind). Mobile only — PC/Tablet show .jr-site-footer__global--top
   next to ↑ TOP instead (see .jr-site-footer__top-actions above). */
.jr-site-footer__brand {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(24px, 4vw, 48px);
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .jr-site-footer__brand {
        display: none;
    }
}

.jr-site-footer__global {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: var(--jr-color-ink);
    border-radius: 999px;
    transition: background-color var(--jr-duration-fast) ease;
}

.jr-site-footer__global:hover,
.jr-site-footer__global:focus-visible {
    background: var(--jr-color-red);
}

@media (max-width: 767px) {
    /* Must come after the unqualified .jr-site-footer__global rule above
       (same specificity — one class each — so source order decides): that
       base rule also sets display, and previously sat later in the file
       than this media query, silently winning the cascade and keeping
       the PC/Tablet "next to ↑ TOP" button visible on Mobile too. */
    .jr-site-footer__global--top {
        display: none;
    }

    /* Mobile's own Global JINRO row (.jr-site-footer__brand) stays
       left-aligned, matching the rest of the Mobile footer's left-aligned
       content — right alignment is PC/Tablet-only styling inherited from
       the base rule above. */
    .jr-site-footer__brand {
        justify-content: flex-start;
    }
}

.jr-site-footer--full .jr-site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 0;
}

@media (max-width: 1023px) {
    /* Placed after the unscoped rule above (same selector specificity, so
       source order decides) — extra clearance below the Global JINRO
       button before the copyright bar. */
    .jr-site-footer--full .jr-site-footer__bottom {
        margin-top: 40px;
    }
}

@media (min-width: 768px) {
    /* PC/Tablet only — compact the divider→legal-row gap from the base
       rule's 24px (--jr-space-6) down to ~20px, and the legal-row→footer-
       bottom gap from the ~56–88px .jr-site-footer--full padding-block
       down to ~40px (padding-top there is left untouched, so the
       logo/top-actions row above keeps its existing clearance). Mobile
       keeps both original values — not scoped here. */
    .jr-site-footer--full .jr-site-footer__bottom {
        padding-top: 20px;
    }

    .jr-site-footer--full .jr-site-footer__inner {
        padding-bottom: 40px;
    }

    /* 商品一覧 is the tallest nav column (its product list runs longest),
       so its last item — "JINRO Natural mineral water" — sits flush
       against the divider below with no breathing room (.jr-site-footer__
       bottom's own margin-top is 0 here; .jr-site-footer__brand, which
       used to supply this gap, is Mobile-only now). Give the whole nav
       grid clearance before the divider — exact px per breakpoint below
       (PC 54/32, Tablet stepped down proportionally; Mobile keeps the
       original clamp()-driven margin-top and 0 margin-bottom untouched). */
}

@media (min-width: 768px) and (max-width: 1023px) {
    .jr-site-footer__nav {
        margin-top: 48px;
        margin-bottom: 26px;
    }
}

@media (min-width: 1024px) {
    .jr-site-footer__nav {
        margin-top: 54px;
        margin-bottom: 32px;
    }
}

.jr-site-footer__legal {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 36px);
}

.jr-site-footer__legal a {
    color: var(--jr-color-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color var(--jr-duration-fast) ease;
}

.jr-site-footer__legal a:is(:hover, :focus-visible) {
    color: var(--jr-color-red);
}

.jr-site-footer__copyright {
    font-size: 14px;
}

/* Tablet + mobile share the same nav layout: 商品一覧 takes the full row
   (its own 2-column product list), the remaining four columns wrap into a
   2x2 grid below it. */
@media (max-width: 1023px) {
    .jr-site-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }

    .jr-site-footer__col--products {
        grid-column: 1 / -1;
    }

    .jr-site-footer__col-title {
        font-size: 18px;
    }

    .jr-site-footer__col-list a {
        font-size: 16px;
    }

    .jr-site-footer__legal a,
    .jr-site-footer__copyright {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .jr-site-footer__logo,
    .jr-site-footer__logo img {
        height: 40px;
    }

    .jr-site-footer__tagline {
        font-size: 20px;
    }

    .jr-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* Buttons */

.jr-button:focus-visible,
.jr-carousel-control:focus-visible,
.jr-site-header :where(a, button):focus-visible,
.jr-site-footer a:focus-visible {
    outline: 0;
    box-shadow: var(--jr-focus-ring);
}

/* ============================================================
   Shared Pill Control — size/typography system only (no color), mastered
   from enjoy.html's その他のカクテルレシピを見る CTA (.enjoy-cta-link).
   Every rounded 56px pill-shaped control on the site — CTA links, filter
   chips, a pill-styled <select> — shares this one geometry so they read
   as controls from the same system, even though each keeps its own
   color/state rules (a CTA's white→black hover, a filter's white→red
   active, a select's neutral border are all different roles and stay
   separate — see the per-consumer color rules, e.g. news.css's
   .news-filter__chip/.news-filter__select).

   Existing pill CTAs (.enjoy-cta-link, .company-cta-link,
   .support-cta-link, cocktail/cooking detail's back-CTA,
   news-detail.html's bottom CTA) are NOT migrated onto this class — they
   already match these exact values (see each file's own declaration)
   and are left as-is to avoid any risk to their already-approved output.
   New pill controls (e.g. news.css's Category Filter / Year Select)
   should use .jr-pill-control instead of re-declaring these six values
   again. ============================================================ */
.jr-pill-control {
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 28px;
    border: 1.2px solid currentColor;
    border-radius: 999px;
    font-size: 16px;
    font-weight: var(--jr-button-font-weight);
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--jr-duration-base) var(--jr-ease-standard),
                background var(--jr-duration-base) var(--jr-ease-standard),
                border-color var(--jr-duration-base) var(--jr-ease-standard);
}

/* Section heading — .jr-section-heading is defined once, near .jr-section-title. */

/* ============================================================
   Shared Section Eyebrow — single source of truth for the small red
   label sitting above a .jr-section-title on left-aligned page-section
   headers (company.html/recruit.html/support.html's MESSAGE/ORIGIN/
   HISTORY/OUTLINE/DATA/PEOPLE/CONTACT/FAQ etc. eyebrows). Not the same
   component as .jr-section-heading__label (that one is the centered
   TOP-style heading system) — this is additive only, extracted from the
   three pages' identical page-local rules so all three move together.
   ============================================================ */
.jr-section-eyebrow {
    margin: 0 0 10px;
    color: var(--jr-color-red);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
}

/* Carousel controls; carousel.js owns state, not visual design. */
.jr-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--jr-space-4);
}

/* touch-action:manipulation — iOS Safari otherwise treats two quick taps
   on the same control as a double-tap zoom, so paging through a carousel
   by tapping repeatedly zooms the page instead of advancing the slide.
   This opts these buttons out of double-tap zoom ONLY; pinch-zoom and
   page zoom elsewhere are untouched (the viewport meta deliberately keeps
   no maximum-scale/user-scalable=no). Declared on the shared control here
   so every carousel using it gets the fix, not just TOP. */
.jr-carousel-control {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--jr-color-ink);
    background: var(--jr-color-surface);
    border: 1px solid var(--jr-color-line);
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Same invert-fill hover language as the Hero carousel's own
   .hero__arrow:hover (styles.css) — Hero inverts to white-on-dark
   because its arrows sit on a dark photo/video; every other carousel
   on the site (Recruit PEOPLE, etc.) sits on a light background, so
   this is that same interaction mapped to the light-surface equivalent
   already used elsewhere for circular icon buttons (e.g.
   .recruit-jobs__arrow:hover). PC hover only — no touch-forced state. */
@media (hover: hover) {
    .jr-carousel-control:hover:not(:disabled) {
        color: #fff;
        background: var(--jr-color-ink);
        border-color: var(--jr-color-ink);
    }
}

.jr-carousel-control:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.jr-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--jr-space-2);
}

/* Dots are generated by carousel.js with this class on every carousel
   (TOP おすすめ情報 included), so the same double-tap-zoom guard as
   .jr-carousel-control above belongs here. */
.jr-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--jr-color-ink);
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
}

.jr-carousel-dot[aria-current="true"] {
    background: var(--jr-color-ink);
}

@media (max-width: 1023px) {
    .jr-site-header {
        --jr-header-height: 64px;
    }

    .jr-site-header__inner {
        width: calc(100% - 32px);
        gap: var(--jr-space-2);
    }

    .jr-site-header__logo {
        width: 86px;
        height: 29px;
    }

    .jr-site-header__nav,
    .jr-site-header__global {
        display: none;
    }

    .jr-site-header__toggle {
        display: inline-grid;
    }

    .jr-mobile-drawer {
        position: fixed;
        z-index: 980;
        /* `bottom` (a containing-block-relative inset) is avoided here: the
           header's own transform (scroll show/hide) makes it this element's
           containing block, so `bottom: 0` would resolve against the
           header's own short height instead of the viewport, collapsing
           this panel to ~0px. `height` with `100vh` stays viewport-relative
           regardless of containing block. */
        top: var(--jr-header-height);
        right: 0;
        left: 0;
        height: calc(100vh - var(--jr-header-height));
        display: block;
    }

    .jr-mobile-drawer__panel {
        position: relative;
        width: min(100%, 430px);
        height: 100%;
        margin-left: auto;
        padding: var(--jr-space-5) var(--jr-space-5) var(--jr-space-10);
        color: var(--jr-color-ink);
        background: var(--jr-color-surface);
        overflow-y: auto;
        box-shadow: -18px 0 48px rgba(18, 18, 18, 0.12);
    }

    .jr-mobile-drawer__nav {
        display: flex;
        flex-direction: column;
    }

    .jr-mobile-drawer__link {
        position: relative;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--jr-color-ink);
        font-size: var(--jr-text-md);
        font-weight: var(--jr-font-weight-semibold);
        text-decoration: none;
        border-bottom: 1px solid var(--jr-color-line);
    }

    .jr-mobile-drawer__link::after {
        content: "";
        width: 6px;
        height: 6px;
        border-top: 1px solid currentColor;
        border-right: 1px solid currentColor;
        transform: rotate(45deg);
    }

    .jr-mobile-drawer__link.is-active,
    .jr-mobile-drawer__link[aria-current="page"] {
        color: var(--jr-color-red);
    }

    /* 商品一覧 row — link keeps its own tap target/active-state handling
       (unchanged); the accordion toggle is a separate button beside it so
       tapping the label still navigates like every other drawer link. */
    .jr-mobile-drawer__item {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid var(--jr-color-line);
    }

    .jr-mobile-drawer__item .jr-mobile-drawer__link {
        flex: 1 1 auto;
        border-bottom: 0;
    }

    .jr-mobile-drawer__link--has-submenu::after {
        content: none;
    }

    .jr-mobile-drawer__submenu-toggle {
        width: 56px;
        display: inline-flex;
        flex: none;
        align-items: center;
        /* Flush against the row's own right edge — the same edge every
           other row's ::after arrow sits flush against — instead of
           centered in this button's own 56px tap-target box. */
        justify-content: flex-end;
        color: var(--jr-color-ink);
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    .jr-mobile-drawer__submenu-chevron {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform var(--jr-duration-fast) ease;
    }

    .jr-mobile-drawer__submenu-toggle[aria-expanded="true"] .jr-mobile-drawer__submenu-chevron {
        transform: rotate(180deg);
    }

    .jr-mobile-drawer__submenu {
        padding: var(--jr-space-3) 0 var(--jr-space-4) var(--jr-space-4);
        border-bottom: 1px solid var(--jr-color-line);
    }

    .jr-mobile-drawer__submenu-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 32px;
        margin-bottom: var(--jr-space-4);
    }

    .jr-mobile-drawer__submenu-group:last-child {
        margin-bottom: 0;
    }

    .jr-mobile-drawer__submenu-title {
        grid-column: 1 / -1;
        display: block;
        margin-bottom: var(--jr-space-2);
        color: var(--jr-color-ink);
        font-size: var(--jr-text-sm);
        font-weight: var(--jr-font-weight-semibold);
        text-decoration: none;
    }

    .jr-mobile-drawer__submenu-group a:not(.jr-mobile-drawer__submenu-title) {
        display: block;
        padding: 6px 0;
        color: var(--jr-color-ink);
        font-size: var(--jr-text-sm);
        text-decoration: none;
    }

    .jr-mobile-drawer__submenu-group a.is-active:not(.jr-mobile-drawer__submenu-title),
    .jr-mobile-drawer__submenu-group a[aria-current="page"]:not(.jr-mobile-drawer__submenu-title) {
        color: var(--jr-color-red);
    }

    .jr-mobile-drawer__global {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--jr-space-3);
        margin-top: var(--jr-space-6);
        padding-inline: var(--jr-space-4);
        color: var(--jr-color-white);
        font-size: var(--jr-text-sm);
        font-weight: var(--jr-font-weight-semibold);
        text-decoration: none;
        background: var(--jr-color-ink);
    }

    .jr-mobile-drawer__sns {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        padding: var(--jr-space-5) var(--jr-space-4);
    }

    .jr-mobile-drawer__sns-link {
        display: flex;
    }

    .jr-mobile-drawer__sns-link img {
        width: auto;
        height: 32px;
        object-fit: contain;
    }

    
    }

/* Mobile phones only — narrower column gap for the 商品一覧 drawer
   submenu grid than the tablet default set above (32px), plus this
   breakpoint's own drawer typography (see the Tablet block below for its
   counterpart) — kept apart per-breakpoint instead of sharing one
   <=1023px block so PC/Tablet/Mobile can each carry their own sizes. */
@media (max-width: 767px) {
    .jr-mobile-drawer__submenu-group {
        column-gap: 20px;
    }

    .jr-mobile-drawer__link {
        font-size: 18px;
        font-weight: 600;
    }

    .jr-mobile-drawer__submenu-title {
        font-size: 18px;
        font-weight: 600;
    }

    .jr-mobile-drawer__submenu-group a:not(.jr-mobile-drawer__submenu-title) {
        font-size: 15px;
        font-weight: 400;
    }
}

/* Tablet only — drawer typography a step up from Mobile's, still smaller
   than PC's mega-menu since the panel itself is narrower. */
@media (min-width: 768px) and (max-width: 1023px) {
    .jr-mobile-drawer__link {
        font-size: 18px;
        font-weight: 600;
    }

    .jr-mobile-drawer__submenu-title {
        font-size: 20px;
        font-weight: 600;
    }

    .jr-mobile-drawer__submenu-group a:not(.jr-mobile-drawer__submenu-title) {
        font-size: 15px;
        font-weight: 400;
    }
}

@media (min-width: 1024px) {
    .jr-site-header__inner {
        width: 100%;
        padding-inline: clamp(24px, 5.56vw, 80px);
    }
}

@media (min-width: 1024px) {
    .jr-site-header__nav-link:hover {
        color: var(--jr-color-red);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jr-site-header,
    .jr-site-header__logo-image,
    .jr-site-header__nav-link::after,
    .jr-site-header__toggle-lines span {
        transition: none;
    }
}

/* Keep hidden overlays out of every layout mode. */
.jr-mobile-drawer[hidden] {
    display: none !important;
}

html.jr-overlay-is-open,
html.jr-overlay-is-open body {
    overflow: hidden;
}

@media (max-width: 1023px) {
    .jr-site-header[data-jr-nav-open="true"] .jr-mobile-drawer {
        display: block;
    }

    .jr-site-header[data-jr-nav-open="true"] .jr-mobile-drawer__panel {
        position: absolute;
        inset: 0 0 0 auto;
    }
}

/* ============================================================
   ENJOY — responsive lifestyle features and gallery
   Shared TOP component, reused verbatim by products.html.
   ============================================================ */
.top-enjoy {
    width: 100%;
    padding: var(--jr-section-space-y) 0;
    overflow: hidden;
    color: var(--jr-color-ink);
    background: var(--jr-color-surface);
}

.top-enjoy__inner {
    width: min(100% - 80px, 1280px);
    margin-inline: auto;
}

.top-enjoy__heading {
    margin: 0 auto clamp(48px, 6vw, 82px);
    text-align: center;
}

.top-enjoy__title {
    margin: 0;
}

.top-enjoy__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3.2vw, 48px);
}

.top-enjoy__feature {
    min-width: 0;
}

.top-enjoy__feature-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: var(--jr-color-surface-soft);
}

.top-enjoy__feature-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--jr-duration-slow) var(--jr-ease-standard);
}

.top-enjoy__feature:first-child .top-enjoy__feature-media img {
    object-position: 56% center;
}

.top-enjoy__feature-media:hover img,
.top-enjoy__feature-media:focus-visible img {
    transform: scale(1.035);
}

.top-enjoy__feature-media:focus-visible,
.top-enjoy__feature-link:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 5px;
}

.top-enjoy__feature-copy {
    /* p + h3 stack in column 1; the link sits beside them in column 2
       (was a block below the h3, full-width). */
    padding: 24px 2px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 20px;
}

.top-enjoy__feature-copy > p {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 9px;
    color: var(--jr-color-red);
    font-size: var(--jr-card-label-size);
    font-weight: var(--jr-card-label-weight);
    letter-spacing: 0.12em;
}

.top-enjoy__feature-copy h3 {
    grid-column: 1;
    grid-row: 2;
    min-height: 2.7em;
    margin: 0;
    font-family: var(--jr-font-serif-jp);
    font-size: var(--jr-card-title-size);
    font-weight: var(--jr-card-title-weight);
    line-height: 1.35;
    letter-spacing: -0.035em;
}

.top-enjoy__feature-link {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    height: 56px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    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;
}

.top-enjoy__feature-link::after {
    content: none;
}

.top-enjoy__feature-link:hover,
.top-enjoy__feature-link:focus-visible {
    color: #fff;
    background: var(--jr-color-ink);
}

@media (max-width: 767px) {
    .top-enjoy__inner { width: calc(100% - 40px); }
    .top-enjoy__heading { margin-bottom: 38px; }
    .top-enjoy__features { grid-template-columns: 1fr; gap: 45px; }
    .top-enjoy__feature-media { aspect-ratio: 1.42 / 1; }
    .top-enjoy__feature:first-child .top-enjoy__feature-media img { object-position: 61% center; }
    /* Same "text left (1fr) / CTA right (auto)" 2-column layout as
       PC/Tablet — only the column gap and the button's own font-size/
       padding shrink to fit a ~350px-wide card. The link keeps its base
       grid-column:2 / grid-row:1/3 placement (unset here on purpose), so
       it sits beside the eyebrow+title block, vertically centered across
       both their rows via the container's own align-items:center — never
       a separate row below the title, and never width:100% (its
       display:inline-flex + an auto column track size it to content). */
    .top-enjoy__feature-copy { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 17px 0 0; }
    .top-enjoy__feature-copy > p { margin-bottom: 7px; }
    .top-enjoy__feature-copy h3 { min-height: 0; }
    .top-enjoy__feature-link { padding: 0 16px; gap: 6px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .top-enjoy__feature-media img,
    .top-enjoy__feature-link::after { transition: none; }
    .top-enjoy__feature-media:hover img { transform: none; }
}

/* Fluid desktop content guide: 80px maximum side gutter at 1440px.
   Mirrors styles.css's consolidated TOP container rule for the two
   classes products.html also reuses (top-pickup__inner, top-enjoy__inner). */
@media (min-width: 768px) {
    .top-pickup__inner,
    .top-enjoy__inner {
        width: 100%;
        padding-inline: clamp(24px, 5.56vw, 80px);
    }
}