:root {
    --do-dark: #171717;
    --do-dark-2: #242424;
    --do-text: #222222;
    --do-muted: #6f6f6f;
    --do-soft: #f7f6f3;
    --do-soft-2: #f0eee9;
    --do-border: #e8e5df;
    --do-white: #ffffff;
    --do-gold: #b58a52;
    --do-gold-dark: #8d6739;
    --do-shadow:
        0 18px 55px rgba(23, 23, 23, .08);
    --do-shadow-hover:
        0 24px 70px rgba(23, 23, 23, .13);
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: #ffffff;
    color: var(--do-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
}

a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        opacity .2s ease,
        transform .2s ease;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn {
    border-radius: 13px;
    font-weight: 700;
    padding-left: 18px;
    padding-right: 18px;
}

.btn-dark {
    background: var(--do-dark);
    border-color: var(--do-dark);
}

.btn-dark:hover,
.btn-dark:focus {
    background: #000;
    border-color: #000;
    transform: translateY(-1px);
}

.btn-outline-dark {
    border-color: #d7d4ce;
}

.btn-outline-dark:hover {
    background: var(--do-dark);
    border-color: var(--do-dark);
}


/* =========================================================
   HEADER
   ========================================================= */

.public-header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    border-bottom:
        1px solid rgba(228, 225, 219, .9);

    backdrop-filter:
        saturate(160%) blur(14px);

    -webkit-backdrop-filter:
        saturate(160%) blur(14px);

    box-shadow:
        0 5px 25px rgba(0, 0, 0, .025);
}

.public-topbar {
    min-height: 86px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.public-brand {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;

    color: var(--do-dark);
}

.public-brand:hover {
    color: var(--do-dark);
}

.public-brand-icon {
    position: relative;

    width: 50px;
    height: 50px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #292929,
            #111111
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    letter-spacing: .04em;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .15);
}

.public-brand-icon::after {
    content: "";

    position: absolute;

    inset: 4px;

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

    border-radius: 12px;
}

.public-brand strong,
.public-brand small {
    display: block;
}

.public-brand strong {
    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.015em;
}

.public-brand small {
    margin-top: 3px;

    color: var(--do-muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.public-header-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* =========================================================
   HERO
   ========================================================= */

.public-hero {
    position: relative;

    overflow: hidden;

    padding:
        110px 0 100px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(181, 138, 82, .14),
            transparent 29%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(181, 138, 82, .08),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fff,
            #fbfaf7
        );
}

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

    position: absolute;

    width: 340px;
    height: 340px;

    right: -110px;
    top: 70px;

    border-radius: 50%;

    border:
        1px solid rgba(181, 138, 82, .16);
}

.public-hero::after {
    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    right: -180px;
    top: 5px;

    border-radius: 50%;

    border:
        1px solid rgba(181, 138, 82, .08);
}

.public-hero .container {
    position: relative;

    z-index: 2;
}

.public-kicker {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    padding:
        8px 13px;

    border:
        1px solid #e3ded5;

    border-radius: 999px;

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

    color: var(--do-gold-dark);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .11em;

    text-transform: uppercase;
}

.public-kicker::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--do-gold);

    box-shadow:
        0 0 0 4px rgba(181, 138, 82, .12);
}

.public-hero h1 {
    max-width: 790px;

    margin:
        0 0 25px;

    font-size:
        clamp(44px, 5.8vw, 76px);

    line-height: .99;

    font-weight: 850;

    letter-spacing: -.052em;

    color: var(--do-dark);
}

.public-hero p {
    max-width: 670px;

    margin: 0;

    color: var(--do-muted);

    font-size: 18px;

    line-height: 1.75;
}

.public-hero-actions {
    margin-top: 33px;
}

.public-hero-actions .btn {
    min-height: 53px;

    display: inline-flex;
    align-items: center;

    padding:
        0 24px;

    border-radius: 15px;

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


/* =========================================================
   TARJETA BENEFICIOS
   ========================================================= */

.public-benefits-card {
    position: relative;

    overflow: hidden;

    padding:
        18px 28px;

    border:
        1px solid rgba(225, 222, 215, .95);

    border-radius: 28px;

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

    box-shadow:
        0 30px 80px rgba(38, 32, 24, .11);

    backdrop-filter:
        blur(10px);
}

.public-benefits-card::before {
    content: "";

    position: absolute;

    top: -60px;
    right: -60px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        rgba(181, 138, 82, .10);
}

.public-benefit {
    position: relative;

    display: flex;
    align-items: center;

    gap: 17px;

    padding:
        22px 0;
}

.public-benefit + .public-benefit {
    border-top:
        1px solid var(--do-border);
}

.public-benefit > i {
    flex:
        0 0 52px;

    width: 52px;
    height: 52px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #f8f4ed,
            #eee8dd
        );

    color:
        var(--do-gold-dark);

    font-size: 23px;

    border:
        1px solid #e9e1d4;
}

.public-benefit strong,
.public-benefit small {
    display: block;
}

.public-benefit strong {
    font-size: 15px;

    font-weight: 800;
}

.public-benefit small {
    margin-top: 4px;

    color: var(--do-muted);

    font-size: 13px;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.public-categories,
.public-products {
    position: relative;

    padding:
        82px 0;
}

.public-categories {
    background:
        linear-gradient(
            180deg,
            #f8f7f4 0%,
            #f3f1ec 100%
        );

    border-top:
        1px solid #eeebe5;

    border-bottom:
        1px solid #eae6df;
}

.public-products {
    background:
        #ffffff;
}

.public-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 38px;
}

.public-section-heading span {
    display: inline-block;

    margin-bottom: 5px;

    color: var(--do-gold-dark);

    font-size: 11px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .11em;
}

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

    color: var(--do-dark);

    font-size:
        clamp(29px, 3vw, 40px);

    line-height: 1.1;

    font-weight: 850;

    letter-spacing: -.035em;
}

.public-products-count {
    padding:
        8px 13px;

    border:
        1px solid var(--do-border);

    border-radius: 999px;

    background:
        var(--do-soft);

    color:
        var(--do-muted);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   CATEGORÍAS
   ========================================================= */

.public-category-list {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.public-category-chip {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding:
        12px 20px;

    border:
        1px solid #ded9d0;

    border-radius: 999px;

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

    color:
        var(--do-text);

    text-decoration: none;

    font-size: 13px;

    font-weight: 750;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .025);
}

.public-category-chip:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--do-dark);

    background:
        var(--do-dark);

    color:
        #ffffff;

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


/* =========================================================
   TARJETAS PRODUCTO
   ========================================================= */

.public-product-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    border:
        1px solid var(--do-border);

    border-radius: 22px;

    background:
        #ffffff;

    box-shadow:
        0 7px 28px rgba(0, 0, 0, .035);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.public-product-card:hover {
    transform:
        translateY(-7px);

    border-color:
        #dcd7ce;

    box-shadow:
        var(--do-shadow-hover);
}


/* IMAGEN */

.public-product-image {
    position: relative;

    overflow: hidden;

    aspect-ratio:
        1 / 1;

    background:
        linear-gradient(
            145deg,
            #f8f8f7,
            #f0efed
        );
}

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

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 68%,
            rgba(0, 0, 0, .025)
        );
}

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

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.public-product-card:hover
.public-product-image img {
    transform:
        scale(1.055);
}

.public-product-no-image {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color:
        #a5a5a5;
}

.public-product-no-image i {
    font-size: 43px;
}

.public-product-no-image span {
    font-size: 12px;

    font-weight: 700;
}


/* BADGE DESTACADO */

.public-featured-badge {
    position: absolute;

    z-index: 5;

    top: 13px;
    left: 13px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding:
        7px 11px;

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

    border-radius: 999px;

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

    color:
        var(--do-gold-dark);

    font-size: 10px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .05em;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .11);

    backdrop-filter:
        blur(8px);
}


/* CUERPO */

.public-product-body {
    display: flex;
    flex-direction: column;

    min-height: 188px;

    padding:
        19px 18px 18px;
}

.public-product-brand {
    margin-bottom: 7px;

    color:
        var(--do-gold-dark);

    font-size: 10px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.public-product-body h3 {
    display:
        -webkit-box;

    overflow:
        hidden;

    min-height:
        45px;

    margin: 0;

    color:
        var(--do-dark);

    font-size:
        17px;

    line-height:
        1.35;

    font-weight:
        800;

    letter-spacing:
        -.015em;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}

.public-product-body p {
    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        9px 0 0;

    color:
        var(--do-muted);

    font-size:
        12px;

    line-height:
        1.55;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}

.public-product-bottom {
    margin-top:
        auto;

    padding-top:
        19px;

    display:
        flex;
    align-items:
        flex-end;
    justify-content:
        space-between;

    gap:
        12px;
}

.public-product-price small,
.public-product-price strong {
    display:
        block;
}

.public-product-price small {
    margin-bottom:
        2px;

    color:
        #949494;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}

.public-product-price strong {
    color:
        var(--do-dark);

    font-size:
        22px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -.03em;
}

.public-product-button {
    flex:
        0 0 45px;

    width:
        45px;
    height:
        45px;

    padding:
        0;

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

    border-radius:
        14px;

    font-size:
        18px;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, .10);
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.public-empty {
    padding:
        85px 20px;

    border:
        1px dashed #d7d2c8;

    border-radius:
        24px;

    background:
        var(--do-soft);

    text-align:
        center;
}

.public-empty i {
    display:
        block;

    margin-bottom:
        18px;

    color:
        #aaa49b;

    font-size:
        52px;
}

.public-empty h3 {
    font-weight:
        800;
}

.public-empty p {
    color:
        var(--do-muted);
}


/* =========================================================
   FOOTER
   ========================================================= */

.public-footer {
    position:
        relative;

    overflow:
        hidden;

    padding:
        58px 0;

    background:
        linear-gradient(
            145deg,
            #191919,
            #101010
        );

    color:
        #ffffff;
}

.public-footer::after {
    content: "";

    position:
        absolute;

    width:
        250px;
    height:
        250px;

    right:
        -100px;
    bottom:
        -140px;

    border-radius:
        50%;

    background:
        rgba(181, 138, 82, .11);
}

.public-footer-content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;
    justify-content:
        space-between;
    align-items:
        flex-end;

    gap:
        35px;
}

.public-footer strong {
    font-size:
        19px;

    font-weight:
        850;

    letter-spacing:
        -.02em;
}

.public-footer p {
    max-width:
        430px;

    margin:
        9px 0 0;

    color:
        #aaa;

    font-size:
        13px;

    line-height:
        1.65;
}

.public-footer-copy {
    color:
        #929292;

    font-size:
        12px;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .public-hero {
        padding:
            80px 0;
    }

    .public-hero h1 {
        font-size:
            52px;
    }

    .public-benefits-card {
        margin-top:
            10px;
    }

}


/* =========================================================
   RESPONSIVE MÓVIL
   ========================================================= */

@media (max-width: 767.98px) {

    .container {
        padding-left:
            16px;
        padding-right:
            16px;
    }

    .public-topbar {
        min-height:
            72px;

        gap:
            10px;
    }

    .public-brand {
        gap:
            9px;
    }

    .public-brand-icon {
        width:
            43px;
        height:
            43px;

        border-radius:
            13px;

        font-size:
            13px;
    }

    .public-brand strong {
        max-width:
            150px;

        font-size:
            14px;

        line-height:
            1.15;
    }

    .public-brand small {
        display:
            none;
    }

    .public-header-actions {
        gap:
            6px;
    }

    .public-header-actions
    .btn-outline-dark {
        display:
            none;
    }

    .public-header-actions
    .btn-dark {
        padding:
            9px 12px;

        font-size:
            12px;
    }


    /* HERO */

    .public-hero {
        padding:
            58px 0 60px;
    }

    .public-kicker {
        margin-bottom:
            18px;

        padding:
            7px 11px;

        font-size:
            9px;
    }

    .public-hero h1 {
        margin-bottom:
            20px;

        font-size:
            42px;

        line-height:
            1.01;

        letter-spacing:
            -.045em;
    }

    .public-hero p {
        font-size:
            15px;

        line-height:
            1.7;
    }

    .public-hero-actions {
        margin-top:
            26px;
    }

    .public-hero-actions
    .btn {
        width:
            100%;

        justify-content:
            center;
    }

    .public-benefits-card {
        margin-top:
            7px;

        padding:
            10px 18px;

        border-radius:
            22px;
    }

    .public-benefit {
        padding:
            17px 0;

        gap:
            13px;
    }

    .public-benefit > i {
        flex-basis:
            44px;

        width:
            44px;
        height:
            44px;

        border-radius:
            13px;

        font-size:
            19px;
    }

    .public-benefit strong {
        font-size:
            13px;
    }

    .public-benefit small {
        font-size:
            11px;
    }


    /* SECCIONES */

    .public-categories,
    .public-products {
        padding:
            55px 0;
    }

    .public-section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

        margin-bottom:
            28px;
    }

    .public-section-heading h2 {
        font-size:
            29px;
    }

    .public-category-list {
        gap:
            8px;
    }

    .public-category-chip {
        padding:
            9px 14px;

        font-size:
            11px;
    }


    /* PRODUCTOS */

    .public-product-card {
        border-radius:
            16px;
    }

    .public-product-body {
        min-height:
            160px;

        padding:
            13px 12px 12px;
    }

    .public-product-brand {
        margin-bottom:
            5px;

        font-size:
            8px;
    }

    .public-product-body h3 {
        min-height:
            38px;

        font-size:
            14px;

        line-height:
            1.3;
    }

    .public-product-body p {
        display:
            none;
    }

    .public-product-bottom {
        padding-top:
            14px;
    }

    .public-product-price small {
        font-size:
            8px;
    }

    .public-product-price strong {
        font-size:
            17px;
    }

    .public-product-button {
        flex-basis:
            38px;

        width:
            38px;
        height:
            38px;

        border-radius:
            11px;

        font-size:
            15px;
    }

    .public-featured-badge {
        top:
            8px;
        left:
            8px;

        padding:
            5px 8px;

        font-size:
            8px;
    }


    /* FOOTER */

    .public-footer {
        padding:
            45px 0;
    }

    .public-footer-content {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 390px) {

    .public-hero h1 {
        font-size:
            37px;
    }

    .public-brand strong {
        max-width:
            125px;

        font-size:
            13px;
    }

}


/* =========================================================
   DISTRIBUIDORA ORMEÑO - HEADER COMERCIAL
   ========================================================= */

:root {
    --ormeno-blue: #2563eb;
    --ormeno-blue-dark: #1d4ed8;
    --ormeno-purple: #7c3aed;
    --ormeno-purple-dark: #6d28d9;
    --ormeno-pink: #ec4899;
    --ormeno-pink-dark: #db2777;
    --ormeno-cyan: #06b6d4;
    --ormeno-green: #22c55e;
}


/* HEADER GENERAL */

.public-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: #ffffff;

    border-bottom:
        1px solid #ececf1;

    box-shadow:
        0 7px 30px rgba(49, 46, 129, .08);

    backdrop-filter: none;
}


/* =========================================================
   BARRA SOCIAL
   ========================================================= */

.public-social-bar {
    background:
        linear-gradient(
            90deg,
            var(--ormeno-blue-dark) 0%,
            var(--ormeno-purple) 52%,
            var(--ormeno-pink) 100%
        );

    color: #ffffff;
}

.public-social-bar-inner {
    min-height: 37px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.public-social-message {
    display: flex;
    align-items: center;

    gap: 7px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .02em;
}

.public-social-message i {
    color: #fde68a;
}

.public-social-links {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 11px;
}

.public-social-links > span {
    margin-right: 2px;

    color: rgba(255,255,255,.8);
}

.public-social-links a {
    width: 27px;
    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
}

.public-social-links a:hover {
    background: #ffffff;

    color: var(--ormeno-purple);

    transform: translateY(-2px);
}


/* =========================================================
   CABECERA PRINCIPAL
   ========================================================= */

.public-main-header {
    background: #ffffff;
}

.public-main-header-inner {
    min-height: 94px;

    display: grid;

    grid-template-columns:
        auto minmax(300px, 1fr) auto;

    align-items: center;

    gap: 36px;
}


/* MARCA */

.public-brand {
    min-width: 250px;
}

.public-brand-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            var(--ormeno-blue),
            var(--ormeno-purple) 58%,
            var(--ormeno-pink)
        );

    box-shadow:
        0 10px 25px rgba(124, 58, 237, .24);
}

.public-brand-icon::after {
    border-color:
        rgba(255,255,255,.25);
}

.public-brand-text strong {
    font-size: 18px;
}

.public-brand-text small {
    color: #7c7c86;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.public-search {
    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border:
        2px solid #e9e7f2;

    border-radius: 17px;

    background: #f9f9fc;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.public-search:focus-within {
    border-color:
        var(--ormeno-purple);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(124,58,237,.10);
}

.public-search > i {
    margin-left: 18px;

    color:
        var(--ormeno-purple);

    font-size: 18px;
}

.public-search input {
    width: 100%;

    min-width: 0;

    height: 48px;

    padding:
        0 15px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #27272a;

    font-size: 14px;
}

.public-search input::placeholder {
    color: #9a9aa3;
}

.public-search button {
    align-self: stretch;

    min-width: 100px;

    padding:
        0 20px;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--ormeno-purple),
            var(--ormeno-pink)
        );

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    transition:
        opacity .2s ease;
}

.public-search button:hover {
    opacity: .91;
}


/* =========================================================
   CARRITO
   ========================================================= */

.public-cart-button {
    min-width: 130px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        9px 14px;

    border:
        1px solid #e7e5ee;

    border-radius: 15px;

    background: #ffffff;

    color: #29252f;

    text-decoration: none;

    box-shadow:
        0 5px 18px rgba(49,46,129,.05);
}

.public-cart-button:hover {
    color:
        var(--ormeno-purple);

    border-color:
        #d8cff4;

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 24px rgba(124,58,237,.11);
}

.public-cart-icon {
    position: relative;

    width: 42px;
    height: 42px;

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

    flex: 0 0 42px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #f3e8ff,
            #fce7f3
        );

    color:
        var(--ormeno-purple);

    font-size: 19px;
}

.public-cart-count {
    position: absolute;

    top: -6px;
    right: -6px;

    min-width: 20px;
    height: 20px;

    padding:
        0 5px;

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

    border:
        2px solid #ffffff;

    border-radius: 999px;

    background:
        var(--ormeno-pink);

    color: #ffffff;

    font-size: 9px;

    font-weight: 800;
}

.public-cart-text small,
.public-cart-text strong {
    display: block;
}

.public-cart-text small {
    color: #9b9ba3;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .05em;
}

.public-cart-text strong {
    margin-top: 1px;

    font-size: 13px;
}


/* =========================================================
   MENÚ PRINCIPAL
   ========================================================= */

.public-nav {
    border-top:
        1px solid #f0eff4;

    background: #ffffff;
}

.public-nav-inner {
    min-height: 49px;

    display: flex;
    align-items: center;

    gap: 4px;
}

.public-nav-inner > a {
    min-height: 49px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding:
        0 15px;

    border-bottom:
        3px solid transparent;

    color: #585561;

    text-decoration: none;

    font-size: 12px;

    font-weight: 750;
}

.public-nav-inner > a:hover,
.public-nav-inner > a.active {
    color:
        var(--ormeno-purple);

    border-bottom-color:
        var(--ormeno-purple);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(124,58,237,.04)
        );
}

.public-nav-inner
.public-nav-whatsapp {
    margin-left: auto;

    color:
        #16a34a;
}

.public-nav-inner
.public-nav-whatsapp:hover {
    color:
        #15803d;

    border-bottom-color:
        #22c55e;
}


/* =========================================================
   HERO CON MÁS COLOR
   ========================================================= */

.public-hero {
    background:
        radial-gradient(
            circle at 87% 15%,
            rgba(236,72,153,.18),
            transparent 26%
        ),
        radial-gradient(
            circle at 72% 90%,
            rgba(37,99,235,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(124,58,237,.11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf7ff 46%,
            #fff5fb 100%
        );
}

.public-kicker {
    border-color:
        #e4d9ff;

    background:
        linear-gradient(
            135deg,
            #f5f3ff,
            #fdf2f8
        );

    color:
        var(--ormeno-purple-dark);
}

.public-kicker::before {
    background:
        var(--ormeno-pink);

    box-shadow:
        0 0 0 4px rgba(236,72,153,.12);
}

.public-hero-actions .btn-dark {
    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--ormeno-blue),
            var(--ormeno-purple) 55%,
            var(--ormeno-pink)
        );

    box-shadow:
        0 12px 28px rgba(124,58,237,.24);
}

.public-benefit > i {
    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #fae8ff
        );

    color:
        var(--ormeno-purple);

    border-color:
        #e8ddff;
}


/* =========================================================
   CATEGORÍAS
   ========================================================= */

.public-categories {
    background:
        linear-gradient(
            135deg,
            #f8faff,
            #faf7ff 55%,
            #fff7fb
        );
}

.public-section-heading span,
.public-product-brand {
    color:
        var(--ormeno-purple);
}

.public-category-chip:hover {
    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--ormeno-blue),
            var(--ormeno-purple),
            var(--ormeno-pink)
        );

    color: #ffffff;
}


/* =========================================================
   PRODUCTOS
   ========================================================= */

.public-product-card:hover {
    border-color:
        #ddd4fa;

    box-shadow:
        0 24px 60px rgba(91,33,182,.13);
}

.public-featured-badge {
    color:
        var(--ormeno-purple-dark);

    border-color:
        rgba(255,255,255,.8);
}

.public-product-button {
    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--ormeno-blue),
            var(--ormeno-purple),
            var(--ormeno-pink)
        );

    color: #ffffff;
}

.public-product-button:hover {
    background:
        linear-gradient(
            135deg,
            var(--ormeno-purple),
            var(--ormeno-pink)
        );
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 991.98px) {

    .public-main-header-inner {
        grid-template-columns:
            1fr auto;

        gap: 15px;

        padding:
            13px 0;
    }

    .public-search {
        grid-column:
            1 / -1;

        grid-row:
            2;
    }

    .public-brand {
        min-width: 0;
    }

}


@media (max-width: 767.98px) {

    .public-social-message {
        display: none;
    }

    .public-social-bar-inner {
        justify-content: center;
    }

    .public-social-links {
        min-height: 34px;
    }

    .public-main-header-inner {
        min-height: auto;
    }

    .public-brand-text small {
        display: none;
    }

    .public-brand-text strong {
        font-size: 14px;
    }

    .public-brand-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .public-cart-button {
        min-width: auto;

        padding: 6px;
    }

    .public-cart-text {
        display: none;
    }

    .public-search {
        min-height: 48px;

        border-radius: 14px;
    }

    .public-search input {
        font-size: 13px;
    }

    .public-search button {
        min-width: 76px;

        padding:
            0 13px;

        font-size: 11px;
    }

    .public-nav {
        overflow-x: auto;

        scrollbar-width: none;
    }

    .public-nav::-webkit-scrollbar {
        display: none;
    }

    .public-nav-inner {
        min-width: max-content;
    }

    .public-nav-inner > a {
        padding:
            0 12px;

        font-size: 11px;
    }

    .public-nav-inner
    .public-nav-whatsapp {
        margin-left: 0;
    }

}


/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */

.whatsapp-float {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 1200;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        9px 14px 9px 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #25d366,
            #16a34a
        );

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 14px 35px rgba(22, 163, 74, .35);

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

.whatsapp-float:hover {
    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px rgba(22, 163, 74, .45);
}


.whatsapp-float-icon {
    width: 44px;
    height: 44px;

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

    flex: 0 0 44px;

    border-radius: 50%;

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

    font-size: 25px;
}


.whatsapp-float-text {
    padding-right: 3px;

    font-size: 13px;

    font-weight: 800;
}


/* Animación suave */

@keyframes whatsappPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(37,211,102,.45);
    }

    70% {
        box-shadow:
            0 0 0 13px rgba(37,211,102,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(37,211,102,0);
    }
}

.whatsapp-float-icon {
    animation:
        whatsappPulse 2.2s infinite;
}


/* Móvil */

@media (max-width: 767.98px) {

    .whatsapp-float {
        right: 16px;
        bottom: 18px;

        padding: 8px;

        border-radius: 50%;
    }

    .whatsapp-float-text {
        display: none;
    }

    .whatsapp-float-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        font-size: 28px;

        background: transparent;
    }

}


/* =========================================================
   MARCAS
   ========================================================= */

.public-brands {
    padding:
        58px 0 64px;

    background:
        #ffffff;
}


.public-brand-grid {
    display: grid;

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

    gap: 16px;
}


.public-brand-card {
    position: relative;

    min-height: 165px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        18px 14px;

    overflow: hidden;

    border:
        1px solid #eceaf2;

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fcfaff
        );

    color:
        #29252f;

    text-align: center;

    text-decoration: none;

    box-shadow:
        0 7px 24px
        rgba(61, 45, 86, .055);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.public-brand-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            var(--ormeno-blue),
            var(--ormeno-purple),
            var(--ormeno-pink)
        );

    transition:
        opacity .2s ease;
}


.public-brand-card:hover,
.public-brand-card.active {
    transform:
        translateY(-5px);

    border-color:
        #dcd2fb;

    box-shadow:
        0 18px 42px
        rgba(91, 33, 182, .13);
}


.public-brand-card:hover::before,
.public-brand-card.active::before {
    opacity: 1;
}


.public-brand-logo {
    width: 100%;
    height: 75px;

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

    margin-bottom: 10px;
}


.public-brand-logo img {
    display: block;

    max-width: 125px;
    max-height: 68px;

    width: auto;
    height: auto;

    object-fit: contain;
}


.public-brand-placeholder {
    width: 62px;
    height: 62px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #fce7f3
        );

    color:
        var(--ormeno-purple);

    font-size: 25px;
}


.public-brand-card strong {
    display: block;

    max-width: 100%;

    overflow: hidden;

    color:
        #25212b;

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.public-brand-card > span {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 6px;

    color:
        var(--ormeno-purple);

    font-size: 10px;

    font-weight: 750;

    opacity: .8;
}


.public-brand-card:hover > span {
    color:
        var(--ormeno-pink);
}


.public-brands-clear {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        8px 13px;

    border:
        1px solid #e2dcf3;

    border-radius:
        999px;

    color:
        var(--ormeno-purple);

    background:
        #ffffff;

    font-size: 11px;

    font-weight: 750;

    text-decoration: none;
}


.public-brands-clear:hover {
    background:
        var(--ormeno-purple);

    border-color:
        var(--ormeno-purple);

    color:
        #ffffff;
}


/* Categoría seleccionada */

.public-category-chip.active {
    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--ormeno-blue),
            var(--ormeno-purple),
            var(--ormeno-pink)
        );

    color:
        #ffffff;
}


/* =========================================================
   MARCAS RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .public-brand-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 767.98px) {

    .public-brands {
        padding:
            40px 0 46px;
    }

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

        gap: 11px;
    }

    .public-brand-card {
        min-height: 145px;

        padding:
            14px 9px;

        border-radius:
            18px;
    }

    .public-brand-logo {
        height: 62px;
    }

    .public-brand-logo img {
        max-width: 105px;
        max-height: 58px;
    }

}


/* =========================================================
   SLIDER PRINCIPAL - DISTRIBUIDORA ORMEÑO
   ========================================================= */

.home-slider {
    position: relative;
    overflow: hidden;
    background: #f8f7fb;
}

.home-slider .carousel-item {
    position: relative;
}

.home-slide {
    position: relative;
    overflow: hidden;

    min-height: 510px;

    display: flex;
    align-items: center;

    padding: 75px 0 85px;
}

.home-slide::before {
    content: "";

    position: absolute;
    width: 520px;
    height: 520px;

    right: -130px;
    top: -160px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .11);
}

.home-slide::after {
    content: "";

    position: absolute;
    width: 330px;
    height: 330px;

    right: 9%;
    bottom: -210px;

    border-radius: 50%;

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

.home-slide .container {
    position: relative;
    z-index: 3;
}


/* SLIDE 1 */

.home-slide-one {
    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(255, 255, 255, .16),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #172554 0%,
            #4338ca 52%,
            #7c3aed 100%
        );

    color: #ffffff;
}


/* SLIDE 2 */

.home-slide-two {
    background:
        radial-gradient(
            circle at 83% 30%,
            rgba(255, 255, 255, .17),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #6d28d9 0%,
            #a21caf 50%,
            #db2777 100%
        );

    color: #ffffff;
}


/* SLIDE 3 */

.home-slide-three {
    background:
        radial-gradient(
            circle at 84% 30%,
            rgba(255, 255, 255, .15),
            transparent 29%
        ),
        linear-gradient(
            120deg,
            #0f4c5c 0%,
            #087f8c 50%,
            #06b6d4 100%
        );

    color: #ffffff;
}


/* CONTENIDO */

.home-slide-content {
    max-width: 720px;
}

.home-slide-kicker {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 20px;

    padding: 7px 13px;

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

    border-radius: 999px;

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

    color: #ffffff;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .09em;
    text-transform: uppercase;

    backdrop-filter: blur(7px);
}

.home-slide-kicker::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .13);
}

.home-slide h1,
.home-slide h2 {
    max-width: 750px;

    margin: 0 0 22px;

    color: #ffffff;

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

    line-height: 1;

    font-weight: 850;

    letter-spacing: -.045em;
}

.home-slide h1 strong,
.home-slide h2 strong {
    display: block;

    color: #ffffff;

    font-weight: 850;
}

.home-slide p {
    max-width: 640px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.7;
}


/* BOTONES */

.home-slide-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 29px;
}

.home-slide-primary,
.home-slide-secondary {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 21px;

    border-radius: 14px;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

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

.home-slide-primary {
    background: #ffffff;
    color: #29243b;

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

.home-slide-primary:hover {
    transform: translateY(-2px);

    color: #29243b;

    box-shadow:
        0 17px 35px rgba(0, 0, 0, .2);
}

.home-slide-secondary {
    border:
        1px solid rgba(255, 255, 255, .35);

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

    color: #ffffff;
}

.home-slide-secondary:hover {
    background:
        rgba(255, 255, 255, .17);

    color: #ffffff;
}


/* VISUAL DERECHA */

.home-slide-visual {
    position: relative;

    min-height: 290px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 17px;

    margin-left: auto;

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

    border-radius: 38px;

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

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .12);

    backdrop-filter: blur(10px);

    transform: rotate(2deg);
}

.home-slide-icon {
    width: 115px;
    height: 115px;

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

    border-radius: 34px;

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

    color: #ffffff;

    font-size: 54px;
}

.home-slide-visual > span {
    color:
        rgba(255, 255, 255, .9);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .06em;
    text-transform: uppercase;
}


/* FLECHAS */

.home-slider .carousel-control-prev,
.home-slider .carousel-control-next {
    width: 6%;
    opacity: 1;
}

.home-slider-arrow {
    width: 42px;
    height: 42px;

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

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

    border-radius: 50%;

    background:
        rgba(15, 23, 42, .18);

    color: #ffffff;

    font-size: 18px;

    backdrop-filter: blur(5px);
}


/* INDICADORES */

.home-slider .carousel-indicators {
    z-index: 5;

    gap: 6px;

    margin-bottom: 23px;
}

.home-slider .carousel-indicators button {
    width: 8px;
    height: 8px;

    margin: 0;

    border: 0;

    border-radius: 50%;

    background: #ffffff;

    opacity: .45;

    transition:
        width .2s ease,
        border-radius .2s ease,
        opacity .2s ease;
}

.home-slider .carousel-indicators button.active {
    width: 28px;

    border-radius: 999px;

    opacity: 1;
}


/* =========================================================
   SLIDER RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .home-slide {
        min-height: 460px;

        padding:
            65px 0 78px;
    }

    .home-slider .carousel-control-prev,
    .home-slider .carousel-control-next {
        display: none;
    }

}


@media (max-width: 767.98px) {

    .home-slide {
        min-height: 430px;

        padding:
            50px 0 70px;
    }

    .home-slide h1,
    .home-slide h2 {
        font-size:
            clamp(34px, 10vw, 46px);

        line-height: 1.02;
    }

    .home-slide p {
        font-size: 14px;

        line-height: 1.6;
    }

    .home-slide-actions {
        margin-top: 23px;
    }

    .home-slide-primary,
    .home-slide-secondary {
        min-height: 46px;

        padding:
            0 16px;

        font-size: 12px;
    }

    .home-slide-kicker {
        font-size: 9px;
    }

}


/* =========================================================
   IMÁGENES DEL SLIDER
   ========================================================= */

.home-slide-one,
.home-slide-two,
.home-slide-three {
    background-image:
        linear-gradient(
            90deg,
            rgba(17, 24, 39, .78) 0%,
            rgba(17, 24, 39, .56) 42%,
            rgba(17, 24, 39, .12) 72%,
            rgba(17, 24, 39, .04) 100%
        ),
        var(--slide-image);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/*
 * Evitamos que los círculos decorativos
 * tapen demasiado la fotografía.
 */

.home-slide::before,
.home-slide::after {
    pointer-events: none;
}


/* =========================================================
   IMAGEN ESPECIAL PARA CELULAR
   ========================================================= */

@media (max-width: 767.98px) {

    .home-slide-one,
    .home-slide-two,
    .home-slide-three {
        min-height: 520px;

        background-image:
            linear-gradient(
                180deg,
                rgba(17, 24, 39, .34) 0%,
                rgba(17, 24, 39, .64) 50%,
                rgba(17, 24, 39, .88) 100%
            ),
            var(--slide-image-mobile);

        background-position: center;
    }

    .home-slide-content {
        margin-top: auto;
    }

}


/* =========================================================
   SLIDER DINÁMICO DESDE ADMIN
   ========================================================= */

.home-db-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f7f7f7;
}

.home-db-picture {
    display: block;
    width: 100%;
}

.home-db-picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.home-db-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    pointer-events: none;
}

.home-db-content {
    max-width: 620px;

    padding: 32px;

    border-radius: 22px;

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

    backdrop-filter: blur(5px);

    pointer-events: auto;
}

.home-db-content h2 {
    margin: 0 0 14px;

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

    line-height: 1.03;

    font-weight: 800;

    color: #14285c;
}

.home-db-content p {
    margin-bottom: 22px;

    font-size: 18px;
    line-height: 1.55;

    color: #374151;
}

.home-db-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 22px;

    border-radius: 999px;

    background: #8d197d;

    color: #fff;

    text-decoration: none;
    font-weight: 700;
}

.home-db-button:hover {
    background: #67105e;
    color: #fff;
}


/* Celular */

@media (max-width: 767.98px) {

    .home-db-picture img {
        width: 100%;
        height: auto;
    }

    .home-db-overlay {
        align-items: flex-end;
    }

    .home-db-content {
        margin: 18px;
        padding: 18px;

        max-width: none;
    }

    .home-db-content h2 {
        font-size: 27px;
    }

    .home-db-content p {
        font-size: 15px;
        margin-bottom: 15px;
    }

}
/* =========================================================
   CARRITO PÚBLICO
   ========================================================= */

.public-cart-page {
    background:
        linear-gradient(
            180deg,
            #fff 0,
            #faf7fc 100%
        );
    min-height: 70vh;
}


.public-cart-hero {
    padding: 48px 0 30px;
}


.public-cart-hero h1 {
    margin: 4px 0 8px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    color: #172554;
}


.public-cart-hero p {
    margin: 0;
    color: #6b7280;
}


.public-section-kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8d197d;
}


.public-outline-button {
    border: 1px solid #d5c7d7;
    border-radius: 999px;
    padding: 11px 20px;
    font-weight: 700;
    color: #65145d;
    background: #fff;
}


.public-outline-button:hover {
    background: #8d197d;
    border-color: #8d197d;
    color: #fff;
}


.public-cart-content {
    padding-bottom: 70px;
}


.public-cart-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 14px;
    font-weight: 600;
}


.public-cart-alert.success {
    color: #17603a;
    background: #eaf8f0;
    border: 1px solid #c7ead6;
}


.public-cart-alert.error {
    color: #a32121;
    background: #fff0f0;
    border: 1px solid #f4cccc;
}


.public-cart-card,
.public-cart-summary,
.public-cart-empty {
    background: #fff;
    border: 1px solid #eee7ef;
    border-radius: 22px;
    box-shadow: 0 14px 38px rgba(62, 30, 67, .08);
}


.public-cart-card {
    overflow: hidden;
}


.public-cart-item {
    display: grid;
    grid-template-columns:
        105px
        minmax(150px, 1fr)
        110px
        100px
        115px;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid #eee7ef;
}


.public-cart-image {
    width: 105px;
    height: 105px;
    background: #f8f6f9;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}


.public-cart-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}


.public-cart-no-image {
    color: #bbb1bd;
    font-size: 30px;
}


.public-cart-info h3 {
    margin: 3px 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #222;
}


.public-cart-code {
    font-size: 12px;
    color: #8b728e;
}


.public-cart-stock {
    font-size: 13px;
    color: #7b7280;
}


.public-cart-quantity label,
.public-cart-price small,
.public-cart-subtotal small {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #7a7180;
}


.public-cart-quantity input {
    border-radius: 12px;
    border-color: #dfd7e2;
    text-align: center;
    font-weight: 700;
}


.public-cart-price strong {
    font-size: 17px;
    color: #312536;
}


.public-cart-subtotal strong {
    font-size: 19px;
    color: #8d197d;
}


.public-cart-remove {
    grid-column: 2 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: -8px;
}


.public-cart-remove button {
    background: transparent;
    border: 0;
    color: #c5304f;
    font-size: 13px;
    font-weight: 700;
}


.public-cart-remove button:hover {
    color: #9e1733;
}


.public-cart-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
}


.public-cart-update,
.public-cart-empty-button {
    border-radius: 999px;
    padding: 11px 18px;
    font-weight: 700;
}


.public-cart-update {
    border: 1px solid #8d197d;
    background: #fff;
    color: #8d197d;
}


.public-cart-update:hover {
    background: #8d197d;
    color: #fff;
}


.public-cart-empty-button {
    border: 1px solid #dc3a58;
    background: #fff;
    color: #dc3a58;
}


.public-cart-empty-button:hover {
    background: #dc3a58;
    color: #fff;
}


.public-cart-summary {
    padding: 26px;
    position: sticky;
    top: 110px;
}


.public-cart-summary-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}


.public-cart-summary-title span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8d197d;
}


.public-cart-summary-title h2 {
    margin: 3px 0 0;
    font-size: 23px;
    font-weight: 800;
    color: #172554;
}


.public-cart-summary-title > i {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4e8f3;
    color: #8d197d;
    font-size: 21px;
}


.public-cart-summary-row,
.public-cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}


.public-cart-summary-row {
    padding: 9px 0;
    color: #5f5963;
}


.public-cart-summary-divider {
    height: 1px;
    background: #eee7ef;
    margin: 14px 0 17px;
}


.public-cart-summary-total span {
    font-weight: 800;
    color: #202020;
}


.public-cart-summary-total strong {
    color: #8d197d;
    font-size: 27px;
}


.public-cart-summary-note {
    margin: 18px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #faf7fc;
    color: #756d78;
    font-size: 12px;
}


.public-checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        #8d197d,
        #ba2c87
    );
    color: #fff;
    box-shadow: 0 10px 24px rgba(141, 25, 125, .22);
}


.public-checkout-button:hover {
    color: #fff;
    transform: translateY(-1px);
}


.public-cart-secure {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    color: #777079;
}


.public-cart-empty {
    max-width: 650px;
    margin: 20px auto;
    padding: 60px 30px;
    text-align: center;
}


.public-cart-empty-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 32px;
    background: #f4e8f3;
    color: #8d197d;
}


.public-cart-empty h2 {
    font-weight: 800;
    color: #172554;
}


.public-cart-empty p {
    color: #777079;
    margin-bottom: 25px;
}


.public-cart-empty .public-checkout-button {
    width: auto;
    display: inline-flex;
}


@media (max-width: 991.98px) {

    .public-cart-item {
        grid-template-columns:
            90px
            minmax(0, 1fr)
            110px;
    }

    .public-cart-image {
        width: 90px;
        height: 90px;
    }

    .public-cart-price,
    .public-cart-subtotal {
        grid-column: auto;
    }

    .public-cart-remove {
        grid-column: 2 / -1;
    }

    .public-cart-summary {
        position: static;
    }
}


@media (max-width: 767.98px) {

    .public-cart-hero {
        padding-top: 30px;
    }

    .public-cart-item {
        grid-template-columns:
            82px
            minmax(0, 1fr);
        gap: 14px;
        padding: 17px;
    }

    .public-cart-image {
        width: 82px;
        height: 82px;
    }

    .public-cart-quantity,
    .public-cart-price,
    .public-cart-subtotal {
        grid-column: 1 / -1;
    }

    .public-cart-remove {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .public-cart-actions {
        padding: 16px;
    }

    .public-cart-update,
    .public-cart-empty-button {
        width: 100%;
    }

    .public-cart-summary {
        padding: 20px;
    }
}
/* =========================================================
   CHECKOUT PÚBLICO
   ========================================================= */

.public-checkout-page {
    background:
        linear-gradient(
            180deg,
            #fff 0,
            #faf7fc 100%
        );
    min-height: 70vh;
}

.public-checkout-hero {
    padding: 46px 0 22px;
}

.public-checkout-hero h1 {
    margin: 4px 0 8px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    color: #172554;
}

.public-checkout-hero p {
    margin: 0;
    color: #6b7280;
}

.public-checkout-content {
    padding: 10px 0 70px;
}

.public-checkout-card {
    background: #fff;
    border: 1px solid #eee7ef;
    border-radius: 22px;
    padding: 25px;
    box-shadow:
        0 14px 38px
        rgba(62, 30, 67, .07);
}

.public-checkout-card-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.public-checkout-step {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #8d197d,
            #ba2c87
        );
    color: #fff;
    font-weight: 800;
}

.public-checkout-card-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #172554;
}

.public-checkout-card-title p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #777079;
}

.public-checkout-card .form-label {
    font-size: 13px;
    font-weight: 700;
    color: #504753;
}

.public-checkout-card .form-control,
.public-checkout-card .form-select {
    min-height: 46px;
    border-radius: 12px;
    border-color: #dfd7e2;
}

.public-checkout-card textarea.form-control {
    min-height: 110px;
}

.public-checkout-card .form-control:focus,
.public-checkout-card .form-select:focus {
    border-color: #b864ad;
    box-shadow:
        0 0 0 .2rem
        rgba(141, 25, 125, .10);
}

.public-comprobante-option {
    display: block;
    cursor: pointer;
}

.public-comprobante-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.public-comprobante-option span {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    border: 1px solid #e5dce7;
    border-radius: 15px;
    background: #fff;
    color: #625968;
    font-weight: 700;
    transition: .2s ease;
}

.public-comprobante-option span i {
    font-size: 21px;
}

.public-comprobante-option input:checked + span {
    border-color: #8d197d;
    background: #fbf1fa;
    color: #8d197d;
    box-shadow:
        0 7px 18px
        rgba(141, 25, 125, .10);
}

.public-checkout-products {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.public-checkout-product {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.public-checkout-product > div {
    min-width: 0;
}

.public-checkout-product strong {
    display: block;
    font-size: 13px;
    color: #3d3541;
}

.public-checkout-product small {
    display: block;
    margin-top: 2px;
    color: #8a818d;
}

.public-checkout-product > span {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    color: #8d197d;
}

.public-checkout-summary {
    top: 110px;
}

@media (max-width: 767.98px) {

    .public-checkout-hero {
        padding-top: 30px;
    }

    .public-checkout-card {
        padding: 18px;
    }

    .public-checkout-card-title h2 {
        font-size: 18px;
    }
}
/* =========================================================
   PEDIDO CONFIRMADO
   ========================================================= */

.public-confirm-page {
    min-height: 65vh;
    padding: 65px 0;
    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #faf7fc 100%
        );
}

.public-confirm-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 38px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee7ef;
    border-radius: 26px;
    box-shadow:
        0 18px 50px
        rgba(62, 30, 67, .10);
}

.public-confirm-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #8d197d,
            #ba2c87
        );
    color: #fff;
    font-size: 46px;
}

.public-confirm-card h1 {
    margin: 8px 0 14px;
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 800;
    color: #172554;
}

.public-confirm-text {
    max-width: 520px;
    margin: 0 auto 28px;
    color: #706a73;
    line-height: 1.7;
}

.public-confirm-number {
    max-width: 460px;
    margin: 0 auto 30px;
    padding: 20px;
    border-radius: 18px;
    background: #faf3f9;
    border: 1px dashed #c987bd;
}

.public-confirm-number small {
    display: block;
    margin-bottom: 5px;
    color: #846d80;
}

.public-confirm-number strong {
    display: block;
    color: #8d197d;
    font-size: 25px;
    letter-spacing: .04em;
}

.public-confirm-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 30px;
}

.public-confirm-info > div {
    padding: 16px 12px;
    border-radius: 15px;
    background: #fbf9fc;
    color: #625b64;
    font-size: 13px;
}

.public-confirm-info i {
    display: block;
    margin-bottom: 7px;
    color: #8d197d;
    font-size: 22px;
}

.public-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.public-confirm-actions .public-checkout-button {
    width: auto;
}

.public-confirm-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid #25d366;
    text-decoration: none;
    color: #159747;
    font-weight: 800;
    background: #fff;
}

.public-confirm-whatsapp:hover {
    background: #25d366;
    color: #fff;
}

@media (max-width: 767.98px) {

    .public-confirm-page {
        padding: 35px 0;
    }

    .public-confirm-card {
        padding: 32px 20px;
    }

    .public-confirm-info {
        grid-template-columns: 1fr;
    }

    .public-confirm-actions {
        flex-direction: column;
    }

    .public-confirm-actions a {
        width: 100%;
    }
}

/* =========================================================
   PRODUCTOS - IMAGEN COMPLETA + CARRITO RESPONSIVE
   14-09-2026
   ========================================================= */

/* Mostrar la imagen completa, sin recortarla */
.public-product-image {
    background: #ffffff;
    padding: 8px;
}

.public-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center;
    padding: 4px;
}

/* Evitar zoom excesivo que pueda volver a ocultar bordes */
.public-product-card:hover .public-product-image img {
    transform: scale(1.025);
}


/* Zona precio + carrito */
.public-product-bottom {
    width: 100%;
}

.public-product-bottom form {
    flex-shrink: 0;
    min-width: 0;
}

.public-product-bottom form input[name="cantidad"] {
    width: 70px !important;
}


/* =========================================================
   PRODUCTOS EN CELULAR
   ========================================================= */

@media (max-width: 575.98px) {

    .public-product-image {
        padding: 5px;
    }

    .public-product-image img {
        padding: 2px;
    }

    /*
     * En móvil ponemos:
     *
     * PRECIO
     * [ CANTIDAD ][ CARRITO ]
     *
     * para que nunca se salga de la tarjeta.
     */
    .public-product-bottom {
        display: block;
        padding-top: 12px;
    }

    .public-product-price {
        width: 100%;
        margin-bottom: 9px;
    }

    .public-product-bottom form {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            38px;

        width: 100%;
        gap: 6px !important;
        align-items: center;
    }

    .public-product-bottom form input[name="cantidad"] {
        width: 100% !important;
        min-width: 0;
        height: 38px;

        padding-left: 8px;
        padding-right: 5px;

        font-size: 13px;
    }

    .public-product-button {
        width: 38px !important;
        min-width: 38px;
        height: 38px !important;
        flex: 0 0 38px;

        padding: 0;
        border-radius: 10px;
    }

}


/* =========================================================
   DETALLE PÚBLICO DE PRODUCTO
   ========================================================= */

.public-product-detail-page {
    padding: 34px 0 70px;
    background:
        linear-gradient(
            180deg,
            #faf9fc,
            #ffffff 320px
        );
}

.public-product-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 24px;

    font-size: 12px;
    font-weight: 700;

    color: #8a8a8a;
}

.public-product-detail-breadcrumb a {
    color: var(--ormeno-purple, #6f42c1);
    text-decoration: none;
}

.public-product-detail-breadcrumb i {
    font-size: 9px;
    color: #bdbdbd;
}

.public-product-detail-card {
    overflow: hidden;

    border:
        1px solid #ece9f2;

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 20px 60px rgba(36, 27, 54, .07);
}

.public-product-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    min-height: 560px;
}


/* GALERÍA */

.public-product-detail-gallery {
    padding: 34px;

    background:
        linear-gradient(
            145deg,
            #fbfbfb,
            #f5f3f8
        );
}

.public-product-detail-main-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1;

    padding: 24px;

    border-radius: 24px;

    background: #ffffff;
}

.public-product-detail-main-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

.public-product-detail-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;
    height: 100%;

    color: #aaa;
}

.public-product-detail-no-image i {
    font-size: 60px;
}

.public-product-detail-thumbnails {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;
}

.public-product-detail-thumbnail {
    width: 72px;
    height: 72px;

    padding: 5px;

    overflow: hidden;

    border:
        2px solid transparent;

    border-radius: 14px;

    background: #ffffff;

    cursor: pointer;

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

.public-product-detail-thumbnail:hover {
    transform: translateY(-2px);
}

.public-product-detail-thumbnail.active {
    border-color:
        var(--ormeno-purple, #6f42c1);
}

.public-product-detail-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* INFORMACIÓN */

.public-product-detail-info {
    display: flex;
    flex-direction: column;

    padding: 46px 44px;
}

.public-product-detail-brand {
    margin-bottom: 10px;

    color:
        var(--ormeno-purple, #6f42c1);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .1em;
}

.public-product-detail-info h1 {
    margin: 0;

    color:
        var(--do-dark, #222);

    font-size:
        clamp(29px, 3vw, 43px);

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: -.035em;
}

.public-product-detail-short {
    margin:
        18px 0 0;

    color:
        var(--do-muted, #777);

    font-size: 15px;

    line-height: 1.7;
}

.public-product-detail-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 22px;
}

.public-product-detail-meta span {
    display: flex;
    flex-direction: column;

    min-width: 105px;

    padding:
        10px 13px;

    border:
        1px solid #ececec;

    border-radius: 12px;

    background: #fafafa;
}

.public-product-detail-meta small {
    color: #999;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;
}

.public-product-detail-meta strong {
    margin-top: 2px;

    color: #333;

    font-size: 12px;
}

.public-product-detail-price {
    margin-top: 28px;
}

.public-product-detail-price small,
.public-product-detail-price strong {
    display: block;
}

.public-product-detail-price small {
    margin-bottom: 4px;

    color: #929292;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .06em;
}

.public-product-detail-price strong {
    color:
        var(--do-dark, #222);

    font-size: 38px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.04em;
}

.public-product-detail-stock {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    gap: 7px;

    margin-top: 15px;

    padding:
        7px 11px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.public-product-detail-stock.available {
    background: #eaf9ef;
    color: #168443;
}

.public-product-detail-stock.unavailable {
    background: #fff0f0;
    color: #c63d3d;
}


/* CARRITO */

.public-product-detail-cart {
    display: grid;

    grid-template-columns:
        160px
        minmax(0, 1fr);

    gap: 14px;

    margin-top: 30px;
}

.public-product-detail-quantity label {
    display: block;

    margin-bottom: 7px;

    color: #555;

    font-size: 11px;

    font-weight: 800;
}

.public-product-detail-quantity > div {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        40px;

    height: 48px;

    overflow: hidden;

    border:
        1px solid #ddd8e8;

    border-radius: 14px;

    background: #ffffff;
}

.public-product-detail-quantity button {
    border: 0;

    background: #f5f3f8;

    color: #423b4b;

    font-size: 18px;
}

.public-product-detail-quantity input {
    width: 100%;

    border: 0;
    border-left:
        1px solid #ece9f1;
    border-right:
        1px solid #ece9f1;

    outline: 0;

    text-align: center;

    font-weight: 800;
}

.public-product-detail-add {
    align-self: end;

    min-height: 48px;

    padding:
        0 22px;

    border: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--ormeno-blue, #2563eb),
            var(--ormeno-purple, #7c3aed),
            var(--ormeno-pink, #ec4899)
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 12px 25px rgba(91, 33, 182, .20);
}

.public-product-detail-add i {
    margin-right: 7px;

    font-size: 18px;
}

.public-product-detail-benefits {
    display: grid;

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

    gap: 9px;

    margin-top: 28px;
}

.public-product-detail-benefits div {
    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        10px;

    border-radius: 12px;

    background: #faf9fc;

    color: #626262;

    font-size: 10px;

    font-weight: 700;
}

.public-product-detail-benefits i {
    color:
        var(--ormeno-purple, #6f42c1);

    font-size: 17px;
}


/* DESCRIPCIÓN */

.public-product-detail-description {
    margin-top: 28px;

    padding: 34px;

    border:
        1px solid #ece9f2;

    border-radius: 24px;

    background: #ffffff;
}

.public-product-detail-description > span {
    color:
        var(--ormeno-purple, #6f42c1);

    font-size: 10px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .1em;
}

.public-product-detail-description h2 {
    margin:
        5px 0 16px;

    font-size: 27px;

    font-weight: 900;
}

.public-product-detail-description div {
    color: #686868;

    line-height: 1.8;

    font-size: 14px;
}


/* RESPONSIVE */

@media (max-width: 991.98px) {

    .public-product-detail-grid {
        grid-template-columns: 1fr;
    }

    .public-product-detail-gallery {
        padding: 24px;
    }

    .public-product-detail-info {
        padding: 32px 26px;
    }

}

@media (max-width: 575.98px) {

    .public-product-detail-page {
        padding:
            20px 0 45px;
    }

    .public-product-detail-card {
        border-radius: 18px;
    }

    .public-product-detail-gallery {
        padding: 14px;
    }

    .public-product-detail-main-image {
        padding: 14px;

        border-radius: 16px;
    }

    .public-product-detail-thumbnail {
        width: 57px;
        height: 57px;

        border-radius: 10px;
    }

    .public-product-detail-info {
        padding:
            24px 17px;
    }

    .public-product-detail-info h1 {
        font-size: 27px;
    }

    .public-product-detail-price strong {
        font-size: 32px;
    }

    .public-product-detail-cart {
        grid-template-columns: 1fr;
    }

    .public-product-detail-add {
        width: 100%;
    }

    .public-product-detail-benefits {
        grid-template-columns: 1fr;
    }

    .public-product-detail-description {
        padding: 22px 18px;

        border-radius: 18px;
    }

}


/* Enlaces hacia detalle del producto */

.public-product-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.public-product-title-link {
    color: inherit;
    text-decoration: none;
}

.public-product-title-link:hover {
    color: var(--ormeno-purple, #6f42c1);
}
/* =========================================================
   TONOS / COLORES DE PRODUCTO
   ========================================================= */

.public-product-variant-color {
    display: inline-block;

    width: 34px;
    height: 34px;

    min-width: 34px;

    border-radius: 50%;

    border: 2px solid #ffffff;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .18),
        0 2px 5px rgba(0, 0, 0, .12);

    flex-shrink: 0;
}


/* Cuando el cliente selecciona el tono */

.public-product-variant
input[type="radio"]:checked
~ .public-product-variant-color {

    box-shadow:
        0 0 0 3px #111111,
        0 3px 8px rgba(0, 0, 0, .18);
}


/* Mejor distribución del tono */

.public-product-variant {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* Cursor visual */

.public-product-variant:not(.is-disabled) {
    cursor: pointer;
}


/* Tonos agotados */

.public-product-variant.is-disabled
.public-product-variant-color {
    opacity: .35;
    filter: grayscale(.4);
}


/* Móvil */

@media (max-width: 767.98px) {

    .public-product-variant-color {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

}
/* =========================================================
   LOGO EMPRESA - CABECERA PÚBLICA
   ========================================================= */

.empresa-header-logo {
    display: block;
    width: auto;
    height: 72px;
    max-width: 260px;
    object-fit: contain;
    object-position: left center;
}

.public-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* TABLET */
@media (max-width: 991.98px) {

    .empresa-header-logo {
        height: 64px;
        max-width: 230px;
    }

}


/* MÓVIL */
@media (max-width: 767.98px) {

    .empresa-header-logo {
        height: 62px;
        max-width: 220px;
    }

}


/* MÓVIL PEQUEÑO */
@media (max-width: 420px) {

    .empresa-header-logo {
        height: 58px;
        max-width: 205px;
    }

}
/* =========================================================
   CARRUSELES CATEGORIAS + MARCAS
   ========================================================= */

.public-horizontal-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}


/* =========================================================
   TRACK GENERAL
   ========================================================= */

.public-carousel-track {
    flex: 1 1 auto;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

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


/* =========================================================
   FLECHAS
   ========================================================= */

.public-carousel-arrow {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e3ddef;
    border-radius: 50%;

    background: #ffffff;
    color: var(--ormeno-purple);

    font-size: 18px;

    box-shadow:
        0 7px 22px rgba(61, 45, 86, .09);

    cursor: pointer;

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

.public-carousel-arrow:hover {
    transform: translateY(-2px);

    border-color:
        var(--ormeno-purple);

    background:
        var(--ormeno-purple);

    color: #ffffff;
}

.public-carousel-arrow:disabled {
    opacity: .3;
    cursor: default;
    transform: none;
}


/* =========================================================
   CATEGORIAS - UNA SOLA FILA
   ========================================================= */

.public-category-list {
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 12px;

    padding:
        5px 2px 10px;
}

.public-category-chip {
    flex: 0 0 auto;

    scroll-snap-align: start;

    white-space: nowrap;
}


/* =========================================================
   MARCAS - UNA SOLA FILA
   ========================================================= */

.public-brand-grid {
    display: flex !important;

    grid-template-columns: none !important;

    gap: 16px;

    padding:
        6px 3px 16px;
}

.public-brand-card {
    flex:
        0 0
        calc((100% - 80px) / 6);

    min-width: 150px;
    min-height: 155px;

    scroll-snap-align: start;
}


/* Menos espacio vertical */

.public-categories {
    padding-bottom: 34px;
}

.public-brands {
    padding:
        38px 0 50px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .public-brand-card {
        flex:
            0 0
            calc((100% - 48px) / 4);
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 767.98px) {

    .public-horizontal-carousel {
        gap: 7px;
    }

    .public-carousel-arrow {
        flex-basis: 34px;

        width: 34px;
        height: 34px;

        font-size: 14px;
    }

    .public-category-list {
        gap: 8px;
    }

    .public-category-chip {
        padding:
            10px 15px;

        font-size: 12px;
    }

    .public-brand-grid {
        gap: 11px;
    }

    .public-brand-card {
        flex: 0 0 145px;

        min-width: 145px;
        min-height: 140px;
    }

    .public-brand-logo {
        height: 58px;
    }

    .public-brand-logo img {
        max-width: 100px;
        max-height: 54px;
    }

}


/* Celulares pequeños */

@media (max-width: 420px) {

    .public-carousel-arrow {
        display: none;
    }

    .public-brand-card {
        flex: 0 0 138px;
        min-width: 138px;
    }

}