/* /var/www/web.nikkidepot.com/public/product/assets/css/product.css */

/* =========================================================
   00. VARIABLES — DESIGN TOKENS NIKKI
   ========================================================= */

:root {
    --nikki-bg: #fbfcfd;
    --nikki-card: #ffffff;

    --nikki-ink: #020617;
    --nikki-ink-soft: #0f172a;

    --nikki-muted: #64748b;
    --nikki-muted-soft: #94a3b8;

    --nikki-border: rgba(15, 23, 42, 0.11);
    --nikki-border-soft: rgba(15, 23, 42, 0.075);

    --nikki-teal: #0f766e;
    --nikki-teal-hover: #115e59;
    --nikki-teal-dark: #134e4a;
    --nikki-teal-soft: #ccfbf1;

    --nikki-danger: #ef4444;

    --nikki-radius-lg: 1.5rem;
    --nikki-radius-xl: 1.75rem;
    --nikki-radius-2xl: 2rem;

    --nikki-shadow-card: 0 18px 48px rgba(15, 23, 42, 0.045);
    --nikki-shadow-panel: 0 24px 70px rgba(15, 23, 42, 0.07);
    --nikki-shadow-teal: 0 18px 38px rgba(15, 118, 110, 0.25);
}


/* =========================================================
   01. BASE PAGE PRODUIT
   ========================================================= */

.product-page {
    min-height: auto;
    overflow-x: clip;
    background:
        radial-gradient(circle at 12% 4%, rgba(20, 184, 166, 0.045), transparent 32%),
        linear-gradient(180deg, #fbfcfd 0%, #f8fafc 100%);
}

.product-page img {
    max-width: 100%;
}

.product-main {
    min-height: auto;
}

.product-lightbox-open,
.product-lightbox-open body {
    overflow: hidden;
}


/* =========================================================
   02. UTILITAIRES TECHNIQUES
   ========================================================= */

.product-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.product-no-scrollbar::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   03. GALERIE — COMPLÉMENTS UNIQUEMENT
   Le layout principal reste dans gallery.php avec Tailwind.
   Les hauteurs sont ici pour éviter les problèmes de purge Tailwind.
   ========================================================= */

:root {
--product-gallery-mobile-height: 65vh;
--product-gallery-mobile-min: 350px;
--product-gallery-mobile-max: 530px;

    --product-gallery-sm-height: 52vh;
    --product-gallery-sm-min: 360px;
    --product-gallery-sm-max: 490px;

    --product-gallery-desktop-height: 520px;
    --product-gallery-xl-height: 540px;
}

.product-gallery-viewport {
    height: var(--product-gallery-mobile-height);
    min-height: var(--product-gallery-mobile-min);
    max-height: var(--product-gallery-mobile-max);
    cursor: zoom-in;
}

@media (min-width: 640px) {
    .product-gallery-viewport {
        height: var(--product-gallery-sm-height);
        min-height: var(--product-gallery-sm-min);
        max-height: var(--product-gallery-sm-max);
    }
}

@media (min-width: 1024px) {
    .product-gallery-viewport {
        height: var(--product-gallery-desktop-height);
        min-height: 0;
        max-height: var(--product-gallery-desktop-height);
    }
}

@media (min-width: 1280px) {
    .product-gallery-viewport {
        height: var(--product-gallery-xl-height);
        max-height: var(--product-gallery-xl-height);
    }
}

[data-gallery-track] {
    will-change: transform;
}

[data-gallery-thumb] {
    position: relative;
}

[data-gallery-thumb].is-active {
    opacity: 1;
    border-color: var(--nikki-teal);
}

[data-gallery-thumb].is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--nikki-teal);
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

[data-gallery-dot].is-active {
    width: 1.25rem;
    background: var(--nikki-teal);
}

[data-gallery-slide] img {
    filter: drop-shadow(0 18px 26px rgba(15, 23, 42, 0.08));
}


/* =========================================================
   04. PANNEAU ACHAT — CONTAINER
   ========================================================= */

.product-purchase-panel {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: var(--nikki-radius-xl);
    background: rgba(255, 255, 255, 0.94);
    padding: 1.25rem;
    box-shadow:
        var(--nikki-shadow-panel),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
}

@media (max-width: 1023.98px) {
    .product-purchase-panel {
        border-radius: var(--nikki-radius-lg);
        padding: 0.85rem;
        box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
    }
}


/* =========================================================
   05. PANNEAU ACHAT — BADGES, TITRE, PRIX
   ========================================================= */

.product-purchase-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-status-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: #f1f5f9;
    padding: 0 0.75rem;
    color: var(--nikki-ink-soft);
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
}

.product-status-pill--availability {
    background: #ecfdf5;
    color: #047857;
}

.product-status-pill.is-unavailable {
    background: #fef2f2;
    color: #991b1b;
}

.product-status-pill.is-reserved {
    background: #fffbeb;
    color: #92400e;
}

.product-title {
    margin-top: 1rem;
    max-width: 13ch;
    color: var(--nikki-ink);
    font-size: clamp(2rem, 4vw, 2.55rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.product-price-block {
    margin-top: 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    padding-bottom: 1.25rem;
}

.product-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.product-price {
    color: var(--nikki-ink);
    font-size: clamp(3rem, 6vw, 3.45rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.075em;
}

.product-price-discount {
    margin-bottom: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.product-old-price {
    color: var(--nikki-muted-soft);
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: line-through;
}

.product-discount-badge {
    display: inline-flex;
    border-radius: 999px;
    background: var(--nikki-ink-soft);
    padding: 0.25rem 0.6rem;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.product-stock-text {
    margin-top: 0.45rem;
    color: var(--nikki-muted);
    font-size: 0.875rem;
    font-weight: 800;
}

@media (max-width: 1023.98px) {
    .product-title {
        max-width: none;
        font-size: clamp(2rem, 9vw, 2.6rem);
    }
}


/* =========================================================
   06. PANNEAU ACHAT — VENDEUR
   Le bloc vendeur est majoritairement piloté par Tailwind
   dans purchase_panel.php.
   Ce CSS ne garde que les compléments impossibles ou utiles.
   ========================================================= */

[data-contact-seller] {
    cursor: pointer;
}


/* =========================================================
   07. PANNEAU ACHAT — CTA ET ACTIONS
   ========================================================= */

.product-add-cart-btn {
    margin-top: 1.25rem;
    display: inline-flex;
    min-height: 58px;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, var(--nikki-teal) 0%, var(--nikki-teal-hover) 52%, var(--nikki-teal-dark) 100%);
    padding: 0.85rem 1.25rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -0.02em;
    box-shadow: var(--nikki-shadow-teal);
    transition:
        transform 160ms ease,
        filter 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}

.product-add-cart-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.product-add-cart-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 22px 46px rgba(15, 118, 110, 0.32);
}

.product-add-cart-btn:active {
    transform: translateY(0);
}

.product-add-cart-btn:disabled {
    cursor: not-allowed;
    background: #e2e8f0;
    color: var(--nikki-muted-soft);
    box-shadow: none;
}

.product-secondary-actions {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.product-secondary-action {
    display: inline-flex;
    min-height: 44px;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 1rem;
    background: #ffffff;
    padding: 0 1rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    transition:
        background 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.product-secondary-action svg {
    width: 1rem;
    height: 1rem;
}

.product-secondary-action:hover {
    transform: translateY(-1px);
    background: #f8fafc;
    color: var(--nikki-ink);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.product-secondary-action.is-active {
    color: var(--nikki-danger);
}

.product-favorite-count {
    font-size: 0.75rem;
}

@media (max-width: 480px) {
    .product-secondary-actions {
        gap: 0.55rem;
    }

    .product-secondary-action {
        padding: 0 0.75rem;
    }
}


/* =========================================================
   08. PANNEAU ACHAT — LIVRAISON ET SÉCURITÉ
   ========================================================= */

.product-delivery-card,
.product-secure-card {
    margin-top: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    border-radius: var(--nikki-radius-lg);
    padding: 1rem;
}

.product-delivery-card {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.product-secure-card {
    margin-top: 0.75rem;
    background: var(--nikki-ink-soft);
    color: #ffffff;
}

.product-card-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--nikki-teal-soft);
}

.product-card-icon--teal {
    background: var(--nikki-teal-soft);
    color: var(--nikki-teal);
}

.product-card-icon svg {
    width: 1rem;
    height: 1rem;
}

.product-delivery-content {
    min-width: 0;
    flex: 1;
}

.product-delivery-card h2,
.product-secure-card h2 {
    font-size: 0.875rem;
    font-weight: 950;
}

.product-delivery-card h2 {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-secure-card p {
    margin-top: 0.25rem;
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.55;
}

.product-delivery-card dl {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.5rem;
}

.product-delivery-card dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.product-delivery-card dt {
    color: var(--nikki-muted);
    font-size: 0.875rem;
    font-weight: 750;
}

.product-delivery-card dd {
    color: var(--nikki-ink);
    font-size: 0.875rem;
    font-weight: 950;
}


/* =========================================================
   09. PANNEAU ACHAT — DATE ET SIGNALEMENT
   ========================================================= */

.product-panel-footer {
    margin-top: 1.25rem;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
}

.product-panel-footer p {
    color: var(--nikki-muted-soft);
    font-size: 0.78rem;
    font-weight: 750;
}

.product-panel-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--nikki-muted-soft);
    font-size: 0.75rem;
    font-weight: 850;
    transition: color 160ms ease;
}

.product-panel-footer a:hover {
    color: var(--nikki-danger);
}

.product-panel-footer svg {
    width: 0.875rem;
    height: 0.875rem;
}


/* =========================================================
   10. BLOCS INFORMATIONS — DESCRIPTION / CARACTÉRISTIQUES
   ========================================================= */

.product-info-card,
.product-related-section {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--nikki-radius-xl);
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: var(--nikki-shadow-card);
}

.product-info-heading p,
.product-related-head p {
    color: var(--nikki-muted-soft);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.product-info-heading h2,
.product-related-head h2 {
    margin-top: 0.25rem;
    color: var(--nikki-ink);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.product-prose {
    margin-top: 1rem;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 520;
    line-height: 1.85;
}

.product-empty-text {
    margin-top: 1rem;
    color: var(--nikki-muted);
    font-size: 0.9rem;
    font-weight: 650;
}

@media (max-width: 1023.98px) {
    .product-info-card,
    .product-related-section {
        border-radius: var(--nikki-radius-lg);
        padding: 0.85rem;
    }
}

@media (max-width: 480px) {
    .product-purchase-panel,
    .product-info-card,
    .product-related-section {
        margin-left: -0.15rem;
        margin-right: -0.15rem;
    }
}


/* =========================================================
   11. CARACTÉRISTIQUES — GRILLE
   ========================================================= */

.product-specs-grid {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
}

.product-spec-item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.1rem;
    background: #f8fafc;
    padding: 0.85rem 1rem;
}

.product-spec-item dt {
    color: var(--nikki-muted);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-spec-item dd {
    margin-top: 0.25rem;
    color: var(--nikki-ink);
    font-size: 0.9rem;
    font-weight: 850;
}

@media (min-width: 640px) {
    .product-specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   12. PRODUITS SIMILAIRES — HEADER
   ========================================================= */

.product-related-head {
    margin-bottom: 1.1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.product-related-head a {
    flex-shrink: 0;
    color: var(--nikki-ink-soft);
    font-size: 0.875rem;
    font-weight: 950;
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.22);
    text-underline-offset: 4px;
    transition: text-decoration-color 160ms ease;
}

.product-related-head a:hover {
    text-decoration-color: var(--nikki-ink-soft);
}


/* =========================================================
   13. PRODUITS SIMILAIRES — COMPLÉMENTS
   Layout piloté par Tailwind dans related.php.
   ========================================================= */

.product-related-section {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--nikki-radius-xl);
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: var(--nikki-shadow-card);
}

.product-related-head {
    margin-bottom: 1.1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.product-related-head p {
    color: var(--nikki-muted-soft);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.product-related-head h2 {
    margin-top: 0.25rem;
    color: var(--nikki-ink);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.product-related-head a {
    flex-shrink: 0;
    color: var(--nikki-ink-soft);
    font-size: 0.875rem;
    font-weight: 950;
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.22);
    text-underline-offset: 4px;
    transition: text-decoration-color 160ms ease;
}

.product-related-head a:hover {
    text-decoration-color: var(--nikki-ink-soft);
}

@media (max-width: 1023.98px) {
    .product-related-section {
        border-radius: var(--nikki-radius-lg);
        padding: 0.85rem;
    }
}

/* =========================================================
   14. LIGHTBOX — OVERLAY IMAGE
   ========================================================= */

.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.96);
    padding: 1.5rem;
    backdrop-filter: blur(16px);
}

.product-lightbox[hidden] {
    display: none !important;
}

.product-lightbox__content {
    display: flex;
    max-width: min(94vw, 1280px);
    max-height: 92vh;
    align-items: center;
    justify-content: center;
}

.product-lightbox__image {
    display: block;
    max-width: min(94vw, 1280px);
    max-height: 92vh;
    border-radius: 1rem;
    object-fit: contain;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

.product-lightbox__close,
.product-lightbox__nav {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    backdrop-filter: blur(12px);
    transition:
        background 160ms ease,
        transform 160ms ease;
}

.product-lightbox__close:hover,
.product-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.18);
}

.product-lightbox__close {
    top: calc(1rem + env(safe-area-inset-top));
    right: 1rem;
    width: 46px;
    height: 46px;
}

.product-lightbox__close svg {
    width: 24px;
    height: 24px;
}

.product-lightbox__nav {
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
}

.product-lightbox__nav:hover {
    transform: translateY(-50%) scale(1.04);
}

.product-lightbox__nav svg {
    width: 26px;
    height: 26px;
}

.product-lightbox__nav--prev {
    left: 1rem;
}

.product-lightbox__nav--next {
    right: 1rem;
}

@media (max-width: 1023.98px) {
    .product-lightbox {
        padding: 0;
        background: #020617;
    }

    .product-lightbox__content,
    .product-lightbox__image {
        max-width: 100vw;
        max-height: 100vh;
    }

    .product-lightbox__image {
        border-radius: 0;
    }

    .product-lightbox__nav {
        display: none;
    }
}


/* =========================================================
   15. TOAST PRODUIT
   ========================================================= */

.product-toast {
    position: fixed;
    top: 96px;
    left: 50%;
    z-index: 120;
    transform: translateX(-50%) translateY(-6px);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.product-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}