/* doc-project | public/assets/css/product.css | compose une fiche produit premium, sa galerie tactile, ses options et sa réassurance */
.breadcrumbs { display: flex; gap: .45rem; align-items: center; overflow-x: auto; padding-block: 1rem; color: var(--ink-soft); font-size: .75rem; white-space: nowrap; }
.breadcrumbs a:hover { color: var(--wine); }
.product-detail { display: grid; gap: 1.6rem; padding-block: .5rem 3rem; }
.product-gallery { min-width: 0; }
.product-gallery__main { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-sm); }
.product-gallery__main picture, .product-gallery__main img { width: 100%; height: 100%; }
.product-gallery__main img { object-fit: cover; }
.product-gallery__thumbs { display: flex; gap: .6rem; overflow-x: auto; padding: .75rem .1rem .2rem; scrollbar-width: none; }
.product-gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb { width: 4.3rem; height: 4.3rem; flex: 0 0 auto; overflow: hidden; border: 2px solid transparent; border-radius: .9rem; background: white; padding: 0; opacity: .7; transition: opacity .2s, border-color .2s, transform .2s; }
.gallery-thumb:hover, .gallery-thumb.is-active { border-color: var(--wine); opacity: 1; transform: translateY(-2px); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { align-self: start; }
.product-info h1 { margin: .45rem 0 .8rem; font-size: clamp(2.25rem, 7vw, 4.2rem); }
.product-price { display: flex; flex-wrap: wrap; gap: .7rem; align-items: baseline; margin-bottom: 1rem; }
.product-price strong { color: var(--wine); font-family: var(--font-display); font-size: 1.7rem; }
.product-price del { color: var(--ink-soft); }
.product-lead { color: var(--ink-soft); font-size: 1.05rem; }
.availability { display: flex; gap: .55rem; align-items: center; margin: 1rem 0; border-radius: var(--radius); padding: .85rem 1rem; font-size: .82rem; font-weight: 750; }
.availability.is-available { background: #e7f1ea; color: #315b42; }
.availability.is-unavailable { background: #f5dddd; color: #852d31; }
.unique-note { display: flex; gap: .75rem; align-items: center; margin-block: 1rem; border: 1px solid #e6d2a9; border-radius: var(--radius); background: linear-gradient(135deg, #fffaf0, #f5ead2); padding: .9rem 1rem; color: #71501b; }
.unique-note > .icon { width: 1.7rem; height: 1.7rem; }
.unique-note span { display: grid; }
.unique-note small { opacity: .8; }
.product-buy { display: grid; gap: 1rem; margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.product-buy__row { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .75rem; align-items: end; }
.product-buy__row input { text-align: center; }
.favorite-wide { margin-top: .8rem; }
.product-reassurance { display: grid; gap: .65rem; margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.product-reassurance > div { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; color: var(--ink-soft); }
.product-reassurance > div > .icon { color: var(--rose); }
.product-reassurance span { display: grid; }
.product-reassurance strong { color: var(--ink); font-size: .82rem; }
.product-reassurance small { font-size: .72rem; }
.product-description { display: grid; gap: 1.5rem; margin-bottom: 2rem; border-radius: var(--radius-lg); background: white; padding: clamp(1.4rem, 4vw, 3rem); box-shadow: var(--shadow-sm); }
.product-description h2 { margin: .4rem 0 1rem; }
.product-description p { margin-bottom: 0; color: var(--ink-soft); white-space: normal; }
.product-description dl { display: grid; align-content: start; gap: 0; margin: 0; }
.product-description dl div { display: grid; grid-template-columns: minmax(6rem, .7fr) 1.3fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.product-description dt { color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.product-description dd { margin: 0; font-size: .88rem; }
@media (min-width: 760px) { .product-detail { grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); gap: clamp(2rem, 5vw, 5rem); padding-block: 1.5rem 5rem; } .product-info { position: sticky; top: 8.5rem; } .product-description { grid-template-columns: 1.25fr .75fr; } }
@media (min-width: 1100px) { .product-gallery__main { aspect-ratio: 5 / 6; } }