/*
 * Premium Ecológica
 * R3C - Responsive
 *
 * Desktop >= 1024px permanece preservado.
 */


/* =========================================================
   TABLET — 768 / 1023
========================================================= */

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

    /*
     * HEADER
     */

    .premium-r3b-shell {
        width: calc(100% - 30px);
    }

    .premium-r3b-topbar__inner {
        grid-template-columns:
            repeat(3,1fr);
    }

    .premium-r3b-topitem--optional {
        display: none;
    }

    .premium-r3b-topitem {
        padding:
            7px 10px;
    }

    .premium-r3b-topitem strong {
        font-size: 9px;
    }

    .premium-r3b-topitem small {
        font-size: 8px;
    }


    /*
     * Main header becomes 2 levels:
     * logo/actions + search.
     */

    .premium-r3b-main__grid {
        min-height: auto;

        padding:
            12px 0 13px;

        grid-template-columns:
            190px 1fr;

        gap:
            10px 18px;
    }

    .premium-r3b-logo .logo img,
    .page-header .logo img,
    header .logo img {
        max-width:
            185px !important;

        max-height:
            58px !important;
    }

    .premium-r3b-actions {
        justify-self: end;
    }

    .premium-r3b-action__copy {
        display: none;
    }

    .premium-r3b-action {
        min-height: 45px;

        padding: 5px 7px;
    }

    .premium-r3b-action__icon {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .premium-r3b-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .premium-r3b-search__label {
        display: none;
    }

    .premium-r3b-search .form-input,
    .premium-r3b-search
    .form.minisearch
    button[type="submit"] {
        height: 46px;
    }


    /*
     * Tablet navigation:
     * horizontal category strip.
     */

    .premium-r3b-extra-nav {
        display: none;
    }

    .premium-r3b-nav__inner {
        min-height: 44px;
    }

    .premium-r3b-catalog-menu {
        width: 100%;
        overflow: hidden;
    }

    .premium-r3b-catalog-menu
    .navigation.hidden.lg\:flex {
        display: flex !important;

        width: 100%;
    }

    .premium-r3b-catalog-menu
    .navigation nav {
        width: 100%;

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

        scrollbar-width: none;
    }

    .premium-r3b-catalog-menu
    .navigation nav::-webkit-scrollbar {
        display: none;
    }

    .premium-r3b-catalog-menu
    .navigation nav > ul {
        width: max-content;

        display: flex !important;

        flex-wrap: nowrap !important;

        gap: 0 !important;
    }

    .premium-r3b-catalog-menu
    .navigation
    li.level-0 {
        flex: 0 0 auto;
    }

    .premium-r3b-catalog-menu
    .navigation
    li.level-0
    a.level-0 {
        padding:
            13px 11px !important;

        font-size:
            10.5px !important;

        white-space: nowrap;
    }

    .premium-r3b-catalog-menu
    .navigation
    li.level-0
    ul {
        display: none !important;
    }


    /*
     * HOME WIDTH
     */

    .premium-home-r3 > section,
    .premium-home-r3 > .premium-r3-trust,
    .premium-home-r3 .premium-products {
        width:
            calc(100vw - 34px) !important;
    }


    /*
     * SPECIES
     */

    .premium-r32-species-grid {
        grid-template-columns:
            repeat(5, minmax(0,1fr));

        gap: 10px;
    }

    .premium-r32-species-card {
        min-height: 142px;
    }

    .premium-r32-species-image {
        width: 90px;
        height: 90px;
    }


    /*
     * HERO
     */

    .premium-home-r3 > .premium-r31-hero {
        padding:
            42px 38px;

        gap: 30px;
    }

    .premium-r31-hero__copy h1 {
        font-size: 44px;
    }

    .premium-r31-hero__visual {
        min-height: 320px;
    }


    /*
     * PRODUCT/FAMILY CARDS
     */

    .premium-r31-family-grid,
    .premium-home-r3
    .premium-product-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap: 14px !important;
    }

    .premium-r31-family-image {
        height: 225px;
    }

    .premium-r31-family-image img {
        height: 185px;
    }

    .premium-home-r3
    .premium-product-card__image {
        min-height:
            235px !important;
    }

    .premium-home-r3
    .premium-product-card__image img {
        height:
            195px !important;
    }


    /*
     * LOWER CONTENT
     */

    .premium-r3-journey-grid,
    .premium-r3-needs-grid,
    .premium-r3-support-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }

    .premium-r3-why-grid {
        grid-template-columns:
            repeat(3,1fr)
            !important;
    }

}


/* =========================================================
   MOBILE — <= 767
========================================================= */

@media (max-width: 767px) {

    /*
     * GLOBAL WIDTH
     */

    .premium-r3b-shell {
        width:
            calc(100% - 20px);
    }

    .premium-home-r3 > section,
    .premium-home-r3 > .premium-r3-trust,
    .premium-home-r3 .premium-products {
        width:
            calc(100vw - 22px) !important;
    }


    /*
     * TOP BAR
     */

    .premium-r3b-topbar__inner {
        min-height: 34px;

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

    .premium-r3b-topitem {
        min-height: 34px;

        padding:
            6px 3px;
    }

    .premium-r3b-topitem > span,
    .premium-r3b-topitem small,
    .premium-r3b-topitem--optional {
        display: none;
    }

    .premium-r3b-topitem strong {
        display: block;

        font-size: 7.5px;
        line-height: 1.15;

        text-align: center;
    }


    /*
     * MAIN HEADER
     */

    .premium-r3b-main__grid {
        min-height: auto;

        padding:
            10px 0 11px;

        grid-template-columns:
            1fr auto;

        gap:
            9px 8px;
    }

    .premium-r3b-logo .logo img,
    .page-header .logo img,
    header .logo img {
        max-width:
            158px !important;

        max-height:
            50px !important;
    }

    .premium-r3b-actions {
        gap: 1px;
    }

    .premium-r3b-action {
        min-height: 42px;

        padding: 4px;
    }

    .premium-r3b-action__copy {
        display: none;
    }

    .premium-r3b-action__icon {
        width: 29px;
        height: 29px;

        flex: 0 0 29px;
    }

    .premium-r3b-action__icon svg {
        width: 25px;
        height: 25px;
    }

    .premium-r3b-action--whatsapp {
        display: none;
    }


    /*
     * SEARCH
     */

    .premium-r3b-search {
        grid-column:
            1 / -1;

        grid-row: 2;
    }

    .premium-r3b-search__label {
        display: none;
    }

    .premium-r3b-search
    .form-input {
        height: 44px;

        padding-inline:
            14px;

        font-size: 12px;

        border-radius:
            11px 0 0 11px !important;
    }

    .premium-r3b-search
    .form.minisearch
    button[type="submit"] {
        width: 46px;
        min-width: 46px;
        height: 44px;

        border-radius:
            0 11px 11px 0 !important;
    }


    /*
     * MOBILE CATEGORY STRIP
     *
     * Mantemos as categorias do Magento,
     * mas sem dropdown no celular.
     */

    .premium-r3b-extra-nav {
        display: none !important;
    }

    .premium-r3b-nav {
        overflow: hidden;
    }

    .premium-r3b-nav__inner {
        min-height: 42px;

        width: 100%;

        padding-left: 10px;
        padding-right: 10px;
    }

    .premium-r3b-catalog-menu {
        width: 100%;

        overflow: hidden;
    }

    .premium-r3b-catalog-menu
    .navigation.hidden.lg\:flex {
        display: flex !important;

        width: 100%;
    }

    .premium-r3b-catalog-menu
    .navigation nav {
        width: 100%;

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

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .premium-r3b-catalog-menu
    .navigation nav::-webkit-scrollbar {
        display: none;
    }

    .premium-r3b-catalog-menu
    .navigation nav > ul {
        width: max-content;

        display: flex !important;

        flex-wrap: nowrap !important;

        gap: 0 !important;

        padding: 0 !important;
    }

    .premium-r3b-catalog-menu
    .navigation
    li.level-0 {
        position: relative;

        flex:
            0 0 auto;
    }

    .premium-r3b-catalog-menu
    .navigation
    li.level-0
    a.level-0 {
        min-height: 42px;

        padding:
            13px 10px !important;

        display: flex;
        align-items: center;

        font-size:
            10px !important;

        white-space: nowrap;
    }

    .premium-r3b-catalog-menu
    .navigation
    li.level-0
    ul {
        display: none !important;
    }


    /*
     * SLIDER
     *
     * Mantém a arte inteira.
     * Quando houver imagem mobile específica,
     * ela já será usada pelo <picture>.
     */

    .premium-home-r3
    > .premium-r32-slider {
        width:
            calc(
                100vw - 10px
            ) !important;

        margin-top:
            8px !important;

        border-radius: 12px;
    }

    .premium-r32-arrow {
        width: 32px;
        height: 42px;

        font-size: 25px;

        border-radius: 9px;
    }

    .premium-r32-arrow--prev {
        left: 5px;
    }

    .premium-r32-arrow--next {
        right: 5px;
    }

    .premium-r32-dots {
        bottom: 5px;

        padding:
            5px 7px;
    }

    .premium-r32-dots button {
        width: 7px;
        height: 7px;
    }

    .premium-r32-dots
    button.is-active {
        width: 22px;
    }


    /*
     * TRUST BAR
     */

    .premium-r31-trust {
        grid-template-columns:
            repeat(2,1fr);
    }

    .premium-r31-trust > div {
        padding:
            10px 9px;

        gap: 7px;
    }

    .premium-r31-trust
    > div > b {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

    .premium-r31-trust strong {
        font-size: 9px;
    }

    .premium-r31-trust span {
        font-size: 8px;
    }


    /*
     * SPECIES
     */

    .premium-home-r3
    > .premium-r32-species {
        padding-top: 39px;
        padding-bottom: 8px;
    }

    .premium-r31-heading h2 {
        font-size: 26px;
    }

    .premium-r31-heading p {
        font-size: 12px;
        line-height: 1.5;
    }

    .premium-r32-species-grid {
        margin-top: 20px;

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

        gap: 9px;
    }

    .premium-r32-species-card {
        min-height: 124px;

        padding:
            8px 7px 10px;
    }

    .premium-r32-species-image {
        width: 82px;
        height: 82px;
    }

    .premium-r32-species-card strong {
        margin-top: 5px;

        font-size: 11px;
    }


    /*
     * HERO
     */

    .premium-home-r3
    > .premium-r31-hero {
        margin-top: 30px;

        padding:
            30px 20px 24px;

        gap: 20px;

        border-radius: 18px;
    }

    .premium-r31-hero__copy h1 {
        font-size: 36px;

        line-height: .97;
    }

    .premium-r31-hero__copy > p {
        margin:
            15px 0 18px;

        font-size: 13px;
        line-height: 1.6;
    }

    .premium-r31-hero__actions {
        gap: 7px;
    }

    .premium-r31-btn {
        min-height: 41px;

        padding:
            0 13px;

        font-size: 10px;
    }

    .premium-r31-hero__proof {
        margin-top: 20px;

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

        gap: 5px;
    }

    .premium-r31-hero__proof
    > div {
        flex-direction: column;

        gap: 4px;

        text-align: center;
    }

    .premium-r31-hero__proof
    > div > b {
        width: 28px;
        height: 28px;
    }

    .premium-r31-hero__proof span {
        font-size: 8px;
    }

    .premium-r31-hero__proof strong {
        font-size: 9px;
    }

    .premium-r31-hero__visual {
        min-height: 245px;
    }

    .premium-r31-hero__visual
    > img {
        max-height: 245px;
    }

    .premium-r31-hero__callout {
        right: 0;
        bottom: 0;

        max-width: 165px;

        padding:
            10px 12px;
    }

    .premium-r31-hero__callout strong {
        font-size: 9px;
    }

    .premium-r31-hero__callout span {
        font-size: 8px;
    }


    /*
     * SECTION SPACING
     */

    .premium-home-r3
    > .premium-r31-families,
    .premium-home-r3
    .premium-products,
    .premium-home-r3
    > .premium-choice,
    .premium-r3-needs,
    .premium-r3-why,
    .premium-r3-authority,
    .premium-home-r3
    > .premium-r31-authority {
        margin-top:
            42px !important;
    }


    /*
     * FAMILIES
     *
     * 2 columns on phone.
     */

    .premium-r31-family-grid {
        margin-top: 18px;

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap:
            9px !important;
    }

    .premium-r31-family-card {
        border-radius: 14px;
    }

    .premium-r31-family-number {
        left: 8px;
        top: 8px;

        width: 27px;
        height: 27px;

        font-size: 8px;
    }

    .premium-r31-family-image {
        height: 145px;

        padding: 12px;
    }

    .premium-r31-family-image img {
        height: 120px;
    }

    .premium-r31-family-copy {
        padding:
            12px 11px 13px;
    }

    .premium-r31-family-copy
    > strong {
        font-size: 13px;
    }

    .premium-r31-family-copy p {
        min-height: 44px;

        margin:
            5px 0 8px;

        font-size: 9px;
        line-height: 1.45;
    }

    .premium-r31-family-copy b {
        font-size: 9px;
    }


    /*
     * PRODUCTS
     *
     * 2 columns instead of long 1-column page.
     */

    .premium-home-r3
    .premium-product-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap:
            9px !important;
    }

    .premium-home-r3
    .premium-product-card {
        border-radius: 14px;
    }

    .premium-home-r3
    .premium-product-card__image {
        min-height:
            145px !important;

        padding:
            9px !important;
    }

    .premium-home-r3
    .premium-product-card__image img {
        height:
            125px !important;
    }

    .premium-home-r3
    .premium-product-card__body {
        padding:
            11px !important;
    }

    .premium-home-r3
    .premium-product-card__sku {
        font-size: 7px;
    }

    .premium-home-r3
    .premium-product-card__name {
        min-height:
            47px !important;

        font-size:
            10.5px !important;

        line-height: 1.35;
    }

    .premium-home-r3
    .premium-product-card__price {
        min-height:
            34px !important;

        margin-top: 8px;

        font-size:
            13px !important;
    }

    .premium-home-r3
    .premium-product-card__actions {
        padding-top: 5px;
    }

    .premium-home-r3
    .premium-product-card__buy {
        min-height:
            35px !important;

        font-size: 9px;
    }


    /*
     * CHOOSER
     */

    .premium-home-r3
    > .premium-choice {
        padding:
            27px 19px !important;

        gap: 22px;

        border-radius: 18px;
    }

    .premium-home-r3
    .premium-choice__intro h2 {
        font-size:
            34px !important;
    }

    .premium-home-r3
    .premium-choice__intro p {
        margin-top: 11px;

        font-size: 11px;
        line-height: 1.55;
    }

    .premium-home-r3
    .premium-choice-card {
        min-height: 72px;

        padding:
            14px 32px 14px 49px
            !important;
    }

    .premium-home-r3
    .premium-choice-card__number {
        left: 11px;
        top: 14px;

        width: 26px;
        height: 26px;
    }

    .premium-home-r3
    .premium-choice-card strong {
        font-size: 11px;
    }


    /*
     * FEATURE
     */

    .premium-home-r3
    > .premium-r31-feature {
        min-height: 0;

        grid-template-columns:
            1fr;
    }

    .premium-r31-feature__visual {
        min-height: 190px;
    }

    .premium-r31-feature__visual img {
        max-height: 170px;
    }

    .premium-r31-feature__copy {
        padding:
            25px 21px;
    }

    .premium-r31-feature__copy h2 {
        font-size: 27px;
    }

    .premium-r31-feature__copy p {
        margin:
            12px 0 16px;

        font-size: 11px;
    }


    /*
     * JOURNEY
     */

    .premium-r3-journey,
    .premium-r3-support {
        padding-top:
            50px !important;
    }

    .premium-r3-journey-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap:
            9px !important;
    }

    .premium-r3-step {
        min-height:
            155px !important;

        padding:
            25px 15px 15px
            !important;
    }

    .premium-r3-step-icon {
        margin:
            10px 0 8px !important;

        font-size:
            29px !important;
    }

    .premium-r3-step strong {
        font-size:
            12px !important;
    }

    .premium-r3-step p {
        font-size: 9px;
    }


    /*
     * NEEDS
     */

    .premium-r3-needs {
        padding:
            30px 15px !important;
    }

    .premium-r3-needs-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap:
            8px !important;
    }

    .premium-r3-need-card {
        min-height:
            148px !important;

        padding:
            13px !important;

        display: block;
    }

    .premium-r3-need-card
    > span {
        width: 31px;
        height: 31px;

        margin-bottom: 8px;
    }

    .premium-r3-need-card strong {
        font-size: 10px;
    }

    .premium-r3-need-card p {
        min-height: 45px;

        font-size: 8.5px;
    }

    .premium-r3-need-card b {
        font-size: 8.5px;
    }


    /*
     * WHY PREMIUM
     */

    .premium-r3-why {
        padding:
            28px 14px !important;
    }

    .premium-r3-why h2 {
        margin-bottom: 22px;

        font-size:
            21px !important;
    }

    .premium-r3-why-grid {
        grid-template-columns:
            repeat(2,1fr)
            !important;

        gap:
            18px 8px;
    }

    .premium-r3-why-grid strong {
        font-size: 10px;
    }

    .premium-r3-why-grid small {
        font-size: 8px;
    }


    /*
     * SUPPORT
     */

    .premium-r3-support-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap:
            8px !important;
    }

    .premium-r3-support-grid a {
        min-height:
            145px !important;

        padding:
            14px !important;
    }

    .premium-r3-support-grid
    a > span {
        font-size: 22px;
    }

    .premium-r3-support-grid strong {
        font-size: 10px;
    }

    .premium-r3-support-grid small {
        font-size: 8.5px;
    }

    .premium-r3-support-grid b {
        font-size: 8.5px;
    }


    /*
     * AUTHORITY
     */

    .premium-home-r3
    > .premium-r31-authority {
        padding: 0;

        grid-template-columns:
            1fr;

        gap: 0;

        border-radius: 18px;
    }

    .premium-r31-authority__copy {
        padding:
            28px 20px 18px;
    }

    .premium-r31-authority__copy h2 {
        font-size: 30px;
    }

    .premium-r31-authority__copy p {
        margin:
            12px 0 16px;

        font-size: 11px;
    }

    .premium-r31-authority__stats {
        padding:
            0 20px 18px;

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

    .premium-r31-authority__stats
    > div {
        min-height: 78px;

        padding: 12px;
    }

    .premium-r31-authority__stats strong {
        font-size: 16px;
    }

    .premium-r31-authority__stats span {
        font-size: 8px;
    }

    .premium-r31-authority__visual {
        min-height: 190px;

        margin:
            0 20px 20px;

        display: flex;
    }

    .premium-r31-authority__visual img {
        height: 175px;
    }


    /*
     * WHATSAPP
     */

    .premium-home-r3
    > .premium-r31-whatsapp {
        margin-top: 28px;
        margin-bottom: 28px;

        padding:
            17px 16px;

        grid-template-columns:
            auto 1fr;

        gap: 10px;

        text-align: left;
    }

    .premium-r31-whatsapp__icon {
        width: 44px;
        height: 44px;

        margin: 0;
    }

    .premium-r31-whatsapp__icon svg {
        width: 28px;
        height: 28px;
    }

    .premium-r31-whatsapp h2 {
        font-size: 17px;
    }

    .premium-r31-whatsapp p {
        font-size: 9px;
    }

    .premium-r31-whatsapp > a {
        grid-column:
            1 / -1;

        width: 100%;

        min-height: 40px;

        justify-content: center;

        font-size: 10px;
    }


    /*
     * FOOTER
     */

    .premium-footer-r3b {
        width:
            calc(
                100% - 28px
            );

        padding-top: 35px;
    }

    .premium-footer-r3b__grid {
        grid-template-columns:
            repeat(2,1fr);

        gap:
            26px 18px;
    }

    .premium-footer-r3b__brand,
    .premium-footer-r3b__contact-column {
        grid-column:
            1 / -1;
    }

    .premium-footer-r3b__brand strong {
        font-size: 20px;
    }

    .premium-footer-r3b__brand p,
    .premium-footer-r3b a,
    .premium-footer-r3b__contact {
        font-size: 10px;
    }

    .premium-footer-r3b__bottom {
        margin-top: 28px;

        padding-top: 15px;

        font-size: 8px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 350px) {

    /*
     * Fall back to one column where
     * two cards would become too narrow.
     */

    .premium-r31-family-grid,
    .premium-home-r3
    .premium-product-grid,
    .premium-r3-journey-grid,
    .premium-r3-needs-grid,
    .premium-r3-support-grid {
        grid-template-columns:
            1fr !important;
    }

}