/* ==========================================================================
   Product detail page styles (pd-*)
   --------------------------------------------------------------------------
   Only the blocks that are genuinely unique to the product detail page live
   here: the gallery, the instant-quote card and the specification table.
   Everything else on that page (buttons, headings, feature cards, imagery,
   the customize/tabs panel, the CTA banner) reuses the shared hp-* primitives
   from public/css/home.css, so the brand colours come from the tokens defined
   there instead of a second copy of the palette.

   Form fields deliberately reuse the theme's .single_input pattern so they
   match the site-wide quote request form.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gallery — large image with a horizontally scrolling thumbnail carousel
   -------------------------------------------------------------------------- */

/* The quote form column is much taller, so pin the gallery while it scrolls. */
@media (min-width: 992px) {
    .pd-gallery-sticky { position: sticky; top: 96px; }
}

.pd-gallery-main { background: var(--hp-gray); border-radius: var(--hp-radius); overflow: hidden; }
.pd-gallery-main img { width: 100%; height: 460px; object-fit: contain; display: block; }

.pd-thumb-carousel { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pd-thumb-nav {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hp-border);
    background: #fff;
    color: var(--hp-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    transition: all .2s ease;
}
.pd-thumb-nav:hover { border-color: var(--hp-accent); color: var(--hp-accent); }

/* Native scrolling keeps the track usable by touch and keyboard; the arrows
   only nudge scrollLeft, so there is no slider library to keep in sync. */
.pd-gallery-thumbs {
    display: flex;
    gap: 12px;
    flex: 1 1 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.pd-gallery-thumbs::-webkit-scrollbar { display: none; }

.pd-thumb {
    flex: 0 0 96px;
    width: 96px;
    border: 1px solid var(--hp-border);
    background: #fff;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s ease;
}
.pd-thumb.active { border-color: var(--hp-accent); box-shadow: 0 0 0 1px var(--hp-accent); }
.pd-scope .pd-thumb img,
.pd-thumb img { width: 100%; height: 76px; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Review / trust strip under the gallery
   -------------------------------------------------------------------------- */

.pd-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem 1.1rem;
    margin-top: 1.5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    background: #fff;
}
.pd-trust-item { position: relative; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pd-trust-brand { font-weight: 700; font-size: .82rem; color: var(--hp-text); }
.pd-trust-brand .fa-star { color: var(--hp-green); }
.pd-trust-stars { display: inline-flex; gap: 1px; color: var(--hp-green); font-size: .72rem; }
.pd-trust-stars--gold { color: #ffb800; }
.pd-trust-meta { font-size: .72rem; color: var(--hp-muted); }
.pd-trust-score { font-size: .85rem; color: var(--hp-text); }
.pd-trust-divider { width: 1px; height: 26px; background: var(--hp-border); }
.pd-scope .pd-trust img { width: 24px !important; height: 24px !important; object-fit: contain; }

@media (max-width: 575.98px) {
    .pd-trust-divider { display: none; }
}

/* --------------------------------------------------------------------------
   Title, stock badge and the clamped short description
   -------------------------------------------------------------------------- */

.pd-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pd-title { font-size: 1.9rem; font-weight: 700; margin: 0; }
.pd-stock {
    flex: 0 0 auto;
    color: var(--hp-green);
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    padding-top: .35rem;
}

/* Checkbox toggle so the clamp works without JavaScript. */
.pd-short { margin: 1rem 0 1.5rem; }
.pd-short-toggle { position: absolute; opacity: 0; pointer-events: none; }
.pd-short-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--hp-muted);
    font-size: .92rem;
    line-height: 1.7;
}
.pd-short-text p:last-child { margin-bottom: 0; }
.pd-short-toggle:checked ~ .pd-short-text { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.pd-read-more { color: var(--hp-accent); font-weight: 600; font-size: .85rem; cursor: pointer; margin-top: .35rem; display: inline-block; }
.pd-read-more::after { content: 'Read More'; }
.pd-short-toggle:checked ~ .pd-read-more::after { content: 'Read Less'; }

/* --------------------------------------------------------------------------
   Quote card — same field treatment as the site-wide quote request form
   -------------------------------------------------------------------------- */

.pd-quote-card {
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 2rem;
    box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
}
.pd-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pd-quote-card h3 {
    color: var(--hp-accent);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    margin: 0;
}
.pd-quote-id { color: var(--hp-text); font-weight: 600; font-size: .9rem; white-space: nowrap; }

/* .single_input comes from the theme; these rules only cover the select and
   textarea variants it does not style, plus focus and error feedback. */
.pd-quote-card .single_input { margin-top: 22px; transition: border-color .2s ease; }
.pd-quote-card .single_input input,
.pd-quote-card .single_input select,
.pd-quote-card .single_input textarea {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 14px;
    padding: 15px 20px;
    border-radius: 6px;
    color: var(--hp-text);
}
.pd-quote-card .single_input select { appearance: none; cursor: pointer; }
.pd-quote-card .single_input input:focus,
.pd-quote-card .single_input select:focus,
.pd-quote-card .single_input textarea:focus { outline: none; box-shadow: none; }
.pd-quote-card .single_input:focus-within { border-color: var(--hp-primary); }
.pd-quote-card .single_input.is-invalid { border-color: #dc3545; }
.pd-quote-card .single_input input[readonly] { color: var(--hp-muted); cursor: default; }
.pd-quote-select { position: relative; }
.pd-quote-select::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .7rem;
    color: var(--hp-muted);
    pointer-events: none;
}

.pd-starts-from { margin: .9rem 0 0; text-align: center; font-size: .85rem; color: var(--hp-muted); }
.pd-starts-from strong { color: var(--hp-green); }

.pd-captcha { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 25px; }
.pd-captcha-box {
    width: 66px;
    flex: 0 0 66px;
    height: 48px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
span.pd-captcha-box { color: var(--hp-text); font-weight: 600; }
input.pd-captcha-box { padding: 0 .5rem; }
input.pd-captcha-box:focus { outline: none; border-color: var(--hp-primary); }
.pd-captcha-box.is-invalid { border-color: #dc3545; }
.pd-captcha-op { font-weight: 600; color: var(--hp-muted); }

.pd-payment h5 { font-weight: 600; margin: 1.5rem 0 1rem; font-size: 1rem; }
.pd-payment-icons { display: flex; flex-wrap: wrap; gap: 12px; }
.pd-payment-icons span {
    min-width: 70px;
    height: 48px;
    padding: 6px 12px;
    border: 1px solid var(--hp-border);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.pd-payment-icons img { max-height: 26px; max-width: 56px; width: auto; }

/* --------------------------------------------------------------------------
   Specification / Description / FAQ tab card
   -------------------------------------------------------------------------- */

.pd-tabcard {
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 2rem 2.25rem;
    box-shadow: rgba(149, 157, 165, .12) 0 8px 24px;
}
.pd-tabcard > .tab-pane { min-height: 120px; }

/* --------------------------------------------------------------------------
   Specifications
   -------------------------------------------------------------------------- */

.pd-specs { max-width: 100%; margin: 0; }
.pd-spec-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hp-border); }
.pd-spec-row .pd-spec-ico { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; }
.pd-scope .pd-spec-row .pd-spec-ico img,
.pd-spec-row .pd-spec-ico img { width: 34px !important; height: 34px !important; object-fit: contain; }
.pd-spec-row .pd-spec-label { width: 190px; flex: 0 0 190px; font-weight: 600; }
.pd-spec-row .pd-spec-val { color: var(--hp-muted); }

@media (max-width: 575.98px) {
    .pd-gallery-main img { height: 320px; }
    .pd-thumb { flex: 0 0 76px; width: 76px; }
    .pd-thumb img { height: 62px; }
    .pd-quote-card { padding: 1.5rem 1.15rem; }
    .pd-tabcard { padding: 1.25rem 1.15rem; }
    .pd-spec-row { flex-wrap: wrap; }
    .pd-spec-row .pd-spec-label { width: 100%; flex: auto; }
}