:root {
    --fj-pdp-paper: #f5f2ec;
    --fj-pdp-ink: #231f1b;
    --fj-pdp-muted: #6f6a64;
    --fj-pdp-line: #d9d3ca;
    --fj-pdp-accent: #9a8063;
}

body.fj-cpp-active {
    background: var(--fj-pdp-paper);
}

.fj-pdp,
.fj-pdp * {
    box-sizing: border-box;
}

.fj-pdp {
    clear: both;
    width: 100%;
    color: var(--fj-pdp-ink);
    background: var(--fj-pdp-paper);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.fj-pdp [data-fj-reveal] {
    opacity: 1;
    transform: none;
}

.fj-pdp.fj-motion-enabled [data-fj-reveal] {
    transition: none;
}

.fj-pdp.fj-motion-enabled [data-fj-reveal].fj-reveal-pending {
    opacity: 0;
    transform: translateY(14px);
}

.fj-pdp.fj-motion-active [data-fj-reveal],
.fj-pdp.fj-motion-enabled.fj-motion-active [data-fj-reveal].fj-reveal-pending {
    transition: opacity 650ms cubic-bezier(.22, .61, .36, 1), transform 650ms cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--fj-reveal-delay, 0ms);
}

.fj-pdp.fj-motion-enabled [data-fj-reveal].fj-revealed {
    opacity: 1;
    transform: none;
}

.fj-pdp img {
    max-width: 100%;
}

.fj-pdp a {
    color: inherit;
    text-decoration: none;
}

.fj-pdp button,
.fj-pdp input {
    font: inherit;
}

.fj-pdp button,
.fj-pdp a {
    -webkit-tap-highlight-color: transparent;
}

.fj-pdp__shell {
    width: min(1920px, calc(100% - clamp(48px, 4vw, 80px)));
    margin: 0 auto;
    padding: 32px 0 88px;
}

.fj-pdp__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
    color: var(--fj-pdp-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.fj-pdp__breadcrumb a:focus-visible,
.fj-pdp button:focus-visible,
.fj-pdp a:focus-visible {
    outline: 2px solid var(--fj-pdp-accent);
    outline-offset: 3px;
}

.fj-pdp__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: start;
}

.fj-pdp-gallery__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.08;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--fj-pdp-line);
}

.fj-pdp-gallery {
    width: 100%;
    min-width: 0;
}

.fj-pdp-gallery__zoom-trigger {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    cursor: zoom-in;
}

.fj-pdp-gallery__stage img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    transition: opacity 180ms ease;
}

.fj-pdp-zoom {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 40px;
    overflow: hidden;
    background: rgba(255, 255, 255, .98);
    border: 0;
}

.fj-pdp-zoom[open] {
    display: grid;
    place-items: center;
}

.fj-pdp-zoom::backdrop {
    background: rgba(20, 18, 16, .72);
}

.fj-pdp-zoom img {
    position: absolute;
    inset: 40px;
    display: block;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.fj-pdp-zoom__close {
    position: fixed;
    z-index: 1;
    top: 18px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--fj-pdp-ink);
    background: #fff;
    border: 1px solid var(--fj-pdp-line);
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.fj-pdp-gallery__controls {
    display: flex;
    gap: 8px;
    margin: 0;
}

.fj-pdp-gallery__controls button {
    min-width: 0;
    padding: 0;
    color: var(--fj-pdp-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.fj-pdp-gallery__thumb {
    flex: 0 0 64px;
    position: relative;
    width: 64px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid transparent !important;
}

.fj-pdp-gallery__thumb::after {
    position: absolute;
    inset: auto 8px 4px;
    height: 2px;
    content: "";
    background: var(--fj-pdp-ink);
    opacity: 0;
}

.fj-pdp-gallery__thumb.is-selected {
    border-color: var(--fj-pdp-ink) !important;
}

.fj-pdp-gallery__thumb.is-selected::after {
    opacity: 1;
}

.fj-pdp-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.fj-pdp-summary {
    min-width: 0;
    padding-top: 10px;
}

.fj-pdp__eyebrow {
    margin: 0;
    color: var(--fj-pdp-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.fj-pdp-summary h1,
.fj-pdp-manufacturer h2,
.fj-pdp-related h2,
.fj-pdp-parameters > h2 {
    margin: 10px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: 1.04;
}

.fj-pdp-summary h1 {
    max-width: 13ch;
    font-size: clamp(38px, 4.6vw, 68px);
}

.fj-pdp-summary__description {
    max-width: 48ch;
    margin: 22px 0 0;
    color: var(--fj-pdp-muted);
    font-size: 14px;
    line-height: 1.65;
}

.fj-pdp-summary__features {
    display: grid;
    gap: 9px;
    margin: 24px 0 0;
    padding: 20px 0;
    list-style: none;
    border-block: 1px solid var(--fj-pdp-line);
}

.fj-pdp-summary__features li {
    position: relative;
    margin: 0;
    padding-left: 18px;
    color: #4e4944;
    font-size: 12px;
}

.fj-pdp-summary__features li::before {
    position: absolute;
    left: 0;
    content: "◇";
    color: var(--fj-pdp-accent);
}

.fj-pdp-finishes {
    margin: 23px 0 0;
    padding: 0;
    border: 0;
}

.fj-pdp-finishes legend,
.fj-pdp-quantity > span {
    margin-bottom: 10px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fj-pdp-finishes__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.fj-pdp-finish {
    min-width: 0;
    padding: 0;
    color: var(--fj-pdp-muted);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.fj-pdp-finish > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 7px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 50%;
}

.fj-pdp-finish.is-selected > span {
    border-color: var(--fj-pdp-ink);
}

.fj-pdp-finish img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fj-pdp-finish small {
    display: block;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fj-pdp-quantity {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
}

.fj-pdp-quantity > span {
    margin: 0 auto 0 0;
}

.fj-pdp-quantity button,
.fj-pdp-quantity input {
    width: 38px;
    height: 38px;
    padding: 0;
    text-align: center;
    background: transparent;
    border: 1px solid var(--fj-pdp-line);
    border-radius: 0;
}

.fj-pdp-quantity button {
    cursor: pointer;
}

.fj-pdp-quantity input {
    appearance: textfield;
}

.fj-pdp-quantity input::-webkit-outer-spin-button,
.fj-pdp-quantity input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.fj-pdp-summary__ctas {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.fj-pdp-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 18px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fj-pdp-button--primary {
    color: #fff !important;
    background: var(--fj-pdp-ink);
}

.fj-pdp-button--secondary {
    border: 1px solid var(--fj-pdp-line);
}

.fj-pdp-summary__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    border-top: 1px solid var(--fj-pdp-line);
}

.fj-pdp-summary__actions button {
    min-height: 42px;
    padding: 0 6px;
    color: var(--fj-pdp-muted);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--fj-pdp-line);
    border-radius: 0;
    font-size: 10px;
    cursor: pointer;
}

.fj-pdp-summary__actions button:last-child {
    border-right: 0;
}

.fj-pdp-status {
    margin: 8px 0 0;
    color: var(--fj-pdp-muted);
    font-size: 11px;
}

.fj-pdp-highlights {
    display: grid;
    grid-template-columns: 1.2fr repeat(5, minmax(0, 1fr));
    margin-top: clamp(58px, 7vw, 92px);
    border-block: 1px solid var(--fj-pdp-line);
}

.fj-pdp-highlights > div,
.fj-pdp-highlights > article {
    min-width: 0;
    padding: 20px 16px;
    border-right: 1px solid var(--fj-pdp-line);
}

.fj-pdp-highlights > article:last-child {
    border-right: 0;
}

.fj-pdp-highlights img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.fj-pdp-highlights h2,
.fj-pdp-trust h2 {
    margin: 9px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.fj-pdp-highlights p,
.fj-pdp-trust p {
    margin: 5px 0 0;
    color: var(--fj-pdp-muted);
    font-size: 10px;
    line-height: 1.4;
}

.fj-pdp-parameters {
    padding-top: clamp(52px, 6vw, 78px);
}

.fj-pdp-parameters > h2,
.fj-pdp-related h2 {
    font-size: clamp(28px, 3.2vw, 44px);
}

.fj-pdp-parameters__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.fj-pdp-parameters__grid--single {
    grid-template-columns: 1fr;
}

.fj-pdp-parameters dl {
    margin: 0;
    border: 1px solid var(--fj-pdp-line);
}

.fj-pdp-parameters dl > div {
    display: grid;
    grid-template-columns: minmax(120px, .75fr) minmax(0, 1.7fr);
    border-bottom: 1px solid var(--fj-pdp-line);
}

.fj-pdp-parameters dl > div:last-child {
    border-bottom: 0;
}

.fj-pdp-parameters dt,
.fj-pdp-parameters dd {
    margin: 0;
    padding: 12px 15px;
    font-size: 11px;
    line-height: 1.45;
}

.fj-pdp-parameters dt {
    color: #5e5952;
    background: #ebe6de;
}

.fj-pdp-parameters dd {
    color: #3e3934;
}

.fj-pdp-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 28px;
    padding: 22px 0;
    border-block: 1px solid var(--fj-pdp-line);
}

.fj-pdp-trust article {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0 22px;
    border-right: 1px solid var(--fj-pdp-line);
}

.fj-pdp-trust article:first-child {
    padding-left: 0;
}

.fj-pdp-trust article:last-child {
    padding-right: 0;
    border-right: 0;
}

.fj-pdp-trust b {
    color: var(--fj-pdp-accent);
    font-size: 22px;
}

.fj-pdp-trust h2,
.fj-pdp-trust p {
    margin: 0;
}

.fj-pdp-manufacturer,
.fj-pdp-related {
    margin-top: clamp(64px, 8vw, 108px);
    padding-top: 20px;
    border-top: 1px solid var(--fj-pdp-ink);
}

.fj-pdp-manufacturer__intro {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 20px;
    align-items: center;
}

.fj-pdp-manufacturer__copy {
    padding: 30px clamp(20px, 4vw, 60px) 30px 0;
}

.fj-pdp-manufacturer h2 {
    max-width: 16ch;
    font-size: clamp(30px, 3.4vw, 48px);
}

.fj-pdp-manufacturer__copy > p:last-child {
    max-width: 58ch;
    margin: 22px 0 0;
    color: var(--fj-pdp-muted);
    font-size: 13px;
    line-height: 1.7;
}

.fj-pdp-manufacturer figure,
.fj-pdp-capabilities figure,
.fj-pdp-related article span {
    display: block;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--fj-pdp-line);
}

.fj-pdp-manufacturer__intro > figure {
    aspect-ratio: 16 / 9;
}

.fj-pdp-manufacturer figure img,
.fj-pdp-capabilities figure img,
.fj-pdp-related article span img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fj-pdp-capabilities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.fj-pdp-capabilities article {
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--fj-pdp-ink);
}

.fj-pdp-capabilities figure {
    aspect-ratio: 25 / 18;
}

.fj-pdp-capabilities h3,
.fj-pdp-related h3 {
    margin: 11px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
    text-transform: uppercase;
}

.fj-pdp-related > div:first-child {
    margin-bottom: 24px;
}

.fj-pdp-related__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.fj-pdp-related__grid article {
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--fj-pdp-ink);
}

.fj-pdp-related__grid article span {
    aspect-ratio: 1;
}

.fj-pdp-related__grid article span img {
    object-fit: contain;
}

.fj-pdp-related__empty {
    margin: 0;
    padding: 24px 20px;
    color: var(--fj-pdp-muted);
    background: #ebe6de;
    font-size: 12px;
}

@media (max-width: 900px) {
    .fj-pdp__hero,
    .fj-pdp-manufacturer__intro {
        grid-template-columns: 1fr;
    }

    .fj-pdp-summary {
        padding-top: 0;
    }

    .fj-pdp-gallery--multiple .fj-pdp-gallery__controls {
        overflow-x: auto;
        margin-top: 10px;
        padding-bottom: 5px;
        scroll-snap-type: x proximity;
    }

    .fj-pdp-gallery--multiple .fj-pdp-gallery__thumb {
        scroll-snap-align: start;
    }

    .fj-pdp-highlights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fj-pdp-highlights > div,
    .fj-pdp-highlights > article {
        border-bottom: 1px solid var(--fj-pdp-line);
    }

    .fj-pdp-capabilities,
    .fj-pdp-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1001px) {
    .fj-pdp {
        padding-top: 100px;
    }
}

@media (min-width: 901px) {
    .fj-pdp-gallery--multiple {
        display: grid;
        grid-template-areas: "controls stage";
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    .fj-pdp-gallery--multiple .fj-pdp-gallery__stage {
        grid-area: stage;
    }

    .fj-pdp-gallery--multiple .fj-pdp-gallery__controls {
        grid-area: controls;
        flex-direction: column;
        overflow-y: auto;
    }
}

@media (max-width: 620px) {
    .fj-pdp-zoom {
        padding: 64px 16px 20px;
    }

    .fj-pdp-zoom img {
        inset: 64px 16px 20px;
        width: calc(100% - 32px);
        height: calc(100% - 84px);
    }

    .fj-pdp__shell {
        width: calc(100% - 40px);
        padding-top: 20px;
    }

    .fj-pdp__breadcrumb {
        margin-bottom: 18px;
    }

    .fj-pdp__hero {
        gap: 28px;
    }

    .fj-pdp-gallery__thumb {
        flex-basis: 56px;
        width: 56px;
        min-width: 56px;
    }

    .fj-pdp-summary h1 {
        font-size: 39px;
    }

    .fj-pdp-finishes__grid {
        grid-template-columns: repeat(5, minmax(52px, 1fr));
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .fj-pdp-highlights,
    .fj-pdp-parameters__grid,
    .fj-pdp-trust,
    .fj-pdp-capabilities,
    .fj-pdp-related__grid {
        grid-template-columns: 1fr;
    }

    .fj-pdp-highlights > div,
    .fj-pdp-highlights > article,
    .fj-pdp-trust article {
        border-right: 0;
        border-bottom: 1px solid var(--fj-pdp-line);
    }

    .fj-pdp-highlights > article:last-child,
    .fj-pdp-trust article:last-child {
        border-bottom: 0;
    }

    .fj-pdp-trust article,
    .fj-pdp-trust article:first-child,
    .fj-pdp-trust article:last-child {
        padding: 16px 0;
    }

    .fj-pdp-parameters dl > div {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .fj-pdp-parameters dt,
    .fj-pdp-parameters dd {
        padding: 11px 12px;
    }

    .fj-pdp-manufacturer__copy {
        padding: 18px 0 4px;
    }
}

@media print {
    .fj-pdp-gallery__controls,
    .fj-pdp-summary__ctas,
    .fj-pdp-summary__actions,
    .fj-pdp-quantity {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fj-pdp [data-fj-reveal],
    .fj-pdp-gallery__stage img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
