/* =========================================================
   TCG — PAGES ON PHONES AND TABLETS
   For pages whose own styles were written for desktop only
   and fall back to a widget's bare markup below 1025px.
   Loaded together with the mobile header (includes/mobile-nav.php).
========================================================= */

@media (max-width: 1024px) {

    /* -----------------------------------------------------
       HOME — "JUST DROPPED"
       On desktop this row is five cards across (styles in
       the main plugin file). The same cards here, three
       across on a tablet and two on a phone, instead of the
       product widget's plain bulleted list.
    ----------------------------------------------------- */

    /* the cards start under the section's heading, not a column gap further in */
    body.home .elementor-element-bb05175 .elementor-widget-wrap {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.home .elementor-element-bb05175 ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    body.home .elementor-element-bb05175 ul.products::before,
    body.home .elementor-element-bb05175 ul.products::after {
        content: none !important;
        display: none !important;
    }

    body.home .elementor-element-bb05175 ul.products li.product {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 14px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .58) !important;
        overflow: hidden !important;
        list-style: none !important;
    }

    body.home .elementor-element-bb05175 ul.products li.product::marker {
        content: "" !important;
        font-size: 0 !important;
    }

    body.home .elementor-element-bb05175 ul.products li.product img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5;
        margin: 0 !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, .72) !important;
        box-sizing: border-box !important;
        object-fit: contain !important;
    }

    /* the second picture is for a mouse hovering; a finger has none */
    body.home .elementor-element-bb05175 ul.products li.product img.premium-woo-product__on_hover {
        display: none !important;
    }

    body.home .elementor-element-bb05175 ul.products li.product .premium-woo-products-details-wrap {
        padding: 12px 12px 0 !important;
    }

    body.home .elementor-element-bb05175 ul.products li.product h2,
    body.home .elementor-element-bb05175 ul.products li.product .woocommerce-loop-product__title {
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: #111111 !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    body.home .elementor-element-bb05175 ul.products li.product .price {
        display: block !important;
        margin: 0 !important;
        color: #111111 !important;
        font-size: 12px !important;
    }
}

@media (max-width: 767px) {

    body.home .elementor-element-bb05175 ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   PHONES AND TABLETS — SIZES THAT A HAND AND AN EYE CAN USE
   The pages below are still dressed by style blocks written
   for desktop, several of them inside (min-width: 1025px),
   so at this width parts of them fell back to the theme's
   bare markup: labels of 7 to 9 pixels, links 17 pixels
   tall, section heads in the theme's font, the category
   pictures stacked a screen each. One gutter (16px), one
   kind of section head, no label under 10px, and nothing
   to tap that is smaller than a fingertip.
   ":not(#tcg)" in every selector is there for its weight
   alone: it outranks the page-specific blocks printed
   later in each page ("body.page-id-123 .thing").
========================================================= */

@media (max-width: 1024px) {

    /* -----------------------------------------------------
       SITE CLOSING — every page (several pages print their
       own copy inside a wrapper of their own, so the rules
       go by the inner class names)
    ----------------------------------------------------- */

    html body:not(#tcg) :has(> .tcg-closing-top) {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    html body:not(#tcg) .tcg-closing-label {
        margin-bottom: 20px !important;
        font-size: 10.5px !important;
    }

    html body:not(#tcg) .tcg-closing-newsletter p {
        margin: 26px 0 26px !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    html body:not(#tcg) .tcg-closing-form {
        align-items: center !important;
        padding-bottom: 4px !important;
    }

    /* 16px keeps a phone from zooming into the field */
    html body:not(#tcg) .tcg-closing-form input {
        min-width: 0 !important;
        padding: 12px 0 !important;
        font-size: 16px !important;
        letter-spacing: .02em !important;
    }

    html body:not(#tcg) .tcg-closing-form input::placeholder {
        font-size: 12px !important;
        letter-spacing: .08em !important;
    }

    html body:not(#tcg) .tcg-closing-form button {
        min-height: 44px !important;
        padding-left: 18px !important;
        font-size: 12px !important;
    }

    html body:not(#tcg) .tcg-closing-column-title {
        margin-bottom: 8px !important;
        font-size: 10.5px !important;
    }

    html body:not(#tcg) .tcg-closing-column a {
        margin: 0 !important;
        padding: 11px 0 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
    }

    html body:not(#tcg) .tcg-footer-legal,
    html body:not(#tcg) .tcg-footer-legal span {
        font-size: 10px !important;
        line-height: 1.45 !important;
    }


    /* -----------------------------------------------------
       HOME — gutter and section heads
    ----------------------------------------------------- */

    html body.home:not(#tcg) .elementor-element-bb05175 {
        margin-bottom: 0 !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    html body.home:not(#tcg) .tcg-just-dropped-head,
    html body.home:not(#tcg) .tcg-category-carousel__head,
    html body.home:not(#tcg) .tcg-stories-head,
    html body.home:not(#tcg) .tcg-rotation-editorial__head {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    html body.home:not(#tcg) .elementor-element-bb05175 .tcg-just-dropped-head {
        padding-top: 30px !important;
    }

    html body.home:not(#tcg) .tcg-just-dropped-title,
    html body.home:not(#tcg) .tcg-category-carousel__head h2,
    html body.home:not(#tcg) .tcg-stories-head h2,
    html body.home:not(#tcg) .tcg-rotation-editorial__head h2 {
        margin: 0 !important;
        padding: 0 !important;
        color: #111111 !important;
        font-family: "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: .92 !important;
        letter-spacing: -.045em !important;
        text-transform: uppercase !important;
    }

    /* "View all": the size of a label, the tap area of a button */
    html body.home:not(#tcg) .tcg-just-dropped-viewall,
    html body.home:not(#tcg) .tcg-stories-viewall,
    html body.home:not(#tcg) .tcg-rotation-editorial__head a {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 44px !important;
        margin: 0 0 -15px !important;
        padding: 0 !important;
        color: #111111 !important;
        font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    html body.home:not(#tcg) .tcg-just-dropped-viewall span,
    html body.home:not(#tcg) .tcg-stories-viewall span,
    html body.home:not(#tcg) .tcg-rotation-editorial__head a span {
        font-size: 13px !important;
        line-height: 1 !important;
    }


    /* -----------------------------------------------------
       HOME — "SHOP BY CATEGORY"
       A row to swipe through, as on desktop, instead of six
       pictures stacked a screen each.
    ----------------------------------------------------- */

    html body.home:not(#tcg) .tcg-category-carousel {
        margin: 56px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body.home:not(#tcg) .tcg-category-carousel__controls {
        display: none !important;
    }

    html body.home:not(#tcg) .tcg-category-carousel__viewport {
        width: auto !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 16px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    html body.home:not(#tcg) .tcg-category-carousel__viewport::-webkit-scrollbar {
        display: none !important;
    }

    html body.home:not(#tcg) .tcg-category-carousel__track {
        display: flex !important;
        gap: 10px !important;
        width: max-content !important;
        padding-right: 16px !important;
    }

    html body.home:not(#tcg) .tcg-category-card {
        position: relative !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 72vw !important;
        max-width: 340px !important;
        aspect-ratio: 4 / 5;
        border-radius: 10px !important;
        background: #e9e5df !important;
        overflow: hidden !important;
        scroll-snap-align: start !important;
        text-decoration: none !important;
    }

    html body.home:not(#tcg) .tcg-category-card img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    html body.home:not(#tcg) .tcg-category-card::after {
        content: "";
        position: absolute;
        inset: 55% 0 0;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .46));
        pointer-events: none;
    }

    html body.home:not(#tcg) .tcg-category-card__label {
        position: absolute !important;
        right: 16px !important;
        bottom: 15px !important;
        left: 16px !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        color: #ffffff !important;
        font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }


    /* -----------------------------------------------------
       HOME — "STAY IN ROTATION"
       The three desktop rows flow as one grid of nine
       pieces: on a phone the first leads at full width and
       eight follow two by two, on a tablet three by three,
       so none is left alone on a row.
    ----------------------------------------------------- */

    html body.home:not(#tcg) .tcg-rotation-editorial {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: auto !important;
        margin: 56px -16px 0 !important;
        padding: 36px 16px 40px !important;
        border-radius: 0 !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial__head {
        grid-column: 1 / -1 !important;
        margin-bottom: 6px !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-row {
        display: contents !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-editorial-image {
        display: none !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-product {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-product__info {
        padding: 12px 12px 14px !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-product__name {
        margin: 0 0 4px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-product__price {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }


    /* -----------------------------------------------------
       HOME — STORIES
    ----------------------------------------------------- */

    html body.home:not(#tcg) .tcg-home-stories {
        margin: 56px 0 0 !important;
        padding: 0 16px 56px !important;
    }

    html body.home:not(#tcg) .tcg-home-stories .tcg-stories-head > div {
        min-width: 0 !important;
    }

    html body.home:not(#tcg) .tcg-home-stories .tcg-stories-kicker {
        display: block !important;
        margin: 0 0 9px !important;
        color: #6f6d66 !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    html body.home:not(#tcg) .tcg-home-stories .tcg-stories-layout,
    html body.home:not(#tcg) .tcg-home-stories .tcg-stories-side {
        gap: 12px !important;
    }

    html body.home:not(#tcg) .tcg-home-stories .tcg-story-meta,
    html body.home:not(#tcg) .tcg-home-stories .tcg-story--hero .tcg-story-meta span::after {
        font-size: 10px !important;
        font-weight: 400 !important;
    }

    html body.home:not(#tcg) .tcg-home-stories .tcg-story-read {
        margin-top: 18px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
    }


    /* -----------------------------------------------------
       SHOP (landing) — labels
    ----------------------------------------------------- */

    html body:not(#tcg) .tcg-shop-v2__hero-meta span,
    html body:not(#tcg) .tcg-shop-v2__main-cats > a > span,
    html body:not(#tcg) .tcg-shop-v2__main-cats small,
    html body:not(#tcg) .tcg-shop-v2__cat-top span,
    html body:not(#tcg) .tcg-shop-v2__cat-foot span {
        font-size: 10px !important;
    }

    html body:not(#tcg) .tcg-shop-v2__categories-head span {
        font-size: 10.5px !important;
    }

    html body:not(#tcg) .tcg-shop-v2__explore {
        font-size: 11px !important;
    }


    /* -----------------------------------------------------
       BASEMENT — labels and the closing paragraph
    ----------------------------------------------------- */

    html body:not(#tcg) .tcg-basement-hero__label,
    html body:not(#tcg) .tcg-basement-about__label,
    html body:not(#tcg) .tcg-basement-folder__copy p {
        font-size: 10.5px !important;
    }

    html body:not(#tcg) .tcg-basement-hero__content p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    html body:not(#tcg) .tcg-basement-folder__index {
        font-size: 10px !important;
    }

    html body:not(#tcg) .tcg-basement-archive-options a {
        min-height: 44px !important;
        font-size: 11px !important;
    }

    html body:not(#tcg) .tcg-basement-about p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }


    /* -----------------------------------------------------
       STORIES / FIELD / BEHIND DESIGN — labels
    ----------------------------------------------------- */

    html body:not(#tcg) .tcg-story-card__date,
    html body:not(#tcg) .tcg-stories-end span,
    html body:not(#tcg) .tcg-stories-panel-label small {
        font-size: 10px !important;
    }

    html body:not(#tcg) .tcg-stories-panel-label span {
        font-size: 10.5px !important;
    }

    html body:not(#tcg) .tcg-story-card__arrow {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* a report's card: picture, then its line of details, its
       title and its link, one under the other (the title was
       laid over the details and the link) */
    html body:not(#tcg) .tcg-event-card {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    html body:not(#tcg) .tcg-event-card__meta {
        margin: 14px 0 0 !important;
        padding: 0 2px !important;
    }

    html body:not(#tcg) .tcg-event-card h3 {
        position: static !important;
        margin: 12px 2px 0 !important;
        padding: 0 !important;
        font-size: 28px !important;
        line-height: .95 !important;
        transform: none !important;
    }

    html body:not(#tcg) .tcg-event-card__link {
        align-self: flex-start !important;
        margin: 14px 2px 0 !important;
    }

    html body:not(#tcg) .tcg-event-card__meta span {
        font-size: 10px !important;
    }

    html body:not(#tcg) .tcg-event-card__link,
    html body:not(#tcg) .tcg-events-reports__head span,
    html body:not(#tcg) .tcg-events-hero__copy span {
        font-size: 10.5px !important;
    }

    html body:not(#tcg) .tcg-events-hero__copy p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    html body:not(#tcg) .tcg-behind-panel__number,
    html body:not(#tcg) .tcg-behind-panel__label,
    html body:not(#tcg) .tcg-behind-panel__info p {
        font-size: 10px !important;
    }

    html body:not(#tcg) .tcg-behind-hero__meta span,
    html body:not(#tcg) .tcg-behind-lab__head span,
    html body:not(#tcg) .tcg-behind-hero__kicker {
        font-size: 10.5px !important;
    }

    html body:not(#tcg) .tcg-behind-hero__content p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 767px) {

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-row--five > .tcg-rotation-product:first-child {
        grid-column: 1 / -1 !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-row--five > .tcg-rotation-product:first-child .tcg-rotation-product__image {
        height: auto !important;
        aspect-ratio: 16 / 11 !important;
    }

    html body.home:not(#tcg) .tcg-rotation-editorial .tcg-rotation-row--five > .tcg-rotation-product:first-child .tcg-rotation-product__image img {
        object-fit: contain !important;
    }
}

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

    html body.home:not(#tcg) .tcg-rotation-editorial {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* ten new pieces: five across, as on desktop */
    html body.home:not(#tcg) .elementor-element-bb05175 ul.products {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    html body.home:not(#tcg) .tcg-category-card {
        width: 38vw !important;
    }
}


/* ---------------------------------------------------------
   THE WORDMARK THAT CLOSES THE FOOTER
   Its box was two pixels shorter than the letters and hid
   what did not fit, so their lower edge was shaved off.
--------------------------------------------------------- */

@media (max-width: 1024px) {

    html body:not(#tcg) .tcg-closing-brand {
        height: auto !important;
        overflow: visible !important;
    }

    html body:not(#tcg) .tcg-closing-brand .tcg-footer-wordmark {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
}