/* Storefront layout adjustments, loaded on every page after custom.min.css
   (layouts/front-end/app.blade.php).

   Page width: the theme stops the page at 1290px from 1200px up (style.css), so
   on a 1920px screen a third of the width was empty margin. Wide screens now
   get a wider page; anything under 1440px is unchanged. */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

@media (min-width: 1680px) {
    .container {
        max-width: 1560px;
    }
}

/* The top section on the wider page: the main slider and the category menu
   beside it both stood 386px (style.css). The owner wants the pair a little
   taller, together; narrower screens keep 386px. */
@media (min-width: 1440px) {
    .__top-slider-images .__slide-img {
        height: 460px;
        max-height: none; /* style.css caps .__slide-img at 420px from 1280px */
    }

    .category-menu-wrap .category-menu {
        max-height: 460px;
    }
}

/* WhatsApp button: 42px was easy to miss at the screen's corner. */
.floating-btn-grp .wa-messenger-svg-whatsapp {
    width: 56px;
    height: 56px;
}

@media (max-width: 767.98px) {
    .floating-btn-grp .wa-messenger-svg-whatsapp {
        width: 50px;
        height: 50px;
    }
}

/* The discount badge on product cards in the logo's gold (#E2B54E, the same
   gold the app uses), with the logo's navy for the text: white on this gold
   reads at about 2:1, navy at about 7:1. */
.for-discount-value {
    background: #E2B54E;
    color: #1E2B4F;
}