/* =========================================================
   MOBILE FIXES
   Iba globálne mobilné opravy.
   Layout jednotlivých sekcií riešime v index.css.
   ========================================================= */


/* Zabráni horizontálnemu pretekaniu stránky */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}


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

@media (max-width: 980px) {

    .hero__inner {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 640px) {

    /* Na mobile nepotrebujeme sekundárne hero tlačidlo */
    .hero__actions .button--outline {
        display: none;
    }

}


/* =========================================================
   VEĽMI MALÉ MOBILY
   ========================================================= */

@media (max-width: 350px) {

    .brand img {
        width: 142px;
    }

    .product-search input {
        width: 132px;
    }

}