/*
    Nordic Editorial - product card (grid and list) and, from Task 7, the listings.
    Markup: Views/Nordic/Shared/Partials/CatalogProductView.cshtml, CatalogProductListView.cshtml
    and their client twins under Views/Nordic/Catalog/Partials/Client.

    Every rule is scoped to .nordic-card, so a Default card rendered by a view the theme
    does not override keeps Default's look. [dark-theme="true"] twins answer the Default
    dark rules that would otherwise out-rank them.
*/

/* ---------- card shell ---------- */

.product-box.nordic-card,
[dark-theme="true"] .product-box.nordic-card {
    background: transparent;
    border: 0;
    color: var(--nordic-ink);
}

.product-box.nordic-card::before,
.product-box.nordic-card:hover::before,
[dark-theme="true"] .product-box.nordic-card::before,
[dark-theme="true"] .product-box.nordic-card:hover::before {
    display: none;
}

.product-box.nordic-card:not(.mobile):hover,
[dark-theme="true"] .product-box.nordic-card:not(.mobile):hover {
    background: transparent;
}

/* ---------- image: 4:5, full-bleed ---------- */

.product-box.nordic-card .picture-container .img-container::before {
    padding-top: 125%;
}

.product-box.nordic-card .picture-container .img-container img,
[dark-theme="true"] .product-box.nordic-card .picture-container .img-container img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    background-color: var(--nordic-surface);
}

[dark-theme="true"] .product-box.nordic-card .picture-container .img-container {
    border: 0;
}

.product-box.nordic-card .main-product-img {
    transition: transform .6s ease;
}

.product-box.nordic-card:not(.mobile):hover .main-product-img {
    transform: scale(1.02);
}

/* ---------- badges ---------- */

.nordic-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}

.nordic-badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--nordic-bg);
    color: var(--nordic-ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.nordic-badge--sale {
    color: var(--nordic-sale);
}

.nordic-badge--auction {
    background: var(--nordic-ink);
    color: var(--nordic-bg);
}

.product-box.nordic-card .nordic-card__badges .product-label {
    position: static;
}

.product-box.nordic-card .product-label .badge {
    padding: 4px 8px;
    background: var(--nordic-bg) !important;
    color: var(--nordic-ink) !important;
}

/* ---------- quick view: a bar across the foot of the image ---------- */

.product-box.nordic-card .quick-view-button,
[dark-theme="true"] .product-box.nordic-card .quick-view-button {
    z-index: 3;
    padding: 10px;
    background: color-mix(in srgb, var(--nordic-bg) 92%, transparent);
    border: 0;
    color: var(--nordic-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
}

.product-box.nordic-card .quick-view-button .b-icon {
    font-size: 12px;
    margin-right: 4px;
}

.product-box.nordic-card:hover .quick-view-button,
.product-box.nordic-card:focus-within .quick-view-button {
    transform: translateY(0);
}

.product-box.nordic-card .quick-view-button:hover {
    background: var(--nordic-ink);
    color: var(--nordic-bg);
}

/* ---------- text ---------- */

.product-box.nordic-card .card-body {
    padding: 14px 0 0;
    background: transparent;
}

.nordic-card__brand {
    margin-bottom: 3px;
    color: var(--nordic-muted-text);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-box.nordic-card .card-title {
    margin: 0;
    line-height: 1.3;
}

.product-box.nordic-card .card-title a,
[dark-theme="true"] .product-box.nordic-card .card-title a {
    color: var(--nordic-ink);
    font-family: var(--nordic-serif);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
}

.product-box.nordic-card .card-title a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.product-box.nordic-card .sku {
    color: var(--nordic-muted-text);
    font-size: 11px;
}

.product-box.nordic-card .prices-rating {
    margin-top: 6px;
}

.product-box.nordic-card .prices {
    align-items: baseline;
    gap: 0 8px;
}

.product-box.nordic-card .actual-price,
[dark-theme="true"] .product-box.nordic-card .actual-price {
    color: var(--nordic-ink);
    font-size: 14px;
    font-weight: 500;
}

.product-box.nordic-card .prices.is-sale .actual-price,
[dark-theme="true"] .product-box.nordic-card .prices.is-sale .actual-price {
    color: var(--nordic-sale);
}

.product-box.nordic-card .old-price {
    margin: 0;
    color: var(--nordic-muted-text);
    font-size: 13px;
}

.product-box.nordic-card .nordic-card__countdown {
    margin-top: 4px;
    color: var(--nordic-muted-text);
    font-size: 11.5px;
}

.product-box.nordic-card .nordic-card__countdown .col-form-label {
    padding: 0;
    font-weight: 500;
    color: var(--nordic-muted-text);
}

.product-box.nordic-card .rating {
    margin-top: 4px;
    font-size: 12px;
}

.product-box.nordic-card .rating .b-rating + a,
[dark-theme="true"] .product-box.nordic-card .rating .b-rating + a {
    color: var(--nordic-muted-text);
    font-size: 12px;
    font-weight: 400;
}

/* ---------- footer: colour dots and actions, always visible ---------- */

.product-box.nordic-card .card-footer,
.product-box.nordic-card:hover .card-footer,
.product-box.nordic-card.mobile:hover .card-footer,
[dark-theme="true"] .product-box.nordic-card .card-footer {
    position: static;
    padding: 8px 0 0;
    background: transparent;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.product-box.nordic-card .card-footer::before,
[dark-theme="true"] .product-box.nordic-card .card-footer::before {
    display: none;
}

/* the grid card keeps to image, name, price and colours; the rest is in the list row */
.product-box.nordic-card:not(.nordic-card--list) .spec-container,
.product-box.nordic-card:not(.nordic-card--list) .desc,
.product-box.nordic-card:not(.nordic-card--list) .attr-container .attr:not(.attr--color) {
    display: none;
}

.product-box.nordic-card .attr-container table {
    width: auto;
}

.product-box.nordic-card .attr--color .attr-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.product-box.nordic-card .attr--color .attr-value {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.product-box.nordic-card .attr-value .btn.color-container,
[dark-theme="true"] .product-box.nordic-card .attr-value .btn.color-container {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--nordic-line);
    border-radius: 50%;
}

.product-box.nordic-card .attr-value .btn.color-container:hover,
.product-box.nordic-card .attr-value .btn.color-container:focus-visible {
    outline: 1px solid var(--nordic-ink);
    outline-offset: 2px;
}

.product-box.nordic-card .color-container .color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 0;
}

.product-box.nordic-card .attr-value .btn.name:not(.color-container) {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--nordic-line);
    color: var(--nordic-ink);
    font-size: 11px;
    letter-spacing: .06em;
}

.product-box.nordic-card .catalog-quantity {
    max-width: 64px;
    margin-top: 8px;
}

.product-box.nordic-card .nordic-card__actions {
    display: flex;
    gap: 6px;
    width: 100%;
    margin: 10px 0 0;
}

.product-box.nordic-card .nordic-card__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 0 !important;
    background: transparent;
    border: 1px solid var(--nordic-line);
    color: var(--nordic-ink);
    font-size: 10.5px;
}

.product-box.nordic-card .nordic-card__actions .btn:hover,
.product-box.nordic-card .nordic-card__actions .btn:focus-visible {
    background: var(--nordic-ink);
    border-color: var(--nordic-ink);
    color: var(--nordic-bg);
}

.product-box.nordic-card .nordic-card__cart {
    flex: 1 1 auto;
}

.product-box.nordic-card .nordic-card__cart .add-cart-text {
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-box.nordic-card .nordic-card__icon {
    flex: 0 0 34px;
    width: 34px;
}

.product-box.nordic-card .nordic-card__actions .b-icon.bi {
    font-size: 13px;
}

/* ---------- list row ---------- */

.nordic-list-row.border-bottom {
    border-color: var(--nordic-line) !important;
}

.product-box.nordic-card.nordic-card--list {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
}

.product-box.nordic-card--list .picture-container {
    grid-row: 1 / span 2;
}

.product-box.nordic-card--list .card-body {
    padding: 0;
}

.product-box.nordic-card--list .card-footer {
    padding-top: 6px;
}

.product-box.nordic-card--list .desc,
[dark-theme="true"] .product-box.nordic-card--list .desc {
    max-height: 4.8em;
    margin-top: 6px;
    color: var(--nordic-muted-text);
    font-size: 13.5px;
    line-height: 1.6;
}

.product-box.nordic-card--list .spec-container {
    margin-top: 8px;
    font-size: 12.5px;
}

.product-box.nordic-card--list .spec-name,
[dark-theme="true"] .product-box.nordic-card--list .spec-name {
    color: var(--nordic-ink);
    font-size: 12.5px;
}

.product-box.nordic-card--list .spec-value,
[dark-theme="true"] .product-box.nordic-card--list .spec-value {
    color: var(--nordic-muted-text);
    font-size: 12.5px;
}

.product-box.nordic-card--list .nordic-card__actions {
    width: auto;
    max-width: 360px;
}

@media (max-width: 575.98px) {
    .product-box.nordic-card.nordic-card--list {
        grid-template-columns: 110px minmax(0, 1fr);
        column-gap: 14px;
    }

    .product-box.nordic-card .card-title a {
        font-size: 15px;
    }

    /* two cards a row on phones: icons only in the action row */
    .product-box.nordic-card:not(.nordic-card--list) .nordic-card__cart .add-cart-text {
        display: none;
    }

    .product-box.nordic-card .nordic-card__countdown {
        padding: 0;
        font-size: 11px;
    }
}

/* =====================================================================
   Listings: category, brand and collection (Views/Nordic/Catalog/*Layout.GridOrLines)
   and the shared left column (filters, category and collection navigation).
   ===================================================================== */

/* ---------- heading panel ---------- */

.nordic-listing-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 24px;
    background: var(--nordic-surface);
}

.nordic-listing-head.has-picture {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.nordic-listing-head__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 36px;
}

.nordic-listing-head .generalTitle {
    margin: 0 0 10px;
    font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem);
    font-weight: 300;
    text-align: left;
}

.nordic-listing-head__desc {
    color: var(--nordic-muted-text);
    font-size: 15px;
    line-height: 1.65;
}

.nordic-listing-head__desc p:last-child {
    margin-bottom: 0;
}

.nordic-listing-head__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.nordic-listing-head__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .nordic-listing-head.has-picture {
        grid-template-columns: minmax(0, 1fr);
    }

    .nordic-listing-head__media {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    .nordic-listing-head__text {
        padding: 22px 20px;
    }
}

/* ---------- subcategory chips ---------- */

.nordic-chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.nordic-chip {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--nordic-line);
    color: var(--nordic-ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
}

.nordic-chip:hover,
.nordic-chip:focus-visible,
.nordic-chip.is-active {
    background: var(--nordic-ink);
    border-color: var(--nordic-ink);
    color: var(--nordic-bg);
}

/* ---------- results bar ---------- */

.nordic-listing .catalog-selectors {
    align-items: center;
    margin-bottom: 20px !important;
    padding: 10px 0;
    border-top: 1px solid var(--nordic-line);
    border-bottom: 1px solid var(--nordic-line);
    color: var(--nordic-muted-text);
    font-size: 12px;
}

.nordic-listing .catalog-selectors .col-form-label {
    color: var(--nordic-muted-text);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nordic-listing .catalog-selectors .form-select {
    width: auto;
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-size: 13px;
}

.nordic-listing .catalog-selectors .viewmode-icon,
.nordic-listing .catalog-selectors .viewmode-icon .text-info {
    color: var(--nordic-muted-text) !important;
}

.nordic-listing .catalog-selectors .viewmode-icon .selected,
.nordic-listing .catalog-selectors .viewmode-icon .selected.text-info {
    color: var(--nordic-ink) !important;
}

.nordic-listing .catalog-selectors .items-total {
    color: var(--nordic-ink);
    font-weight: 600;
}

/* the featured strip above the results */
.nordic-listing .featured-product-grid > h2 {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nordic-line);
    font-family: var(--nordic-serif);
    font-size: 1.35rem;
    font-weight: 400;
}

.nordic-listing .page-separator {
    display: none;
}

/* bottom description */
.nordic-listing > .card:not(.product-box) {
    margin-top: 32px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--nordic-line);
    color: var(--nordic-muted-text);
}

/* ---------- left column: filters and navigation ---------- */

#TwoColumns .generalLeftSide h2.h5,
#TwoColumns .generalLeftSide .generalTitle,
#TwoColumns .generalLeftSide .block > .title,
#TwoColumns .generalLeftSide .card-header,
#TwoColumns .generalLeftSide .block h2 {
    margin: 0 0 12px;
    padding: 0 0 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--nordic-line);
    color: var(--nordic-ink);
    font-family: var(--nordic-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#TwoColumns .generalLeftSide h2.h5 strong {
    font-weight: 600;
}

#TwoColumns .generalLeftSide .card,
[dark-theme="true"] #TwoColumns .generalLeftSide .card {
    background: transparent;
    border: 0;
}

#TwoColumns .generalLeftSide .card-body {
    padding: 0;
}

#TwoColumns .generalLeftSide .product-spec-group {
    justify-content: flex-start;
    margin: 0 0 16px;
}

#TwoColumns .generalLeftSide .product-spec-group .title h6 {
    margin: 0 0 8px;
    color: var(--nordic-muted-text);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* options as square checkboxes */
#TwoColumns .generalLeftSide .product-spec-group .btn-group-sm {
    flex-direction: column;
    align-items: flex-start;
}

#TwoColumns .generalLeftSide .product-spec-group .btn.btn-light:not(.color-container),
[dark-theme="true"] #TwoColumns .generalLeftSide .product-spec-group .btn.btn-light:not(.color-container) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    background: transparent;
    border: 0;
    color: var(--nordic-ink);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
}

#TwoColumns .generalLeftSide .product-spec-group .btn.btn-light:not(.color-container)::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--nordic-muted);
    background: var(--nordic-bg);
}

#TwoColumns .generalLeftSide .product-spec-group .btn.btn-light:not(.color-container):hover::before,
#TwoColumns .generalLeftSide .product-spec-group .btn.btn-light:not(.color-container):focus-visible::before {
    border-color: var(--nordic-ink);
}

/* colour families as swatches */
#TwoColumns .generalLeftSide .product-spec-group .btn-group-sm:has(.color-container) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

#TwoColumns .generalLeftSide .btn.color-container,
[dark-theme="true"] #TwoColumns .generalLeftSide .btn.color-container {
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    border: 1px solid var(--nordic-line);
    border-radius: 50%;
}

#TwoColumns .generalLeftSide .btn.color-container:hover,
#TwoColumns .generalLeftSide .btn.color-container:focus-visible {
    outline: 1px solid var(--nordic-ink);
    outline-offset: 2px;
}

#TwoColumns .generalLeftSide .btn.color-container .color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 0;
}

/* active filters: removable tags */
#TwoColumns .generalLeftSide .filtered-items,
[dark-theme="true"] #TwoColumns .generalLeftSide .filtered-items {
    padding: 14px;
    background: var(--nordic-surface);
}

#TwoColumns .generalLeftSide .filtered-items a {
    display: inline-flex;
    padding: 4px 8px !important;
    border: 1px solid var(--nordic-line);
    background: var(--nordic-bg);
    color: var(--nordic-ink);
    font-size: 12px;
    cursor: pointer;
}

#TwoColumns .generalLeftSide .filtered-items .text-danger {
    color: var(--nordic-muted-text) !important;
}

#TwoColumns .generalLeftSide .filtered-items .btn-danger {
    background: transparent;
    border: 1px solid var(--nordic-ink);
    color: var(--nordic-ink);
}

#TwoColumns .generalLeftSide .filtered-items .btn-danger:hover {
    background: var(--nordic-ink);
    color: var(--nordic-bg);
}

/* category / collection navigation */
#TwoColumns .generalLeftSide .block ul {
    justify-content: flex-start;
}

#TwoColumns .generalLeftSide li a,
[dark-theme="true"] #TwoColumns .generalLeftSide li a {
    padding-bottom: 8px;
    color: var(--nordic-ink);
    font-size: 14px;
    font-weight: 400;
}

#TwoColumns .generalLeftSide li a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

#TwoColumns .generalLeftSide li.active.last > a,
#TwoColumns .generalLeftSide .block-category-navigation li.active .sublist > li.last > a,
[dark-theme="true"] #TwoColumns .generalLeftSide li.active.last > a,
[dark-theme="true"] #TwoColumns .generalLeftSide .block-category-navigation li.active .sublist > li.last > a {
    color: var(--nordic-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .25em;
}

#TwoColumns .generalLeftSide .block-category-navigation li.active > .sublist > li::before,
#TwoColumns .generalLeftSide .block-category-navigation li.active > .sublist > li::after {
    border-left-color: var(--nordic-line);
}

/* ---------- pager: hairlines, current page underlined ---------- */

.pagination {
    gap: 4px;
}

.pagination .page-link,
[dark-theme="true"] .pagination .page-link {
    min-width: 36px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--nordic-line);
    border-radius: 0 !important;
    color: var(--nordic-ink);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.pagination .currentpage.page-item .page-link,
.pagination .page-item.active .page-link {
    background: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--nordic-ink);
    color: var(--nordic-ink);
}

.pagination .page-item:not(.currentpage):hover .page-link {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--nordic-muted);
    color: var(--nordic-ink);
}