/*------------------------------------------------------
| FONT-FAMILY (Google)                                 |
------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*------------------------------------------------------
| FONT-FAMILY                                          |
------------------------------------------------------*/
:root {
    --font-family-primary: Verdana, Geneva, Tahoma, sans-serif;
    --font-family-secondary: Impact;
}

/*------------------------------------------------------
| COLOR DEFINITION                                     |
------------------------------------------------------*/
:root {
    --color-primary: #FFFFFF;
    --color-secondary: #2D2D2D;
    --color-third: #02c1e7;
    --color-fourth: #8D8D8D;
    --color-fifth: #FF9C1A;
    --color-sixth: #2CBE00;
    --color-seventh: #666666;
    --color-eighth: #D60000;
    --color-nineth: #CCCCCC;
    --color-tenth: #AAAAAA;
    --color-eleventh: #b7c641;
    --color-twelfth: #6F6F6F;
    --color-thirteenth: #0065bc;
    --color-fourtheenth: #417BFF;

    --bg-color-primary: var(--color-eighth);
    --bg-color-secondary: #417BFF; 
    --bg-color-third: #EFEFEF;
    --bg-color-fourth: #FF4D41;
    --bg-color-fifth: var(--color-third);
    --bg-color-sixth: var(--color-primary);

    /* Button
    ---------------------- */
    --bg-color-button-primary: var(--bg-color-primary);
    --bg-color-button-secondary: var(--color-third);

    /* Product card
    ---------------------- */
    --bg-color-product-discount: var(--bg-color-fourth);
    --bg-color-product-super-price: var(--bg-color-fifth);
    --bg-color-product-text-crazy-week: var(--bg-color-primary);

    --color-price-old: var(--color-seventh);
    --color-price-new: var(--color-eighth);
    --color-copyright: var(--color-fourth);

    --star-active: var(--color-fifth);
    --star-inactive: var(--color-nineth);

    /* Grid separator (offer alert)
    ------------------------------------ */
    --color-text-crazy-week-red: var(--color-eighth);
    --color-text-crazy-week-green: var(--color-sixth);
}

/*------------------------------------------------------
| COMPONENT                                            |
| > text: crazy-week                                   |
------------------------------------------------------*/
.text-crazy-week {
    font-size: 1.15em;
    font-weight: 700;
    line-height: .9rem;
    
    margin: 0 0 0 20px;

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

    color: var(--color-eighth);
    font-family: "Poppins";
    font-weight: 900;
}

.text-crazy-week > span {
    font-size: .96rem;
}

/*------------------------------------------------------
| MAIN WRAPPER                                         |
------------------------------------------------------*/
#wrapper {
    width: 100%;
}

/*------------------------------------------------------
| WRAPPER > CONTENT                                    |
------------------------------------------------------*/
main {
    padding: 10px 5px;
    background-color: var(--bg-color-third);
}

/*------------------------------------------------------
| header                                               |
------------------------------------------------------*/
header {
    transition: all .3s;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

/*------------------------------------------------------
| header                                               |
| > masthead                                           |
------------------------------------------------------*/
header .part-masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    height: 50px;
    padding: 0 12px;
}

.part-masthead button.toggle-menu {
    background: url("../assets/svg/squares.svg") no-repeat 0;
    width: 40px;
    height: auto;
    padding: 15px 30px;
    box-sizing: border-box;
    border: none;
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    font-family: 'Poppins';
}

button.toggle-menu span {
    max-width: 60px;
    font-size: 12px;
    text-align: left;
    line-height: 1.2;
    color: var(--color-twelfth);
    font-weight: 600;
    font-family: "Poppins";
}

.part-masthead .logo {
    width: 120px;
}

/*------------------------------------------------------
| header                                               |
| > banner campaign                                    |
------------------------------------------------------*/
header .part-campaign-banner {
    background-color: var(--bg-color-primary);
    color: var(--color-primary);
    border-radius: 5px;
    height: 80px;
    font-family: "Poppins";

    display: flex;
    gap: 10px;

    margin-bottom: 10px;
}

.part-campaign-banner h2 {
    font-size: 1.7em;
    font-weight: 900;
    line-height: 1.38rem;
    
    margin: 0 0 0 20px;

    display: flex;
    justify-content: center;
    flex-direction: column;
}

.part-campaign-banner h2 > span {
    font-size: 1.45rem;
}

header .block-campaign-teaser {
    align-self: center;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.block-campaign-teaser span {
    font-size: .6rem;
    font-weight: 200;
}

.block-campaign-teaser p {
    font-size: 23px;
    font-weight: 700;
}

@media screen and (max-width: 400px) {
    .part-campaign-banner p {
        font-size: 18px;
    }
}

@media screen and (max-width: 360px) {
    .part-campaign-banner p {
        font-size: 18px;
    }
}

@media screen and (max-width: 350px) {
    .part-campaign-banner p {
        font-size: 16px;
    }
}

@media screen and (max-width: 320px) {
    .part-campaign-banner {
        gap: 20px;
    }

    .part-campaign-banner h2 {
        font-size: 1.4em;
        line-height: 1.15rem;
    }

    .part-campaign-banner h2 > span {
        font-size: 1.20rem;
    }

    .part-campaign-banner p {
        font-size: 14px;
    }

    .block-campaign-teaser span {
        display: none;
    }
}

/*------------------------------------------------------
| header                                               |
| > campaign type                                      |
------------------------------------------------------*/
header .part-campaign-type {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 5px 10px 5px;
}

.part-campaign-type.isvisible {
    display: flex;
}

.part-campaign-type a {
    display: flex;
    justify-content: center;
    flex-direction: column;

    font-family: "Poppins";
    font-size: 1rem;
    text-decoration: none;
    outline: none;
}

.part-campaign-type a:nth-child(1) {
    color: var(--color-thirteenth);
}

.part-campaign-type a:nth-child(2) {
    color: var(--color-fifth);
}

.part-campaign-type a:nth-child(3) {
    color: var(--color-sixth);
}

.part-campaign-type a > span {
    font-size: .6rem;
}

@media (orientation: landscape) {
    header .part-campaign-type {
        justify-content: space-around;
        padding-left: 0;
        padding-right: 0;
    }
}

/*------------------------------------------------------
| Top navigation                                       |
------------------------------------------------------*/
#top-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;

    position: relative;
}

#top-nav nav {
    font-family: "Poppins";
    background-color: var(--bg-color-secondary);
    border-radius: 5px;
    padding: 20px 10px;
    user-select: none;

    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;

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

    -webkit-overflow-scrolling: touch;
}

#top-nav nav::-webkit-scrollbar {
    display: none;
}

#top-nav > div.arrowHead {
    position: absolute;
    top: 16px;
    right: 5px;

    width: 20px;
    height: 20px;

    border-radius: 10px;
    background-color: var(--bg-color-third);
    pointer-events: none;

    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

div.arrowHead:after {
    content: '';

    border: solid var(--color-fourtheenth);
    border-width: 0 2px 2px 0;

    display: inline-block;
    padding: 3px;

    transform: rotate(-45deg);
    position: absolute;
    top: 6px;
    right: 8px;
}

div.arrowHead.isVisible {
    opacity: 1 !important;
}

/* Nav primary + secondary: common styles */
#top-nav nav > ul {
    display: flex;
    gap: 5px;
}

#top-nav nav > ul li {
    font-size: 12px;
}

#top-nav nav > ul li a {
    padding: 5px 10px;
    text-decoration: none;
}

/* Primary NAV */
nav#primary {
    background-color: var(--bg-color-secondary);
}

nav#primary > ul li a {
    color: var(--color-primary);
}

nav#primary > ul li.isSelected a {
    color: var(--color-primary);

    border: 1px solid white;
    border-radius: 25px;
}

/* Secondary NAV */
nav#secondary {
    background-color: var(--bg-color-sixth);
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

nav#secondary > ul {
    display: none;
}

nav#secondary > ul.isVisible {
    display: flex;
}

nav#secondary > ul li a {
    color: var(--color-secondary);
}

nav#secondary > ul li.isSelected a {
    border-radius: 5px;
    background-color: var(--bg-color-secondary);
    color: var(--color-primary);
}

.hasArrowHead::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(to right,rgba(255, 255, 255, 0) 80%, rgba(0, 62, 200, 1));
    height: 52px;
}

/*------------------------------------------------------
| GRID                                                 |
------------------------------------------------------*/
#grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

/*------------------------------------------------------
| GRID                                                 |
| - card item                                          |
------------------------------------------------------*/
.card {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border-radius: 10px;
    padding: 20px 10px;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card * {
    font-family: "Open sans";
}

.card > a {
    text-decoration: none;
    transition: all .2s linear;
}

.card figure {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.card figure > img {
    aspect-ratio: 1;

    max-width: 220px;
    width: 100%;
    height: auto;
}

.card figcaption {
    align-self: flex-start;
}

.card .bottom-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card .cta-button {
    background-color: var(--bg-color-button-primary);
    color: var(--color-primary);
    border: none;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

/*------------------------------------------------------
| GRID                                                 |
| - category card                                      |
------------------------------------------------------*/
.card.category-card {
    gap: 20px;
    align-items: center;
}

.card.category-card figcaption {
    align-self: center;
}

.category-card > a {
    color: var(--color-seventh);
    font-size: 13px;
    font-weight: 500;
}

.category-card .cta-button.discount-button {
    border-radius: 25px;
    padding: 10px 25px;
    font-size: 13px;
    text-transform: uppercase;
}

/*------------------------------------------------------
| GRID                                                 |
| - product card                                       |
------------------------------------------------------*/
.product-card > a {
    color: var(--color-secondary);
    font-size: .8rem;
    font-weight: 600;
}

.product-card > a:hover {
    color: var(--color-third);
}

.product-card .flyer-area, 
.product-card .fav-area {
    position: absolute;
    top: 20px;
}

.product-card .flyer-area {
    left: 10px;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.flyer-area span {
    padding: 5px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.flyer-area span.text-discount {
    background-color: var(--bg-color-product-discount);
    max-width: 40px;
    font-size: 0.80rem;
}

.flyer-area span.text-discount,
.flyer-area span.text-super-price, 
.flyer-area span.text-crazy-week {
    text-align: center;
    border-radius: 4px;
}

.flyer-area span.text-super-price {
    background-color: var(--bg-color-product-super-price);
    font-size: 0.80rem;
}

.flyer-area span.text-crazy-week {
    background-color: var(--bg-color-product-text-crazy-week);
    font-family: "Poppins";
    font-weight: 700;
    font-size: .6rem;
    padding: 3px;
    max-width: 68px;
    margin-left: 0;
}

.product-card .fav-area {
    right: 10px;
    width: 20px;
    height: 18px;
    background: url("../assets/svg/wishlist.svg") no-repeat center center;
}

.product-card .fav-area.active {
    background-image: url("../assets/svg/whishlist-active.svg");
}

.product-card .fav-area a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.product-card .rating-area {
    display: flex;
    gap: 5px;
    align-items: center;

    margin: 15px 0;
    font-size: 0.70rem;
}

.rating-area [data-star] {
    text-align: left;
    font-style: normal;
    font-size: 1.2rem;
    display: inline-block;
    position: relative;
    unicode-bidi: bidi-override;
}

.rating-area [data-star]::before { 
    display: block;
    content: '\2605\2605\2605\2605\2605';
    color: var(--star-inactive);
}

.rating-area [data-star]::after {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    content: '\2605\2605\2605\2605\2605';
    width: 0;
    color: var(--star-active);
    overflow: hidden;
    height: 100%;
}

.rating-area [data-star^="0.1"]::after { width:2%; }
.rating-area [data-star^="0.2"]::after { width:4%; }
.rating-area [data-star^="0.3"]::after { width:6%; }
.rating-area [data-star^="0.4"]::after { width:8%; }
.rating-area [data-star^="0.5"]::after { width:10%; }
.rating-area [data-star^="0.6"]::after { width:12%; }
.rating-area [data-star^="0.7"]::after { width:14%; }
.rating-area [data-star^="0.8"]::after { width:16%; }
.rating-area [data-star^="0.9"]::after { width:18%; }
.rating-area [data-star^="1"]::after { width:20%; }
.rating-area [data-star^="1.1"]::after { width:22%; }
.rating-area [data-star^="1.2"]::after { width:24%; }
.rating-area [data-star^="1.3"]::after { width:26%; }
.rating-area [data-star^="1.4"]::after { width:28%; }
.rating-area [data-star^="1.5"]::after { width:30%; }
.rating-area [data-star^="1.6"]::after { width:32%; }
.rating-area [data-star^="1.7"]::after { width:34%; }
.rating-area [data-star^="1.8"]::after { width:36%; }
.rating-area [data-star^="1.9"]::after { width:38%; }
.rating-area [data-star^="2"]::after { width:40%; }
.rating-area [data-star^="2.1"]::after { width:42%; }
.rating-area [data-star^="2.2"]::after { width:44%; }
.rating-area [data-star^="2.3"]::after { width:46%; }
.rating-area [data-star^="2.4"]::after { width:48%; }
.rating-area [data-star^="2.5"]::after { width:50%; }
.rating-area [data-star^="2.6"]::after { width:52%; }
.rating-area [data-star^="2.7"]::after { width:54%; }
.rating-area [data-star^="2.8"]::after { width:56%; }
.rating-area [data-star^="2.9"]::after { width:58%; }
.rating-area [data-star^="3"]::after { width:60%; }
.rating-area [data-star^="3.1"]::after { width:62%; }
.rating-area [data-star^="3.2"]::after { width:64%; }
.rating-area [data-star^="3.3"]::after { width:66%; }
.rating-area [data-star^="3.4"]::after { width:68%; }
.rating-area [data-star^="3.5"]::after { width:70%; }
.rating-area [data-star^="3.6"]::after { width:72%; }
.rating-area [data-star^="3.7"]::after { width:74%; }
.rating-area [data-star^="3.8"]::after { width:76%; }
.rating-area [data-star^="3.9"]::after { width:78%; }
.rating-area [data-star^="4"]::after { width:80%; }
.rating-area [data-star^="4.1"]::after { width:82%; }
.rating-area [data-star^="4.2"]::after { width:84%; }
.rating-area [data-star^="4.3"]::after { width:86%; }
.rating-area [data-star^="4.4"]::after { width:88%; }
.rating-area [data-star^="4.5"]::after { width:90%; }
.rating-area [data-star^="4.6"]::after { width:92%; }
.rating-area [data-star^="4.7"]::after { width:94%; }
.rating-area [data-star^="4.8"]::after { width:96%; }
.rating-area [data-star^="4.9"]::after { width:98%; }
.rating-area [data-star^="5"]::after { width:100%; }

.rating-area > span {
    color: var(--color-seventh);
}

.rating-area svg {
    margin: 0 2px;
}

.product-card .bottom-area > div {
    line-height: 15px;
}

.product-card .price {
    font-size: 10px;
    color: var(--color-price-old);
}

.product-card .price-new {
    font-size: 14px;
    color: var(--color-price-new);
    font-weight: 700;
}

.product-card .cta-button.add-to-cart {
    border-radius: 5px;
    padding: 4px 35px 4px 14px;
    font-size: 11px;
    position: relative;
    height: 32px;
}

.product-card .cta-button.add-to-cart::after {
    content: '';
    display: block;
    background: url("../assets/img/product/cart.png") no-repeat center 4px;
    background-size: 20px 20px;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 2px;
    right: 2px;
    border-radius: 5px;
}


.product-card .cta-button.add-to-cart svg.cart {
    margin-left: 5px;
}

@media screen and (orientation: landscape) {
    #grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*------------------------------------------------------
| GRID                                                 |
| - separator                                          |
------------------------------------------------------*/
#grid .grid-separator {
    grid-column: 1 / span 2;
}

.grid-separator > .banner-title {
    font-family: "Open sans";
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 15px;
    margin-top: 5px;
}

.grid-separator.image-banner > img {
    width: 100%;
    border-radius: 10px;
}

.grid-separator.text-banner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 25px 10px;

    background-color: var(--bg-color-sixth);
    border-radius: 10px;
}

.grid-separator.text-banner > span {
    font-family: "Open sans";
    font-size: 14px;
    color: var(--color-secondary);
}

.text-banner .text-crazy-week {
    color: var(--color-sixth);
    margin-left: 0;
    margin-top: 2px;
}

@media screen and (orientation: landscape) {
    #grid .grid-separator {
        grid-column: 1 / span 3;
    }
}

/*------------------------------------------------------
| Footer                                               |
------------------------------------------------------*/
footer {
    padding: 10px 0;
    margin-bottom: 80px; /* for the fixed menu at the bottom */
}

/*------------------------------------------------------
| Footer                                               |
| - Bottom navigation                                  |
------------------------------------------------------*/
footer #bottom-nav {
    display: flex;
    flex-direction: column;
}

footer #bottom-nav > p {
    padding: 18px;

    border-bottom: 1px solid var(--color-nineth);
    text-align: left;
    text-decoration: none;

    font-size: 15px;
    font-family: "Open sans";
    font-weight: 500;
    color: var(--color-secondary);

    transition: 0.4s;
    outline: none;
    
    position: relative;
}

#bottom-nav > p:after {
    content: ' ';

    border: solid var(--color-nineth);
    border-width: 0 2px 2px 0;

    display: inline-block;
    padding: 6px;

    transform: rotate(45deg);
    position: absolute;
    top: 15px;
    right: 15px;

    transition: transform .3s ease-in-out;
}

#bottom-nav > p.active {
    border-bottom: none;
}

#bottom-nav > p.active:after {
    transform: rotate(-45deg);
    border-width: 2px 2px 0 0;
    top: 25px;
}

#bottom-nav > p.active + .nav-content {
    margin: 10px 0 18px 0;
}

.nav-content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;

    display: flex;
}

.nav-content > ul:nth-child(1) {
    margin: 0 60px 0 20px;
}

.nav-content > ul:nth-child(2) {
    max-width: 150px;
}

.nav-content > ul {
    margin-left: 20px;
}

.nav-content > ul li {
    margin: 0 0 20px 0;
}

.nav-content > ul li a {
    text-decoration: none;
    color: var(--color-tenth);
    font-family: "Open sans";
    font-size: 14px;
}

.nav-content > ul li a.link-highlight {
    color: var(--color-third);
}

@media screen and (orientation: landscape) {
    .nav-content > ul:nth-child(1) {
        margin-right: 150px;
    }

    .nav-content > ul:nth-child(2) {
        margin-left: 0;
    }
}

/*------------------------------------------------------
| Footer                                               |
| - Payment area                                       |
------------------------------------------------------*/
#payment-type {
    text-align: center;
    margin: 50px 0;
}

#payment-type > img {
    width: 47px;
    height: 28px;
    margin: 0 15px;
}

/*------------------------------------------------------
| Footer                                               |
| - Working hours                                      |
------------------------------------------------------*/
#working-hours {
    text-align: center;
    margin-bottom: 30px;
}

#working-hours > p {
    font-family: "Open sans";
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

#working-hours > p:last-child {
    margin-bottom: 0;
}

#working-hours a {
    text-decoration: none;
    color: inherit;
}

/*------------------------------------------------------
| Footer                                               |
| - Social icons                                       |
------------------------------------------------------*/
#social-icons {
    text-align: center;
    margin-bottom: 30px;
}

#social-icons > a {
    text-decoration: none;
    margin-right: 30px;
}

#social-icons > a:last-child {
    margin-right: 0;
}

/*------------------------------------------------------
| Footer                                               |
| - Copyright                                          |
------------------------------------------------------*/
#copyright {
    text-align: center;
    font-family: "Open sans";
    color: var(--color-copyright);
    font-size: 10px;
}

#copyright .anpc-area-text {
    margin-bottom: 10px;
}

.anpc-area-text > a {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
}

#copyright .copyright-area-text > p:last-child {
    margin: 0 50px 30px 50px;
}

#copyright .anpc-area-logo > a {
    margin-right: 20px;
}

#copyright .anpc-area-logo > a:last-child {
    margin-right: 0;
}

.anpc-area-logo > a img {
    width: 140px;
    height: 40px;
}

/*------------------------------------------------------
| Footer                                               |
| - Fixed area bottom                                  |
------------------------------------------------------*/
.area-fixed-bottom {
    position: fixed;
    bottom: 6px;
    width: calc(100% - 20px);
    margin: 0 10px;
}

.area-fixed-bottom.isStacked {
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    z-index: 10;
}

.area-fixed-bottom.isFixed {
    z-index: 20;
}

/*------------------------------------------------------
| Footer                                               |
| - Fixed bottom menu (placeholder only)               |
------------------------------------------------------*/
.app-menu {
    width: 100%;
    height: 65px;
    border-radius: 10px;
    background-color: #00C1E8;
    color: white;

    text-align: center;
    line-height: 65px;
}

/*------------------------------------------------------
| Footer                                               |
| - Popovers                                           |
------------------------------------------------------*/
.popover {
    width: 100%;
    box-sizing: border-box;

    border-radius: 10px;
    border: 1px solid var(--color-nineth);

    background-color: var(--color-primary);    
    font-family: "Open sans";
}

.popover-close {
    display: block;
    float: right; 
    padding: 10px 15px;
    font-size: 20px;
    color: var(--color-nineth);
}

.area-fixed-bottom.isStacked .popover-close {
    margin-top: -20px;
}

.area-fixed-bottom.isFixed .popover-close {
    margin-top: 0;
}

/*------------------------------------------------------
| Footer                                               |
| - Popover: stacked with others                       |
| - example: with the .app-menu                        |
------------------------------------------------------*/
.area-fixed-bottom.isStacked .popover {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    padding: 20px 0 20px 20px;
}

.area-fixed-bottom.isStacked .popover > img {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
}

/*------------------------------------------------------
| Footer                                               |
| - Popover: fixed (on its own)                        |
| - Example: on top of the other ones                  |
------------------------------------------------------*/
.area-fixed-bottom.isFixed .popover {
    padding: 20px 10px 10px;
}

.area-fixed-bottom.isFixed .popover > .title {
    margin-bottom: 15px;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.area-fixed-bottom.isFixed .popover .cta-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 5px;
    margin-bottom: 5px;
}

@media screen and (max-width: 392px) {
    .area-fixed-bottom.isFixed .popover > .title {
        font-size: 14px;
    }
}

@media screen and (max-width: 350px) {
    .area-fixed-bottom.isFixed .popover .cta-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }
}

@media screen and (max-width: 320px) {
    .area-fixed-bottom.isFixed .popover .cta-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
}

.popover .cta-grid > a {
    text-decoration: none;
    color: var(--color-eighth);
}

.popover .cta-grid figure {
    text-align: center;
}

.popover .cta-grid figcaption {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

.popover .cta-grid img {
    object-fit: cover;
    aspect-ratio: 4/3;
    width: 100%;
    border-radius: 8px;
}

@media screen and (orientation: landscape) {
    .area-fixed-bottom {
        width: calc(100% - 50px);
        margin: 0 25px;
    }

    .popover .cta-grid img {
        aspect-ratio: 16/9;
        max-block-size: 100px;
    }
}

/*------------------------------------------------------
| SVGs                                                 |
------------------------------------------------------*/
svg.cart {
    fill: var(--color-secondary);
    width: 20px;
    height: 20px;
}

svg.star {
    width: 16px;
    height: 16px;
    fill: var(--star-inactive);
}

svg.star.active {
    fill: var(--star-active);
}

svg.facebook, 
svg.twitter, 
svg.youtube {
    width: 35px;
    height: 35px;
}

/*------------------------------------------------------
| Helpers                                              |
------------------------------------------------------*/
.isHidden {
    display: none;
}