/* ============================================================
   catalog.css  —  Styles for the Product Catalog page
   Loaded by:  Views/Catalog/Index.cshtml

   HOW THEMING WORKS
   -----------------
   This file reads CSS custom properties (variables) that are
   written inline by Razor on the .cpx root element.
   Those variables switch between the dark adhesive theme and
   the light paint theme — so this file stays static and cache-
   friendly while the theme is chosen server-side.

   DESIGN INSPIRATION
   ------------------
   Visual language ported from the American Bond Paints v2
   prototype (ABP v2): two-column hero with a CSS-only paint
   can, pcard product grid, dark features band, and for the
   paint division a colour-studio palette picker.
   ============================================================ */

/* ── Google Fonts ──────────────────────────────────────────
   Loaded via <link rel="preconnect"> + <link rel="stylesheet"> in _Layout.cshtml.
   Using @import here would create a render-blocking serial waterfall
   (CSS → @import → font); the <link> approach loads them in parallel.  */

/* ── Box-sizing reset ──────────────────────────────────────
   border-box means padding + border are included in the
   declared width, not added on top of it.                   */
.cpx, .cpx * { box-sizing: border-box; }

/* Root container                                            */
.cpx {
    font-family: var(--f-body);
    background: var(--bg-page);
    color: var(--text-dark);
    min-height: 100vh;
    position: relative;
}

/* ── Grain noise texture overlay ──────────────────────────
   A fixed SVG fractal-noise tile that gives the page a
   subtle printed feel.  pointer-events:none means it never
   captures clicks or hover events.                          */
.cpx__noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}


/* ══════════════════════════════════════════════════════════
   HERO SECTION — centred layout with background image support
   ══════════════════════════════════════════════════════════ */
.cpx__hero {
    position: relative;
    min-height: max(520px, 36vw);
    padding: 5.5rem 0 4.5rem;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hero background image layer. */
.cpx__hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.cpx__hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(6, 26, 36, 0.15) 0%,      /* very light left edge */
        rgba(6, 26, 36, 0.82) 25%,     /* ramp up quickly */
        rgba(6, 26, 36, 0.82) 75%,     /* hold dark flat across the wide centre */
        rgba(6, 26, 36, 0.15) 100%     /* very light right edge */
    );
}

/* ── When a photo is present: override colours for dark background ── */
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__blueprint { display: none; }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__blob { opacity: 0.22; }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__title { color: #ffffff; }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__desc { color: rgba(255,255,255,0.82); }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__breadcrumb,
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__breadcrumb a { color: rgba(255,255,255,0.60); }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__stat span { color: rgba(255,255,255,0.70); }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__stat-sep { background: rgba(255,255,255,0.25); }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__btn-outline { color: #ffffff; border-color: rgba(255,255,255,0.50); }
.cpx__hero:has(.cpx__hero-bg[style*="background-image"]) .cpx__btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #ffffff; }
/* Ensure the content layout sits above the background image layer.
   We target only .cpx__hero-layout — NOT the blobs or blueprint, which
   must stay position:absolute so they don't take up space in the flow. */
.cpx__hero-layout { position: relative; z-index: 1; }

/* ── Animated gradient blobs ───────────────────────────────
   Three soft blobs sit behind the hero content, blurred
   heavily so they become ambient colour rather than shapes.
   animation: alternate makes them morph forward then back.  */
.cpx__blob {
    position: absolute;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    filter: blur(70px);
    pointer-events: none;
    will-change: transform;   /* compositor layer — keeps blob animation off the main thread */
    animation: blobMorph 12s ease-in-out infinite alternate;
}
.cpx__blob--1 {
    width: 600px; height: 500px;
    background: radial-gradient(circle, var(--c-accent), transparent 70%);
    top: -150px; right: -80px;
    opacity: var(--blob1-opacity);
    animation-duration: 14s;
}
.cpx__blob--2 {
    width: 500px; height: 400px;
    background: radial-gradient(circle, var(--c-orange), transparent 70%);
    bottom: -80px; left: 10%;
    opacity: 0.18;   /* was 0.1 — boosted so the warm orange glow reads clearly */
    animation-duration: 10s;
    animation-delay: -4s;
}
.cpx__blob--3 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--c-accent2), transparent 70%);
    top: 35%; left: 8%;
    opacity: var(--blob3-opacity);
    animation-duration: 16s;
    animation-delay: -8s;
}

@keyframes blobMorph {
    0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: scale(1)    rotate(0deg);  }
    33%  { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; transform: scale(1.05) rotate(4deg);  }
    66%  { border-radius: 70% 30% 50% 50% / 30% 70% 50% 50%; transform: scale(0.95) rotate(-4deg); }
    100% { border-radius: 50% 50% 40% 60% / 70% 30% 60% 40%; transform: scale(1.02) rotate(2deg);  }
}

/* Subtle blueprint grid lines — only shown on the dark adhesive theme */
.cpx__blueprint {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}

/* ── Centered single-column hero layout ────────────────────  */
.cpx__hero-layout {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ── Hero content — centred ────────────────────────────────  */
.cpx__hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Breadcrumb — "Home / Adhesives"                           */
.cpx__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.cpx__breadcrumb a       { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.cpx__breadcrumb a:hover { color: var(--text-dark); }
.cpx__breadcrumb-cur     { color: var(--c-accent); }

/* Division badge pill — e.g. "Nikit Chem Adhesives Limited" */
.cpx__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 96, 10, 0.1);
    border: 1px solid rgba(232, 96, 10, 0.25);
    border-radius: 9999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-orange);
    margin-bottom: 1.5rem;
}

/* Pulsing live dot inside the badge                         */
.cpx__badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-orange);
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 0   rgba(232,96,10,0.4); }
    50%       { opacity: 0.7; transform: scale(0.9); box-shadow: 0 0 0 5px rgba(232,96,10,0);   }
}

/* Hero headline — fluid size scales with viewport width     */
.cpx__title {
    font-family: var(--f-display);
    font-size: clamp(2.8rem, 5.5vw, 5.5rem);
    font-weight: 800;
    /* 0.95 clipped descenders on "p/y/g" (Waterproof, Long-Lasting, Durable).
       1.1 keeps the intentional tight display look while not cutting glyphs.  */
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}
/* Italic/accent words get a gradient text fill              */
.cpx__title em {
    font-style: normal; /* Comic Relief has no italic variant — prevent faux italic */
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tagline paragraph                                         */
.cpx__desc {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 560px;
    line-height: 1.75;
    margin-bottom: 2rem;
}

/* Stats row — "200+ Products | 25+ Years | …"              */
.cpx__stats { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.cpx__stat strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.7rem;
    font-weight: 800;
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.cpx__stat span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-top: 2px;
    display: block;
}
.cpx__stat-sep { width: 1px; height: 36px; background: var(--border-dark); }

/* CTA button row in the hero                               */
.cpx__cta { display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap; }

/* Primary button — solid dark pill                         */
.cpx__btn-main {
    font-family: var(--f-display);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.75rem 1.75rem;
    background: var(--text-dark);
    color: white !important;
    border-radius: 9999px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.35s var(--ease-spring);
}
.cpx__btn-main:hover {
    background: var(--c-orange);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(232,96,10,0.3);
}

/* Secondary button — outlined pill                         */
.cpx__btn-outline {
    font-family: var(--f-display);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.72rem 1.5rem;
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--border-dark);
    border-radius: 9999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}
.cpx__btn-outline:hover { border-color: var(--c-orange); color: var(--c-orange); transform: translateY(-2px); }


/* ── Right column: CSS can + floating tags ─────────────────  */
.cpx__hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
}

/* ── Floating stat tags (three small info cards) ───────────
   Absolutely positioned around the can.  They float up and
   down via a gentle CSS animation.                          */
.cpx__htag {
    position: absolute;
    background: var(--bg-tag);
    border: 1px solid var(--border-tag);
    border-radius: 16px;
    padding: 0.7rem 1rem;
    will-change: transform;   /* compositor layer for float animation */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px var(--tag-shadow);
    z-index: 5;
    animation: cpTagFloat 5s ease-in-out infinite;
    min-width: 78px;
}
.cpx__htag strong {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 800;
    background: var(--grad-fire);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1.1;
}
.cpx__htag span {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-top: 2px;
}
/* Position each tag differently                             */
.cpx__htag--1 { top: 10%;    left: 2%;  animation-delay: 0s;   }
.cpx__htag--2 { top: 42%;    right: 2%; animation-delay: 1.5s; }
.cpx__htag--3 { bottom: 12%; left: 4%;  animation-delay: 0.8s; }

@keyframes cpTagFloat {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-8px); }
}

/* ── Large hero CSS paint can ──────────────────────────────
   Built entirely from CSS — no images required.
   The can gently floats up and down (bigcanFloat) and
   responds to mouse movement via JS (rotateX/Y transform). */
.cpx__bigcan-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 24px 64px rgba(0,0,0,0.3));
    will-change: transform;   /* compositor layer for float + mouse-tilt animations */
    animation: bigcanFloat 3.5s ease-in-out infinite;
}
@keyframes bigcanFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-16px); }
}

/* When JS is applying mouse-follow tilt, we pause the float */
.cpx__bigcan-wrap.tilting { animation-play-state: paused; }

/* Can body — tall rounded rectangle with dark brown finish  */
.cpx__bigcan-body {
    width: 160px;
    height: 210px;
    background: linear-gradient(160deg, #1f1209 0%, #2d1a0a 50%, #1a0d05 100%);
    border-radius: 14px 14px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
    box-shadow: -10px 12px 30px rgba(0,0,0,0.4), inset -8px 0 16px rgba(0,0,0,0.3);
}

/* Coloured label panel inside the can body.
   Uses --c-accent so the right colour shows for each theme.*/
.cpx__bigcan-body::before {
    content: '';
    position: absolute;
    inset: 16px;
    background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 60%, #000));
    border-radius: 8px;
    opacity: 0.9;
}

/* Specular highlight on the right edge                     */
.cpx__bigcan-shine {
    position: absolute;
    top: 0; right: 0;
    width: 36%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.12) 0%, transparent 60%);
}

/* Text on the can label                                    */
.cpx__bigcan-lbl  { position: relative; z-index: 1; text-align: center; }
.cpx__bigcan-brand {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 800;
    color: white;
    display: block;
    line-height: 1;
}
.cpx__bigcan-name  {
    font-family: var(--f-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    display: block;
    margin-top: 2px;
}
.cpx__bigcan-sub  {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}

/* Can lid — slightly wider than the body, sits on top      */
.cpx__bigcan-top {
    width: 174px;
    height: 16px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--c-accent) 50%, #000),
        #1a0d05);
    border-radius: 8px;
    margin-top: -3px;           /* overlaps body top edge */
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* Bottom rim                                               */
.cpx__bigcan-bottom {
    width: 150px; height: 14px;
    background: #0d0805;
    border-radius: 0 0 16px 16px;
    margin: 0 auto;
}

/* Glow shadow on the ground under the can                  */
.cpx__bigcan-shadow {
    width: 150px; height: 20px;
    background: radial-gradient(ellipse, rgba(232,96,10,0.4) 0%, transparent 70%);
    margin: 8px auto 0;
    filter: blur(10px);
}

/* ── Paint drips (shown on the paint division only) ────────
   Three drips animate downward from the bottom of the can.  */
.cpx__bigdrip {
    position: absolute;
    bottom: 0;
    width: 10px;
    border-radius: 0 0 50% 50%;
    background: var(--grad-fire);
    animation: cpDrip 3.5s ease-in-out infinite;
}
.cpx__bigdrip--1 { left: 25%; animation-delay: 0s;   }
.cpx__bigdrip--2 { left: 50%; animation-delay: 1s;   }
.cpx__bigdrip--3 { left: 72%; animation-delay: 2s;   }

@keyframes cpDrip {
    0%   { height: 0;    opacity: 0;   }
    20%  {               opacity: 1;   }
    60%  { height: 60px; opacity: 1;   }
    90%  { height: 60px; opacity: 0.3; }
    100% { height: 0;    opacity: 0;   }
}

/* Ambient blob glows behind the hero can                   */
.cpx__cblob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}
.cpx__cblob--1 {
    width: 280px; height: 280px;
    background: var(--c-accent);
    opacity: 0.12;
    top: 10%; right: 5%;
}
.cpx__cblob--2 {
    width: 200px; height: 200px;
    background: var(--c-orange);
    opacity: 0.08;
    bottom: 15%; left: 10%;
}


/* ══════════════════════════════════════════════════════════
   SCROLLING MARQUEE STRIP
   Dark band under the hero; category names scroll endlessly
   from right to left.  The HTML list is duplicated so the
   animation can loop seamlessly.
   ══════════════════════════════════════════════════════════ */
.cpx__marquee {
    background: var(--bg-dark);
    padding: 0.75rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.cpx__marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;   /* compositor layer — infinite scroll stays off main thread */
    animation: marqueeRoll 26s linear infinite;
}
/* Moving the track by exactly -50% means when the first
   copy exits the left side, the second copy is right there */
@keyframes marqueeRoll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.cpx__marquee-item {
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    padding: 0 1.5rem;
    transition: color 0.2s;
}
.cpx__marquee-item:hover { color: var(--c-orange); }
.cpx__marquee-dot        { color: var(--c-orange); font-size: 0.5rem; }


/* ══════════════════════════════════════════════════════════
   PRODUCTS SECTION
   ══════════════════════════════════════════════════════════ */
.cpx__products {
    padding: 0 0 2.5rem;
    background: var(--bg-section);
}

/* Sticky header strip — stays at top while scrolling       */
.cpx__products-hdr {
    position: sticky;
    top: 68px;            /* leave room for the main navbar  */
    z-index: 20;
    background: var(--bg-section);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 0;
}
.cpx__products-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Product search input in the sticky header                */
.cpx__search {
    flex: 0 1 220px;
    height: 36px;
    padding: 0 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card, #1a1a2e);
    color: var(--text);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cpx__search::placeholder { color: var(--text-muted); }
.cpx__search:focus {
    border-color: var(--c-orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-orange) 18%, transparent);
}
/* Hide the browser's built-in clear button (×) on search inputs */
.cpx__search::-webkit-search-cancel-button { display: none; }

/* Small label above the product count                      */
.cpx__sect-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-orange);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cpx__sect-eyebrow::before {
    content: '';
    display: inline-block;
    width: 18px; height: 2px;
    background: var(--c-orange);
}

/* Category filter tabs — horizontal pill buttons           */
.cpx__cat-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.cpx__cat-tab {
    font-family: var(--f-display);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    border: 1.5px solid var(--border-dark);
    color: var(--text-muted);
    background: transparent;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cpx__cat-tab .cpx__cat-count {
    font-size: 0.6rem;
    background: var(--border);
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
}
.cpx__cat-tab:hover,
.cpx__cat-tab.active {
    background: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
}
.cpx__cat-tab.active .cpx__cat-count,
.cpx__cat-tab:hover  .cpx__cat-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* The product card grid itself (kept for mobile fallback)  */
.cpx__grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}


/* ══════════════════════════════════════════════════════════
   THEATER VIEWER  —  1 large featured product + 3 thumbnails
   The stage shows the active product; thumbnails show the
   next three in the list.  JS handles all interactions.
   ══════════════════════════════════════════════════════════ */
.cpx__theater {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 2rem 1rem;
}

/* ── Main stage (large product) ────────────────────────── */
.cpx__theater-stage {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 560px;
    margin-bottom: 1.5rem;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.4s;
}
.cpx__theater-stage:hover {
    border-color: rgba(232,96,10,0.2);
}

/* Info panel — left column of the stage                   */
.cpx__theater-info {
    padding: 3rem 2.5rem 5rem;  /* extra bottom padding keeps content clear of counter */
    display: flex;
    flex-direction: column;
    /* flex-start: content stacks from the top.
       The CTA row gets margin-top:auto (below) which pins the buttons
       to the same bottom position on every product, regardless of how
       many lines the title or description uses.                        */
    justify-content: flex-start;
    gap: 1rem;
    position: relative;         /* needed for absolute-positioned counter */
}

/* Product name in the stage (larger than pcard)           */
.cpx__theater-name {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    /* Comic Relief has deep descenders (p, y, g) and tall ascenders.
       1.15 clips the last line. 1.5 gives every glyph room to breathe.  */
    line-height: 1.5;
    /* Don't use -webkit-line-clamp here — its overflow:hidden cuts off
       descenders on the last visible line. The parent info panel already
       has overflow:hidden, so any truly runaway name is still contained. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Counter badge — absolutely placed at bottom of info panel so it never
   pushes content out of the vertical center.                             */
.cpx__theater-counter {
    position: absolute;
    bottom: 1.75rem;
    left: 2.5rem;               /* matches the 2.5rem horizontal padding  */
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    width: calc(100% - 5rem);   /* span the usable width of the panel     */
    display: flex;
    align-items: center;
    gap: 4px;
}
.cpx__theater-counter span:first-child {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c-orange);
}

/* Visual panel — right column of the stage                */
.cpx__theater-visual {
    position: relative;
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: ns-resize;  /* hint for scroll interaction */
    /* height is inherited from the fixed stage height */
}
/* Enlarge the CSS can in the theater stage                */
.cpx__theater-visual .pcard__can-body {
    width: 160px;
    height: 210px;
    border-radius: 16px 16px 22px 22px;
}
.cpx__theater-visual .pcard__can-top {
    width: 174px;
    height: 20px;
    border-radius: 10px;
    margin-top: -5px;
}
.cpx__theater-visual .pcard__can-name { font-size: 1.6rem; }
.cpx__theater-visual .pcard__can-sub  { font-size: 0.7rem; }
/* Enlarge product image in stage                          */
.cpx__theater-visual .pcard__pimg {
    object-fit: cover;
}

/* Prev / Next navigation arrows (overlaid on the stage)   */
.cpx__theater-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--border-dark);
    background: var(--bg-tag);
    color: var(--text-dark);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.25s var(--ease-spring);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cpx__theater-nav:hover {
    background: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
    transform: translateY(-50%) scale(1.1);
}
/* Both arrows sit inside the visual (right) column.
   The stage is 1fr 1fr, so the visual starts at 50%.
   prev is placed just inside the left edge of that column. */
.cpx__theater-nav--prev { left: calc(50% + 1rem); }
.cpx__theater-nav--next { right: 1.25rem; }

/* ── Thumbnail strip ──────────────────────────────────── */
.cpx__theater-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;  /* explicit: all thumbs in a row share the same height */
}

/* Each thumbnail card                                     */
.cpx__theater-thumb {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    display: grid;
    grid-template-columns: 110px 1fr;
    height: 128px;  /* fixed — ensures all cards are identical height on every viewport */
    box-shadow: 0 2px 16px rgba(0,0,0,0.09);  /* lift card off page background */
}
.cpx__theater-thumb:hover {
    border-color: var(--c-orange);
    box-shadow: 0 8px 24px rgba(232,96,10,0.1);
    transform: translateY(-3px);
}
.cpx__theater-thumb.th-active {
    border-color: var(--c-accent);
    box-shadow: 0 8px 24px rgba(117,95,222,0.15);
}

/* Thumbnail visual column (mini can / image)              */
.cpx__theater-thumb-visual {
    background: var(--bg-card);  /* white — no longer blends with the cyan page */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--border);
}
.cpx__theater-thumb-visual .pcard__can {
    transform: scale(0.55);
    transform-origin: center;
}

/* Thumbnail info column                                   */
.cpx__theater-thumb-info {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
}
.cpx__theater-thumb-tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-orange);
}
.cpx__theater-thumb-name {
    font-family: var(--f-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    /* 1.3 clips descenders on single-line Comic Relief; 1.5 gives clearance */
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cpx__theater-thumb-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty state — shown when no products match the filter    */
.cpx__empty {
    text-align: center;
    padding: 6rem 2rem;
    color: var(--text-muted);
}
.cpx__empty-icon { font-size: 4rem; opacity: 0.2; margin-bottom: 1rem; }


/* ══════════════════════════════════════════════════════════
   PRODUCT CARD (pcard)
   Two-part card: visual area on top (CSS can or photo),
   info panel on the bottom.
   Cards fade and slide in when they scroll into view — JS
   adds the .revealed class via IntersectionObserver.
   ══════════════════════════════════════════════════════════ */
.pcard {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s, border-color 0.4s;
    opacity: 0;
    transform: translateY(60px);
}
.pcard.revealed {
    opacity: 1;
    transform: translateY(0);
}
.pcard:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 64px rgba(0,0,0,0.1), 0 0 0 1px rgba(232,96,10,0.15);
    border-color: rgba(232,96,10,0.2);
}

/* ── Visual area — shows the CSS can or product photo ──────  */
.pcard__visual {
    height: 240px;
    background: var(--bg-section);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Soft radial glow behind the can; colour set via --bc var  */
.pcard__color-blob {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 40%, var(--bc, #E8600A) 0%, transparent 65%);
    opacity: 0.18;
    transition: opacity 0.4s;
}
.pcard:hover .pcard__color-blob { opacity: 0.32; }

/* Product photo (shown when p.ProductImagePath is set)     */
.pcard__pimg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 3;
    transition: transform 0.4s var(--ease-spring);
}
.pcard:hover .pcard__pimg { transform: scale(1.05) translateY(-4px); }

/* ── Small CSS paint can on the card ──────────────────────  */
.pcard__can {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.6s var(--ease-spring);
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,0.25));
}
.pcard:hover .pcard__can { transform: rotateY(18deg) rotateX(-7deg) translateY(-6px); }

/* Can body — uses --cc to pick the accent colour            */
.pcard__can-body {
    width: 100px;
    height: 130px;
    background: linear-gradient(160deg, #1f1209 0%, #2d1a0a 50%, #1a0d05 100%);
    border-radius: 10px 10px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: -6px 8px 20px rgba(0,0,0,0.3), inset -6px 0 12px rgba(0,0,0,0.3);
    transition: opacity 0.3s;
}
.pcard__can-body::before {
    content: '';
    position: absolute;
    inset: 12px;
    background: linear-gradient(135deg, var(--cc, #E8600A),
        color-mix(in srgb, var(--cc, #E8600A) 60%, #000));
    border-radius: 6px;
    opacity: 0.9;
}

/* Can name and sub-label                                   */
.pcard__can-name, .pcard__can-sub {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 800;
}
.pcard__can-name { font-family: var(--f-display); font-size: 1.1rem; }
.pcard__can-sub  { font-size: 0.55rem; opacity: 0.8; letter-spacing: 0.08em; }

/* Can lid — slightly wider than body                       */
.pcard__can-top {
    width: 108px;
    height: 12px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--cc, #E8600A) 50%, #000), #1a0d05);
    border-radius: 6px;
    margin-top: -3px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* ── Colour swatches at bottom of visual area ─────────────
   Clicking a swatch updates --cc on the can body and --bc
   on the colour blob via JavaScript.                        */
.pcard__swatches {
    position: absolute;
    bottom: 12px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 4;
}

/* Each swatch is a small coloured circle                   */
.ps {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--sc, #999);
    border: 2px solid rgba(255,255,255,0.6);
    cursor: pointer;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.ps:hover {
    transform: scale(1.5) translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* ── Info panel (below the visual) ────────────────────────  */
.pcard__info { padding: 1.5rem; }

/* Category label pill                                      */
.pcard__tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(232,96,10,0.1);
    color: var(--c-orange);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
}

/* Product name                                             */
.pcard__name {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
    /* Comic Relief descenders require at least 1.45 to avoid clipping */
    line-height: 1.45;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Hindi name (small italic line, shown in EN mode)         */
.pcard__name-hi {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

/* Short description (clamped to 2 lines)                   */
.pcard__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Feature bullets                                          */
.pcard__feats {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
}
.pcard__feats li {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    /* Starts invisible+shifted; revealed by IntersectionObserver */
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Staggered reveal for each bullet line                    */
.pcard.revealed .pcard__feats li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.2s; }
.pcard.revealed .pcard__feats li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.35s; }
.pcard.revealed .pcard__feats li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.5s; }
/* Theater stage is not a .pcard, so features must always be visible there */
.cpx__theater-info .pcard__feats li { opacity: 1; transform: none; }

.pcard__feat-icon { color: var(--c-orange); font-size: 0.6rem; flex-shrink: 0; margin-top: 3px; }

/* Bottom CTA row                                           */
.pcard__cta { display: flex; gap: 0.75rem; align-items: center; }

/* In the theater stage the info panel is flex-column with flex-start.
   margin-top:auto absorbs all leftover vertical space and pins the
   buttons to the same position on every product card.               */
.cpx__theater-info .pcard__cta { margin-top: auto; }

/* "View Details" link — underline-only style               */
.pcard__btn {
    font-family: var(--f-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1.5px solid var(--border-dark);
    padding-bottom: 1px;
    transition: color 0.25s, border-color 0.25s;
}
.pcard__btn:hover { color: var(--c-orange); border-color: var(--c-orange); }

/* "Enquire" link — muted, smaller                         */
.pcard__btn-out {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border);
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    transition: all 0.25s;
}
.pcard__btn-out:hover { border-color: var(--c-orange); color: var(--c-orange); }


/* ══════════════════════════════════════════════════════════
   FEATURES BAND
   Dark strip below the product grid showing 4 key selling
   points.  IntersectionObserver adds .revealed when cards
   scroll into view.
   ══════════════════════════════════════════════════════════ */
.cpx__feats-section {
    background: var(--bg-dark);
    padding: 5rem 0;
    border-top: 1px solid var(--border);
}

.cpx__feats-section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Section eyebrow + title above the grid                   */
.cpx__feats-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-orange);
    margin-bottom: 2.5rem;
}
.cpx__feats-hdr::before {
    content: '';
    display: inline-block;
    width: 20px; height: 2px;
    background: var(--c-orange);
}

/* Section title (below eyebrow)                            */
.cpx__feats-title {
    font-family: var(--f-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(255,255,255,0.92);
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.2;
}
.cpx__feats-title em {
    font-style: normal;
    background: var(--grad-fire);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 2×2 grid — spacious cards with 1px gap dividers         */
.cpx__feats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.07);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
}

/* Each feature card                                        */
.cpx__feat-card {
    background: rgba(255,255,255,0.02);
    padding: 2.75rem 2.5rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), background 0.4s;
}
.cpx__feat-card.revealed { opacity: 1; transform: translateY(0); }
.cpx__feat-card:hover    { background: rgba(255,255,255,0.05); }

/* Gradient sweep line that appears at the top of the card on hover */
.cpx__feat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-fire);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
}
.cpx__feat-card:hover::before { transform: scaleX(1); }

.cpx__feat-num   { font-family: var(--f-display); font-size: 0.68rem; font-weight: 700; color: var(--c-orange); letter-spacing: 0.15em; margin-bottom: 1.25rem; }
.cpx__feat-icon  { font-size: 3rem; margin-bottom: 1rem; display: block; }
.cpx__feat-title { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 0.5rem; }
.cpx__feat-body  { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 360px; }


/* ══════════════════════════════════════════════════════════
   COLOUR STUDIO — shown on the paint division only
   A two-column layout:
   Left:  palette browser (tabs + swatch grid) + colour mixer
   Right: CSS room preview + selected colour info
   ══════════════════════════════════════════════════════════ */
.cpx__colors {
    padding: 5rem 0;
    background: var(--bg-page);
}

.cpx__colors-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cpx__colors-hdr {
    margin-bottom: 2.5rem;
}

.color-studio {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
}

/* ── Palette browser (top-left cell) ──────────────────────  */
.color-studio__browser {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.5rem;
}

/* Palette category tabs                                    */
.cs-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cs-tab {
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    border: 1.5px solid var(--border-dark);
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s;
}
.cs-tab.active, .cs-tab:hover {
    background: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
}

/* Scrollable grid of colour swatches                       */
.cs-grid {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}
.cs-grid::-webkit-scrollbar { width: 3px; }
.cs-grid::-webkit-scrollbar-thumb { background: var(--c-orange); border-radius: 2px; }

.cs-group {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

/* Individual colour swatch square                          */
.cs-swatch {
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--sc, #999);
    cursor: pointer;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
    border: 2px solid transparent;
    position: relative;
}
/* Tooltip showing the colour name on hover                 */
.cs-swatch::after {
    content: attr(data-name);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-dark);
    color: #fff;
    font-size: 0.58rem;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}
.cs-swatch:hover { transform: scale(1.2) translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,0.15); }
.cs-swatch:hover::after { opacity: 1; }
.cs-swatch.selected { border-color: var(--text-dark); box-shadow: 0 0 0 3px rgba(26,18,9,0.15); }

/* ── Room preview (right-side, spans two rows) ─────────────  */
.color-studio__preview {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Miniature room illustration rendered in CSS              */
.cs-room {
    border-radius: 16px;
    overflow: hidden;
    height: 240px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.cs-room__wall {
    height: 72%;
    background: #FF6B35;         /* JS updates this on swatch click */
    transition: background 0.5s ease;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
}
.cs-room__picture {
    position: absolute;
    top: 18px; left: 28px;
    width: 40px; height: 32px;
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 3px;
}
.cs-room__furniture { display: flex; align-items: flex-end; gap: 8px; }
.cs-room__sofa { display: flex; align-items: flex-end; gap: 0; position: relative; }
.cs-room__sofa-back {
    position: absolute;
    bottom: 14px; left: 14px; right: 14px;
    height: 26px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px 4px 0 0;
}
.cs-room__sofa-seat {
    width: 90px; height: 14px;
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
    position: relative; z-index: 2;
    margin: 0 4px;
}
.cs-room__sofa-arm {
    width: 12px; height: 22px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    position: relative; z-index: 2;
}
.cs-room__floor { height: 28%; background: rgba(0,0,0,0.05); }

/* Selected colour info bar                                 */
.cs-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
}
.cs-info__chip {
    width: 36px; height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.4s;
    background: #FF6B35;
}
.cs-info strong { display: block; font-family: var(--f-display); font-size: 0.9rem; font-weight: 700; }
.cs-info span   { font-size: 0.7rem; color: var(--text-muted); }

.cs-save-btn {
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}
.cs-save-btn:hover { color: #e0185e; transform: scale(1.3); }
.cs-save-btn.saved { color: #e0185e; }

.cs-saved { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--text-muted); }
.cs-saved__list { display: flex; gap: 6px; flex-wrap: wrap; }

.cs-saved-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-dark);
    cursor: pointer;
    transition: transform 0.3s;
}
.cs-saved-dot:hover { transform: scale(1.3); }

/* ── Colour mixer (bottom-left cell) ───────────────────────  */
.color-studio__mixer {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.5rem;
}
.cs-mixer-title {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-body);
}
.cs-mixer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cs-mixer__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.cs-mixer__side label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.cs-mixer__side input[type="color"] {
    width: 52px; height: 52px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    background: none;
    padding: 3px;
}
.cs-mixer__icon { font-size: 1.4rem; color: var(--text-muted); }

/* Gradient blend slider                                    */
.cs-slider {
    width: 100%;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    outline: none;
    margin: 0.5rem 0 1rem;
    background: linear-gradient(to right, #FF6B35, #4CC9F0);
    cursor: pointer;
}
.cs-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--text-dark);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Mix result preview                                       */
.cs-mix-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-section);
    border-radius: 12px;
    padding: 0.75rem;
}
.cs-mix-result__swatch {
    width: 44px; height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.3s;
}
.cs-mix-result strong { font-family: var(--f-display); font-size: 0.9rem; font-weight: 700; display: block; }
.cs-mix-result span   { font-size: 0.7rem; color: var(--text-muted); }


/* ══════════════════════════════════════════════════════════
   CATEGORY HERO  —  shown when a filter is active
   Replaces the default hero + marquee.
   Structure:
     .cpx__cat-hero
       .cpx__cat-hero-bar      ← filter pills (full-width dark strip)
       .cpx__cat-hero-body     ← animated background + big heading
         .cpx__cat-anim-*      ← floating blob/ring animations
         .cpx__cat-hero-eyebrow
         .cpx__cat-hero-name   ← huge category label
         .cpx__cat-hero-sub    ← product count subtitle
   ══════════════════════════════════════════════════════════ */
.cpx__cat-hero {
    position: relative;
    overflow: hidden;
}

/* ── Filter pill bar (top strip) ───────────────────────────
   Full-width dark band; same nav items as .cpx__products-hdr
   but styled for a dark background.                         */
.cpx__cat-hero-bar {
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

/* Pills inside the dark bar — invert the colours vs default */
.cpx__cat-hero-bar .cpx__cat-tab {
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.6);
}
.cpx__cat-hero-bar .cpx__cat-tab:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
.cpx__cat-hero-bar .cpx__cat-tab.active {
    background: var(--c-orange);
    border-color: var(--c-orange);
    color: #fff;
}
.cpx__cat-hero-bar .cpx__cat-tab .cpx__cat-count {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}
.cpx__cat-hero-bar .cpx__cat-tab.active .cpx__cat-count {
    background: rgba(0,0,0,0.2);
    color: #fff;
}

/* ── Animated body area ─────────────────────────────────────
   Dark full-bleed panel; blobs animate behind the heading.  */
.cpx__cat-hero-body {
    position: relative;
    background: var(--bg-dark);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem 3.5rem;
    text-align: center;
    overflow: hidden;
}

/* Animated blobs (same blur trick as the hero section)      */
.cpx__cat-anim-blob {
    position: absolute;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: blobMorph 12s ease-in-out infinite alternate;
}
.cpx__cat-anim-blob--1 {
    width: 520px; height: 420px;
    background: radial-gradient(circle, var(--c-accent), transparent 65%);
    top: -80px; left: -100px;
    opacity: 0.22;
    animation-duration: 13s;
}
.cpx__cat-anim-blob--2 {
    width: 400px; height: 380px;
    background: radial-gradient(circle, var(--c-orange), transparent 65%);
    bottom: -60px; right: -80px;
    opacity: 0.18;
    animation-duration: 10s;
    animation-delay: -5s;
}
.cpx__cat-anim-blob--3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--c-accent2), transparent 65%);
    top: 30%; left: 55%;
    opacity: 0.15;
    animation-duration: 16s;
    animation-delay: -8s;
}

/* Spinning ring accent (decorative)                         */
.cpx__cat-anim-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--c-accent);
    opacity: 0.12;
    pointer-events: none;
    will-change: transform;   /* compositor layer for continuous spin */
    animation: catRingSpin 20s linear infinite;
}
.cpx__cat-anim-ring--1 {
    width: 500px; height: 500px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.cpx__cat-anim-ring--2 {
    width: 720px; height: 720px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation-direction: reverse;
    animation-duration: 30s;
    border-color: var(--c-orange);
    opacity: 0.07;
}
@keyframes catRingSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Floating particles                                        */
.cpx__cat-anim-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.cpx__cat-particle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--c-accent);
    opacity: 0;
    animation: catParticleFloat 6s ease-in-out infinite;
}
@keyframes catParticleFloat {
    0%   { transform: translateY(100%) scale(0); opacity: 0; }
    20%  { opacity: 0.6; }
    80%  { opacity: 0.3; }
    100% { transform: translateY(-120%) scale(1.5); opacity: 0; }
}

/* Eyebrow label above the category name                     */
.cpx__cat-hero-eyebrow {
    font-family: var(--f-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-orange);
    position: relative;
    z-index: 5;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.cpx__cat-hero-eyebrow::before,
.cpx__cat-hero-eyebrow::after {
    content: '';
    display: inline-block;
    width: 30px; height: 1.5px;
    background: var(--c-orange);
    opacity: 0.5;
}

/* Giant category name                                       */
.cpx__cat-hero-name {
    font-family: var(--f-display);
    font-size: clamp(2.8rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    position: relative;
    z-index: 5;
    background: linear-gradient(135deg, #fff 30%, var(--c-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.25rem;
}

/* Product count subtitle                                    */
.cpx__cat-hero-sub {
    font-family: var(--f-body);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.45);
    position: relative;
    z-index: 5;
    letter-spacing: 0.06em;
}

/* ── Responsive ────────────────────────────────────────────  */
@media (max-width: 768px) {
    .cpx__cat-hero-bar  { padding: 0.75rem 1rem; }
    .cpx__cat-hero-body { min-height: 220px; padding: 3rem 1.5rem 2.5rem; }
    .cpx__cat-anim-ring { display: none; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* ── Tablet / small desktop ────────────────────────────────  */
@media (max-width: 1024px) {
    .cpx__hero-layout { gap: 2rem; }
    .cpx__bigcan-body { width: 140px; height: 180px; }
    .cpx__bigcan-top  { width: 152px; }
    .cpx__bigcan-bottom { width: 128px; }
    .color-studio { grid-template-columns: 1fr; grid-template-rows: auto; }
    .color-studio__preview { grid-row: auto; }

    /* Theater: reduce stage columns on tablet               */
    .cpx__theater-stage { grid-template-columns: 45% 55%; }
    .cpx__theater-nav--prev { left: calc(45% + 1rem); }
    .cpx__theater-name  { font-size: 1.5rem; }
    .cpx__feats-title   { font-size: 1.75rem; }
}

/* ── Mobile ─────────────────────────────────────────────────  */
@media (max-width: 768px) {
    /* Stack hero columns vertically                          */
    .cpx__hero-layout { grid-template-columns: 1fr; }
    .cpx__hero-right  { min-height: 320px; margin-top: 2rem; }

    /* Smaller can on mobile                                  */
    .cpx__bigcan-body   { width: 120px; height: 150px; }
    .cpx__bigcan-top    { width: 130px; }
    .cpx__bigcan-bottom { width: 108px; }

    /* Hide floating tags so they don't overlap the can      */
    .cpx__htag { display: none; }

    /* Features grid already 2-col; stack to 1 on mobile     */
    .cpx__feats-grid { grid-template-columns: 1fr; }

    /* Single-column product card grid on mobile             */
    .cpx__grid { grid-template-columns: 1fr; }

    /* Theater: stack stage columns on mobile                */
    .cpx__theater-stage  { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .cpx__theater-visual { min-height: 300px; }
    .cpx__theater-info   { padding: 2rem 1.5rem 1.5rem; }
    .cpx__theater-thumbs { grid-template-columns: 1fr; }
    .cpx__theater-thumb  { grid-template-columns: 90px 1fr; }
    /* On mobile the visual is full-width, so reset arrow positions */
    .cpx__theater-nav--prev { left: 1rem; }
    .cpx__theater-nav--next { right: 1rem; }

    /* Product header wraps on mobile                        */
    .cpx__products-inner { flex-direction: column; align-items: flex-start; }
    .cpx__search { flex: 1 1 100%; }
}

@media (max-width: 600px) {
    .cpx__title { font-size: 2.6rem; }
    .cpx__feats-title { font-size: 1.5rem; }
    .cpx__feats-grid { grid-template-columns: 1fr; }
    .cpx__theater-thumbs { grid-template-columns: 1fr; }
    .cpx__theater-nav--prev { left: 0.5rem; }
    .cpx__theater-nav--next { right: 0.5rem; }
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.cpx__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2rem 1rem 1rem;
    flex-wrap: wrap;
}

.cpx__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border-radius: 9999px;
    font-family: var(--f-body, 'Nunito', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border, rgba(95,194,222,0.2));
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    cursor: pointer;
}

.cpx__page-btn:hover:not(.cpx__page-btn--active):not(.cpx__page-btn--disabled) {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

.cpx__page-btn--active {
    background: var(--c-orange, #E8600A);
    color: #fff;
    border-color: var(--c-orange, #E8600A);
    pointer-events: none;
}

.cpx__page-btn--disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.cpx__page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    user-select: none;
}