/* ============================================================
   JINRO — Product Detail (product-jinro.html only)

   Not a new design system: every block here reuses products.html's
   existing tokens/components (--jr-* custom properties, .jr-section-shell,
   .jr-dark-section, .products-section-heading/.jr-section-title/
   .jr-section-intro, .product-cta). Only the layout scaffolding that
   products.html has no equivalent for (hero 2-col, lineup rows, story
   copy) is new, scoped under .product-detail-*.
   ============================================================ */

/* The shared header's "transparent" state (white text, no bg) exists so it
   can float over TOP/products.html's dark full-bleed hero art. This page's
   first screen is a plain white surface instead, so the same
   transparent state would render the nav invisible (white on white). No
   per-page hook exists in the shared header for this, so it's pinned to
   the "solid" look here via CSS rather than touching the shared
   header/common.js scroll logic that TOP/products.html both depend on. */
.product-detail-page [data-jr-header] {
    color: var(--jr-color-ink) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

/* ---- White surface override ----
   This page used .jr-dark-section (components.css) for Banner/Lineup, a
   #121212 dark background. Overridden here, scoped to .product-detail-page
   only — the shared .jr-dark-section rule itself (used elsewhere) is
   untouched. Every child color below (sub-nav, lineup title/spec/
   placeholder) is likewise remapped from its white/rgba(255,255,255,*)
   values to the standard ink/muted/line tokens so the whole page reads as
   one continuous white surface, with section breaks handled by spacing/
   borders instead of a background color. */
.product-detail-page .jr-dark-section {
    color: var(--jr-color-ink);
    background: #fff;
}

/* ---- Product Detail Sub Navigation ----
   Product-switcher tab strip under its own .product-subnav* classes so
   it never shares selectors/JS with products.html's .products-tabs
   .chip category-filter component. Typography is shared via the
   --jr-subnav-* tokens (foundation.css); Normal/Hover/Active differ
   only by color (gray → ink → JINRO red), no underline. Meant as a
   shared "Product Detail Sub Navigation"
   component for every future product detail page — only the <li> content
   and the active item change per page. No MORE/dropdown: every product
   sits inline in one horizontally-scrolling row, with visible prev/next
   arrow buttons as a discoverability aid on top of native scroll/swipe
   (assets/js/product-subnav.js drives their enabled/disabled state, the
   smooth-scroll on click, and scrolling the active item into view on
   load). */
/* Sticky: stays in normal flow until scrolled to --product-subnav-top,
   then sticks there — CSS position:sticky handles the "stick once it
   reaches the top" behavior natively, no scroll-position JS needed for
   that part. --product-subnav-top itself IS set by JS
   (assets/js/product-subnav.js), because it has to track two things
   neither foundation.css nor components.css expose as a reusable value:
   the shared header's actual rendered height (96px desktop / 64px
   tablet+mobile, scoped as --jr-header-height on .jr-site-header itself,
   not on :root) and that header's own show/hide-on-scroll state
   (data-jr-header-visibility) — collapsing to 0 while the header is
   scrolled away so the sub-nav slides up flush to the viewport top with
   no gap, and back to the header's height once it reappears. z-index:900
   keeps it below the shared header (1000, including its GNB mega-menu/
   mobile drawer) but above Banner/Lineup/every other section here. */
.product-subnav {
    position: sticky;
    top: var(--product-subnav-top, 0px);
    z-index: 900;
    margin-top: 32px;
    padding-block: 16px;
    background: #fff;
}

.wrap.jr-section-shell.product-subnav__inner {
    max-width: var(--jr-layout-max);
    margin-inline: auto;
}

.product-subnav__viewport {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-subnav__list {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 40px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.product-subnav__list::-webkit-scrollbar {
    display: none;
}

.product-subnav__link {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    gap: 6px;
    min-height: 64px;
    padding: 0;
    color: #5c5c5c;
    font-size: var(--jr-subnav-font-size);
    font-weight: var(--jr-subnav-font-weight);
    line-height: var(--jr-subnav-line-height);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.25s ease;
}

.product-subnav__link:hover,
.product-subnav__link.is-active {
    color: var(--jr-color-red, #e10017);
}

/* ---- Arrows ----
   A real button, not a faint decorative glyph: solid-enough background so
   it reads as a control at a glance, full-white icon (not a dimmed
   gray/opacity trick), 44x44 hit area (24px icon centered inside),
   brightens further on hover. Disabled state stays visible (0.35 opacity)
   rather than disappearing, so the user can always see there IS a
   direction, just not available right now. */
.product-subnav__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--jr-color-ink);
    background: transparent;
    border: 1px solid var(--jr-color-line);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.product-subnav__arrow:hover {
    background: var(--jr-color-surface-soft, #F0F1F1);
    border-color: var(--jr-color-ink);
}

.product-subnav__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    background: transparent;
}

.product-subnav__arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .product-subnav__list {
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .product-subnav__list {
        gap: 28px;
    }

    .product-subnav__link {
        min-height: 58px;
    }

    /* Swipe is the primary way to move at this width; arrows shrink to
       stay out of the way of the menu itself rather than disappearing
       entirely (the nav must still read as one line, not two). */
    .product-subnav__arrow {
        width: 36px;
        height: 36px;
    }

    .product-subnav__arrow svg {
        width: 18px;
        height: 18px;
    }
}

/* ---- Banner: single full-width KV image, replaces the old two-column
   Hero. Stays inside the page's dark section background so it reads as
   one continuous dark surface with the sub-nav above and Lineup below —
   only the image itself is capped/centered at 1440. */
.product-detail-banner {
    padding: 0 0 var(--jr-space-8, 32px);
    scroll-margin-top: var(--product-subnav-height, 0px);
}

.wrap.jr-section-shell.product-detail-banner__inner {
    max-width: var(--jr-layout-max);
    margin-inline: auto;
}

.product-detail-banner__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Lineup: white section, plain rows — no shopping-mall product cards. */
.product-detail-lineup {
    padding: 80px 0 0;
    scroll-margin-top: var(--product-subnav-height, 0px);
}

.wrap.jr-section-shell.product-detail-lineup__inner {
    max-width: var(--jr-layout-max);
    margin-inline: auto;
}

/* Lineup is split into named groups (25%／限定ボトル／20%) so each
   strength/edition stays on its own row instead of spilling into
   whichever 4-column row it happens to land on — every group gets its
   own heading + its own .product-detail-lineup__grid. */
.product-detail-lineup__group + .product-detail-lineup__group {
    margin-top: 96px;
}

/* Half the page's Section Title scale (Heading01: 64/48/36 — TOP/products
   section headings) rather than a new size of its own. OPTIONAL: a
   .product-detail-lineup__group only needs this <h3> when the product
   actually has a named group/strength to label (e.g. JINRO's 25% /
   限定ボトル / 20%). A single-SKU product with no such data omits the
   element entirely — never render an empty <h3> or hide one with CSS,
   since the element's own margin is what would leave the gap behind. */
.product-detail-lineup__group-title {
    font-family: var(--jr-font-brand-heading);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0 0 40px;
    color: var(--jr-color-ink);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.005em;
}

/* Same idea as products.html's .product-track grid (PC 4-col) but plain
   text + divider under each — no card boxes, no rounded panels. Row gap
   starts from that grid's own 80px PC value; column gap goes wider than
   its 24px because this card also carries a full spec list beneath the
   name (products.html's cards don't), so neighboring specs need more
   breathing room or they read as touching. */
.product-detail-lineup__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 96px 40px;
}

.product-detail-lineup__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Same visual footprint as .products-page .product-media (products.css):
   width:min(100%,310px) on a 3:4 box. object-fit stays contain (not
   products.html's cover) so the bottle is never cropped. */
.product-detail-lineup__media {
    width: 100%;
    max-width: 310px;
    aspect-ratio: 3 / 4;
}

.product-detail-lineup__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Explicit "no image yet" placeholder — never a stretched/reused product
   photo standing in for a capacity we don't have real art for. */

.product-detail-lineup__badge {
    display: block;
    margin: 0 0 6px;
    color: var(--jr-color-red, #e10017);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Card Title — shared --jr-card-title-size/-weight tokens (foundation.css),
   same as .products-page .product-name, .cocktail-card__name, etc. */
.product-detail-lineup__name {
    margin: 12px 0 0;
    font-family: var(--jr-font-serif-jp);
    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-product-name-letter-spacing);
}

/* OPTIONAL — same rule as .product-detail-lineup__group-title: only
   rendered when a product actually has copy to show (e.g. JINRO
   マッコリ's per-flavor description). Reuses the project's existing
   Card Description tokens rather than inventing new type. */
.product-detail-lineup__desc {
    margin: 8px 0 0;
    color: var(--jr-color-muted);
    font-size: var(--jr-card-desc-size, 14px);
    font-weight: var(--jr-card-desc-weight, 400);
    line-height: var(--jr-card-desc-line-height, 1.6);
    /* Reserve a common 2-line block so Spec starts on the same row across
       a card's neighbors regardless of actual description length — a
       1-line description just leaves the 2nd line's height empty, a
       3+-line one grows past it in full (no line-clamp/truncation). */
    min-height: calc(var(--jr-card-desc-line-height, 1.6) * 2em);
}

.product-detail-lineup__spec {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 28px;
}

/* Label at --jr-text-sm (14→ now the dt-only size below), value one step
   up at --jr-text-md (16px) — reusing the project's existing type scale
   rather than inventing new sizes. line-height 1.5 gives each row room to
   breathe without turning the list into a table. */
.product-detail-lineup__spec div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    line-height: 1.5;
    border-bottom: 1px solid var(--jr-color-line);
}

.product-detail-lineup__spec dt {
    font-size: 16px;
    color: var(--jr-color-muted);
}

.product-detail-lineup__spec dd {
    margin: 0;
    font-size: var(--jr-text-md, 16px);
    color: var(--jr-color-ink);
    font-weight: 600;
}

/* OPTIONAL — quiet supplementary status text (e.g. 製造終了), only
   rendered when a product actually has a status to report; sits after
   the spec list is done, not as a badge/label competing with the name.
   Deliberately plain: muted color, no weight/border/background/icon. */
.product-detail-lineup__status {
    margin: 12px 0 0;
    color: var(--jr-color-muted);
    font-size: var(--jr-card-desc-size, 14px);
    font-weight: 400;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .product-detail-lineup__group + .product-detail-lineup__group {
        margin-top: 64px;
    }

    .product-detail-lineup__group-title {
        margin-bottom: 32px;
        font-size: 24px;
    }

    .product-detail-lineup__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px 24px;
    }

    .product-detail-lineup__media {
        max-width: 320px;
    }

}

@media (max-width: 767px) {
    .product-detail-lineup__group + .product-detail-lineup__group {
        margin-top: 56px;
    }

    .product-detail-lineup__group-title {
        margin-bottom: 28px;
        font-size: 18px;
    }
    /* 18px matches half of Section Title's 36px mobile value exactly. */

    .product-detail-lineup__grid {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .product-detail-lineup__media {
        max-width: 320px;
    }

}

/* ---- Family Section — used only by pages that group several distinct
   product families on one Lineup (e.g. product-chamisul-jp.html's
   チャミスル／トクトク). Each family after the first opens
   with its own small in-page banner, then repeats .product-detail-lineup
   as-is — Sub Nav/JINROを楽しむ/Footer are never repeated, so
   this is spacing + a narrower banner only, no new card/grid component.
   scroll-margin-top mirrors .product-detail-banner/.product-detail-lineup
   above so #tokutoku anchor links land below the sticky
   header + sub-nav instead of under them. */
.product-detail-family-section {
    margin-top: 96px;
    scroll-margin-top: var(--product-subnav-height, 0px);
}

/* Deliberately narrower than .product-detail-banner__image's full
   --jr-layout-max width — this is an in-page divider between product
   families, not a second page Hero. */
.product-detail-family-banner {
    max-width: 900px;
    margin: 0 auto;
}

.product-detail-family-banner img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .product-detail-family-section {
        margin-top: 72px;
    }
}

@media (max-width: 767px) {
    .product-detail-family-section {
        margin-top: 56px;
    }
}

/* ============================================================
   POSTER — shared component (assets/js/product-poster.js +
   assets/js/poster-data.js), reused across every product detail page via
   [data-product-poster-key]. Sits between Lineup (dark, .jr-dark-section)
   and JINROを楽しむ (light, var(--jr-color-surface)) — white here, not
   dark, so the page reads dark -> white -> surface instead of zig-
   zagging back to dark for one section. Reuses the page's existing
   language throughout: .jr-section-title/.jr-section-heading (Section
   Title rule), the .wrap.jr-section-shell + --jr-layout-max 1440px
   container already used by Banner/Lineup above, the Lineup "no image
   yet" dashed placeholder language for missing poster art, news.html's
   .news-filter__select visual language for the native year <select>
   (just re-scoped to .product-poster__select), and the site's shared
   carousel chrome as-is: .jr-carousel-controls/.jr-carousel-control/
   .jr-carousel-dots (components.css) driven by the same
   assets/js/carousel.js used by top-pickup/Recruit — no new arrow
   design, no new carousel engine. Track/slide sizing below (flex-basis
   per breakpoint) is what makes carousel.js compute 3/2/1 slides
   visible per its own generic visibleCount() formula. */
.product-poster {
    padding: var(--jr-section-space-y) 0 0;
    background: #fff;
    color: var(--jr-color-ink);
    scroll-margin-top: var(--product-subnav-height, 0px);
}

.wrap.jr-section-shell.product-poster__inner {
    max-width: var(--jr-layout-max);
    margin-inline: auto;
}

/* Overrides the shared .jr-section-heading's default clamp(48px, 6vw, 82px)
   bottom margin for this section only — narrower gap between the title
   and the year dropdown/carousel below it. */
.product-poster .jr-section-heading {
    margin-bottom: 64px;
}

.product-poster__filter {
    display: flex;
    justify-content: center;
    margin: 0 0 clamp(32px, 3.5vw, 48px);
}

/* Same treatment as news.html's .news-page .news-filter__select — a
   native <select> styled off .jr-pill-control, just re-scoped here. */
.product-poster__select {
    padding-right: 52px;
    color: var(--jr-color-ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 24px center / 16px 16px;
    border-color: var(--jr-color-line);
    appearance: none;
    -webkit-appearance: none;
}

.product-poster__select:hover {
    border-color: var(--jr-color-ink);
}

.product-poster__select:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

.product-poster__viewport {
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
}

.product-poster__track {
    width: 100%;
    gap: 24px;
}

/* PC: exactly 3 visible — carousel.js's visibleCount() derives the
   count from this flex-basis, not a hardcoded number. */
.product-poster__slide {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: calc((100% - 48px) / 3);
}

.product-poster__controls {
    margin: 32px 0 0;
}

.product-poster__controls.is-hidden {
    display: none;
}

.product-poster__media {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--jr-color-surface-soft);
    border-radius: 8px;
}

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

.product-poster__slide:hover .product-poster__media img {
    transform: scale(1.035);
}

.product-poster__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jr-color-muted);
    font-size: 12px;
    letter-spacing: 0.05em;
    border: 1px dashed var(--jr-color-line);
}

.product-poster__name {
    margin: 16px 0 4px;
    color: var(--jr-color-ink);
    font-size: var(--jr-card-title-size, 18px);
    font-weight: var(--jr-card-title-weight, 600);
}

.product-poster__year {
    color: var(--jr-color-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Tablet: 2 visible — a natural recompute, not the PC 3-column width
   forced smaller. */
@media (min-width: 768px) and (max-width: 1023px) {
    .product-poster .jr-section-heading {
        margin-bottom: 48px;
    }

    .product-poster__track {
        gap: 20px;
    }

    .product-poster__slide {
        flex: 0 0 calc((100% - 20px) / 2);
        min-width: calc((100% - 20px) / 2);
    }
}

/* Mobile: 1 visible. */
@media (max-width: 767px) {
    .product-poster .jr-section-heading {
        margin-bottom: 32px;
    }

    .product-poster__slide {
        flex: 0 0 100%;
        min-width: 100%;
    }
}