/* ======================================================
   PRODUCT DETAIL — Mobile First
   ====================================================== */

/* ------------------------------
   Infos produit
-------------------------------- */

.product-title{
    font-size:20px;
    font-weight:500;
    margin-bottom:6px;
}

.product-ref{
    margin-top:2px;
    font-size:12px;
    color:var(--text-muted);
    font-weight:400;
}

.product-rating-summary{
    margin-top:6px;
    margin-bottom:8px;
}

.product-rating-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--text-color);
    text-decoration:none;
    font-size:12px;
}

.product-rating-link:hover{
    color:var(--secondary-color-dark);
}

.product-rating-link.is-empty{
    color:var(--text-muted);
}

.product-rating-stars{
    display:inline-flex;
    align-items:center;
    gap:2px;
    line-height:1;
}

.product-rating-star{
    display:inline-block;
    font-size:14px;
    color:#d1d5db;
}

.product-rating-star.is-full{
    color:var(--rating-color);
}

.product-rating-star.is-half{
    color:var(--rating-color);
}

.product-rating-text{
    display:inline-flex;
    align-items:center;
    gap:6px;
    line-height:1.2;
}

.product-rating-count{
    color:var(--text-muted);
}

.detail-info,
.detail-info p,
.detail-info li{
    font-size:13px;
    line-height:1.5;
}

.product-price .text-brand{
    font-size:16px;
    font-weight:600;
    color:var(--accent-color);
}

.product-price .old-price{
    font-size:14px;
    color:#999;
    text-decoration:line-through;
}

.product-price .save-price{
    font-size:15px;
    color:var(--danger-color);
}

/* ------------------------------
   Galerie produit
-------------------------------- */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}

.gallery-grid-item{
    width:100%;
}

.gallery-grid-item img{
    width:100%;
    height:auto;
    aspect-ratio:var(--product-aspect-ratio,1);
    object-fit:cover;
    display:block;
}

/* ------------------------------
   Miniatures couleur
-------------------------------- */

.color-thumbs li{
    aspect-ratio:var(--product-aspect-ratio,1);
    border:1px solid var(--border-color);
    cursor:pointer;
    overflow:hidden;
    background:var(--surface-color);
}

/* ------------------------------
   Disponibilité produit
-------------------------------- */

.product-availability{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
}

.availability-label{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--text-muted);
    font-weight:400;
}

.availability-dot{
    width:8px;
    height:8px;
    display:inline-block;
}

.dot-in_stock{ background:var(--success-color); }
.dot-low_stock{ background:var(--warning-color); }
.dot-out_stock{ background:var(--danger-color); }

.stock-in_stock{ color:var(--success-color); }
.stock-low_stock{ color:var(--warning-color); }
.stock-out_stock{ color:var(--danger-color); }

/* ------------------------------
   Quantité
-------------------------------- */

.qty-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.qty-label{
    font-size:12px;
    color:var(--text-muted);
    white-space:nowrap;
}

.qty-control{
    display:flex;
    align-items:center;
    width:100px;
    height:30px;
    border:1px solid var(--border-color);
    background:var(--surface-color);
}

.qty-btn{
    width:30px;
    height:30px;
    border:0;
    background:transparent;
    font-size:16px;
    font-weight:500;
    color:var(--text-color);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.qty-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.qty-value{
    flex:1;
    text-align:center;
    font-size:12px;
    font-weight:600;
}

/* ------------------------------
   CTA
-------------------------------- */

.product-cta-separator{
    height:1px;
    background:var(--border-color);
    margin:20px 0 16px;
}

.product-cta{
    display:flex;
    flex-direction:column;
}

.cta-buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
}



.btn-cta{
    display:inline-flex;
    width:100%;
    padding:14px 16px;
    font-size:14px;
    font-weight:700;
    border:1px solid var(--secondary-color-dark);
    background:var(--surface-color);
    color:var(--secondary-color-dark);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    min-height:52px;
    letter-spacing:.02em;
}

.btn-cta i{
    margin-right:6px;
    font-size:14px;
    color:inherit;
}

.btn-cta.primary:hover:not(.is-disabled){
    background:var(--secondary-color-dark);
    color:var(--surface-color);
}

.btn-cta.secondary{
    background:var(--secondary-color-dark);
    color:var(--surface-color);
    box-shadow:0 14px 24px rgba(0,0,0,.12);
}

.btn-cta.is-disabled{
    opacity:.45;
    cursor:not-allowed;
}

.product-free-ship-hint{
    margin-top:10px;
    padding:10px 12px;
    border:1px solid color-mix(in srgb, var(--success-color) 30%, var(--border-color));
    background:color-mix(in srgb, var(--success-color) 8%, var(--surface-color));
    color:var(--text-color);
    font-size:12px;
    line-height:1.5;
}

.product-free-ship-hint strong{
    color:var(--success-color);
    font-weight:700;
}


/* ------------------------------
   Collapse produit
-------------------------------- */

.product-collapse{
    margin-top:20px;
    border-top:1px solid var(--border-color);
}

.collapse-item{
    border-bottom:1px solid var(--border-color);
}

.collapse-toggle{
    width:100%;
    display:flex;
    align-items:center;
    padding:14px 0;
    background:none;
    border:0;
    cursor:pointer;
    text-align:left;
}

.collapse-icon{
    width:18px;
    font-size:16px;
    font-weight:500;
    color:var(--text-color);
    flex-shrink:0;
}

.collapse-title{
    font-size:13px;
    font-weight:500;
    color:var(--text-color);
}

.collapse-content{
    padding:0 0 14px 18px;
    font-size:13px;
    line-height:1.6;
    color:#374151;
}


.size-pill.is-disabled{
    opacity:0.4;
    cursor:not-allowed;
}

.product-card { background: #fff; border: 1px solid #ececec; transition: box-shadow .13s; box-shadow:0 1px 3px rgba(34,34,34,.04); border-radius: 0; }
.product-card { background: var(--surface-color); border: 1px solid var(--border-color); transition: box-shadow .13s; box-shadow:0 1px 3px rgba(34,34,34,.04); border-radius: 0; }
.product-card:hover { box-shadow: 0 2px 8px rgba(34,34,34,.12); }
.product-image-wrap { width:100%; aspect-ratio:var(--product-aspect-ratio,0.8); background:var(--surface-muted); overflow:hidden; }
.product-thumb-img { width:100%; height:auto; aspect-ratio:var(--product-aspect-ratio,0.8); object-fit:cover; background:var(--surface-muted); }
.product-card-body { padding:0; }
.badge-status { display:inline-block; font-size:11px; font-weight:500; background:var(--surface-muted); color:var(--text-color); border-radius:0; padding:2px 6px; margin-bottom:2px; }
.product-title { font-size:12px; font-weight:500; color:var(--text-color); line-height:1.35; margin-bottom:0; }
.clamp-2lines { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.product-ref { font-size:10px; color:var(--text-muted); }
.product-price { font-size:12px; margin-top:3px; }
.promo-price { color:var(--danger-color); font-weight: bold; margin-right: 8px;}
.old-price { color:var(--text-muted); text-decoration:line-through; font-size:10px;}





.badge-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    border-radius: 0;
    padding: 2px 6px;
    margin-bottom: 2px;
    margin-right: 3px;
}

.badge-oos { background: #ffe7e7; color: #dc2626; }
.badge-new { background: #e9fbe9; color: #16a34a; }
.badge-promo { background: #fff3d6; color: #e65100; }

.product-title { font-size:12px; font-weight:500; color:#111; line-height:1.35; margin-bottom:0; }
.clamp-2lines { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.product-ref { font-size:10px; color:#6b7280; }
.product-price { font-size:12px; margin-top:3px; }

.product-price-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: 18px 0 18px 0; /* ⬅️ Décalage vertical avant ET après */
}

.price-main {
    font-size: 18px;
    font-weight: 400;   /* ⬅️ PAS de gras */
    color: #111;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.promo-price {
    color: #d11f1f;
    font-weight: 400;   /* ⬅️ PAS de gras */
}

.old-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-left: 6px;
    font-weight: 400;
}

.price-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;   /* ⬅️ PAS de gras */
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.badge-amount {
    background: #ffe7e7;
    color: #dc2626;
}

.badge-percent {
    background: #fff3d6;
    color: #e65100;
}


/* Galerie principale: taille standard */
.detail-gallery .gallery-main{
  width: 100%;
  max-width: 560px;          /* desktop */
  margin: 0 auto 10px;
  aspect-ratio: var(--product-aspect-ratio, 3/4); /* ratio global */
  background: #f8f8f8;
  border: 1px solid #ececec;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-gallery .gallery-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* image uniforme */
  display: block;
}

/* Option mobile */
@media (max-width: 767.98px){
  .detail-gallery .gallery-main{
    max-width: 100%;
  }
}


/* Responsive : empile si trop peu de place */
@media (max-width: 480px) {
    .product-price-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px 0;
        margin: 12px 0 12px 0; /* ⬅️ Décalage aussi en mobile */
    }
    .price-main { font-size: 15px; }
    .old-price { font-size: 12px; }
    .price-badge { font-size: 11px; padding: 1px 6px; }
}
.product-reviews-block {
    border-top: 1px solid #ececec;
    padding-top: 20px;
}

.review-form-card {
    background: #faf8f4;
    border: 1px solid #ece6dd;
    padding: 16px;
}

.reviews-toolbar{
    margin-left:auto;
}

.reviews-toolbar-grid{
    display:flex;
    align-items:end;
    gap:10px;
    flex-wrap:wrap;
}

.reviews-toolbar-field{
    min-width:180px;
}

.reviews-toolbar-label{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-muted);
}

.reviews-comment-filter{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:0 12px;
    border:1px solid var(--border-color);
    background:var(--surface-color);
    color:var(--text-color);
    font-size:12px;
    cursor:pointer;
}

.reviews-comment-filter input{
    margin:0;
}

.product-review-stars {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.product-review-star-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #c7c7c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.product-review-star-btn:hover,
.product-review-star-btn:focus,
.product-review-star-btn.is-active {
    color: #ffc107;
    border-color: #ffc107;
    background: #fff8dd;
    transform: translateY(-1px);
}

.product-review-star-glyph {
    display: inline-block;
    line-height: 1;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
    font-size: 24px;
}

.product-review-feedback {
    min-height: 21px;
    font-size: 14px;
    color: #4b5563;
}

.product-review-feedback strong {
    color: #111827;
}

.review-form {
    display: flex;
    flex-direction: column;
}

.review-form .btn.btn-fill-out {
    align-self: center;
    min-width: 220px;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-item {
    border: 1px solid #ececec;
    background: #fff;
    padding: 12px 14px;
}

.review-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.review-item-author {
    min-width: 0;
}

.review-item-name{
    display:block;
    color:var(--text-color);
    font-size:14px;
    line-height:1.3;
}

.review-item-meta {
    color: #777;
    font-size: 11px;
    margin-bottom: 0;
    margin-top: 6px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.review-rating-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.review-rating {
    color: #111;
    font-weight: 700;
    font-size: 12px;
}

.review-item-text {
    color: #3d3d3d;
    line-height: 1.5;
    font-size: 13px;
}

.review-verified-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    background:color-mix(in srgb, var(--success-color) 14%, var(--surface-color));
    color:var(--success-color);
    border:1px solid color-mix(in srgb, var(--success-color) 32%, var(--border-color));
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.reviews-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #4b5563;
    font-size: 13px;
}

.reviews-header-score {
    font-weight: 600;
    color: #111827;
}

.reviews-header-count {
    color: #6b7280;
}

.review-stars-static .product-rating-star {
    font-size: 13px;
    color: #ffc107;
}

@media (max-width: 767.98px) {
    .product-rating-link {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

    .review-form-card,
    .review-item {
        padding: 12px;
    }

    .review-item-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-rating-wrap {
        gap: 6px;
    }

    .product-review-stars {
        gap: 6px;
    }

    .reviews-toolbar{
        width:100%;
    }

    .reviews-toolbar-grid{
        width:100%;
        align-items:stretch;
    }

    .reviews-toolbar-field{
        min-width:0;
        width:100%;
    }

    .product-review-star-btn {
        width: 36px;
        height: 36px;
    }
}