/* Product details and options. */
.product-section { padding-block: 190px 45px; }
.product-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10%; padding-inline: 4.2% 13%; align-items: start; }
.product-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-gallery__item { display: block; padding: 0; aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.product-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.product-info .eyebrow { margin-block: 5px 28px; }
.product-info h1 { font-size: 56px; line-height: .85; font-weight: 900; text-transform: uppercase; margin-bottom: 28px; overflow-wrap: normal; }
.product-description { font-size: 18px; font-weight: 400; line-height: 1.35; color: #1c1c1c; }
.product-price { margin-top: 54px; font-size: 18px; line-height: 1.35; font-weight: 400; }
.product-price p + p { margin-top: 10px; }
.product-price .product-discount-badge { margin-bottom: 12px; }
.product-form { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 55px; }
.product-options { display: flex; flex-direction: column; gap: 10px; width: 128px; }
.product-options select { display: block; width: 100%; height: 38px; padding: 8px 15px; color: white; background: var(--palette-navy); border: 1px solid #ccc; font-size: 14px; }
.product-add { font-size: 12px; padding: 24px 30px; white-space: nowrap; }
.product-form .form-status { flex-basis: 100%; }
.product-related { background: var(--palette-sand); }
.product-returns { padding-block: 45px 110px; }
.product-returns__content { width: 66%; margin-left: auto; font-size: 13px; color: #777; font-weight: 400; line-height: 1.35; }
.product-returns h2 { font-size: 12.6px; margin-bottom: 16px; }
.product-returns dl { margin: 0 0 18px; }
.product-returns dt { font-weight: 700; color: #666; }
.product-returns dd { margin: 0 0 12px; }
.refund-link { color: #666; font-weight: 700; text-decoration: underline; }

/* Product image lightbox. */
.product-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; background: transparent; color: #ddd; overflow: hidden; }
.product-lightbox[open] { display: flex; flex-direction: column; justify-content: space-between; padding: 2vh 0; }
.product-lightbox::backdrop { background: rgb(0 0 0 / .9); }
.lightbox-stage { height: 84vh; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lightbox-image { max-height: 100%; max-width: 90vw; object-fit: contain; }
.lightbox-close { position: absolute; z-index: 2; right: 18px; top: 20px; }
.lightbox-thumbnails { display: flex; gap: 18px; justify-content: center; overflow-x: auto; height: 10vh; min-height: 50px; }
.lightbox-thumbnails button { height: 100%; aspect-ratio: 1; flex: none; padding: 0; }
.lightbox-thumbnails img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-thumbnails button[aria-pressed='true'] { opacity: .4; }
.lightbox-arrow { position: absolute; top: 40%; width: 60px; height: 70px; z-index: 1; color: #aaa; }
.lightbox-arrow::after { content: ''; display: block; width: 24px; height: 24px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; rotate: 45deg; margin: auto; }
.lightbox-arrow--previous { left: 0; }
.lightbox-arrow--previous::after { rotate: -135deg; }
.lightbox-arrow--next { right: 0; }
.lightbox-arrow:disabled { visibility: hidden; }
@media (min-width: 700px) and (max-width: 1079px) {
    .product-layout { padding-inline: 0; gap: 48px; grid-template-columns: 1.2fr 1fr; }
    .product-info h1 { font-size: 44px; }
    .product-form { gap: 16px; }
}
@media (max-width: 699px) {
    .product-section { padding-block: 155px 70px; }
    .product-layout { display: flex; flex-direction: column; padding-inline: 0; gap: 35px; }
    .product-gallery, .product-info { width: 100%; }
    .product-info h1 { font-size: 38px; line-height: .95; margin-bottom: 25px; }
    .product-info .eyebrow { margin-bottom: 36px; }
    .product-description { font-size: 18px; }
    .product-price { margin-top: 55px; }
    .product-form { margin-top: 55px; gap: 24px; }
    .product-options { width: 128px; }
    .product-returns { padding-block: 45px 80px; }
    .product-returns__content { width: 100%; }
    .product-returns h2 { font-size: 11px; }
    .lightbox-stage { height: 80vh; }
    .lightbox-thumbnails { justify-content: flex-start; padding-inline: 16px; gap: 8px; }
    .lightbox-arrow { width: 38px; }
    .lightbox-arrow::after { width: 18px; height: 18px; }
}