/*
 * Product listing and detail pages. The theme's own utility classes do the styling; these rules only
 * cover what the theme expressed with classes on markup that now comes from the product record
 * (short description and description are stored HTML and may arrive without the theme's classes).
 */

/* Short description: the theme's bulleted list (left primary border, check icon per line). */
.product-detail-summary ul:not([class]) {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid #233869;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.product-detail-summary ul:not([class]) > li + li {
    margin-top: 0.5rem;
}

.product-detail-summary ul:not([class]) > li:not(:has(> i))::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #233869;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

/* Description: sub-headings and the specification table as the theme drew them. */
.product-detail-content h3:not([class]) {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #233869;
    margin-top: 2rem;
}

.product-detail-content table:not([class]) {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.product-detail-content table:not([class]) th,
.product-detail-content table:not([class]) td {
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    text-align: left;
}

.product-detail-content table:not([class]) thead tr {
    background: #f9fafb;
    color: #233869;
    font-weight: 600;
}

.product-detail-content table:not([class]) tbody tr:nth-child(even) {
    background: #f9fafb;
}

.product-detail-content table:not([class]) td:first-child {
    font-weight: 600;
    color: #233869;
}

/* Wide tables scroll inside the panel instead of widening the page. */
.product-detail-content {
    overflow-x: auto;
}

/* Gallery thumbnails are keyboard focusable buttons. */
[data-product-thumb]:focus-visible {
    outline: 2px solid #f2af08;
    outline-offset: 2px;
}