/* Shop listing and product page. Desktop rules live at 1024px and up.
   Phone layout stays one column under 480px. */

@media (min-width: 1024px) {
    body.shop-page .shop-sale-banner,
    body.shop-page .shop-member-banner,
    body.shop-page main.shop-store,
    body.shop-page main.shop-pdp {
        width: min(1180px, 100%);
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    body.shop-page main.shop-store,
    body.shop-page main.shop-pdp {
        padding: 4.75rem 2rem 5rem;
    }

    body.shop-page .shop-sale-banner,
    body.shop-page .shop-member-banner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    body.shop-page main.shop-store .shop-top,
    body.shop-page main.shop-store .shop-grid-wrap,
    body.shop-page main.shop-store .shop-hero-inner,
    body.shop-page main.shop-store .shop-filters,
    body.shop-page main.shop-store .shop-toolbar,
    body.shop-page main.shop-store .shop-cat-row,
    body.shop-page main.shop-store .shop-product-grid,
    body.shop-page main.shop-pdp .shop-pdp-grid,
    body.shop-page main.shop-pdp .shop-related,
    body.shop-page main.shop-pdp .shop-related .shop-product-grid {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    body.shop-page main.shop-store .shop-top,
    body.shop-page main.shop-store .shop-grid-wrap {
        padding: 0;
    }

    body.shop-page main.shop-store .shop-hero-inner {
        text-align: left;
    }

    body.shop-page main.shop-store .shop-hero-inner h1 {
        max-width: none;
        margin: 0 0 0.65rem;
        font-size: clamp(3.5rem, 4.8vw, 5.6rem);
        color: #f7fbfc;
        letter-spacing: -0.05em;
        line-height: 0.92;
    }

    body.shop-page main.shop-store .shop-product-grid,
    body.shop-page main.shop-pdp .shop-related .shop-product-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.4rem;
        align-items: stretch;
    }

    body.shop-page main.shop-store .shop-group-heading {
        grid-column: 1 / -1;
        margin: 0.25rem 0 0;
    }

    body.shop-page main.shop-store .shop-product-grid > .shop-card,
    body.shop-page main.shop-pdp .shop-related .shop-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 0;
        background: #0b3142;
        border: 3px solid #e8fffb;
        border-radius: 22px;
        box-shadow: 0 0 0 1px rgba(43, 212, 200, 0.35), 0 22px 50px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        transition:
            transform 640ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 640ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 640ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.shop-page main.shop-store .shop-card::after,
    body.shop-page main.shop-pdp .shop-card::after {
        content: none;
        animation: none;
        display: none;
    }

    body.shop-page main.shop-store .shop-card-media,
    body.shop-page main.shop-pdp .shop-card-media {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4 / 3;
        height: auto;
        background: #f4f7f5;
        overflow: hidden;
        position: relative;
        padding: 0;
        box-sizing: border-box;
    }

    body.shop-page main.shop-store .shop-card-media img,
    body.shop-page main.shop-pdp .shop-card-media img {
        position: absolute;
        left: 10%;
        top: 6%;
        width: 80%;
        height: 66%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.shop-page main.shop-pdp .shop-pdp-media img {
        width: 100%;
        height: auto;
        max-height: 520px;
        object-fit: contain;
        object-position: center;
    }

    body.shop-page main.shop-store .shop-filters,
    body.shop-page main.shop-store .shop-toolbar {
        background: transparent;
        background-image: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    body.shop-page main.shop-store .shop-cat-tile {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: rgba(4, 22, 31, 0.28);
        color: #f7fbfc;
        border: 2px solid rgba(232, 255, 251, 0.62);
        transition:
            color 640ms cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 640ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.shop-page main.shop-store .shop-cat-tile::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #2bd4c8;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
        z-index: -1;
    }

    body.shop-page main.shop-store .shop-cat-tile:hover,
    body.shop-page main.shop-store .shop-cat-tile:focus-visible {
        color: #04161f;
        background: transparent;
    }

    body.shop-page main.shop-store .shop-cat-tile:hover::before,
    body.shop-page main.shop-store .shop-cat-tile:focus-visible::before {
        transform: scaleX(1);
    }

    body.shop-page main.shop-store .shop-cat-tile.is-on {
        background: #2bd4c8;
        color: #04161f;
        border-color: #e8fffb;
        box-shadow: 0 0 0 2px rgba(159, 247, 240, 0.8), 0 0 26px rgba(43, 212, 200, 0.5);
    }

    body.shop-page main.shop-store .shop-cat-tile.is-on::before {
        transform: scaleX(1);
    }

    body.shop-page main.shop-store .shop-card-add,
    body.shop-page main.shop-store .shop-card-enquire,
    body.shop-page main.shop-pdp .shop-card-add,
    body.shop-page main.shop-pdp .shop-card-enquire,
    body.shop-page main.shop-pdp .shop-pdp-add,
    body.shop-page main.shop-pdp .shop-pdp-checkout,
    body.shop-page main.shop-pdp .shop-postage-row .btn,
    body.shop-page main.shop-pdp .shop-qty-btn {
        transition:
            transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 640ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.shop-page main.shop-store .shop-card-add:active,
    body.shop-page main.shop-store .shop-card-enquire:active,
    body.shop-page main.shop-pdp .shop-card-add:active,
    body.shop-page main.shop-pdp .shop-card-enquire:active,
    body.shop-page main.shop-pdp .shop-pdp-add:active,
    body.shop-page main.shop-pdp .shop-pdp-checkout:active,
    body.shop-page main.shop-pdp .shop-postage-row .btn:active,
    body.shop-page main.shop-pdp .shop-qty-btn:active {
        transform: scale(0.98);
    }

    body.shop-page main.shop-pdp .shop-pdp-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 2.4rem;
        align-items: start;
    }

    body.shop-page main.shop-pdp .shop-pdp-frame {
        margin: 0;
        background: #f4f7f5;
        border: 3px solid #e8fffb;
        border-radius: 22px;
        box-shadow: 0 0 0 1px rgba(43, 212, 200, 0.35), 0 22px 50px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        padding: 1.1rem;
        animation: shop-frame-settle 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    body.shop-page main.shop-pdp .shop-pdp-copy h1 {
        max-width: 100%;
        margin-top: 0.15rem;
        font-size: clamp(3.5rem, 4.8vw, 5.6rem);
        color: #f7fbfc;
        letter-spacing: -0.05em;
        line-height: 0.92;
        overflow-wrap: break-word;
    }

    body.shop-page main.shop-pdp .shop-pdp-price,
    body.shop-page main.shop-pdp .shop-ship-panel {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    body.shop-page main.shop-pdp .shop-postage-row {
        width: 100%;
    }

    body.shop-page main.shop-store .shop-card-body,
    body.shop-page main.shop-pdp .shop-card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.4rem;
        padding: 1.05rem 1.1rem 1.15rem;
    }

    body.shop-page main.shop-store .shop-card-body h2,
    body.shop-page main.shop-store .shop-card-body h2 a,
    body.shop-page main.shop-pdp .shop-card-body h2,
    body.shop-page main.shop-pdp .shop-card-body h2 a {
        color: #f7fbfc;
        font-size: 1.28rem;
        letter-spacing: -0.03em;
        line-height: 1.22;
    }

    body.shop-page main.shop-store .shop-card-actions,
    body.shop-page main.shop-pdp .shop-card-actions {
        margin-top: auto;
        padding-top: 0.35rem;
    }

    body.shop-page main.shop-store .shop-card-badge,
    body.shop-page main.shop-store .shop-card .shop-stock-badge,
    body.shop-page main.shop-pdp .shop-card-badge,
    body.shop-page main.shop-pdp .shop-card .shop-stock-badge {
        top: auto;
        bottom: 8px;
        z-index: 3;
    }

    body.shop-page main.shop-store .shop-bestseller-label,
    body.shop-page main.shop-store .shop-new-label,
    body.shop-page main.shop-pdp .shop-bestseller-label,
    body.shop-page main.shop-pdp .shop-new-label {
        position: static;
        display: inline-block;
        order: 0;
        margin: 0 0 0.15rem;
    }

    body.shop-page main.shop-store .shop-hot-sale-logo,
    body.shop-page main.shop-pdp .shop-hot-sale-logo {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        order: 0;
        max-width: 100%;
        margin: 0 0 0.15rem;
    }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    body.shop-page main.shop-store .shop-product-grid > .shop-card.is-inview:hover,
    body.shop-page main.shop-pdp .shop-related .shop-card.is-inview:hover {
        transform: translateY(-8px);
        border-color: #e8fffb;
        box-shadow: 0 0 0 1px rgba(43, 212, 200, 0.65), 0 28px 54px rgba(0, 0, 0, 0.42), 0 0 36px rgba(43, 212, 200, 0.55);
    }

    body.shop-page main.shop-store .shop-card:hover .shop-card-media img,
    body.shop-page main.shop-pdp .shop-card:hover .shop-card-media img,
    body.shop-page main.shop-store .shop-card:focus-within .shop-card-media img,
    body.shop-page main.shop-pdp .shop-card:focus-within .shop-card-media img {
        transform: scale(1.045);
    }

    body.shop-page main.shop-store .shop-card-add:hover,
    body.shop-page main.shop-store .shop-card-enquire:hover,
    body.shop-page main.shop-pdp .shop-card-add:hover,
    body.shop-page main.shop-pdp .shop-card-enquire:hover,
    body.shop-page main.shop-pdp .shop-pdp-add:hover,
    body.shop-page main.shop-pdp .shop-pdp-checkout:hover,
    body.shop-page main.shop-pdp .shop-postage-row .btn:hover,
    body.shop-page main.shop-pdp .shop-qty-btn:hover {
        transform: translateY(0);
        box-shadow: 0 0 22px rgba(43, 212, 200, 0.62);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    body.shop-page main.shop-store .shop-product-grid > .shop-card:not(.is-inview),
    body.shop-page main.shop-pdp .shop-related .shop-card:not(.is-inview),
    body.shop-page main.shop-pdp .shop-pdp-copy:not(.is-inview),
    body.shop-page main.shop-pdp .shop-related:not(.is-inview) {
        opacity: 0;
        transform: translateY(22px);
    }

    body.shop-page main.shop-store .shop-product-grid > .shop-card.is-inview,
    body.shop-page main.shop-pdp .shop-related .shop-card.is-inview,
    body.shop-page main.shop-pdp .shop-pdp-copy.is-inview,
    body.shop-page main.shop-pdp .shop-related.is-inview {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shop-frame-settle {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.shop-page main.shop-store .shop-card,
    body.shop-page main.shop-store .shop-card:hover,
    body.shop-page main.shop-pdp .shop-card,
    body.shop-page main.shop-pdp .shop-card:hover,
    body.shop-page main.shop-store .shop-card:hover .shop-card-media img,
    body.shop-page main.shop-pdp .shop-card:hover .shop-card-media img,
    body.shop-page main.shop-store .shop-card-media img,
    body.shop-page main.shop-pdp .shop-card-media img,
    body.shop-page main.shop-pdp .shop-pdp-frame,
    body.shop-page main.shop-pdp .shop-pdp-copy,
    body.shop-page main.shop-pdp .shop-related,
    body.shop-page main.shop-store .shop-cat-tile,
    body.shop-page main.shop-store .shop-cat-tile::before,
    body.shop-page main.shop-store .shop-cat-tile:hover::before,
    body.shop-page main.shop-store .shop-card-add,
    body.shop-page main.shop-store .shop-card-add:active,
    body.shop-page main.shop-pdp .shop-pdp-add,
    body.shop-page main.shop-pdp .shop-pdp-add:active {
        animation: none;
        transition: none;
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 480px) {
    body.shop-page .shop-store .shop-product-grid,
    body.shop-page .shop-pdp .shop-product-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Section chrome was painting a dark band and a tall gap under the filters. */
@media (min-width: 1024px) {
    body.shop-page:not(.adminv2-page):not(.admin-auth-page) main.shop-store > section.shop-top,
    body.shop-page:not(.adminv2-page):not(.admin-auth-page) main.shop-store > section.shop-grid-wrap,
    body.shop-page:not(.adminv2-page):not(.admin-auth-page) main.shop-pdp > section.shop-related {
        padding-top: 0;
        padding-bottom: 0;
        border-top: 0;
        box-shadow: none;
        background: transparent;
        background-image: none;
    }

    body.shop-page:not(.adminv2-page):not(.admin-auth-page) main.shop-pdp > section.shop-related {
        margin-top: 3rem;
    }

    body.shop-page main.shop-store > section.shop-grid-wrap {
        margin-top: 1.15rem;
    }

    body.shop-page main.shop-store .shop-toolbar {
        align-items: stretch;
    }

    body.shop-page main.shop-store .shop-search-input,
    body.shop-page main.shop-store .shop-sort-select {
        height: 50px;
        min-height: 50px;
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    body.shop-page main.shop-store .shop-product-grid > .shop-card,
    body.shop-page main.shop-store .shop-product-grid > .shop-card.is-inview,
    body.shop-page main.shop-store .shop-product-grid > .shop-card.is-inview:hover,
    body.shop-page main.shop-pdp .shop-related .shop-card,
    body.shop-page main.shop-pdp .shop-related .shop-card.is-inview,
    body.shop-page main.shop-pdp .shop-related .shop-card.is-inview:hover,
    body.shop-page main.shop-store .shop-card-media img,
    body.shop-page main.shop-store .shop-card:hover .shop-card-media img,
    body.shop-page main.shop-pdp .shop-card-media img,
    body.shop-page main.shop-pdp .shop-card:hover .shop-card-media img,
    body.shop-page main.shop-pdp .shop-pdp-frame,
    body.shop-page main.shop-pdp .shop-pdp-copy,
    body.shop-page main.shop-pdp .shop-related {
        animation: none;
        transition: none;
        transform: none;
        opacity: 1;
    }
}