/* Tablet and below */
@media (max-width: 1024px) {
    .nav-toggle {
        display: inline-flex;
    }
    .nav-list {
        position: absolute;
        right: var(--gutter);
        top: 80px;
        flex-direction: column;
        gap: 12px;
        background: #ffffffee;
        color: var(--ink);
        padding: 12px;
        border-radius: 12px;
        backdrop-filter: blur(6px);
        transform-origin: top right;
        transform: scale(0.98);
        opacity: 0;
        pointer-events: none;
    }
    html[dir="rtl"] .nav-list {
        right: auto;
        left: var(--gutter);
    }
    .nav-list a {
        color: var(--ink);
    }
    .nav-list.is-open {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }
    .nav-lang-mobile {
      display: block;
      padding-top: 8px;
      border-top: 1px solid rgba(0,0,0,0.08);
      margin-top: 6px;
    }
    nav.center-nav {
      margin: 0;
      /* width: 100%; */
      /* text-align: right; */
    }
    .header-row {
      justify-content: space-between;
    }
    .right-rail {
      display: none;
    }
    /* .right-rail .lang-btn {
        display: none;
    }
    .right-rail .fa-instagram {
      display: none;
    } */
    .about {
        flex-direction: column;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-right {
        grid-template-columns: 1fr 1fr;
    }
    .hero-shell {
        padding-bottom: 36px;
    }

    .product-card {
        flex: 0 0 calc((100% - 1 * var(--gap)) / 2);
    } /* 2 columns on tablet */

    /* NEWS: keep visible so cards are not clipped */
    .carousel[data-carousel="news"] {
        overflow: visible;
        overflow-x: clip;
    }

    /* ABOUT MODAL TABS: horizontal scroll on tablet/mobile */
    .about-modal-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }
    .about-tab {
        min-width: 120px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .about-modal-dialog {
        max-width: 99vw;
        width: 99vw;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .header-row {
        min-height: 68px;
    }
    .hero-logo-middle {
        width: 85%;
    }    
    .right-rail {
        gap: 12px;
    }
    .section {
        padding: 3.5rem 0;
    }
    #news.section {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .product-card {
        flex: 0 0 100%;
    }
    .media-slot {
        height: 280px;
    }
    .footer-right {
        grid-template-columns: 1fr;
    }

    /* news card spans viewport width nicely */
    .card.news {
        /* width: 92vw; */
        width: 65vw;
    }

    /* ABOUT MODAL TABS: horizontal scroll on mobile */
    .about-modal-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }
    .about-tab {
        min-width: 120px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .about-modal-dialog {
        max-width: 100vw;
        width: 100vw;
    }
}

/* Widescreen */
@media (min-width: 1440px) {
    .container {
        width: min(100% - 2 * var(--gutter), var(--container));
    }
    /* ABOUT MODAL: wider on desktop */
    .about-modal-dialog {
        max-width: 900px;
        width: 900px;
    }
    .about-modal-tabs {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

/* Extra small phones */
@media (max-width: 400px) {
    .product-card {
        flex: 0 0 100%;
    }
}