/*!
 * TECH WORLD Product Hero Premium 17
 * (c) 2026 TECH WORLD SRL
 */

.cg-hero,
.cg-hero *,
.cg-hero *::before,
.cg-hero *::after {
    box-sizing: border-box;
}

.cg-hero {
    --cg-max: 1240px;
    --cg-vw: 100vw;
    --cg-ease: cubic-bezier(.22, .8, .22, 1);
    --cg-ease-out: cubic-bezier(.16, 1, .3, 1);
    --cg-nav-hover-scale: 1.35;
    position: relative;
    width: 100%;
    min-height: clamp(720px, 91vh, 920px);
    min-height: clamp(720px, 91svh, 920px);
    margin: 0;
    overflow: hidden;
    /* clip: containerul nu poate fi derulat programatic (focus pe săgeți / scrollIntoView). */
    overflow: clip;
    color: #fff;
    background: #2d2a73;
    isolation: isolate;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

/*
 * Full-bleed robust: funcționează și în containere care forțează
 * margin: auto !important / max-width (teme bloc, Elementor, WPBakery).
 */
.cg-hero:not(.cg-hero--contained) {
    width: var(--cg-vw) !important;
    max-width: var(--cg-vw) !important;
    margin-right: 0 !important;
    margin-left: calc(50% - var(--cg-vw) / 2) !important;
}

.cg-hero--contained {
    max-width: 100%;
}

/*
 * Bara contor / progres / pauză stă jos, centrată. Când există, tot conținutul
 * (produs + detalii) urcă exact cu înălțimea barei, pe orice rezoluție.
 */
.cg-hero {
    --cg-ui-h: 42px;
    --cg-ui-bottom: 14px;
    --cg-ui-space: 0px;
}

.cg-hero--has-ui {
    --cg-ui-space: calc(var(--cg-ui-h) + var(--cg-ui-bottom));
}

.cg-hero--has-ui .cg-hero__bottom,
.cg-hero--has-ui .cg-hero__product {
    margin-bottom: var(--cg-ui-space) !important;
}

@media (min-width: 768px) {
    .cg-hero {
        --cg-ui-h: 46px;
        --cg-ui-bottom: 20px;
    }
}

@media (max-width: 1023px) and (max-height: 620px) and (orientation: landscape) {
    .cg-hero {
        --cg-ui-h: 38px;
        --cg-ui-bottom: 8px;
    }
}

.cg-hero__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Resetăm stilurile agresive ale temelor (WoodMart, Flatsome etc.) pentru butoanele interne. */
.cg-hero button {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    min-height: 0 !important;
    margin: 0;
    font: inherit;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
}

/* ─── Slide-uri ─────────────────────────────────────────────── */

.cg-hero__slides {
    position: relative;
    min-height: inherit;
    height: 100%;
}

.cg-hero__slide {
    --cg-product-w: var(--cg-product-w-xl);
    --cg-product-h: var(--cg-product-h-xl);
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: inherit;
    overflow: hidden;
    overflow: clip;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .20), transparent 31%),
        radial-gradient(circle at 35% 72%, rgba(0, 0, 0, .26), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, .12), transparent 29%),
        linear-gradient(135deg, var(--cg-bg-from), var(--cg-bg-to));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .7s var(--cg-ease), visibility 0s linear .7s;
}

.cg-hero__slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .7s var(--cg-ease), visibility 0s linear 0s;
}

/* Slide-ul care iese rămâne vizibil dedesubt până când cel nou acoperă complet ecranul. */
.cg-hero__slide.is-leaving {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: none;
}

/* Textura fină de zgomot — adaugă profunzime fundalului fără imagine externă. */
.cg-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
}

.cg-hero__visual,
.cg-hero__bottom {
    position: absolute;
    z-index: 2;
    left: 50%;
    width: min(calc(100% - 48px), var(--cg-max));
    transform: translateX(-50%);
}

.cg-hero__visual {
    inset-block: 0;
    overflow: visible;
}

/* ─── Brand ─────────────────────────────────────────────────── */

.cg-hero__brand {
    position: absolute;
    top: 39%;
    left: 50%;
    z-index: 1;
    max-width: min(96vw, 1380px);
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    font-family: inherit;
    --cg-brand-base: clamp(3.6rem, 8.6vw, 9.3rem);
    font-weight: 900;
    line-height: .88;
    letter-spacing: clamp(.02em, .55vw, .075em);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    transform: translate3d(-50%, -50%, 0);
}

/*
 * Mărimea textului mare: baza vine din breakpoint (--cg-brand-base),
 * multiplicatorul din setarea slide-ului (--cg-brand-scale).
 * Specificitate ridicată + !important ca tema / Elementor să nu suprascrie h1/h2.
 */
.cg-hero .cg-hero__slide .cg-hero__brand {
    width: max-content;
    max-width: none !important;
    font-size: calc(var(--cg-brand-base, 6rem) * var(--cg-brand-scale, 1)) !important;
}

.cg-hero__brand--fill {
    color: var(--cg-brand-fill) !important;
    text-shadow: 0 18px 42px rgba(0, 0, 0, .10);
}

/*
 * Dublura de deasupra produsului: doar conturul exterior al literelor.
 * Conturul se obține printr-un filtru SVG (dilatare − forma originală) aplicat
 * literelor pline, nu cu -webkit-text-stroke, care desena și îmbinările interne
 * ale glifelor (R, A, Y la fonturile variabile/bold).
 */
.cg-hero__brand--stroke {
    z-index: 3;
    color: var(--cg-brand-stroke) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    filter: url("#cgph-brand-outline");
    pointer-events: none;
}

.cg-hero__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.cg-hero__slide--no-image .cg-hero__brand--stroke {
    display: none;
}

/* ─── Produs ────────────────────────────────────────────────── */

/*
 * Produsul este ancorat de bază și primește dimensiunile finale direct din
 * variabilele calculate în PHP: la refresh apare corect din primul frame.
 */
.cg-hero__product {
    position: absolute;
    bottom: calc(var(--cg-shadow-distance) + 18px);
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: end center;
    width: var(--cg-product-w);
    height: var(--cg-product-h);
    max-width: calc(100vw - 40px);
    max-height: calc(100% - var(--cg-shadow-distance) - 18px - var(--cg-ui-space) - 6px);
    transform: translate3d(-50%, clamp(-160px, var(--cg-product-y), 180px), 0);
    transform-origin: 50% 100%;
    pointer-events: none;
}

.cg-hero__figure {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cg-hero__parallax,
.cg-hero__motion,
.cg-hero__image-shell {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
}

.cg-hero__parallax {
    translate: calc(var(--cg-px, 0) * 18px) calc(var(--cg-py, 0) * 12px);
    rotate: calc(var(--cg-px, 0) * 1.4deg);
    transition: translate .9s var(--cg-ease-out), rotate .9s var(--cg-ease-out);
}

.cg-hero__image-shell {
    transform: rotate(var(--cg-product-rotate));
}

.cg-hero__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    object-position: 50% 100%;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-user-drag: none;
}

.cg-hero__glow {
    position: absolute;
    bottom: 5%;
    left: 50%;
    z-index: 0;
    width: min(72vw, 760px);
    height: min(72vw, 760px);
    border-radius: 50%;
    background: radial-gradient(circle, var(--cg-glow-color) 0%, transparent 68%);
    opacity: var(--cg-glow-opacity);
    transform: translate3d(-50%, 0, 0);
    translate: calc(var(--cg-px, 0) * -26px) calc(var(--cg-py, 0) * -16px);
    transition: translate 1.1s var(--cg-ease-out);
    pointer-events: none;
}

.cg-hero__shadow {
    position: absolute;
    bottom: calc(var(--cg-shadow-distance) * -1);
    left: 50%;
    z-index: 1;
    width: min(78%, 330px);
    height: clamp(22px, 3vw, 44px);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--cg-shadow-color) 0%, transparent 72%);
    opacity: .34;
    filter: blur(7px);
    transform: translate3d(-50%, 0, 0) scaleX(.98);
    transform-origin: 50% 50%;
    pointer-events: none;
}

.cg-hero__slide.is-active .cg-hero__motion {
    animation: cgHeroFloat 6.4s ease-in-out infinite;
    will-change: transform;
}

.cg-hero__slide.is-active .cg-hero__shadow {
    animation: cgHeroShadow 6.4s ease-in-out infinite;
    will-change: transform, opacity;
}

/* ─── Detalii ───────────────────────────────────────────────── */

.cg-hero__bottom {
    bottom: clamp(32px, 4.5vw, 64px);
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 455px) auto;
    align-items: end;
    justify-content: space-between;
    gap: clamp(30px, 8vw, 130px);
}

.cg-hero__details {
    min-width: 0;
}

.cg-hero__stock {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--cg-description-color) !important;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cg-hero__stock span {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ee2a8;
    box-shadow: 0 0 0 3px rgba(126, 226, 168, .14);
}

.cg-hero__stock--instock span {
    animation: cgHeroPulse 2.4s ease-out infinite;
}

.cg-hero__stock--backorder span {
    background: #ffd56a;
    box-shadow: 0 0 0 3px rgba(255, 213, 106, .14);
}

.cg-hero__stock--outofstock span {
    background: #ff8b8b;
    box-shadow: 0 0 0 3px rgba(255, 139, 139, .14);
}

.cg-hero__product-title {
    display: -webkit-box;
    max-width: 36rem;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--cg-description-color) !important;
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    font-weight: 750;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cg-hero__price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 12px;
}

.cg-hero__price,
.cg-hero__price * {
    font-family: inherit !important;
}

.cg-hero__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .22em .42em;
    margin: 0 !important;
    color: var(--cg-price-current) !important;
    font-size: clamp(1.85rem, 2.35vw, 2.7rem);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
}

.cg-hero .cg-hero__price .amount,
.cg-hero .cg-hero__price .amount *,
.cg-hero .cg-hero__price bdi,
.cg-hero .cg-hero__price bdi *,
.cg-hero .cg-hero__price .woocommerce-Price-currencySymbol,
.cg-hero .cg-hero__price ins,
.cg-hero .cg-hero__price ins * {
    color: var(--cg-price-current) !important;
    background: none !important;
}

.cg-hero .cg-hero__price del,
.cg-hero .cg-hero__price del * {
    color: var(--cg-price-old) !important;
    font-size: .62em;
    font-weight: 600;
    opacity: .82 !important;
    text-decoration-color: var(--cg-price-old) !important;
}

.cg-hero .cg-hero__price del {
    order: 2;
}

.cg-hero .cg-hero__price ins {
    order: 1;
    text-decoration: none !important;
}

.cg-hero .cg-hero__price .woocommerce-price-suffix,
.cg-hero .cg-hero__price .woocommerce-price-suffix *,
.cg-hero .cg-hero__price small,
.cg-hero .cg-hero__price small * {
    order: 3;
    color: var(--cg-price-suffix) !important;
    font-size: .42em !important;
    font-weight: 550 !important;
}

.cg-hero .cg-hero__price .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.cg-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: .42em .7em .38em;
    color: var(--cg-bg-from) !important;
    font-size: .8rem;
    font-weight: 850;
    letter-spacing: .04em;
    line-height: 1;
    background: var(--cg-price-current);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

.cg-hero__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--cg-rating-color) !important;
    font-size: 1rem;
    line-height: 1;
}

.cg-hero__rating-value {
    color: var(--cg-rating-color) !important;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.cg-hero__stars {
    position: relative;
    display: inline-block;
    width: 6.05em;
    height: 1.1em;
    overflow: hidden;
    color: var(--cg-rating-color) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    white-space: nowrap;
}

.cg-hero__stars::before,
.cg-hero__stars::after {
    content: "★★★★★";
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    white-space: nowrap;
}

.cg-hero__stars::before {
    color: var(--cg-rating-color) !important;
    opacity: .38;
}

.cg-hero__stars::after {
    width: var(--cg-rating);
    overflow: hidden;
    color: var(--cg-stars-color) !important;
}

.cg-hero__text {
    display: -webkit-box;
    max-width: 36rem;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--cg-description-color) !important;
    font-size: clamp(.94rem, 1.05vw, 1.08rem);
    font-weight: 450;
    line-height: 1.58;
    opacity: .9;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ─── Buton ─────────────────────────────────────────────────── */

.cg-hero__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7em;
    min-width: 164px;
    min-height: 46px;
    padding: 0 4px 8px;
    color: var(--cg-button-text) !important;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    font-weight: 850;
    letter-spacing: .14em;
    line-height: 1.05;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cg-hero__button::before,
.cg-hero__button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--cg-button-line);
}

.cg-hero__button::after {
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .45s var(--cg-ease-out);
    filter: brightness(1.6);
}

.cg-hero__button-icon {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    transition: transform .35s var(--cg-ease-out);
}

.cg-hero__button:hover,
.cg-hero__button:focus-visible {
    color: var(--cg-button-text) !important;
}

.cg-hero__button:hover .cg-hero__button-icon,
.cg-hero__button:focus-visible .cg-hero__button-icon {
    transform: translateX(6px);
}

.cg-hero__button:hover::after,
.cg-hero__button:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.cg-hero a:focus-visible,
.cg-hero button:focus-visible {
    outline: 2px solid var(--cg-ui-color, #fff);
    outline-offset: 5px;
}

/* ─── Interfață: contor, progres, pauză ─────────────────────── */

.cg-hero__ui {
    --cg-ui-dim: rgba(var(--cg-ui-rgb, 255, 255, 255), .3);
    position: absolute;
    top: auto;
    right: 0;
    bottom: var(--cg-ui-bottom);
    left: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 24px);
    height: var(--cg-ui-h);
    margin: 0 auto;
    padding: 0 14px;
    color: var(--cg-ui-color, #fff);
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(var(--cg-ui-rgb, 255, 255, 255), .12);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    transition: color .6s ease, border-color .6s ease;
    pointer-events: none;
}

.cg-hero__ui > .cg-hero__toggle:last-child {
    margin-right: -9px;
}

.cg-hero .cg-hero__ui > .cg-hero__counter:first-child:last-child,
.cg-hero .cg-hero__ui > .cg-hero__progress:first-child:last-child {
    padding: 0 4px !important;
}

@media (min-width: 768px) {
    .cg-hero__ui {
        gap: 16px;
        padding: 0 18px;
    }

    .cg-hero__ui > .cg-hero__toggle:last-child {
        margin-right: -12px;
    }
}

.cg-hero__ui > * {
    pointer-events: auto;
}

.cg-hero__counter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .14em;
    line-height: 1;
}

.cg-hero__counter-current {
    font-size: 1.15rem;
}

.cg-hero__counter-sep {
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

.cg-hero__counter-total {
    opacity: .55;
}

.cg-hero__progress {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cg-hero .cg-hero__segment {
    position: relative;
    display: block;
    flex: 0 1 auto;
    width: clamp(20px, 7vw, 48px);
    min-width: 10px;
    height: 24px;
    padding: 0 !important;
    color: inherit !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
}

.cg-hero__segment span {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 2px;
    margin-top: -1px;
    overflow: hidden;
    background: var(--cg-ui-dim);
    border-radius: 2px;
    transition: height .25s ease, margin .25s ease;
}

.cg-hero__segment span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.cg-hero__segment:hover span {
    height: 4px;
    margin-top: -2px;
}

.cg-hero__segment.is-current span::after {
    animation: cgHeroProgress var(--cg-autoplay, 6500ms) linear forwards;
}

.cg-hero.is-paused .cg-hero__segment.is-current span::after {
    animation-play-state: paused;
}

.cg-hero--static .cg-hero__segment.is-current span::after,
.cg-hero.is-stopped .cg-hero__segment.is-current span::after {
    animation: none;
    transform: scaleX(1);
}

.cg-hero .cg-hero__toggle {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    color: inherit !important;
    background: rgba(var(--cg-ui-rgb, 255, 255, 255), .06) !important;
    border: 1px solid var(--cg-ui-dim) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.cg-hero .cg-hero__toggle:hover {
    background: rgba(var(--cg-ui-rgb, 255, 255, 255), .14) !important;
    border-color: currentColor !important;
}

.cg-hero__toggle-icon {
    position: relative;
    display: block;
    width: 10px;
    height: 12px;
}

.cg-hero__toggle-icon::before,
.cg-hero__toggle-icon::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: currentColor;
    border-radius: 1px;
}

.cg-hero__toggle-icon::before {
    left: 1px;
}

.cg-hero__toggle-icon::after {
    right: 1px;
}

.cg-hero__toggle[aria-pressed="true"] .cg-hero__toggle-icon::before {
    left: 2px;
    width: 0;
    height: 0;
    background: none;
    border-color: transparent transparent transparent currentColor;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-radius: 0;
}

.cg-hero__toggle[aria-pressed="true"] .cg-hero__toggle-icon::after {
    display: none;
}

/* ─── Săgeți magnetice ──────────────────────────────────────── */

.cg-hero .cg-hero__nav {
    --cg-nav-x: 0px;
    --cg-nav-y: 0px;
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: clamp(142px, 12vw, 218px);
    height: clamp(142px, 12vw, 218px);
    padding: 0 !important;
    color: var(--cg-ui-color, #fff) !important;
    background: rgba(var(--cg-ui-rgb, 255, 255, 255), .035) !important;
    border: 1px solid rgba(var(--cg-ui-rgb, 255, 255, 255), .22) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transform: translate3d(0, -50%, 0) scale(1);
    transform-origin: 50% 50%;
    transition: color .6s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .45s var(--cg-ease-out);
}

.cg-hero .cg-hero__nav:hover,
.cg-hero .cg-hero__nav:focus-visible {
    background: rgba(var(--cg-ui-rgb, 255, 255, 255), .085) !important;
    border-color: rgba(var(--cg-ui-rgb, 255, 255, 255), .45) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .14);
}

.cg-hero .cg-hero__nav:active {
    transform: translate3d(0, -50%, 0) scale(.96);
}

.cg-hero__nav--prev {
    left: max(-78px, -3.8vw);
}

.cg-hero__nav--next {
    right: max(-78px, -3.8vw);
}

.cg-hero__nav > span {
    display: block;
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    line-height: 0;
    transition: transform .2s ease;
    pointer-events: none;
}

.cg-hero__nav svg {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .cg-hero .cg-hero__nav:hover {
        transform: translate3d(0, -50%, 0) scale(var(--cg-nav-hover-scale));
    }

    .cg-hero__nav:hover > span {
        transform: translate3d(var(--cg-nav-x), var(--cg-nav-y), 0) scale(calc(1 / var(--cg-nav-hover-scale) * 1.15));
        will-change: transform;
    }
}

/* ─── Tranziții cinematice ──────────────────────────────────── */

.cg-hero--cinematic .cg-hero__slide.is-entering .cg-hero__brand--fill {
    animation: cgHeroBrandIn 1s var(--cg-ease-out) both;
}

.cg-hero--cinematic .cg-hero__slide.is-entering .cg-hero__brand--stroke {
    animation: cgHeroBrandIn 1s var(--cg-ease-out) .06s both;
}

.cg-hero--cinematic .cg-hero__slide.is-entering .cg-hero__figure {
    animation: cgHeroProductIn 1.1s var(--cg-ease-out) .1s both;
}

.cg-hero--cinematic .cg-hero__slide.is-entering .cg-hero__glow {
    animation: cgHeroGlowIn 1.3s ease .05s both;
}

.cg-hero--cinematic .cg-hero__slide.is-entering .cg-hero__details > *,
.cg-hero--cinematic .cg-hero__slide.is-entering .cg-hero__button {
    animation: cgHeroFadeUp .75s var(--cg-ease-out) both;
    animation-delay: calc(.3s + var(--cg-i, 0) * .07s);
}

.cg-hero__details > :nth-child(2) { --cg-i: 1; }
.cg-hero__details > :nth-child(3) { --cg-i: 2; }
.cg-hero__details > :nth-child(4) { --cg-i: 3; }
.cg-hero__details > :nth-child(5) { --cg-i: 4; }
.cg-hero__button { --cg-i: 5; }

.cg-hero--cinematic .cg-hero__slide.is-leaving .cg-hero__brand {
    animation: cgHeroBrandOut .6s var(--cg-ease) both;
}

.cg-hero--cinematic .cg-hero__slide.is-leaving .cg-hero__figure {
    animation: cgHeroProductOut .6s var(--cg-ease) both;
}

.cg-hero--cinematic .cg-hero__slide.is-leaving .cg-hero__bottom {
    animation: cgHeroFadeOut .35s ease both;
}

/* ─── Keyframes ─────────────────────────────────────────────── */

@keyframes cgHeroFloat {
    0%, 100% { transform: translate3d(0, -10px, 0) rotate(-1.15deg); }
    50% { transform: translate3d(0, 11px, 0) rotate(1.15deg); }
}

@keyframes cgHeroShadow {
    0%, 100% {
        opacity: .18;
        transform: translate3d(-50%, 5px, 0) scaleX(1.18) scaleY(.86);
    }

    50% {
        opacity: .56;
        transform: translate3d(-50%, -1px, 0) scaleX(.84) scaleY(1.08);
    }
}

@keyframes cgHeroProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes cgHeroPulse {
    0% { box-shadow: 0 0 0 0 rgba(126, 226, 168, .55); }
    70%, 100% { box-shadow: 0 0 0 8px rgba(126, 226, 168, 0); }
}

@keyframes cgHeroBrandIn {
    from {
        opacity: 0;
        translate: calc(var(--cg-dir, 1) * 7vw) 0;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes cgHeroBrandOut {
    to {
        opacity: 0;
        translate: calc(var(--cg-dir, 1) * -5vw) 0;
    }
}

@keyframes cgHeroProductIn {
    from {
        opacity: 0;
        translate: calc(var(--cg-dir, 1) * 9vw) 34px;
        scale: .9;
        rotate: calc(var(--cg-dir, 1) * 7deg);
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        rotate: 0deg;
    }
}

@keyframes cgHeroProductOut {
    to {
        opacity: 0;
        translate: calc(var(--cg-dir, 1) * -8vw) -14px;
        scale: .94;
        rotate: calc(var(--cg-dir, 1) * -5deg);
    }
}

@keyframes cgHeroGlowIn {
    from {
        opacity: 0;
        scale: .6;
    }

    to {
        opacity: var(--cg-glow-opacity);
        scale: 1;
    }
}

@keyframes cgHeroFadeUp {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes cgHeroFadeOut {
    to { opacity: 0; }
}

/* ─── Breakpoint-uri ────────────────────────────────────────── */

@media (min-width: 1800px) {
    .cg-hero {
        --cg-max: 1420px;
        min-height: clamp(820px, 89vh, 980px);
        min-height: clamp(820px, 89svh, 980px);
    }

    .cg-hero__slide {
        --cg-product-w: var(--cg-product-w-xxl);
        --cg-product-h: var(--cg-product-h-xxl);
    }
}

@media (max-width: 1439px) {
    .cg-hero {
        --cg-max: 1120px;
        min-height: clamp(680px, 91vh, 840px);
        min-height: clamp(680px, 91svh, 840px);
    }

    .cg-hero__slide {
        --cg-product-w: var(--cg-product-w-lg);
        --cg-product-h: var(--cg-product-h-lg);
    }

    .cg-hero__brand {
        --cg-brand-base: clamp(3.5rem, 8.5vw, 7.8rem);
    }
}

@media (max-width: 1023px) {
    .cg-hero {
        --cg-max: 900px;
        min-height: clamp(720px, 92vh, 840px);
        min-height: clamp(720px, 92svh, 840px);
    }

    .cg-hero__slide {
        --cg-product-w: var(--cg-product-w-md);
        --cg-product-h: var(--cg-product-h-md);
    }

    .cg-hero__product {
        bottom: calc(var(--cg-shadow-distance) + 150px);
        max-width: calc(100vw - 32px);
        max-height: calc(100% - var(--cg-shadow-distance) - 150px - var(--cg-ui-space) - 6px);
        transform: translate3d(-50%, clamp(-115px, var(--cg-product-y), 130px), 0);
    }

    .cg-hero__brand {
        top: 34%;
        --cg-brand-base: clamp(3.15rem, 10vw, 6.5rem);
    }

    .cg-hero__bottom {
        bottom: clamp(28px, 4vw, 44px);
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 38px;
    }

    .cg-hero .cg-hero__nav {
        width: 92px;
        height: 92px;
    }

    .cg-hero__nav--prev {
        left: -42px;
    }

    .cg-hero__nav--next {
        right: -42px;
    }
}

@media (max-width: 767px) {
    .cg-hero {
        min-height: clamp(720px, 100vh, 860px);
        min-height: clamp(720px, 100svh, 860px);
    }

    .cg-hero__slide {
        --cg-product-w: var(--cg-product-w-sm);
        --cg-product-h: var(--cg-product-h-sm);
    }

    .cg-hero__visual,
    .cg-hero__bottom {
        width: calc(100% - 36px);
    }

    .cg-hero__product {
        bottom: calc(var(--cg-shadow-distance) + 238px);
        max-width: calc(100vw - 24px);
        max-height: calc(100% - var(--cg-shadow-distance) - 238px - var(--cg-ui-space) - 6px);
        transform: translate3d(-50%, clamp(-85px, var(--cg-product-y), 100px), 0);
    }

    .cg-hero__brand {
        top: 31%;
        max-width: 98vw;
        --cg-brand-base: clamp(2.6rem, 13.3vw, 5.3rem);
        letter-spacing: .03em;
    }

    .cg-hero__bottom {
        bottom: 26px;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 18px;
    }

    .cg-hero__details {
        max-width: 100%;
    }

    .cg-hero__price-row {
        margin-bottom: 10px;
    }

    .cg-hero__price {
        font-size: clamp(1.55rem, 7vw, 2.05rem);
    }

    .cg-hero__rating {
        margin-bottom: 11px;
    }

    .cg-hero__text {
        max-width: 100%;
        font-size: .94rem;
        line-height: 1.5;
    }

    .cg-hero__button {
        justify-self: start;
        min-width: 148px;
        min-height: 42px;
        font-size: .96rem;
    }

    .cg-hero .cg-hero__nav {
        top: 35%;
        width: 58px;
        height: 58px;
        background: rgba(var(--cg-ui-rgb, 255, 255, 255), .07) !important;
    }

    .cg-hero__nav--prev {
        left: 8px;
    }

    .cg-hero__nav--next {
        right: 8px;
    }

    .cg-hero__nav > span {
        font-size: 1.5rem;
    }

}

@media (max-width: 479px) {
    .cg-hero {
        min-height: clamp(690px, 100vh, 820px);
        min-height: clamp(690px, 100svh, 820px);
    }

    .cg-hero__slide {
        --cg-product-w: var(--cg-product-w-xs);
        --cg-product-h: var(--cg-product-h-xs);
    }

    .cg-hero__visual,
    .cg-hero__bottom {
        width: calc(100% - 30px);
    }

    .cg-hero__product {
        bottom: calc(var(--cg-shadow-distance) + 226px);
        max-width: calc(100vw - 20px);
        max-height: calc(100% - var(--cg-shadow-distance) - 226px - var(--cg-ui-space) - 6px);
        transform: translate3d(-50%, clamp(-72px, var(--cg-product-y), 86px), 0);
    }

    .cg-hero__brand {
        top: 30%;
        --cg-brand-base: clamp(2.25rem, 12.8vw, 4.15rem);
    }

    .cg-hero__text {
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 1023px) and (max-height: 620px) and (orientation: landscape) {
    .cg-hero {
        min-height: 520px;
    }

    .cg-hero__slide {
        --cg-product-w: var(--cg-product-w-landscape);
        --cg-product-h: var(--cg-product-h-landscape);
    }

    .cg-hero__visual,
    .cg-hero__bottom {
        width: calc(100% - 140px);
    }

    .cg-hero__product {
        bottom: calc(var(--cg-shadow-distance) + 108px);
        max-height: calc(100% - var(--cg-shadow-distance) - 108px - var(--cg-ui-space) - 6px);
        transform: translate3d(-50%, clamp(-58px, var(--cg-product-y), 60px), 0);
    }

    .cg-hero__brand {
        top: 31%;
        --cg-brand-base: clamp(2.4rem, 8.5vw, 4.8rem);
    }

    .cg-hero__bottom {
        bottom: 18px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 32px;
    }

    .cg-hero__price-row {
        margin-bottom: 6px;
    }

    .cg-hero__price {
        font-size: 1.45rem;
    }

    .cg-hero__rating {
        margin-bottom: 7px;
    }

    .cg-hero__text {
        max-width: 31rem;
        font-size: .82rem;
        line-height: 1.35;
        -webkit-line-clamp: 1;
    }

    .cg-hero__button {
        min-height: 38px;
        font-size: .86rem;
    }

    .cg-hero .cg-hero__nav {
        top: 42%;
        width: 54px;
        height: 54px;
    }
}

/* ─── Accesibilitate: mișcare redusă ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cg-hero__slide,
    .cg-hero__slide.is-active,
    .cg-hero__button::after,
    .cg-hero__button-icon,
    .cg-hero .cg-hero__nav,
    .cg-hero__nav > span,
    .cg-hero__parallax,
    .cg-hero__glow {
        transition: none;
    }

    .cg-hero__slide.is-active .cg-hero__motion,
    .cg-hero__slide.is-active .cg-hero__shadow,
    .cg-hero__stock--instock span,
    .cg-hero .cg-hero__slide.is-entering *,
    .cg-hero .cg-hero__slide.is-leaving * {
        animation: none !important;
        will-change: auto;
    }

    .cg-hero__parallax,
    .cg-hero__glow {
        translate: none;
        rotate: none;
    }
}

.cg-hero-empty {
    padding: 14px 18px;
    border: 1px dashed #c3c4c7;
    border-radius: 6px;
    font-size: 14px;
}

/* ─── Descriere: completă pe tabletă / desktop, câteva cuvinte pe telefon ─── */

.cg-hero .cg-hero__text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.cg-hero__text-full {
    display: none;
}

.cg-hero__text-short {
    display: inline;
}

@media (min-width: 768px) {
    .cg-hero__text-full {
        display: inline;
    }

    .cg-hero__text-short {
        display: none;
    }
}

@media (max-width: 1023px) and (max-height: 620px) and (orientation: landscape) {
    .cg-hero__text-full {
        display: none;
    }

    .cg-hero__text-short {
        display: inline;
    }
}