/* ── SHOWCASE ── */
        #showcase {
            background: var(--cream);
            padding: 80px 20px 88px;
        }
        @media (min-width: 768px) { #showcase { padding: 100px 80px 112px; } }
        #showcase-inner { max-width: 1120px; margin: 0 auto; }
        #showcase-head { margin-bottom: 52px; }
        .showcase-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.8rem, 4vw, 3rem);
            font-weight: 300; color: var(--blue-dark);
            line-height: 1.12; margin-top: 12px;
        }
        #showcase-scroll-wrap { position: relative; }
        .sc-arrow {
            display: none;
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 46px; height: 46px; border-radius: 50%;
            background: rgba(250,248,245,0.94); border: 1px solid rgba(8,9,64,0.1);
            color: var(--blue-dark); font-size: 22px; font-family: 'Cormorant Garamond', serif;
            align-items: center; justify-content: center;
            cursor: pointer; z-index: 5;
            box-shadow: 0 6px 20px rgba(8,9,64,0.16);
            transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
        }
        @media (min-width: 768px) { .sc-arrow { display: flex; } }
        .sc-arrow:hover { background: var(--gold); color: #fff; }
        .sc-arrow[disabled] { opacity: 0; pointer-events: none; }
        .sc-arrow-prev { left: 4px; }
        .sc-arrow-next { right: 4px; }
        @media (min-width: 1200px) { .sc-arrow-prev { left: -23px; } .sc-arrow-next { right: -23px; } }
        #showcase-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            margin: 0 -20px;
            padding: 0 20px 4px;
            scroll-snap-type: x mandatory;
            scroll-padding-left: 20px;
            cursor: grab;
        }
        @media (min-width: 768px) { #showcase-scroll { margin: 0 -80px; padding: 0 80px 4px; scroll-padding-left: 80px; } }
        #showcase-scroll::-webkit-scrollbar { display: none; }
        #showcase-scroll.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
        #showcase-scroll.dragging .sc-card { pointer-events: none; }
        @media (max-width: 767px) {
            /* `scroll-snap-type: none` is load-bearing: the base rule sets
               `x mandatory`, and leaving the snap engine active on a container
               whose contents GSAP is translating lets the two fight. */
            #showcase-scroll.pin-driven { overflow-x: hidden; touch-action: pan-y; scroll-snap-type: none; }
            #showcase-scroll.sticky-driven { position: sticky; top: var(--sc-sticky-top, 76px); }
        }
        #showcase-grid {
            display: flex;
            gap: 24px;
            width: max-content;
        }
        @media (min-width: 768px) { #showcase-grid { gap: 40px; } }
        .sc-card {
            background: #fff;
            border: 1px solid rgba(0,0,0,0.07);
            overflow: hidden;
            width: min(86vw, 480px); flex-shrink: 0;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        border-color 0.4s ease;
            cursor: default;
        }
        @media (min-width: 768px) { .sc-card { width: 560px; } }
        @media (min-width: 1280px) { .sc-card { width: 640px; } }
        @media (hover: hover) {
            .sc-card:hover {
                box-shadow: 0 8px 28px rgba(8,9,64,0.1), 0 2px 8px rgba(8,9,64,0.05);
                transform: translateY(-5px);
                border-color: rgba(197,160,89,0.22);
            }
            .sc-card:hover .sc-card-img img { transform: scale(1.05); }
            .sc-card:hover .sc-card-gold { width: 100%; }
            .sc-card:hover .sc-card-name { transform: translateY(-3px); }
        }
        .sc-card-img {
            aspect-ratio: 4/5; overflow: hidden; position: relative;
            background: #ddd9d1;
        }
        @media (max-width: 767px) { .sc-card-img { aspect-ratio: 4/4.2; } }
        .sc-card-img img {
            width: 100%; height: 100%; object-fit: cover;
            display: block;
            transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .sc-card-img img[src=""] { display: none; }
        .sc-card-img:not(:has(img:not([src=""])))::after {
            content: attr(data-label);
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Cormorant Garamond', serif;
            font-size: 16px; letter-spacing: 0.4em; text-transform: uppercase;
            color: rgba(0,0,0,0.22);
        }
        .sc-card-body { padding: 18px 22px 20px; }
        @media (min-width: 768px) { .sc-card-body { padding: 28px 34px 34px; } }
        .sc-card-top {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px;
        }
        .sc-card-jp {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.05rem; color: var(--gold); letter-spacing: 0.06em;
        }
        .sc-card-grade {
            font-family: 'Prompt', sans-serif;
            font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase;
            color: var(--gold);
            border: 1px solid rgba(197,160,89,0.38);
            border-radius: 20px;
            padding: 5px 11px;
            white-space: nowrap;
        }
        .sc-card-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.7rem; font-weight: 500;
            color: var(--blue-dark); margin: 0 0 12px;
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        @media (min-width: 768px) { .sc-card-name { font-size: 2.05rem; } }
        .sc-card-gold {
            display: block; height: 1px; background: var(--gold);
            width: 28px; margin-bottom: 14px;
            transition: width 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .sc-card-provenance {
            font-family: 'Prompt', sans-serif;
            font-size: 0.72rem; letter-spacing: 0.03em;
            color: rgba(0,0,0,0.52); margin: 0 0 9px;
        }
        .sc-card-flavor {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic; font-size: 0.95rem;
            color: rgba(0,0,0,0.62); margin: 0 0 12px;
        }
        .sc-card-best {
            font-family: 'Prompt', sans-serif;
            font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
            color: rgba(0,0,0,0.3); margin: 0;
        }