/* The product page, then the narrower-screen rules for the fitting room and the product page (they must come after
   both), and a few small extras at the end. */

/* Product page: info and order controls beside the 3D stage (suits) or the photos (everything else). */
.nj-info {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.nj-info .nj-eyebrow a {
    color: inherit;
}

.nj .nj-title {
    font-family: var(--nj-display);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(34px, 4vw, 48px);
    line-height: .95;
    margin: 0;
}

.nj-price {
    font-family: var(--nj-display);
    font-weight: 700;
    font-size: 24px;
}

.nj-tabs {
    margin-top: 6px;
}

.nj-order {
    display: grid;
    gap: 10px;
}

.nj-order .mud-paper-outlined {
    background: transparent;
}

.nj-ship {
    color: var(--nj-dim);
    font-size: 13.5px;
}

.nj-desc {
    max-width: 72ch;
    margin-top: 28px;
    color: #c9d2dd;
    line-height: 1.6;
}

.nj-desc-fold {
    border-top: 1px solid var(--fr-line);
    border-bottom: 1px solid var(--fr-line);
}

.nj-desc-fold summary {
    cursor: pointer;
    padding: 10px 0;
    font-family: var(--nj-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c9d2dd;
}

.nj-desc-fold summary:hover {
    color: #fff;
}

.nj-desc-fold .nj-desc {
    margin: 0 0 14px;
}

.nj-product {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
    gap: 32px;
    align-items: start;
}

.nj-product-info {
    display: grid;
    gap: 22px;
}

.nj-product-info .nj-desc {
    margin-top: 0;
}

.nj-gallery {
    background: var(--nj-lit);
    padding: 16px;
}

.nj-gallery .mud-carousel img {
    filter: drop-shadow(12px 16px 16px rgba(0, 0, 0, .65));
}

.nj-gallery .mud-image {
    filter: drop-shadow(4px 6px 6px rgba(0, 0, 0, .6));
}

/* A narrower stage (a tablet, a small or zoomed-in window) keeps the suit beside its colours, but the colour groups
   move to a strip under the suit, one row that scrolls sideways, so they don't cover it. On touch screens the suit takes
   every touch, so the strip is also where a thumb scrolls the page on past the 3D view. */
@media (max-width: 960px) {
    .fr-stage {
        --fr-strip: 52px;
    }

    .fr-canvas {
        bottom: var(--fr-strip);
    }

    .fr-legend {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--fr-strip);
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 32px 0 12px;
        background: var(--nj-ink);
        border-top: 1px solid var(--nj-edge);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    }

    .fr-legend::-webkit-scrollbar {
        display: none;
    }

    .fr-legend button {
        flex: none;
    }

    .fr-help {
        bottom: calc(var(--fr-strip) + 12px);
    }

    .nj-product {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phones (and a laptop window zoomed to 200%): the colours go under the suit. */
@media (max-width: 720px) {
    .fr-screen {
        height: auto;
        min-height: 0;
    }

    .fitting-room {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }

    .fr-scroll {
        overflow: visible;
    }

    .fr-stage {
        height: calc(62vh + var(--fr-strip));
    }
}

@media (max-width: 600px) {
    /* Phones scroll the suit picker with a swipe; the arrows are for mice. */
    .fr-picker-arrow {
        display: none !important;
    }

    .fr-legend button {
        gap: 6px;
        font-size: 12px;
        padding: 4px 9px 4px 5px;
    }

    .fr-legend .fr-dot {
        width: 14px;
        height: 14px;
    }
}

.configurator-table-cell {
    padding: 6px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-swipearea {
    touch-action: pan-y !important;
}

html, body {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    --mud-typography-h4-weight: 350;
    --mud-typography-h3-weight: 350;
    --mud-typography-h2-weight: 350;
}

p, ul, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1rem;
}

ul {
    padding-inline-start: 1rem;
}

hr {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 1rem;}

h2 {
    font-weight: 400;
}

h3 {
    font-weight: 550;
}

h4 {
    font-weight: 500;
}

.light-text {
    font-weight: 350;
}

.light-italic-text {
    font-weight: 350;
    font-style: italic;
}

.mud-input.mud-input-underline:before {
    border-bottom: 0 !important;
}

.mud-input.mud-input-underline:after {
    border-bottom: 0 !important;
}

.mud-table-dense .mud-table-cell {
    padding: 6px !important;
}

.cart-badge {
    height: 16px;
    inset: calc(100% - 20px) auto auto calc(100% - 20px) !important;
}

.fit-image {
    object-fit: contain;
    background-size: contain;
}

.launch-background {
    background: #b75a49 url(../images/launching-soon.jpg) no-repeat fixed center center;
    background-size: contain;
    height: 100vh
}

.fit-content {
    width: fit-content;
}

/* MyCarousel: no slide-in animation for the first image on page load */
.my-carousel-initial .mud-carousel-item {
    animation: none !important;
}

/* "Ask on WhatsApp" under the order buttons: a quiet link, the order button stays the main action. */
.fr-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.fr-whatsapp:hover,
.fr-whatsapp:focus-visible {
    color: #25d366;
}