.product-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: 32px;
    color: var(--color-text);
}

.product-page--without-form {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
}

.product-details {
    min-width: 0;
}

.product-details > h1,
.product-overview-title {
    margin: 0 0 20px;
    color: var(--color-text);
    font-size: 28px;
    line-height: 1.3;
}

.product-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 24px;
}

.product-overview--pef {
    grid-template-areas:
        'intro photo'
        'specs photo';
    row-gap: 16px;
}

.product-overview--pef .product-overview-copy {
    grid-area: intro;
}

.product-overview--pef .product-photo {
    grid-area: photo;
}

.product-overview-specs {
    grid-area: specs;
    min-width: 0;
}

.product-overview-copy {
    min-width: 0;
}

.product-photo {
    width: 100%;
    max-width: 260px;
    margin: 0;
}

.product-photo--side {
    float: right;
    margin: 0 0 16px 24px;
}

.product-photo-image {
    display: block;
    width: 100%;
    height: auto;
}

.product-description,
.product-alternate {
    font-size: 17px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.product-description {
    overflow-x: auto;
}

.product-description p,
.product-alternate p {
    margin: 0 0 16px;
}

.product-description ul,
.product-description ol,
.product-alternate ul,
.product-alternate ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.product-description li + li,
.product-alternate li + li {
    margin-top: 8px;
}

.product-description h2,
.product-description h3,
.product-alternate h2,
.product-alternate h3 {
    margin: 24px 0 12px;
    color: var(--color-text);
    font-size: 20px;
    line-height: 1.35;
}

.product-overview-specs h2 {
    margin-top: 0;
}

.product-specs {
    width: 100%;
    max-width: 100%;
    margin: 16px 0 0;
    border-collapse: collapse;
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
}

.product-overview--pef .product-specs {
    table-layout: fixed;
}

.product-overview--pef .product-specs th:first-child {
    width: 58%;
}

.product-specs td,
.product-specs th {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.product-specs thead td,
.product-specs thead th {
    color: var(--color-text);
    background: var(--color-brand-soft);
    font-weight: 600;
}

.product-specs .product-specs-group-heading {
    color: var(--color-text);
    background: var(--color-surface-muted);
    font-weight: 600;
}

.product-specs .product-specs-subitem {
    padding-left: 24px;
    font-weight: 400;
}

.product-specs p {
    margin: 0;
}

.product-specs p + p {
    margin-top: 8px;
}

.product-description a,
.product-alternate a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-description a:hover,
.product-alternate a:hover {
    color: var(--color-text);
}

.product-description a:focus-visible,
.product-alternate a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.product-alternate {
    margin-top: 28px;
    padding: 16px 20px;
    border-left: 3px solid var(--color-control-border);
    background: var(--color-surface-muted);
    overflow-x: auto;
}

.product-alternate > h2:first-child {
    margin-top: 0;
}

@media (max-width: 900px) {
    .product-page {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 700px) {
    .product-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-overview--pef {
        grid-template-areas:
            'intro'
            'photo'
            'specs';
    }

    .product-photo {
        margin-inline: auto;
    }

    .product-photo--side {
        float: none;
        margin: 0 auto 16px;
    }
}

@media (max-width: 600px) {
    .product-details > h1,
    .product-overview-title {
        font-size: 24px;
    }
}

.product-contact {
    padding: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: 17px;
    line-height: 1.6;
}

.product-contact p + p {
    margin-top: 8px;
}

.product-contact a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}