/* ============================================================
   SULLI PRODUCT DESCRIPTION
   WordPress / WooCommerce / Theme Agnostic

   ESCALA GLOBAL:
   --sulli-scale: 1.00 = tamaño original
   --sulli-scale: 1.10 = +10%
   --sulli-scale: 1.20 = +20%
   --sulli-scale: 1.30 = +30%
   ============================================================ */


/* ============================================================
   ROOT
   ============================================================ */

.sulli-product-description,
.sulli-product-description * {
    box-sizing: border-box;
}

.sulli-product-description {
    /* ========================================================
       ESCALA GLOBAL
       ======================================================== */

    --sulli-scale: 1.50;


    /* ========================================================
       COLORS
       ======================================================== */

    --sulli-text: #171717;
    --sulli-muted: #555555;
    --sulli-line: #dddddd;
    --sulli-white: #ffffff;


    /* ========================================================
       WIDTH
       ======================================================== */

    --sulli-max-width: 1024px;


    /* ========================================================
       ROOT
       ======================================================== */

    width: 100vw;
    max-width: var(--sulli-max-width);

    margin: 0 auto;
    padding: 0;

    color: var(--sulli-text);

    /*font-family:
        Arial,
        Helvetica,
        sans-serif;*/

    font-size: calc(16px * var(--sulli-scale));

    font-weight: 400;

    line-height: 1.5;

    text-align: left;
}


/* ============================================================
   RESET LOCAL
   ============================================================ */

.sulli-product-description h1,
.sulli-product-description h2,
.sulli-product-description h3,
.sulli-product-description p,
.sulli-product-description ul,
.sulli-product-description li,
.sulli-product-description figure {
    margin: 0;
    padding: 0;
}


.sulli-product-description ul {
    list-style: none;
}


.sulli-product-description img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    border: 0;
}


/* ============================================================
   PRODUCT FEATURES
   ============================================================ */

.sulli-product-description .sulli-features {
    display: grid;

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

    gap: calc(34px * var(--sulli-scale));

    width: 100%;
}


/* ============================================================
   LEFT COLUMN
   ============================================================ */

.sulli-product-description .sulli-features-content {
    min-width: 0;
}


/* ============================================================
   TITLE
   ============================================================ */

.sulli-product-description .sulli-title {
    margin:
        0
        0
        calc(14px * var(--sulli-scale))
        !important;

    color: var(--sulli-text) !important;

    /*font-family:
        Arial,
        Helvetica,
        sans-serif !important;*/

    font-size:
        calc(24px * var(--sulli-scale))
        !important;

    font-weight: 800 !important;

    font-style: italic !important;

    line-height: 1.1 !important;

    letter-spacing: 0.01em !important;

    text-transform: uppercase !important;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.sulli-product-description .sulli-description {
    max-width:
        calc(510px * var(--sulli-scale));

    margin: 0 !important;

    color: var(--sulli-muted) !important;

    /*font-family:
        Arial,
        Helvetica,
        sans-serif !important;*/

    font-size:
        calc(11px * var(--sulli-scale))
        !important;

    font-weight: 400 !important;

    line-height: 1.55 !important;

    text-align: left !important;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.sulli-product-description .sulli-divider {
    width: 100%;

    height:
        calc(1px * var(--sulli-scale));

    margin:
        calc(19px * var(--sulli-scale))
        0
        calc(16px * var(--sulli-scale));

    background-color: var(--sulli-line);

    border: 0;
}


/* ============================================================
   FEATURE LISTS
   ============================================================ */

.sulli-product-description .sulli-feature-lists {
    display: grid;

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

    gap:
        calc(25px * var(--sulli-scale));

    width: 100%;
}


.sulli-product-description .sulli-feature-list {
    display: grid;

    gap:
        calc(8px * var(--sulli-scale));

    margin: 0 !important;

    padding: 0 !important;

    list-style: none !important;
}


/* ============================================================
   LIST ITEMS
   ============================================================ */

.sulli-product-description .sulli-feature-list li {
    position: relative;

    display: block;

    margin: 0 !important;

    padding:
        0
        0
        0
        calc(12px * var(--sulli-scale))
        !important;

    color: #222222 !important;

    /*font-family:
        Arial,
        Helvetica,
        sans-serif !important;*/

    font-size:
        calc(10px * var(--sulli-scale))
        !important;

    font-weight: 400 !important;

    line-height: 1.4 !important;

    text-align: left !important;
}


/* ============================================================
   BULLET
   ============================================================ */

.sulli-product-description .sulli-feature-list li::before {
    content: "";

    position: absolute;

    top: 0.55em;

    left: 0;

    width:
        calc(4px * var(--sulli-scale));

    height:
        calc(4px * var(--sulli-scale));

    margin: 0;

    padding: 0;

    border-radius: 50%;

    background-color: #111111;

    transform: translateY(-50%);
}


/* ============================================================
   PRODUCT IMAGE
   ============================================================ */

.sulli-product-description .sulli-product-image {
    min-width: 0;

    width: 100%;

    margin: 0 !important;

    overflow: hidden;

    background-color: #eeeeee;
}


.sulli-product-description .sulli-product-image img {
    width: 100%;

    height: 100%;

    min-height:
        calc(315px * var(--sulli-scale));

    object-fit: cover;

    object-position: center center;
}


/* ============================================================
   WARRANTY BANNER
   ============================================================ */

.sulli-product-description .sulli-warranty {
    position: relative;

    display: grid;

    align-items: center;

    width: 100%;

    min-height:
        calc(245px * var(--sulli-scale));

    margin:
        calc(58px * var(--sulli-scale))
        0
        0;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.45) 42%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        var(--sulli-warranty-bg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;
}


/* ============================================================
   WARRANTY CONTENT
   ============================================================ */

.sulli-product-description .sulli-warranty-content {
    width:
        min(
            100%,
            calc(480px * var(--sulli-scale))
        );

    padding:
        calc(40px * var(--sulli-scale))
        calc(36px * var(--sulli-scale));

    color: var(--sulli-white);

    text-align: left;
}


/* ============================================================
   WARRANTY EYEBROW
   ============================================================ */

.sulli-product-description .sulli-warranty-eyebrow {
    display: block;

    margin:
        0
        0
        calc(8px * var(--sulli-scale))
        !important;

    color: #ffffff !important;

    /*font-family:
        Arial,
        Helvetica,
        sans-serif !important;*/

    font-size:
        calc(9px * var(--sulli-scale))
        !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    letter-spacing: 0.17em !important;

    text-transform: uppercase !important;
}


/* ============================================================
   WARRANTY TITLE
   ============================================================ */

.sulli-product-description .sulli-warranty-title {
    margin:
        0
        0
        calc(8px * var(--sulli-scale))
        !important;

    color: #ffffff !important;

    /*font-family:
        Arial,
        Helvetica,
        sans-serif !important;*/

    font-size:
        calc(30px * var(--sulli-scale))
        !important;

    font-weight: 800 !important;

    font-style: italic !important;

    line-height: 1 !important;

    letter-spacing: 0.01em !important;

    text-transform: uppercase !important;
}


/* ============================================================
   WARRANTY TEXT
   ============================================================ */

.sulli-product-description .sulli-warranty-text {
    max-width:
        calc(300px * var(--sulli-scale));

    margin: 0 !important;

    color:
        rgba(255, 255, 255, 0.9)
        !important;

    /*font-family:
        Arial,
        Helvetica,
        sans-serif !important;*/

    font-size:
        calc(9px * var(--sulli-scale))
        !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

    text-align: left !important;
}


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

@media screen and (max-width: 768px) {

    .sulli-product-description {
        max-width: 100%;
    }


    /* ========================================================
       FEATURES
       ======================================================== */

    .sulli-product-description .sulli-features {
        grid-template-columns: 1fr;

        gap:
            calc(25px * var(--sulli-scale));
    }


    /* ========================================================
       PRODUCT IMAGE
       ======================================================== */

    .sulli-product-description .sulli-product-image {
        order: -1;
    }


    .sulli-product-description .sulli-product-image img {
        min-height:
            calc(320px * var(--sulli-scale));
    }


    /* ========================================================
       DESCRIPTION
       ======================================================== */

    .sulli-product-description .sulli-description {
        max-width: none;

        font-size:
            calc(12px * var(--sulli-scale))
            !important;
    }


    /* ========================================================
       FEATURE LIST
       ======================================================== */

    .sulli-product-description .sulli-feature-list li {
        font-size:
            calc(11px * var(--sulli-scale))
            !important;
    }


    /* ========================================================
       WARRANTY
       ======================================================== */

    .sulli-product-description .sulli-warranty {
        min-height:
            calc(260px * var(--sulli-scale));

        margin-top:
            calc(40px * var(--sulli-scale));
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 540px) {

    /* ========================================================
       FEATURES
       ======================================================== */

    .sulli-product-description .sulli-features {
        gap:
            calc(20px * var(--sulli-scale));
    }


    /* ========================================================
       TITLE
       ======================================================== */

    .sulli-product-description .sulli-title {
        font-size:
            calc(21px * var(--sulli-scale))
            !important;
    }


    /* ========================================================
       DESCRIPTION
       ======================================================== */

    .sulli-product-description .sulli-description {
        font-size:
            calc(11px * var(--sulli-scale))
            !important;

        line-height: 1.6 !important;
    }


    /* ========================================================
       FEATURE LISTS
       ======================================================== */

    .sulli-product-description .sulli-feature-lists {
        grid-template-columns: 1fr;

        gap:
            calc(10px * var(--sulli-scale));
    }


    .sulli-product-description .sulli-feature-list {
        gap:
            calc(7px * var(--sulli-scale));
    }


    .sulli-product-description .sulli-feature-list li {
        font-size:
            calc(11px * var(--sulli-scale))
            !important;
    }


    /* ========================================================
       PRODUCT IMAGE
       ======================================================== */

    .sulli-product-description .sulli-product-image img {
        min-height:
            calc(270px * var(--sulli-scale));
    }


    /* ========================================================
       WARRANTY
       ======================================================== */

    .sulli-product-description .sulli-warranty {
        min-height:
            calc(230px * var(--sulli-scale));

        margin-top:
            calc(35px * var(--sulli-scale));

        background-position: center center;
    }


    /* ========================================================
       WARRANTY CONTENT
       ======================================================== */

    .sulli-product-description .sulli-warranty-content {
        width: 100%;

        padding:
            calc(30px * var(--sulli-scale))
            calc(24px * var(--sulli-scale));
    }


    /* ========================================================
       WARRANTY TITLE
       ======================================================== */

    .sulli-product-description .sulli-warranty-title {
        font-size:
            calc(25px * var(--sulli-scale))
            !important;
    }
}