/* =====================================================================
   Product details page (kpodj.products.product_new): "Option B" redesign.
   Loaded only by that template, after the theme stylesheets.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Top row: buy block (AI Score down to the condition banner) vertically
      centered on the main product image (desktop). The gallery column is
      flattened into a grid so the Videos / Photos row under the image sits
      in its own grid row and does not shift the center point.
      On tablet and phone the columns stack and keep top alignment.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    .pdp-top-row {
        display: grid;
        grid-template-columns: 7fr 5fr;
        align-items: center;
    }

    .pdp-top-row > .col-sm-7,
    .pdp-top-row > .col-sm-7 > .row {
        display: contents;
    }

    .pdp-top-row > .col-sm-7 > .row > *,
    .pdp-top-row > .col-lg-5 {
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .pdp-top-row > .col-sm-7 > .row > .order-up {
        grid-column: 1;
        grid-row: 1;
    }

    .pdp-top-row > .col-sm-7 > .row > :last-child {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }

    .pdp-top-row > .col-lg-5 {
        grid-column: 2;
        grid-row: 1;
    }
}


/* ---------------------------------------------------------------------
   2. AI Score badge above the title. The tooltip floats above the badge,
      so opening it never moves the title, price or buttons.
   --------------------------------------------------------------------- */
.ai-score {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin: 0 0 10px;
    padding: 0 12px 0 5px;
    background: #f4f7fb;
    border: 1px solid #d7e3ee;
    border-radius: 999px;
    font: 700 14px/1 Lato, sans-serif;
    color: #1f2a37;
    cursor: pointer;
    user-select: none;
}

.ai-score:focus-visible {
    outline: 2px solid #0a92ca;
    outline-offset: 2px;
}

.ai-score__ring {
    --score: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: conic-gradient(#0a92ca calc(var(--score) * 1%), #e5e7eb 0);
}

.ai-score__ring span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f4f7fb;
    font-size: 9px;
    color: #236496;
}

.ai-score__q {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #236496;
    color: #fff;
    font-size: 11px;
}

.ai-score__tip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 30;
    width: max-content;
    max-width: min(340px, calc(100vw - 32px));
    padding: 10px 14px;
    background: #1f2a37;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18);
    font: 400 13px/1.5 Lato, sans-serif;
    white-space: normal;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.ai-score__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 18px;
    border: 6px solid transparent;
    border-top-color: #1f2a37;
}

/* Desktop: hover or keyboard focus. Touch: tap toggles .is-open (see the page script). */
@media (hover: hover) {
    .ai-score:hover .ai-score__tip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.ai-score:focus-visible .ai-score__tip,
.ai-score.is-open .ai-score__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ---------------------------------------------------------------------
   3. "$0 Tax / $0 Shipping / $X Back or Join VIP" stays on one line.
      The pills scale with the buy column instead of wrapping; in narrow
      columns the trailing "for upfront discounts." (.vip-extra) is hidden.
   --------------------------------------------------------------------- */
.status-text-wrap {
    container-type: inline-size;
    flex-wrap: nowrap !important;
    gap: clamp(4px, 1.2cqi, 8px);
    margin: 0;
}

.status-text-wrap .prod-status {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(11px, 2.9cqi, 15px);
    line-height: 1.2;
    padding: 0.45em 0.85em;
}

@container (max-width: 420px) {
    .status-text-wrap .vip-extra {
        display: none;
    }

    .status-text-wrap .prod-status {
        font-size: clamp(11px, 3.6cqi, 15px);
    }
}


/* ---------------------------------------------------------------------
   4. Condition banner below Add to Cart and the Affirm "0% APR" line ("Open Box available for $X!
      Shop Now"). The whole banner row is the control: a link when there
      is one other option, a disclosure button when there are several.
      Links use the same ?option= URLs as before, so cart logic does not
      change. KPODJ palette: #236496 / #0a92ca / #d9ecf8.
   --------------------------------------------------------------------- */
.condition-banner {
    container-type: inline-size;        /* lets the wording switch on the banner's own width */
    margin: 0 0 14px;
    border: 1px solid #b9dcf0;
    border-left: 4px solid #0a92ca;
    border-radius: 8px;
    background: #eef7fd;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Hover/focus feedback on the whole banner, so it reads as one clickable surface. */
.condition-banner:has(> .condition-banner__trigger:hover) {
    border-color: #0a92ca;
    background: #e3f2fc;
    box-shadow: 0 4px 14px rgba(35, 100, 150, 0.16);
    transform: translateY(-1px);
}

.condition-banner:has(> .condition-banner__trigger:focus-visible) {
    outline: 2px solid #0a92ca;
    outline-offset: 2px;
}

.condition-banner__trigger {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: 400 15px/1.4 Lato, sans-serif;
    color: #1f2a37 !important;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}

.condition-banner__trigger:focus {
    outline: none;
}

.condition-banner__icon {
    flex: 0 0 auto;
    font-size: 17px;
    color: #236496;
}

.condition-banner__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #1f2a37;
}

.condition-banner__text strong {
    font-weight: 900;
}

.condition-banner__price,
.condition-banner__save {
    font-weight: 900;
    color: #236496;
}

.condition-banner__save {
    font-weight: 700;
}

/* "Shop Now" + arrow: looks like a link, but the whole row is the target. */
.condition-banner__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    font: 700 15px/1.2 Lato, sans-serif;
    color: #236496;
    white-space: nowrap;
}

.condition-banner__action-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.condition-banner__action .fa {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.condition-banner__trigger:hover .condition-banner__action {
    color: #0a92ca;
}

.condition-banner__trigger:hover .fa-chevron-right {
    transform: translateX(3px);
}

.condition-banner__trigger[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Option list, expanded in place under the banner row. */
.condition-banner__panel {
    padding: 0 14px 12px;
}

.condition-banner__options {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.condition-banner__options li {
    display: block;
}

.condition-banner__option {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #d7e3ee;
    border-radius: 8px;
    background: #fff;
    font: 400 14px/1.3 Lato, sans-serif;
    color: #1f2a37 !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.condition-banner__option:hover {
    border-color: #0a92ca;
    background: #f7fbfe;
}

.condition-banner__option:focus-visible {
    outline: 2px solid #0a92ca;
    outline-offset: 2px;
}

.condition-banner__option-name {
    grid-column: 1;
    font-size: 15px;
    font-weight: 700;
}

.condition-banner__option-note {
    grid-column: 1;
    font-size: 12.5px;
    color: #6b7280;
}

.condition-banner__option-note:empty {
    display: none;
}

.condition-banner__option-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 15px;
    font-weight: 900;
    color: #236496;
}

@media (prefers-reduced-motion: reduce) {
    .condition-banner,
    .condition-banner__action .fa {
        transition: none;
    }

    .condition-banner:has(> .condition-banner__trigger:hover) {
        transform: none;
    }
}

.condition-banner__short {
    display: none;
}

/* Narrow banners (phones, narrow buy columns): shorter wording, tighter spacing, still one line. */
@container (max-width: 470px) {
    .condition-banner__long {
        display: none;
    }

    .condition-banner__short {
        display: inline;
    }

    .condition-banner__trigger {
        gap: 10px;
        padding: 10px 12px;
    }

    .condition-banner__text,
    .condition-banner__action {
        font-size: 14px;
    }
}

/* Smallest phones: drop the icon so the short wording still fits on the line. */
@container (max-width: 330px) {
    .condition-banner__icon {
        display: none;
    }
}


/* ---------------------------------------------------------------------
   5. Content area under the gallery: Inter typography and neutral greys.
   --------------------------------------------------------------------- */
#product-details-section {
    font-family: Inter, Lato, sans-serif;
    color: #374151;
}

#product-details-section .card-body:is(.short-description, .full-description) h2 {
    font-family: Inter, Lato, sans-serif;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
    text-transform: none;
    margin: 8px 0 12px;
}

#product-details-section .card-body:is(.short-description, .full-description) h3 {
    font-family: Inter, Lato, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: normal;
    color: #111827;
    text-transform: none;
    padding-left: 10px;
    border-left: 3px solid #0a92ca;
    margin: 24px 0 10px;
}

#product-details-section .card-body:is(.short-description, .full-description),
#product-details-section .card-body:is(.short-description, .full-description) p {
    font-size: 15px;
    line-height: 1.65;
    color: #374151;
}

#product-details-section .card-body:is(.short-description, .full-description) strong {
    color: #111827;
    font-weight: 600;
}

#product-details-section .card-body:is(.short-description, .full-description) a {
    color: #236496;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 100, 150, 0.35);
}

#product-details-section .card-body:is(.short-description, .full-description) a:hover {
    border-bottom-color: #236496;
}

#product-details-section .card-body:is(.short-description, .full-description) a.button,
#product-details-section .card-body:is(.short-description, .full-description) .product-buttons a {
    border-bottom: 0;
}

#product-details-section .card-body:is(.short-description, .full-description) ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 14px;
}

/* The theme sets li { display: inline-block } globally; kpodj_new.css forces disc bullets. */
#product-details-section .card-body:is(.short-description, .full-description) li {
    display: block;
    position: relative;
    list-style: none !important;
    padding-left: 18px;
    margin-left: 0;
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.55;
    color: #374151;
}

#product-details-section .card-body:is(.short-description, .full-description) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a92ca;
}

/* "Also known as" line at the end of the description. */
#product-details-section .card-body:is(.short-description, .full-description) h4.text-color-1 {
    font-family: Inter, Lato, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #236496 !important;
}

/* "Research with AI" spec group headers. */
#specsSubAccordion .accordion-button {
    font-family: Inter, Lato, sans-serif;
    font-size: 13px;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    background-color: #fff !important;
    box-shadow: none;
    border-bottom: 1px solid #e5e7eb;
}

#specsSubAccordion .accordion-button:focus-visible {
    outline: 2px solid #0a92ca;
    outline-offset: -2px;
}

/* Spec rows. */
#specsSubAccordion td {
    font-size: 14px;
    line-height: 1.45;
    padding-top: 9px;
    padding-bottom: 9px;
}

#specsSubAccordion td.text-muted {
    color: #6b7280 !important;
    font-weight: 400 !important;
}

#specsSubAccordion td:last-child {
    color: #111827;
    font-weight: 500;
}


/* ---------------------------------------------------------------------
   6. Reviews panel: same Inter typography and greys as the description.
      The <x-reviews> component is shared, so everything is scoped here.
   --------------------------------------------------------------------- */
#product-details-section #reviews-section {
    font-family: Inter, Lato, sans-serif;
    color: #374151;
}

#product-details-section #reviews-section .product-review {
    padding: 4px 0 0;
}

#product-details-section #reviews-section .reviews-empty {
    margin: 14px 0 4px;
    font-size: 15px;
    color: #6b7280;
}

/* Divider above every review after the first, so a review's comments stay grouped with it. */
#product-details-section #reviews-section .product-review ~ .product-review {
    margin-top: 16px;
    padding-top: 4px;
    border-top: 1px solid #e5e7eb;
}

/* "(1/2) Product name By Reviewer 4 pts" */
#product-details-section #reviews-section .product-review h6 {
    font-family: Inter, Lato, sans-serif;
    font-size: 14px;
    font-style: normal !important;      /* overrides Bootstrap .fst-italic */
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    color: #6b7280;
    margin: 12px 0 6px;
}

/* Product name gets the description panel title styling, on its own first line;
   the counter, reviewer and points follow as a quieter meta line. */
#product-details-section #reviews-section .product-review h6 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 5px;
    row-gap: 2px;
}

#product-details-section #reviews-section .product-review h6 .review-product-name {
    flex: 0 0 100%;
    order: -1;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
}

#product-details-section #reviews-section .product-review h6 .text-color-2 {
    font-weight: 600;
    color: #111827 !important;
}

#product-details-section #reviews-section .points-modal {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f9fe;
    font-size: 12px;
    font-weight: 600;
    color: #236496;
    text-decoration: none;
}

#product-details-section #reviews-section .rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#product-details-section #reviews-section .review-date {
    float: none;
    font-size: 13px;
    color: #6b7280;
}

#product-details-section #reviews-section .product-review > br {
    display: none;
}

#product-details-section #reviews-section .product-review p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: #374151;
}

#product-details-section #reviews-section .comment {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #236496;
    text-decoration: none;
}

#product-details-section #reviews-section .comment-list {
    margin: 10px 0 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #0a92ca !important;
    border-radius: 8px !important;
    background: #f9fafb;
}

#product-details-section #reviews-section .comment-list p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

#product-details-section #reviews-section .comment-list strong {
    font-weight: 600;
    color: #111827;
}

/* "Write your review" / "Your Rating" labels match the condition picker title. */
#product-details-section #reviews-section .post-review h6.header {
    margin: 0 0 8px;
    font: 600 13px/1 Inter, Lato, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

#product-details-section #reviews-section .textarea {
    padding: 10px 12px;
    border: 1.5px solid #d7dde5;
    border-radius: 10px;
    font: 400 15px/1.5 Inter, Lato, sans-serif;
    color: #374151;
}

#product-details-section #reviews-section .textarea:focus {
    border-color: #0a92ca;
    outline: 2px solid rgba(10, 146, 202, 0.25);
    outline-offset: 0;
}

/* "Share Image & Video" under the review list. */
#product-details-section #accordionExample2 .btn-link {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    text-transform: none;
    color: #236496 !important;
    text-decoration: none;
}


/* ---------------------------------------------------------------------
   7. Questions panel (rendered by getQuestions() in the page script):
      same typography as the description and reviews.
   --------------------------------------------------------------------- */
#product-details-section #question_list {
    font-family: Inter, Lato, sans-serif;
    color: #374151;
}

#product-details-section #question_list > li {
    display: block;
    font-size: 15px;
    color: #374151;
}

#product-details-section #question_list .question-item ~ .question-item {
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* "Question (1 of 3) Asked by Name | 12 Points | (date)" and "By Name | (date)" */
#product-details-section #question_list h6 {
    font-family: Inter, Lato, sans-serif;
    font-size: 13px;
    font-style: normal !important;      /* overrides Bootstrap .fst-italic */
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    color: #6b7280;
    margin: 0 0 4px;
}

#product-details-section #question_list h6 .text-color-2 {
    font-weight: 600;
    color: #111827 !important;
}

#product-details-section #question_list h6 a {
    color: #236496;
    font-weight: 600;
    text-decoration: none;
}

/* Same pattern as reviews: the question text leads, styled like the description panel title,
   with the "Question (1 of 3) Asked by ..." meta line under it. Order is set with flexbox
   because the markup comes from generateQuestion() in the page script. */
#product-details-section #question_list .question-item > .media > .media-body > .row:first-child > .col-sm-12 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 12px;
}

#product-details-section #question_list .question-item > .media > .media-body > .row:first-child > .col-sm-12 > p {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
}

#product-details-section #question_list .question-item > .media > .media-body > .row:first-child > .col-sm-12 > .float-end {
    order: 2;
    float: none !important;
}

#product-details-section #question_list .question-item > .media > .media-body > .row:first-child > .col-sm-12 > h6 {
    order: 3;
    flex: 0 0 100%;
}

#product-details-section #question_list .question-item > .media > .media-body > .row:first-child > .col-sm-12 > ul {
    order: 4;
    flex: 0 0 100%;
    text-align: right;
}

#product-details-section #question_list hr {
    margin: 12px 0;
    border-color: #e5e7eb;
    opacity: 1;
}

#product-details-section #question_list .comment-section {
    margin-left: 16px !important;
    padding-left: 0;
}

/* Answers: replaces the inline grey box with the same accent box used for review comments. */
#product-details-section #question_list .answer-item > .media {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #0a92ca !important;
    border-radius: 8px;
    background: #f9fafb !important;
}

#product-details-section #question_list .answer-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

#product-details-section #question_list .pull-right.fst-italic,
#product-details-section #question_list .pull-right.fst-italic a {
    font-size: 12px;
    font-style: normal !important;
}

#product-details-section #question_list .answer-toggle-button,
#product-details-section #question_list a .text-color-2 {
    font-size: 13px;
    font-weight: 600;
    color: #236496 !important;
}

#product-details-section #question_list .fa-commenting.text-color-2 {
    color: #236496 !important;
}

/* Ask-a-question footer. */
#product-details-section #accordionExample3 .card-footer label {
    font: 600 13px/1 Inter, Lato, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

#product-details-section #accordionExample3 .card-footer textarea {
    padding: 10px 12px;
    border: 1.5px solid #d7dde5;
    border-radius: 10px;
    font: 400 15px/1.5 Inter, Lato, sans-serif;
    color: #374151;
}

#product-details-section #accordionExample3 .card-footer textarea:focus {
    border-color: #0a92ca;
    box-shadow: 0 0 0 2px rgba(10, 146, 202, 0.2);
}

#product-details-section #accordionExample3 .card-footer .onclick-login-modal {
    font-weight: 600;
}


/* ---------------------------------------------------------------------
   8. Collapsible panels (.pdp-panel, header from <x-pdp-panel-header>):
      description, AI research, payment plans, reviews, questions and
      categories share the same card, header and "View" / "Hide" pill.
      Bootstrap collapse toggles .collapsed on the header button, which
      switches the pill label and the chevron.
   --------------------------------------------------------------------- */
#product-details-section .pdp-panel .card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    font-family: Inter, Lato, sans-serif;
    color: #374151;
}

#product-details-section .pdp-panel__header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 0;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

#product-details-section .pdp-panel__header:focus-visible {
    outline: 2px solid #0a92ca;
    outline-offset: -2px;
}

#product-details-section .pdp-panel__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef4fb;
    color: #236496;
    font-size: 17px;
}

#product-details-section .pdp-panel__heading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#product-details-section .pdp-panel__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
    overflow-wrap: anywhere;
}

#product-details-section .pdp-panel__subtitle {
    font-size: 13px;
    line-height: 1.35;
    color: #6b7280;
}

#product-details-section .pdp-panel__toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

#product-details-section .pdp-panel__toggle .fa {
    font-size: 11px;
    transition: transform 0.2s ease;
}

#product-details-section .pdp-panel__header.collapsed .pdp-panel__toggle-hide,
#product-details-section .pdp-panel__header:not(.collapsed) .pdp-panel__toggle-view {
    display: none;
}

#product-details-section .pdp-panel__header:not(.collapsed) .pdp-panel__toggle .fa {
    transform: rotate(180deg);
}

/* Solid divider between header and body (the theme draws a dashed .card-header border). */
#product-details-section .pdp-panel .card > :is(.collapse, .collapsing) {
    border-top: 1px solid #e5e7eb;
}

#product-details-section .pdp-panel .card + .card {
    margin-top: 20px !important;
}

#product-details-section .pdp-panel .card-header {
    border-bottom: 0;
    background: #fff;
}

#product-details-section .pdp-panel .card-footer {
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}


/* ---------------------------------------------------------------------
   9. Payment Plans & Financing panel body (kpodj.products.payment_plans_partial).
   --------------------------------------------------------------------- */
#product-details-section .pay-plans__body {
    padding: 4px 18px 18px;
}

/* "RIGHT FROM YOUR CART ————" */
#product-details-section .pay-plans__section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #374151;
}

#product-details-section .pay-plans__section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
}

#product-details-section .pay-plans__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#product-details-section .pay-plans__option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
}

#product-details-section .pay-plans__option:last-child {
    border-bottom: 0;
}

#product-details-section .pay-plans__logo {
    display: grid;
    flex: 0 0 96px;
    place-items: center;
    height: 44px;
    padding: 6px 8px;
    border: 1.5px dashed #d7dde5;
    border-radius: 8px;
    background: #fff;
}

#product-details-section .pay-plans__logo img {
    max-width: 100%;
    max-height: 28px;
    width: auto;
    height: auto;
}

#product-details-section .pay-plans__text {
    flex: 1 1 auto;
    min-width: 0;
}

#product-details-section .pay-plans__option-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #111827;
}

#product-details-section .pay-plans__note {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4b5563;
}

#product-details-section .pay-plans__note strong {
    font-weight: 700;
    color: #111827;
}

#product-details-section .pay-plans__note a {
    font-weight: 700;
    color: #236496 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#product-details-section .pay-plans__badge {
    display: inline-block;
    margin-bottom: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #fdf0d5;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a4b00;
}

/* SquareCable partner box. */
#product-details-section .pay-plans__partner {
    margin: 8px 0 4px;
    padding: 18px;
    border-radius: 12px;
    background: #eef3fb;
}

#product-details-section .pay-plans__partner-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
}

#product-details-section .pay-plans__partner-text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4b5563;
}

#product-details-section .pay-plans__partner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 8px;
    background: #236496;
    font-size: 14px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
}

#product-details-section .pay-plans__partner-btn:hover {
    background: #1e5480;
}

#product-details-section .pay-plans__partner-btn:focus-visible,
#product-details-section .pay-plans__layaway-link:focus-visible {
    outline: 2px solid #0a92ca;
    outline-offset: 2px;
}

#product-details-section .pay-plans__partner-btn .fa {
    font-size: 12px;
}

/* "Free Lay-Away Plans by Phone" link under the store card. */
#product-details-section .pay-plans__layaway-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #236496 !important;
    text-decoration: none !important;
}

#product-details-section .pay-plans__layaway-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

#product-details-section .pay-plans__layaway-link .fa {
    font-size: 10px;
    transition: transform 0.2s ease;
}

#product-details-section .pay-plans__layaway-link:not(.collapsed) .fa {
    transform: rotate(180deg);
}

#product-details-section .pay-plans__layaway {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #0a92ca;
    border-radius: 8px;
    background: #f9fafb;
    list-style: none;
}

#product-details-section .pay-plans__layaway li {
    display: block;
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #374151;
}

#product-details-section .pay-plans__layaway li:last-child {
    margin-bottom: 0;
}

#product-details-section .pay-plans__layaway li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a92ca;
}

#product-details-section .pay-plans__layaway a {
    font-weight: 700;
    color: #236496 !important;
}

@media (max-width: 575px) {
    #product-details-section .pdp-panel__header {
        padding: 14px;
        gap: 10px;
    }

    #product-details-section .pdp-panel__toggle {
        padding: 6px 12px;
    }

    #product-details-section .pay-plans__body {
        padding: 4px 14px 16px;
    }

    #product-details-section .pay-plans__logo {
        flex-basis: 84px;
    }
}


/* ---------------------------------------------------------------------
   10. Stock status pill (#prodStatus) is clickable: "In Stock!" opens the
      zip-code ETA checker, the other statuses open an info popover.
      A chevron (drawn in currentColor, so it follows the pill's text
      color) makes that visible; it flips while the ETA or popover is open.
   --------------------------------------------------------------------- */
#prodStatus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}

#prodStatus::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s ease;
}

#prodStatus.is-open::after,
#prodStatus:has(a[aria-describedby])::after {
    transform: rotate(180deg);
}

#prodStatus:hover {
    filter: brightness(0.96);
    box-shadow: 0 0 0 1px rgba(35, 100, 150, 0.35);
}

#prodStatus:has(a:focus-visible) {
    outline: 2px solid #0a92ca;
    outline-offset: 2px;
}

#prodStatus a:focus {
    outline: none;
}