/* =========================================================
   APHAREL — HOME
   Página principal
========================================================= */


/* =========================================================
   1. HERO PRINCIPAL — DESKTOP
========================================================= */

.apharel-hero {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    min-height: 720px;

    padding: 80px 8%;

    overflow: hidden;

    background: #464547;
}


/* =========================================================
   2. IMAGEN DEL HERO — DESKTOP
========================================================= */

.apharel-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(247, 247, 245, .94) 0%,
            rgba(247, 247, 245, .72) 38%,
            rgba(247, 247, 245, .18) 100%
        ),
        url("../../images/home/hero-secondary.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1.03);

    animation:
        apharelHeroImage
        14s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


@keyframes apharelHeroImage {

    0% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1.07);
    }
}


/* =========================================================
   3. CONTENIDO DEL HERO
========================================================= */

.apharel-hero-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 620px;
}


.apharel-hero-visual {
    display: none;
}


/* =========================================================
   4. EYEBROW
========================================================= */

.apharel-hero-eyebrow {
    margin: 0 0 22px;

    font-family: var(--apharel-font-body);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .28em;

    color: #777;
}


/* =========================================================
   5. TÍTULO HERO
========================================================= */

/* 🔴 CAMBIO:
   Bebas Neue Cyrillic usa peso 700 para que el título
   tenga un grosor visual más cercano al logo APHAREL.
*/

.apharel-hero-title {
    display: block;

    width: 100%;
    max-width: 620px;

    margin: 0;

    font-family: var(--apharel-font-title);

    font-size: clamp(58px, 7vw, 105px);

    line-height: .92;

    font-weight: 700;

    letter-spacing: 3px;

    color: #111;

    white-space: normal;
}


.apharel-hero-title span {
    display: inline;

    font-family: var(--apharel-font-title);

    font-style: normal;

    font-weight: 700;

    letter-spacing: 3px;

    color: #111;

    white-space: nowrap;
}


/* =========================================================
   6. TEXTO HERO
========================================================= */

.apharel-hero-text {
    max-width: 430px;

    margin: 34px 0;

    font-family: var(--apharel-font-body);

    font-size: 16px;

    line-height: 1.7;

    color: #555;
}


/* =========================================================
   7. BOTONES HERO
========================================================= */

.apharel-hero-buttons {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


.apharel-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 28px;

    font-family: var(--apharel-font-body);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .16em;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        border-color .3s ease;
}


.apharel-btn-primary {
    background: #111;

    color: #fff;
}


.apharel-btn-primary:hover {
    background: #333;

    color: #fff;

    transform: translateY(-2px);
}


.apharel-btn-secondary {
    border: 1px solid #111;

    background: transparent;

    color: #111;
}


.apharel-btn-secondary:hover {
    background: #111;

    color: #fff;

    transform: translateY(-2px);
}


.apharel-btn-light {
    border: 1px solid rgba(255, 255, 255, .8);

    background: transparent;

    color: #fff;
}


.apharel-btn-light:hover {
    background: #fff;

    color: #111;

    transform: translateY(-2px);
}


/* =========================================================
   8. ANIMACIÓN DEL TEXTO HERO
========================================================= */

@keyframes apharelTextReveal {

    0% {
        opacity: 0;

        transform: translateY(35px);

        filter: blur(8px);
    }

    100% {
        opacity: 1;

        transform: translateY(0);

        filter: blur(0);
    }
}


.apharel-hero-eyebrow {
    animation:
        apharelTextReveal
        .8s
        cubic-bezier(.16, 1, .3, 1)
        both;

    animation-delay: .1s;
}


.apharel-hero-title {
    animation:
        apharelTextReveal
        1s
        cubic-bezier(.16, 1, .3, 1)
        both;

    animation-delay: .2s;
}


.apharel-hero-text {
    animation:
        apharelTextReveal
        .8s
        cubic-bezier(.16, 1, .3, 1)
        both;

    animation-delay: .4s;
}


.apharel-hero-buttons {
    animation:
        apharelTextReveal
        .8s
        cubic-bezier(.16, 1, .3, 1)
        both;

    animation-delay: .6s;
}


/* =========================================================
   9. TÍTULOS DE SECCIÓN
========================================================= */

.apharel-section-heading {
    width: 100%;
    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}


.apharel-section-eyebrow {
    margin: 0 0 22px;

    font-family: var(--apharel-font-body);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .28em;

    color: #777;
}


/* 🔴 CAMBIO:
   Título de sección en Bebas Neue Cyrillic con peso 700.
*/

.apharel-section-heading h2 {
    margin: 0;

    font-family: var(--apharel-font-title);

    font-size: clamp(36px, 4vw, 58px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: 2px;

    color: #111;
}


.apharel-section-heading p:last-child {
    margin: 20px 0 0;

    font-family: var(--apharel-font-body);

    font-size: 16px;

    line-height: 1.6;

    color: #666;
}


/* =========================================================
   10. PRODUCTOS DESTACADOS
========================================================= */

.apharel-products {
    width: 100%;

    padding: 85px 0 90px;

    background: #fff;

    border-top: 1px solid #111;
}


/* =========================================================
   11. ENCABEZADO PRODUCTOS
========================================================= */

.apharel-products .apharel-section-heading {
    margin-bottom: 45px;
}


/* =========================================================
   12. GRID DE PRODUCTOS
========================================================= */

.apharel-products-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    width: calc(100% - 40px);

    max-width: 1150px;

    margin: 0 auto;

    gap: 18px;
}


/* =========================================================
   13. TARJETA DE PRODUCTO
========================================================= */

.apharel-product-card {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    background: #fff;

    border: 1px solid #222;

    border-radius: 12px;

    box-sizing: border-box;

    color: #111;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.apharel-product-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .10);
}


/* =========================================================
   14. IMAGEN PRODUCTO
========================================================= */

.apharel-product-image {
    position: relative;

    width: 100%;

    aspect-ratio: .78;

    overflow: hidden;

    background: #f4f4f4;
}


.apharel-product-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;

    object-position: center center;

    border: 0 !important;

    box-sizing: border-box;

    transition:
        transform .6s ease;
}


.apharel-product-card:hover
.apharel-product-image img {
    transform: scale(1.035);
}


/* =========================================================
   15. DEGRADADO PRODUCTO
========================================================= */

.apharel-product-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, .35) 100%
        );

    pointer-events: none;
}


/* =========================================================
   16. SEGUNDA IMAGEN PRODUCTO
========================================================= */

.apharel-product-img-hover {
    position: absolute;

    inset: 0;

    z-index: 3;

    opacity: 0;

    transform: scale(1);

    transition:
        opacity .45s ease,
        transform .8s cubic-bezier(.16, 1, .3, 1);
}


.apharel-product-card:hover
.apharel-product-img-hover {
    opacity: 1;

    transform: scale(1.035);
}


/* =========================================================
   17. ETIQUETA OFERTA
========================================================= */

.apharel-product-sale {
    position: absolute;

    top: 10px;
    left: 10px;

    z-index: 5;

    padding: 5px 8px;

    background: #111;

    color: #fff;

    border-radius: 3px;

    font-family: var(--apharel-font-body);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .04em;
}


/* =========================================================
   18. INFORMACIÓN PRODUCTO
========================================================= */

.apharel-product-info {
    padding: 14px 14px 16px;

    background: #fff;

    box-sizing: border-box;

    text-align: center;
}


.apharel-product-title,
.apharel-product-info h3 {
    margin: 0;

    font-family: var(--apharel-font-body);

    color: #111;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.3;

    letter-spacing: .01em;
}


/* =========================================================
   19. PRECIO PRODUCTO
========================================================= */

.apharel-product-price {
    margin-top: 7px;

    font-family: var(--apharel-font-body);

    color: #111;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.2;

    text-align: center;
}


.apharel-product-price ins {
    color: #e53935;

    text-decoration: none;

    font-weight: 600;
}


.apharel-product-price del {
    margin-left: 5px;

    color: #888;

    font-size: 12px;
}


/* =========================================================
   20. PRODUCTOS VACÍOS
========================================================= */

.apharel-products-empty {
    width: 100%;

    padding: 70px 20px;

    font-family: var(--apharel-font-body);

    text-align: center;

    color: #777;
}


/* =========================================================
   21. CARRUSEL DE PRODUCTOS
========================================================= */

.apharel-products-carousel {
    position: relative;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 0 58px;

    box-sizing: border-box;
}


.apharel-carousel-track {
    display: flex;

    gap: 24px;

    width: 100%;

    overflow-x: auto;

    padding: 5px 0 25px;

    scrollbar-width: none;

    scroll-behavior: smooth;

    cursor: grab;

    scroll-snap-type: x proximity;
}


.apharel-carousel-track::-webkit-scrollbar {
    display: none;
}


.apharel-carousel-track.is-dragging {
    cursor: grabbing;

    scroll-behavior: auto;
}


.apharel-carousel-track
.apharel-product-card {
    flex: 0 0 calc(25% - 18px);

    min-width: 0;

    scroll-snap-align: start;
}


/* =========================================================
   22. FLECHAS CARRUSEL
========================================================= */

.apharel-products-carousel
.apharel-carousel-prev,
.apharel-products-carousel
.apharel-carousel-next {
    position: absolute;

    top: 43%;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 1px solid rgba(17, 17, 17, .16);

    border-radius: 50%;

    background: rgba(255, 255, 255, .96);

    color: #111;

    font-family: var(--apharel-font-body);

    font-size: 17px;

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.apharel-products-carousel
.apharel-carousel-prev {
    left: 0;
}


.apharel-products-carousel
.apharel-carousel-next {
    right: 0;
}


.apharel-products-carousel
.apharel-carousel-prev:hover,
.apharel-products-carousel
.apharel-carousel-next:hover {
    background: #111;

    color: #fff;

    transform:
        translateY(-50%)
        scale(1.08);
}


/* =========================================================
   23. PUNTOS CARRUSEL
========================================================= */

.apharel-carousel-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 18px;
}


.apharel-carousel-dot {
    width: 5px;
    height: 5px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #b5b5b5;

    cursor: pointer;
}


.apharel-carousel-dot.active {
    width: 8px;
    height: 8px;

    background: #111;
}


/* =========================================================
   24. BOTÓN VER TODOS
========================================================= */

.apharel-products-button {
    margin-top: 50px;

    text-align: center;
}


.apharel-products-button .apharel-btn {
    min-width: 230px;

    min-height: 52px;

    border: 1px solid #111;

    background: #fff;

    color: #111;

    font-family: var(--apharel-font-body);

    font-size: 10px;

    letter-spacing: .2em;
}


.apharel-products-button .apharel-btn:hover {
    background: #111;

    color: #fff;
}


/* =========================================================
   25. BANNER EDITORIAL
========================================================= */

.apharel-editorial {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 650px;

    padding: 100px 8%;

    overflow: hidden;

    /* 🔴 CAMBIO:
       Se restaura la estructura de DOS capas que necesita
       responsive.css para posicionar correctamente
       hero-rules.png en móviles.
    */

    background-color: #464546;

    background-image:
        linear-gradient(
            120deg,
            rgba(0, 0, 0, .35),
            rgba(0, 0, 0, .05)
        ),
        url("../../images/home/hero-rules.png");

    /* 🔴 CAMBIO:
       Primera capa = fondo completo.
       Segunda capa = imagen editorial.
       responsive.css modifica ambas capas en móvil.
    */

    background-size:
        100% 100%,
        50% auto;

    background-position:
        center center,
        right center;

    background-repeat: no-repeat;
}


.apharel-editorial::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, .04),
            transparent 35%,
            rgba(255, 255, 255, .02)
        );

    pointer-events: none;
}


.apharel-editorial-content {
    position: relative;

    z-index: 5;

    width: 50%;

    max-width: 650px;

    color: #fff;
}


.apharel-editorial .apharel-section-eyebrow {
    margin-bottom: 24px;

    font-family: var(--apharel-font-body);

    color: rgba(255, 255, 255, .65);

    font-size: 11px;

    letter-spacing: .32em;
}


/* 🔴 CAMBIO:
   Título editorial en Bebas Neue Cyrillic con peso 700.
*/

.apharel-editorial h2 {
    margin: 0;

    max-width: 620px;

    font-family: var(--apharel-font-title);

    color: #fff;

    font-size: clamp(55px, 7vw, 105px);

    line-height: .94;

    font-weight: 700;

    letter-spacing: 3px;
}


.apharel-editorial
p:not(.apharel-section-eyebrow) {
    max-width: 500px;

    margin: 32px 0;

    font-family: var(--apharel-font-body);

    color: rgba(255, 255, 255, .78);

    font-size: 16px;

    line-height: 1.7;

    letter-spacing: .02em;
}


.apharel-editorial .apharel-btn {
    position: relative;

    z-index: 10;

    min-height: 50px;

    padding: 0 28px;

    border: 1px solid rgba(255, 255, 255, .8);

    background: transparent;

    color: #fff;

    font-family: var(--apharel-font-body);

    font-size: 10px;

    letter-spacing: .2em;
}


.apharel-editorial .apharel-btn:hover {
    background: #fff;

    color: #111;
}


/* =========================================================
   26. COLECCIONES
========================================================= */

.apharel-collections {
    padding: 110px 6%;

    background: #fff;
}


.apharel-collections-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    max-width: 1400px;

    margin: 0 auto;
}


.apharel-collection-card {
    position: relative;

    display: flex;

    align-items: flex-end;

    min-height: 500px;

    padding: 45px;

    overflow: hidden;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .7),
            rgba(0, 0, 0, .05)
        ),
        #202020;

    color: #fff;

    text-decoration: none;

    transition:
        transform .45s ease;
}


.apharel-collection-card:hover {
    transform: translateY(-8px);
}


.apharel-collection-content {
    position: relative;

    z-index: 2;
}


.apharel-collection-content span {
    display: block;

    margin-bottom: 12px;

    font-family: var(--apharel-font-body);

    font-size: 11px;

    letter-spacing: .22em;
}


/* 🔴 CAMBIO:
   Títulos de colección en Bebas Neue Cyrillic con peso 700.
*/

.apharel-collection-content h3 {
    margin: 0 0 18px;

    font-family: var(--apharel-font-title);

    font-size: clamp(38px, 5vw, 70px);

    font-weight: 700;

    line-height: .95;

    letter-spacing: 2.5px;
}


.apharel-collection-content small {
    font-family: var(--apharel-font-body);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .18em;
}


/* =========================================================
   27. BANNER SUPERIOR
========================================================= */

.apharel-main-banner {
    width: 100%;

    overflow: hidden;

    background: #111;
}


.apharel-main-banner img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    object-fit: cover;
}


/* =========================================================
   28. HERO MÓVIL / TABLET
========================================================= */

@media (max-width: 768px) {

    .apharel-hero {
        display: flex;

        align-items: flex-end;

        min-height: 680px;

        padding: 90px 24px 70px;

        background: #111;
    }


    /* -----------------------------------------------------
       IMAGEN EXCLUSIVA PARA MÓVIL
    ----------------------------------------------------- */

    .apharel-hero::before {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 0;

        background-image:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, .08) 0%,
                rgba(0, 0, 0, .18) 40%,
                rgba(0, 0, 0, .72) 100%
            ),
            url("../../images/home/hero-mobile.png");

        background-size: cover;

        background-position: center center;

        background-repeat: no-repeat;

        transform: none;

        animation: none;

        pointer-events: none;
    }


    .apharel-hero-content {
        position: relative;

        z-index: 3;

        width: 100%;

        max-width: 100%;

        color: #fff;
    }


    .apharel-hero-eyebrow {
        margin-bottom: 16px;

        color: rgba(255, 255, 255, .78);

        font-family: var(--apharel-font-body);

        font-size: 10px;

        letter-spacing: .25em;
    }


    .apharel-hero-title {
        max-width: 100%;

        font-family: var(--apharel-font-title);

        font-size: clamp(48px, 13vw, 72px);

        line-height: .94;

        font-weight: 700;

        letter-spacing: 1.8px;

        color: #fff;
    }


    .apharel-hero-title span {
        font-family: var(--apharel-font-title);

        color: #fff;

        font-weight: 700;

        letter-spacing: 1.8px;

        white-space: normal;
    }


    .apharel-hero-text {
        max-width: 330px;

        margin: 24px 0 28px;

        color: rgba(255, 255, 255, .85);

        font-family: var(--apharel-font-body);

        font-size: 14px;

        line-height: 1.6;
    }


    .apharel-hero-buttons {
        gap: 10px;
    }


    .apharel-btn {
        min-height: 46px;

        padding: 0 22px;

        font-family: var(--apharel-font-body);

        font-size: 9px;

        letter-spacing: .16em;
    }


    .apharel-btn-primary {
        border-color: #fff;

        background: #fff;

        color: #111;
    }


    .apharel-btn-primary:hover {
        border-color: #111;

        background: #111;

        color: #fff;
    }


    .apharel-btn-secondary {
        border-color: rgba(255, 255, 255, .8);

        background: rgba(255, 255, 255, .04);

        color: #fff;
    }


    .apharel-btn-secondary:hover {
        background: #fff;

        color: #111;
    }


    /* -----------------------------------------------------
       PRODUCTOS — TABLET
    ----------------------------------------------------- */

    .apharel-products {
        padding: 70px 0 75px;
    }


    .apharel-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: calc(100% - 30px);

        gap: 14px;
    }


    .apharel-carousel-track
    .apharel-product-card {
        flex: 0 0 calc(50% - 12px);
    }


    /* -----------------------------------------------------
       EDITORIAL — TABLET
    ----------------------------------------------------- */

    .apharel-editorial {
        min-height: 600px;

        padding: 80px 6%;

        background-size:
            100% 100%,
            65% auto;

        background-position:
            center center,
            75% center;

        background-repeat: no-repeat;
    }


    .apharel-editorial-content {
        width: 70%;
    }


    /* -----------------------------------------------------
       COLECCIONES
    ----------------------------------------------------- */

    .apharel-collections {
        padding: 80px 5%;
    }


    .apharel-collections-grid {
        grid-template-columns: 1fr;
    }


    .apharel-editorial h2 {
        letter-spacing: 2px;
    }


    .apharel-collection-content h3 {
        letter-spacing: 1.8px;
    }


    .apharel-section-heading h2 {
        letter-spacing: 1.8px;
    }
}


/* =========================================================
   29. MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .apharel-hero {
        min-height: 650px;

        padding:
            80px
            20px
            55px;
    }


    .apharel-hero::before {
        background-position: center center;
    }


    .apharel-hero-title {
        font-size: 52px;

        letter-spacing: 1.5px;

        font-weight: 700;
    }


    .apharel-hero-title span {
        font-weight: 700;

        letter-spacing: 1.5px;
    }


    .apharel-hero-text {
        max-width: 300px;

        font-size: 13px;
    }


    .apharel-hero-buttons {
        width: 100%;
    }


    .apharel-btn {
        flex: 1;

        padding: 0 15px;
    }


    /* -----------------------------------------------------
       PRODUCTOS MÓVIL
    ----------------------------------------------------- */

    .apharel-products {
        padding: 60px 0 65px;
    }


    .apharel-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: calc(100% - 20px);

        gap: 10px;
    }


    .apharel-product-image {
        aspect-ratio: .78;
    }


    .apharel-product-info {
        padding: 10px 8px 12px;
    }


    .apharel-product-title,
    .apharel-product-info h3 {
        font-size: 12px;
    }


    .apharel-product-price {
        margin-top: 5px;

        font-size: 11px;
    }


    .apharel-carousel-track {
        gap: 10px;
    }


    .apharel-carousel-track
    .apharel-product-card {
        flex: 0 0 calc(50% - 5px);
    }


    /* -----------------------------------------------------
       EDITORIAL MÓVIL
       
       🔴 IMPORTANTE:
       Estas dos capas deben coincidir con el
       background-image de .apharel-editorial.
       
       responsive.css puede seguir controlando aquí
       la posición de APHAREL CLOTHES.
    ----------------------------------------------------- */

    .apharel-editorial {
        min-height: 560px;

        padding: 70px 24px;

        background-size:
            100% 100%,
            auto 100%;

        background-position:
            center center,
            25% center;

        background-repeat: no-repeat;
    }


    .apharel-editorial-content {
        width: 100%;
    }


    .apharel-editorial h2 {
        font-size: 52px;

        font-weight: 700;

        letter-spacing: 1.5px;
    }


    /* -----------------------------------------------------
       COLECCIONES MÓVIL
    ----------------------------------------------------- */

    .apharel-collections {
        padding: 70px 20px;
    }


    .apharel-collection-card {
        min-height: 420px;

        padding: 30px;
    }


    .apharel-collection-content h3 {
        font-size: 42px;

        font-weight: 700;

        letter-spacing: 1.5px;
    }


    .apharel-section-heading h2 {
        font-weight: 700;

        letter-spacing: 1.5px;
    }
}


/* =========================================================
   30. ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .apharel-hero::before {
        animation: none;

        transform: none;
    }


    .apharel-hero-eyebrow,
    .apharel-hero-title,
    .apharel-hero-text,
    .apharel-hero-buttons {
        animation: none;
    }


    .apharel-product-image img,
    .apharel-product-card,
    .apharel-collection-card {
        transition: none;
    }
}