/* =============================================================
   BestDealz International — Product Detail Page (Alibaba style)
   Extends alibaba.css. Variables inherited.
============================================================= */

/* ---------- Breadcrumb ---------- */
.pd-breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    font-size: 12.5px;
}
.pd-breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    list-style: none; margin: 0; padding: 0;
    color: var(--ink-400);
}
.pd-breadcrumb li + li::before {
    content: '/';
    margin-right: 6px;
    color: var(--ink-300);
}
.pd-breadcrumb a { color: var(--ink-500); transition: color .15s; }
.pd-breadcrumb a:hover { color: var(--bd-orange); }
.pd-breadcrumb .current { color: var(--ink-900); font-weight: 600; }

/* ---------- Product main split layout ---------- */
.pd-main {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin: 14px 0;
    padding: 24px;
}
.pd-main-grid {
    display: grid;
    grid-template-columns: 480px 1fr 320px;
    gap: 28px;
}

/* ---------- Image gallery ---------- */
.pd-gallery { display: flex; flex-direction: column; gap: 12px; }
.pd-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg-tint);
    cursor: zoom-in;
}
.pd-gallery-main img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform .25s ease;
}
.pd-gallery-main:hover img { transform: scale(1.06); }
.pd-gallery-badges {
    position: absolute; top: 12px; left: 12px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 2;
}
.pd-gal-badge {
    background: var(--bd-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 5px;
}
.pd-gal-badge.video { background: #d8232a; }
.pd-gal-badge.video::before { content: '▶'; font-size: 8px; }
.pd-gal-badge.tour-360 { background: var(--bd-blue); }
.pd-gal-fav {
    position: absolute; top: 12px; right: 12px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: 0; cursor: pointer;
    display: grid; place-items: center;
    color: var(--ink-500);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: all .15s;
    z-index: 2;
}
.pd-gal-fav:hover { color: var(--ali-red); transform: scale(1.05); }
.pd-gal-fav.active { color: var(--ali-red); }
.pd-gal-fav.active svg { fill: currentColor; }

.pd-gal-counter {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 50px;
    z-index: 2;
    backdrop-filter: blur(4px);
}

/* Thumb strip with horizontal slider arrows */
.pd-gallery-thumb-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pd-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex: 1;
    padding: 2px 0;
}
.pd-gallery-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb {
    aspect-ratio: 1 / 1;
    width: 72px;
    flex-shrink: 0;
    border: 2px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-tint);
    cursor: pointer;
    transition: all .15s;
    position: relative;
}
.pd-thumb:hover { border-color: var(--ink-300); transform: translateY(-1px); }
.pd-thumb.active { border-color: var(--bd-orange); box-shadow: 0 4px 12px rgba(240, 140, 0, .25); }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

/* Video thumbnail — play icon overlay */
.pd-thumb.is-video img { object-fit: cover; padding: 0; }
.pd-thumb-play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    pointer-events: none;
    transition: background .15s;
}
.pd-thumb-play svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.pd-thumb.is-video:hover .pd-thumb-play { background: rgba(0, 0, 0, .55); }
.pd-thumb.is-video.active .pd-thumb-play { background: rgba(0, 60, 140, .3); }

/* Thumb-strip scroll arrows */
.pd-thumb-arrow {
    width: 28px; height: 60px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-700);
    cursor: pointer;
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: all .12s;
}
.pd-thumb-arrow:hover { background: var(--bd-orange); color: #fff; border-color: var(--bd-orange); }
.pd-thumb-arrow svg { width: 14px; height: 14px; }

/* Main-image prev/next arrows */
.pd-gal-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 0;
    color: var(--ink-900);
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transition: all .2s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}
.pd-gallery-main:hover .pd-gal-arrow { opacity: 1; }
.pd-gal-arrow:hover { background: var(--bd-orange); color: #fff; transform: translateY(-50%) scale(1.06); }
.pd-gal-arrow.prev { left: 10px; }
.pd-gal-arrow.next { right: 10px; }
.pd-gal-arrow svg { width: 18px; height: 18px; }

/* YouTube video iframe slot */
.pd-gal-video {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
}
.pd-gal-video[hidden] { display: none; }
.pd-gal-video iframe {
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

/* Click-to-zoom lightbox */
.pd-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.pd-lightbox.open {
    display: flex;
    animation: pd-lb-fade .2s ease-out;
}
@keyframes pd-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.pd-lb-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pd-lb-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform .15s;
    user-select: none;
    -webkit-user-drag: none;
}
.pd-lb-close {
    position: absolute;
    top: 18px; right: 22px;
    width: 44px; height: 44px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    z-index: 2;
    transition: background .15s;
}
.pd-lb-close:hover { background: rgba(255, 255, 255, .22); }
.pd-lb-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s;
}
.pd-lb-arrow:hover { background: rgba(255, 255, 255, .25); }
.pd-lb-arrow.prev { left: 24px; }
.pd-lb-arrow.next { right: 24px; }
.pd-lb-arrow svg { width: 26px; height: 26px; }
.pd-lb-counter {
    position: absolute;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 700;
}
@media (max-width: 600px) {
    .pd-lb-arrow { width: 40px; height: 40px; }
    .pd-lb-arrow.prev { left: 10px; }
    .pd-lb-arrow.next { right: 10px; }
}

.pd-gallery-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 8px;
}
.pd-gal-action {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
.pd-gal-action:hover { border-color: var(--bd-orange); color: var(--bd-orange); }
.pd-gal-action svg { width: 14px; height: 14px; }

/* ---------- Product info column ---------- */
.pd-info { display: flex; flex-direction: column; gap: 14px; }

.pd-info-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-class-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bd-orange);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pd-class-pill.a { background: var(--bd-blue); }
.pd-class-pill.c { background: var(--bd-green); }
.pd-info-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--bd-blue-soft);
    color: var(--bd-blue);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
}
.pd-info-pill.green { background: var(--bd-green-soft); color: var(--bd-green); }
.pd-info-pill.gold { background: #fff4d3; color: #b8860b; }

.pd-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.3;
    margin: 0;
    letter-spacing: -.01em;
}

.pd-meta-row {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ink-500);
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
}
.pd-meta-row .stars {
    color: #ff9900;
    display: inline-flex; gap: 1px;
}
.pd-meta-row .stars svg { width: 14px; height: 14px; fill: currentColor; }
.pd-meta-row a { color: var(--bd-blue); text-decoration: none; }
.pd-meta-row a:hover { color: var(--bd-orange); }
.pd-meta-row .sep { color: var(--ink-300); }

.pd-price-block {
    background: linear-gradient(135deg, #fff8eb 0%, #fff 100%);
    border: 1px solid var(--bd-orange-soft);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.pd-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pd-price-now {
    font-size: 30px;
    font-weight: 800;
    color: var(--ali-red);
    line-height: 1;
    letter-spacing: -.02em;
}
.pd-price-now .currency { font-size: 14px; font-weight: 700; margin-right: 3px; vertical-align: baseline; }
.pd-price-was {
    font-size: 14px;
    color: var(--ink-400);
    text-decoration: line-through;
    font-weight: 500;
}
.pd-price-save {
    background: var(--ali-red);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: .5px;
}
.pd-price-tax {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ink-500);
}

/* Wholesale price table for class B */
.pd-wholesale {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}
.pd-wholesale-title {
    font-size: 12px;
    color: var(--ink-700);
    font-weight: 700;
    margin: 0 0 8px;
    display: flex; align-items: center; gap: 6px;
}
.pd-wholesale-title svg { width: 14px; height: 14px; color: var(--bd-orange); }
.pd-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.pd-tier {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 10px;
    text-align: center;
    transition: all .15s;
    cursor: pointer;
}
.pd-tier:hover, .pd-tier.active {
    border-color: var(--bd-orange);
    background: var(--bd-orange-soft);
}
.pd-tier-qty {
    font-size: 11px;
    color: var(--ink-500);
    font-weight: 600;
}
.pd-tier-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--ali-red);
    margin-top: 2px;
    line-height: 1.1;
}
.pd-moq {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px;
    padding: 6px 11px;
    background: var(--bd-blue-soft);
    color: var(--bd-blue);
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 700;
}

/* Variations */
.pd-variations { display: flex; flex-direction: column; gap: 14px; }
.pd-var-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-700);
    margin-bottom: 7px;
}
.pd-var-group label .selected {
    font-weight: 500;
    color: var(--ink-500);
    margin-left: 5px;
}

.pd-color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-swatch {
    width: 56px; height: 56px;
    border: 2px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    background: var(--bg-tint);
}
.pd-swatch img { width: 100%; height: 100%; object-fit: cover; }
.pd-swatch:hover { border-color: var(--ink-300); }
.pd-swatch.active {
    border-color: var(--bd-orange);
    box-shadow: 0 0 0 2px rgba(240,140,0,.18);
}
.pd-swatch .check {
    position: absolute; top: 2px; right: 2px;
    width: 14px; height: 14px;
    background: var(--bd-orange);
    color: #fff;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}
.pd-swatch.active .check { display: flex; }

.pd-options { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-opt {
    padding: 8px 14px;
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    color: var(--ink-700);
    min-width: 60px;
    text-align: center;
}
.pd-opt:hover { border-color: var(--ink-300); }
.pd-opt.active {
    border-color: var(--bd-orange);
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
}
.pd-opt.disabled {
    opacity: .4;
    cursor: not-allowed;
    text-decoration: line-through;
}
.pd-opt .badge {
    display: block;
    font-size: 9px;
    color: var(--ink-400);
    font-weight: 500;
    margin-top: 2px;
}

/* Quantity + Stock */
.pd-qty-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    min-width: 0;
}
.pd-qty-stepper {
    display: flex; align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    height: 40px;
}
.pd-qty-stepper button {
    width: 36px; height: 100%;
    background: var(--bg-tint);
    border: 0;
    cursor: pointer;
    font-size: 16px; font-weight: 600;
    color: var(--ink-700);
    transition: background .15s;
}
.pd-qty-stepper button:hover { background: var(--bd-orange-soft); color: var(--bd-orange); }
.pd-qty-stepper input {
    width: 60px; height: 100%;
    border: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-900);
    outline: none;
}
.pd-stock {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bd-green);
}
.pd-stock.low { color: var(--ali-red); }
.pd-stock .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(0,170,85,.18);
}
.pd-stock.low .dot { box-shadow: 0 0 0 3px rgba(216,35,42,.18); }

/* CTA buttons */
.pd-ctas { display: flex; flex-direction: column; gap: 8px; }
.pd-cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-cta {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    transition: all .15s;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    min-height: 46px;
}
.pd-cta-primary { background: var(--bd-orange); color: #fff; }
.pd-cta-primary:hover { background: var(--bd-orange-dk); transform: translateY(-1px); }
.pd-cta-secondary {
    background: #fff; color: var(--bd-orange); border-color: var(--bd-orange);
}
.pd-cta-secondary:hover { background: var(--bd-orange-soft); }
.pd-cta-dark { background: var(--bd-navy, #00255a); color: #fff; }
.pd-cta-dark:hover { background: var(--bd-blue-dk); }
.pd-cta-ghost {
    background: #fff; color: var(--ink-700); border-color: var(--line);
}
.pd-cta-ghost:hover { border-color: var(--ink-700); }

/* ---------- Right column: Trust + Supplier mini ---------- */
.pd-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; align-self: flex-start; }

.pd-trust-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.pd-trust-head {
    background: linear-gradient(135deg, var(--bd-blue) 0%, var(--bd-blue-dk) 100%);
    color: #fff;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
}
.pd-trust-head svg {
    width: 24px; height: 24px;
    color: var(--bd-orange);
    flex-shrink: 0;
}
.pd-trust-head .title {
    font-size: 14px; font-weight: 800;
    line-height: 1.2;
}
.pd-trust-head .sub { font-size: 11px; color: rgba(255,255,255,.78); margin-top: 1px; }
.pd-trust-list { padding: 12px 16px 14px; }
.pd-trust-item {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 7px 0;
    font-size: 12.5px;
    color: var(--ink-700);
    border-bottom: 1px dashed var(--line);
    line-height: 1.4;
}
.pd-trust-item:last-child { border-bottom: 0; }
.pd-trust-item svg {
    width: 14px; height: 14px;
    color: var(--bd-green);
    flex-shrink: 0;
    margin-top: 2px;
}
.pd-trust-item strong { color: var(--ink-900); display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 1px; }
.pd-trust-item span { color: var(--ink-500); font-size: 11.5px; }

/* Supplier mini-card */
.pd-supplier-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.pd-supplier-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
}
.pd-supplier-logo {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bd-blue-soft), var(--bd-orange-soft));
    display: grid; place-items: center;
    font-size: 16px;
    font-weight: 900;
    color: var(--bd-orange);
    flex-shrink: 0;
}
.pd-supplier-info { flex: 1; min-width: 0; }
.pd-supplier-name {
    font-size: 14px; font-weight: 700; color: var(--ink-900);
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-supplier-loc {
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--ink-500);
    margin-top: 2px;
}
.pd-supplier-loc .flag {
    width: 14px; height: 10px;
    background: #d8232a;
    border-radius: 1px;
    position: relative;
}
.pd-supplier-loc .flag.cn::before {
    content: '★';
    position: absolute; top: -1px; left: 1px;
    color: #ffd700; font-size: 7px; line-height: 1;
}
.pd-supplier-loc .flag.za { background: linear-gradient(180deg, #007749 50%, #de3831 50%); }
.pd-supplier-badges {
    padding: 10px 16px;
    display: flex; flex-wrap: wrap; gap: 5px;
    border-bottom: 1px solid var(--line);
}
.pd-supplier-badges .b {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 3px;
    letter-spacing: .5px;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 3px;
}
.pd-supplier-badges .b.gold { background: #fff4d3; color: #b8860b; }
.pd-supplier-badges .b.green { background: var(--bd-green-soft); color: var(--bd-green); }
.pd-supplier-badges .b.blue { background: var(--bd-blue-soft); color: var(--bd-blue); }
.pd-supplier-badges .b svg { width: 10px; height: 10px; }
.pd-supplier-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}
.pd-supplier-stats .stat { text-align: center; }
.pd-supplier-stats .num {
    font-size: 14px; font-weight: 800; color: var(--ink-900);
    line-height: 1;
}
.pd-supplier-stats .lbl {
    font-size: 10px; color: var(--ink-400);
    margin-top: 3px; letter-spacing: .3px;
}
.pd-supplier-cta { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.pd-sup-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-700);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
.pd-sup-btn:hover { border-color: var(--bd-orange); color: var(--bd-orange); }
.pd-sup-btn svg { width: 13px; height: 13px; }
.pd-sup-btn.primary { background: var(--bd-orange); color: #fff; border-color: var(--bd-orange); }
.pd-sup-btn.primary:hover { background: var(--bd-orange-dk); color: #fff; }
.pd-sup-btn.wa {
    background: #25d366; color: #fff; border-color: #25d366;
}
.pd-sup-btn.wa:hover { background: #128c7e; color: #fff; }

/* ---------- Class B sourcing workflow strip ---------- */
.pd-classb-workflow {
    background: linear-gradient(120deg, var(--bd-blue-dk) 0%, var(--bd-blue) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.pd-classb-workflow::before {
    content: '';
    position: absolute;
    right: -100px; top: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(240,140,0,.25), transparent 60%);
    pointer-events: none;
}
.pd-classb-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
    position: relative; z-index: 1;
}
.pd-classb-head .ic {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: rgba(240,140,0,.2);
    color: var(--bd-orange);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.pd-classb-head h3 {
    font-size: 18px; font-weight: 800;
    margin: 0 0 3px;
    letter-spacing: -.01em;
}
.pd-classb-head p {
    font-size: 13px;
    color: rgba(255,255,255,.78);
    margin: 0;
}
.pd-classb-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative; z-index: 1;
}
.pd-classb-step {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 14px 14px 16px;
    position: relative;
    transition: all .15s;
}
.pd-classb-step:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(240,140,0,.3);
}
.pd-classb-step .num {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--bd-orange);
    color: #fff;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800;
    margin-bottom: 8px;
}
.pd-classb-step h5 {
    font-size: 13px; font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.pd-classb-step p {
    font-size: 11.5px;
    color: rgba(255,255,255,.66);
    margin: 0;
    line-height: 1.4;
}

/* ---------- Tabs panel ---------- */
.pd-tabs-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}
.pd-tabs-nav {
    display: flex; align-items: stretch;
    background: var(--bg-tint);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}
.pd-tabs-nav::-webkit-scrollbar { display: none; }
.pd-tab-btn {
    padding: 16px 22px;
    background: none; border: 0;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-500);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: -1px;
}
.pd-tab-btn:hover { color: var(--ink-900); }
.pd-tab-btn.active {
    color: var(--ink-900);
    background: #fff;
    border-bottom-color: var(--bd-orange);
}
.pd-tab-btn .pill {
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 800;
}

.pd-tab-panel { display: none; padding: 28px 32px; }
.pd-tab-panel.active { display: block; }

.pd-tab-panel h2 {
    font-size: 22px; font-weight: 800; color: var(--ink-900);
    margin: 0 0 16px;
    letter-spacing: -.01em;
}
.pd-tab-panel h3 {
    font-size: 16px; font-weight: 700; color: var(--ink-900);
    margin: 24px 0 10px;
}
.pd-tab-panel p {
    font-size: 14px; line-height: 1.7;
    color: var(--ink-700);
    margin: 0 0 12px;
}
.pd-tab-panel ul { padding-left: 22px; margin: 0 0 16px; }
.pd-tab-panel ul li { font-size: 14px; line-height: 1.7; color: var(--ink-700); margin-bottom: 4px; }

/* Description with cover image */
.pd-desc-hero {
    aspect-ratio: 16/7;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--bg-tint);
}
.pd-desc-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Specifications table */
.pd-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin-top: 6px;
}
.pd-spec-table tr { border-bottom: 1px solid var(--line); }
.pd-spec-table tr:nth-child(odd) { background: var(--bg-tint); }
.pd-spec-table th {
    padding: 11px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--ink-700);
    width: 30%;
    background: rgba(0,0,0,.02);
}
.pd-spec-table td {
    padding: 11px 14px;
    color: var(--ink-700);
}

/* Reviews */
.pd-reviews-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 22px;
}
.pd-rev-score { text-align: center; }
.pd-rev-num {
    font-size: 56px; font-weight: 900;
    color: var(--ink-900);
    line-height: 1;
    letter-spacing: -.02em;
}
.pd-rev-num small { font-size: 22px; color: var(--ink-400); font-weight: 600; }
.pd-rev-stars-big {
    color: #ff9900;
    font-size: 18px;
    margin: 6px 0;
    letter-spacing: 1px;
}
.pd-rev-total {
    font-size: 12.5px;
    color: var(--ink-500);
}
.pd-rev-bars { display: flex; flex-direction: column; gap: 5px; }
.pd-rev-bar {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px;
    color: var(--ink-500);
}
.pd-rev-bar .label { width: 38px; font-weight: 600; color: var(--ink-700); }
.pd-rev-bar .stars { color: #ff9900; }
.pd-rev-bar .track {
    flex: 1; height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
}
.pd-rev-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9900, #ff6a00);
    border-radius: 3px;
}
.pd-rev-bar .count { width: 36px; text-align: right; }

.pd-rev-actions {
    display: flex; gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.pd-rev-filter {
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    transition: all .15s;
}
.pd-rev-filter:hover, .pd-rev-filter.active {
    border-color: var(--bd-orange);
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
}

.pd-review {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.pd-review:last-child { border-bottom: 0; }
.pd-review-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.pd-review-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bd-blue-soft);
    color: var(--bd-blue);
    display: grid; place-items: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}
.pd-review-meta { flex: 1; min-width: 0; }
.pd-review-name {
    font-size: 13.5px; font-weight: 700;
    color: var(--ink-900);
    display: flex; align-items: center; gap: 6px;
}
.pd-review-name .verified {
    background: var(--bd-green-soft);
    color: var(--bd-green);
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 3px;
}
.pd-review-name .verified svg { width: 9px; height: 9px; }
.pd-review-when {
    font-size: 11.5px;
    color: var(--ink-400);
    margin-top: 2px;
}
.pd-review-stars {
    color: #ff9900;
    display: inline-flex; gap: 1px;
}
.pd-review-stars svg { width: 14px; height: 14px; fill: currentColor; }
.pd-review-title {
    font-size: 14px; font-weight: 700;
    color: var(--ink-900);
    margin: 4px 0 6px;
}
.pd-review-body {
    font-size: 13.5px; line-height: 1.65;
    color: var(--ink-700);
    margin: 0 0 8px;
}
.pd-review-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.pd-review-photos img {
    width: 72px; height: 72px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: transform .15s;
}
.pd-review-photos img:hover { transform: scale(1.04); }
.pd-review-helpful {
    display: flex; align-items: center; gap: 14px;
    font-size: 11.5px;
    color: var(--ink-400);
}
.pd-review-helpful button {
    background: none; border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color .15s;
}
.pd-review-helpful button:hover { color: var(--bd-orange); }
.pd-review-helpful button svg { width: 13px; height: 13px; }

/* AI summary callout */
.pd-ai-summary {
    background: linear-gradient(135deg, #f3f0ff 0%, #fff 100%);
    border: 1px solid #ddd6fe;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    position: relative;
}
.pd-ai-summary .tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: #7c3aed;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.pd-ai-summary p {
    font-size: 13.5px; line-height: 1.6;
    color: var(--ink-700);
    margin: 0;
}
.pd-ai-summary .pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
}
.pd-ai-summary h6 {
    font-size: 12px; font-weight: 800;
    margin: 0 0 6px;
    display: flex; align-items: center; gap: 5px;
}
.pd-ai-summary .pros h6 { color: var(--bd-green); }
.pd-ai-summary .cons h6 { color: var(--ali-red); }
.pd-ai-summary ul {
    padding-left: 16px; margin: 0;
}
.pd-ai-summary li { font-size: 12.5px; color: var(--ink-700); margin-bottom: 3px; }

/* Q&A */
.pd-qa-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.pd-qa-item:last-child { border-bottom: 0; }
.pd-qa-q {
    display: flex; gap: 10px;
    font-size: 13.5px;
    color: var(--ink-900);
    font-weight: 600;
    margin-bottom: 8px;
}
.pd-qa-q::before {
    content: 'Q';
    width: 22px; height: 22px;
    background: var(--bd-orange);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800;
    flex-shrink: 0;
}
.pd-qa-a {
    display: flex; gap: 10px;
    font-size: 13px;
    color: var(--ink-700);
    line-height: 1.6;
    padding-left: 32px;
    margin-bottom: 6px;
    position: relative;
}
.pd-qa-a::before {
    content: 'A';
    width: 22px; height: 22px;
    background: var(--bd-blue);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800;
    flex-shrink: 0;
    position: absolute;
    left: 0;
}
.pd-qa-meta {
    padding-left: 32px;
    font-size: 11.5px;
    color: var(--ink-400);
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px;
}
.pd-qa-meta .dot { color: var(--ink-300); }

/* Frequently bought together */
.pd-fbt {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 14px;
}
.pd-fbt-grid {
    display: grid;
    grid-template-columns: 1fr 30px 1fr 30px 1fr 230px;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}
.pd-fbt-item {
    text-align: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    transition: all .15s;
}
.pd-fbt-item:hover { border-color: var(--bd-orange); }
.pd-fbt-item img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}
.pd-fbt-item .ttl {
    font-size: 11.5px;
    color: var(--ink-700);
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 4px;
}
.pd-fbt-item .pr {
    font-size: 13px; font-weight: 800;
    color: var(--ali-red);
}
.pd-fbt-plus {
    text-align: center;
    font-size: 22px;
    color: var(--ink-300);
    font-weight: 300;
}
.pd-fbt-summary {
    background: var(--bg-tint);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.pd-fbt-summary .total-label { font-size: 11px; color: var(--ink-500); }
.pd-fbt-summary .total-price {
    font-size: 22px; font-weight: 800;
    color: var(--ali-red);
    margin: 4px 0 10px;
}
.pd-fbt-summary .save {
    font-size: 11px;
    color: var(--bd-green);
    font-weight: 700;
    background: var(--bd-green-soft);
    padding: 3px 8px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 10px;
}
.pd-fbt-summary button {
    background: var(--bd-orange);
    color: #fff;
    width: 100%;
    padding: 11px;
    border-radius: 6px;
    border: 0;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}
.pd-fbt-summary button:hover { background: var(--bd-orange-dk); }

/* ========================================================
   FROM THE SAME SUPPLIER — cross-sell for Class B buyers
======================================================== */
.pd-supplier-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 14px;
}
.pd-supplier-section-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.pd-supplier-section-head .logo {
    width: 46px; height: 46px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--bd-blue-soft), var(--bd-orange-soft));
    display: grid; place-items: center;
    font-size: 16px; font-weight: 900;
    color: var(--bd-orange);
    flex-shrink: 0;
}
.pd-supplier-section-head .info { flex: 1; min-width: 0; }
.pd-supplier-section-head h2 {
    font-size: 19px; font-weight: 800;
    color: var(--ink-900);
    margin: 0;
    letter-spacing: -.01em;
}
.pd-supplier-section-head .meta {
    font-size: 12px; color: var(--ink-500);
    margin-top: 2px;
    display: inline-flex; align-items: center; gap: 6px;
}
.pd-supplier-section-head .meta .flag {
    width: 14px; height: 10px;
    background: #d8232a; border-radius: 1px;
}
.pd-supplier-section-head .meta .flag.za { background: linear-gradient(180deg, #007749 50%, #de3831 50%); }
.pd-supplier-section-head a.visit {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bd-orange);
    color: #fff;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12.5px;
    transition: background .15s;
    text-decoration: none;
}
.pd-supplier-section-head a.visit:hover { background: var(--bd-orange-dk); color: #fff; }

/* ========================================================
   RECENTLY VIEWED — distinct horizontal scroller layout
   Compact horizontal cards (image left, info right) so it
   reads VERY differently from the full product-grid above.
======================================================== */
.pd-recent-section {
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 0 18px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.pd-recent-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px 16px;
    gap: 14px;
    flex-wrap: wrap;
}
.pd-recent-title { display: flex; align-items: center; gap: 10px; }
.pd-recent-title h2 {
    font-size: 19px; font-weight: 800;
    color: var(--ink-900);
    margin: 0;
    letter-spacing: -.01em;
}
.pd-recent-title h2 .accent { color: var(--bd-orange); }
.pd-recent-title .pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bd-green);
    box-shadow: 0 0 0 0 rgba(0,170,85,.5);
    animation: pdPulseGreen 1.8s ease-out infinite;
}
@keyframes pdPulseGreen {
    0%   { box-shadow: 0 0 0 0 rgba(0,170,85,.5); }
    70%  { box-shadow: 0 0 0 10px rgba(0,170,85,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,170,85,0); }
}
.pd-recent-sub {
    font-size: 12.5px;
    color: var(--ink-500);
    margin: 3px 0 0;
}
.pd-recent-controls { display: flex; align-items: center; gap: 6px; }
.pd-recent-arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-700);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .15s;
    flex-shrink: 0;
}
.pd-recent-arrow:hover {
    background: var(--bd-orange);
    border-color: var(--bd-orange);
    color: #fff;
}
.pd-recent-arrow:disabled,
.pd-recent-arrow[aria-disabled="true"] {
    opacity: .35; cursor: not-allowed;
}
.pd-recent-arrow svg { width: 16px; height: 16px; }
.pd-recent-clear {
    background: none; border: 0;
    color: var(--ink-400);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: color .15s;
}
.pd-recent-clear:hover { color: var(--ali-red); }

.pd-recent-track {
    display: flex; gap: 12px;
    padding: 4px 24px 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.pd-recent-track::-webkit-scrollbar { height: 4px; }
.pd-recent-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.pd-recent-track::-webkit-scrollbar-track { background: transparent; }

.pd-recent-card {
    flex: 0 0 232px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 10px;
    transition: all .2s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.pd-recent-card:hover {
    border-color: var(--bd-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.pd-recent-card-img {
    aspect-ratio: 1 / 1;
    width: 76px;
    border-radius: 6px;
    background: var(--bg-tint);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.pd-recent-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.pd-recent-card:hover .pd-recent-card-img img { transform: scale(1.06); }
.pd-recent-card .cls-mini {
    position: absolute; top: 4px; left: 4px;
    background: var(--bd-blue);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: .5px;
}
.pd-recent-card .cls-mini.b { background: var(--bd-orange); }
.pd-recent-card .cls-mini.c { background: var(--bd-green); }
.pd-recent-card-info {
    display: flex; flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: 2px 0;
}
.pd-recent-card-title {
    font-size: 12.5px;
    color: var(--ink-800);
    line-height: 1.35;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
}
.pd-recent-card:hover .pd-recent-card-title { color: var(--bd-orange); }
.pd-recent-card-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--ali-red);
    line-height: 1;
}
.pd-recent-card-price .from {
    font-size: 10px; color: var(--ink-400); font-weight: 500; margin-right: 2px;
}
.pd-recent-card-when {
    font-size: 10.5px;
    color: var(--ink-400);
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: 4px;
}
.pd-recent-card-when svg { width: 10px; height: 10px; }
.pd-recent-card-resume {
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--bd-orange);
    display: inline-flex; align-items: center; gap: 3px;
    transition: gap .2s;
}
.pd-recent-card:hover .pd-recent-card-resume { gap: 6px; }
.pd-recent-empty {
    padding: 28px 24px;
    text-align: center;
    color: var(--ink-400);
    font-size: 13.5px;
}

/* ========================================================
   FBT — minor head improvements
======================================================== */
.pd-fbt-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.pd-fbt-head h2 {
    font-size: 18px; font-weight: 800;
    color: var(--ink-900); margin: 0;
    letter-spacing: -.01em;
    display: inline-flex; align-items: center; gap: 8px;
}
.pd-fbt-head h2 .pill {
    background: var(--bd-green-soft);
    color: var(--bd-green);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: .5px;
}
.pd-fbt-head p {
    font-size: 13px; color: var(--ink-500); margin: 4px 0 0;
}

/* ========================================================
   1. LIVE SOCIAL PROOF strip (viewers + units sold)
======================================================== */
.pd-social-proof {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(90deg, #fff7e6 0%, #fff 60%);
    border: 1px solid #ffe9b8;
    border-radius: 8px;
    padding: 9px 14px;
    margin-top: 10px;
    font-size: 12.5px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s;
}
.pd-social-proof.ready { opacity: 1; transform: translateY(0); }
.pd-social-proof-item {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-700);
}
.pd-social-proof-item strong { color: var(--ali-red); font-weight: 800; font-size: 13.5px; }
.pd-social-proof .live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,.55);
    animation: pdLivePulse 1.4s ease-out infinite;
    flex-shrink: 0;
}
@keyframes pdLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.pd-social-proof svg { width: 14px; height: 14px; color: var(--bd-orange); flex-shrink: 0; }
.pd-social-proof-sep { width: 1px; height: 12px; background: #e8c98a; }

/* ========================================================
   2. COMPARE SIMILAR — side-by-side comparison table (rebuilt)
======================================================== */
.pd-compare-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 28px;
    margin-bottom: 14px;
}
.pd-compare-section .sec-head { margin-bottom: 18px; }

/* Wrapper allows horizontal scroll on narrow viewports */
.pd-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -28px;
    padding: 4px 28px 8px;
    scrollbar-width: thin;
}
.pd-compare-wrap::-webkit-scrollbar { height: 6px; }
.pd-compare-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.pd-compare-wrap::-webkit-scrollbar-track { background: transparent; }

.pd-compare-grid {
    display: grid;
    grid-template-columns: 160px repeat(3, minmax(220px, 1fr));
    min-width: 820px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Header row (product card cells) ── */
.pd-compare-grid .ch {
    padding: 20px 16px;
    text-align: center;
    background: var(--bg-tint);
    border-bottom: 2px solid var(--line);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    align-items: center;
    position: relative;
}
.pd-compare-grid .ch:last-of-type { border-right: 0; }
.pd-compare-grid .ch.label-col {
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 2px solid var(--line);
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 18px 22px;
}
.pd-compare-grid .ch.label-col span {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ink-400);
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* "THIS PRODUCT" column */
.pd-compare-grid .ch.this {
    background: linear-gradient(180deg, var(--bd-orange-soft) 0%, #fffaf2 100%);
    padding-top: 28px;
    border-top: 3px solid var(--bd-orange);
    margin-top: -1px;
}
.pd-compare-grid .ch.this .this-pill {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bd-orange);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 5px 14px;
    border-radius: 0 0 6px 6px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(240,140,0,.35);
    z-index: 2;
}
.pd-compare-grid .ch img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px;
    display: block;
}
.pd-compare-grid .ch.this img { border-color: rgba(240,140,0,.4); }
.pd-compare-grid .ch .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.4;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
    width: 100%;
}
.pd-compare-grid .ch .pr {
    font-size: 18px;
    font-weight: 800;
    color: var(--ali-red);
    letter-spacing: -.01em;
    margin-top: auto;
}
.pd-compare-grid .ch .pr .from {
    font-size: 11px;
    color: var(--ink-400);
    font-weight: 600;
    margin-right: 2px;
}

/* ── Data row cells (label + value) ── */
.pd-compare-grid .lc,
.pd-compare-grid .vc {
    padding: 13px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    color: var(--ink-700);
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    min-height: 48px;
}
.pd-compare-grid .vc:nth-of-type(4n + 1) { border-right: 0; }   /* every row's last vc */
.pd-compare-grid .lc {
    justify-content: flex-start;
    background: var(--bg-tint);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-700);
    letter-spacing: .3px;
    border-right: 1px solid var(--line);
    padding-left: 18px;
}
.pd-compare-grid .vc.this-col {
    background: rgba(240,140,0,.06);
    color: var(--ink-900);
    font-weight: 600;
}
.pd-compare-grid .vc.unknown { color: var(--ink-300); }
.pd-compare-grid .vc.match { color: var(--bd-green); font-weight: 700; }
.pd-compare-grid .vc.match::before { content: '✓ '; }

/* Class pill badges in the row */
.pd-compare-grid .pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
}
.pd-compare-grid .pill-a { background: var(--bd-blue); }
.pd-compare-grid .pill-b { background: var(--bd-orange); }
.pd-compare-grid .pill-c { background: var(--bd-green); }

/* Star rating mini */
.pd-compare-grid .stars-mini {
    color: #ff9900;
    font-size: 13px;
    letter-spacing: 1px;
    margin-right: 4px;
}
.pd-compare-grid .stars-mini span { opacity: .25; }
.pd-compare-grid .stars-mini span.on { opacity: 1; }
.pd-compare-grid .stars-mini + small { color: var(--ink-400); font-size: 11px; }

/* ── Action row at the bottom ── */
.pd-compare-grid .vc-action {
    background: var(--bg-tint);
    padding: 16px 14px;
    border-bottom: 0;
}
.pd-compare-grid .lc-action {
    background: var(--bg-tint);
    border-bottom: 0;
}
.pd-compare-grid .vc-action.this-col { background: rgba(240,140,0,.08); }
.pd-compare-grid .vc-action a {
    display: inline-flex; align-items: center;
    background: #fff;
    border: 1.5px solid var(--bd-orange);
    color: var(--bd-orange);
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
}
.pd-compare-grid .vc-action a:hover {
    background: var(--bd-orange);
    color: #fff;
    transform: translateY(-1px);
}
.pd-compare-grid .vc-action .btn-current {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bd-orange);
    color: #fff;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: default;
}

/* Responsive — mobile: keep grid wide, scroll the wrap */
@media (max-width: 900px) {
    .pd-compare-section { padding: 18px 16px; }
    .pd-compare-wrap { margin: 0 -16px; padding: 4px 16px 8px; }
    .pd-compare-grid {
        grid-template-columns: 120px repeat(3, minmax(180px, 1fr));
        min-width: 660px;
    }
    .pd-compare-grid .ch { padding: 16px 10px; padding-top: 24px; }
    .pd-compare-grid .ch.this { padding-top: 26px; }
    .pd-compare-grid .ch img { width: 80px; height: 80px; }
    .pd-compare-grid .ch .name { font-size: 12px; min-height: 34px; }
    .pd-compare-grid .ch .pr { font-size: 15px; }
    .pd-compare-grid .lc,
    .pd-compare-grid .vc { padding: 10px 10px; font-size: 12px; min-height: 42px; }
    .pd-compare-grid .lc { padding-left: 12px; font-size: 11px; }
}
@media (max-width: 600px) {
    .pd-compare-grid {
        grid-template-columns: 100px repeat(3, minmax(160px, 1fr));
        min-width: 580px;
    }
}

/* ========================================================
   3. STOCK-LOW URGENCY — tier-level + inline
======================================================== */
.pd-tier .tier-urgency {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ali-red);
    margin-top: 3px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.pd-tier .tier-urgency::before { content: '⚡ '; }
.pd-urgency-banner {
    display: flex; align-items: center; gap: 9px;
    background: linear-gradient(90deg, #ffe9e9 0%, #fff5f5 100%);
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ali-red);
    font-weight: 600;
}
.pd-urgency-banner svg { width: 14px; height: 14px; color: var(--ali-red); flex-shrink: 0; }

/* ========================================================
   4. SAVE FOR LATER (Sourcing Project) — button + modal
======================================================== */
.pd-save-project-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-700);
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    width: 100%;
}
.pd-save-project-btn:hover {
    border-color: var(--bd-blue);
    color: var(--bd-blue);
    background: var(--bd-blue-soft);
}
.pd-save-project-btn.saved {
    background: var(--bd-blue-soft);
    color: var(--bd-blue);
    border-color: var(--bd-blue);
}
.pd-save-project-btn.saved svg { fill: var(--bd-blue); }
.pd-save-project-btn svg { width: 14px; height: 14px; }

/* Modal */
.pd-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 18px;
    backdrop-filter: blur(2px);
}
.pd-modal-overlay.show { display: flex; animation: pdFadeIn .15s ease; }
@keyframes pdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pd-modal {
    background: #fff;
    border-radius: 14px;
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.3);
    animation: pdSlideUp .2s ease;
}
@keyframes pdSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pd-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.pd-modal-head h3 {
    font-size: 16px; font-weight: 800;
    color: var(--ink-900); margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
}
.pd-modal-head h3 svg { width: 18px; height: 18px; color: var(--bd-blue); }
.pd-modal-close {
    background: none; border: 0;
    font-size: 22px; line-height: 1;
    color: var(--ink-400);
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    transition: all .15s;
}
.pd-modal-close:hover { background: var(--bg-tint); color: var(--ink-900); }
.pd-modal-body { padding: 20px 22px; }
.pd-modal-body p { font-size: 13.5px; color: var(--ink-500); margin: 0 0 14px; line-height: 1.5; }
.pd-modal-body label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-700);
    margin: 12px 0 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pd-modal-body input[type=text],
.pd-modal-body textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink-900);
    outline: none;
    transition: border-color .15s;
}
.pd-modal-body input[type=text]:focus,
.pd-modal-body textarea:focus { border-color: var(--bd-orange); }
.pd-modal-body textarea { resize: vertical; min-height: 70px; }
.pd-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: var(--bg-tint);
    display: flex; gap: 8px; justify-content: flex-end;
}
.pd-modal-foot button {
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
}
.pd-modal-foot .cancel {
    background: #fff;
    border-color: var(--line);
    color: var(--ink-700);
}
.pd-modal-foot .cancel:hover { background: #fff; border-color: var(--ink-700); }
.pd-modal-foot .confirm {
    background: var(--bd-orange);
    color: #fff;
}
.pd-modal-foot .confirm:hover { background: var(--bd-orange-dk); }
.pd-modal-success {
    padding: 28px 22px;
    text-align: center;
}
.pd-modal-success .check {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bd-green-soft);
    color: var(--bd-green);
    display: grid; place-items: center;
    font-size: 28px;
}
.pd-modal-success h4 { font-size: 16px; font-weight: 800; color: var(--ink-900); margin: 0 0 6px; }
.pd-modal-success p { font-size: 13px; color: var(--ink-500); margin: 0 0 16px; }
.pd-modal-success .share-input {
    display: flex; gap: 6px;
    margin: 12px 0;
}
.pd-modal-success .share-input input {
    flex: 1;
    padding: 8px 10px;
    font-size: 11.5px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-700);
    background: var(--bg-tint);
}
.pd-modal-success .share-input button {
    padding: 8px 14px;
    background: var(--bd-blue);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
}
.pd-modal-success .share-input button:hover { background: var(--bd-blue-dk); }

/* ========================================================
   5. SUPPLIER REPLY RATE — extends supplier card
======================================================== */
.pd-supplier-card .reply-rate {
    padding: 8px 16px;
    background: var(--bd-green-soft);
    color: var(--bd-green);
    font-size: 11.5px;
    font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--line);
}
.pd-supplier-card .reply-rate svg { width: 14px; height: 14px; flex-shrink: 0; }
.pd-supplier-card .reply-rate .rate { font-weight: 800; }
.pd-supplier-card .reply-rate .meta {
    color: var(--ink-500); font-weight: 500; font-size: 11px;
    margin-left: auto;
}

/* ========================================================
   6. TRADE ASSURANCE CALCULATOR (Class B landed-cost)
======================================================== */
.pd-ta-calc {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(135deg, var(--bd-blue-soft) 0%, #fff 100%);
    border: 1px solid #cfdcf5;
    border-radius: 8px;
}
.pd-ta-calc-head {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.pd-ta-calc-head h5 {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--bd-blue);
    margin: 0;
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pd-ta-calc-head h5 svg { width: 13px; height: 13px; }
.pd-ta-calc-head .chev {
    color: var(--bd-blue);
    transition: transform .2s;
}
.pd-ta-calc.open .pd-ta-calc-head .chev { transform: rotate(180deg); }
.pd-ta-calc-body {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #cfdcf5;
}
.pd-ta-calc-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    color: var(--ink-700);
}
.pd-ta-calc-row .lbl { color: var(--ink-500); }
.pd-ta-calc-row .val { font-weight: 700; color: var(--ink-900); }
.pd-ta-calc-row.subtotal {
    padding: 7px 0;
    margin-top: 6px;
    border-top: 1px dashed #cfdcf5;
    font-size: 13px;
}
.pd-ta-calc-row.total {
    padding: 9px 0 4px;
    margin-top: 4px;
    border-top: 2px solid var(--bd-blue);
    font-size: 14px;
}
.pd-ta-calc-row.total .lbl { color: var(--bd-blue); font-weight: 700; }
.pd-ta-calc-row.total .val { color: var(--ali-red); font-size: 16px; font-weight: 800; }
.pd-ta-calc-note {
    font-size: 11px;
    color: var(--ink-400);
    margin-top: 8px;
    line-height: 1.45;
}
.pd-ta-calc-incoterm {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
}
.pd-ta-calc-incoterm label { font-size: 11px; color: var(--ink-500); margin: 0; }
.pd-ta-calc-incoterm select {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
}

/* ========================================================
   7. SAMPLE ORDER CTA — single-unit option for Class B
======================================================== */
.pd-sample-cta {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    background: #fff;
    color: var(--bd-blue);
    border: 1.5px dashed var(--bd-blue);
    padding: 11px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    transition: all .15s;
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 auto;
}
.pd-sample-cta:hover {
    background: var(--bd-blue);
    color: #fff;
    border-style: solid;
}
.pd-sample-cta svg { width: 14px; height: 14px; }
.pd-sample-cta .price {
    background: var(--bd-blue-soft);
    color: var(--bd-blue);
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    transition: all .15s;
}
.pd-sample-cta:hover .price { background: rgba(255,255,255,.2); color: #fff; }

/* Mobile responsive for new sections */
@media (max-width: 900px) {
    .pd-compare-grid { grid-template-columns: 120px repeat(3, 1fr); font-size: 11px; }
    .pd-compare-grid .ch { padding: 12px 8px; }
    .pd-compare-grid .ch img { width: 60px; height: 60px; }
    .pd-compare-grid .ch .name { font-size: 11px; }
    .pd-compare-row .lc, .pd-compare-row .vc { padding: 8px 8px; font-size: 11px; }
    .pd-social-proof { flex-direction: column; align-items: flex-start; gap: 6px; }
    .pd-social-proof-sep { display: none; }
}
@media (max-width: 600px) {
    .pd-compare-grid { grid-template-columns: 90px repeat(2, 1fr); }
    .pd-compare-grid .ch.col-3 { display: none; }
    .pd-compare-row .vc.col-3 { display: none; }
}

/* Sticky bottom action bar */
.pd-sticky-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0,0,0,.08);
    padding: 12px 0;
    z-index: 60;
    transform: translateY(100%);
    transition: transform .25s ease;
}
.pd-sticky-bar.show { transform: translateY(0); }
.pd-sticky-grid {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px;
    align-items: center;
}
.pd-sticky-thumb {
    width: 50px; height: 50px;
    border-radius: 6px;
    background: var(--bg-tint);
    overflow: hidden;
}
.pd-sticky-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-sticky-info .ttl {
    font-size: 13px; font-weight: 700;
    color: var(--ink-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 400px;
}
.pd-sticky-info .pr {
    font-size: 16px; font-weight: 800;
    color: var(--ali-red);
}
.pd-sticky-actions { display: flex; gap: 8px; }

/* ========================================================
   RESPONSIVE — full mobile audit
======================================================== */

/* ── 1300px: shrink fixed columns slightly ── */
@media (max-width: 1300px) {
    .pd-main-grid { grid-template-columns: 400px 1fr 280px; }
    .pd-side { position: static; }
}

/* ── 1100px: stack to single column (tablet + mobile) ── */
@media (max-width: 1100px) {
    .pd-main-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* Every grid child must respect its column's width */
    .pd-main-grid > * { min-width: 0; max-width: 100%; }

    .pd-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: static; }
    .pd-fbt-grid { grid-template-columns: 1fr; gap: 10px; }
    .pd-fbt-plus { display: none; }
    .pd-classb-steps { grid-template-columns: repeat(2, 1fr); }

    /* Gallery: always fills its column, image centred */
    .pd-gallery { width: 100%; }
    .pd-gallery-main { max-width: 560px; margin: 0 auto; }

    /* CTAs: already flex-wrap, make primary buttons full row */
    .pd-cta-row { flex-wrap: wrap; }
}

/* ── 768px: large phone / small tablet ── */
@media (max-width: 768px) {
    /* Clip any stray overflow at the section level */
    section.bd-container { overflow-x: clip; }
    .pd-main {
        padding: 16px;
        overflow-x: clip;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin: 0 0 8px;
    }

    /* Gallery */
    .pd-gallery-main { max-width: 100%; border-radius: 8px; }
    .pd-gallery-main img { padding: 10px; }
    .pd-gal-arrow { width: 32px; height: 32px; opacity: 1; }
    .pd-gal-arrow svg { width: 14px; height: 14px; }
    .pd-thumb { width: 62px; }
    .pd-gallery-actions { gap: 6px; }
    .pd-gal-action { font-size: 11px; padding: 6px 10px; flex: 1; justify-content: center; }

    /* Info column */
    .pd-info { min-width: 0; overflow-x: clip; }
    .pd-title { font-size: 18px; line-height: 1.35; }
    .pd-price-now { font-size: 26px; }
    .pd-info-tags { gap: 5px; flex-wrap: wrap; }
    .pd-info-pill { font-size: 11px; padding: 4px 8px; }
    .pd-meta-row { gap: 8px; font-size: 12px; }

    /* Price block */
    .pd-price-block { padding: 12px 14px; }

    /* Tiers: 2 columns max */
    .pd-tiers { grid-template-columns: repeat(2, 1fr); }

    /* MOQ badge */
    .pd-moq { white-space: normal; line-height: 1.5; font-size: 11px; }

    /* Social proof: stack items */
    .pd-social-proof { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 12px; }
    .pd-social-proof-sep { display: none; }

    /* Qty row: delivery text wraps to its own line */
    .pd-qty-row { gap: 8px 10px; min-width: 0; }
    .pd-stock { width: 100%; font-size: 12px; }

    /* CTA buttons: stack so neither gets cut */
    .pd-cta-row { flex-direction: column; gap: 8px; }
    .pd-cta { width: 100%; flex: none; font-size: 14px; justify-content: center; }

    /* Landed Cost Calculator trigger */
    .pd-landed-calc { border-radius: 10px; }
    .pd-lc-trigger {
        grid-template-columns: 36px 1fr 20px;
        gap: 10px;
        padding: 13px 14px;
    }
    .pd-lc-trigger-ic { width: 36px; height: 36px; border-radius: 9px; }
    .pd-lc-trigger-ic svg { width: 18px; height: 18px; }
    .pd-lc-trigger-txt strong { font-size: 14px; }
    .pd-lc-trigger-txt span { font-size: 11.5px; white-space: normal; word-break: break-word; }
    .pd-lc-trigger-chev svg { width: 15px; height: 15px; }

    /* Side panel: single column on phone */
    .pd-side { grid-template-columns: 1fr; }
    .pd-classb-steps { grid-template-columns: 1fr; }

    /* Tabs */
    .pd-tab-btn { padding: 12px 12px; font-size: 12.5px; }
    .pd-tab-panel { padding: 16px 14px; }
    .pd-reviews-summary { grid-template-columns: 1fr; gap: 16px; }

    /* Sticky bottom bar */
    .pd-sticky-info .ttl { max-width: 180px; }
    .pd-sticky-actions { gap: 6px; }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
    .pd-main { padding: 12px; }
    .pd-title { font-size: 16px; }
    .pd-price-now { font-size: 22px; }
    .pd-thumb { width: 54px; }
    .pd-gal-action span { display: none; }  /* icon only on tiny screens */
    .pd-meta-row { font-size: 11px; }
    .pd-tiers { grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .pd-tier { padding: 7px 6px; }
    .pd-tier-qty { font-size: 10px; }
    .pd-tier-price { font-size: 13px; }
    .pd-qty-stepper button { width: 32px; }
    .pd-qty-stepper input { width: 52px; }
}

/* ========================================================
   LANDED COST CALCULATOR — Class B redesign
   Supplier card · Warehouse card · Inputs · Breakdown · CTA
======================================================== */
.pd-landed-calc {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
/* Trigger button (closed by default) */
.pd-lc-trigger {
    width: 100%;
    background: linear-gradient(115deg, #003c8c 0%, #001f5b 100%);
    color: #fff;
    border: 0;
    padding: 16px 22px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 48px 1fr 28px;
    gap: 16px;
    align-items: center;
    text-align: left;
    transition: filter .15s;
    font-family: inherit;
}
.pd-lc-trigger:hover { filter: brightness(1.1); }
.pd-lc-trigger-ic {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.18);
    border-radius: 12px;
    display: grid; place-items: center;
}
.pd-lc-trigger-ic svg { width: 22px; height: 22px; color: #fff; }
.pd-lc-trigger-txt strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.01em;
    margin-bottom: 3px;
}
.pd-lc-trigger-txt span {
    display: block;
    font-size: 12.5px;
    opacity: .9;
    line-height: 1.45;
}
.pd-lc-trigger-chev svg {
    width: 18px; height: 18px;
    transition: transform .25s;
    color: #fff;
}
.pd-lc-trigger.is-open .pd-lc-trigger-chev svg { transform: rotate(180deg); }

/* Calculator panel — fixed side drawer so it floats over the page instead of pushing layout */
.pd-lc-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(740px, 100vw);
    height: 100vh;
    overflow-y: auto;
    z-index: 9100;
    background: #fff;
    box-shadow: -8px 0 48px rgba(0,0,0,.24);
    animation: pdLcDrawerIn .28s cubic-bezier(.4, 0, .2, 1);
}
.pd-lc-panel[hidden] { display: none; }
@keyframes pdLcDrawerIn {
    from { transform: translateX(32px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Semi-transparent backdrop behind the drawer */
.pd-lc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9050;
    animation: pdLcFadeIn .2s;
}
.pd-lc-backdrop[hidden] { display: none; }
@keyframes pdLcFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Sticky header inside the drawer (title + close button) */
.pd-lc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(115deg, #003c8c 0%, #001f5b 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}
.pd-lc-panel-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.pd-lc-panel-close {
    background: rgba(255,255,255,.16);
    border: 0;
    border-radius: 7px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    transition: background .15s;
    flex-shrink: 0;
}
.pd-lc-panel-close:hover { background: rgba(255,255,255,.32); }
.pd-lc-panel-close svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; }

/* Re-style steps to use the new section pattern (each step has a numbered head + content) */
.pd-lc-section {
    padding: 22px;
    border-top: 1px solid var(--line);
}
.pd-lc-section:first-of-type { border-top: 0; }
.pd-lc-section-head {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.pd-lc-num {
    width: 30px; height: 30px;
    background: var(--bd-orange);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
}
.pd-lc-section-head h5 {
    font-size: 14.5px;
    font-weight: 900;
    color: var(--ink-900);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.pd-lc-section-head p {
    font-size: 12.5px;
    color: var(--ink-500);
    margin: 0;
    line-height: 1.5;
}
.pd-lc-input.wide { grid-column: 1 / -1; }
.pd-lc-input em.hint {
    font-style: normal;
    font-size: 9.5px;
    color: var(--ink-400);
    text-transform: none;
    letter-spacing: 0;
}
.pd-lc-input em {
    color: var(--ali-red);
    font-style: normal;
}
.pd-ta-calc-row .hint {
    font-size: 11px;
    color: var(--ink-500);
    margin-left: 6px;
}
.pd-lc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(115deg, #003c8c 0%, #001f5b 100%);
    color: #fff;
}
.pd-lc-header-ic {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.pd-lc-header-ic svg { width: 22px; height: 22px; }
.pd-lc-header h4 {
    font-size: 17px; font-weight: 900; margin: 0 0 4px; letter-spacing: -.015em;
}
.pd-lc-header p {
    font-size: 12.5px; margin: 0; opacity: .92; line-height: 1.5;
}

.pd-lc-step {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 16px;
    padding: 22px 22px;
    border-top: 1px solid var(--line);
}
.pd-lc-step:first-of-type { border-top: 0; }
.pd-lc-step-num {
    width: 32px; height: 32px;
    background: var(--bd-orange);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 900;
    font-size: 14px;
    flex-shrink: 0;
}
.pd-lc-step-body h5 {
    font-size: 14.5px; font-weight: 900; color: var(--ink-900);
    margin: 0 0 5px; letter-spacing: -.01em;
}
.pd-lc-step-hint {
    font-size: 12.5px; color: var(--ink-500); margin: 0 0 14px; line-height: 1.55;
}

/* SUPPLIER CARD */
.pd-supplier-card {
    background: linear-gradient(135deg, #fff8ee 0%, #fff 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--bd-orange);
    border-radius: 10px;
    padding: 16px 18px;
}
.pd-sup-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.pd-sup-logo, .pd-sup-logo-ph {
    width: 64px; height: 64px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    object-fit: contain;
    padding: 4px;
    flex-shrink: 0;
}
.pd-sup-logo-ph {
    display: grid; place-items: center;
    font-size: 26px; font-weight: 900;
    color: var(--bd-orange);
    background: var(--bd-orange-soft);
}
.pd-sup-meta { flex: 1; min-width: 0; }
.pd-sup-company {
    font-size: 16px; font-weight: 800; color: var(--ink-900);
    line-height: 1.3;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    letter-spacing: -.01em;
}
.pd-sup-name {
    font-size: 13px; font-weight: 600; color: var(--ink-500);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 3px;
}
.pd-sup-name strong { color: var(--ink-900); font-weight: 700; }
.pd-flag {
    width: 18px; height: 12px;
    background: linear-gradient(0deg, #007749 33%, #fff 33% 66%, #de3831 66%);
    border-radius: 1px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.08);
}
.pd-flag.cn { background: #d8232a; position: relative; }
.pd-flag.cn::before {
    content: '★';
    position: absolute;
    color: #ffd700;
    font-size: 9px;
    top: 0; left: 2px;
    line-height: 1;
}
.pd-sup-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: #dcfce7;
    color: #15803d;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 10.5px; font-weight: 800;
}
.pd-sup-badge svg { width: 10px; height: 10px; }
.pd-sup-slogan {
    font-size: 11.5px; color: var(--ink-500); margin-top: 4px; font-style: italic;
}
.pd-sup-contacts {
    list-style: none; padding: 12px 14px; margin: 0 0 12px;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}
.pd-sup-contacts li {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--ink-700); line-height: 1.4;
}
.pd-sup-contacts li svg {
    width: 14px; height: 14px;
    color: var(--bd-orange);
    flex-shrink: 0;
}
.pd-sup-contacts li a {
    color: var(--ink-900); text-decoration: none; font-weight: 600; word-break: break-all;
}
.pd-sup-contacts li a:hover { color: var(--bd-orange); }
.pd-sup-cta-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pd-sup-cta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer; text-decoration: none; border: 0;
    transition: all .15s;
}
.pd-sup-cta.primary { background: var(--bd-blue); color: #fff; }
.pd-sup-cta.primary:hover { background: #001f5b; }
.pd-sup-cta svg { width: 14px; height: 14px; }
.pd-sup-cta-divider { font-size: 11px; color: var(--ink-400); font-style: italic; }
.pd-sup-cta-hint {
    flex: 1; min-width: 200px;
    font-size: 11.5px; color: var(--ink-500); line-height: 1.4;
}
.pd-sup-cta-hint strong { color: var(--bd-orange-dk); }

/* WAREHOUSE CARD */
.pd-wh-card {
    background: linear-gradient(135deg, var(--bd-blue-soft) 0%, #fff 100%);
    border: 1px solid #cfdcf5;
    border-left: 4px solid var(--bd-blue);
    border-radius: 10px;
    padding: 14px 18px;
}
.pd-wh-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(0, 60, 140, .14);
    font-size: 12.5px; line-height: 1.5;
}
.pd-wh-row:last-of-type { border-bottom: 0; padding-bottom: 12px; }
.pd-wh-row .lbl {
    color: var(--bd-blue);
    font-weight: 800;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.pd-wh-row .val { color: var(--ink-900); }
.pd-wh-copy {
    margin-top: 6px;
    background: #fff;
    border: 1px solid var(--bd-blue);
    color: var(--bd-blue);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
}
.pd-wh-copy:hover { background: var(--bd-blue); color: #fff; }
.pd-wh-copy svg { width: 11px; height: 11px; }
.pd-wh-copy.copied { background: #15803d; border-color: #15803d; color: #fff; }

/* CALCULATOR INPUTS GRID */
.pd-lc-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    width: 100%;
}
.pd-lc-inputs > * { min-width: 0; }

/* ================================================================
   PRODUCT CARD STYLES A · B · C  +  SECTION WRAPPERS
   A = Precision Pro (Related / Supplier)
   B = Premium Dark  (Recently Imported / Most Viewed)
   C = Compact List  (Recently Viewed — localStorage)
================================================================= */

/* ── Shared section wrapper (A) ─────────────────────────── */
.pds-a-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 14px;
}
.pds-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.pds-head-info h2 { font-size: 19px; font-weight: 800; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.pds-head-info h2 .accent { color: var(--bd-orange); }
.pds-head-info p { font-size: 12.5px; color: var(--ink-500); margin: 3px 0 0; }
.pds-view-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--bd-orange); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.pds-view-all:hover { color: var(--bd-orange-dk); }
.pds-sup-logo { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--bd-blue-soft), var(--bd-orange-soft)); display: grid; place-items: center; font-size: 14px; font-weight: 900; color: var(--bd-orange); flex-shrink: 0; }

/* 5-column grid shared by A and B */
.pds-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

/* ── CARD A — Precision Pro ─────────────────────────────── */
.pdca {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    text-decoration: none;
    color: inherit;
}
.pdca:hover { border-color: var(--bd-orange); box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); }
.pdca-img { position: relative; aspect-ratio: 1/1; background: var(--bg-tint); overflow: hidden; }
.pdca-img img { width: 100%; height: 100%; object-fit: cover; padding: 0px; transition: transform .3s; }
.pdca:hover .pdca-img img { transform: scale(1.07); }
.pdca-save { position: absolute; top: 8px; right: 8px; background: var(--ali-red); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 4px; }
.pdca-cls { position: absolute; top: 8px; left: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 3px 7px; border-radius: 3px; text-transform: uppercase; }
.pdca-cls.cls-b { background: var(--bd-orange); color: #fff; }
.pdca-cls.cls-a { background: var(--bd-blue); color: #fff; }
.pdca-cls.cls-c { background: var(--bd-green); color: #fff; }
.pdca-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pdca-title { font-size: 12.5px; font-weight: 600; color: var(--ink-700); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdca-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-400); }
.pdca-stars { color: #f59e0b; font-size: 11px; letter-spacing: -.5px; }
.pdca-price { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.pdca-price .cur { font-size: 11.5px; font-weight: 700; color: var(--ali-red); }
.pdca-price .now { font-size: 17px; font-weight: 800; color: var(--ali-red); letter-spacing: -.02em; }
.pdca-price .was { font-size: 11.5px; color: var(--ink-400); text-decoration: line-through; }
.pdca-sub { font-size: 11px; color: var(--ink-500); }
.pdca-foot { display: grid; grid-template-columns: 1fr 34px; gap: 6px; margin-top: auto; padding-top: 6px; }
.pdca-btn { display: flex; align-items: center; justify-content: center; gap: 5px; background: var(--bd-orange); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 6px; border-radius: 6px; border: 0; cursor: pointer; transition: background .15s; text-decoration: none; }
.pdca-btn:hover { background: var(--bd-orange-dk); color: #fff; }
.pdca-btn.outline { background: #fff; color: var(--bd-orange); border: 1.5px solid var(--bd-orange); }
.pdca-btn.outline:hover { background: var(--bd-orange-soft); }
.pdca-btn.navy { background: var(--bd-blue); }
.pdca-btn.navy:hover { background: #002266; }
.pdca-btn svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.pdca-wish { display: grid; place-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--ink-400); font-size: 14px; line-height: 1; transition: all .15s; }
.pdca-wish:hover { border-color: var(--ali-red); color: var(--ali-red); }

/* ── Section B wrapper (navy header) ───────────────────── */
.pds-b-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.pds-b-head { background: linear-gradient(115deg, var(--bd-blue) 0%, #001f5b 100%); padding: 18px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pds-b-head h2 { font-size: 18px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.01em; }
.pds-b-head h2 .pill { background: var(--bd-orange); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 30px; vertical-align: middle; margin-left: 8px; }
.pds-b-head p { font-size: 12.5px; color: rgba(255,255,255,.7); margin: 3px 0 0; }
.pds-b-head a { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.pds-b-head a:hover { color: #fff; }
.pds-b-body { padding: 20px 24px; }

/* ── CARD B — Premium Dark ──────────────────────────────── */
.pdcb {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .22s, transform .22s, border-color .22s;
    text-decoration: none;
    color: inherit;
}
.pdcb:hover { box-shadow: 0 6px 28px rgba(0,60,140,.13); transform: translateY(-3px); border-color: transparent; }
.pdcb-img { position: relative; aspect-ratio: 1/1; background: var(--bg-tint); overflow: hidden; }
.pdcb-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.pdcb:hover .pdcb-img img { transform: scale(1.09); }
.pdcb-save { position: absolute; top: 10px; left: 10px; background: var(--ali-red); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 30px; }
.pdcb-wish { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--ink-500); font-size: 13px; transition: all .15s; cursor: pointer; border: 0; }
.pdcb-wish:hover { background: #fff; color: var(--ali-red); }
.pdcb-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.pdcb-cls { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 5px; }
.pdcb-cls-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pdcb-cls.cls-b { color: var(--bd-orange); }
.pdcb-cls.cls-b .pdcb-cls-dot { background: var(--bd-orange); }
.pdcb-cls.cls-a { color: var(--bd-blue); }
.pdcb-cls.cls-a .pdcb-cls-dot { background: var(--bd-blue); }
.pdcb-cls.cls-c { color: var(--bd-green); }
.pdcb-cls.cls-c .pdcb-cls-dot { background: var(--bd-green); }
.pdcb-title { font-size: 13.5px; font-weight: 700; color: var(--ink-900); line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 7px; }
.pdcb-stars { display: flex; align-items: center; gap: 5px; font-size: 11px; margin-bottom: 10px; }
.pdcb-stars .s { color: #f59e0b; letter-spacing: -.5px; }
.pdcb-stars .ct { color: var(--ink-400); }
.pdcb-price-block { margin-top: auto; background: linear-gradient(135deg,var(--bd-orange-soft) 0%,#fff 100%); border: 1px solid rgba(240,140,0,.2); border-radius: 8px; padding: 10px 11px; }
.pdcb-price-block .now { font-size: 20px; font-weight: 900; color: var(--ali-red); letter-spacing: -.02em; }
.pdcb-price-block .cur { font-size: 12px; font-weight: 700; color: var(--ali-red); }
.pdcb-price-block .sub { font-size: 10.5px; color: var(--ink-500); margin-top: 2px; }
.pdcb-cta { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--bd-blue); color: #fff; font-size: 12.5px; font-weight: 700; padding: 9px; border-radius: 7px; border: 0; cursor: pointer; transition: background .15s; text-decoration: none; }
.pdcb-cta:hover { background: #002266; color: #fff; }
.pdcb-cta.orange { background: var(--bd-orange); }
.pdcb-cta.orange:hover { background: var(--bd-orange-dk); }
.pdcb-cta.green { background: var(--bd-green); }

/* ── Section C wrapper (Recently Viewed) ───────────────── */
.pds-c-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.pds-c-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }
.pds-c-head-left { display: flex; align-items: center; gap: 8px; }
.pds-c-head h2 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.pds-c-head .accent { color: var(--bd-orange); }
.pds-c-count { font-size: 11.5px; color: var(--ink-500); background: var(--bg-tint); border: 1px solid var(--line); padding: 2px 8px; border-radius: 30px; }
.pds-c-clear { font-size: 12px; color: var(--ink-400); background: none; border: 0; cursor: pointer; padding: 0; }
.pds-c-clear:hover { color: var(--ali-red); }
.pds-c-list { display: flex; flex-direction: column; }

/* ── CARD C — Compact List ──────────────────────────────── */
.pdcc {
    display: grid;
    grid-template-columns: 88px 1fr 130px;
    gap: 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    overflow: hidden;
}
.pdcc:last-child { border-bottom: 0; }
.pdcc:hover { background: var(--bg-tint); }
.pdcc-img { width: 88px; aspect-ratio: 1/1; background: var(--bg-tint); overflow: hidden; flex-shrink: 0; }
.pdcc-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .28s; }
.pdcc:hover .pdcc-img img { transform: scale(1.07); }
.pdcc-body { padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.pdcc-tag { display: flex; gap: 5px; align-items: center; margin-bottom: 1px; }
.pdcc-cls { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.pdcc-cls.cls-b { background: var(--bd-orange); color: #fff; }
.pdcc-cls.cls-a { background: var(--bd-blue); color: #fff; }
.pdcc-cls.cls-c { background: var(--bd-green); color: #fff; }
.pdcc-title { font-size: 13px; font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.pdcc-sub { font-size: 11.5px; color: var(--ink-500); }
.pdcc-right { padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; border-left: 1px solid var(--line); }
.pdcc-price .cur { font-size: 11px; font-weight: 700; color: var(--ali-red); }
.pdcc-price .now { font-size: 17px; font-weight: 900; color: var(--ali-red); letter-spacing: -.02em; }
.pdcc-price .was { font-size: 11px; color: var(--ink-400); text-decoration: line-through; margin-left: 3px; }
.pdcc-action { font-size: 11.5px; font-weight: 700; color: var(--bd-orange); white-space: nowrap; }
.pdcc:hover .pdcc-action { color: var(--bd-orange-dk); }

/* ── Responsive for all three card styles ───────────────── */
@media (max-width: 1100px) {
    .pds-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .pds-a-wrap { padding: 16px; border-left: 0; border-right: 0; border-radius: 0; }
    .pds-b-wrap { border-left: 0; border-right: 0; border-radius: 0; }
    .pds-c-wrap { border-left: 0; border-right: 0; border-radius: 0; }
    .pds-b-head { padding: 14px 16px; }
    .pds-b-head h2 { font-size: 15px; }
    .pds-b-body { padding: 14px 16px; }
    .pds-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pdca-img img { padding: 0px; }
    .pdca-price .now { font-size: 15px; }
    .pdca-title { font-size: 12px; }
    .pdcb-price-block .now { font-size: 17px; }
    .pdcb-title { font-size: 13px; }
    .pdcc { grid-template-columns: 72px 1fr 110px; }
    .pdcc-img { width: 72px; }
    .pdcc-right { min-width: 100px; padding: 8px 10px; }
    .pdcc-price .now { font-size: 15px; }
    .pdcc-title { font-size: 12.5px; }
    .pds-c-head { padding: 12px 16px; }
    .pds-c-head h2 { font-size: 15px; }
}
@media (max-width: 480px) {
    .pds-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pdca-body { padding: 8px 9px 10px; }
    .pdca-price .now { font-size: 14px; }
    .pdca-foot { grid-template-columns: 1fr 30px; gap: 5px; }
    .pdcb-price-block .now { font-size: 15px; }
    .pdcb-body { padding: 10px 11px 12px; }
    .pdcc { grid-template-columns: 64px 1fr; }
    .pdcc-right { display: none; }
    .pdcc-body { padding: 8px 10px; }
    .pdcc-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pdcc-sub::after { content: ' · ' attr(data-price); font-weight: 700; color: var(--ali-red); }
}
.pd-lc-input {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px; color: var(--ink-700); font-weight: 700;
    min-width: 0;
}
.pd-lc-input span {
    text-transform: uppercase; letter-spacing: .4px;
    font-size: 10.5px; color: var(--ink-500);
    word-break: break-word;
}
.pd-lc-input input,
.pd-lc-input select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-900);
    background: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color .12s;
    min-width: 0;
}
.pd-lc-input input:focus,
.pd-lc-input select:focus { border-color: var(--bd-orange); }

/* Flat look for the breakdown step (overrides the old card style) */
.pd-lc-step .pd-ta-calc-body {
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 8px;
}

/* FINAL CTA */
.pd-lc-cta {
    padding: 20px 22px 22px;
    background: linear-gradient(115deg, #fff8ee 0%, #fff 60%);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
}
.pd-lc-cta-text strong {
    display: block;
    font-size: 15px; font-weight: 900;
    color: var(--ink-900);
    margin-bottom: 3px;
}
.pd-lc-cta-text span {
    display: block;
    font-size: 12.5px;
    color: var(--ink-700);
    line-height: 1.5;
}
.pd-lc-cta-btn {
    background: var(--bd-orange);
    color: #fff;
    border: 0;
    padding: 14px 26px;
    border-radius: 8px;
    font-size: 14px; font-weight: 900;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all .15s;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(240, 140, 0, .28);
}
.pd-lc-cta-btn:hover {
    background: var(--bd-orange-dk);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(240, 140, 0, .35);
}
.pd-lc-cta-btn svg { width: 16px; height: 16px; }
.pd-lc-cta-fineprint {
    grid-column: 1 / -1;
    font-size: 11.5px;
    color: var(--ink-500);
    margin: 0;
    line-height: 1.5;
    text-align: center;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
}

@media (max-width: 700px) {
    .pd-lc-step { grid-template-columns: 28px 1fr; padding: 18px 16px; gap: 10px; }
    .pd-lc-step-num { width: 26px; height: 26px; font-size: 12px; }
    .pd-lc-header { padding: 16px 18px; }
    .pd-lc-inputs { grid-template-columns: 1fr; }
    .pd-sup-contacts { grid-template-columns: 1fr; }
    .pd-wh-row { grid-template-columns: 1fr; gap: 2px; }
    .pd-wh-row .lbl { font-size: 10.5px; }
    .pd-lc-cta { grid-template-columns: 1fr; }
}