/* =========================================================
   Vallières Atelier — boutique.
   Chargée uniquement sur les pages WooCommerce.

   WooCommerce dispose ses produits avec des flottants et des
   largeurs en pourcentage. On neutralise ça pour passer en
   grille CSS, sinon les deux systèmes se battent.
   ========================================================= */

.wc-page {
    padding-block: var(--esp-l) var(--esp-xl);
}

/* ── Entête de la boutique ──────────────────────────────── */

.woocommerce-products-header {
    margin-bottom: var(--esp-m);
}

.woocommerce-products-header__title,
.wc-page h1.entry-title {
    font-family: var(--titre);
    font-size: var(--t-h1);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 var(--esp-xs);
}

.woocommerce .woocommerce-breadcrumb {
    font-family: var(--titre);
    font-size: var(--t-minuscule);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texte-doux);
    margin-bottom: var(--esp-s);
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--texte-doux);
    text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--brun);
    text-decoration: underline;
}

/* Compteur et tri sur une même ligne */
.woocommerce .woocommerce-result-count {
    float: none;
    margin: 0;
    font-size: var(--t-petit);
    color: var(--texte-doux);
}

.woocommerce .woocommerce-ordering {
    float: none;
    margin: 0;
}

.woocommerce .woocommerce-ordering select {
    font-family: var(--texte-police);
    font-size: var(--t-petit);
    color: var(--texte);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 0.6rem 0.75rem;
}

/* On regroupe compteur + tri grâce à un conteneur flex implicite */
.woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce .woocommerce-result-count {
    display: inline-block;
}

.woocommerce .woocommerce-ordering {
    display: inline-block;
    margin-left: var(--esp-s);
}

/* ── Grille de produits ─────────────────────────────────── */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin: var(--esp-m) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 560px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Neutralisation du système de flottants de WooCommerce */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Image */
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0 0 var(--esp-xs);
    border-radius: var(--rayon);
    background: var(--taupe-pale);
    transition: transform 0.9s var(--sortie);
}

/* Le survol zoome l'image sans déplacer la carte */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    overflow: hidden;
    border-radius: var(--rayon);
    text-decoration: none;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}

/* Titre */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--titre);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--texte);
    padding: 0;
    margin: 0 0 var(--esp-3xs);
}

/* Prix */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--texte-police);
    font-size: var(--t-petit);
    font-weight: 500;
    color: var(--texte-doux);
    margin: 0 0 var(--esp-xs);
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
    text-decoration: none;
    font-weight: 600;
    color: var(--brun);
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
    opacity: 0.55;
    margin-right: var(--esp-3xs);
}

/* Étiquette de solde : aux couleurs de la marque, pas le rond olive */
.woocommerce span.onsale {
    position: absolute;
    top: var(--esp-2xs);
    left: var(--esp-2xs);
    right: auto;
    min-height: 0;
    min-width: 0;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    background: var(--brun);
    color: var(--creme);
    font-family: var(--titre);
    font-size: var(--t-minuscule);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--rayon);
    margin: 0;
}

/* ── Pièce partie : bande diagonale ─────────────────────── */

/* Cadre ajouté par le thème autour de la seule vignette, pour que la bande
   traverse la photo et non le titre. */
.produit-vignette {
    position: relative;
    overflow: hidden;
    border-radius: var(--rayon);
    margin-bottom: var(--esp-xs);
}

/* Deux éléments imbriqués : l'extérieur porte la rotation et le débord,
   l'intérieur le fond et le texte. Séparer les deux évite que la rotation
   ne vienne fausser l'interlettrage. */
.bande-vendu {
    position: absolute;
    top: 50%;
    left: -14%;
    width: 128%;
    transform: translateY(-50%) rotate(-11deg);
    pointer-events: none;
    z-index: 3;
}

.bande-vendu > span {
    display: block;
    background: rgba(42, 23, 18, 0.9);
    color: var(--creme);
    text-align: center;
    padding: 0.6rem 0;
    font-family: var(--titre);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}

/* Sur la fiche produit, la bande est plus grande */
.bande-vendu--fiche > span {
    font-size: 1rem;
    padding: 0.85rem 0;
    letter-spacing: 0.28em;
}

/* La photo passe en retrait : la pièce n'est plus à vendre */
.woocommerce ul.products li.product.outofstock a img {
    filter: saturate(0.45) brightness(1.03);
}

/* Nécessaire pour que la bande de la fiche ne dépasse pas du cadre.
   Le zoom n'est pas touché : il est rogné par son propre conteneur. */
.woocommerce div.product div.images {
    overflow: hidden;
    border-radius: var(--rayon);
}

/* ── Boutons ────────────────────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brun);
    color: var(--creme);
    font-family: var(--titre);
    font-size: var(--t-petit);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.95rem 1.6rem;
    border: 1px solid var(--brun);
    border-radius: var(--rayon);
    transition: background-color 0.3s var(--doux), color 0.3s var(--doux);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
    background: var(--creme);
    color: var(--brun);
    border-color: var(--brun);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled {
    background: var(--taupe);
    border-color: var(--taupe);
    color: var(--brun-fonce);
    cursor: not-allowed;
}

/* Dans la grille, le bouton se colle en bas de la carte */
.woocommerce ul.products li.product .button {
    margin-top: auto;
    align-self: flex-start;
}

/* Lien « Voir le panier » qui apparaît après un ajout */
.woocommerce ul.products li.product .added_to_cart {
    display: inline-block;
    margin-top: var(--esp-2xs);
    font-family: var(--titre);
    font-size: var(--t-minuscule);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Messages ───────────────────────────────────────────── */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    background: var(--creme-ombre);
    border-top: 2px solid var(--brun);
    color: var(--texte);
    font-size: var(--t-petit);
    border-radius: var(--rayon);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
    color: var(--brun);
}

.woocommerce .woocommerce-error {
    border-top-color: #a4462f;
}

/* ── Fiche produit ──────────────────────────────────────── */

.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 900px) {
    .woocommerce div.product {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* Cadre carré, quelle que soit l'orientation de la photo.
   « contain » plutôt que « cover » : sur une fiche produit on montre la pièce
   en entier, on ne la recadre pas. Les photos verticales laissent donc des
   marges sur les côtés — c'est le prix de l'honnêteté, et ça évite qu'une
   photo portrait creuse un vide de 800 px à côté du prix. */
.woocommerce div.product div.images img {
    border-radius: var(--rayon);
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--creme-ombre);
}

/* L'image agrandie du zoom ne doit pas hériter du cadre carré */
.woocommerce div.product div.images img.zoomImg {
    aspect-ratio: auto;
    object-fit: fill;
    background: none;
}

.woocommerce div.product .product_title {
    font-family: var(--titre);
    font-size: var(--t-h2);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 var(--esp-xs);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--brun);
    margin-bottom: var(--esp-s);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--texte-doux);
    margin-bottom: var(--esp-s);
}

.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2xs);
    margin-bottom: var(--esp-m);
}

.woocommerce .quantity input.qty {
    width: 5rem;
    padding: 0.85rem 0.5rem;
    font-family: var(--texte-police);
    font-size: 1rem;
    text-align: center;
    color: var(--texte);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.woocommerce div.product .product_meta {
    font-size: var(--t-minuscule);
    letter-spacing: 0.04em;
    color: var(--texte-doux);
    padding-top: var(--esp-s);
    border-top: 1px solid var(--bordure);
}

.woocommerce div.product .stock {
    font-family: var(--titre);
    font-size: var(--t-minuscule);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.woocommerce div.product .stock.in-stock {
    color: #4a7c52;
}

.woocommerce div.product .stock.out-of-stock {
    color: #a4462f;
}

/* Onglets et sections liées : pleine largeur sous les deux colonnes */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
    grid-column: 1 / -1;
    margin-top: var(--esp-l);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 var(--esp-m);
    border-bottom: 1px solid var(--bordure);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 var(--esp-m) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--titre);
    font-size: var(--t-petit);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-doux);
    padding: 0 0 var(--esp-2xs);
    display: inline-block;
    border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--brun);
    border-bottom-color: var(--brun);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
    font-size: var(--t-h3);
    margin-bottom: var(--esp-s);
}

/* ── Panier et commande ─────────────────────────────────── */

.woocommerce table.shop_table {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    border-collapse: collapse;
}

.woocommerce table.shop_table th {
    font-family: var(--titre);
    font-size: var(--t-minuscule);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
    border-top: 1px solid var(--bordure);
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
    background: var(--creme-ombre);
    border-radius: var(--rayon);
    padding: var(--esp-s);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
    font-family: var(--texte-police);
    font-size: 1rem;
    color: var(--texte);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 0.8rem 0.75rem;
}

.woocommerce form .form-row label {
    font-size: var(--t-petit);
    font-weight: 500;
}

/* ── Pagination ─────────────────────────────────────────── */

.woocommerce nav.woocommerce-pagination ul {
    border: 0;
    display: flex;
    gap: var(--esp-2xs);
    justify-content: center;
    margin-top: var(--esp-l);
}

.woocommerce nav.woocommerce-pagination ul li {
    border: 0;
    overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-family: var(--titre);
    font-size: var(--t-petit);
    font-weight: 700;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--blanc);
    color: var(--texte);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--brun);
    border-color: var(--brun);
    color: var(--creme);
}