/* ==========================================================================
   Coverlam Israel — V2 Cinematic Material Luxury
   /web-design skill — built from scratch
   ========================================================================== */

:root {
    --cl-black: #000000;
    --cl-dark: #1a1a1e;
    --cl-gray-dark: #565554;
    --cl-gray-mid: #848687;
    --cl-gray-light: #B1B3B4;
    --cl-accent: #C9BFB4;
    --cl-bg-warm: #F5F0ED;
    --cl-bg-cool: #F2F2F0;
    --cl-white: #FEFEFE;
    --cl-footer-bg: #141416;

    --font-display: 'almoni-tzar', 'Heebo', sans-serif;
    --font-body: 'Heebo', sans-serif;

    --type-hero: clamp(4rem, 9vw, 7.5rem);
    --type-h2: clamp(2.2rem, 4.5vw, 3.8rem);
    --type-body: 1.05rem;

    --space-section: clamp(6rem, 10vw, 10rem);
    --max-width: 1340px;
    --header-height: 64px;

    --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 16px rgba(0,0,0,0.06), 0 32px 64px rgba(0,0,0,0.14);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box}
html{direction:rtl;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);color:var(--cl-dark);background:var(--cl-white);font-size:16.5px;line-height:1.7;letter-spacing:0.2px;margin:0;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:color 0.3s var(--ease-smooth)}
h1,h2,h3,h4,h5,h6{margin:0}
p{margin:0}

.cl-container{max-width:var(--max-width);margin:0 auto;padding:0 2.5rem}

/* === EYEBROW (reusable label) === */
.cl-eyebrow{display:block;font-family:var(--font-body);font-size:0.7rem;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:var(--cl-accent);margin-bottom:1.5rem}
.cl-eyebrow--light{color:rgba(201,191,180,0.8)}

/* === REVEAL — GSAP controls visibility, CSS is fallback === */
.cl-reveal{}

/* === BUTTONS === */
.cl-btn{display:inline-block;font-family:var(--font-body);font-size:0.75rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;padding:1rem 2.8rem;border:1px solid;cursor:pointer;transition:all 0.4s var(--ease-smooth);background:none}
.cl-btn--accent{color:var(--cl-dark);border-color:var(--cl-accent);background:var(--cl-accent)}
.cl-btn--accent:hover{background:transparent;color:var(--cl-accent)}
.cl-btn--dark{color:var(--cl-white);border-color:var(--cl-white);background:transparent}
.cl-btn--dark:hover{background:var(--cl-white);color:var(--cl-dark)}
.cl-btn--full{width:100%;text-align:center}
.cl-btn--whatsapp{color:var(--cl-white);border-color:#25D366;background:#25D366}
.cl-btn--whatsapp:hover{background:transparent;color:#25D366}

/* ============================
   HEADER / NAVBAR (V3 — engineering spec)
   ============================ */
/* Scoped spec tokens (dark bg, rose-gold primary) */
.cl-navbar,.cl-mobile-menu{
    --nav-bg:#0A0A0A;
    --nav-fg:#FAFAF5;
    --nav-muted:#A49E98;
    --nav-primary:#C9BFB4;
    --nav-primary-fg:#0A0A0A;
}

/* Kill legacy pieces */
.cl-top-bar,.cl-top-bar *,.cl-mobile-backdrop{display:none!important}

.cl-navbar{
    position:fixed;top:0;left:0;right:0;z-index:9999;
    height:var(--header-height);
    background:rgba(10,10,10,0.80);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-bottom:1px solid transparent;
    transform:translateY(-100%);opacity:0;
    transition:background .5s var(--ease-smooth),backdrop-filter .5s var(--ease-smooth),border-color .5s var(--ease-smooth);
}
.cl-navbar.is-ready{
    transform:translateY(0);opacity:1;
    transition:transform .8s cubic-bezier(0.16,1,0.3,1),opacity .8s cubic-bezier(0.16,1,0.3,1),background .5s var(--ease-smooth),backdrop-filter .5s var(--ease-smooth),border-color .5s var(--ease-smooth);
}
.cl-navbar.scrolled{
    background:rgba(10,10,10,0.95);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom-color:rgba(201,191,180,0.10);
}
.cl-navbar__inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:2rem}

/* Logo */
.cl-navbar__logo{display:flex;align-items:center;flex-shrink:0}
.cl-navbar__logo img{height:36px;width:auto;filter:brightness(0) invert(1);transition:opacity .3s var(--ease-smooth)}
.cl-navbar__logo:hover img{opacity:0.75}

/* Nav menu (center) */
.cl-navbar__menu{display:flex;list-style:none;margin:0;padding:0;gap:0.25rem;align-items:center;position:relative;height:100%}
.cl-navbar__item{position:relative;display:flex;align-items:center;height:100%}
.cl-navbar__item>a{
    display:block;padding:0.5rem 0.75rem;
    font-family:var(--font-body);font-size:13px;font-weight:500;
    letter-spacing:0.05em;
    color:var(--nav-muted);
    transition:color .3s var(--ease-smooth);
    white-space:nowrap;
}
.cl-navbar__item>a:hover,.cl-navbar__item.is-active>a{color:var(--nav-fg)}

/* Animated underline (moves between active/hovered links) */
.cl-navbar__underline{
    position:absolute;bottom:0;right:0;
    height:2px;width:0;
    background:var(--nav-primary);
    pointer-events:none;opacity:0;
    transform:translateX(0);
    transition:transform .3s var(--ease-smooth),width .3s var(--ease-smooth),opacity .3s;
    will-change:transform,width;
}
.cl-navbar__underline.is-visible{opacity:1}

/* CTA (left) */
.cl-navbar__cta{display:flex;align-items:center;gap:1.25rem;flex-shrink:0}
.cl-navbar__phone{
    display:inline-flex;align-items:center;gap:0.5rem;
    font-family:var(--font-body);font-size:0.875rem;
    color:var(--nav-muted);
    transition:color .3s var(--ease-smooth);
}
.cl-navbar__phone svg{color:var(--nav-primary);flex-shrink:0}
.cl-navbar__phone:hover{color:var(--nav-fg)}
.cl-navbar__phone span{direction:ltr;unicode-bidi:isolate}

.cl-navbar__contact-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:0.5rem 1.25rem;
    border:1px solid rgba(201,191,180,0.30);
    color:var(--nav-primary);
    font-family:var(--font-body);font-size:0.75rem;font-weight:500;
    letter-spacing:0.08em;
    white-space:nowrap;
    transition:background .4s var(--ease-smooth),color .4s var(--ease-smooth),border-color .4s var(--ease-smooth);
}
.cl-navbar__contact-btn:hover{
    background:var(--nav-primary);color:var(--nav-primary-fg);
    border-color:var(--nav-primary);
}

/* Hamburger (visible below xl / 1280) */
.cl-navbar__hamburger{
    display:none;align-items:center;justify-content:center;
    width:44px;height:44px;
    background:none;border:none;cursor:pointer;
    color:var(--nav-fg);padding:0;
    z-index:10002;
}
.cl-navbar__hamburger .cl-hamburger-icon--close{display:none}
.cl-navbar__hamburger.is-open .cl-hamburger-icon--open{display:none}
.cl-navbar__hamburger.is-open .cl-hamburger-icon--close{display:block}

/* Mobile overlay (full-screen) */
.cl-mobile-menu{
    position:fixed;inset:0;z-index:9998;
    background:rgba(10,10,10,0.98);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2rem;padding:2rem;
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .35s var(--ease-smooth),transform .35s var(--ease-smooth);
}
.cl-mobile-menu.is-open{opacity:1;transform:translateY(0);pointer-events:all}
.cl-mobile-menu__nav{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:420px}
.cl-mobile-menu__link{
    display:block;text-align:center;
    font-family:var(--font-display);
    font-size:1.75rem;font-weight:400;letter-spacing:0.02em;
    color:var(--nav-fg);
    opacity:0;transform:translateY(15px);
    transition:color .3s var(--ease-smooth);
}
.cl-mobile-menu__link:hover,.cl-mobile-menu__link.is-active{color:var(--nav-primary)}
.cl-mobile-menu.is-open .cl-mobile-menu__link{
    animation:clMobileLinkIn .45s var(--ease-smooth) forwards;
    animation-delay:calc(var(--i,0) * .06s + .10s);
}
@keyframes clMobileLinkIn{to{opacity:1;transform:translateY(0)}}
.cl-mobile-menu__phone{
    font-family:var(--font-body);font-size:1.1rem;
    color:var(--nav-primary);margin-top:0.75rem;
    opacity:0;transform:translateY(10px);
    transition:color .3s var(--ease-smooth);
}
.cl-mobile-menu.is-open .cl-mobile-menu__phone{
    animation:clMobileLinkIn .45s var(--ease-smooth) forwards;
    animation-delay:.60s;
}

/* Mega Menu (dropdown on hover over "קטלוג") */
.cl-mega{
    position:fixed;top:var(--header-height);left:0;right:0;z-index:9997;
    background:rgba(10,10,10,0.96);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(201,191,180,0.10);
    max-height:0;opacity:0;overflow:hidden;pointer-events:none;
    transition:max-height .5s var(--ease),opacity .35s var(--ease-smooth);
}
.cl-mega.is-open{max-height:460px;opacity:1;pointer-events:all}
.cl-mega__inner{display:flex;gap:2.5rem;padding:2.25rem 2.5rem;direction:rtl}
.cl-mega__categories{display:flex;gap:1.25rem;flex:1}
.cl-mega__card{flex:1;overflow:hidden;transition:transform .5s var(--ease);color:#FAFAF5}
.cl-mega__card:hover{transform:translateY(-3px)}
.cl-mega__card-image{aspect-ratio:4/3;overflow:hidden}
.cl-mega__card-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-smooth)}
.cl-mega__card:hover .cl-mega__card-image img{transform:scale(1.05)}
.cl-mega__card-info{padding:0.85rem 0 0;text-align:center}
.cl-mega__card-info h3{font-family:var(--font-body);font-size:0.9rem;font-weight:500;letter-spacing:0.05em;color:#FAFAF5;margin:0 0 0.25rem}
.cl-mega__card-info span{color:#A49E98;font-size:0.72rem;letter-spacing:0.04em}
.cl-mega__featured{width:260px;flex-shrink:0;overflow:hidden;position:relative}
.cl-mega__featured-link{display:block;overflow:hidden;position:relative;height:100%}
.cl-mega__featured-link img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-smooth)}
.cl-mega__featured-link:hover img{transform:scale(1.04)}
.cl-mega__featured-caption{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;background:linear-gradient(transparent,rgba(0,0,0,0.85))}
.cl-mega__featured-label{display:inline-block;background:#C9BFB4;color:#0A0A0A;font-size:0.6rem;font-weight:600;padding:3px 10px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.5rem}
.cl-mega__featured-caption h3{font-family:var(--font-display);font-size:1.35rem;letter-spacing:0.04em;color:#FAFAF5;margin:0 0 0.3rem}
.cl-mega__featured-cta{color:#C9BFB4;font-size:0.75rem;letter-spacing:0.08em}

/* Chevron on mega trigger */
.cl-navbar__item.cl-has-mega>a::after{
    content:'';display:inline-block;margin-right:0.4rem;
    width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .3s var(--ease-smooth);opacity:0.6;
}
.cl-navbar__item.cl-has-mega.is-mega-open>a::after{transform:rotate(-135deg) translate(1px,1px);opacity:1}

/* Navbar responsive — hide menu + CTA below xl, show hamburger */
@media(max-width:1279px){
    .cl-navbar__menu{display:none}
    .cl-navbar__cta{display:none}
    .cl-navbar__hamburger{display:flex}
    .cl-mega{display:none}
}

/* ============================
   HERO — Slider V3 (spec)
   ============================ */
.cl-hero{
    position:relative;width:100%;
    height:70vh;min-height:520px;
    overflow:hidden;
    background:#0A0A0A;
}
@media(min-width:768px){.cl-hero{height:75vh}}

.cl-hero__slides{position:absolute;inset:0;z-index:0}
.cl-hero__slide{
    position:absolute;inset:0;
    opacity:0;pointer-events:none;
    transition:opacity .9s var(--ease-smooth);
}
.cl-hero__slide.is-active{opacity:1}
.cl-hero__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.cl-hero__overlay{
    position:absolute;inset:0;z-index:1;
    /* Soft gradient: lighter on the left (image area) so the photo is brighter,
       darker on the right (RTL text side) for title legibility. */
    background:linear-gradient(to left, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 50%, rgba(0,0,0,0.10) 100%);
    pointer-events:none;
}

.cl-hero__content{
    position:absolute;inset:0;z-index:10;
    display:flex;align-items:flex-end;
    padding:0 0 6rem;
    pointer-events:none;
}
@media(min-width:768px){.cl-hero__content{padding-bottom:8rem}}
.cl-hero__content > .cl-container{width:100%;pointer-events:auto}
.cl-hero__content-inner{max-width:42rem}

.cl-hero__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(2.25rem,5vw,4.5rem);
    font-weight:300;
    color:#FAFAF5;
    text-shadow:0 2px 12px rgba(0,0,0,0.55),0 1px 3px rgba(0,0,0,0.4);
    line-height:1.15;
    letter-spacing:-0.01em;
    white-space:pre-line;
    text-shadow:0 2px 20px rgba(0,0,0,0.35);
}
.cl-hero__desc{
    margin:1rem 0 0;
    font-family:var(--font-body);
    font-size:1rem;
    color:#D8D2CC;
    text-shadow:0 1px 6px rgba(0,0,0,0.5);
    line-height:1.6;
}
@media(min-width:768px){.cl-hero__desc{font-size:1.125rem}}
.cl-hero__cta{
    display:inline-block;margin-top:2rem;
    padding:0.75rem 2rem;
    border:1px solid rgba(250,250,245,0.30);
    color:#FAFAF5;
    font-family:var(--font-body);
    font-size:0.875rem;
    letter-spacing:0.08em;
    background:transparent;
    transition:background .5s var(--ease-smooth),color .5s var(--ease-smooth),border-color .5s var(--ease-smooth);
}
.cl-hero__cta:hover{
    background:#C9BFB4;color:#0A0A0A;border-color:#C9BFB4;
}

/* Navigation arrows */
.cl-hero__arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:20;
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;padding:0;
    color:rgba(250,250,245,0.60);
    cursor:pointer;
    transition:color .3s var(--ease-smooth);
}
.cl-hero__arrow:hover{color:#FAFAF5}
.cl-hero__arrow--prev{right:1rem}
.cl-hero__arrow--next{left:1rem}
@media(min-width:768px){
    .cl-hero__arrow--prev{right:2rem}
    .cl-hero__arrow--next{left:2rem}
}

/* Pagination dots */
.cl-hero__dots{
    position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
    z-index:20;
    display:flex;align-items:center;gap:0.5rem;
}
.cl-hero__dot{
    width:10px;height:10px;
    padding:0;border:none;border-radius:50%;
    background:rgba(250,250,245,0.25);
    cursor:pointer;
    transition:background .4s var(--ease-smooth),transform .4s var(--ease-smooth);
}
.cl-hero__dot:hover{background:rgba(250,250,245,0.40)}
.cl-hero__dot.is-active{background:#C9BFB4;transform:scale(1.1)}

/* ============================
   STATEMENT
   ============================ */
.cl-statement{padding:var(--space-section) 0;text-align:center}
.cl-statement__text{font-family:var(--font-display);font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:400;letter-spacing:-1px;color:var(--cl-dark);line-height:1.2;margin:0}
.cl-statement__text--em{margin-top:0.3em}
.cl-statement__text em{font-style:normal;color:var(--cl-accent)}
.cl-statement__word{display:inline-block;padding:0 0.15em;opacity:0;transform:translateY(40px);filter:blur(4px)}

/* ============================
   ABOUT — מי אנחנו (2-col + stats)
   ============================ */
.cl-about{position:relative;padding:6rem 0}
@media(min-width:768px){.cl-about{padding:8rem 0}}
@media(min-width:1024px){.cl-about{padding:10rem 0}}

.cl-about__grid{
    display:grid;grid-template-columns:1fr;
    gap:4rem;align-items:center;
}
@media(min-width:1024px){.cl-about__grid{grid-template-columns:1fr 1fr;gap:6rem}}

/* Text column — right in RTL desktop */
.cl-about__text{display:flex;flex-direction:column;gap:1.5rem;order:2}
@media(min-width:1024px){.cl-about__text{order:1}}

.cl-about__eyebrow{
    font-family:var(--font-body);font-size:0.875rem;
    letter-spacing:0.3em;color:#C9BFB4;text-transform:uppercase;
}
.cl-about__divider{display:block;height:1px;width:4rem;background:linear-gradient(135deg,#C9BFB4 0%,#D8CFC6 100%)}
.cl-about__title{
    margin:0;font-family:var(--font-display);
    font-size:clamp(2rem,4vw,3.5rem);font-weight:300;
    color:var(--cl-dark);line-height:1.2;letter-spacing:-0.01em;
}
.cl-about__gradient{
    background:linear-gradient(135deg,#C9BFB4 0%,#D8CFC6 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}
.cl-about__lead{margin:0;font-family:var(--font-body);font-size:1.125rem;color:var(--cl-gray-dark);line-height:1.7}
.cl-about__body{margin:0;font-family:var(--font-body);font-size:1rem;color:var(--cl-gray-mid);line-height:1.7}

/* Stats row */
.cl-about__stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
    padding-top:2rem;margin-top:1rem;
    border-top:1px solid rgba(201,191,180,0.10);
}
.cl-about__stat{
    text-align:center;
    opacity:0;transform:translateY(20px);
    animation:clAboutStatIn .6s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay:var(--d,0s);
}
@keyframes clAboutStatIn{to{opacity:1;transform:translateY(0)}}
.cl-about__stat-num{
    font-family:var(--font-display);
    font-size:clamp(1.75rem,3vw,2.5rem);font-weight:300;
    color:#C9BFB4;line-height:1;
}
.cl-about__stat-label{
    margin-top:0.5rem;font-family:var(--font-body);
    font-size:0.75rem;letter-spacing:0.2em;
    text-transform:uppercase;color:var(--cl-gray-mid);
}

/* Image column — left in RTL desktop */
.cl-about__image-wrap{position:relative;order:1;max-width:540px;margin:0 auto;width:100%}
@media(min-width:1024px){.cl-about__image-wrap{order:2;margin:0}}
.cl-about__image{position:relative;aspect-ratio:3/4;overflow:hidden;z-index:1}
.cl-about__image img{width:100%;height:100%;object-fit:cover;display:block}
.cl-about__overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.80) 100%);pointer-events:none}
.cl-about__frame{
    position:absolute;top:-1rem;right:-1rem;
    width:100%;height:100%;
    border:1px solid rgba(201,191,180,0.20);
    z-index:0;pointer-events:none;
}

/* Entrance animations */
.cl-about__text{
    opacity:0;transform:translateX(50px);
    animation:clAboutSlide .8s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay:0s;
}
.cl-about__image-wrap{
    opacity:0;transform:translateX(-50px);
    animation:clAboutSlide .8s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay:0.2s;
}
@keyframes clAboutSlide{to{opacity:1;transform:translateX(0)}}

/* ============================
   CATEGORIES — Clip-path Overlapping Panels
   ============================ */
.cl-categories{padding:0 0 var(--space-section)}
.cl-categories__header{margin-bottom:3rem}
.cl-categories__header h2{font-family:var(--font-display);font-size:var(--type-h2);font-weight:400;letter-spacing:-0.5px;margin-top:0.5rem}

/* Panels — full-bleed flex row with overlapping clip-path panels */
.cl-categories__panels{
    display:flex;
    width:100%;
    min-height:60vh;
    overflow:hidden;
    direction:rtl;
}

.cl-categories__item{
    position:relative;
    display:block;
    width:28vw;min-width:28vw;
    min-height:60vh;
    overflow:hidden;
    transition:width 0.7s var(--ease-smooth),min-width 0.7s var(--ease-smooth);
    text-decoration:none;cursor:pointer;
    background-color:var(--cl-dark);
}

/* Background image */
.cl-categories__item img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 1.2s var(--ease-smooth);
}
.cl-categories__item:hover img{transform:scale(1.05)}

/* Clip-path polygons — diagonal connections (items 2,3,4 overlap previous with -5vw) */
.cl-categories__item--1{clip-path:polygon(6% 0%,100% 0%,100% 100%,0% 100%);z-index:4}
.cl-categories__item--2{clip-path:polygon(10% 0%,100% 0%,90% 100%,0% 100%);margin-right:-4vw;z-index:3}
.cl-categories__item--3{clip-path:polygon(10% 0%,100% 0%,90% 100%,0% 100%);margin-right:-4vw;z-index:2}
.cl-categories__item--4{clip-path:polygon(0% 0%,100% 0%,90% 100%,0% 100%);margin-right:-4vw;z-index:1}

/* Overlay gradient */
.cl-categories__item::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0.20) 0%,rgba(10,10,10,0.80) 100%);
    z-index:1;
    transition:opacity 0.5s ease;
}
.cl-categories__item:hover::before{opacity:0.95}

/* Backdrop blur on hover */
.cl-categories__item::after{
    content:'';position:absolute;inset:0;
    backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
    z-index:1;pointer-events:none;
    transition:backdrop-filter 0.5s ease,-webkit-backdrop-filter 0.5s ease;
}
.cl-categories__item:hover::after{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Title */
.cl-categories__item-title{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:3;text-align:center;width:80%;
    transition:transform 0.5s var(--ease-smooth);
}
.cl-categories__item-title h3{
    font-family:var(--font-display);
    font-size:clamp(1.3rem,1.8vw,2rem);
    color:var(--cl-white);
    letter-spacing:-0.3px;margin:0;
    text-shadow:0 2px 15px rgba(0,0,0,0.5);
}
.cl-categories__item:hover .cl-categories__item-title{transform:translate(-50%,-120%)}

/* Content — revealed on hover below title */
.cl-categories__item-content{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,1rem);
    z-index:3;opacity:0;
    text-align:center;width:80%;
    transition:opacity 0.5s ease,transform 0.5s var(--ease-smooth);
}
.cl-categories__item:hover .cl-categories__item-content{opacity:1;transform:translate(-50%,0)}
.cl-categories__item-count{
    display:block;
    font-size:0.65rem;letter-spacing:2.5px;text-transform:uppercase;
    color:var(--cl-accent);margin-bottom:0.6rem;
}
.cl-categories__item-content p{
    color:rgba(255,255,255,0.85);
    font-size:0.85rem;line-height:1.65;
    margin:0 auto;max-width:280px;
}

/* Hover — zero-sum redistribution: hovered grows to 40vw, others shrink to 24vw.
   Total stays 100vw: (40 + 3×24) − 3×4 overlap = 100vw. Never leaks off-screen. */
.cl-categories__panels:has(.cl-categories__item:hover) .cl-categories__item{
    width:24vw;min-width:24vw;
}
.cl-categories__panels:has(.cl-categories__item:hover) .cl-categories__item:hover{
    width:40vw;min-width:40vw;
}

/* Responsive — stack on tablet, no clip-path */
@media(max-width:1024px){
    .cl-categories__panels{flex-direction:column;min-height:auto}
    .cl-categories__item{width:100%!important;min-width:100%!important;min-height:32vh;clip-path:none!important;margin:0!important}
    .cl-categories__item--1,.cl-categories__item--2,.cl-categories__item--3,.cl-categories__item--4{z-index:auto}
    .cl-categories__item:hover{width:100%!important;min-width:100%!important}
}
@media(max-width:640px){
    .cl-categories__item{min-height:28vh}
    .cl-categories__item-title h3{font-size:1.4rem}
}

/* ============================
   VISION — 3 feature cards
   ============================ */
.cl-vision{
    position:relative;
    padding:6rem 0;
    background:#141416;
    overflow:hidden;
}
@media(min-width:768px){.cl-vision{padding:8rem 0}}
@media(min-width:1024px){.cl-vision{padding:10rem 0}}

.cl-vision__topline{
    position:absolute;top:0;left:50%;
    width:1px;height:96px;
    background:linear-gradient(to bottom,rgba(201,191,180,0.40),transparent);
    transform:translateX(-50%);
    pointer-events:none;
}

.cl-vision__header{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:1rem;
    margin-bottom:5rem;
}
.cl-vision__eyebrow{
    font-family:var(--font-body);
    font-size:0.875rem;
    letter-spacing:0.3em;
    color:#C9BFB4;
    text-transform:uppercase;
}
.cl-vision__divider{
    display:block;
    height:1px;width:4rem;
    background:linear-gradient(135deg,#C9BFB4 0%,#D8CFC6 100%);
}
.cl-vision__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(2rem,4vw,3.5rem);
    font-weight:300;
    color:#FFFFFF;
    line-height:1.2;
    letter-spacing:-0.01em;
    max-width:48rem;
}
.cl-vision__gradient{
    background:linear-gradient(135deg,#C9BFB4 0%,#D8CFC6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}
.cl-vision__desc{
    margin:0.5rem 0 0;
    font-family:var(--font-body);
    font-size:1.125rem;
    color:rgba(255,255,255,0.53);
    line-height:1.7;
    max-width:40rem;
}

.cl-vision__grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:1.25rem;
}
@media(min-width:1024px){.cl-vision__grid{gap:1.5rem}}
@media(max-width:1023px){.cl-vision__grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
/* Mobile: 3 columns instead of 2 — 4 rows of icons instead of 6, shorter scroll */
@media(max-width:640px){
    .cl-vision__grid{grid-template-columns:repeat(3,1fr);gap:.55rem}
    /* Compact cards so 3 fit comfortably on narrow phones */
    .cl-vision__card{padding:1.1rem .5rem !important;min-height:130px !important}
    .cl-vision__icon-wrap{width:42px !important;height:42px !important}
    .cl-vision__icon-wrap svg{width:22px !important;height:22px !important}
    .cl-vision__card-title{font-size:.72rem !important;line-height:1.25 !important;letter-spacing:0 !important}
}
@media(max-width:360px){
    .cl-vision__grid{gap:.45rem}
    .cl-vision__card{padding:.9rem .35rem !important;min-height:115px !important}
    .cl-vision__card-title{font-size:.68rem !important}
}

.cl-vision__card{
    padding:2rem 1.25rem;
    min-height:190px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    border:1px solid rgba(201,191,180,0.10);
    background:transparent;
    text-align:center;
    transition:box-shadow 0.5s var(--ease-smooth),border-color 0.5s var(--ease-smooth);
}
.cl-vision__card:hover{
    border-color:rgba(201,191,180,0.40);
    box-shadow:0 0 40px rgba(201,191,180,0.15);
}

.cl-vision__icon-wrap{
    display:flex;align-items:center;justify-content:center;
    width:4.25rem;height:4.25rem;
    margin:0 auto 1.25rem;
    border:1.5px solid rgba(201,191,180,0.42);
    background:rgba(201,191,180,0.06);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
    transition:border-color 0.5s var(--ease-smooth),background-color 0.5s var(--ease-smooth),transform 0.5s var(--ease-smooth),box-shadow 0.5s var(--ease-smooth);
}
.cl-vision__card:hover .cl-vision__icon-wrap{
    border-color:rgba(201,191,180,0.75);
    background:rgba(201,191,180,0.13);
    transform:scale(1.06);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04),0 0 28px rgba(201,191,180,0.18);
}
.cl-vision__icon-wrap svg{
    width:1.85rem;height:1.85rem;
    color:#C9BFB4;
    display:block;
    filter:drop-shadow(0 0 6px rgba(201,191,180,0.20));
}

.cl-vision__card-title{
    margin:0;
    font-family:var(--font-display);
    font-size:0.95rem;
    line-height:1.35;
    font-weight:400;
    color:#FFFFFF;
    letter-spacing:-0.01em;
}
.cl-vision__card-desc{
    margin:0;
    font-family:var(--font-body);
    font-size:0.875rem;
    color:rgba(255,255,255,0.53);
    line-height:1.7;
}

/* Entrance animation (CSS-only, staggered via --d inline prop) */
.cl-vision__header,
.cl-vision__card{
    opacity:0;transform:translateY(30px);
    animation:clVisionIn 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay:var(--d,0s);
}
@keyframes clVisionIn{
    to{opacity:1;transform:translateY(0)}
}

/* ============================
   COVERFLOW 3D CAROUSEL
   ============================ */
.cl-coverflow{padding:var(--space-section) 0;background:var(--cl-dark);overflow:hidden;position:relative}
.cl-coverflow__header{margin-bottom:2rem}
.cl-coverflow__header h2{font-family:var(--font-display);font-size:var(--type-h2);font-weight:400;letter-spacing:-0.5px;margin-top:0.5rem;color:var(--cl-white)}
.cl-coverflow__header .cl-eyebrow{color:var(--cl-accent)}

/* Stage — the 3D viewport. Sized to fit smaller cards (240×480) with margin. */
.cl-coverflow__stage{position:relative;height:560px;perspective:1200px;display:flex;align-items:center;justify-content:center;margin:0 auto;max-width:100vw}
@media(max-width:768px){.cl-coverflow__stage{height:460px}}
@media(max-width:480px){.cl-coverflow__stage{height:400px}}

/* Track — holds all cards in 3D space */
.cl-coverflow__track{position:relative;width:100%;height:100%;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center}

/* Individual card — 1:2 portrait to match slab aspect ratio.
   IMPORTANT: NO `will-change` on the card. will-change forces Chrome to rasterize the
   composited layer at the CSS-pixel size of the element (not the on-screen rendered
   size after perspective/scale), then upscale — which softens the image. Without
   will-change the browser re-rasterizes per frame at full DPR + transform size. */
.cl-coverflow__card{
    position:absolute;width:240px;max-height:480px;
    transition:transform 0.65s cubic-bezier(0.23,1,0.32,1),opacity 0.65s cubic-bezier(0.23,1,0.32,1),filter 0.65s ease;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
}
@media(max-width:768px){.cl-coverflow__card{width:190px;max-height:380px}}
@media(max-width:480px){.cl-coverflow__card{width:155px;max-height:310px}}

.cl-coverflow__card-inner{display:block;position:relative;width:100%;height:100%;border:1px solid rgba(201,191,180,0.1);overflow:hidden;text-decoration:none;transition:border-color 0.4s}
.cl-coverflow__card.is-active .cl-coverflow__card-inner{border-color:rgba(201,191,180,0.3)}

/* Gold top line */
.cl-coverflow__card-gold{position:absolute;top:0;left:0;right:0;height:1px;background:rgba(201,191,180,0.4);z-index:2}

/* Image — 1:2 portrait, full slab visible.
   No translateZ(0) here — it forces a compositor layer that gets rasterized at
   CSS-pixel resolution and then upscaled, blurring the image. */
.cl-coverflow__card-img{
    position:relative;width:100%;height:100%;
    aspect-ratio:1/2;overflow:hidden;background:#0a0a0c;
}
.cl-coverflow__card-img img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 1s var(--ease-smooth);
    /* Use HIGH-QUALITY bilinear for photos (NOT crisp-edges — that's nearest-neighbor,
       which destroys photo quality. crisp-edges/pixelated are for pixel-art only). */
    image-rendering:auto;
    image-rendering:high-quality;
    -ms-interpolation-mode:bicubic;
}
.cl-coverflow__card.is-active:hover .cl-coverflow__card-img img{transform:scale(1.05)}
/* No gradient overlay — clean image to match source quality exactly */
.cl-coverflow__card-gradient{display:none}

/* Text overlay — text has its own shadow for legibility on any marble color */
.cl-coverflow__card-text{position:absolute;bottom:0;left:0;right:0;padding:1.2rem;z-index:2}
.cl-coverflow__card-origin{
    display:block;font-size:0.55rem;letter-spacing:0.35em;text-transform:uppercase;
    color:var(--cl-accent);margin-bottom:0.4rem;
    text-shadow:0 1px 4px rgba(0,0,0,0.65),0 1px 8px rgba(0,0,0,0.45);
}
.cl-coverflow__card-text h3{
    font-family:var(--font-display);font-size:1.25rem;color:var(--cl-white);
    letter-spacing:0.5px;margin:0;line-height:1.2;
    text-shadow:0 2px 10px rgba(0,0,0,0.75),0 1px 3px rgba(0,0,0,0.75);
}
@media(min-width:769px){.cl-coverflow__card-text h3{font-size:1.4rem}}

/* Animated underline — only on active card */
.cl-coverflow__card-line{width:0;height:1px;background:var(--cl-accent);margin-top:0.6rem;transition:width 0.6s cubic-bezier(0.23,1,0.32,1) 0.15s}
.cl-coverflow__card.is-active .cl-coverflow__card-line{width:40px}

/* Arrows */
.cl-coverflow__arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;background:rgba(255,255,255,0.05);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cl-white);z-index:10;transition:all 0.3s}
.cl-coverflow__arrow:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25)}
.cl-coverflow__arrow--prev{right:clamp(1rem,22vw,18rem)}
.cl-coverflow__arrow--next{left:clamp(1rem,22vw,18rem)}
@media(max-width:768px){
    .cl-coverflow__arrow{width:40px;height:40px}
    .cl-coverflow__arrow--prev{right:0.5rem}
    .cl-coverflow__arrow--next{left:0.5rem}
}

/* Dots */
.cl-coverflow__dots{display:flex;justify-content:center;gap:6px;padding:2rem 0 0}
.cl-coverflow__dot{width:8px;height:3px;background:rgba(255,255,255,0.2);border:none;cursor:pointer;transition:all 0.3s;padding:0}
.cl-coverflow__dot.active{width:28px;background:var(--cl-accent)}

/* ============================
   ABOUT — Cinematic Split
   ============================ */
.cl-about{padding:var(--space-section) 0}
.cl-about__grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:6rem;align-items:center}
.cl-about__visual{position:relative}
.cl-about__img-wrap{overflow:hidden}
.cl-about__img-wrap img{width:100%;transition:transform 1.2s var(--ease-smooth)}
.cl-about__img-wrap:hover img{transform:scale(1.02)}
.cl-about__badge{position:absolute;bottom:-2rem;left:-2rem;background:var(--cl-white);padding:1.5rem;box-shadow:var(--shadow-md)}
.cl-about__text h2{font-family:var(--font-display);font-size:var(--type-h2);font-weight:400;letter-spacing:-0.5px;margin:0.5rem 0 0;line-height:1.15}
.cl-about__divider{width:50px;height:1px;background:var(--cl-accent);margin:2rem 0}
.cl-about__text p{color:var(--cl-gray-dark);line-height:1.9;margin-bottom:1.25rem;font-size:var(--type-body);max-width:520px}

/* ============================
   VISION — Parallax Dark Band
   ============================ */
.cl-vision{position:relative;padding:var(--space-section) 0;min-height:500px;display:flex;align-items:center;overflow:hidden}
.cl-vision__bg{position:absolute;inset:-50px;background-size:cover;background-position:center;background-attachment:fixed}
.cl-vision__overlay{position:absolute;inset:0;background:rgba(26,26,30,0.8)}
.cl-vision__content{position:relative;z-index:2;text-align:center;max-width:750px;margin:0 auto}
.cl-vision__content h2{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:400;color:var(--cl-white);letter-spacing:-0.5px;line-height:1.2;margin:0.5rem 0 2rem}
.cl-vision__content p{color:rgba(255,255,255,0.55);font-size:1.1rem;line-height:1.9;max-width:600px;margin:0 auto}

/* ============================
   EXPERIENCE — Grespania story
   ============================ */
.cl-experience{padding:var(--space-section) 0;background:var(--cl-white)}
.cl-experience__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:6rem;align-items:center}
.cl-experience__text h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:-0.5px;line-height:1.2;margin:0.5rem 0 0}
.cl-experience__text p{color:var(--cl-gray-dark);line-height:1.9;margin:1.5rem 0 0}
.cl-experience__img-wrap{overflow:hidden}
.cl-experience__img-wrap img{width:100%;height:auto;transition:transform 1.2s var(--ease-smooth)}
.cl-experience__img-wrap:hover img{transform:scale(1.03)}
@media(max-width:768px){.cl-experience__grid{grid-template-columns:1fr;gap:3rem}}

/* ============================
   GALLERY — Draggable + Lightbox
   ============================ */
.cl-gallery{padding:var(--space-section) 0;background:var(--cl-bg-cool);overflow:hidden}
.cl-gallery__header{margin-bottom:3rem}
.cl-gallery__header h2{font-family:var(--font-display);font-size:var(--type-h2);font-weight:400;letter-spacing:-0.5px;margin-top:0.5rem}
.cl-gallery__track{display:flex;gap:1rem;padding:0 2.5rem;overflow-x:auto;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.cl-gallery__track::-webkit-scrollbar{display:none}
.cl-gallery__track.dragging{cursor:grabbing;scroll-snap-type:none}
.cl-gallery__track:not(.dragging){scroll-snap-type:x proximity}
.cl-gallery__item{flex-shrink:0;width:420px;height:320px;position:relative;overflow:hidden;scroll-snap-align:center;cursor:pointer}
.cl-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease-smooth);pointer-events:none}
.cl-gallery__item:hover img{transform:scale(1.04)}
.cl-gallery__item::after{content:'+';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:200;color:var(--cl-white);background:rgba(26,26,30,0);transition:background 0.4s;pointer-events:none;opacity:0}
.cl-gallery__item:hover::after{background:rgba(26,26,30,0.25);opacity:1}
@media(max-width:768px){.cl-gallery__item{width:300px;height:240px}}

/* Lightbox */
.cl-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.92);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity 0.4s}
.cl-lightbox.open{display:flex;opacity:1}
.cl-lightbox__img{max-width:88vw;max-height:85vh;object-fit:contain;border:none}
.cl-lightbox__close{position:absolute;top:1.5rem;left:1.5rem;background:none;border:none;color:var(--cl-white);font-size:2.5rem;cursor:pointer;z-index:2;line-height:1;opacity:0.7;transition:opacity 0.3s}
.cl-lightbox__close:hover{opacity:1}
.cl-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cl-white);transition:background 0.3s}
.cl-lightbox__nav:hover{background:rgba(255,255,255,0.18)}
.cl-lightbox__nav--prev{right:1.5rem}
.cl-lightbox__nav--next{left:1.5rem}
.cl-lightbox__counter{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.5);font-size:0.85rem;letter-spacing:2px}
.cl-gallery__item-hover span{font-size:2.5rem;font-weight:200;color:var(--cl-white);opacity:0;transform:scale(0.7);transition:all 0.4s var(--ease)}
.cl-gallery__item:hover .cl-gallery__item-hover span{opacity:1;transform:scale(1)}

/* ============================
   CONTACT
   ============================ */
.cl-contact{padding:var(--space-section) 0;background:var(--cl-dark)}
.cl-contact__layout{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.cl-contact__info h2{font-family:var(--font-display);font-size:var(--type-h2);font-weight:400;color:var(--cl-white);letter-spacing:-0.5px;line-height:1.15;margin:0.5rem 0 2.5rem}
.cl-contact__details{display:flex;flex-direction:column;gap:0.75rem;margin-bottom:2rem}
.cl-contact__link{display:block;color:rgba(255,255,255,0.5);font-size:0.95rem;letter-spacing:0.3px;transition:color 0.3s}
.cl-contact__link:hover{color:var(--cl-accent)}

.cl-form{display:flex;flex-direction:column;gap:1rem}
.cl-form__input{width:100%;padding:1rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:var(--cl-white);font-family:var(--font-body);font-size:0.9rem;transition:border-color 0.3s;direction:rtl}
.cl-form__input::placeholder{color:rgba(255,255,255,0.25)}
.cl-form__input:focus{outline:none;border-color:var(--cl-accent)}
.cl-form__select{appearance:none}
.cl-form__textarea{resize:vertical;min-height:100px}

/* ============================
   FOOTER
   ============================ */
.cl-footer{background:var(--cl-footer-bg);padding:5rem 0 0;color:var(--cl-gray-light)}
.cl-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4rem;padding-bottom:4rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.cl-footer__logo{height:28px;filter:brightness(0) invert(1);margin-bottom:1.5rem}
.cl-footer__tagline{font-size:0.85rem;line-height:1.8;color:var(--cl-gray-mid);margin:0}
.cl-footer__col h4{font-size:0.7rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--cl-white);margin:0 0 1.5rem}
.cl-footer__nav{display:flex;flex-direction:column;gap:0.7rem}
.cl-footer__nav a{color:var(--cl-gray-mid);font-size:0.85rem;transition:color 0.3s}
.cl-footer__nav a:hover{color:var(--cl-accent)}
.cl-footer__contact{display:flex;flex-direction:column;gap:0.7rem}
.cl-footer__contact p,.cl-footer__contact a{color:var(--cl-gray-mid);font-size:0.85rem;margin:0}
.cl-footer__contact a:hover{color:var(--cl-accent)}
.cl-footer__wa{color:#25D366!important;font-weight:500}
.cl-footer__social{display:flex;gap:1.2rem;margin-bottom:1.5rem}
.cl-footer__social a{color:var(--cl-gray-mid);display:flex;transition:color 0.3s}
.cl-footer__social a:hover{color:var(--cl-accent)}
.cl-footer__global{color:var(--cl-gray-mid);font-size:0.8rem;letter-spacing:0.5px}
.cl-footer__global:hover{color:var(--cl-accent)}
.cl-footer__bottom{padding:2rem 0;text-align:center}
.cl-footer__bottom p{color:rgba(255,255,255,0.2);font-size:0.75rem;margin:0}

/* ============================
   CURSOR CIRCLE (nav hover)
   ============================ */
.cl-cursor{position:fixed;width:60px;height:60px;border:1.5px solid var(--cl-accent);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%) scale(0);transition:transform 0.4s var(--ease),opacity 0.3s;opacity:0}
.cl-cursor.active{transform:translate(-50%,-50%) scale(1);opacity:0.85}

/* ============================
   CATALOG PAGE (V3 — Gallery Mode)
   Dark cinematic hero → Light gallery for products
   ============================ */
.cl-cat{
    /* Light gallery theme */
    --cat-bg:       #FFFFFF;  /* pure white */
    --cat-elev:     #FFFFFF;  /* cards */
    --cat-surface:  #FFFFFF;
    --cat-brand:    #C9BFB4;  /* Sahara */
    --cat-brand-lt: #D8CFC6;
    --cat-brand-dk: #8A7F73;  /* darker Sahara for text-on-light */
    --cat-ink:      #0A0A0C;  /* dark text */
    --cat-ink-2:    rgba(10,10,12,0.70);
    --cat-ink-3:    rgba(10,10,12,0.48);
    --cat-ink-4:    rgba(10,10,12,0.20);
    --cat-border:   rgba(10,10,12,0.08);
    --cat-border-2: rgba(10,10,12,0.15);
    --cat-gold-bd:  rgba(201,191,180,0.55);

    /* Dark hero scope */
    --hero-bg:   #0A0A0C;
    --hero-ink:  #F5F5F0;
    --hero-ink-2: rgba(245,245,240,0.65);
    --hero-ink-3: rgba(245,245,240,0.45);

    background:var(--cat-bg);
    color:var(--cat-ink);
    min-height:100vh;
}

/* HERO — dark dramatic intro */
.cl-cat-hero{
    position:relative;
    padding:7rem 0 5rem;
    overflow:hidden;
    text-align:center;
    background:var(--hero-bg);
    color:var(--hero-ink);
}
@media(min-width:1024px){.cl-cat-hero{padding:9rem 0 6rem}}
.cl-cat-hero__glow{
    position:absolute;top:-30%;left:50%;
    width:90vmax;height:90vmax;
    margin-left:-45vmax;
    background:radial-gradient(ellipse at center,rgba(201,191,180,0.10) 0%,transparent 55%);
    pointer-events:none;
    animation:clCatGlow 22s ease-in-out infinite;
}
@keyframes clCatGlow{
    0%,100%{opacity:0.5;transform:scale(1)}
    50%{opacity:1;transform:scale(1.08)}
}
.cl-cat-hero__inner{position:relative;z-index:2}
.cl-cat-hero__eyebrow{
    display:inline-block;
    font-size:0.68rem;font-weight:600;
    letter-spacing:0.35em;text-transform:uppercase;
    color:var(--cat-brand);
    margin-bottom:1.75rem;
    opacity:0;transform:translateY(20px);
    animation:clCatIn .9s cubic-bezier(0.22,1,0.36,1) forwards;
}
.cl-cat-hero__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(3rem,7vw,6.5rem);
    font-weight:400;
    letter-spacing:-0.02em;
    line-height:1;
    color:var(--hero-ink);
    opacity:0;transform:translateY(20px);
    animation:clCatIn .9s cubic-bezier(0.22,1,0.36,1) .1s forwards;
}
.cl-cat-hero__subtitle{
    margin:1.5rem auto 0;max-width:46rem;
    font-size:1.125rem;line-height:1.7;
    color:var(--hero-ink-2);
    opacity:0;transform:translateY(20px);
    animation:clCatIn .9s cubic-bezier(0.22,1,0.36,1) .2s forwards;
}
.cl-cat-hero__stats{
    display:flex;justify-content:center;gap:4rem;flex-wrap:wrap;
    margin-top:3.5rem;
    opacity:0;transform:translateY(20px);
    animation:clCatIn .9s cubic-bezier(0.22,1,0.36,1) .3s forwards;
}
.cl-cat-hero__stat{text-align:center}
.cl-cat-hero__stat-num{
    font-family:var(--font-display);
    font-size:clamp(2.5rem,4.5vw,3.75rem);
    font-weight:300;
    color:var(--cat-brand);
    line-height:1;
}
.cl-cat-hero__stat-label{
    margin-top:.5rem;
    font-size:0.72rem;letter-spacing:0.22em;
    text-transform:uppercase;color:var(--hero-ink-3);
}
@keyframes clCatIn{to{opacity:1;transform:translateY(0)}}

/* FILTERS (sticky, white bg) */
.cl-cat-filters{
    position:sticky;top:var(--header-height,64px);z-index:80;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--cat-border);
}
.cl-cat-filters__inner{
    display:flex;align-items:center;gap:1.25rem;
    padding:1.1rem 0;flex-wrap:wrap;
}
.cl-cat-pills{
    display:flex;align-items:center;gap:.5rem;
    flex:1;min-width:0;flex-wrap:wrap;
}
.cl-cat-pill{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.5rem 1.1rem;
    background:transparent;
    border:1px solid var(--cat-border-2);
    border-radius:999px;
    color:var(--cat-ink-2);
    font-family:var(--font-body);font-size:.8rem;
    letter-spacing:.02em;cursor:pointer;
    white-space:nowrap;
    transition:all .3s cubic-bezier(0.22,1,0.36,1);
}
.cl-cat-pill:hover{color:var(--cat-ink);border-color:var(--cat-gold-bd);background:rgba(201,191,180,0.10)}
.cl-cat-pill.is-active{background:var(--cat-ink);color:var(--cat-bg);border-color:var(--cat-ink);font-weight:600}
.cl-cat-pill__count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;padding:0 .35rem;height:18px;
    border-radius:999px;
    background:rgba(10,10,12,0.06);
    font-size:.65rem;font-weight:600;line-height:1;
    color:inherit;opacity:.75;
}
.cl-cat-pill.is-active .cl-cat-pill__count{background:rgba(245,245,240,0.22);opacity:1}

.cl-cat-controls{display:flex;align-items:center;gap:.75rem;flex-shrink:0;flex-wrap:wrap}
.cl-cat-search{
    display:flex;align-items:center;gap:.5rem;
    padding:.55rem .85rem;
    background:#FFFFFF;
    border:1px solid var(--cat-border-2);
    border-radius:999px;min-width:220px;
    transition:border-color .3s,box-shadow .3s;
}
.cl-cat-search:focus-within{border-color:var(--cat-ink);box-shadow:0 2px 10px rgba(10,10,12,0.05)}
.cl-cat-search svg{color:var(--cat-ink-3);flex-shrink:0}
.cl-cat-search input{
    flex:1;min-width:0;
    background:none;border:none;outline:none;
    color:var(--cat-ink);font-size:.85rem;font-family:var(--font-body);
}
.cl-cat-search input::placeholder{color:var(--cat-ink-3)}

.cl-cat-sort{display:flex;align-items:center;gap:.5rem}
.cl-cat-sort__label{color:var(--cat-ink-3);font-size:.75rem;letter-spacing:.05em}
.cl-cat-sort__select{
    padding:.55rem .9rem;
    background:#FFFFFF;
    border:1px solid var(--cat-border-2);
    border-radius:999px;
    color:var(--cat-ink);
    font-family:var(--font-body);font-size:.82rem;
    cursor:pointer;
    transition:border-color .3s;
    appearance:none;-webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--cat-ink-3) 50%),linear-gradient(135deg,var(--cat-ink-3) 50%,transparent 50%);
    background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
    background-size:5px 5px;background-repeat:no-repeat;
    padding-inline-end:2.2rem;
}
.cl-cat-sort__select:hover{border-color:var(--cat-gold-bd)}
.cl-cat-sort__select:focus{outline:none;border-color:var(--cat-brand)}

/* Active filter chips row */
.cl-cat-active{border-top:1px solid var(--cat-border)}
.cl-cat-active__inner{
    display:flex;align-items:center;gap:.75rem;
    padding:.75rem 0;flex-wrap:wrap;
}
.cl-cat-active__label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cat-ink-3)}
.cl-cat-active__chips{display:flex;gap:.4rem;flex-wrap:wrap;flex:1}
.cl-cat-active__chip{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.3rem .7rem;
    background:rgba(201,191,180,0.18);
    border:1px solid var(--cat-gold-bd);
    border-radius:999px;
    color:var(--cat-brand-dk);
    font-size:.75rem;
    cursor:pointer;
    transition:background .3s;
}
.cl-cat-active__chip:hover{background:rgba(201,191,180,0.30)}
.cl-cat-active__chip::after{content:'×';font-size:1rem;line-height:1;margin-inline-start:.15rem}
.cl-cat-active__clear{
    background:none;border:none;
    color:var(--cat-ink-3);font-size:.78rem;
    cursor:pointer;text-decoration:underline;
    transition:color .3s;
}
.cl-cat-active__clear:hover{color:var(--cat-ink)}

/* GRID SECTION */
.cl-cat-grid-section{padding:3rem 0 6rem}
.cl-cat-grid-head{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:2rem;
}
.cl-cat-grid-head__count{
    font-family:var(--font-display);
    font-size:1rem;
    color:var(--cat-ink-2);
    letter-spacing:.02em;
}
.cl-cat-grid-head__count #cl-cat-visible{color:var(--cat-brand-dk);font-size:1.3rem;font-weight:600}
.cl-cat-grid-head__sep{margin:0 .4rem;color:var(--cat-ink-4)}
.cl-cat-grid-head__label{margin-inline-start:.4rem;color:var(--cat-ink-3);font-size:.85rem}

.cl-cat-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.75rem;
}
@media(min-width:1280px){.cl-cat-grid{gap:2.5rem}}

/* CARD */
.cl-cat-card{
    display:flex;flex-direction:column;
    text-decoration:none;color:inherit;
    opacity:0;transform:translateY(20px);
    animation:clCatCardIn .7s cubic-bezier(0.22,1,0.36,1) forwards;
    animation-delay:calc(var(--i,0) * 0.04s + 0.1s);
}
@keyframes clCatCardIn{to{opacity:1;transform:translateY(0)}}
.cl-cat-card.is-hidden{display:none}
.cl-cat-card--pending{animation:none;opacity:0;transform:translateY(20px);display:none}
.cl-cat-card--pending.is-revealed{display:flex;animation:clCatCardIn .6s cubic-bezier(0.22,1,0.36,1) forwards}

.cl-cat-card__frame{
    position:relative;
    aspect-ratio:5/4;
    overflow:hidden;
    background:#FFFFFF;
    border:1px solid var(--cat-border);
    box-shadow:0 1px 3px rgba(10,10,12,0.04);
    transition:border-color .5s cubic-bezier(0.22,1,0.36,1),transform .5s cubic-bezier(0.22,1,0.36,1),box-shadow .5s;
}
.cl-cat-card:hover .cl-cat-card__frame{
    border-color:var(--cat-gold-bd);
    transform:translateY(-6px);
    box-shadow:0 24px 50px rgba(10,10,12,0.12),0 0 40px rgba(201,191,180,0.22);
}
.cl-cat-card__img{
    width:100%;height:100%;
    object-fit:contain;object-position:center;
    display:block;
    transition:transform 1.2s cubic-bezier(0.22,1,0.36,1);
}
.cl-cat-card:hover .cl-cat-card__img{transform:scale(1.06)}
.cl-cat-card__placeholder{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:1.5rem;text-align:center;
    font-family:var(--font-display);font-size:1.1rem;
    color:var(--cat-ink-3);
}
.cl-cat-card__overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 0%,transparent 60%,rgba(10,10,12,0.08) 100%);
    opacity:0;pointer-events:none;
    transition:opacity .5s;
}
.cl-cat-card:hover .cl-cat-card__overlay{opacity:1}
.cl-cat-card__badge{
    position:absolute;top:.85rem;right:.85rem;
    padding:.3rem .8rem;
    background:rgba(10,10,12,0.78);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(245,245,240,0.12);
    border-radius:999px;
    font-size:.66rem;letter-spacing:.08em;
    color:#F5F5F0;
}
.cl-cat-card__cta{
    position:absolute;bottom:1rem;left:1rem;right:1rem;
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.7rem 1rem;
    background:var(--cat-ink);
    color:var(--cat-bg);
    font-size:.78rem;font-weight:600;letter-spacing:.03em;
    opacity:0;transform:translateY(12px);
    transition:opacity .4s,transform .4s cubic-bezier(0.22,1,0.36,1);
    pointer-events:none;
}
.cl-cat-card:hover .cl-cat-card__cta{opacity:1;transform:translateY(0)}
.cl-cat-card__body{padding:1rem .25rem 0}
.cl-cat-card__name{
    margin:0 0 .15rem;
    font-family:var(--font-display);
    font-size:1.35rem;font-weight:500;
    letter-spacing:-0.01em;
    color:var(--cat-ink);
    transition:color .3s;
}
.cl-cat-card:hover .cl-cat-card__name{color:var(--cat-brand-dk)}
.cl-cat-card__cat{
    font-family:var(--font-body);
    font-size:.72rem;letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--cat-ink-3);
}

/* EMPTY STATE */
.cl-cat-empty{
    text-align:center;padding:5rem 2rem;
    max-width:28rem;margin:0 auto;
}
.cl-cat-empty__icon{color:var(--cat-brand-dk);opacity:.6;margin-bottom:1.25rem}
.cl-cat-empty h3{
    margin:0 0 .5rem;
    font-family:var(--font-display);
    font-size:1.5rem;font-weight:400;
    color:var(--cat-ink);
}
.cl-cat-empty p{
    margin:0 0 1.5rem;
    color:var(--cat-ink-3);
    font-size:.9rem;
}
.cl-cat-empty__btn{
    padding:.75rem 2rem;
    background:transparent;
    border:1px solid var(--cat-ink);
    color:var(--cat-ink);
    border-radius:999px;
    font-family:var(--font-body);font-size:.85rem;letter-spacing:.05em;
    cursor:pointer;
    transition:all .4s cubic-bezier(0.22,1,0.36,1);
}
.cl-cat-empty__btn:hover{background:var(--cat-ink);color:var(--cat-bg)}

/* LOAD MORE */
.cl-cat-loadmore-wrap{text-align:center;margin-top:3rem}
.cl-cat-loadmore{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:1rem 2.5rem;
    background:transparent;
    border:1px solid var(--cat-border-2);
    border-radius:999px;
    color:var(--cat-ink);
    font-family:var(--font-body);font-size:.9rem;font-weight:500;letter-spacing:.05em;
    cursor:pointer;
    transition:all .4s cubic-bezier(0.22,1,0.36,1);
}
.cl-cat-loadmore:hover{border-color:var(--cat-ink);background:var(--cat-ink);color:var(--cat-bg)}
.cl-cat-loadmore__count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:26px;padding:0 .5rem;height:22px;
    border-radius:999px;
    background:rgba(201,191,180,0.20);
    color:var(--cat-brand-dk);
    font-size:.72rem;font-weight:600;
}
.cl-cat-loadmore:hover .cl-cat-loadmore__count{background:rgba(201,191,180,0.30);color:var(--cat-brand)}

/* ============================
   SINGLE PRODUCT (V4 — Editorial Luxury)
   ============================ */
.cl-prod{
    --cat-bg:#FFFFFF; --cat-elev:#F8F6F1; --cat-surface:#FFFFFF;
    --cat-brand:#C9BFB4; --cat-brand-lt:#D8CFC6; --cat-brand-dk:#8A7F73;
    --cat-ink:#0A0A0C; --cat-ink-2:rgba(10,10,12,0.70); --cat-ink-3:rgba(10,10,12,0.48);
    --cat-ink-4:rgba(10,10,12,0.20);
    --cat-border:rgba(10,10,12,0.08); --cat-border-2:rgba(10,10,12,0.15);
    --cat-gold-bd:rgba(201,191,180,0.55);
    background:var(--cat-bg);color:var(--cat-ink);min-height:100vh;
}

.cl-prod-breadcrumb{
    padding:2rem 0 0;
    font-size:.78rem;color:var(--cat-ink-3);
    letter-spacing:.04em;
}
.cl-prod-breadcrumb a{color:var(--cat-ink-3);transition:color .3s;text-decoration:none}
.cl-prod-breadcrumb a:hover{color:var(--cat-ink)}
.cl-prod-breadcrumb__sep{margin:0 .5rem;color:var(--cat-ink-4)}
.cl-prod-breadcrumb__current{color:var(--cat-ink)}

/* HERO — editorial */
.cl-prod-hero{
    padding:5rem 0 3rem;
    text-align:center;
    position:relative;
}
@media(min-width:768px){.cl-prod-hero{padding:7rem 0 4rem}}
.cl-prod-hero__inner{
    max-width:50rem;margin:0 auto;
    opacity:0;transform:translateY(20px);
    animation:clProdIn .9s cubic-bezier(0.22,1,0.36,1) forwards;
}
.cl-prod-hero__eyebrow{
    display:inline-block;
    font-size:.7rem;font-weight:600;
    letter-spacing:0.35em;text-transform:uppercase;
    color:var(--cat-brand-dk);
    margin-bottom:1.5rem;
}
.cl-prod-hero__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(3rem,8vw,7rem);
    font-weight:400;
    letter-spacing:-0.025em;
    line-height:1;
    color:var(--cat-ink);
    text-transform:uppercase;
}
.cl-prod-hero__divider{
    width:60px;height:1px;
    background:linear-gradient(90deg,transparent,var(--cat-brand),transparent);
    margin:2rem auto 1.25rem;
}
.cl-prod-hero__signature{
    margin:0;
    font-family:var(--font-body);
    font-size:.7rem;letter-spacing:0.3em;
    color:var(--cat-ink-3);
    text-transform:uppercase;
}
.cl-prod-hero__signature sup{font-size:.55em;vertical-align:super;margin-right:1px}
@keyframes clProdIn{to{opacity:1;transform:translateY(0)}}

/* SHOWCASE — the slab */
.cl-prod-showcase{
    position:relative;
    padding:1rem 0 5rem;
}
.cl-prod-showcase__bg{
    position:absolute;inset:0 0 auto 0;
    height:65%;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8F6F1 100%);
    pointer-events:none;
    z-index:0;
}
.cl-prod-showcase__figure{
    position:relative;z-index:1;
    margin:0 auto;
    max-width:1000px;
    aspect-ratio:5/4;
    display:flex;align-items:center;justify-content:center;
    background:#FFFFFF;
    border:1px solid var(--cat-border);
    box-shadow:0 30px 80px rgba(10,10,12,0.12),0 0 0 1px rgba(201,191,180,0.10);
    overflow:hidden;
    opacity:0;transform:translateY(40px) scale(0.98);
    animation:clProdShowcaseIn 1.1s cubic-bezier(0.22,1,0.36,1) .15s forwards;
}
.cl-prod-showcase__figure img{
    width:100%;height:100%;
    object-fit:contain;object-position:center;
    transition:transform 1.4s cubic-bezier(0.22,1,0.36,1);
}
.cl-prod-showcase__figure:hover img{transform:scale(1.03)}
.cl-prod-showcase__placeholder{
    font-family:var(--font-display);
    font-size:1.5rem;color:var(--cat-ink-3);
}
.cl-prod-showcase__caption{
    position:relative;z-index:1;
    margin:1.5rem auto 0;
    text-align:center;
    font-family:var(--font-body);
    font-size:.78rem;letter-spacing:.25em;
    color:var(--cat-ink-3);
    text-transform:uppercase;
}
.cl-prod-showcase__sep{margin:0 .6rem;color:var(--cat-ink-4)}
@keyframes clProdShowcaseIn{
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* STORY */
.cl-prod-story{padding:5rem 0;background:#FFFFFF}
.cl-prod-story__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;align-items:center;
}
.cl-prod-story__grid--solo{
    grid-template-columns:1fr;
    max-width:50rem;margin:0 auto;
    text-align:center;
}
.cl-prod-story__grid--solo .cl-prod-story__copy{margin:0 auto}
.cl-prod-story__copy{display:flex;flex-direction:column;gap:1.25rem;max-width:36rem}
.cl-prod-story__label{
    font-size:.7rem;letter-spacing:0.3em;
    text-transform:uppercase;color:var(--cat-brand-dk);
}
.cl-prod-story__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(2rem,3.5vw,3rem);
    font-weight:400;letter-spacing:-0.015em;
    line-height:1.1;color:var(--cat-ink);
}
.cl-prod-story__body{
    font-size:1.05rem;line-height:1.85;
    color:var(--cat-ink-2);
}
.cl-prod-story__body p{margin:0 0 1rem}
.cl-prod-story__body strong{color:var(--cat-ink);font-weight:600}
/* GALLERY — installation/lifestyle photo carousel */
.cl-prod-gallery{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border:1px solid var(--cat-border);
    background:#F8F6F1;
    box-shadow:0 24px 60px rgba(10,10,12,0.10);
    user-select:none;
}
.cl-prod-gallery__viewport{position:absolute;inset:0;overflow:hidden}
.cl-prod-gallery__slide{
    position:absolute;inset:0;margin:0;
    opacity:0;visibility:hidden;
    transition:opacity .7s cubic-bezier(0.22,1,0.36,1),visibility 0s .7s;
}
.cl-prod-gallery__slide.is-active{
    opacity:1;visibility:visible;
    transition:opacity .7s cubic-bezier(0.22,1,0.36,1),visibility 0s 0s;
    z-index:1;
}
.cl-prod-gallery__slide img{
    width:100%;height:100%;
    object-fit:cover;object-position:center;
    display:block;
    transform:scale(1.02);
    transition:transform 8s linear;
}
.cl-prod-gallery__slide.is-active img{transform:scale(1.08)}

/* Navigation arrows */
.cl-prod-gallery__nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid var(--cat-border);
    color:var(--cat-ink);
    cursor:pointer;
    z-index:5;
    border-radius:50%;
    transition:background .3s,transform .3s,box-shadow .3s;
    opacity:0;
}
.cl-prod-gallery:hover .cl-prod-gallery__nav,
.cl-prod-gallery__nav:focus-visible{opacity:1}
.cl-prod-gallery__nav:hover{
    background:#FFFFFF;
    transform:translateY(-50%) scale(1.06);
    box-shadow:0 8px 20px rgba(10,10,12,0.18);
}
.cl-prod-gallery__nav--prev{right:1rem}
.cl-prod-gallery__nav--next{left:1rem}

/* Counter */
.cl-prod-gallery__counter{
    position:absolute;top:1rem;left:1rem;
    z-index:5;
    padding:.4rem .85rem;
    background:rgba(10,10,12,0.78);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-radius:999px;
    color:#F5F5F0;
    font-family:var(--font-body);
    font-size:.72rem;
    letter-spacing:.06em;
    pointer-events:none;
}
.cl-prod-gallery__counter-sep{margin:0 .25rem;opacity:.6}

/* Dots */
.cl-prod-gallery__dots{
    position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
    display:flex;gap:.4rem;
    z-index:5;
    padding:.4rem .65rem;
    background:rgba(10,10,12,0.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-radius:999px;
}
.cl-prod-gallery__dot{
    width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,0.45);
    border:none;padding:0;cursor:pointer;
    transition:background .3s,transform .3s;
}
.cl-prod-gallery__dot:hover{background:rgba(255,255,255,0.75)}
.cl-prod-gallery__dot.is-active{
    background:#C9BFB4;
    transform:scale(1.3);
}

/* SPECS V4 */
.cl-prod-specs-v4{padding:5rem 0;background:#F8F6F1}
.cl-prod-specs-v4__head{text-align:center;margin-bottom:3.5rem}
.cl-prod-specs-v4__eyebrow{
    display:inline-block;
    font-size:.7rem;letter-spacing:.3em;
    text-transform:uppercase;color:var(--cat-brand-dk);
    margin-bottom:.75rem;
}
.cl-prod-specs-v4__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(1.75rem,3vw,2.5rem);
    font-weight:400;letter-spacing:-0.01em;
    color:var(--cat-ink);
}
.cl-prod-specs-v4__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--cat-border);
    border:1px solid var(--cat-border);
    max-width:1200px;margin:0 auto;
}
.cl-prod-specs-v4__item{
    background:#FFFFFF;
    padding:2rem 1.5rem;
    text-align:center;
    transition:background .4s,transform .4s cubic-bezier(0.22,1,0.36,1);
}
.cl-prod-specs-v4__item:hover{
    background:#FAFAF7;
    transform:translateY(-2px);
}
.cl-prod-specs-v4__icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;
    border:1px solid var(--cat-gold-bd);
    border-radius:50%;
    color:var(--cat-brand-dk);
    margin-bottom:1rem;
}
.cl-prod-specs-v4__icon svg{width:22px;height:22px}
.cl-prod-specs-v4__label{
    font-size:.65rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--cat-ink-3);
    margin-bottom:.4rem;
}
.cl-prod-specs-v4__value{
    font-family:var(--font-display);
    font-size:1.1rem;color:var(--cat-ink);
    letter-spacing:-0.01em;line-height:1.3;
}

/* APPLICATIONS */
.cl-prod-apps{padding:5rem 0;background:#FFFFFF}
.cl-prod-apps__head{text-align:center;margin-bottom:3.5rem}
.cl-prod-apps__eyebrow{
    display:inline-block;
    font-size:.7rem;letter-spacing:.3em;
    text-transform:uppercase;color:var(--cat-brand-dk);
    margin-bottom:.75rem;
}
.cl-prod-apps__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(1.75rem,3vw,2.5rem);
    font-weight:400;letter-spacing:-0.01em;
    color:var(--cat-ink);
}
.cl-prod-apps__grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:1.5rem;
    max-width:1100px;margin:0 auto;
}
.cl-prod-apps__item{
    text-align:center;
    padding:1.5rem .75rem;
    transition:transform .4s cubic-bezier(0.22,1,0.36,1);
}
.cl-prod-apps__item:hover{transform:translateY(-4px)}
.cl-prod-apps__icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:64px;height:64px;
    border:1px solid var(--cat-gold-bd);
    border-radius:50%;
    color:var(--cat-brand-dk);
    margin-bottom:.85rem;
    transition:background .4s,border-color .4s,color .4s;
}
.cl-prod-apps__item:hover .cl-prod-apps__icon{
    background:rgba(201,191,180,0.12);
    border-color:var(--cat-brand);
    color:var(--cat-ink);
}
.cl-prod-apps__icon svg{width:28px;height:28px}
.cl-prod-apps__label{
    font-family:var(--font-body);
    font-size:.85rem;color:var(--cat-ink);
    letter-spacing:.02em;
}

/* CTA BAND */
.cl-prod-cta-band{
    position:relative;
    padding:6rem 0;
    background:#0A0A0C;
    color:#F5F5F0;
    overflow:hidden;
    text-align:center;
}
.cl-prod-cta-band__glow{
    position:absolute;top:50%;left:50%;
    width:80vmax;height:80vmax;
    margin:-40vmax 0 0 -40vmax;
    background:radial-gradient(circle,rgba(201,191,180,0.10) 0%,transparent 50%);
    pointer-events:none;
    animation:clProdCtaGlow 18s ease-in-out infinite;
}
@keyframes clProdCtaGlow{
    0%,100%{opacity:0.5;transform:scale(1)}
    50%{opacity:0.9;transform:scale(1.1)}
}
.cl-prod-cta-band__inner{position:relative;z-index:2;max-width:42rem;margin:0 auto}
.cl-prod-cta-band__eyebrow{
    display:inline-block;
    font-size:.7rem;letter-spacing:.3em;
    text-transform:uppercase;color:#C9BFB4;
    margin-bottom:1rem;
}
.cl-prod-cta-band__title{
    margin:0 0 1rem;
    font-family:var(--font-display);
    font-size:clamp(2rem,4vw,3.25rem);
    font-weight:300;letter-spacing:-0.015em;
    line-height:1.1;color:#F5F5F0;
}
.cl-prod-cta-band__title em{
    font-style:normal;
    background:linear-gradient(135deg,#C9BFB4 0%,#D8CFC6 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}
.cl-prod-cta-band__desc{
    margin:0 0 2.5rem;
    font-size:1.05rem;line-height:1.7;
    color:rgba(245,245,240,0.65);
}
.cl-prod-cta-band__buttons{
    display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;
}
.cl-prod-cta-band__btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    padding:1rem 1.75rem;
    font-family:var(--font-body);font-size:.9rem;font-weight:600;letter-spacing:.03em;
    border:1px solid transparent;
    border-radius:999px;
    text-decoration:none;cursor:pointer;
    transition:all .4s cubic-bezier(0.22,1,0.36,1);
}
.cl-prod-cta-band__btn--primary{background:#C9BFB4;color:#0A0A0C;border-color:#C9BFB4}
.cl-prod-cta-band__btn--primary:hover{background:#D8CFC6;border-color:#D8CFC6;transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,191,180,0.30)}
.cl-prod-cta-band__btn--wa{background:transparent;color:#25D366;border-color:rgba(37,211,102,0.45)}
.cl-prod-cta-band__btn--wa:hover{background:#25D366;color:#0A0A0C;border-color:#25D366;transform:translateY(-2px)}
.cl-prod-cta-band__btn--ghost{background:transparent;color:#F5F5F0;border-color:rgba(245,245,240,0.20)}
.cl-prod-cta-band__btn--ghost:hover{background:rgba(245,245,240,0.06);border-color:rgba(245,245,240,0.45)}

/* RELATED */
.cl-prod-related{
    padding:5rem 0 6rem;
    background:#FFFFFF;
}
.cl-prod-related__head{margin-bottom:3rem;text-align:center}
.cl-prod-related__eyebrow{
    display:inline-block;
    font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
    color:var(--cat-brand-dk);margin-bottom:.75rem;
}
.cl-prod-related__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(1.75rem,3vw,2.5rem);
    font-weight:400;letter-spacing:-0.01em;
    color:var(--cat-ink);
}
.cl-prod-related__grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
    margin-bottom:3rem;
}
.cl-prod-related__more{text-align:center}
.cl-prod-related__more-link{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.85rem 1.75rem;
    background:transparent;
    border:1px solid var(--cat-ink);
    color:var(--cat-ink);
    border-radius:999px;
    font-family:var(--font-body);font-size:.85rem;font-weight:500;letter-spacing:.04em;
    text-decoration:none;
    transition:all .4s cubic-bezier(0.22,1,0.36,1);
}
.cl-prod-related__more-link:hover{
    background:var(--cat-ink);color:var(--cat-bg);
    transform:translateY(-2px);
}

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:1024px){
    .cl-categories__grid{grid-template-columns:1fr 1fr}
    .cl-categories__card--1{grid-row:auto}
    .cl-categories__card--4{grid-column:auto}
    .cl-categories__card--1 .cl-categories__card-img{min-height:300px}
    .cl-about__grid{grid-template-columns:1fr;gap:3rem}
    .cl-gallery__masonry{grid-template-columns:1fr 1fr;grid-auto-rows:250px}
    .cl-gallery__item--1{grid-row:auto}
    .cl-gallery__item--4{grid-column:auto}
    .cl-contact__layout{grid-template-columns:1fr;gap:3rem}
    .cl-cat-grid{grid-template-columns:repeat(2,1fr)}
    .cl-prod-related__grid{grid-template-columns:repeat(2,1fr)}
    .cl-prod-story__grid{grid-template-columns:1fr;gap:3rem}
    .cl-prod-story__visual{max-width:32rem;margin:0 auto;width:100%}
    .cl-prod-specs-v4__grid{grid-template-columns:repeat(2,1fr)}
    .cl-prod-apps__grid{grid-template-columns:repeat(3,1fr)}
    .cl-footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media(max-width:768px){
    .cl-container{padding:0 1.5rem}
    .cl-hero{min-height:600px}
    .cl-hero__content{padding-bottom:4rem}
    .cl-hero__counter{display:none}
    .cl-categories__grid{grid-template-columns:1fr}
    .cl-categories__card-img{min-height:240px!important}
    .cl-featured__card{width:260px}
    .cl-featured__card-img{width:260px;height:340px}
    .cl-gallery__masonry{grid-template-columns:1fr;grid-auto-rows:220px}
    .cl-cat-grid{grid-template-columns:1fr}
    .cl-cat-hero__stats{gap:2rem}
    .cl-prod-specs-v4__grid{grid-template-columns:1fr 1fr;gap:1px}
    .cl-prod-apps__grid{grid-template-columns:repeat(2,1fr)}
    .cl-prod-cta-band__buttons{flex-direction:column;gap:.6rem}
    .cl-prod-cta-band__btn{width:100%}
    .cl-prod-related__grid{grid-template-columns:1fr 1fr}
    .cl-cat-filters{position:static}
    .cl-cat-pills{overflow-x:auto;flex-wrap:nowrap;width:100%}
    .cl-cat-pill{flex-shrink:0}
    .cl-cat-controls{flex:1 0 100%}
    .cl-cat-search{min-width:auto;flex:1}
    .cl-prod-related__grid{grid-template-columns:1fr 1fr}
    .cl-footer__grid{grid-template-columns:1fr;gap:2rem}
}

/* ============================
   STICKY QUOTE CTA — site-wide
   ============================ */
.cl-quote-cta{
    position:fixed;
    bottom:1.5rem;
    inset-inline-start:1.5rem;
    z-index:9990;
    display:inline-flex;align-items:center;gap:.7rem;
    padding:1rem 1.4rem 1rem 1.75rem;
    background:linear-gradient(135deg,#D8CFC6 0%,#C9BFB4 50%,#B5A99B 100%);
    color:#0A0A0C;
    border:none;
    border-radius:999px;
    font-family:var(--font-body);
    font-size:.95rem;font-weight:600;letter-spacing:.02em;
    text-decoration:none;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 14px 40px rgba(10,10,12,0.40),0 0 28px rgba(201,191,180,0.30);
    transform:translateY(140%);
    opacity:0;pointer-events:none;
    transition:transform .55s cubic-bezier(0.22,1,0.36,1),opacity .35s,box-shadow .4s,background .4s,color .35s;
}
.cl-quote-cta.is-visible{
    transform:translateY(0);opacity:1;pointer-events:auto;
    animation:clQuoteAttn 2.4s cubic-bezier(0.4,0,0.2,1) infinite;
}
/* Outer halo — pulses outward from the pill */
@keyframes clQuoteAttn{
    0%,100%{
        box-shadow:0 0 0 0 rgba(201,191,180,0.65),
                    0 14px 40px rgba(10,10,12,0.40),
                    0 0 28px rgba(201,191,180,0.30);
    }
    50%{
        box-shadow:0 0 0 14px rgba(201,191,180,0),
                    0 14px 40px rgba(10,10,12,0.40),
                    0 0 44px rgba(201,191,180,0.55);
    }
}
/* Shimmer sweep — light streak crossing the pill */
.cl-quote-cta::before{
    content:'';
    position:absolute;inset:0;
    border-radius:inherit;
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,0.55) 50%,transparent 65%);
    background-size:220% 100%;
    background-position:200% 0;
    animation:clQuoteShimmer 3.2s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
    mix-blend-mode:overlay;
}
@keyframes clQuoteShimmer{
    0%,18%{background-position:200% 0}
    50%,100%{background-position:-200% 0}
}
.cl-quote-cta:hover{
    background:linear-gradient(135deg,#FFFFFF 0%,#D8CFC6 100%);
    color:#0A0A0C;
    transform:translateY(-5px);
    animation:none;
    box-shadow:0 22px 56px rgba(10,10,12,0.55),0 0 50px rgba(201,191,180,0.70);
}
.cl-quote-cta:hover::before{animation-duration:1.6s}
.cl-quote-cta__label{
    position:relative;z-index:2;
    white-space:nowrap;
}
.cl-quote-cta__icon{
    position:relative;z-index:2;
    display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;
    border-radius:50%;
    background:#0A0A0C;
    color:#C9BFB4;
    transition:background .35s,color .35s,transform .45s cubic-bezier(0.22,1,0.36,1);
    transform:scaleX(-1);
}
.cl-quote-cta:hover .cl-quote-cta__icon{
    background:#0A0A0C;
    color:#FFFFFF;
    transform:scaleX(-1) translateX(-3px);
}
/* Pulsing ring around icon */
.cl-quote-cta__icon::before{
    content:'';
    position:absolute;
    width:28px;height:28px;
    border-radius:50%;
    border:1.5px solid rgba(10,10,12,0.55);
    animation:clQuotePulse 1.8s cubic-bezier(0.22,1,0.36,1) infinite;
    pointer-events:none;
}
@keyframes clQuotePulse{
    0%{transform:scale(1);opacity:0.7}
    70%{transform:scale(1.9);opacity:0}
    100%{transform:scale(1.9);opacity:0}
}
.cl-quote-cta:hover .cl-quote-cta__icon::before{animation-duration:1.2s}

/* Mobile */
@media (max-width:640px){
    .cl-quote-cta{
        bottom:1rem;inset-inline-start:1rem;
        padding:.8rem 1rem .8rem 1.25rem;
        font-size:.85rem;
    }
    .cl-quote-cta__icon{width:22px;height:22px}
    .cl-quote-cta__icon::before{width:22px;height:22px}
}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
    .cl-quote-cta__icon::before{animation:none;display:none}
}

/* Hide sticky CTA when contact section is visible (avoid overlap with the form) */
.cl-quote-cta.is-near-contact{
    transform:translateY(140%);
    opacity:0;pointer-events:none;
}

/* ============================
   STICKY CATALOG DOWNLOAD CTA — catalog page only
   Sits above the site-wide quote pill, same styling
   ============================ */
.cl-cat-dl-cta{
    bottom:6.5rem;  /* clear space above the quote pill (which sits at 1.5rem) */
}
/* Download icon — no horizontal flip, points down naturally */
.cl-cat-dl-cta .cl-quote-cta__icon{
    transform:none;
}
.cl-cat-dl-cta:hover .cl-quote-cta__icon{
    transform:translateY(-2px);  /* subtle nudge down/up on hover */
}
@media (max-width:640px){
    .cl-cat-dl-cta{
        bottom:5rem;  /* clear space above quote pill on mobile */
    }
}

/* ============================================================
   CATALOG — Facade view (portrait cards + thickness sub-filter)
   ============================================================ */

/* Thickness sub-pills bar — appears below main pills when facade is active */
.cl-cat-subpills{
    background:rgba(245,245,240,0.5);
    border-bottom:1px solid var(--cat-border);
    padding:.6rem 0;
}
.cl-cat-subpills__inner{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.cl-cat-subpills__label{
    font-family:var(--font-body);font-size:.85rem;
    color:var(--cat-ink-2);
    margin-inline-end:.3rem;
}
.cl-cat-subpill{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.4rem .85rem;
    background:transparent;
    border:1px solid var(--cat-border);
    border-radius:999px;
    color:var(--cat-ink-2);
    font-family:var(--font-body);font-size:.82rem;
    cursor:pointer;
    transition:all .35s cubic-bezier(0.22,1,0.36,1);
}
.cl-cat-subpill:hover{
    background:rgba(201,191,180,0.10);
    border-color:var(--cat-gold-bd);
    color:var(--cat-ink);
}
.cl-cat-subpill.is-active{
    background:var(--cat-ink);
    color:var(--cat-bg);
    border-color:var(--cat-ink);
    font-weight:600;
}
.cl-cat-subpill__meta{
    font-size:.7rem;
    opacity:.7;
    font-weight:400;
    letter-spacing:.02em;
}
.cl-cat-subpill__count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:1.4rem;height:1.4rem;
    background:rgba(10,10,12,0.08);
    border-radius:999px;
    font-size:.7rem;
    padding:0 .35rem;
}
.cl-cat-subpill.is-active .cl-cat-subpill__count{
    background:rgba(245,245,240,0.22);
}

/* Portrait grid layout for facade — taller cards, fewer per row */
.cl-cat-grid--portrait{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
@media (min-width:768px){
    .cl-cat-grid--portrait{
        grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    }
}

/* Portrait card — 1:2 aspect ratio (vertical tile/facade orientation) */
.cl-cat-card__frame--portrait{
    aspect-ratio:1/2;
    background:#0a0a0c;  /* dark backdrop so portrait tiles pop */
}
.cl-cat-card--portrait .cl-cat-card__img{
    object-fit:cover;  /* portrait images should fill the frame */
}
.cl-cat-card__sub{
    display:inline-block;
    margin-top:.25rem;
    font-family:var(--font-body);font-size:.75rem;
    color:var(--cat-ink-3);
    letter-spacing:.02em;
    text-transform:uppercase;
}

/* ============================================================
   SINGLE FACADE — Portrait showcase + gallery overrides
   ============================================================ */

/* Showcase: portrait orientation — taller hero figure */
.cl-prod-showcase--portrait .cl-prod-showcase__figure--portrait{
    max-width:480px;
    margin:0 auto;
    aspect-ratio:1/2;
    background:#0a0a0c;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(10,10,12,0.35);
}
.cl-prod-showcase--portrait .cl-prod-showcase__figure--portrait .cl-prod-showcase__img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
}
.cl-prod-showcase__placeholder--portrait{
    width:100%;height:100%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    background:linear-gradient(135deg,#1a1a1f 0%,#0a0a0c 100%);
    color:rgba(245,245,240,0.55);
    text-align:center;padding:2rem;
    font-family:var(--font-display);font-size:1.4rem;
}
.cl-prod-showcase__placeholder-note{
    margin-top:.7rem;
    font-family:var(--font-body);font-size:.8rem;
    opacity:.6;
    font-weight:400;
}

/* Gallery in portrait mode — flip aspect ratio */
.cl-prod-gallery--portrait .cl-prod-gallery__viewport{
    aspect-ratio:3/4;
}

/* Related grid in portrait variant (facade single page) */
.cl-prod-related__grid--portrait{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
@media (min-width:768px){
    .cl-prod-related__grid--portrait{
        grid-template-columns:repeat(4,1fr);
    }
}
.cl-prod-related__grid--portrait .cl-cat-card__frame--portrait{
    aspect-ratio:1/2;
}

/* ============================================================
   SINGLE FACADE — Slab variations grid (shown in showcase section)
   ============================================================ */
.cl-prod-showcase--variations .cl-container{
    display:flex;flex-direction:column;align-items:center;gap:2rem;
}
.cl-prod-showcase__head{
    text-align:center;max-width:680px;margin:0 auto;
}
.cl-prod-showcase__eyebrow{
    display:inline-block;
    font-family:var(--font-body);font-size:.75rem;
    color:var(--cat-ink-3);letter-spacing:.2em;text-transform:uppercase;
    margin-bottom:.5rem;
}
.cl-prod-showcase__head-title{
    font-family:var(--font-display);
    font-size:clamp(1.6rem,3vw,2.4rem);
    font-weight:600;
    color:var(--cat-ink);
    margin:0 0 .6rem;
}
.cl-prod-showcase__head-desc{
    font-family:var(--font-body);font-size:1rem;
    color:var(--cat-ink-2);line-height:1.6;
    margin:0;
}

/* Variations grid — responsive: 2/3/4 cols depending on width */
.cl-prod-variations{
    display:grid;
    gap:1rem;
    width:100%;
    max-width:1200px;
    grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){
    .cl-prod-variations[data-count="1"]{grid-template-columns:minmax(220px,360px);justify-content:center}
    .cl-prod-variations[data-count="2"]{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center}
    .cl-prod-variations[data-count="3"]{grid-template-columns:repeat(3,1fr)}
    .cl-prod-variations[data-count="4"]{grid-template-columns:repeat(4,1fr)}
    .cl-prod-variations:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]){
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    }
}
.cl-prod-variations__item{
    margin:0;
    background:#0a0a0c;
    aspect-ratio:1/2;
    overflow:hidden;
    position:relative;
    box-shadow:0 12px 30px rgba(10,10,12,0.20);
    border:1px solid rgba(10,10,12,0.06);
    transition:transform .5s cubic-bezier(0.22,1,0.36,1),box-shadow .5s;
    cursor:zoom-in;
}
.cl-prod-variations__item:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 50px rgba(10,10,12,0.32);
}
.cl-prod-variations__img{
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform 1.2s cubic-bezier(0.22,1,0.36,1);
}
.cl-prod-variations__item:hover .cl-prod-variations__img{transform:scale(1.04)}
.cl-prod-variations__caption{
    position:absolute;
    inset-block-end:0;inset-inline-end:0;
    padding:.35rem .7rem;
    background:rgba(10,10,12,0.65);
    color:rgba(245,245,240,0.9);
    font-family:var(--font-body);font-size:.7rem;letter-spacing:.05em;
    backdrop-filter:blur(6px);
    pointer-events:none;
}
@media (max-width:640px){
    .cl-prod-variations{grid-template-columns:repeat(2,1fr);gap:.6rem}
    .cl-prod-variations__caption{font-size:.65rem;padding:.25rem .5rem}
}

/* ============================================================
   COLLECTION ARCHIVE — image-forward editorial grid
   Distinct from /catalog/ (which is filterable browser).
   ============================================================ */
.cl-collection{
    background:#FAF8F4;
    min-height:60vh;
    padding-block:5rem 4rem;
}
.cl-collection--facade{
    background:#FFFFFF;  /* white background to match kitchen archive + carousel theme */
    color:#0A0A0C;
}

/* HERO — large editorial type */
.cl-collection-hero{
    text-align:center;
    padding-block:2rem 4rem;
    max-width:780px;margin:0 auto;
}
.cl-collection-hero__eyebrow{
    display:inline-block;
    font-family:var(--font-body);
    font-size:.78rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--cat-ink-3);
    margin-bottom:1.2rem;
}
/* facade now uses light theme — inherits kitchen defaults */
.cl-collection-hero__title{
    font-family:var(--font-display);
    font-size:clamp(2.6rem, 6vw, 4.8rem);
    font-weight:300;
    letter-spacing:-.02em;
    color:var(--cat-ink);
    margin:0 0 1rem;
    line-height:1.05;
}
/* facade title color inherits kitchen default (dark text on white) */
.cl-collection-hero__subtitle{
    font-family:var(--font-body);
    font-size:clamp(1rem, 1.4vw, 1.15rem);
    color:var(--cat-ink-2);
    margin:0 0 1.2rem;
    line-height:1.6;
}
/* facade subtitle inherits kitchen default */
.cl-collection-hero__count{
    display:inline-block;
    font-family:var(--font-body);
    font-size:.75rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--cat-ink-3);
    padding-top:1rem;
    border-top:1px solid var(--cat-border);
}
/* facade hero count inherits kitchen default */

/* GRID — bigger cards than catalog. 2 cols mobile, 3 cols desktop. */
.cl-collection-grid-wrap{padding-block:1rem 3rem}
.cl-collection-grid{
    display:grid;
    gap:2.5rem 1.8rem;
    grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){
    .cl-collection-grid{grid-template-columns:repeat(3,1fr);gap:3rem 2rem}
}
@media (min-width:1200px){
    .cl-collection--facade .cl-collection-grid{grid-template-columns:repeat(4,1fr);gap:3rem 1.6rem}
}

/* CARD — image-forward, name underneath in editorial style */
.cl-collection-card{
    display:flex;flex-direction:column;
    text-decoration:none;
    color:inherit;
    animation:clCollectionIn .8s cubic-bezier(0.22,1,0.36,1) backwards;
    animation-delay:calc(var(--i, 0) * 60ms);
}
@keyframes clCollectionIn{
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:translateY(0)}
}
.cl-collection-card__frame{
    position:relative;
    overflow:hidden;
    background:#EEE9E0;
    aspect-ratio:4/5;  /* editorial portrait-ish — taller than catalog 5/4 */
}
.cl-collection--facade .cl-collection-card__frame{
    aspect-ratio:3/5;  /* more elongated for facade */
    background:#EEE9E0;  /* same light bg as kitchen */
}
.cl-collection-card__img{
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform 1.4s cubic-bezier(0.22,1,0.36,1),filter .5s;
    filter:saturate(1.0);
}
.cl-collection-card:hover .cl-collection-card__img{
    transform:scale(1.06);
    filter:saturate(1.05);
}
.cl-collection-card__placeholder{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:2rem;text-align:center;
    font-family:var(--font-display);
    font-size:1.3rem;
    color:var(--cat-ink-3);
}
.cl-collection-card__shade{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(10,10,12,0.55) 100%);
    opacity:0;
    transition:opacity .6s;
    pointer-events:none;
}
.cl-collection-card:hover .cl-collection-card__shade{opacity:1}

/* CAPTION — sits below the frame, no overlay (image stays clean) */
.cl-collection-card__caption{
    padding:1.1rem .2rem 0;
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    border-top:1px solid rgba(10,10,12,0.08);
    margin-top:.1rem;
    padding-top:1rem;
}
/* facade card caption inherits kitchen default */
.cl-collection-card__name{
    font-family:var(--font-display);
    font-size:clamp(1rem, 1.4vw, 1.2rem);
    font-weight:500;
    letter-spacing:.04em;
    margin:0;
    color:var(--cat-ink);
    transition:color .35s;
}
/* facade card name inherits kitchen default */
.cl-collection-card:hover .cl-collection-card__name{color:var(--cat-gold-bd)}
.cl-collection-card__cta{
    display:inline-flex;align-items:center;gap:.4rem;
    font-family:var(--font-body);
    font-size:.72rem;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--cat-ink-3);
    opacity:0;
    transform:translateX(6px);
    transition:opacity .35s,transform .45s cubic-bezier(0.22,1,0.36,1),color .35s;
    white-space:nowrap;
}
/* facade card cta inherits kitchen default */
.cl-collection-card:hover .cl-collection-card__cta{
    opacity:1;
    transform:translateX(0);
    color:var(--cat-gold-bd);
}

/* CTA BAND — minimal, push to catalog for technical details */
.cl-collection-cta{
    text-align:center;
    padding:4rem 0 2rem;
    border-top:1px solid var(--cat-border);
    margin-top:3rem;
}
/* facade CTA section inherits kitchen light-theme defaults */
.cl-collection-cta__text{
    font-family:var(--font-body);
    font-size:.95rem;
    color:var(--cat-ink-2);
    margin:0 0 1.2rem;
}
.cl-collection-cta__btn{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.85rem 1.6rem;
    background:transparent;
    border:1px solid var(--cat-ink);
    border-radius:0;
    color:var(--cat-ink);
    font-family:var(--font-body);
    font-size:.85rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-decoration:none;
    transition:all .4s cubic-bezier(0.22,1,0.36,1);
}
.cl-collection-cta__btn:hover{
    background:var(--cat-ink);color:var(--cat-bg);
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE PASS — 12.05.2026
   Comprehensive responsive refinements across the entire site.
   Standard breakpoints used:
     ≤480px = small phone (iPhone SE / Android compact)
     ≤640px = phone (most smartphones)
     ≤768px = phablet / small tablet
     ≤1024px = tablet
   ════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   1. CONTAINER + GLOBAL — tighter padding on small screens
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .cl-container{padding-inline:1rem !important}
    body{font-size:15px}  /* slightly smaller base for narrow screens */
}
@media (max-width:480px){
    .cl-container{padding-inline:.85rem !important}
}

/* iOS Safari viewport units fix — use dynamic viewport height where supported */
@supports (height: 100dvh){
    .cl-hero{min-height:100dvh}
}

/* Better touch scrolling */
@media (max-width:1024px){
    html{-webkit-text-size-adjust:100%}
    body{-webkit-overflow-scrolling:touch}
}

/* Disable hover-only effects on touch devices to avoid sticky states */
@media (hover:none){
    .cl-cat-card:hover .cl-cat-card__img,
    .cl-prod-variations__item:hover .cl-prod-variations__img,
    .cl-collection-card:hover .cl-collection-card__img{transform:none}
    .cl-cat-card:hover .cl-cat-card__frame{transform:none;box-shadow:none}
}

/* ────────────────────────────────────────────────────────────────────────
   2. CATALOG PAGE — filter bar, sub-pills, controls
   The biggest mobile pain point: pills + sub-pills + search + sort all on one row.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    /* Hero compact */
    .cl-cat-hero{padding:4.5rem 0 3rem}
    .cl-cat-hero__title{font-size:clamp(1.8rem,7vw,2.6rem) !important}
    .cl-cat-hero__subtitle{font-size:.95rem;padding:0 .5rem}

    /* Filters bar: stack pills above controls */
    .cl-cat-filters__inner{
        flex-direction:column;
        align-items:stretch;
        gap:.7rem;
        padding:.85rem 0;
    }
    /* Pills: horizontal scrollable strip with hidden scrollbar */
    .cl-cat-pills{
        width:100%;
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:none;
        -ms-overflow-style:none;
        padding-bottom:.2rem;
        scroll-snap-type:x mandatory;
    }
    .cl-cat-pills::-webkit-scrollbar{display:none}
    .cl-cat-pill{flex-shrink:0;scroll-snap-align:start;font-size:.78rem;padding:.45rem .9rem}
    /* Controls (search + sort): side-by-side, full width */
    .cl-cat-controls{
        width:100%;
        display:grid;grid-template-columns:1fr auto;gap:.5rem;
    }
    .cl-cat-search{min-width:0;width:100%}
    .cl-cat-search input{font-size:16px}  /* prevents iOS zoom on focus */
    .cl-cat-sort{gap:.35rem}
    .cl-cat-sort__label{display:none}  /* save space */
    .cl-cat-sort__select{font-size:.78rem;padding:.5rem 1.8rem .5rem .7rem}
}
@media (max-width:480px){
    .cl-cat-hero{padding:3.5rem 0 2.5rem}
    .cl-cat-pill{font-size:.72rem;padding:.4rem .75rem;gap:.35rem}
    .cl-cat-pill__count{min-width:16px;height:16px;font-size:.6rem}
}

/* Thickness sub-pills bar — also scrollable on mobile */
@media (max-width:768px){
    .cl-cat-subpills{padding:.45rem 0}
    .cl-cat-subpills__inner{
        flex-wrap:nowrap;overflow-x:auto;
        scrollbar-width:none;-ms-overflow-style:none;
        padding-bottom:.2rem;
        scroll-snap-type:x mandatory;
    }
    .cl-cat-subpills__inner::-webkit-scrollbar{display:none}
    .cl-cat-subpills__label{flex-shrink:0;font-size:.75rem}
    .cl-cat-subpill{
        flex-shrink:0;scroll-snap-align:start;
        padding:.35rem .7rem;font-size:.75rem;
    }
    .cl-cat-subpill__meta{display:none}  /* hide secondary "100×300 ס״מ" on mobile */
    .cl-cat-subpill__count{min-width:1.2rem;height:1.2rem;font-size:.65rem}
}

/* Active filter chips — wrap nicely */
@media (max-width:480px){
    .cl-cat-active__inner{gap:.5rem;padding:.6rem 0}
    .cl-cat-active__label{font-size:.65rem}
    .cl-cat-active__chip{font-size:.7rem;padding:.25rem .55rem}
}

/* Catalog grid — tighter gaps on mobile */
@media (max-width:480px){
    .cl-cat-grid{gap:1rem}
    .cl-cat-grid--portrait{gap:1rem}
    .cl-cat-grid-section{padding:2rem 0 4rem}
    .cl-cat-grid-head{margin-bottom:1.25rem}
    .cl-cat-grid-head__count{font-size:.9rem}
    .cl-cat-grid-head__count #cl-cat-visible{font-size:1.1rem}
}

/* Card body text — smaller on mobile, keep readable */
@media (max-width:480px){
    .cl-cat-card__body{padding:.7rem .6rem}
    .cl-cat-card__name{font-size:.9rem}
    .cl-cat-card__sub{font-size:.65rem}
    .cl-cat-card__cta{font-size:.7rem;padding:.4rem .8rem}
}

/* ────────────────────────────────────────────────────────────────────────
   3. SINGLE PRODUCT (kitchen) — hero / showcase / story / specs / apps / CTA
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .cl-prod-hero{padding:4rem 0 2.5rem}
    .cl-prod-hero__title{font-size:clamp(2rem,8vw,3.2rem)}
    .cl-prod-breadcrumb{font-size:.75rem;padding:.7rem 0;flex-wrap:wrap}

    .cl-prod-showcase{padding:2.5rem 0 3rem}
    .cl-prod-showcase__caption{font-size:.8rem;flex-wrap:wrap;justify-content:center;gap:.4rem}

    .cl-prod-story{padding:3rem 0}
    .cl-prod-story__grid{grid-template-columns:1fr;gap:2rem}
    .cl-prod-story__title{font-size:clamp(1.5rem,5vw,2rem)}
    .cl-prod-story__body{font-size:.95rem;line-height:1.7}

    .cl-prod-specs-v4{padding:3rem 0}
    .cl-prod-specs-v4__grid{grid-template-columns:repeat(2,1fr) !important;gap:1rem}
    .cl-prod-specs-v4__title{font-size:clamp(1.5rem,5vw,2rem)}
    .cl-prod-specs-v4__item{padding:1.2rem 1rem}
    .cl-prod-specs-v4__value{font-size:.85rem}
    .cl-prod-specs-v4__label{font-size:.65rem}

    .cl-prod-apps{padding:3rem 0}
    .cl-prod-apps__grid{grid-template-columns:repeat(3,1fr);gap:.8rem}
    .cl-prod-apps__title{font-size:clamp(1.5rem,5vw,2rem)}
    .cl-prod-apps__icon{width:36px;height:36px}
    .cl-prod-apps__label{font-size:.7rem}

    .cl-prod-cta-band{padding:3.5rem 0}
    .cl-prod-cta-band__title{font-size:clamp(1.5rem,5vw,2rem)}
    .cl-prod-cta-band__desc{font-size:.9rem}
    .cl-prod-cta-band__buttons{flex-direction:column;gap:.6rem}
    .cl-prod-cta-band__btn{width:100%;justify-content:center;padding:1rem 1.2rem;font-size:.9rem}

    .cl-prod-related{padding:3rem 0}
    .cl-prod-related__grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
    .cl-prod-related__title{font-size:clamp(1.5rem,5vw,2rem)}
}
@media (max-width:480px){
    .cl-prod-specs-v4__grid{gap:.7rem}
    .cl-prod-specs-v4__item{padding:1rem .7rem}
    .cl-prod-apps__grid{grid-template-columns:repeat(2,1fr)}
}

/* Gallery on mobile — wider buttons for touch */
@media (max-width:768px){
    .cl-prod-gallery__nav{
        width:44px;height:44px;
    }
    /* Keep counter as a small pill — explicitly reset top/left so it doesn't stretch.
       BUG: setting both top+bottom and left+right makes absolute element fill the container. */
    .cl-prod-gallery__counter{
        top:.6rem;left:.6rem;
        bottom:auto;right:auto;
        font-size:.75rem;padding:.3rem .7rem;
    }
    .cl-prod-gallery__dots{gap:.4rem;bottom:.6rem}
    .cl-prod-gallery__dot{width:7px;height:7px}
}

/* ────────────────────────────────────────────────────────────────────────
   4. SINGLE FACADE — slab variations grid + portrait gallery
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
    .cl-prod-showcase__head{padding:0 .5rem}
    .cl-prod-showcase__head-title{font-size:clamp(1.3rem,5vw,1.7rem)}
    .cl-prod-showcase__head-desc{font-size:.85rem;line-height:1.55}
}
@media (max-width:480px){
    .cl-prod-variations{gap:.55rem}
    .cl-prod-variations__caption{font-size:.6rem;padding:.2rem .45rem}
}

/* ────────────────────────────────────────────────────────────────────────
   5. CATEGORY ARCHIVE (collection pages) — hero + grid + CTA
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .cl-collection{padding-block:3.5rem 2.5rem}
    .cl-collection-hero{padding-block:1rem 2.5rem}
    .cl-collection-hero__title{font-size:clamp(2rem,8vw,3.4rem) !important}
    .cl-collection-hero__subtitle{font-size:.95rem;padding:0 .5rem}
    .cl-collection-hero__eyebrow{font-size:.7rem;letter-spacing:.25em}

    .cl-collection-grid{gap:1.6rem 1.1rem}
    .cl-collection-card__caption{padding-top:.7rem;margin-top:.1rem;gap:.5rem}
    .cl-collection-card__name{font-size:1rem}
    .cl-collection-card__cta{font-size:.62rem;letter-spacing:.12em}

    .cl-collection-cta{padding:3rem 0 1.5rem;margin-top:2rem}
    .cl-collection-cta__text{font-size:.88rem;padding:0 .5rem}
    .cl-collection-cta__btn{font-size:.75rem;padding:.75rem 1.3rem}
}
@media (max-width:480px){
    .cl-collection-grid{gap:1.2rem .8rem}
    .cl-collection-card__caption{flex-direction:column;align-items:flex-start;gap:.25rem;padding-top:.6rem}
    .cl-collection-card__cta{align-self:flex-end}
}

/* ────────────────────────────────────────────────────────────────────────
   6. COVERFLOW / OUR MODELS CAROUSEL on homepage
   Updated for 1:2 portrait cards. Arrows positioned outside card area.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .cl-coverflow{padding:4rem 0}
    .cl-coverflow__header{margin-bottom:1.5rem}
    .cl-coverflow__header h2{font-size:clamp(1.6rem,6vw,2.2rem)}
}
@media (max-width:480px){
    .cl-coverflow__arrow{width:36px;height:36px}
    .cl-coverflow__card-text{padding:.8rem .9rem}
    .cl-coverflow__card-text h3{font-size:1rem}
    .cl-coverflow__card-origin{font-size:.5rem;letter-spacing:.3em}
    .cl-coverflow__dots{margin-top:1.2rem}
    .cl-coverflow__dot{width:5px;height:5px}
}

/* ────────────────────────────────────────────────────────────────────────
   7. HOMEPAGE — hero + categories + about + vision + gallery
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .cl-hero__desc{font-size:.95rem;line-height:1.6}
    .cl-hero__content{padding-bottom:4rem}
    .cl-hero__title{font-size:clamp(2rem,9vw,3.6rem)}

    .cl-about{padding:4rem 0}
    .cl-about__grid{gap:2rem}

    .cl-categories{padding:4rem 0}
    .cl-categories__title{font-size:clamp(1.7rem,6vw,2.4rem)}

    .cl-vision{padding:4rem 0}

    .cl-gallery{padding:3rem 0}
    .cl-gallery__header{margin-bottom:1.5rem}
}

/* ────────────────────────────────────────────────────────────────────────
   8. EXPERIENCE section (contact form)
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .cl-experience{padding:3.5rem 0}
    .cl-experience__title{font-size:clamp(1.6rem,6vw,2.4rem)}
    .cl-experience__form input,
    .cl-experience__form textarea,
    .cl-experience__form select{
        font-size:16px;  /* prevent iOS zoom */
        padding:.85rem 1rem;
    }
    .cl-experience__form button[type=submit]{
        width:100%;padding:1rem;font-size:1rem;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   9. FOOTER — clean stacking on mobile
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .cl-footer{padding:3rem 0 2rem;text-align:center}
    .cl-footer__grid{gap:2rem !important}
    .cl-footer__col{align-items:center}
    .cl-footer__logo{margin:0 auto}
    .cl-footer__bottom{padding:1.5rem 0 0;font-size:.75rem;text-align:center}
}

/* ────────────────────────────────────────────────────────────────────────
   10. STICKY CTAs (Quote + Catalog Download) — already mostly mobile-sized,
        but make sure they don't overlap the bottom UI on iOS Safari
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
    .cl-quote-cta{
        padding-bottom:max(.8rem,env(safe-area-inset-bottom,.8rem));
    }
}

/* ────────────────────────────────────────────────────────────────────────
   11. TOUCH TARGETS — minimum 44×44px for all interactive elements on mobile
   ──────────────────────────────────────────────────────────────────────── */
@media (hover:none) and (max-width:768px){
    .cl-cat-pill,.cl-cat-subpill{min-height:36px}
    .cl-cat-card__cta,.cl-collection-card__cta{padding:.5rem .9rem}
    .cl-prod-cta-band__btn,.cl-cat-sort__select,.cl-cat-empty__btn{min-height:44px}
    button:not(.cl-coverflow__dot):not(.cl-prod-gallery__dot):not(.cl-cat-pill):not(.cl-cat-subpill){min-height:40px}
}

/* ────────────────────────────────────────────────────────────────────────
   12. PORTRAIT FACADE CARDS in catalog — keep 2-col grid on mobile, prevent crush
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:480px){
    .cl-cat-grid--portrait{grid-template-columns:repeat(2,1fr) !important;gap:.8rem}
    .cl-cat-card--portrait .cl-cat-card__frame--portrait{aspect-ratio:1/1.8}
}

/* ────────────────────────────────────────────────────────────────────────
   13. PRINT — disable carousel animations, simplify
   ──────────────────────────────────────────────────────────────────────── */
@media print{
    .cl-quote-cta,.cl-cat-dl-cta,.cl-coverflow,.cl-cat-filters{display:none !important}
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE FIX — disable artifacts that can show on touch devices
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Hide the custom cursor circle on touch devices entirely.
      On iOS, mouse events can fire on touch and leave the cursor stuck
      (and some browsers render it with a tap-highlight background overlay). */
@media (hover: none), (pointer: coarse), (max-width:1024px){
    .cl-cursor{display:none !important}
}

/* 2. Remove any iOS tap highlight on interactive elements (default is gray translucent box) */
a, button, .cl-prod-gallery__slide, .cl-prod-gallery__nav, .cl-prod-gallery__dot,
.cl-cat-card, .cl-collection-card, .cl-coverflow__card,
.cl-prod-variations__item, .cl-cat-pill, .cl-cat-subpill {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;  /* disable iOS long-press menu */
}

/* 3. Prevent any user-select issues on gallery */
.cl-prod-gallery, .cl-prod-gallery__slide, .cl-prod-gallery__slide img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ════════════════════════════════════════════════════════════════════════
   INSTAGRAM SECTION — homepage curated grid linking to @coverlam_israel_
   ════════════════════════════════════════════════════════════════════════ */
.cl-ig{
    padding:5rem 0 6rem;
    background:#FAF8F4;
    text-align:center;
}
.cl-ig__head{
    margin:0 auto 2.5rem;
    max-width:680px;
}
.cl-ig__eyebrow{
    display:inline-block;
    font-family:var(--font-body);
    font-size:.7rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(10,10,12,0.55);
    margin-bottom:.7rem;
}
.cl-ig__title{
    font-family:var(--font-display);
    font-size:clamp(1.8rem,4.5vw,2.6rem);
    font-weight:400;
    color:#0A0A0C;
    margin:0 0 .9rem;
    letter-spacing:-.01em;
}
.cl-ig__handle{
    display:inline-flex;align-items:center;gap:.5rem;
    color:rgba(10,10,12,0.65);
    font-family:var(--font-body);font-size:.95rem;
    text-decoration:none;
    transition:color .3s;
}
.cl-ig__handle:hover{color:#0A0A0C}

/* "Follow on Instagram" button when used as the head element (replaces the title).
   Double-class selector (.cl-ig__btn.cl-ig__btn--head) for higher specificity than
   the bare `.cl-ig__btn` (which is defined LATER and would otherwise win on cascade). */
.cl-ig__btn.cl-ig__btn--head{
    display:flex;
    width:fit-content;
    margin:.6rem auto 1.1rem;
    font-size:1.05rem;
    padding:1.05rem 2rem;
}
@media (max-width:640px){
    .cl-ig__btn.cl-ig__btn--head{font-size:.92rem;padding:.9rem 1.6rem;margin:.4rem auto .8rem}
}

/* GRID — 5 cols desktop, 5 cols tablet (smaller), 3 cols small tablet, 2 mobile */
.cl-ig__grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:.5rem;
    margin-bottom:2.5rem;
}
@media (max-width:768px){
    .cl-ig__grid{grid-template-columns:repeat(3,1fr);gap:.35rem;margin-bottom:2rem}
}
@media (max-width:480px){
    .cl-ig__grid{grid-template-columns:repeat(2,1fr);gap:.3rem}
}

/* POST — square card */
.cl-ig__post{
    position:relative;
    display:block;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#EEE9E0;
    text-decoration:none;
    animation:clIgIn .55s cubic-bezier(0.22,1,0.36,1) backwards;
    animation-delay:calc(var(--i, 0) * 40ms);
}
@keyframes clIgIn{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}
.cl-ig__post img{
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform .85s cubic-bezier(0.22,1,0.36,1),filter .35s;
}
.cl-ig__post:hover img{transform:scale(1.08)}
.cl-ig__post-overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(64,93,230,0.85),rgba(225,48,108,0.75) 50%,rgba(247,119,55,0.75));
    color:#FFFFFF;
    opacity:0;
    transition:opacity .4s cubic-bezier(0.22,1,0.36,1);
    pointer-events:none;
}
.cl-ig__post:hover .cl-ig__post-overlay{opacity:1}

/* ── REEL indicator (video posts only) ──────────────────────────────────
   Small play-arrow badge always visible in the top-inline-end corner. */
.cl-ig__badge{
    position:absolute;
    top:.55rem;inset-inline-end:.55rem;
    width:26px;height:26px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(10,10,12,0.62);
    color:#FFFFFF;
    border-radius:50%;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:0 2px 6px rgba(10,10,12,0.25);
    z-index:3;
    pointer-events:none;
    transition:transform .35s cubic-bezier(0.22,1,0.36,1),background .3s;
}
.cl-ig__badge svg{transform:translateX(1px)}  /* nudge triangle visually-centered */
.cl-ig__post--video:hover .cl-ig__badge{
    background:rgba(225,48,108,0.95);
    transform:scale(1.08);
}
/* Subtle pulse animation to draw attention to videos */
@keyframes clIgBadgePulse{
    0%,100%{box-shadow:0 2px 6px rgba(10,10,12,0.25),0 0 0 0 rgba(225,48,108,0.45)}
    50%{box-shadow:0 2px 6px rgba(10,10,12,0.25),0 0 0 8px rgba(225,48,108,0)}
}
.cl-ig__post--video .cl-ig__badge{
    animation:clIgBadgePulse 2.2s cubic-bezier(0.4,0,0.2,1) infinite;
}

/* Large center play button — appears on hover over a video card */
.cl-ig__play{
    position:absolute;
    top:50%;left:50%;
    width:56px;height:56px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.18);
    border:1.5px solid rgba(255,255,255,0.90);
    border-radius:50%;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:0 6px 20px rgba(10,10,12,0.35);
    transform:translate(-50%,-50%) scale(0.85);
    opacity:0;
    z-index:4;
    pointer-events:none;
    transition:transform .45s cubic-bezier(0.22,1,0.36,1),opacity .35s;
}
.cl-ig__play svg{transform:translateX(2px)}
.cl-ig__post--video:hover .cl-ig__play{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

/* Slight top+bottom gradient on video cards so the badge stands out cleanly */
.cl-ig__post--video::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0.20) 0%,transparent 30%,transparent 70%,rgba(0,0,0,0.18) 100%);
    z-index:2;
    pointer-events:none;
    transition:opacity .4s;
}
.cl-ig__post--video:hover::before{opacity:0}

/* Smaller on mobile */
@media (max-width:640px){
    .cl-ig__badge{width:22px;height:22px;top:.4rem;inset-inline-end:.4rem}
    .cl-ig__badge svg{width:11px;height:11px}
    .cl-ig__play{width:46px;height:46px}
    .cl-ig__play svg{width:18px;height:18px}
}

/* CTA — "Follow on Instagram" button with Instagram brand gradient */
.cl-ig__cta{display:flex;justify-content:center;margin-top:.5rem}
.cl-ig__btn{
    display:inline-flex;align-items:center;gap:.7rem;
    padding:.95rem 1.8rem;
    background:linear-gradient(135deg,#405DE6 0%,#5B51D8 15%,#833AB4 30%,#C13584 50%,#E1306C 65%,#FD1D1D 80%,#F77737 100%);
    color:#FFFFFF;
    font-family:var(--font-body);
    font-size:.9rem;font-weight:600;
    letter-spacing:.04em;
    text-decoration:none;
    border-radius:999px;
    box-shadow:0 12px 30px rgba(225,48,108,0.30);
    transition:transform .35s cubic-bezier(0.22,1,0.36,1),box-shadow .35s;
}
.cl-ig__btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(225,48,108,0.45);
}
.cl-ig__btn svg{flex-shrink:0}

/* Mobile padding */
@media (max-width:768px){
    .cl-ig{padding:3.5rem 0 4rem}
    .cl-ig__head{margin-bottom:1.8rem}
    .cl-ig__btn{padding:.85rem 1.5rem;font-size:.85rem}
}

/* Light coverflow variant reverted — using original dark theme (see line 704 area) */