/* ==========================================================================
   product.css — Product Detail Page (frontend, tema Default)
   Încărcat DOAR de themes/default/templates/product.php.
   Toate regulile sunt prefixate cu .pd- (product detail) sau sunt scoped
   sub .pd-page, deci NU afectează nicio altă pagină (shop, categorie, home).

   Redesign „modern retail”: tipografie Inter (cu fallback pe fonturile
   sistemului), suprafețe albe pe fundal neutru, colțuri 16/10px, umbre foarte
   fine, separatoare discrete în loc de chenare groase.
   ACCENTUL rămâne cel din Theme Editor (titlu / preț / preț vechi / buton),
   aplicat inline peste regulile de aici — valorile de mai jos sunt rezervă.
   ========================================================================== */

.pd-page {
    /* ── Design tokens ─────────────────────────────────────── */
    --pd-accent: #0056b3;            /* contrast 7:1 pe alb */
    --pd-accent-dark: #003d80;
    --pd-accent-soft: #eef4fc;
    --pd-success: #067647;
    --pd-danger: #c62828;
    --pd-text: #101828;              /* titluri */
    --pd-text-soft: #344054;         /* text curent */
    --pd-muted: #667085;             /* metadate, etichete */
    --pd-border: #eaecf0;            /* linii fine */
    --pd-border-strong: #d0d5dd;
    --pd-bg-soft: #f9fafb;
    --pd-bg-page: #f6f7f9;
    --pd-radius: 16px;
    --pd-radius-sm: 10px;
    --pd-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --pd-shadow-lg: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
    --pd-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    font-family: var(--pd-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--pd-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Titluri: tracking ușor strâns (aspect de brand, nu de document) */
.pd-page h1,
.pd-page h2,
.pd-page h3 {
    letter-spacing: -0.02em;
}

/* ── Breadcrumb (scoped la pagina de produs) ──────────────── */
.pd-page .breadcrumb {
    padding: 0;
    margin: 4px 0 16px;
    background: transparent;
    font-size: 0.8125rem;
    flex-wrap: wrap;
    row-gap: 4px;
}

.pd-page .breadcrumb a {
    color: var(--pd-muted);
    text-decoration: none;
}

.pd-page .breadcrumb a:hover {
    color: var(--pd-accent);
    text-decoration: none;
}

.pd-page .breadcrumb-item + .breadcrumb-item::before {
    color: var(--pd-border-strong);
    content: "/";
    padding-right: 7px;
}

.pd-page .breadcrumb-item.active {
    color: var(--pd-text-soft);
    font-weight: 500;
}

/* ── Layout general ───────────────────────────────────────── */
.pd-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
}

.pd-col-gallery {
    flex: 1 1 560px;
    max-width: 100%;
    min-width: 0;
}

.pd-col-info {
    flex: 0 1 460px;
    max-width: 100%;
    min-width: 320px;
}

/* ==========================================================================
   1. GALERIE IMAGINI
   ========================================================================== */
.pd-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pd-gallery-main {
    position: relative;
    display: block;
    width: 100%;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow);
    overflow: hidden;
    cursor: zoom-in;
    outline: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.pd-gallery-main:hover,
.pd-gallery-main:focus-visible {
    border-color: #cfd8e4;
    box-shadow: var(--pd-shadow-lg);
}

.pd-gallery-main:focus-visible {
    box-shadow: var(--pd-shadow-lg), 0 0 0 3px rgba(0, 86, 179, 0.35);
}

.pd-gallery-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.22s ease;
    will-change: transform;
    transform-origin: center center;
}

/* Zoom vizual subtil la hover (desktop) — indică faptul că poza e clicabilă */
.pd-gallery-main:hover .pd-gallery-img {
    transform: scale(1.045);
}

/* Tranziție de tip cross-fade la schimbarea imaginii */
.pd-gallery-img.is-fading {
    opacity: 0;
    transform: scale(0.985);
}

/* Browsere fără suport aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .pd-gallery-img {
        aspect-ratio: auto;
        height: auto;
        max-height: 580px;
    }
    .pd-gallery-main {
        min-height: 320px;
    }
}

/* ── Badge-uri suprapuse pe imagine ──────────────────────── */
/* Badge reducere: pill compact, cu umbră discretă */
.pd-badge-discount {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pd-danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.28);
    pointer-events: none;
}

.pd-zoom-hint {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--pd-border);
    color: var(--pd-muted);
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.pd-gallery-main:hover .pd-zoom-hint,
.pd-gallery-main:focus-visible .pd-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

.pd-counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.74);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

/* ── Săgeți de navigare pe imaginea principală ───────────── */
.pd-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--pd-border);
    border-radius: 50%;
    color: var(--pd-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease;
}

.pd-gallery-nav:hover {
    background: var(--pd-accent);
    border-color: var(--pd-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 86, 179, 0.34);
}

.pd-gallery-nav:active {
    transform: translateY(-50%) scale(0.94);
}

.pd-gallery-nav:focus-visible {
    outline: 2px solid var(--pd-accent);
    outline-offset: 2px;
}

.pd-gallery-nav.is-prev { left: 14px; }
.pd-gallery-nav.is-next { right: 14px; }

/* ── Miniaturi (bandă orizontală sub imagine) ────────────── */
.pd-thumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pd-thumbs-track {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #c7d0dc transparent;
}

.pd-thumbs-track::-webkit-scrollbar {
    height: 6px;
}

.pd-thumbs-track::-webkit-scrollbar-thumb {
    background: #c7d0dc;
    border-radius: 999px;
}

.pd-thumbs-track::-webkit-scrollbar-track {
    background: transparent;
}

.pd-thumb {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    padding: 3px;
    background: #fff;
    border: 2px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.82;
}

.pd-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    pointer-events: none;
}

.pd-thumb:hover {
    opacity: 1;
    border-color: #b3bfcf;
    transform: translateY(-2px);
}

.pd-thumb.is-active {
    opacity: 1;
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.16);
}

.pd-thumb:focus-visible {
    outline: 2px solid var(--pd-accent);
    outline-offset: 2px;
}

/* Butoane de derulare a benzii de miniaturi */
.pd-thumbs-nav {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 50%;
    color: var(--pd-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pd-thumbs-nav:hover:not(:disabled) {
    background: var(--pd-accent);
    border-color: var(--pd-accent);
    color: #fff;
}

.pd-thumbs-nav:disabled,
.pd-thumbs-nav.is-hidden {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Fallback când produsul nu are imagini */
.pd-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 380px;
    background: #fff;
    border: 1px dashed #cfd8e4;
    border-radius: var(--pd-radius);
    color: #9aa7b8;
    font-size: 3rem;
}

/* ==========================================================================
   2. PANOU DE INFORMAȚII PRODUS
   ========================================================================== */
.pd-info {
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow);
    padding: 28px 28px 24px;
}

.pd-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--pd-text);
}

/* Brand: chip discret (nu buton colorat) */
.pd-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    margin-bottom: 12px;
    background: var(--pd-bg-soft);
    border: 1px solid var(--pd-border);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pd-muted);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pd-brand-chip:hover {
    background: #fff;
    border-color: var(--pd-border-strong);
    color: var(--pd-text-soft);
    text-decoration: none;
}

.pd-brand-chip i {
    font-size: 0.7rem;
    color: var(--pd-border-strong);
}

/* ── Bloc preț: suprafață neutră, fără tentă verde ───────── */
.pd-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--pd-bg-soft);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
}

.pd-page .product-detail-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--pd-text);
}

.pd-page .product-detail-price .old-price {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--pd-muted);
    text-decoration: line-through;
    letter-spacing: 0;
}

/* Pastila „economisești X Lei (−Y%)" */
.pd-price-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #067647;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.pd-price-save i {
    font-size: 0.8rem;
}

/* Fara opacitate: opacity 0.85 scadea contrastul la ≈4.1:1 (sub pragul WCAG
   de 4.5:1). Textul mosteneste verdele pastilei (#067647 → ≈5.4:1). */
.pd-price-save-pct {
    color: #05603a; /* verde mai inchis, ≈7:1 pe fundalul pastilei */
}

/* ── Bandă de încredere: stoc / livrare / retur ──────────── */
.pd-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.pd-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pd-text-soft);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

a.pd-trust-item:hover {
    border-color: var(--pd-border-strong);
    color: var(--pd-text);
    text-decoration: none;
}

.pd-trust-item > i {
    color: var(--pd-muted);
    font-size: 0.85rem;
}

.pd-trust-item strong {
    font-weight: 600;
    color: var(--pd-text);
}

.pd-trust-item.is-in-stock {
    background: #f6fef9;
    border-color: #abefc6;
    color: #067647;
}

.pd-trust-item.is-in-stock > i {
    color: #12b76a;
}

.pd-trust-item.is-out-of-stock {
    background: #fffbfa;
    border-color: #fecdca;
    color: #b42318;
}

.pd-trust-item.is-out-of-stock > i {
    color: #f04438;
}

/* Garanția: text lung → ocupă tot rândul, cu colțuri normale (nu formă de pill)
   și textul aliniat sus, ca să nu „plutească" pe verticală când se rupe pe 2 rânduri. */
.pd-trust-item.is-wide {
    flex: 1 1 100%;
    align-items: flex-start;
    border-radius: var(--pd-radius-sm);
    line-height: 1.5;
}

.pd-trust-item.is-wide > i {
    margin-top: 2px;
}

/* Garanția: DOUĂ linii fixe (persoane fizice / persoane juridice).
   Eticheta „Garanție:" stă în prima coloană, iar duratele în a doua → a doua
   linie începe exact sub „24 luni", nu sub „Garanție:" (nu depinde de font). */
.pd-trust-lines {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    row-gap: 2px;
    align-items: baseline;
}

/* Eticheta stă în coloana 1 și nu se rupe niciodată pe două rânduri
   (altfel coloana 1 s-ar lărgi aiurea și duratele ar sări mai la dreapta). */
.pd-trust-lines > .pd-trust-glabel {
    grid-column: 1;
    white-space: nowrap;
}

.pd-trust-lines > .pd-trust-gval {
    grid-column: 2;
    min-width: 0;
}

/* Iconița de „se deschide în tab nou" din chenarul dreptului de retur:
   împinsă la capătul din dreapta al chenarului, aliniată cu prima linie. */
.pd-trust-ext {
    margin-left: auto;
    margin-top: 2px;
    padding-left: 8px;
    font-size: 0.7rem;
}

/* ── Metadate (SKU / EAN) ────────────────────────────────── */
.pd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 14px 0 0;
    margin: 0 0 18px;
    border-top: 1px solid var(--pd-border);
    list-style: none;
    font-size: 0.8125rem;
    color: var(--pd-muted);
}

.pd-meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pd-meta li i {
    color: var(--pd-border-strong);
}

.pd-meta strong {
    color: var(--pd-text-soft);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Descriere scurtă ────────────────────────────────────── */
.pd-short-desc {
    padding: 14px 16px;
    margin-bottom: 20px;
    background: var(--pd-bg-soft);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pd-text-soft);
}

.pd-short-desc p:last-child {
    margin-bottom: 0;
}

/* ── Caseta de cumpărare ─────────────────────────────────── */
.pd-page .add-to-cart-section {
    padding: 18px;
    margin-top: 4px;
    background: var(--pd-bg-soft);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
}

.pd-buy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.pd-page .qty-group-lg {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pd-border-strong);
    border-radius: var(--pd-radius-sm);
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-page .qty-group-lg:focus-within {
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.12);
}

.pd-page .qty-group-lg .btn {
    height: 54px;
    width: 48px;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    background: #fff;
    border: none;
    border-radius: 0;
    color: var(--pd-text-soft);
    transition: background 0.18s ease, color 0.18s ease;
}

.pd-page .qty-group-lg .btn:hover {
    background: #f2f4f7;
    color: var(--pd-text);
}

.pd-page .qty-group-lg .form-control {
    width: 76px;
    min-width: 58px;
    height: 54px;
    border: none;
    border-left: 1px solid var(--pd-border);
    border-right: 1px solid var(--pd-border);
    border-radius: 0;
    background: #fff;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pd-text);
    box-shadow: none;
    -moz-appearance: textfield;
}

.pd-page .qty-group-lg .form-control::-webkit-outer-spin-button,
.pd-page .qty-group-lg .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-page .qty-group-lg .form-control:focus {
    box-shadow: none;
}

/* Butonul „Adaugă în coș" de pe pagina de produs are ACELAȘI design ca
   butoanele din cardurile de pe index/shop/categorie (.hp-add-to-cart-btn):
   colțuri de 4px, bordură de 1px în culoarea fundalului, fundal PLAT (fără
   gradient), fără umbră, iconiță lipită la stânga și hover plat.
   Culorile + mărimea textului vin inline din Theme Editor (același șir de
   stiluri ca pe carduri), deci se schimbă o singură dată, pentru ambele.

   ATENȚIE: butonul NU are clasa Bootstrap .btn-primary. Tema are în styles.css
   `.btn-primary { background-color:#0056b3 !important; border-color:#0056b3 !important }`,
   iar un !important din foaia de stil BATE stilul inline (atributul style nu
   poate conține !important). Cu acea clasă, butonul rămânea albastru și culoarea
   din Theme Editor nu se vedea. Nu adăugați clasa înapoi. */
.pd-page .btn-add-to-cart {
    flex: 1 1 240px;
    min-height: 54px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background: #007bff;
    background-image: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Iconița: aceeași poziție ca pe carduri (lipită de marginea din stânga),
   scoasă din flux ca textul să rămână centrat. Mărimea și culoarea vin din
   variabilele cardului (puse pe .pd-buy-row), ca pe carduri. */
.pd-page .btn-add-to-cart i {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--prod-cart-icon-size, inherit);
    color: var(--prod-cart-icon-color, inherit);
}

/* Hover plat, ca pe carduri: se închide doar fundalul (fără lift / umbră /
   brightness). Culoarea din editor, fiind inline, rămâne prioritară. */
.pd-page .btn-add-to-cart:hover,
.pd-page .btn-add-to-cart:focus {
    transform: none;
    box-shadow: none;
    filter: none;
    background-color: #0056b3;
    border-color: #0056b3;
    color: #fff;
}

.pd-page .btn-add-to-cart:active {
    transform: none;
    box-shadow: none;
}

/* Aceeași stare ca „stoc epuizat" de pe carduri (gri plat). */
.pd-page .btn-add-to-cart:disabled,
.pd-page .btn-add-to-cart.is-loading {
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 1;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* Butonul „Stoc epuizat" de pe pagina de produs: același gri plat, 4px. */
.pd-page .pd-buy-row > .btn-secondary {
    min-height: 54px;
    border: 1px solid #6c757d;
    border-radius: 4px;
    background: #6c757d;
    color: #fff;
    font-weight: 600;
}

.pd-page .add-to-cart-section #cartFeedback {
    margin-top: 12px;
    border-radius: var(--pd-radius-sm);
    font-size: 0.9rem;
}

/* Rânduri de informații sub butonul de cumpărare:
   „Plată" (metode active din Admin → Plăți) și „Livrare" (Admin → Livrare).
   Aceleași surse ca la checkout, doar numele — costul se vede la checkout.

   Structura: eticheta stă într-o coloană fixă, iar chip-urile stau într-o
   coloană proprie (.pd-buy-chips) care se aliniază frumos una sub alta
   atunci când numele sunt lungi (ex. „Prin curier rapid Sameday"). */
.pd-buy-meta {
    display: flex;
    align-items: flex-start;
    gap: 6px 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pd-border);
}

/* Al doilea rând nu mai repetă separatorul de sus */
.pd-buy-meta + .pd-buy-meta {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
}

.pd-buy-meta-label {
    flex: 0 0 74px;
    padding-top: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pd-muted);
}

.pd-buy-chips {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.pd-buy-chip {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    padding: 5px 11px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--pd-text-soft);
}

.pd-buy-chip i {
    margin-top: 1px;
    color: var(--pd-muted);
    font-size: 0.8rem;
}

/* ==========================================================================
   3. SECȚIUNI (Descriere / Specificații / Produse similare)
   ========================================================================== */
.pd-section {
    margin-top: 44px;
}

/* Titlu de secțiune curat, fără bară colorată (aspect modern de magazin) */
.pd-section-title {
    margin: 0 0 20px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--pd-text);
}

.pd-description {
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--pd-text-soft);
}

.pd-description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pd-radius-sm);
}

/* ── Taburi Descriere / Specificații (pagina de produs) ───────────── */
/* Variantă modernă „underline": text discret + linie neagră groasă pe tabul
   activ (rămâne varianta neagră cerută, doar mai curată și mai aerisită). */
.pd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid var(--pd-border);
    background: transparent;
}

.pd-tabs .nav-item {
    margin-bottom: -1px;
}

.pd-tabs .nav-link {
    padding: 12px 2px;
    margin-right: 26px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pd-muted);
    background: transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.pd-tabs .nav-link:hover,
.pd-tabs .nav-link:focus {
    color: var(--pd-text);
    border-color: transparent transparent var(--pd-border-strong);
    background: transparent;
}

.pd-tabs .nav-link.active {
    color: #000;
    background: transparent;
    border-color: transparent transparent #000;
    box-shadow: none;
}

/* Conținutul tabului: card separat, cu un spațiu mic sub taburi */
.pd-tab-content > .pd-description {
    margin-top: 22px;
}

/* Tabel în descriere / specificații: aspect de fișă tehnică
   (chenar unic, fără dubluri, coloană de etichete evidențiată discret) */
.pd-description table {
    width: 100%;
    margin: 20px 0;
    border: 1px solid var(--pd-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--pd-radius-sm);
    overflow: hidden;
    font-size: 0.9rem;
}

.pd-description table th,
.pd-description table td,
.pd-description th,
.pd-description td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--pd-border);
    text-align: left;
    vertical-align: top;
}

.pd-description table tr:last-child > td,
.pd-description table tr:last-child > th {
    border-bottom: none;
}

.pd-description th {
    background: var(--pd-bg-soft);
    color: var(--pd-text-soft);
    font-weight: 600;
}

/* Prima coloană din corp = eticheta (Model, Material, …) */
.pd-description table tbody td:first-child {
    width: 36%;
    background: var(--pd-bg-soft);
    border-right: 1px solid var(--pd-border);
    color: var(--pd-text-soft);
    font-weight: 600;
}

.pd-description > *:first-child {
    margin-top: 0;
}

.pd-description > *:last-child {
    margin-bottom: 0;
}

.pd-divider {
    margin: 0;
    border: 0;
}

/* ==========================================================================
   4. LIGHTBOX FULLSCREEN (zoom / pan / navigare)
   ========================================================================== */
html.pd-lb-open,
body.pd-lb-open {
    overflow: hidden;
}

.pd-lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    flex-direction: column;
    background: rgba(9, 12, 20, 0.95);
    -webkit-tap-highlight-color: transparent;
}

.pd-lb[aria-hidden="false"] {
    display: flex;
}

.pd-lb.is-visible {
    animation: pd-lb-fade 0.22s ease-out;
}

@keyframes pd-lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Bara de sus: contor + acțiuni */
.pd-lb-bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    color: #fff;
}

.pd-lb-counter {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.92);
}

.pd-lb-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-lb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.pd-lb-btn:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
}

.pd-lb-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.pd-lb-btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* Zona imaginii */
.pd-lb-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    padding: 0 68px;
    min-height: 0;
}

.pd-lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.18s ease-out, opacity 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    cursor: zoom-in;
    will-change: transform;
}

.pd-lb-img.is-zoomed {
    cursor: grab;
}

/* În timpul deplasării (pan) nu vrem animație pe transform */
.pd-lb-img.is-dragging {
    cursor: grabbing;
    transition: none;
}

.pd-lb-img.is-fading {
    opacity: 0;
}

.pd-lb-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.6rem;
    pointer-events: none;
}

/* Navigare stânga / dreapta */
.pd-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.pd-lb-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.pd-lb-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.pd-lb-prev { left: 14px; }
.pd-lb-next { right: 14px; }

/* Produsele cu o singură imagine nu au navigare în lightbox */
.pd-lb-nav.is-hidden {
    display: none;
}

/* Banda de miniaturi din lightbox */
.pd-lb-strip {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    padding: 14px 18px 18px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.pd-lb-strip::-webkit-scrollbar {
    height: 6px;
}

.pd-lb-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

.pd-lb-thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    padding: 2px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.65;
    overflow: hidden;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pd-lb-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    pointer-events: none;
}

.pd-lb-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.pd-lb-thumb.is-active {
    opacity: 1;
    border-color: #fff;
}

.pd-lb-thumb:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.pd-lb-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 3;
    padding: 7px 16px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pd-lb.is-visible .pd-lb-hint {
    opacity: 1;
}

.pd-lb.is-zoomed .pd-lb-hint {
    opacity: 0;
}

/* ── Produse similare: preț compact, pe un singur rând (desktop/tabletă) ── */
@media (min-width: 576px) {
    .pd-page .product-card .product-price {
        font-size: 1.05rem;
    }

    .pd-page .product-card .product-price .old-price {
        font-size: 0.85rem;
    }

    /* Numele produsului nu mai rezervă înălțime fixă → prețul stă imediat sub el */
    .pd-page .product-card .card-title {
        min-height: auto;
    }
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .pd-layout {
        flex-direction: column;
        gap: 22px;
    }

    .pd-col-gallery,
    .pd-col-info {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .pd-info {
        padding: 22px 20px 20px;
    }

    .pd-title {
        font-size: 1.5rem;
    }

    .pd-section {
        margin-top: 34px;
    }

    .pd-lb-stage {
        padding: 0 12px;
    }

    .pd-lb-nav {
        width: 44px;
        height: 44px;
    }

    .pd-lb-prev { left: 8px; }
    .pd-lb-next { right: 8px; }
}

@media (max-width: 767.98px) {
    .pd-zoom-hint {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .pd-gallery-main {
        padding: 10px;
    }

    /* !important este necesar pentru a înlocui regula din mobile.css
       (fișier partajat) — regula rămâne strict scoped la .pd-page */
    .pd-page .product-detail-price {
        font-size: 1.6rem !important;
    }

    .pd-page .product-detail-price .old-price {
        font-size: 0.95rem;
        margin-left: 8px;
    }

    .pd-price-block {
        padding: 14px 16px;
        gap: 8px 12px;
    }

    .pd-title {
        font-size: 1.3rem;
        margin-bottom: 14px;
    }

    .pd-section {
        margin-top: 32px;
    }

    .pd-thumb {
        width: 64px;
        height: 64px;
    }

    .pd-thumbs-nav {
        width: 34px;
        height: 34px;
    }

    .pd-thumbs-track {
        gap: 8px;
    }

    .pd-counter {
        right: 10px;
        bottom: 10px;
        font-size: 0.72rem;
        padding: 4px 9px;
    }

    .pd-gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .pd-gallery-nav.is-prev { left: 8px; }
    .pd-gallery-nav.is-next { right: 8px; }

    .pd-badge-discount {
        top: 10px;
        left: 10px;
        font-size: 0.74rem;
    }

    /* Buton „adaugă în coș” pe toată lățimea, deasupra cantității */
    .pd-buy-row {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .pd-page .btn-add-to-cart {
        flex: 1 1 auto;
        width: 100%;
        min-height: 50px;
    }

    /* Caseta de cumpărare: mai compactă pe mobil (câștigăm lățime și pentru
       chip-urile de plată, care acum stau două pe rând) */
    .pd-page .add-to-cart-section {
        padding: 12px;
    }

    /* Taburi: text puțin mai mic, dar aceeași linie neagră pe tabul activ */
    .pd-tabs .nav-link {
        margin-right: 18px;
        padding: 11px 2px;
        font-size: 0.9rem;
    }

    .pd-tab-content > .pd-description {
        margin-top: 16px;
    }

    /* Bandă de încredere: pill-uri mai mici ca să încapă pe 2 rânduri */
    .pd-trust {
        gap: 6px;
    }

    .pd-trust-item {
        padding: 7px 11px;
        font-size: 0.78rem;
    }

    /* Garanția pe telefon: eticheta în stânga, duratele INDENTATE în dreapta
       (exact ca pe desktop). Ca să încapă întregi pe un rând, recuperăm lățime:
       padding mai mic pe card și pe rând, iconiță mai mică și text 0.75rem. */
    .pd-page .pd-info {
        padding: 20px 14px 20px;
    }

    .pd-trust-item {
        padding: 8px 9px;
    }

    .pd-trust-item > i {
        font-size: 0.75rem;
    }

    .pd-trust-lines {
        column-gap: 4px;
    }

    /* Dacă totuși textul e mai lung decât rândul, se rupe în două rânduri EGALE
       (nu cu un singur cuvânt pe al doilea rând). */
    .pd-trust-lines > .pd-trust-gval {
        font-size: 0.75rem;
        line-height: 1.4;
        text-wrap: balance;
    }

    .pd-price-save {
        font-size: 0.78rem;
        padding: 5px 10px;
    }

    /* Rândurile Plătă / Livrare: eticheta rămâne în stânga, chips-urile se
       aliniază sub ele în coloana lor (numele lungi nu mai „sparg" rândul) */
    .pd-buy-meta {
        gap: 6px 8px;
        margin-top: 12px;
        padding-top: 10px;
    }

    /* Eticheta își ia doar cât are nevoie („PLATĂ" mai puțin decât „LIVRARE"),
       ca să rămână cât mai mult loc pentru chip-uri. */
    .pd-buy-meta-label {
        flex: 0 0 auto;
        padding-top: 8px;
    }

    .pd-buy-chip {
        font-size: 0.72rem;
        padding: 5px 10px;
    }

    /* Metodele de plată: câte DOUĂ pe rând (nu una pe rând). Grid cu 2 coloane
       egale → chips-urile rămân aliniate, iar textul se rupe înăuntru dacă e lung. */
    .pd-buy-meta-pay .pd-buy-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .pd-buy-meta-pay .pd-buy-chip {
        justify-content: flex-start;
        gap: 5px;
        min-width: 0;
        padding: 5px 7px;
        font-size: 0.7rem;
        line-height: 1.25;
        white-space: normal;
    }

    .pd-buy-meta-pay .pd-buy-chip > i {
        font-size: 0.7rem;
    }

    /* Cantitatea: casetă compactă și centrată (înainte se întindea pe toată
       lățimea și chenarul arăta rupt), cu butoane și câmp de aceeași înălțime */
    .pd-page .qty-group-lg {
        width: auto;
        max-width: 180px;
        margin: 0 auto;
    }

    .pd-page .qty-group-lg .btn {
        height: 48px;
        width: 46px;
        border-radius: 0;
    }

    .pd-page .qty-group-lg .form-control {
        flex: 0 0 auto;
        width: 72px;
        height: 48px;
        border-radius: 0;
    }

    /* Descrierea produsului: text mai mic pe mobil */
    .pd-description {
        padding: 16px 14px;
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .pd-description h2 { font-size: 1.15rem; }
    .pd-description h3 { font-size: 1.05rem; }

    .pd-description h4,
    .pd-description h5,
    .pd-description h6 { font-size: 0.95rem; }

    /* Breadcrumb pe mobil: numele produsului (ultimul element) mai mic */
    .pd-page .breadcrumb-item.active {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    /* Produse similare: 2 carduri pe rând, mai scurte, cu numele lizibil pe 2 rânduri */
    /* Gutiere mai mici pe mobil → cardul e mai lat (marginea negativă a rândului
       este compensată, ca primul card să nu fie tăiat de marginea caruselului) */
    .pd-page .carousel-inner .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    .pd-page .carousel-inner .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 6px;
        padding-right: 6px;
    }

    .pd-page .product-card .card-img-top {
        height: 130px !important;
        object-fit: cover;
    }

    .pd-page .product-card .card-body {
        padding: 8px;
    }

    .pd-page .product-card .card-title {
        font-size: 0.82rem;
        min-height: auto;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Prețul: tăiat + redus pe ACELAȘI rând, cu font mic ca să încapă */
    .pd-page .product-card .product-price {
        font-size: 0.85rem;
    }

    .pd-page .product-card .product-price .old-price {
        font-size: 0.75rem;
        margin-right: 5px;
    }

    .pd-lb-strip {
        padding: 10px 12px 14px;
    }

    .pd-lb-thumb {
        width: 52px;
        height: 52px;
    }

    .pd-lb-hint {
        display: none;
    }
}

/* Respectă preferința de mișcare redusă */
@media (prefers-reduced-motion: reduce) {
    .pd-gallery-img,
    .pd-thumb,
    .pd-thumbs-track,
    .pd-lb-img,
    .pd-lb-thumb,
    .pd-page .btn-add-to-cart,
    .pd-lb {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }

    .pd-gallery-main:hover .pd-gallery-img {
        transform: none;
    }
}