/* ==========================================================
   KETOZONA PET CATALOG PAGES V1.2
   CAT 217 / DOG 218

   Real Warehouse DOM:
     #js-product-list-header
     .category-description.category-description-top
     .category-description.category-description-top.hidden-sm-down
     #products
   ========================================================== */


/* ==========================================================
   WAREHOUSE DUPLICATE DESCRIPTION FIX
   Keep the first rendering.
   Suppress the desktop duplicate generated by Warehouse.
   ========================================================== */

body.category-id-217
#main > .category-description.category-description-top.hidden-sm-down,

body.category-id-218
#main > .category-description.category-description-top.hidden-sm-down {
    display:none !important;
}


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

body.category-id-217 #js-product-list-header,
body.category-id-218 #js-product-list-header {
    position:relative;
    overflow:hidden;

    min-height:270px;

    margin:0;

    padding:
        62px 45% 42px 42px;

    border:
        1px solid rgba(10,74,64,.09);

    border-radius:
        26px;

    box-shadow:
        0 18px 44px rgba(25,53,47,.10);

    isolation:isolate;
}


/* Image */

body.category-id-217 #js-product-list-header::after,
body.category-id-218 #js-product-list-header::after {
    content:"";

    position:absolute;
    z-index:-1;

    top:0;
    right:0;

    width:46%;
    height:100%;

    background-repeat:no-repeat;
    background-size:cover;

    pointer-events:none;
}


/* Image-to-copy fade */

body.category-id-217 #js-product-list-header::before,
body.category-id-218 #js-product-list-header::before {
    content:"";

    position:absolute;
    z-index:0;

    top:0;
    right:37%;

    width:18%;
    height:100%;

    pointer-events:none;
}


/* CAT */

body.category-id-217 #js-product-list-header {
    background:
        linear-gradient(
            145deg,
            #edf4f1 0%,
            #f8faf9 100%
        );
}

body.category-id-217 #js-product-list-header::after {
    background-image:
        url("/stag-ketozona/themes/warehousechild/assets/img/kzpet/kzpet-cat-section.png");

    background-position:
        50% 27%;
}

body.category-id-217 #js-product-list-header::before {
    background:
        linear-gradient(
            90deg,
            rgba(248,250,249,1) 0%,
            rgba(248,250,249,0) 100%
        );
}


/* DOG */

body.category-id-218 #js-product-list-header {
    background:
        linear-gradient(
            145deg,
            #faf5e7 0%,
            #fffdf7 100%
        );
}

body.category-id-218 #js-product-list-header::after {
    background-image:
        url("/stag-ketozona/themes/warehousechild/assets/img/kzpet/kzpet-dog-section.png");

    background-position:
        50% 28%;
}

body.category-id-218 #js-product-list-header::before {
    background:
        linear-gradient(
            90deg,
            rgba(255,253,247,1) 0%,
            rgba(255,253,247,0) 100%
        );
}


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

body.category-id-217
#js-product-list-header .page-title,

body.category-id-218
#js-product-list-header .page-title {
    position:relative;
    z-index:2;

    margin:0;
    padding:25px 0 0;

    font-size:40px;
    line-height:1.04;

    font-weight:900;

    letter-spacing:-.035em;

    text-transform:none;
}


body.category-id-217
#js-product-list-header .page-title::before,

body.category-id-218
#js-product-list-header .page-title::before {
    position:absolute;

    top:0;
    left:0;

    font-size:10px;
    line-height:1;

    font-weight:900;

    letter-spacing:.14em;

    text-transform:uppercase;
}


body.category-id-217
#js-product-list-header .page-title {
    color:#084b41;
}


body.category-id-217
#js-product-list-header .page-title::before {
    content:"KETOZONA PET · CAT";
    color:#52786f;
}


body.category-id-218
#js-product-list-header .page-title {
    color:#967119;
}


body.category-id-218
#js-product-list-header .page-title::before {
    content:"KETOZONA PET · DOG";
    color:#a4832c;
}


/* ==========================================================
   REAL CATEGORY DESCRIPTION
   First Warehouse rendering only.
   ========================================================== */

body.category-id-217
#main > .category-description.category-description-top:not(.hidden-sm-down),

body.category-id-218
#main > .category-description.category-description-top:not(.hidden-sm-down) {
    position:relative;
    z-index:6;

    width:
        calc(100% - 56px);

    margin:
        -54px 28px 34px;

    padding:
        24px 27px 22px;

    border:
        1px solid rgba(12,74,64,.09);

    border-radius:
        19px;

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

    box-shadow:
        0 15px 34px rgba(25,53,47,.10);
}


/* Remove Warehouse default content restrictions */

body.category-id-217
#main > .category-description.category-description-top:not(.hidden-sm-down)
.rte-content,

body.category-id-218
#main > .category-description.category-description-top:not(.hidden-sm-down)
.rte-content {
    margin:0;
    padding:0;
    max-width:none;
}


/* Main copy */

body.category-id-217
.kzpet-catalog-intro,

body.category-id-218
.kzpet-catalog-intro {
    color:#53635f;

    font-size:14px;
    line-height:1.60;
}


body.category-id-217
.kzpet-catalog-intro p,

body.category-id-218
.kzpet-catalog-intro p {
    margin:
        0 0 12px;
}


/* Lead */

body.category-id-217
.kzpet-catalog-lead,

body.category-id-218
.kzpet-catalog-lead {
    margin-bottom:
        9px !important;

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

    font-weight:850;
}


body.category-id-217
.kzpet-catalog-lead {
    color:#0a594c;
}


body.category-id-218
.kzpet-catalog-lead {
    color:#9e791e;
}


/* ==========================================================
   CRITERIA CHIPS
   ========================================================== */

body.category-id-217
.kzpet-catalog-tags,

body.category-id-218
.kzpet-catalog-tags {
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin:
        17px 0;
}


body.category-id-217
.kzpet-catalog-tags span,

body.category-id-218
.kzpet-catalog-tags span {
    display:inline-flex;

    align-items:center;

    min-height:29px;

    padding:
        6px 11px;

    border-radius:
        999px;

    font-size:10.5px;
    line-height:1;

    font-weight:800;
}


body.category-id-217
.kzpet-catalog-tags span {
    border:
        1px solid rgba(8,75,65,.14);

    background:
        #f4f8f6;

    color:
        #0a5247;
}


body.category-id-218
.kzpet-catalog-tags span {
    border:
        1px solid rgba(174,135,32,.17);

    background:
        #fcf8ec;

    color:
        #937019;
}


/* ==========================================================
   METHOD NOTE
   ========================================================== */

body.category-id-217
.kzpet-catalog-method-note,

body.category-id-218
.kzpet-catalog-method-note {
    margin:
        3px 0 0 !important;

    padding:
        11px 13px;

    border-radius:
        11px;

    font-size:12px;
    line-height:1.45;

    font-weight:700;
}


body.category-id-217
.kzpet-catalog-method-note {
    border-left:
        3px solid #0b6556;

    background:
        rgba(7,83,71,.06);

    color:
        #365a53;
}


body.category-id-218
.kzpet-catalog-method-note {
    border-left:
        3px solid #c49a25;

    background:
        rgba(195,155,38,.075);

    color:
        #675727;
}


/* ==========================================================
   NATIVE PRESTASHOP PRODUCT AREA
   ========================================================== */

body.category-id-217 #products,
body.category-id-218 #products {
    position:relative;
    z-index:1;
}


/* Empty state while the catalogue has no products */

body.category-id-217
#products > .alert.alert-warning,

body.category-id-218
#products > .alert.alert-warning {
    margin:
        0 0 36px;

    padding:
        23px 25px;

    border:
        1px solid rgba(10,74,64,.10);

    border-radius:
        17px;

    background:#fff;

    color:#52625e;

    box-shadow:
        0 10px 27px rgba(24,53,47,.055);
}


body.category-id-217
#products > .alert.alert-warning::before,

body.category-id-218
#products > .alert.alert-warning::before {
    content:
        "SELEZIONE IN PREPARAZIONE";

    display:block;

    margin:
        0 0 7px;

    font-size:10px;
    line-height:1;

    font-weight:900;

    letter-spacing:.12em;
}


body.category-id-217
#products > .alert.alert-warning::before {
    color:#08705e;
}


body.category-id-218
#products > .alert.alert-warning::before {
    color:#ac8420;
}


body.category-id-217
#products > .alert.alert-warning strong,

body.category-id-218
#products > .alert.alert-warning strong {
    color:#354b45;

    font-size:14px;

    font-weight:700;
}


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

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

    body.category-id-217 #js-product-list-header,
    body.category-id-218 #js-product-list-header {
        min-height:250px;

        padding:
            54px 43% 40px 30px;
    }


    body.category-id-217
    #js-product-list-header .page-title,

    body.category-id-218
    #js-product-list-header .page-title {
        font-size:33px;
    }


    body.category-id-217
    #main > .category-description.category-description-top:not(.hidden-sm-down),

    body.category-id-218
    #main > .category-description.category-description-top:not(.hidden-sm-down) {
        width:
            calc(100% - 34px);

        margin:
            -42px 17px 28px;

        padding:
            21px 20px;
    }

}


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

@media (max-width:767px) {

    body.category-id-217 #js-product-list-header,
    body.category-id-218 #js-product-list-header {
        min-height:250px;

        margin:0;

        padding:
            202px 18px 22px;

        border-radius:
            21px;

        box-shadow:
            0 12px 29px rgba(25,53,47,.09);
    }


    body.category-id-217 #js-product-list-header::after,
    body.category-id-218 #js-product-list-header::after {
        top:0;
        left:0;
        right:auto;

        width:100%;
        height:190px;

        border-radius:
            20px 20px 0 0;
    }


    body.category-id-217 #js-product-list-header::before,
    body.category-id-218 #js-product-list-header::before {
        top:135px;
        left:0;
        right:auto;

        width:100%;
        height:57px;
    }


    body.category-id-217 #js-product-list-header::before {
        background:
            linear-gradient(
                180deg,
                rgba(237,244,241,0) 0%,
                rgba(237,244,241,1) 100%
            );
    }


    body.category-id-218 #js-product-list-header::before {
        background:
            linear-gradient(
                180deg,
                rgba(250,245,231,0) 0%,
                rgba(250,245,231,1) 100%
            );
    }


    body.category-id-217
    #js-product-list-header .page-title,

    body.category-id-218
    #js-product-list-header .page-title {
        padding-top:
            19px;

        font-size:
            29px;
    }


    body.category-id-217
    #main > .category-description.category-description-top:not(.hidden-sm-down),

    body.category-id-218
    #main > .category-description.category-description-top:not(.hidden-sm-down) {
        width:
            calc(100% - 20px);

        margin:
            -10px 10px 23px;

        padding:
            19px 17px 18px;

        border-radius:
            16px;

        box-shadow:
            0 10px 24px rgba(25,53,47,.08);
    }


    body.category-id-217
    .kzpet-catalog-intro,

    body.category-id-218
    .kzpet-catalog-intro {
        font-size:
            13px;

        line-height:
            1.55;
    }


    body.category-id-217
    .kzpet-catalog-lead,

    body.category-id-218
    .kzpet-catalog-lead {
        font-size:
            16px;
    }


    body.category-id-217
    .kzpet-catalog-tags,

    body.category-id-218
    .kzpet-catalog-tags {
        gap:6px;

        margin:
            15px 0;
    }


    body.category-id-217
    .kzpet-catalog-tags span,

    body.category-id-218
    .kzpet-catalog-tags span {
        min-height:
            27px;

        padding:
            6px 9px;

        font-size:
            9.7px;
    }


    body.category-id-217
    #products > .alert.alert-warning,

    body.category-id-218
    #products > .alert.alert-warning {
        margin-bottom:
            24px;

        padding:
            18px 17px;

        border-radius:
            15px;
    }

}

/* KETOZONA PET CATALOG HERO TITLE V1.2.1 START */

body.category-id-217
#js-product-list-header .page-title,

body.category-id-218
#js-product-list-header .page-title {

    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    z-index:5 !important;

    width:auto !important;
    max-width:100% !important;

    margin:0 !important;
    padding:26px 0 0 !important;

    font-size:40px !important;
    line-height:1.04 !important;

    font-weight:900 !important;

    letter-spacing:-.035em !important;

    text-align:left !important;

    text-transform:none !important;
}


body.category-id-217
#js-product-list-header .page-title > span,

body.category-id-218
#js-product-list-header .page-title > span {

    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
}


body.category-id-217
#js-product-list-header .page-title {

    color:#084b41 !important;
}


body.category-id-218
#js-product-list-header .page-title {

    color:#967119 !important;
}


body.category-id-217
#js-product-list-header .page-title::before,

body.category-id-218
#js-product-list-header .page-title::before {

    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;

    top:0 !important;
    left:0 !important;

    font-size:10px !important;
    line-height:1 !important;

    font-weight:900 !important;

    letter-spacing:.14em !important;
}


body.category-id-217
#js-product-list-header .page-title::before {

    content:"KETOZONA PET · CAT" !important;

    color:#52786f !important;
}


body.category-id-218
#js-product-list-header .page-title::before {

    content:"KETOZONA PET · DOG" !important;

    color:#a4832c !important;
}


@media (max-width:767px) {

    body.category-id-217
    #js-product-list-header .page-title,

    body.category-id-218
    #js-product-list-header .page-title {

        font-size:29px !important;

        padding-top:19px !important;
    }

}

/* KETOZONA PET CATALOG HERO TITLE V1.2.1 END */

/* KETOZONA PET CAT FULL HEAD CROP V1.2.3 START */


/*
 * DESKTOP
 *
 * The source image is portrait-oriented while the hero is wide.
 * For CAT we intentionally protect ears/forehead and accept
 * more crop on the lower body.
 */

@media (min-width:992px) {

    body.category-id-217
    #js-product-list-header::after {

        background-position:
            50% 2% !important;
    }

}


/*
 * TABLET
 */

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

    body.category-id-217
    #js-product-list-header::after {

        background-position:
            50% 0% !important;
    }

}


/*
 * MOBILE
 *
 * V1.2.2 did not affect mobile.
 * Here the photo area is also increased from 190px to 235px
 * so the cat has visibly more breathing room.
 */

@media (max-width:767px) {

    body.category-id-217
    #js-product-list-header {

        min-height:
            295px !important;

        padding:
            247px 18px 22px !important;
    }


    body.category-id-217
    #js-product-list-header::after {

        height:
            235px !important;

        background-position:
            50% 0% !important;
    }


    /*
     * Move the image-to-copy fade down with the taller photo.
     */
    body.category-id-217
    #js-product-list-header::before {

        top:
            178px !important;

        height:
            58px !important;
    }

}


/*
 * Narrow phones: retain full-ear priority.
 */

@media (max-width:430px) {

    body.category-id-217
    #js-product-list-header {

        min-height:
            285px !important;

        padding:
            237px 16px 21px !important;
    }


    body.category-id-217
    #js-product-list-header::after {

        height:
            225px !important;

        background-position:
            50% 0% !important;
    }


    body.category-id-217
    #js-product-list-header::before {

        top:
            168px !important;

        height:
            58px !important;
    }

}

/* KETOZONA PET CAT FULL HEAD CROP V1.2.3 END */