/* ════════════════════════════════════════
   BREADCRUMB
════════════════════════════════════════ */
.breadcrumb {
    padding: 14px 0;
    font-size: .82rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.breadcrumb a { color: var(--text-muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .bc-sep { margin: 0 7px; opacity: .4; }
.breadcrumb .bc-current { color: var(--accent); font-weight: 500; }

/* ════════════════════════════════════════
   LAYOUT PRINCIPAL — 2 colonnes
════════════════════════════════════════ */
.pd-wrap {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 48px;
    padding: 40px 0 64px;
    align-items: start;
}

/* ── Colonne gauche : image ── */
.pd-gallery { position: sticky; top: 90px; }

.pd-main-img {
    /*background: linear-gradient(135deg, #1a0a40 0%, #2d1060 60%, #0e0e1a 100%);*/
    background: #F4F6F8;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    cursor: zoom-in;
    position: relative;
}
.pd-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

.pd-main-img img {
    width: 87%; height: 87%; object-fit: contain;
    transition: transform .4s cubic-bezier(.34,1.2,.64,1);
    /*filter: drop-shadow(0 12px 32px rgba(124,58,237,.45));*/
}
.pd-main-img:hover img { transform: scale(1.08); }

/* Badge stock */
.pd-stock-badge {
    position: absolute; top: 14px; left: 14px;
    display: flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 700; padding: 4px 10px;
    border-radius: var(--radius); letter-spacing: .4px;
    text-transform: uppercase;
    z-index:99;
}
.pd-stock-badge.in  { background: rgba(26,209,118,.18); color: var(--accent); border: 1px solid rgba(26,209,118,.3); }
.pd-stock-badge.out { background: rgba(239,68,68,.15);  color: #ef4444;       border: 1px solid rgba(239,68,68,.3); }

/* Miniatures */
.pd-thumbs {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.pd-thumb {
    width: 68px; height: 68px;
    /*background: linear-gradient(135deg,#1a0a40,#2d1060);*/
    background: #F4F6F8;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden;
    transition: border-color .2s;
}
.pd-thumb:hover,
.pd-thumb.active { border-color: var(--accent); }
.pd-thumb img { width: 80%; height: 80%; object-fit: contain; }

/* ── Colonne droite : infos ── */
/*.pd-info {}*/

.pd-category-tag {
    display: inline-block;
    background: rgba(26,209,118,.12);
    border: 1px solid rgba(26,209,118,.25);
    color: var(--accent);
    font-size: .74rem; font-weight: 700;
    padding: 3px 10px; border-radius: var(--radius);
    letter-spacing: .5px; text-transform: uppercase;
    margin-bottom: 12px;
}

.pd-title {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800; line-height: 1.15;
    margin-bottom: 6px;
    color: var(--text);
}
.pd-org-name {
    font-size: .95rem; color: var(--text-muted);
    margin-bottom: 18px; font-style: italic;
}

/* Prix */
.pd-price-block {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 20px;
}
.pd-price {
    font-family: var(--font-head);
    font-size: 2rem; font-weight: 800;
    color: var(--accent);
}
.pd-price-old {
    font-size: 1.1rem; color: var(--text-muted);
    text-decoration: line-through;
}
.pd-promo-badge {
    background: rgba(239,68,68,.15); color: #ef4444;
    border: 1px solid rgba(239,68,68,.3);
    font-size: .75rem; font-weight: 700;
    padding: 3px 8px; border-radius: var(--radius);
}

/* Description courte */
.pd-short-desc {
    font-size: .93rem; color: var(--text-muted);
    line-height: 1.75; margin-bottom: 24px;
    max-width: 540px;
}

/* Dosage */
.pd-dosage-row {
    margin-bottom: 20px;
}
.pd-dosage-label {
    font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); margin-bottom: 8px;
}
.pd-dosage-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-dosage-pill {
    padding: 6px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg3);
    font-size: .85rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
    color: var(--text-muted);
}
.pd-dosage-pill:hover { border-color: var(--accent); color: var(--accent); }
.pd-dosage-pill.selected {
    border-color: var(--accent);
    background: rgba(26,209,118,.12);
    color: var(--accent);
}

/* Quantité + bouton */
.pd-qty-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.pd-qty-ctrl {
    display: flex; align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden; background: var(--bg3);
}
.pd-qty-ctrl button {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 1.1rem;
    width: 36px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.pd-qty-ctrl button:hover { background: var(--bg2); color: var(--accent); }
.pd-qty-ctrl input {
    width: 48px; text-align: center;
    background: none; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    color: var(--text); font-family: var(--font-body);
    font-size: .95rem; font-weight: 600; height: 42px;
    -moz-appearance: textfield;
}
.pd-qty-ctrl input::-webkit-outer-spin-button,
.pd-qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Bouton add to cart */
.btn-add-cart {
    flex: 1;
    background: var(--greeen);
    color: #0e0e0e; border: none; cursor: pointer;
    padding: 0 24px; height: 42px;
    border-radius: var(--radius);
    font-family: var(--font-head); font-weight: 800;
    font-size: .95rem; letter-spacing: .3px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(26,209,118,.3);
    white-space: nowrap;
}
.btn-add-cart:hover {
    background: var(--greeen-lt);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(26,209,118,.45);
}
.btn-add-cart:disabled {
    background: #333; color: #666; cursor: not-allowed;
    box-shadow: none; transform: none;
}

/* Bannière shipping */
.pd-shipping-banner {
    display: flex; align-items: center; gap: 12px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--radius);
    padding: 12px 16px; margin-bottom: 24px;
    font-size: .875rem; font-weight: 600; color: #ef4444;
}
.pd-shipping-banner i { font-size: 1.2rem; flex-shrink: 0; }

/* Méta infos (discrétion, livraison rapide, etc.) */
.pd-meta-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.pd-meta-item {
    display: flex; align-items: center; gap: 10px;
    font-size: .85rem; color: var(--text-muted);
}
.pd-meta-item i { color: var(--accent); width: 16px; font-size: .9rem; }

/* ════════════════════════════════════════
   ONGLETS — Description / Info / Reviews
════════════════════════════════════════ */
.pd-tabs-wrap { margin-bottom: 64px; }

.pd-tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--border);
    gap: 0; margin-bottom: 28px;
}
.pd-tab-btn {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: .9rem; font-weight: 600;
    color: var(--text-muted); padding: 12px 22px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    display: flex; align-items: center; gap: 7px;
    white-space: nowrap;
}
.pd-tab-btn:hover { color: var(--text); }
.pd-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.pd-tab-btn .tab-icon { font-size: .85rem; }

.pd-tab-panel { display: none; }
.pd-tab-panel.active { display: block; }

/* Tableau specs */
.pd-specs-table {
    width: 100%; border-collapse: collapse;
    font-size: .875rem; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border);
}
.pd-specs-table tr:nth-child(odd)  td { background: var(--bg2); }
.pd-specs-table tr:nth-child(even) td { background: var(--bg3); }
.pd-specs-table td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    vertical-align: top; line-height: 1.5;
}
.pd-specs-table td:first-child {
    font-weight: 600; color: var(--text-muted);
    width: 38%; white-space: nowrap;
}
.pd-specs-table td:last-child { color: var(--text); }

/* Contenu description */
.pd-desc-body {
    font-size: .9rem; color: var(--text-muted);
    line-height: 1.8; max-width: 720px;
}
.pd-desc-body p  { margin-bottom: 16px; }
.pd-desc-body strong { color: var(--text); }
.pd-desc-body ul { margin: 12px 0 16px 20px; }
.pd-desc-body ul li { margin-bottom: 6px; }

/* Avertissement legal */
.pd-legal-box {
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: var(--radius);
    padding: 14px 18px; margin-top: 20px;
    font-size: .82rem; color: #ef9999; line-height: 1.6;
}
.pd-legal-box strong { color: #ef4444; }

/* Reviews placeholder */
.pd-reviews-empty {
    text-align: center; padding: 40px 20px;
    color: var(--text-muted); font-size: .9rem;
}
.pd-reviews-empty i { font-size: 2.5rem; color: var(--border); display: block; margin-bottom: 12px; }

/* ════════════════════════════════════════
   PRODUITS RELIÉS
════════════════════════════════════════ */
.pd-related { padding-bottom: 64px; }

.pd-related-title {
    font-family: var(--font-head);
    font-size: 1.4rem; font-weight: 800;
    margin-bottom: 24px;
}

.pd-related-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.rc-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 12px;
    display: flex; flex-direction: column;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    cursor: pointer; color: var(--text);
    text-decoration: none;
}
.rc-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26,209,118,.15);
    color: var(--text);
}
.rc-img {
    aspect-ratio: 1;
    background: linear-gradient(135deg,#1a0a40,#2d1060);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; overflow: hidden;
}
.rc-img img {
    width: 70%; height: 70%; object-fit: contain;
    transition: transform .3s;
}
.rc-card:hover .rc-img img { transform: scale(1.08); }
.rc-name { font-size: .8rem; font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.rc-price { font-size: .85rem; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.btn-rc {
    display: block; width: 100%; text-align: center;
    background: var(--greeen); color: #0e0e0e !important;
    padding: 7px; border-radius: var(--radius);
    font-family: var(--font-body); font-weight: 700; font-size: .78rem;
    margin-top: auto; transition: background .2s;
    border: none; cursor: pointer;
}
.btn-rc:hover { background: var(--greeen-lt); }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 900px) {
    .pd-wrap {
        grid-template-columns: 1fr;
        gap: 28px; padding: 24px 0 48px;
    }
    .pd-gallery { position: static; }
    .pd-main-img { max-width: 380px; margin: 0 auto 12px; }
    .pd-related-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
    .pd-title { font-size: 1.5rem; }
    .pd-price { font-size: 1.6rem; }
    .pd-qty-row { flex-wrap: wrap; }
    .btn-add-cart { width: 100%; }
    .pd-tabs-nav { overflow-x: auto; }
    .pd-tab-btn { padding: 10px 14px; font-size: .82rem; }
    .pd-related-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .pd-specs-table td:first-child { width: 45%; }
}

/* Désactiver le curseur zoom sur les images no-zoom-mobile */
.pd-main-img.no-zoom-mobile img {
    cursor: default;
}
/* Masquer l'icône zoom hint sur mobile pour ces images */
@media (max-width: 600px) {
    .pd-main-img.no-zoom-mobile .pd-zoom-hint,
    .pd-main-img.no-zoom-mobile .mobile-hidden {
        display: none;
    }
    .pd-main-img.no-zoom-mobile img {
        cursor: default;
        pointer-events: none; /* désactive le clic / tap sur mobile */
    }
}

/* Prix barré dans les related cards */
.rc-price-old {
    font-size: .8rem;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-left: 6px;
    font-weight: 400;
}

/* Badge promo dans le bloc prix principal — cohérence avec item.css */
.pd-promo-badge {
    display: inline-block;
    background: rgba(239, 68, 68, .15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 10px;
    margin-left: 8px;
    vertical-align: middle;
}