/*
    Nordic Editorial - product page.
    Markup: Views/Nordic/Product/ProductLayout.Simple.cshtml, ProductLayout.Grouped.cshtml,
    Partials/Pictures.cshtml; every other product partial is Default markup, restyled here.
*/

/* ---------- two columns: gallery 1.25fr, info 1fr ---------- */

.nordic-pd .nordic-pd__main {
    margin: 0;
}

@media (min-width: 992px) {
    .nordic-pd .nordic-pd__gallery {
        flex: 0 0 55.5%;
        max-width: 55.5%;
    }

    .nordic-pd .nordic-pd__info {
        flex: 0 0 44.5%;
        max-width: 44.5%;
        padding-left: 48px !important;
    }
}

/* ---------- gallery: 4:5 main image, vertical thumbnail strip on desktop ---------- */

.nordic-pd .gallery img.image.main-image,
[dark-theme="true"] .nordic-pd .gallery img.image.main-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--nordic-surface);
    border: 0;
}

.nordic-pd .gallery img.image.thumb-image,
[dark-theme="true"] .nordic-pd .gallery img.image.thumb-image {
    width: 72px;
    height: 90px;
    margin: 0;
    object-fit: cover;
    background: var(--nordic-surface);
    border: 1px solid transparent;
    opacity: .75;
    cursor: pointer;
}

.nordic-pd .gallery img.image.thumb-image:hover,
.nordic-pd .gallery img.image.thumb-image:focus-visible {
    border-color: var(--nordic-ink);
    opacity: 1;
}

.nordic-pd .gallery:has(.thumb-image) > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.nordic-pd .gallery:has(.thumb-image) > div > div {
    display: contents;
}

@media (min-width: 992px) {
    .nordic-pd .gallery:has(.thumb-image) {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    .nordic-pd .gallery:has(.thumb-image) > img.main-image {
        grid-column: 2;
        grid-row: 1;
    }

    .nordic-pd .gallery:has(.thumb-image) > div {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        flex-wrap: nowrap;
        margin: 0;
    }
}

/* ---------- info column ---------- */

.nordic-pd .nordic-pd__info {
    padding-top: 8px;
}

.nordic-pd__brand a {
    color: var(--nordic-muted-text);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}

.nordic-pd .nordic-pd__title,
.nordic-pd .product-name .generalTitle {
    margin: 6px 0 10px;
    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
    font-weight: 300;
    line-height: 1.12;
    text-align: left;
}

.nordic-pd__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    color: var(--nordic-muted-text);
    font-size: 12.5px;
}

/* the brand already heads the column */
.nordic-pd__meta .product-brand {
    display: none;
}

.nordic-pd__meta .additional-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 !important;
}

.nordic-pd__meta .generalMarginSupporter {
    margin: 0;
}

.nordic-pd .label {
    color: var(--nordic-muted-text);
    font-weight: 400;
}

.nordic-pd .product-reviews-overview .btn,
[dark-theme="true"] .nordic-pd .product-reviews-overview .btn {
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--nordic-muted-text);
    font-size: 12px;
    letter-spacing: normal;
    text-decoration: underline;
    text-transform: none;
    text-underline-offset: .2em;
}

/* price */
.nordic-pd .nordic-pd__price {
    margin: 18px 0 4px;
}

.nordic-pd .prices {
    margin: 0;
    padding: 0 !important;
}

.nordic-pd .product-price .actual-price,
.nordic-pd .product-price .your-price,
.nordic-pd .product-price .price-value,
.nordic-pd .product-price span,
[dark-theme="true"] .nordic-pd .product-price .actual-price {
    color: var(--nordic-ink);
    font-family: var(--nordic-serif);
    font-size: 26px;
    font-weight: 400;
}

.nordic-pd .discounted-price .actual-price,
.nordic-pd .discounted-price .your-price,
.nordic-pd .discounted-price span {
    color: var(--nordic-sale);
}

.nordic-pd .old-product-price,
.nordic-pd .old-price,
.product-details-page.nordic-pd .overview .old-price,
.nordic-pd .non-discounted-price span {
    color: var(--nordic-muted-text);
    font-size: 15px;
    text-decoration: line-through;
}

.nordic-pd .base-price-pangv,
.nordic-pd .tax-shipping-info,
.nordic-pd .nordic-pd__notes {
    color: var(--nordic-muted-text);
    font-size: 12.5px;
}

.nordic-pd .nordic-pd__notes .delivery {
    margin: 0;
}

.nordic-pd .nordic-pd__notes .b-icon {
    color: var(--nordic-muted-text);
}

.nordic-pd .short-description {
    margin: 18px 0;
    color: var(--nordic-muted-text);
    font-size: 15px;
    line-height: 1.65;
}

/* attributes */
.nordic-pd .attributes,
.nordic-pd .product-attributes {
    margin-top: 12px;
}

.nordic-pd .attributes .attribute-name,
.nordic-pd .attributes label.col-form-label,
.nordic-pd .product-attributes .col-form-label {
    color: var(--nordic-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nordic-pd .attributes,
[dark-theme="true"] .nordic-pd .attributes {
    padding: 12px 14px;
    border: 1px solid var(--nordic-line);
}

.nordic-pd .attributes .table {
    margin: 0;
}

.nordic-pd .attributes .table > :not(caption) > * > * {
    padding: 6px 0;
    border: 0;
    background: transparent;
    vertical-align: middle;
}

.nordic-pd .color-squares .color-container,
.nordic-pd .attributes .color-container {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 2px;
    border: 1px solid var(--nordic-line);
    border-radius: 0;
}

.nordic-pd .color-squares .color,
.nordic-pd .attributes .color-container .color {
    display: block;
    width: 100%;
    height: 100%;
}

.nordic-pd .color-squares input:checked + label .color-container,
.nordic-pd .attributes .selected-value .color-container,
.nordic-pd .attributes .color-container.active {
    outline: 1px solid var(--nordic-ink);
    outline-offset: 2px;
}

/* buy row */
.nordic-pd .nordic-pd__buy {
    margin: 22px 0 0;
}

.nordic-pd .product-add-to-cart {
    gap: 8px;
}

.nordic-pd .product-add-to-cart .qty-input,
.nordic-pd .product-add-to-cart .qty-dropdown {
    max-width: 76px;
    height: 48px;
    border-radius: 0 !important;
}

.nordic-pd .add-to-cart-button,
.nordic-pd .add-to-cart-button span {
    justify-content: center;
    align-items: center;
    height: 48px;
    border-radius: 0 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
}

.nordic-pd .add-to-cart-button span {
    height: auto;
}

/* reservation, gift voucher and entered-price field labels in the editorial label style */
.nordic-pd .nordic-pd__info h5,
.nordic-pd .nordic-pd__info > div > .container > .col-form-label,
.nordic-pd .giftvoucher label,
.nordic-pd .enter-price-label {
    color: var(--nordic-ink);
    font-family: var(--nordic-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* perks: hairline rows */
.nordic-perks {
    margin-top: 24px;
    border-top: 1px solid var(--nordic-line);
}

.nordic-perk {
    padding: 12px 0;
    border-bottom: 1px solid var(--nordic-line);
    font-size: 13px;
}

.nordic-perk .generalMarginSupporter {
    margin: 0;
}

.nordic-perk--actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.nordic-perk--actions .btn,
[dark-theme="true"] .nordic-perk--actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0;
    border-radius: 0 !important;
    background: transparent;
    border: 1px solid var(--nordic-line);
    color: var(--nordic-ink);
}

.nordic-perk--actions .btn:hover,
.nordic-perk--actions .btn:focus-visible {
    background: var(--nordic-ink);
    border-color: var(--nordic-ink);
    color: var(--nordic-bg);
}

/* ---------- special product types: restyled, structure unchanged ---------- */

.nordic-pd .reservation-info,
.nordic-pd .auction-info,
.nordic-pd .product-bundle,
.nordic-pd .tier-prices,
.nordic-pd .giftvoucher,
.nordic-pd .download-sample {
    margin-top: 16px;
}

.nordic-pd .countdown-box,
.nordic-pd .bid-box,
.nordic-pd .alert-info {
    background: var(--nordic-surface);
    border: 0;
    border-radius: 0;
    color: var(--nordic-ink);
}

.nordic-pd .card,
[dark-theme="true"] .nordic-pd .card {
    background: transparent;
}

.nordic-pd .product-variant-line,
.nordic-pd .product-bundle .card {
    border: 0;
    border-top: 1px solid var(--nordic-line);
}

.nordic-pd #reservationDatepicker,
.nordic-pd .reservation-calendar {
    border-radius: 0;
}

/* ---------- tabs ---------- */

.nordic-pd .nav-tabs,
[dark-theme="true"] .nordic-pd .nav-tabs {
    justify-content: center;
    gap: 28px;
    margin-top: 48px;
    border-bottom: 1px solid var(--nordic-line);
}

.nordic-pd .nav-tabs .nav-link,
[dark-theme="true"] .nordic-pd .nav-tabs .nav-link,
[dark-theme="true"] .nordic-pd .nav-tabs .nav-link.active,
[dark-theme="true"] .nordic-pd .nav-tabs .nav-link:hover:not(.active) {
    padding: 10px 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--nordic-muted-text);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nordic-pd .nav-tabs .nav-link.active,
[dark-theme="true"] .nordic-pd .nav-tabs .nav-link.active {
    border-bottom-color: var(--nordic-ink);
    color: var(--nordic-ink);
}

.nordic-pd .tab-content {
    max-width: 820px;
    margin: 0 auto;
    color: var(--nordic-ink);
    font-size: 15px;
    line-height: 1.7;
}

/* reviews: the average as a large serif figure */
.nordic-pd .product-review-box .rating,
.nordic-pd .review-overview .rating-value,
.nordic-pd .b-rating-value {
    font-family: var(--nordic-serif);
}

.nordic-pd .product-review-item,
.nordic-pd .review-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--nordic-line);
}

/* ---------- related, also purchased, similar, recommended ---------- */

.nordic-pd .product-grid > h2,
.nordic-pd .product-grid .generalTitle,
.nordic-pd .related-products-grid h2,
.nordic-pd .also-purchased-products-grid h2 {
    margin: 56px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nordic-line);
    font-family: var(--nordic-serif);
    font-size: clamp(1.45rem, 1.2rem + .8vw, 1.75rem);
    font-weight: 400;
    text-align: left !important;
}

@media (max-width: 991.98px) {
    .nordic-pd .nordic-pd__info {
        padding: 20px 0 0 !important;
    }
}

/* ---------- tablet: two columns already, so price and buy row stay above the fold ---------- */

@media (min-width: 768px) and (max-width: 991.98px) {
    .nordic-pd .nordic-pd__gallery {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .nordic-pd .nordic-pd__info {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 0 0 24px !important;
    }

    .nordic-pd .nordic-pd__title,
    .nordic-pd .product-name .generalTitle {
        font-size: 1.75rem;
    }
}

/* ---------- phones ---------- */

@media (max-width: 767.98px) {
    /* tabs scroll sideways instead of wrapping onto three lines */
    .nordic-pd .tabs .nav-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        gap: 22px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nordic-pd .tabs .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nordic-pd .tabs .nav-tabs .nav-item {
        flex: none;
    }

    .nordic-pd .tabs .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* related, also purchased, similar: two cards a row, as in the listings */
    .nordic-pd .product-grid .row > .product-container {
        flex: 0 0 50%;
        max-width: 50%;
    }
}