/* Product detail of an API product (Views/Koleksiyonlar/Urun.cshtml). Sections without data are not rendered. */

.pd-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: max(24px, 40rem) 0 max(18px, 26rem);
    font-size: var(--f-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pd-crumbs a {
    opacity: .55;
    transition: opacity .3s;
}

.pd-crumbs a:hover {
    opacity: 1;
}

.pd-crumbs span[aria-hidden] {
    opacity: .3;
}

/* ---------- Render gallery ---------- */
.pd-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--c5);
}

.pd-hero-slider,
.pd-hero-slider .swiper-slide {
    height: min(78vh, max(320px, 52vw));
}

.pd-hero-slider img {
    width: 100%;
    height: 100%;
}

/* Series name over the image, outlined, in the display face */
.pd-hero-name {
    position: absolute;
    left: max(18px, 40rem);
    bottom: max(14px, 30rem);
    z-index: 2;
    font-size: clamp(56px, 11vw, 200px);
    line-height: .85;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .9);
    pointer-events: none;
}

.pd-hero-nav {
    position: absolute;
    right: max(18px, 40rem);
    bottom: max(18px, 34rem);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: max(10px, 16rem);
    color: #fff;
    font-size: var(--f-xs);
    letter-spacing: .1em;
}

.pd-hero-nav button {
    appearance: none;
    border: 0;
    background: none;
    padding: 4px;
    color: inherit;
    cursor: pointer;
    opacity: .8;
}

.pd-hero-nav button:hover {
    opacity: 1;
}

.pd-hero-nav .swiper-button-disabled {
    opacity: .25;
    cursor: default;
}

.pd-hero-count b {
    font-weight: 400;
    font-size: var(--f-m);
}

/* ---------- Info ---------- */
.pd-info-section {
    padding-top: max(40px, 70rem);
    padding-bottom: max(40px, 70rem);
}

.pd-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: max(30px, 100rem);
    align-items: start;
}

.pd-kicker {
    font-size: var(--f-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
}

.pd-name {
    margin-top: max(10px, 14rem);
    font-size: var(--f-xl);
    line-height: 1;
}

.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: max(20px, 28rem) 0 0;
    padding: 0;
    list-style: none;
}

.pd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: max(16px, 26rem);
    margin-top: max(28px, 44rem);
}

.pd-button {
    min-width: 200px;
}

.pd-fav {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: var(--f-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.pd-fav span {
    color: var(--c1);
    opacity: .7;
}

.pd-fav.active {
    color: var(--c1);
}

.pd-fav.active span {
    opacity: 1;
}

.pd-motto {
    font-size: var(--f-l);
    line-height: 1.2;
    font-family: var(--altfontitalic);
}

.pd-text {
    margin-top: 1.1em;
    line-height: 1.75;
    opacity: .8;
}

.pd-motto + .pd-text {
    margin-top: max(20px, 30rem);
}

.pd-facts {
    margin: max(24px, 36rem) 0 0;
    border-top: var(--sl) solid var(--c3);
}

.pd-body > .pd-facts:first-child {
    margin-top: 0;
}

.pd-facts > div {
    display: grid;
    grid-template-columns: minmax(110px, 30%) 1fr;
    gap: 16px;
    padding: max(12px, 16rem) 0;
    border-bottom: var(--sl) solid var(--c3);
}

.pd-facts dt {
    font-size: var(--f-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55;
}

.pd-facts dd {
    margin: 0;
}

.pd-features {
    display: flex;
    flex-wrap: wrap;
    gap: max(14px, 22rem);
    margin: max(24px, 36rem) 0 0;
    padding: 0;
    list-style: none;
}

.pd-features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max(64px, 84rem);
    text-align: center;
    font-size: var(--f-xxs, 11px);
    letter-spacing: .04em;
    line-height: 1.3;
}

.pd-features img {
    width: max(30px, 38rem);
    height: max(30px, 38rem);
    object-fit: contain;
}

/* Documents (technical sheets, assembly guides) of a product entered in the panel */
.pd-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: max(24px, 36rem) 0 0;
    padding: 0;
    list-style: none;
}

.pd-docs a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border: var(--sl) solid var(--c3);
    font-size: var(--f-xs);
    letter-spacing: .06em;
    transition: background-color .3s, color .3s;
}

.pd-docs a:hover {
    background-color: var(--c1);
    color: var(--c0);
}

.pd-docs svg {
    flex: none;
    fill: none;
}

/* ---------- Variants ---------- */
.pd-variants-section {
    padding-top: max(40px, 70rem);
    padding-bottom: max(40px, 70rem);
}

.pd-variants-section .section-title,
.pd-similar .section-title {
    margin-bottom: max(30px, 50rem);
}

.pd-filters {
    display: flex;
    flex-wrap: wrap;
    gap: max(24px, 60rem);
    padding-bottom: max(24px, 36rem);
    margin-bottom: max(30px, 44rem);
    border-bottom: var(--sl) solid var(--c3);
}

.pd-filter {
    display: flex;
    align-items: flex-start;
    gap: max(14px, 22rem);
}

.pd-filter-label {
    padding-top: 10px;
    font-size: var(--f-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
}

.pd-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-filter .tag-chip {
    background: none;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.pd-filter .tag-chip.active {
    background-color: var(--c1);
    color: var(--c0);
}

.pd-swatch {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: max(54px, 64rem);
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.pd-swatch img,
.pd-swatch-all {
    display: block;
    width: max(40px, 48rem);
    height: max(40px, 48rem);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--c3);
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: outline-color .3s;
}

.pd-swatch-all {
    background: linear-gradient(135deg, var(--c0) 50%, var(--c3) 50%);
}

.pd-swatch small {
    font-size: var(--f-xxs, 11px);
    opacity: .6;
    text-align: center;
    line-height: 1.2;
}

.pd-swatch.active img,
.pd-swatch.active .pd-swatch-all {
    outline-color: var(--c1);
}

.pd-swatch.active small {
    opacity: 1;
}

.pd-variants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(150px, 200rem), 1fr));
    gap: max(30px, 50rem) max(18px, 30rem);
    align-items: end;
}

.pd-variant[hidden] {
    display: none;
}

.pd-variant-image {
    position: relative;
    overflow: hidden;
    background-color: var(--c5);
}

.pd-variant-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 1.2s ease;
}

.pd-variant:hover .pd-variant-image img {
    transform: scale(1.04);
}

.pd-variant-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: max(12px, 16rem);
}

.pd-variant-size,
.pd-variant-code {
    font-size: var(--f-xs);
    letter-spacing: .08em;
    opacity: .55;
}

.pd-variant-color {
    font-size: var(--f-m);
    line-height: 1.1;
}

.pd-specs {
    margin-top: 10px;
    font-size: var(--f-xs);
}

.pd-specs summary {
    cursor: pointer;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
    list-style: none;
}

.pd-specs summary::-webkit-details-marker {
    display: none;
}

.pd-specs summary::after {
    content: " +";
}

.pd-specs[open] summary::after {
    content: " \2212";
}

.pd-specs dl {
    margin: 8px 0 0;
}

.pd-specs dl > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: var(--sl) solid var(--c3);
}

.pd-specs dt {
    opacity: .6;
}

.pd-specs dd {
    margin: 0;
    text-align: right;
}

.pd-similar {
    padding-top: max(40px, 70rem);
}

/* Variant tiles: the picture opens the popup, the bookmark saves just this option */
.pd-variant {
    position: relative;
}

.pd-variant-open {
    appearance: none;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pd-variant-open .pd-variant-image {
    display: block;
}

.pd-variant-open .pd-variant-meta {
    display: flex;
}

.pd-variant-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    appearance: none;
    border: 0;
    border-radius: 50%;
    background-color: rgba(229, 229, 226, .92);
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s, background-color .25s;
}

.pd-variant:hover .pd-variant-fav,
.pd-variant-fav:focus-visible,
.pd-variant-fav.active {
    opacity: 1;
    transform: none;
}

.pd-variant-fav.active {
    color: var(--c1);
}

.pd-variant-fav:hover {
    background-color: var(--c0);
}

@media (hover: none) {
    .pd-variant-fav {
        opacity: 1;
        transform: none;
    }
}

/* Popup: save the option on screen */
.pv-fav {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--f-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.pv-fav span {
    color: var(--c1);
}

.pv-fav.active {
    color: var(--c1);
}

.pv-fav.active span::after {
    content: " ✓";
}

.pv-fav[hidden] {
    display: none;
}

/* ---------- Variant popup ---------- */
html.pv-open {
    overflow: hidden;
}

.pv {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, 30rem);
}

.pv[hidden] {
    display: none;
}

.pv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 22, 1, .55);
    animation: pv-fade .3s ease both;
}

.pv-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    width: min(1380px, 100%);
    height: min(820px, 100%);
    background-color: var(--c0);
    animation: pv-in .35s ease both;
}

@keyframes pv-fade {
    from { opacity: 0; }
}

@keyframes pv-in {
    from { opacity: 0; transform: translateY(16px); }
}

.pv-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    appearance: none;
    border: 0;
    background: none;
    padding: 6px;
    color: var(--c1);
    cursor: pointer;
}

/* Media: large tile + strip of the other variants */
.pv-media {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    border-right: var(--sl) solid var(--c3);
}

.pv-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: max(20px, 34rem) max(54px, 80rem);
}

.pv-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    border: 0;
    background: none;
    padding: 10px;
    color: var(--c1);
    cursor: pointer;
    opacity: .7;
}

.pv-nav:hover {
    opacity: 1;
}

.pv-prev {
    left: max(10px, 20rem);
}

.pv-next {
    right: max(10px, 20rem);
}

.pv-count {
    position: absolute;
    right: max(20px, 34rem);
    bottom: max(14px, 20rem);
    font-size: var(--f-xl);
    line-height: 1;
    opacity: .35;
}

.pv-count b {
    font-weight: 400;
    font-size: var(--f-m);
}

.pv-count i {
    font-style: normal;
}

.pv-thumbs {
    display: flex;
    gap: 10px;
    padding: 14px max(16px, 24rem);
    overflow-x: auto;
    border-top: var(--sl) solid var(--c3);
}

.pv-thumbs button {
    flex: none;
    width: 82px;
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    opacity: .55;
    transition: opacity .3s;
}

.pv-thumbs button:hover,
.pv-thumbs button.active {
    opacity: 1;
}

.pv-thumb-img {
    display: block;
    height: 70px;
    background-color: var(--c5);
    outline: 1px solid transparent;
    outline-offset: 2px;
}

.pv-thumbs button.active .pv-thumb-img {
    outline-color: var(--c1);
}

.pv-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-thumbs b,
.pv-thumbs small {
    display: block;
    font-size: 11px;
    line-height: 1.3;
}

.pv-thumbs b {
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: .04em;
}

.pv-thumbs small {
    opacity: .6;
}

/* Info: title, tabs, rows, actions */
.pv-info {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: max(26px, 44rem) max(22px, 40rem) 0;
}

.pv-title {
    font-size: var(--f-l);
    line-height: 1;
}

.pv-sub {
    margin-top: 8px;
    font-size: var(--f-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .6;
}

.pv-tabs {
    display: flex;
    gap: max(16px, 28rem);
    margin-top: max(20px, 30rem);
    border-bottom: var(--sl) solid var(--c3);
}

.pv-tabs button {
    appearance: none;
    border: 0;
    background: none;
    padding: 0 0 12px;
    margin-bottom: -1px;
    font: inherit;
    font-size: var(--f-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c1);
    opacity: .5;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}

.pv-tabs button.active {
    opacity: 1;
    border-bottom-color: var(--c1);
}

.pv-tabs button[hidden] {
    display: none;
}

.pv-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: max(14px, 20rem) 14px max(14px, 20rem) 0;
    margin-right: -14px;
    /* Rows fade out at the edge that has more to scroll. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
}

/* Thin rounded scrollbar in the site's colours; darker while pointed at. */
.pv-panel,
.pv-thumbs,
.pv-box {
    scrollbar-width: thin;
    scrollbar-color: var(--c3) transparent;
}

.pv-panel:hover,
.pv-thumbs:hover {
    scrollbar-color: var(--c2) transparent;
}

.pv-panel::-webkit-scrollbar,
.pv-thumbs::-webkit-scrollbar,
.pv-box::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.pv-panel::-webkit-scrollbar-track,
.pv-thumbs::-webkit-scrollbar-track,
.pv-box::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;
}

.pv-panel::-webkit-scrollbar-thumb,
.pv-thumbs::-webkit-scrollbar-thumb,
.pv-box::-webkit-scrollbar-thumb {
    background: var(--c3);
    border-radius: 4px;
    transition: background-color .3s;
}

.pv-panel:hover::-webkit-scrollbar-thumb,
.pv-thumbs:hover::-webkit-scrollbar-thumb,
.pv-box:hover::-webkit-scrollbar-thumb {
    background: var(--c2);
}

.pv-panel::-webkit-scrollbar-button,
.pv-thumbs::-webkit-scrollbar-button,
.pv-box::-webkit-scrollbar-button {
    display: none;
}

.pv-table {
    margin: 0;
}

.pv-table > div {
    display: grid;
    grid-template-columns: minmax(110px, 40%) 1fr;
    gap: 16px;
    padding: max(10px, 13rem) 0;
    border-bottom: var(--sl) solid var(--c3);
}

.pv-table dt {
    font-size: var(--f-xs);
    letter-spacing: .08em;
    opacity: .55;
}

.pv-table dd {
    margin: 0;
    text-align: right;
}

.pv-faces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.pv-faces button {
    appearance: none;
    border: 0;
    padding: 0;
    background-color: var(--c5);
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
}

.pv-faces img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-calc-intro {
    font-size: var(--f-s);
    line-height: 1.6;
    opacity: .75;
}

.pv-calc-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0;
}

.pv-calc-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--f-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.pv-calc-form input,
.pv-calc-form select {
    font: inherit;
    font-size: var(--f-s);
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 12px;
    border: var(--sl, 1px) solid var(--c3);
    background: transparent;
    color: var(--c1);
}

.pv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: max(16px, 22rem) 0;
    border-top: var(--sl) solid var(--c3);
}

.pv-button {
    min-width: 180px;
}

.pv-share {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--f-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c1);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

@media screen and (max-width: 1023.98px) {
    .pd-info {
        grid-template-columns: 1fr;
    }

    .pd-filters {
        flex-direction: column;
        gap: 18px;
    }

    .pv {
        padding: 0;
    }

    .pv-box {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        overflow-y: auto;
    }

    .pv-media {
        border-right: 0;
        border-bottom: var(--sl) solid var(--c3);
    }

    .pv-stage {
        height: 52vh;
        padding: 20px 46px;
    }

    .pv-panel {
        overflow: visible;
        margin-right: 0;
        padding-right: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ==========================================================================
   "Ürün" look (UrunDetay.cshtml): details next to the product's pictures shown whole
   ========================================================================== */
.pp-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: max(30px, 90rem);
    align-items: start;
    padding-bottom: max(40px, 80rem);
}

.pp-info .pd-name {
    font-size: var(--f-xl);
}

.pp-lead {
    margin-top: max(16px, 24rem);
    font-size: var(--f-m, 18px);
    line-height: 1.45;
}

.pp-info .pd-text {
    margin-top: max(12px, 16rem);
}

.pp-block {
    margin-top: max(26px, 40rem);
    padding-top: max(20px, 28rem);
    border-top: var(--sl) solid var(--c3);
}

.pp-label {
    margin: 0 0 max(14px, 18rem);
    font-size: var(--f-xs);
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .6;
}

.pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Technical details per piece of a set */
.pp-part {
    border-bottom: var(--sl) solid var(--c3);
}

.pp-part:first-child {
    border-top: var(--sl) solid var(--c3);
}

.pp-part summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: max(14px, 18rem) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--f-s);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pp-part summary::-webkit-details-marker {
    display: none;
}

.pp-part summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .3s;
}

.pp-part[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.pp-part .pd-facts {
    margin: 0 0 max(14px, 18rem);
    border-top: 0;
}

.pp-part .pd-facts > div:last-child {
    border-bottom: 0;
}

/* Colour choice with the option's picture */
.pp-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pp-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 84px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.pp-color-image {
    display: block;
    width: 84px;
    height: 84px;
    border: var(--sl) solid var(--c3);
    transition: border-color .3s, box-shadow .3s;
}

.pp-color-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

.pp-color small {
    font-size: var(--f-xxs, 11px);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    opacity: .6;
}

.pp-color.active .pp-color-image {
    border-color: var(--c1);
    box-shadow: inset 0 0 0 1px var(--c1);
}

.pp-color.active small {
    opacity: 1;
}

.pp-actions {
    margin-top: max(30px, 44rem);
}

/* Pictures: whole, on a light panel, with thumbnails */
.pp-media {
    position: sticky;
    top: max(90px, 110rem);
}

.pp-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.pp-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7%;
    box-sizing: border-box;
}

.pp-nav {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--c1);
    cursor: pointer;
    opacity: .55;
    transition: opacity .3s;
}

.pp-nav:hover {
    opacity: 1;
}

.pp-prev {
    left: 6px;
}

.pp-next {
    right: 6px;
}

.pp-count {
    position: absolute;
    right: 18px;
    bottom: 14px;
    font-size: var(--f-s);
    opacity: .5;
}

.pp-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c3) transparent;
}

.pp-thumbs button {
    flex: none;
    width: 78px;
    height: 78px;
    padding: 0;
    border: var(--sl) solid transparent;
    cursor: pointer;
    opacity: .7;
    transition: opacity .3s, border-color .3s;
}

.pp-thumbs button.active,
.pp-thumbs button:hover {
    opacity: 1;
    border-color: var(--c1);
}

.pp-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

/* Ambience band */
.pp-showcase {
    position: relative;
    height: max(280px, 38vw);
    max-height: 720px;
    overflow: hidden;
    background-color: var(--c5);
}

.pp-showcase-name {
    position: absolute;
    left: max(20px, 50rem);
    bottom: max(10px, 30rem);
    font-size: var(--f-xxl);
    line-height: .9;
    color: #fff;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .9);
    color: transparent;
    pointer-events: none;
}

@media screen and (max-width: 1023.98px) {
    .pp-top {
        grid-template-columns: 1fr;
    }

    .pp-media {
        position: static;
        order: -1;
    }

    .pp-color,
    .pp-color-image {
        width: 72px;
    }

    .pp-color-image {
        height: 72px;
    }
}

/* Single product: the option's rows and the other details read as one list */
.pp-part-single,
.pp-part-single:first-child {
    border: 0;
}

.pp-part-single .pd-facts {
    margin: 0;
    border-top: var(--sl) solid var(--c3);
}

.pp-part-single .pd-facts > div:last-child {
    border-bottom: var(--sl) solid var(--c3);
}

.pp-facts-more {
    margin-top: 0;
    border-top: 0;
}

.pp-parts + .pp-facts-more {
    margin-top: max(10px, 14rem);
}

/* Phones: two per row; a tile keeps the tile's real proportions and shows it whole, but is never taller than 360px; a long
   narrow size (30x180) gets narrower instead (--r = width / height, set per option in Urun.cshtml). */
@media screen and (max-width: 1023.98px) {
    /* Two options per row. */
    .pd-variants {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 14px;
    }

    .pd-variant-image {
        width: min(100%, calc(360px * var(--r, 1)));
        margin-inline: auto;
    }

    .pd-variant-meta {
        text-align: center;
    }
}