/* Cinedesign V3 - Cinematic Industrial Theme */

:root {
    --cine-black: #000000;
    --cine-dark-grey: #111111;
    --cine-yellow: #F76C04;
    --cine-orange: #F76C04;
    --cine-text-main: #FFFFFF;
    --cine-text-muted: #CCCCCC;
    --cine-border: #333333;
}

/* --- Fonts --- */
/* PP Nikkei Journal - Ultrabold Italic for headers */
@font-face {
    font-family: 'PPNikkeiJournal';
    src: url('../fonts/journal/PPNikkeiJournal-UltraboldItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'PPNikkeiMaru-Regular';
    src: url('../fonts/PPNikkeiMaru-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Display/title font (2026 redesign) */
@font-face {
    font-family: 'CineTitle';
    src: url('../fonts/title-font.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
/* title-font.otf has NO accented glyphs (é è à ç render as plain letters). This face is listed
   BEFORE CineTitle in the display stacks and covers only Latin-1/Extended-A accents, so accented
   letters come from Journal Ultrabold Italic while everything else stays CineTitle. */
@font-face {
    font-family: 'CineTitleAcc';
    src: url('../fonts/journal/PPNikkeiJournal-UltraboldItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    unicode-range: U+00C0-00FF, U+0100-017F;
}

body {
    background-color: var(--cine-black);
    color: var(--cine-text-main);
    margin: 0;
    font-family: 'PPNikkeiMaru-Regular', sans-serif;
    position: relative;
}

/* Fixed Top Orange Bar */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--cine-orange);
    z-index: 9999;
}

/* --- Typography --- */
h1, h2, h3, .cine-header {
    font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif;
    margin: 0;
    line-height: 0.9em;
}

/* --- Global Reset & Utils --- */
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }

/* Centered Content Container */
.cine-container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px; /* Add padding to prevent edge collision if constrained */
}

/* --- Layout: Split Screen (Product) --- */
.split-layout {
    display: flex;
    max-width: 1200px;
    margin: 120px auto 0;
    width: 100%;
    position: relative;
    height: auto;
    overflow: visible;
}

.split-left {
    flex: 1; /* 50% width */
    position: relative;
}
.split-left::-webkit-scrollbar { display: none; }

.split-left .image-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.split-left .image-stack img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.split-right {
    flex: 1; /* 50% width */
    position: sticky; /* Keep static while scrolling */
    top: 120px;
    height: fit-content;
    background-color: transparent;
    padding: 0 0 0 60px;
    z-index: 10;
}

.split-right .cine-container {
    max-width: 100%; /* Fill the column width */
    margin-left: 0;
    padding: 0;
}

/* --- Components --- */

/* Tag Holder */
.cine-tag-holder {
    position: relative;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center items */
    margin-bottom: 24px;
}

/* Fitment Icon (Gradient SVG) */
.fitment-icon {
    max-height: 48px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Product Page Title */
.product-title {
    font-size: 9em;
    font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif;
    font-weight: 900;
    line-height: 0.85em;
    margin-bottom: 24px;
    color: #fff;
}

.product-bullets {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-size: 18px; /* Adjustable */
    font-weight: 900;
    font-style: italic;
    line-height: 1.4em;
    padding-left: 20px;
}

/* Full Menu Overlay */
#full-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 8, 0, 0.95); /* Dark semi-transparent as requested */
    backdrop-filter: blur(10px);
    z-index: 200;
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#full-menu-overlay.active {
    display: flex;
}
.menu-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.menu-link {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-size: 80px; /* Large size */
    font-style: italic;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.9em;
    transition: color 0.2s ease, transform 0.2s ease;
}
.menu-link:visited {
    color: #fff;
}
.menu-link:hover {
    color: var(--cine-orange);
    transform: scale(1.05);
}
.menu-link.view-all {
    margin-top: 40px;
    color: #666; /* Muted for View All initially */
}
.menu-link.view-all:hover {
    color: #fff;
}

/* Badge: NEW (Stenciled) */
.cine-badge-new {
    color: var(--cine-black);
    background-color: var(--cine-yellow);
    font-family: 'PPNikkeiJournal', sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    padding: 2px 8px;
    margin-left: auto; /* Push to the right in flex container */
    display: inline-block;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.action-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}
.price-tag {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-size: 24px;
    font-weight: 900;
    font-style: italic;
    color: #fff;
    margin-right: auto; /* Pushes buttons to the right if needed, or keep inline */
}
.cine-btn-v3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px; /* Reduced padding */
    border-radius: 999px;
    font-family: 'PPNikkeiJournal', sans-serif;
    font-size: 18px; /* Reduced font size */
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
}

.cine-btn-v3.primary {
    background: linear-gradient(90deg, var(--cine-yellow), var(--cine-orange));
    color: var(--cine-black);
}

.cine-btn-v3.secondary {
    background-color: #333;
    color: #999;
}
.cine-btn-v3.secondary:hover {
    color: #fff;
    background-color: #444;
}

/* Specs Table (Rounded & Bordered) - Smaller version */
.specs-container {
    border: 1px solid var(--cine-border);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'PPNikkeiJournal', sans-serif;
    font-weight: 900;
    font-style: italic;
    margin-top: 24px;
    max-width: 100%; /* Fill available space */
}

.specs-row {
    display: flex;
    border-bottom: 1px solid var(--cine-border);
}
.specs-row:last-child {
    border-bottom: none;
}

.specs-col {
    padding: 10px 16px; /* Reduced padding */
    font-size: 14px;    /* Reduced font size */
    text-transform: uppercase;
}

.specs-label {
    flex: 0 0 40%;
    color: var(--cine-text-muted);
    border-right: 1px solid var(--cine-border);
    font-weight: bold; /* Bold column */
}


/* --- Home / Catalog View --- */
.hero-scroll-container {
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    background-color: var(--cine-black);
}
.hero-scroll-container::-webkit-scrollbar { display: none; }

.hero-card {
    position: relative;
    width: 100%;
    height: 100vh; /* Full screen per card */
    scroll-snap-align: start;
    overflow: hidden;
    background-color: var(--cine-dark-grey);
}

/* Background Image with Zoom Effect */
.hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 10s ease; /* Subtle zoom */
}
.hero-card:hover .hero-bg {
    transform: scale(1.05);
}

/* Dark Gradient Overlay */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

/* Home-Specific Titles */
.hero-title {
    font-size: clamp(44px, 9vw, 170px);   /* fluid: one long word ("Accessoires") must always fit */
    line-height: 0.84em;
    color: #fff;
    max-width: 92vw;
    overflow-wrap: anywhere;
    hyphens: auto;
    margin-bottom: 24px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Home Tag positioning */
.hero-tag-pos {
    margin-bottom: 12px;
    width: 300px;
}

/* Home Buttons Row */
.hero-actions {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    opacity: 0; /* Hidden by default or animated in */
    transform: translateY(20px);
    transition: all 0.5s ease;
}
.hero-card:hover .hero-actions {
    opacity: 1;
    transform: translateY(0);
}

/* --- Navigation --- */
.cine-nav {
    position: fixed;
    top: 20px; /* Moved up from 30px */
    right: 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 500; /* Increased z-index */
    font-family: 'PPNikkeiJournal', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 14px;
    text-transform: uppercase;
    color: #bbb;
}
.cine-nav a:hover {
    color: #fff;
}
.cine-nav .active {
    color: #fff;
}
.nav-hamburger {
    width: 24px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

/* Force Logo White & Sizing */
.logo-holder, .logo-holder .cine, .logo-holder .design {
    color: #FFF !important;
}
.logo-holder {
    background-image: url('/cinedesign.ca/static/imgs/cinedesign-logo-2026.svg');
    width: 115px;       /* 2026 logo aspect ~170x71 */
    display: inline-block;
    height: 48px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    position: fixed;
    top: 18px;
    left: 40px;
    z-index: 500; /* Increased z-index to be on top of everything */
}
/* 2026 logo is a full lockup (text baked into the SVG) — hide the legacy text spans */
.logo-holder .cine, .logo-holder .design { display: none !important; }
/* Center the logo at the top on non-catalog pages (home / showcase) */
.nav-header:not(.catalogv2) .logo-holder {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    background-position: center center;
    z-index: 600;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.75));  /* keep readable on bright photos */
}
.logo-holder .cine {
    position: absolute;
    top: 3px;
    left: 1px;
    font-style: italic;
    font-weight: bold;
    font-size: 25px;
    letter-spacing: -0.01em;
}
.logo-holder .design {
    position: absolute;
    top: 26px;
    right: 8px;
    font-style: italic;
    font-weight: bold;
    font-size: 25px;
    letter-spacing: -0.01em;
}

/* The nav-header was creating a stacking context at z-index:1, trapping the
   fixed logo below the hero panels. Keep it fixed (out of flow) but lift it. */
.nav-header:not(.catalogv2) { position: fixed; z-index: 700; }

/* Home/showcase logo — explicit <img>, centered top (reliable, no bg cascade) */
.site-logo-2026 {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: block;
    line-height: 0;
}
.site-logo-2026 img {
    height: 48px;
    width: 115px;   /* explicit — SVG has width="100%" so width:auto collapses to 0 */
    display: block;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.75));
}

/* --- Home panels (2026 redesign) --- */
/* Full-bleed: override the legacy `.main { max-width:1500px; margin:0 auto }`
   that otherwise centers + clips the panels on wide screens. */
.main-fullbleed {
    max-width: none !important;
    width: 100vw;
    margin: 0 !important;
    overflow-x: hidden;
}
.hero-scroll-container, .hero-card, .home-panel { width: 100vw; max-width: 100vw; }
/* First panel is shorter so ~5% of the next peeks in — a scroll hint */
.home-panel:first-child { height: 100vh; }
.home-panel .hero-bg {
    width: 100vw;
    background-size: cover;
    background-position: center center;
}
/* Video slide background — fills the panel like a cover image */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Per-section media: stacked slides that cross-fade */
.hero-media { position: absolute; inset: 0; }
.hero-slide {
    opacity: 0;
    z-index: 0;
    transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.home-panel .hero-overlay {
    gap: 8px;
    /* Spotlight: open center, edges and corners fall to near black; top darkened for the logo */
    background:
        linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%),
        radial-gradient(ellipse 58% 68% at 50% 52%,
            rgba(0,0,0,0)    0%,
            rgba(0,0,0,.08) 40%,
            rgba(0,0,0,.55) 68%,
            rgba(0,0,0,.88) 88%,
            rgba(0,0,0,.96) 100%);
}
/* video panels: the clip shows its first decoded frame (frozen) as soon as it is available - the reveal
   wrapper un-blurs it - and starts moving when the panel comes into view. No black peek, no jump. */
.home-panel .hero-video { transition: opacity 1s ease; }
.home-more {
    margin-top: 16px;
    font-size: 14px !important;
    padding: 6px 20px !important;
}

/* Spec badge strip */
.spec-badges {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-top: 28px;
}
.spec-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.spec-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 92px;
}
.spec-badge-icon img { max-height: 92px; width: auto; display: block; }
.spec-badge-icon-text {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 26px;
    color: var(--cine-orange);
    line-height: 1;
}
.spec-badge-title {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.1;
}
.spec-badge-sub {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 14px;            /* same size as the title line */
    text-transform: uppercase;
    color: var(--cine-text-muted);
    line-height: 1.1;
}

/* Pagination dots (fixed, bottom-right) */
.pagination-dots {
    position: fixed;
    right: 40px;
    bottom: 36px;
    display: flex;
    gap: 12px;
    z-index: 500;
}
.page-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid var(--cine-orange);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
}
.page-dot.active { background: var(--cine-orange); }

/* --- Category page: product panels laid out like the box label (2026 v2) ---
   badge / name / part number / button stacked on top, the product below, a
   "cut here" seal strip at the bottom. --- */
.cat-product {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    justify-content: center;          /* label + product + button are ONE centred group */
    padding-top: 70px;                /* clears the centered logo */
    box-sizing: border-box;
    background: radial-gradient(120% 90% at 50% 45%, #1a1a1a 0%, #0a0a0a 70%, #000 100%);
}
/* side vignette on the whole panel (no seam): the peeking neighbours sink into it */
.cat-product::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 72%, rgba(0,0,0,.9) 100%); }
.cat-label { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; padding: 0 24px 4px; flex: 0 0 auto; }
.cat-fit-icon { height: 38px; width: auto; display: block; margin-bottom: 2px; }
.cat-product-title {
    font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-size: clamp(48px, 6.2vw, 104px);
    line-height: .88;
    letter-spacing: -.014em;
    color: #fff;
    margin: 4px 0 0;
    max-width: 12ch;
    text-shadow: 0 10px 40px rgba(0,0,0,.55);
}
.cat-part { font-family: 'CineTitle', 'PPNikkeiJournal', sans-serif; font-style: italic; font-size: clamp(20px, 2.1vw, 34px); color: #8a8a8a; letter-spacing: .02em; margin-top: 4px; }
.cat-more { position: static; transform: none; font-size: 13px !important; padding: 6px 20px !important; }
/* the product: fills what is left between the label block and the seal */
.cat-product-stage { position: relative; z-index: 1; flex: 0 0 auto; height: 56vh; width: 100%; }
@supports (height: 100dvh) { .cat-product-stage { height: 56dvh; } }
.cat-img-strip {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4vw;
    width: 100%;
    height: 100vh;                   /* taller than the stage: renders overflow it visually (their margins are transparent) */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 0 7.5vw;
    scrollbar-width: none;
}
.cat-img-strip::-webkit-scrollbar { display: none; }
.cat-strip-slide { flex: 0 0 85vw; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; }
.cat-strip-img { max-height: none; max-width: 85vw; width: 85vw; width: auto; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); transition: transform .45s ease; will-change: transform; cursor: pointer; }
.cat-strip-img:hover { transform: scale(1.06); }
.cat-strip-link { display: flex; align-items: center; justify-content: center; height: 100%; }
/* button under the product */
.cat-cta { position: relative; z-index: 3; flex: 0 0 auto; padding: 6px 0 0; }
/* the label's soft white radial glow behind the product */
.cat-product-stage::before { content: ""; position: absolute; left: 50%; top: 52%; width: 82vw; height: 150%; transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,.24) 0%, rgba(255,255,255,.1) 40%, rgba(255,255,255,0) 72%); pointer-events: none; z-index: 0; }
.cat-img-strip { z-index: 1; }
.cat-strip-slide { opacity: .35; transition: opacity .4s ease; }
.cat-strip-slide.is-current { opacity: 1; }
/* Prev/next IMAGE arrows (thin chevrons, flanking the product image) */
.cat-arrow {
    position: fixed;
    top: 56%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    line-height: 0;
    z-index: 510;
    transition: color 0.2s ease, transform 0.2s ease;
}
.cat-arrow:hover { color: var(--cine-orange); transform: translateY(-50%) scale(1.2); }
.cat-arrow svg { width: 30px; height: 30px; display: block; }
.cat-arrow-left { left: 84px; }      /* clear of the (64px) nav rail */
.cat-arrow-right { right: 290px; }   /* clear of the sibling peek */

/* Right-side sibling "category menu" peek */
.cat-peek {
    position: fixed;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
    text-align: right;
    max-width: 220px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 4px 0;
}
.cat-peek::-webkit-scrollbar { display: none; }
.cat-peek-title {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--cine-orange);
    margin-bottom: 4px;
}
.cat-peek-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.cat-peek-item:hover { opacity: 0.85; }
.cat-peek-item.active { opacity: 1; }
.cat-peek-name {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.cat-peek-thumb {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
    background: #222 center/cover no-repeat;
    border: 1px solid #333;
}
.cat-peek-item.active .cat-peek-thumb { border-color: var(--cine-orange); }

/* Product page: icons-only menu, dim → brighter on box hover → full on item hover */
.cat-peek.icons-only .cat-peek-title { display: none; }
.cat-peek.icons-only.keep-title .cat-peek-title { display: block; }   /* category page keeps its header */
/* category page: the list scrolls when long, so the hover names must live INSIDE its box (a scrolling box clips) */
.cat-peek.icons-only.keep-title { width: 300px; max-width: 300px; align-items: stretch; }
.cat-peek.icons-only.keep-title .cat-peek-title { text-align: right; }
.cat-peek.icons-only.keep-title .cat-peek-item { width: 100%; justify-content: flex-end; }
.cat-peek.icons-only.keep-title .cat-peek-name { max-width: 225px; overflow: hidden; text-overflow: ellipsis; }
.cat-peek.icons-only .cat-peek-item { opacity: 0.6; transition: opacity 0.25s ease; position: relative; }
/* product name revealed to the left of the icon on hover (absolute = no layout shift) */
.cat-peek.icons-only .cat-peek-name {
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    background: rgba(0,0,0,0.65);
    padding: 4px 9px;
    border-radius: 5px;
    transition: opacity 0.2s ease;
}
.cat-peek.icons-only:hover .cat-peek-name { opacity: 0.5; }   /* all names show dimmed when approaching the box */
.cat-peek.icons-only .cat-peek-item:hover .cat-peek-name { opacity: 1; }   /* full on the hovered one */
.cat-peek.icons-only:hover .cat-peek-item { opacity: 0.55; }
.cat-peek.icons-only .cat-peek-item.active { opacity: 1; }
/* the current / in-view product: a clean orange frame, full strength; its name (orange) only on hover like the others */
.cat-peek.icons-only .cat-peek-item.active .cat-peek-thumb { border: 1.5px solid var(--cine-orange); background-color: #3a3a3a; }
.cat-peek.icons-only .cat-peek-item.active .cat-peek-name { color: var(--cine-orange); }
.cat-peek.icons-only .cat-peek-thumb { transition: border-color .2s ease, background-color .2s ease; }
.cat-peek.icons-only .cat-peek-item:hover { opacity: 1 !important; }
/* make the icon tiles clearly visible (dark renders on near-black were invisible) */
.cat-peek.icons-only .cat-peek-thumb {
    width: 50px; height: 50px; flex-basis: 50px;
    background-color: #333;
    background-size: contain;
    border: 1px solid #666;
}

@media (max-width: 900px) {
    .cat-peek { display: none; }
    .cat-badges { left: 24px; }
}

/* --- Admin: product image manager (2026) --- */
.img-manager { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.img-tile {
    position: relative;
    width: 140px;
    height: 140px;
    border: 1px solid var(--cine-border);
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}
.img-tile.is-main { border-color: var(--cine-orange); }
.img-tile-pic { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.img-tile-badge {
    position: absolute; top: 6px; left: 6px;
    background: var(--cine-orange); color: #000;
    font-family: 'PPNikkeiJournal', sans-serif; font-style: italic; font-weight: 900;
    font-size: 10px; padding: 2px 6px; border-radius: 4px; z-index: 2;
}
.img-tile-actions {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; gap: 4px; padding: 6px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
    opacity: 0; transition: opacity 0.15s ease;
}
.img-tile:hover .img-tile-actions { opacity: 1; }
.img-tile-actions .cine-btn { font-size: 10px; padding: 3px 7px; cursor: pointer; background: #222; color: #fff; border-radius: 4px; }
.img-tile-actions .cine-btn.red { background: #7a1f1f; }
.img-upload { display: flex; align-items: center; justify-content: center; border-style: dashed; cursor: pointer; }
.img-upload:hover { border-color: var(--cine-orange); }
.img-upload-label { cursor: pointer; color: #999; text-align: center; font-family: 'PPNikkeiJournal', sans-serif; font-style: italic; font-weight: 900; }
.img-empty { display: flex; align-items: center; justify-content: center; color: #666; }
.img-tools { margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }

/* --- Product page (2026 redesign) --- */
.prod-v4 {
    display: flex;
    gap: 10px;
    min-height: 100vh;                /* the PAGE scrolls: images + 3D viewer flow down the left, the info column is sticky */
    align-items: flex-start;
    overflow: visible;
    padding: 120px 180px 0 110px;  /* top clears logo, left near nav rail, right clears (now narrow) icon peek; no bottom gap */
    background: radial-gradient(120% 90% at 50% 45%, #1a1a1a 0%, #0a0a0a 70%, #000 100%);
}
.prod-left {
    flex: 1.9;
    min-width: 0;
    padding-bottom: 80px;
}
.prod-left::-webkit-scrollbar { display: none; }
.prod-left .image-stack { display: flex; flex-direction: column; gap: 0; }
/* overlap the renders' transparent padding so they sit closer together */
.prod-left .image-stack img { margin-bottom: -48px; }
.prod-left .image-stack img:last-child { margin-bottom: 0; }
.prod-left .image-stack img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.prod-right {
    flex: 1.35;
    min-width: 0;
    position: sticky;         /* pinned while the left column scrolls past */
    top: 120px;
    align-self: flex-start;
    margin-left: -30px;       /* pull info slightly into the image's transparent right padding */
    margin-top: 44px;         /* lower the info a bit so the logo has room to breathe */
    z-index: 5;
}
/* overflow:hidden on an ancestor disables position:sticky - clip instead */
main:has(.prod-v4) { overflow-x: clip !important; overflow-y: visible !important; }
body:has(.prod-v4) { overflow-x: clip; }
.prod-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}
.prod-tag-icon svg { width: 22px; height: 22px; color: #fff; display: block; }
.prod-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif;
               font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #777; }
.prod-crumbs a { color: #9a9a9a; text-decoration: none; transition: color .15s ease; }
.prod-crumbs a:hover { color: #fff; }
.prod-crumbs span { color: #444; }
.prod-crumbs b { color: var(--cine-orange); font-weight: 400; }
.prod-title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}
.prod-right .product-title { font-size: clamp(44px, 5vw, 110px); overflow-wrap: normal; word-break: normal; }
.prod-title-block .cat-fit-icon { height: 38px; }   /* smaller fitment tag above the product title */
/* smaller spec badges on the product page */
.prod-right .spec-badges { gap: 22px; }
.prod-right .spec-badge-icon { min-width: 52px; height: 52px; }
.prod-right .spec-badge-icon img { max-height: 52px; }
.prod-right .spec-badges { justify-content: flex-start; margin-top: 0; }

.prod-tabs {
    display: flex;
    gap: 26px;
    margin: 30px 0 18px;
    border-bottom: 1px solid var(--cine-border);
}
.prod-tab {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    color: #888;
    padding: 0 0 10px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease;
}
.prod-tab:hover { color: #fff; }
.prod-tab.active { color: var(--cine-orange); border-bottom-color: var(--cine-orange); }
.prod-tab-panel { display: none; max-width: 600px; }
.prod-tab-panel.active { display: block; }
.prod-kf-title {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-size: 22px;
    margin-bottom: 10px;
    color: #fff;
}
.prod-kf { padding-left: 18px; line-height: 1.5; margin: 0 0 16px; }
.prod-kf li { margin-bottom: 6px; }
.prod-desc { color: var(--cine-text-muted); line-height: 1.6; }
.prod-downloads { display: flex; flex-direction: column; gap: 10px; }
.prod-dl {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--cine-border);
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.prod-dl:hover { border-color: var(--cine-orange); background: #161616; }
.prod-dl-type {
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 12px;
    color: var(--cine-orange);
    background: #1a1a1a;
    padding: 3px 8px;
    border-radius: 5px;
}
.prod-dl-label { font-size: 14px; color: #fff; }

@media (max-width: 900px) {
    .prod-v4 { flex-direction: column; padding: 100px 24px 60px; height: auto; overflow: visible; }
    .prod-left { height: auto; overflow: visible; }
    .prod-right { position: static; margin-left: 0; margin-top: 0; }
}

/* --- Global Left Nav Rail (2026 redesign, v2) ---
   Same pattern as the admin rail: 64px column of line icons at rest, a dark
   panel with labels slides OVER the page on hover (content never moves). --- */
:root { --rail-w: 64px; --rail-open: 250px; }
.nav-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--rail-w);
    z-index: 500;
    display: flex;
    align-items: center;            /* icon stack vertically centered like before */
    overflow: hidden;
    background: transparent;
    border-right: 1px solid transparent;
    transition: width .18s ease, background .18s ease, border-color .18s ease;
}
.nav-rail:hover {
    width: var(--rail-open);
    background: rgba(8,8,8,.96);
    border-right-color: var(--cine-border);
    box-shadow: 18px 0 40px rgba(0,0,0,.45);
}
.nav-rail-inner { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 10px; box-sizing: border-box; }
.nav-rail-sep { height: 1px; background: #262626; margin: 8px 12px; opacity: 0; transition: opacity .15s ease; }
.nav-rail:hover .nav-rail-sep { opacity: 1; }
.nav-rail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: #bdbdbd;
    font-family: 'PPNikkeiJournal', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.nav-rail-item:visited { color: #bdbdbd; }
.nav-rail-item:hover { background: #151515; color: #fff; }
.nav-rail-item.active, .nav-rail-item.active:visited { color: var(--cine-orange); }
.nav-rail:hover .nav-rail-item.active { background: #161616; }
.nav-rail-icon {
    width: 20px; height: 20px; flex: 0 0 20px;
    display: flex; align-items: center; justify-content: center;
    color: inherit;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));   /* readable on bright photos at rest */
}
.nav-rail-icon svg { width: 100%; height: 100%; display: block; }
.nav-rail-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-rail-label { opacity: 0; transition: opacity .15s ease; }
.nav-rail:hover .nav-rail-label { opacity: 1; }
@media (max-width: 768px) {
    .nav-rail { display: none; }
}
/* Specific Logo Overrides for header-login context */
.nav-header.catalogv2 .logo-holder span.cine {
    letter-spacing: 0.1em !important;
    font-size: 15px !important;
    left: -5px !important;
    top: 15px !important;
}

.nav-header.catalogv2 .logo-holder span.design {
    letter-spacing: 0.1em !important;
    font-size: 15px !important;
    right: -1px !important;
    top: 28px !important;
}

/* ============================================================
   All-products page (/products) — 2026 v2, "spec sheet" grammar
   Sticky category bar + filters, hairline matrix of cells, left-aligned
   section heads with number / count / tagline. Cells are shared with the
   home featured strip (all-card.html).
   ============================================================ */
.all-page { padding: 112px 0 90px; overflow-x: clip !important; overflow-y: visible !important; }   /* 'hidden' on an ancestor kills position:sticky */
body:has(.all-page) { overflow-x: clip; }
.all-wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* sticky bar */
.all-bar-sentinel { height: 1px; }
.all-bar-ph { height: 0; }
.all-bar.is-fixed { position: fixed; top: 6px; left: 0; right: 0; }
/* while pinned, the bar is the header: the big centered logo and the FR/EN pill step aside, a small logo joins the bar */
html.allbar-fixed .nav-header:not(.catalogv2) .logo-holder, html.allbar-fixed .site-logo-2026, html.allbar-fixed .lang-toggle { opacity: 0; pointer-events: none; }
.all-bar-logo { display: none; flex: 0 0 auto; margin-right: 6px; }
.all-bar-logo img { height: 24px; display: block; }
.all-bar.is-fixed .all-bar-logo { display: block; }
.all-bar { position: sticky; top: 6px; z-index: 400; background: rgba(0,0,0,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
           border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; }
.all-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; }
.all-chips { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.all-chips::-webkit-scrollbar { display: none; }
.all-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 18px 14px; color: #9a9a9a; text-decoration: none; white-space: nowrap;
            font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
            border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; }
.all-chip b { font-weight: 400; font-size: 10px; color: #5f5f5f; }
.all-chip:hover { color: #fff; }
.all-chip.on { color: #fff; border-bottom-color: var(--cine-orange); }
.all-chip.on b { color: var(--cine-orange); }
.all-chip.dim { opacity: .35; }
.all-tools { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.all-fits { display: flex; gap: 4px; }
.all-fit { background: none; border: 1px solid #333; color: #9a9a9a; border-radius: 4px; padding: 5px 9px; cursor: pointer;
           font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 11px; letter-spacing: .1em; transition: all .15s ease; }
.all-fit:hover { color: #fff; border-color: #666; }
.all-fit.on { background: var(--cine-orange); border-color: var(--cine-orange); color: #000; }
.all-search { display: flex; align-items: center; gap: 8px; border: 1px solid #333; border-radius: 4px; padding: 0 10px; height: 30px; color: #777; }
.all-search:focus-within { border-color: var(--cine-orange); color: #fff; }
.all-search svg { width: 14px; height: 14px; flex: 0 0 14px; }
.all-search input { background: none; border: 0; outline: none; color: #fff; width: 150px; font-size: 13px; font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; }
.all-search input::placeholder { color: #666; }
.all-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* section head: number · title · count · tagline, hairline */
.all-cat { margin: 0 0 72px; }
.all-cat[hidden] { display: none; }
.all-cat-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 18px; padding: 56px 0 18px; border-bottom: 1px solid #262626; margin-bottom: 1px; }
.all-cat-n { font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 12px; letter-spacing: .16em; color: var(--cine-orange); }
.all-cat-title { font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: -.01em; }
.all-cat-count { font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; color: #666; }
.all-cat-count b { color: #ddd; font-weight: 400; }
.all-cat-tag { grid-column: 2 / -1; margin: 8px 0 0; color: #8d8d8d; font-size: 14px; max-width: 64ch; line-height: 1.45; }

/* hairline matrix: 1px gaps on a hairline-coloured background make the grid lines */
.all-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #262626; border: 1px solid #262626; }
.all-card-link { display: block; text-decoration: none; background: #0a0a0a; }
.all-card-link[hidden] { display: none; }
.all-card { position: relative; aspect-ratio: 1 / 1.18; display: flex; flex-direction: column; align-items: center; padding: 18px 14px 14px; box-sizing: border-box; overflow: hidden;
            text-align: center; transition: background .18s ease; }
.all-card::before { content: ""; position: absolute; left: 50%; bottom: 8%; width: 80%; height: 50%; transform: translateX(-50%);
            background: radial-gradient(ellipse at center, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%); pointer-events: none; }
.all-card-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; }
.all-card-fit { height: 26px; width: auto; display: block; margin-bottom: 4px; }
.all-card-part { font-family: 'CineTitle', 'PPNikkeiJournal', sans-serif; font-style: italic; font-size: 12px; color: #8a8a8a; }
.all-card-link:hover .all-card { background: #121212; }
.all-card-tag { position: absolute; top: 12px; right: 12px; color: #000; background: #ddd; padding: 2px 6px; border-radius: 3px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.all-card-img { position: relative; flex: 1; min-height: 0; width: 100%; object-fit: contain; display: block; padding: 12px 8% 0; box-sizing: border-box;
                transition: transform .35s ease; }
.all-card-link:hover .all-card-img { transform: scale(1.06); }
.all-card-name { font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif; font-style: italic; font-size: 18px; letter-spacing: -.01em; color: #f2f2f2; line-height: 1;
                 transition: color .15s ease; }
.all-card-link:hover .all-card-name { color: #fff; }
.all-fit-badge { display: none; }   /* legacy corner badge: the fitment now lives in the meta line */
.all-empty { color: #777; text-align: center; padding: 80px 0; font-size: 14px; }
.all-empty[hidden] { display: none; }

@media (max-width: 1100px) {
  .all-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .all-wrap, .all-bar-inner { padding: 0 24px; }
  .all-bar-inner { flex-wrap: wrap; gap: 6px 16px; padding-bottom: 10px; }
  .all-chip { padding: 14px 10px; }
  .all-tools { width: 100%; justify-content: space-between; }
  .all-search input { width: 120px; }
}
@media (max-width: 768px) {
  .all-page { padding: 72px 0 56px; }
  .all-bar { top: 0; }
  .all-wrap, .all-bar-inner { padding: 0 16px; }
  .all-cat { margin-bottom: 48px; }
  .all-cat-head { padding: 36px 0 14px; grid-template-columns: auto 1fr; }
  .all-cat-count { grid-column: 2; justify-self: end; }
  .all-grid { grid-template-columns: repeat(2, 1fr); }
  .all-card { padding: 12px 8px 8px; }
  .all-card-name { font-size: 14px; }
  .all-card-fit { height: 20px; }
  .all-card-part { font-size: 11px; }
}

/* ---- i18n: FR/EN switch in the top header + product subtitle ---- */
.lang-toggle { position: fixed; top: 18px; right: 22px; z-index: 60; display: flex; gap: 4px;
               font: 700 12px/1 system-ui, sans-serif; letter-spacing: .08em; }
.lang-toggle a { color: #888; text-decoration: none; padding: 7px 9px; border-radius: 999px; border: 1px solid transparent; }
.lang-toggle a.on { color: #fff; border-color: rgba(255,255,255,.25); }
.lang-toggle a:hover { color: #fff; }
.product-subtitle { margin: 4px 0 0; color: #aaa; font-size: 15px; }

/* ---- login v3 (cine.design) ----
   Full-bleed machined-plate photo, no card: logo on top, heavy title, italic hint,
   one pill holding the input and the orange action. */
body:has(.login-v3) .nav-header,
body:has(.login-v3) .lang-toggle { display: none; }
.login-v3 { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 96px 16px 40px; box-sizing: border-box; overflow: hidden; background: #0a0a0a; text-align: center; isolation: isolate; }
.login-v3 .lg-bg, .login-v3 .lg-bg-video { position: absolute; inset: 0; z-index: 0; }
.login-v3 .lg-bg { background: url('/cinedesign.ca/static/imgs/login/login-bg.jpg') center / cover no-repeat; }
.login-v3 .lg-bg-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.login-v3 .lg-bg.over-video { background: none; }
.login-v3 .lg-bg::after, .login-v3 .lg-bg-video + .lg-bg::after { content: ""; position: absolute; inset: 0;
            background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.78) 65%, rgba(0,0,0,.92) 100%); }
.login-v3 .lg-bg-video { filter: brightness(.7); }
.login-v3 .lg-logo { position: absolute; z-index: 2; top: 26px; left: 50%; transform: translateX(-50%); display: block; }
.login-v3 .lg-logo img { height: 65px; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.login-v3 .lg-box { position: relative; z-index: 1; width: 100%; max-width: 560px; }
.login-v3 .lg-title { font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif; font-size: 84px; line-height: .95; letter-spacing: -.01em;
            margin: 0 0 14px; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.55); }
.login-v3 .lg-sub { margin: 0 0 26px; color: #c9c9c9; font-size: 18px; font-style: italic; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.login-v3 .lg-sub strong { color: #fff; font-style: normal; font-weight: 600; }
.login-v3 .lg-sub.lg-ok { color: #9be39b; }
.login-v3 .lg-step { display: none; }
.login-v3 .lg-step.is-active { display: block; animation: lg-in .28s ease both; }
@keyframes lg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* the pill: input + action in one rounded bar with the brand orange outline */
.login-v3 .lg-pill { display: flex; align-items: center; margin: 0 auto; width: min(100%, 320px); padding: 3px;
            background: rgba(12,12,12,.92); border: 1.5px solid var(--cine-orange); border-radius: 12px;
            box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.login-v3 .lg-pill:focus-within { box-shadow: 0 0 0 3px rgba(247,108,4,.22), 0 12px 40px rgba(0,0,0,.55); }
.login-v3 .lg-input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; color: #fff;
            padding: 12px 10px 12px 18px; font-size: 15px; font-style: italic; }
.login-v3 .lg-input::placeholder { color: #9a9a9a; font-style: italic; }
.login-v3 .lg-go { flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 9px; padding: 11px 22px;
            background: linear-gradient(90deg, var(--cine-yellow), var(--cine-orange)); color: #000;
            font-weight: 800; font-size: 14px; letter-spacing: .01em; transition: transform .12s ease, filter .12s ease; }
.login-v3 .lg-go:hover { filter: brightness(1.08); }
.login-v3 .lg-go:active { transform: scale(.97); }
/* 4-digit code */
.login-v3 .lg-digits { display: flex; gap: 12px; justify-content: center; margin: 0 auto 6px; width: min(100%, 320px); }
.login-v3 .lg-digit { flex: 1 1 0; min-width: 0; height: 66px; text-align: center; font-size: 30px; font-weight: 700; color: #fff;
            background: rgba(12,12,12,.9); border: 1.5px solid #3a3a3a; border-radius: 12px; outline: none;
            box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: border-color .15s ease, box-shadow .15s ease; }
.login-v3 .lg-digit:focus { border-color: var(--cine-orange); box-shadow: 0 0 0 3px rgba(247,108,4,.22), 0 10px 30px rgba(0,0,0,.45); }
/* secondary actions */
.login-v3 .lg-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.login-v3 .lg-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 11px 24px;
            font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; border: 1.5px solid transparent; transition: filter .12s ease, background .12s ease; }
.login-v3 .lg-btn.solid { background: linear-gradient(90deg, var(--cine-yellow), var(--cine-orange)); color: #000; }
.login-v3 .lg-btn.solid:hover { filter: brightness(1.08); }
.login-v3 .lg-btn.ghost { background: rgba(12,12,12,.85); color: #ddd; border-color: #444; }
.login-v3 .lg-btn.ghost:hover { color: #fff; border-color: #777; }
.login-v3 .lg-link { display: block; margin: 16px auto 0; background: none; border: 0; color: #9a9a9a; font-size: 13px; cursor: pointer; text-decoration: underline; }
.login-v3 .lg-link:hover { color: #fff; }
.login-v3 .lg-note { position: relative; z-index: 1; margin: 42px 0 0; color: #8a8a8a; font-size: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
/* busy: thin progress bar along the top edge, controls dimmed */
.login-v3 .lg-busy { position: absolute; left: 0; right: 0; top: 0; height: 3px; display: none; overflow: hidden; z-index: 3; }
.login-v3 .lg-busy span { position: absolute; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, var(--cine-yellow), var(--cine-orange)); animation: lg-bar 1s linear infinite; }
@keyframes lg-bar { to { left: 100%; } }
.login-v3.is-busy .lg-busy { display: block; }
.login-v3.is-busy .lg-step { opacity: .55; pointer-events: none; }
@media (max-width: 560px) {
  .login-v3 .lg-bg:not(.over-video) { background-image: url('/cinedesign.ca/static/imgs/login/login-bg-small.jpg'); }
  .login-v3 .lg-title { font-size: 60px; }
  .login-v3 .lg-sub { font-size: 16px; }
  .login-v3 .lg-digit { height: 58px; font-size: 26px; border-radius: 10px; }
}

/* ---- home panels: optional subtitle under the title (CMS) ---- */
.hero-sub { margin: 6px 0 14px; color: #d0d0d0; font-size: 18px; font-style: italic; max-width: 560px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* ---- video reveal (script.js): blurred until the first frame is decoded ---- */
video.cv-wait { filter: blur(18px) brightness(.6); }
video.cv-ready { filter: blur(0) brightness(1); transition: filter 1.1s ease; }
/* full-bleed login clip: also fades from transparent, keeps its own darkening */
.login-v3 .lg-bg-video.cv-wait { opacity: 0; filter: blur(18px) brightness(.7); }
.login-v3 .lg-bg-video.cv-ready { opacity: 1; filter: blur(0) brightness(.7); transition: opacity .9s ease, filter 1.3s ease; }

/* ---- login: keep the autofilled email dark (Chrome/Edge paint autofill white) ---- */
.login-v3 .lg-input { border-radius: 9px; }
.login-v3 .lg-input:-webkit-autofill,
.login-v3 .lg-input:-webkit-autofill:hover,
.login-v3 .lg-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0c0c0c inset;
  box-shadow: 0 0 0 1000px #0c0c0c inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-out 0s;
}
.login-v3 .lg-input:autofill { background: #0c0c0c; color: #fff; }



/* ============================================================
   RESPONSIVE PASS (2026) — phones, tablets, short laptops.
   Breakpoints: 1200 (compact desktop), 900 (tablet), 768 (phone landscape /
   rail -> burger), 560 (phone portrait). Mobile browsers: use dvh so the
   full-screen panels do not jump when the address bar shows/hides.
   ============================================================ */
@supports (height: 100dvh) {
  .hero-scroll-container, .hero-card, .cat-product { height: 100dvh; }
  .home-panel:first-child { height: 100dvh; }
}

/* ---- mobile navigation: hidden on desktop ---- */
.nav-burger { display: none; }
.nav-mobile { display: none; }

/* ---- compact desktop ---- */
@media (max-width: 1200px) {
  .hero-title { font-size: clamp(64px, 9vw, 150px); }
  .prod-v4 { padding: 110px 110px 0 120px; }
  .cat-arrow-left { left: 80px; }
  .cat-arrow-right { right: 250px; }
}

/* ---- tablet ---- */
@media (max-width: 900px) {
  .hero-title { font-size: clamp(52px, 9vw, 120px); max-width: 90vw; }
  .hero-sub { font-size: 16px; max-width: 80vw; }
  .spec-badges { gap: 18px; }
  .spec-badge-icon { min-width: 68px; height: 68px; }
  .spec-badge-icon img { max-height: 68px; }
  .spec-badge-title, .spec-badge-sub { font-size: 12px; }
  /* category carousel: bigger slides, arrows hug the edges */
  .cat-img-strip { padding: 0 20vw; gap: 5vw; }
  .cat-strip-slide { flex-basis: 60vw; }
  .cat-strip-img { max-width: 60vw; max-height: 70vh; }
  .cat-arrow-left { left: 6px; }
  .cat-arrow-right { right: 6px; }
  /* product page already stacks at 900: tune spacing */
  .prod-right { margin-top: 10px; }
  .prod-right .product-title { font-size: clamp(40px, 9vw, 72px); }
  .prod-tab { font-size: 15px; }
  .prod-3d { height: 320px; }
}

/* ---- phone landscape & small tablets: rail -> burger + overlay ---- */
@media (max-width: 768px) {
  .nav-header:not(.catalogv2) .logo-holder, .site-logo-2026 { top: 14px; }
  .nav-header:not(.catalogv2) .logo-holder { width: 96px; height: 40px; }
  .site-logo-2026 img { height: 40px; width: 96px; }
  .lang-toggle { display: none; }                 /* FR/EN lives in the mobile menu */
  .pagination-dots { right: 14px; bottom: 18px; gap: 9px; }
  .page-dot { width: 9px; height: 9px; }

  .nav-burger { position: fixed; top: 14px; left: 14px; z-index: 900; display: flex; flex-direction: column; justify-content: center; gap: 5px;
                width: 42px; height: 42px; padding: 0 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; cursor: pointer;
                backdrop-filter: blur(6px); }
  .nav-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-mobile { display: block; position: fixed; inset: 0; z-index: 850; background: rgba(0,0,0,.92); backdrop-filter: blur(10px);
                opacity: 0; pointer-events: none; transition: opacity .2s ease; overflow-y: auto; }
  .nav-mobile.open { opacity: 1; pointer-events: auto; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  .nav-mobile-inner { padding: 84px 28px 40px; display: flex; flex-direction: column; gap: 6px; min-height: 100%; box-sizing: border-box; }
  .nav-mobile-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; color: #ddd; font-family: 'PPNikkeiJournal', sans-serif;
                     font-style: italic; font-weight: 900; font-size: 22px; border-bottom: 1px solid #1d1d1d; }
  .nav-mobile-item.parent { color: var(--cine-orange); font-size: 24px; }
  .nav-mobile-item.active { color: var(--cine-orange); }
  .nav-mobile-children { display: flex; flex-direction: column; margin: 0 0 10px 14px; }
  .nav-mobile-item.child { font-size: 19px; color: #cfcfcf; border-bottom-color: #161616; }
  .nav-mobile-icon { width: 24px; height: 24px; flex: 0 0 24px; display: flex; color: #999; }
  .nav-mobile-icon svg, .nav-mobile-icon img { width: 100%; height: 100%; object-fit: contain; }
  .nav-mobile-foot { margin-top: auto; padding-top: 24px; display: flex; gap: 8px; }
  .nav-mobile-foot a { font: 800 12px/1 system-ui, sans-serif; letter-spacing: .1em; color: #888; padding: 10px 14px; border-radius: 10px; border: 1px solid #333; }
  .nav-mobile-foot a.on { color: #000; background: var(--cine-orange); border-color: var(--cine-orange); }

  /* home panels: titles must never leave the screen - fluid size, wrap anywhere, side padding */
  .home-panel .hero-overlay { padding: 0 18px; box-sizing: border-box; }
  .hero-title { font-size: clamp(40px, 12vw, 84px); line-height: .88em; margin-bottom: 14px; max-width: 100%;
                overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .hero-sub { max-width: 100%; }
  .home-more { font-size: 13px !important; padding: 6px 18px !important; }
  .spec-badges { gap: 14px; margin-top: 20px; }
  .spec-badge-icon { min-width: 54px; height: 54px; }
  .spec-badge-icon img { max-height: 54px; }
  .spec-badge-title, .spec-badge-sub { font-size: 11px; }

  /* category page */
  .cat-product { padding-top: 60px; }
  .cat-product-stage { height: 42vh; }
  .cat-img-strip { height: 70vh; }
  .cat-product-title { font-size: clamp(30px, 8vw, 48px); }
  .cat-fit-icon { height: 24px; }
  .cat-part { font-size: 14px; }
  .cat-img-strip { padding: 0 3vw; }
  .cat-strip-slide { flex-basis: 94vw; }
  .cat-strip-img { max-width: 94vw; width: 94vw; }
  .cat-strip-slide { flex-basis: 84vw; }
  .cat-img-strip { padding: 0 8vw; }
  .cat-strip-img { max-height: 62vh; }
  .cat-strip-img:hover { transform: none; }      /* no hover zoom on touch */

  /* product page */
  .prod-v4 { padding: 84px 18px 56px; }
  .prod-left .image-stack img { margin-bottom: -24px; }
  .prod-right .spec-badges { gap: 14px; }
  .prod-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .prod-tabs::-webkit-scrollbar { display: none; }
  .prod-3d { height: 260px; }
  .cat-peek.icons-only { display: none; }

  .product-subtitle { font-size: 14px; }
}

/* ---- phone portrait ---- */
@media (max-width: 560px) {
  .hero-title { font-size: clamp(34px, 11.5vw, 60px); }
  .spec-badges { gap: 10px; }
  .spec-badge-icon { min-width: 46px; height: 46px; }
  .spec-badge-icon img { max-height: 46px; }
  .cat-product-title { font-size: clamp(30px, 10vw, 52px); }
  .prod-right .product-title { font-size: clamp(34px, 11vw, 56px); }
  .prod-title-block .cat-fit-icon { height: 30px; }
}

/* ============================================================
   GLOBAL FOOTER (2026) — statement left, 2x2 info blocks right, quiet bottom row,
   the brackets photo as a blurred dark glow behind.
   ============================================================ */
.cine-footer { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: #050505; color: #fff;
               display: flex; flex-direction: column; isolation: isolate; }
@supports (height: 100dvh) { .cine-footer { min-height: 100dvh; } }
.hero-scroll-container .cine-footer { width: 100vw; scroll-snap-align: start; }
/* while the footer is on screen, the fixed chrome steps aside */
.nav-header:not(.catalogv2) .logo-holder, .site-logo-2026, .lang-toggle, .pagination-dots { transition: opacity .3s ease; }
html.footer-in-view .nav-header:not(.catalogv2) .logo-holder,
html.footer-in-view .site-logo-2026,
html.footer-in-view .lang-toggle,
html.footer-in-view .pagination-dots { opacity: 0; pointer-events: none; }

/* the photo as a glow: heavily blurred, dark, scaled so the blur edge never shows */
.cf-bg { position: absolute; inset: -4%; z-index: 0; background: #050505 url('/cinedesign.ca/static/imgs/footer/footer-bg.jpg') 60% 45% / 72% auto no-repeat;
         filter: blur(3px) brightness(.55) saturate(1.05); transform: none; will-change: transform;
         animation: cf-drift 48s ease-in-out infinite alternate; }
.cf-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 45%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.82) 100%); }
/* a second, softer glow that wanders the other way: two layers out of phase read as slow liquid motion */
.cf-bg::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(30px) brightness(.8); opacity: .22; mix-blend-mode: screen;
                 animation: cf-drift-2 64s ease-in-out infinite alternate; }
@keyframes cf-drift   { from { transform: scale(1) translate3d(-1.5%, -1%, 0) rotate(-.8deg); } to { transform: scale(1.06) translate3d(1.5%, 1.2%, 0) rotate(.8deg); } }
@keyframes cf-drift-2 { from { transform: scale(1.08) translate3d(2%, 1.5%, 0); } to { transform: scale(1) translate3d(-2%, -1.5%, 0); } }
/* pause the drift when the footer is not on screen, and for reduced-motion users */
html:not(.footer-in-view) .cf-bg, html:not(.footer-in-view) .cf-bg::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cf-bg, .cf-bg::before { animation: none; } }

/* layout: 12-col feel -> statement 5 / blocks 7, bottom row full width */
.cf-grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: 1fr auto;
           gap: 0 6vw; width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(60px, 11vh, 120px) 6vw clamp(28px, 4vh, 44px); box-sizing: border-box; }

/* statement: 4 lines, 3rd italic in orange */
.cf-statement { align-self: center; margin: 0; display: flex; flex-direction: column;
                font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif; font-size: clamp(44px, 4.6vw, 72px); line-height: .98; letter-spacing: -.01em; color: #f4f1ea; }
/* marker underline, same device as the production home (span.underline): a thick orange bar behind the lower part of the words */
.cf-ul { position: relative; display: inline-block; z-index: 0; }
.cf-ul::before { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: -.06em; height: .2em; background: var(--cine-orange); z-index: -1; }

/* blocks: 2 x 2 */
.cf-blocks { align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vh, 72px) 40px; }
.cf-block { display: flex; flex-direction: column; gap: 5px; }
.cf-ico { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #ddd; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cf-ico svg { width: 15px; height: 15px; }
.cf-block h3 { margin: 0 0 8px; font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.005em; }
.cf-block a { font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 13px; color: #a7a7a7; text-decoration: none; line-height: 1.45; width: fit-content; transition: color .15s ease; }
.cf-block a:visited { color: #a7a7a7; }
.cf-block a:hover { color: #fff; }
.cf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; }

/* bottom row: contact | languages | copyright */
.cf-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 4fr 3fr; align-items: end; gap: 6vw; padding-top: clamp(40px, 8vh, 90px); }
.cf-contact { display: flex; flex-direction: column; gap: 6px; }
.cf-contact-label { font-family: 'PPNikkeiJournal', sans-serif; font-style: italic; font-size: 11px; color: #8a8a8a; letter-spacing: .02em; }
.cf-contact-mail { font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 17px; color: #fff; text-decoration: none; width: fit-content;
                   padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.7); transition: border-color .15s ease, color .15s ease; }
.cf-contact-mail:hover { color: var(--cine-orange); border-color: var(--cine-orange); }
.cf-langs { display: flex; flex-direction: column; gap: 4px; }
.cf-langs a { font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 12px; color: #8a8a8a; text-decoration: none; width: fit-content; }
.cf-langs a.on { color: #fff; }
.cf-langs a:hover { color: #fff; }
.cf-copy { font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 11px; color: #8a8a8a; text-align: right; }

@media (max-width: 1000px) {
  .cf-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: clamp(40px, 7vh, 64px) 0; padding-top: clamp(56px, 10vh, 96px); }
  .cf-statement { font-size: clamp(40px, 7vw, 64px); }
  .cf-blocks { gap: 36px 28px; }
  .cf-bottom { grid-template-columns: 1fr 1fr; padding-top: 10px; }
  .cf-copy { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 560px) {
  .cf-bg { background-size: 130% auto; background-position: 50% 40%; }
  .cf-grid { padding: 64px 22px 22px; gap: 36px 0; }
  .cf-statement { font-size: clamp(28px, 9.6vw, 40px); }
  .cf-blocks { grid-template-columns: 1fr; gap: 28px; }
  .cf-two { grid-template-columns: 1fr 1fr; }
  .cf-bottom { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   HOME MOTION (2026) — card-stack panels + scroll-linked effects
   (vanilla, inside the snap container; see home.html page_js)
   - first panel 90vh so ~10% of the next one peeks in
   - panels after the first have rounded top corners (they rise like cards)
   - the panel being covered scales down a touch (JS sets --leave 0..1)
   - media parallax (JS sets --p: panel offset in viewport heights)
   - staggered reveal of title / subtitle / button / badges on entry
   ============================================================ */
.home-panel:first-child { height: 100vh; }
@supports (height: 100dvh) { .home-panel:first-child { height: 100dvh; } }
.home-panel:not(:first-child), .hero-scroll-container .cine-footer { border-radius: 34px 34px 0 0; }
.home-panel { transform-origin: 50% 100%; transform: scale(calc(1 - var(--leave, 0) * .06)); will-change: transform; }
.home-panel::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
                     background: #000; opacity: calc(var(--leave, 0) * .55); transition: opacity .1s linear; }
.home-panel .hero-media { transform: translate3d(0, calc(var(--p, 0) * -14%), 0) scale(1.12); will-change: transform; }
/* reveal */
.home-panel .hero-title, .home-panel .hero-sub, .home-panel .home-more, .home-panel .spec-badges {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.home-panel .hero-sub { transition-delay: .08s; }
.home-panel .home-more { transition-delay: .16s; }
.home-panel .spec-badges { transition-delay: .26s; }
.home-panel.in-view .hero-title, .home-panel.in-view .hero-sub, .home-panel.in-view .home-more, .home-panel.in-view .spec-badges {
    opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .home-panel, .home-panel .hero-media { transform: none !important; }
    .home-panel::after { display: none; }
    .home-panel .hero-title, .home-panel .hero-sub, .home-panel .home-more, .home-panel .spec-badges { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 768px) {
    .home-panel:not(:first-child), .hero-scroll-container .cine-footer { border-radius: 22px 22px 0 0; }
}

/* ============================================================
   HOME DETAILS (2026) — marker underline in titles, editorial index, film grain
   ============================================================ */
/* 1. marker underline (same device as the footer statement / production home) */
.hero-title .mk { position: relative; display: inline-block; z-index: 0; }
.hero-title .mk::before { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .04em; height: .2em; background: var(--cine-orange); z-index: -1;
                          transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2,.7,.2,1) .45s; }
.home-panel.in-view .hero-title .mk::before { transform: scaleX(1); }
/* 2. editorial index, top-left, clear of the rail */
.hero-index { position: absolute; top: 34px; left: 96px; z-index: 4; display: flex; align-items: baseline; gap: 10px;
              font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9a9a9a;
              text-shadow: 0 1px 6px rgba(0,0,0,.7); opacity: 0; transform: translateY(-6px); transition: opacity .6s ease .2s, transform .6s ease .2s; }
.hero-index b { color: var(--cine-orange); font-weight: 700; }
/* the index is a button: no chrome, hover brightens, arrow nudges down */
button.hero-index { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #9a9a9a; }
button.hero-index:hover { color: #fff; }
.hero-index-arrow { margin-left: 10px; display: inline-block; transition: transform .2s ease; color: #777; }
button.hero-index:hover .hero-index-arrow { transform: translateY(3px); color: var(--cine-orange); }
.hero-index-name { color: #cfcfcf; margin-left: 6px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.25); }
.home-panel.in-view .hero-index { opacity: 1; transform: none; }
/* 3. film grain over the media (also hides gradient banding) */
.home-panel .hero-overlay::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px; }
@media (max-width: 768px) {
  .hero-index { top: 70px; left: 16px; font-size: 10px; }
  .hero-index-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .mk::before { transform: none; transition: none; }
  .hero-index { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HOME FEATURED (2026) — last snap section before the footer: 3 recent products
   ============================================================ */
.home-featured { background: #0a0a0a; border-radius: 34px 34px 0 0; display: flex; align-items: center; justify-content: center; }
.hf-inner { width: 100%; max-width: 1120px; padding: 0 48px; box-sizing: border-box; }
.hf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; }
.hf-kicker { font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif; font-size: clamp(34px, 4vw, 56px); color: #fff; }
.hf-all { font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; text-decoration: none; }
.hf-all:hover { color: var(--cine-orange); }
.hf-grid { grid-template-columns: repeat(3, 1fr); }
.hf-grid .all-card-name { font-size: 15px; }
@media (max-width: 768px) {
  .home-featured { border-radius: 22px 22px 0 0; }
  .hf-inner { padding: 0 18px; }
  .hf-head { flex-direction: column; gap: 8px; margin-bottom: 22px; }
  .hf-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hf-grid .all-card-link:nth-child(3) { display: none; }   /* two cards fit a phone */
  .hf-grid .all-card-name { font-size: 14px; }
}

/* ============================================================
   HOME INTRO PANEL — slogan with typed, cycling words over the dark plate clip
   ============================================================ */
.home-intro { background: #050505; }
/* intro slideshow: the next photo fades in through a blur while the current one blurs out; the active one drifts slowly */
.home-intro .intro-slide { background-size: cover; background-position: 50% 45%; opacity: 0; filter: blur(22px) brightness(.5); transform: scale(1.1);
                           transition: opacity 1.6s ease, filter 1.8s ease; will-change: opacity, filter, transform; }
.home-intro .intro-slide.on { opacity: 1; filter: blur(0) brightness(.78); animation: intro-drift 40s ease-in-out infinite alternate; }   /* sharp when settled; the blur is only the transition */
@keyframes intro-drift { from { transform: scale(1.06) translate3d(-1%, 0, 0); } to { transform: scale(1.14) translate3d(1%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .home-intro .intro-slide.on { animation: none; } .home-intro .intro-slide { transition: none; } }
.home-intro .hero-overlay.intro-overlay { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.75) 100%); gap: 0; padding: 0 6vw; }
.intro-title { display: flex; flex-direction: column; align-items: center; gap: .1em; margin: 0 0 30px; text-align: center; max-width: 14ch;
               font-family: 'CineTitleAcc', 'CineTitle', 'PPNikkeiJournal', sans-serif; font-style: italic; color: #f4f1ea;
               font-size: clamp(34px, 5.4vw, 88px); line-height: .98; letter-spacing: -.012em; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.intro-title .intro-lead { max-width: 11ch; opacity: 0; transform: translateY(20px); transition: opacity .8s ease .2s, transform .9s cubic-bezier(.2,.7,.2,1) .2s; }
.intro-word-wrap { display: inline-block; min-height: 1em; }
.intro-word { color: #fff; }
/* caret */
.intro-word.is-typing::after { content: ""; display: inline-block; width: .06em; height: .85em; margin-left: .06em; vertical-align: -.08em; background: var(--cine-orange); animation: intro-caret 1s steps(1) infinite; }
@keyframes intro-caret { 50% { opacity: 0; } }
.intro-word-wrap { min-width: 1ch; }
.home-intro .cf-ul::before { bottom: -.04em; height: .18em; }
.intro-cta { opacity: 0; transform: translateY(16px); transition: opacity .7s ease .9s, transform .8s cubic-bezier(.2,.7,.2,1) .9s; }
.home-panel.in-view .intro-lead, .home-panel.in-view .intro-cta { opacity: 1; transform: none; }
.intro-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
                font-family: 'PPNikkeiMaru-Regular', system-ui, sans-serif; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #777; }
.intro-scroll span { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--cine-orange), transparent); animation: intro-drip 1.8s ease-in-out infinite; }
@keyframes intro-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* the intro is panel 1: 90vh like before so the first product panel peeks */
.home-intro .hero-title, .home-intro .hero-sub, .home-intro .spec-badges { display: none; }
@media (max-width: 768px) {
  .intro-title { font-size: clamp(30px, 9.5vw, 48px); margin-bottom: 22px; }
  .intro-scroll { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-title .intro-lead, .intro-cta { opacity: 1; transform: none; transition: none; }
  .intro-scroll span { animation: none; }
}