/* Product detail page styles. Extracted from Views/Product/Index.cshtml.
   Page-specific only; the gallery also picks up rules from header-footer-refresh.css
   and SASS/pages/_product.scss. */

            #product .product-breadcrumb,
            #product .product-breadcrumb a,
            #product .product-breadcrumb span {
                text-transform: none;
                font-family: "sofia-pro", sans-serif;
            }

            #product .product-page-heading {
                margin-top: 20px;
                margin-bottom: 52px;
                font-family: "sofia-pro", sans-serif;
                font-size: 1.875rem;
                font-weight: 600;
                line-height: 1.1;
                color: #1a324e;
                width: fit-content;
                text-transform: none;
            }

            #product .productInfo.box .product-collection-intro .collection-title,
            #product .productInfo.box .product-collection-intro .collection-desc {
                font-weight: 400 !important;
            }

            #product .productPhoto .additionalImgs li img {
                width: 70px !important;
                height: 70px !important;
                object-fit: cover;
                box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
            }

            #product .productInfo.box {
                border: none !important;
                border-radius: 0 !important;
                overflow: visible !important;
                background: transparent !important;
            }

            #product .productInfo.box .variant {
                border: none !important;
                background: transparent !important;
                margin-bottom: 0 !important;
            }

            #product .productInfo.box .variant .product-variant-body {
                border: none !important;
                box-shadow: none !important;
                background: transparent !important;
                padding: 0 !important;
            }

            #product .productInfo.box .variant .productDetails {
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
            }

            #product .productInfo.box .variant .variant-head,
            #product .productInfo.box .variant .option-row,
            #product .productInfo.box .variant .detail-information,
            #product .productInfo.box .variant .purchase-history,
            #product .productInfo.box .variant .partner-item-row {
                margin: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }


            #product .productInfo.box .variant .option-row {
                padding-top: 11px;
                padding-bottom: 11px;
            }


            #product .productInfo.box .variant .detail-information-header,
            #product .productInfo.box .variant .detail-information-content {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            #product .productInfo.box .variant .purchase-history,
            #product .productInfo.box .variant .partner-item-row {
                border-top: 1px solid #e3e7ec;
                padding-top: 14px;
            }

            #product .productInfo.box .variant .partner-item-description {
                font-size: 0.875rem;
                line-height: 1.35;
                margin-top: 6px;
                color: #1f1f1f;
            }

            #product .productInfo.box .variant .variant-heading,
            #product .productInfo.box .variant .variant-description {
                font-weight: 400 !important;
            }

            #product .relatedLinks {
                font-size: 1.875rem;
                font-weight: 400;
                margin-bottom: 40px;
                text-transform: uppercase;
            }

            #product .relatedLinks h4 {
                font-size: inherit;
                font-weight: inherit;
                line-height: 1.1;
                margin: 0;
                text-transform: inherit;
            }

            #product #ctl00_Content_RelatedLinksSB {
                justify-content: center;
            }

            #product #ctl00_Content_RelatedLinksSB h4 {
                margin: 0 auto 8px;
                text-align: center;
            }

            #product #ctl00_Content_RelatedSB.relatedProducts {
                justify-content: center;
            }

            #product #ctl00_Content_RelatedSB .relatedProduct a {
                text-align: center;
                padding: 8px 8px 12px;
            }

            #product #ctl00_Content_RelatedSB .relatedProduct .relatedProduct-Name {
                font-size: 1.02rem;
                font-weight: 700;
                line-height: 1.22;
                color: #1f1f1f;
                margin-top: 6px;
            }

            #product #ctl00_Content_RelatedSB .relatedProduct .relatedProduct-Price {
                margin-top: 4px;
                font-size: 0.92rem;
                line-height: 1.25;
                color: #1f1f1f;
            }

            #product #ctl00_Content_RelatedSB .relatedProduct .related-component-line,
            #product #ctl00_Content_RelatedSB .relatedProduct .related-program-line,
            #product #ctl00_Content_RelatedSB .relatedProduct .related-single-price,
            #product #ctl00_Content_RelatedSB .relatedProduct .related-set-line {
                display: block;
            }

            #product #ctl00_Content_RelatedSB .relatedProduct .related-set-line {
                color: #215ea4;
                font-weight: 700;
                margin-top: 2px;
            }

            @media (min-width: 992px) {
                #product #ctl00_Content_RelatedSB .relatedProduct {
                    flex: 0 0 16.666667% !important;
                    max-width: 16.666667% !important;
                    width: 16.666667% !important;
                }
            }

/* ── In-stock badge ──────────────────────────────────────────────────
   The only existing rule for this is scoped to ".variant .priceBox", which the
   MVC product page never renders, so the text arrived unstyled and read as a
   caption under the price. Availability is the thing dealers scan for, so it
   gets badge treatment: its own line, a colour nothing else on the page uses,
   and a dot to catch the eye. Placed here rather than in _product.scss so it
   loads after 2021.css and needs no !important. */
#product .variant-pricing .in-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
    padding: 8px 18px 8px 15px;
    border-radius: 30px;
    background: #e7f4ec;
    color: #14683c;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: .01em;
    white-space: nowrap;
}

#product .variant-pricing .in-stock::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1c9257;
    flex: 0 0 auto;
}

/* The price and the badge sit on separate lines - side by side the badge reads
   as part of the price. */
#product .variant-pricing .variant-price {
    display: block;
}

/* ── Marketing legend badges ─────────────────────────────────────────
   Listing cards compress these to single gold letters and need a modal to
   explain them; here there is room for the words. Deliberately quieter than
   the in-stock badge - availability is what dealers act on, these are context. */
#product .product-legends {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

#product .product-legend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid #e6d5a8;
    border-radius: 30px;
    background: #fdf8ec;
    color: #6d5512;
    font-family: "sofia-pro", sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: .01em;
}

#product .product-legend img {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    object-fit: contain;
}

/* ── Details & Customize ─────────────────────────────────────────────
   Was a 3-column grid, which put items of very different heights side by
   side - the quality chips made every row ragged. One attribute per row with
   a fixed label column keeps the values aligned regardless of content. */
#product .detail-grid {
    display: block;
}

#product .detail-grid .detail-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f3f6;
}

#product .detail-grid .detail-item:last-child {
    border-bottom: 0;
}

/* Wide enough for "Diamond Quality:" plus its help icon, and nowrap so the icon
   can never drop to its own line. */
#product .detail-grid .detail-item .detail-label {
    flex: 0 0 170px;
    margin-right: 0;
    white-space: nowrap;
}

#product .detail-group {
    margin-bottom: 18px;
}

#product .detail-group-title {
    font-size: 0.8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8ba0b4;
    margin-bottom: 2px;
}

@media (max-width: 575px) {
    #product .detail-grid .detail-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #product .detail-grid .detail-item .detail-label {
        flex: 0 0 auto;
        white-space: normal;
    }
}

/* Flex children won't shrink below their content width without this, which is
   what let the image and arrows overflow the column. */
@media (max-width: 991px) {
    #product .productPhoto #ctl00_Content_ImageArea {
        min-width: 0;
    }
}

/* ── Cart button busy state ──────────────────────────────────────────
   Spinner is a background image because the main button is an <input>, which
   can't carry pseudo-elements. */
.cartButton.is-busy,
.setButton.is-busy,
.partner-item-add-to-cart.is-busy {
    cursor: progress;
    opacity: .8;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    padding-right: 40px;
}

/* ── Help icon ───────────────────────────────────────────────────── */
#product .option-help-link {
    display: inline-block;
    color: #9aa8b8;
    margin-left: 5px;
    text-decoration: none;
    border: 0;
    line-height: 0;
}

#product .option-help-link:hover {
    color: #215ea4;
    border: 0;
}

/* Nudged onto the text baseline - inline-block alone sits it slightly high. */
#product .help-icon {
    width: 15px;
    height: 15px;
    vertical-align: -0.2em;
}

#productHelpModal .modal-body {
    padding: 20px 24px 24px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

#productHelpModal .modal-body table {
    width: auto;
    border-collapse: collapse;
}

#productHelpModal .modal-body th {
    font-weight: 600;
    padding: 4px 18px 8px 0;
    border-bottom: 1px solid #e7ebf0;
    text-align: left;
}

#productHelpModal .modal-body td {
    padding: 5px 18px 5px 0;
    vertical-align: top;
}

#productHelpModal .modal-body p {
    margin: 0 0 12px;
}

#productHelpModal .help-loading {
    color: #8ba0b4;
    margin: 0;
}

/* ── Size chips ──────────────────────────────────────────────────────
   The shared .choice-pill styling shows a visible radio, which works for the
   two or three options Completion and Color have but not for twenty-odd sizes.
   Here the radio is hidden and the label becomes the control, so every size and
   its availability is visible at once - the thing a dropdown structurally
   cannot do. A dot marks stock; an unmarked chip is made to order, NOT
   unavailable, so nothing is ever disabled. */
/* Sizes need the full row width - beside its label the grid wraps into a narrow
   column and the sizes stop reading as one set. The other option rows keep the
   side-by-side label, so this is scoped to the size row only. */
#product .productInfo.box .variant .option-row.option-row-size {
    display: block;
}

#product .option-row-size .option-label {
    display: block;
    width: auto;
    margin-bottom: 10px;
}

#product .option-row-size .option-value {
    display: block;
    width: auto;
}

/* .variant-choice-list defaults to 14px, which is spaced for bare radios. The chip
   lists carry their own padding, so they need a tighter, shared gap. */
#product .variant-choice-list.size-choice-list,
#product .variant-choice-list.color-choice-list,
#product .variant-choice-list.quality-choice-list {
    gap: 8px;
}

#product .size-choice-list .choice-pill,
#product .color-choice-list .choice-pill,
#product .quality-choice-list .choice-pill {
    position: relative;
}

#product .size-choice-list .choice-pill input,
#product .color-choice-list .choice-pill input,
#product .quality-choice-list .choice-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

#product .size-choice-list .choice-pill span,
#product .color-choice-list .choice-pill span,
#product .quality-choice-list .choice-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid #d8dfe8;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9375rem;
    line-height: 1;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

/* Fixed width so every size reads as one set - content length and the bold weight
   on the selected chip would otherwise resize them. */
#product .size-choice-list .size-pill span {
    width: 68px;
    padding-left: 4px;
    padding-right: 4px;
}

#product .size-choice-list .choice-pill:hover span,
#product .color-choice-list .choice-pill:hover span,
#product .quality-choice-list .choice-pill:hover span {
    border-color: #1a324e;
}

#product .size-choice-list .choice-pill input:focus-visible + span,
#product .color-choice-list .choice-pill input:focus-visible + span,
#product .quality-choice-list .choice-pill input:focus-visible + span {
    outline: 2px solid #215ea4;
    outline-offset: 2px;
}

#product .size-choice-list .choice-pill input:checked + span,
#product .color-choice-list .choice-pill input:checked + span,
#product .quality-choice-list .choice-pill input:checked + span {
    border-color: #1a324e;
    background: #1a324e;
    color: #fff;
    font-weight: 600;
}

/* Made-to-order sizes stay hidden until asked for, so Stock leads. */
#product .size-choice-list.is-collapsed .size-pill.is-hidden-size {
    display: none;
}

#product .size-show-all {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: #215ea4;
    font-size: 0.8125rem;
    text-decoration: underline;
    cursor: pointer;
}

#product .size-show-all:hover {
    color: #1a324e;
}

/* Offset outside the chip so it stays legible against the filled selected state. */
#product .size-choice-list .size-pill.is-stocked::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1c9257;
    border: 2px solid #fff;
    pointer-events: none;
}


/* Quality codes are short - keep the chips tighter than the colour ones. */
#product .quality-choice-list {
    margin-top: 4px;
}

#product .quality-choice-list .choice-pill span {
    min-width: 40px;
    padding: 7px 10px;
    font-size: 0.875rem;
}