/**
 * Deekay School — habillage des pages WooCommerce
 *
 * Parti pris (validé avec Jessica) :
 *   VITRINE claire : boutique, catégorie, fiche produit   → fond blanc, boutons NOIRS
 *   TUNNEL sombre  : panier, commande, confirmation, compte → boutons en CONTOUR
 *
 * Ligne directrice : classe et sobre. Le jaune ne sert plus aux boutons ;
 * il ne reste que sur les titres du tunnel. Les liens de texte sont en beige.
 */

body.woocommerce,
body.woocommerce-page,
body.single-product,
body.post-type-archive-product,
body.tax-product_cat {
	--dks-accent: #FFE62B;
	--dks-gold: #E4C98C;
	--dks-ink: #1C1816;
	--dks-text-dark: #F3F4F6;
	--dks-muted-dark: #A3A3A3;
	--dks-line-dark: rgba(255, 255, 255, .18);
	--dks-card-dark: rgba(255, 255, 255, .05);
	--dks-card-dark-strong: rgba(255, 255, 255, .09);
	--dks-radius: 12px;
}

/* =====================================================================
   1. VITRINE CLAIRE — boutique, catégorie, fiche produit
   ===================================================================== */
body.post-type-archive-product,
body.tax-product_cat,
body.single-product {
	background-color: #ffffff;
	color: var(--dks-ink);
}

/* Header transparent = logo blanc : on bascule sur la version noire du DOM. */
body.single-product .ct-header .default-logo {
	display: none;
}
body.single-product .ct-header .sticky-logo {
	display: inline-block;
}
body.single-product .ct-header a:not(.ct-button),
body.single-product .ct-header .ct-menu-link,
body.single-product .ct-header button:not(.ct-button) {
	color: var(--dks-ink);
}

body.single-product #main {
	padding-top: 70px;
}

/* Fil d'ariane masqué : Jessica ne le souhaite pas. */
body.single-product .ct-breadcrumbs,
body.post-type-archive-product .ct-breadcrumbs,
body.tax-product_cat .ct-breadcrumbs,
body.woocommerce .woocommerce-breadcrumb {
	display: none;
}

/* --- Boutons de la vitrine : NOIRS, sobres --- */
body.post-type-archive-product .button,
body.tax-product_cat .button,
body.single-product .button,
body.single-product .single_add_to_cart_button,
body.post-type-archive-product a.add_to_cart_button,
body.tax-product_cat a.add_to_cart_button {
	background-color: var(--dks-ink);
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 13px;
	border: 1px solid var(--dks-ink);
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}
body.post-type-archive-product .button:hover,
body.tax-product_cat .button:hover,
body.single-product .button:hover,
body.single-product .single_add_to_cart_button:hover {
	background-color: #ffffff;
	color: var(--dks-ink);
	border-color: var(--dks-ink);
}

/* --- Cartes produit : pas d'encadrement, juste de l'air --- */
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
body.post-type-archive-product ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover {
	transform: none;
	box-shadow: none;
}

/* Vignette : l'image doit apparaître ENTIÈRE, jamais rognée. */
/* L'image occupe TOUTE la largeur de la carte : le titre, le prix et le bouton
   s'alignent donc exactement sur ses bords. Pas d'object-fit ici, sinon l'image
   est centrée dans sa boîte et le contenu paraît décalé. */
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: initial;
	background-color: transparent;
	border-radius: 8px;
	margin: 0 0 14px;
	transition: opacity .15s ease;
}
body.post-type-archive-product ul.products li.product a,
body.tax-product_cat ul.products li.product a {
	display: block;
}

/* Catégorie sous le prix : masquée (demande Jessica) */
body.post-type-archive-product ul.products li.product .entry-meta,
body.tax-product_cat ul.products li.product .entry-meta,
body.post-type-archive-product ul.products li.product .meta-categories,
body.tax-product_cat ul.products li.product .meta-categories {
	display: none;
}

/* Bouton aligné sur la largeur de l'image */
body.post-type-archive-product ul.products li.product .button,
body.tax-product_cat ul.products li.product .button,
body.post-type-archive-product ul.products li.product a.add_to_cart_button,
body.tax-product_cat ul.products li.product a.add_to_cart_button {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 12px;
}
body.post-type-archive-product ul.products li.product a:hover img,
body.tax-product_cat ul.products li.product a:hover img {
	opacity: .88;
}

body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
	color: var(--dks-ink);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: .02em;
	line-height: 1.35;
	margin-bottom: 4px;
}
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price {
	color: rgba(28, 24, 22, .70);
	font-weight: 500;
	font-size: 15px;
}

/* --- Fiche produit --- */
body.single-product .product_title {
	color: var(--dks-ink);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.2;
	font-size: clamp(20px, 2.2vw, 27px);
	margin-bottom: 10px;
}
body.single-product .product .summary .price,
body.single-product .product > .price,
body.single-product .product .summary .price .woocommerce-Price-amount,
body.single-product .product .summary .price bdi {
	color: var(--dks-ink);
	font-weight: 500;
	font-size: clamp(18px, 1.8vw, 22px);
}
body.single-product .product .summary .price {
	display: block;
	margin: 0 0 20px;
}
body.single-product .woocommerce-product-gallery {
	max-width: 440px;
}
body.single-product .woocommerce-product-gallery img {
	border-radius: 8px;
}

/* Onglet « Description » supprimé : la description s'enchaîne directement,
   sans titre ni soulignement. */
/* !important assumé : le thème pose sa propre règle d'affichage sur .tabs. */
body.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs,
body.single-product .woocommerce-tabs ul.tabs {
	display: none !important;
}
body.single-product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}
body.single-product .woocommerce-tabs {
	border-top: 1px solid rgba(28, 24, 22, .12);
	padding-top: 22px;
	margin-top: 0;
}
/* L'espace avant la description était trop grand (retour Jessica). */
body.single-product .woocommerce-tabs .panel {
	margin-top: 0;
	padding-top: 0;
}
body.single-product div.product {
	margin-bottom: 20px;
}

/* =====================================================================
   2. TUNNEL SOMBRE — panier, commande, confirmation, mon compte
   ===================================================================== */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	background-color: var(--dks-ink);
	color: var(--dks-text-dark);
}

body.woocommerce-cart #main-container,
body.woocommerce-checkout #main-container,
body.woocommerce-account #main-container,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.woocommerce-cart [class*="ct-container"],
body.woocommerce-checkout [class*="ct-container"],
body.woocommerce-account [class*="ct-container"] {
	background-color: transparent;
}

body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.woocommerce-account #main {
	padding-top: 70px;
}

/* Titres */
body.woocommerce-cart #main h1,
body.woocommerce-checkout #main h1,
body.woocommerce-account #main h1,
body.woocommerce-cart #main .entry-title,
body.woocommerce-checkout #main .entry-title,
body.woocommerce-account #main .entry-title {
	color: var(--dks-accent);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1.1;
	margin-bottom: 28px;
}
body.woocommerce-cart #main h2,
body.woocommerce-checkout #main h2,
body.woocommerce-account #main h2,
body.woocommerce-checkout #main h3 {
	color: var(--dks-text-dark);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: .05em;
	margin-bottom: 16px;
}

body.woocommerce-cart #main p,
body.woocommerce-checkout #main p,
body.woocommerce-account #main p,
body.woocommerce-cart #main li,
body.woocommerce-account #main li,
body.woocommerce-cart #main label,
body.woocommerce-checkout #main label,
body.woocommerce-account #main label,
body.woocommerce-cart #main td,
body.woocommerce-checkout #main td,
body.woocommerce-account #main td,
body.woocommerce-cart #main th,
body.woocommerce-checkout #main th,
body.woocommerce-account #main th {
	color: var(--dks-text-dark);
}

/* Liens de texte : beige */
body.woocommerce-cart #main a:not(.button):not(.ct-button),
body.woocommerce-checkout #main a:not(.button):not(.ct-button),
body.woocommerce-account #main a:not(.button):not(.ct-button) {
	color: var(--dks-gold);
}
body.woocommerce-cart #main a:not(.button):hover,
body.woocommerce-checkout #main a:not(.button):hover,
body.woocommerce-account #main a:not(.button):hover {
	color: #ffffff;
}

/* --- Boutons du tunnel : contour sobre (le style « Retour à la boutique ») --- */
body.woocommerce-cart .button,
body.woocommerce-checkout .button,
body.woocommerce-account .button,
body.woocommerce-cart button[type="submit"],
body.woocommerce-checkout button[type="submit"]:not(#place_order),
body.woocommerce-account button[type="submit"],
body.woocommerce-cart input[type="submit"],
body.woocommerce-account input[type="submit"] {
	background-color: transparent;
	color: var(--dks-text-dark);
	border: 1px solid var(--dks-line-dark);
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 13px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.woocommerce-cart .button:hover,
body.woocommerce-checkout .button:hover,
body.woocommerce-account .button:hover,
body.woocommerce-cart button[type="submit"]:hover,
body.woocommerce-account button[type="submit"]:hover {
	background-color: var(--dks-card-dark-strong);
	border-color: rgba(255, 255, 255, .45);
	color: #ffffff;
}

/* Action principale (valider / payer) : plein blanc, pour la hiérarchie */
body.woocommerce-cart .checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout .button,
body.woocommerce-checkout #place_order,
body.woocommerce-account .woocommerce-form-login__submit {
	background-color: #ffffff;
	color: var(--dks-ink);
	border-color: #ffffff;
}
body.woocommerce-cart .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .button:hover,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-account .woocommerce-form-login__submit:hover {
	background-color: rgba(255, 255, 255, .86);
	color: var(--dks-ink);
	border-color: rgba(255, 255, 255, .86);
}

/* Bouton désactivé (« Mettre à jour le panier » tant que rien n'a changé) */
body.woocommerce-cart button[disabled],
body.woocommerce-cart .button[disabled],
body.woocommerce-cart button:disabled {
	background-color: transparent;
	color: rgba(255, 255, 255, .30);
	border-color: rgba(255, 255, 255, .12);
	opacity: 1;
	cursor: not-allowed;
}

/* --- Encarts : bordures discrètes, marges respirées --- */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table,
body.woocommerce-account table.shop_table,
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account .woocommerce-table--order-downloads,
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #order_review {
	background-color: var(--dks-card-dark);
	border: 1px solid var(--dks-line-dark);
	border-radius: var(--dks-radius);
	border-collapse: separate;
	overflow: hidden;
}

/* Le thème pose une bordure blanche épaisse sur le total du panier */
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .cart_totals {
	border: 1px solid var(--dks-line-dark);
	padding: 24px;
}
body.woocommerce-cart .cart_totals table.shop_table {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	margin-bottom: 18px;
}

body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: 24px;
}

/* Cellules : bordures pleines et discrètes, pas de pointillés */
body.woocommerce-cart table.shop_table th,
body.woocommerce-checkout table.shop_table th,
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.woocommerce-orders-table th {
	color: var(--dks-muted-dark);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .06em;
	font-weight: 600;
	padding: 16px 18px;
	border-bottom: 1px solid var(--dks-line-dark);
}
body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table td,
body.woocommerce-account table.shop_table td,
body.woocommerce-cart table.shop_table tr,
body.woocommerce-checkout table.shop_table tr {
	border-style: solid;
	border-color: var(--dks-line-dark);
}
body.woocommerce-cart table.shop_table td {
	padding: 18px;
	border-top: 1px solid var(--dks-line-dark);
	border-bottom: 0;
}
body.woocommerce-cart table.shop_table .actions {
	padding: 18px;
}
body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td {
	padding: 12px 0;
	border-top: 1px solid var(--dks-line-dark);
	border-bottom: 0;
}

/* Vignette produit dans le panier : entière, jamais rognée */
body.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 72px;
	height: auto;
	max-height: 96px;
	object-fit: contain;
	border-radius: 6px;
}

/* Icône poubelle + sélecteur de quantité : sortaient en noir sur noir. */
body.woocommerce-cart td.product-remove a,
body.woocommerce-cart td.product-remove a.remove,
body.woocommerce-cart .product-remove a::before {
	color: var(--dks-muted-dark);
	background-color: transparent;
	opacity: 1;
}
body.woocommerce-cart td.product-remove a:hover,
body.woocommerce-cart td.product-remove a.remove:hover {
	color: #ffffff;
	background-color: transparent;
}
body.woocommerce-cart td.product-remove svg,
body.woocommerce-cart .product-remove svg {
	fill: currentColor;
	stroke: currentColor;
	color: var(--dks-muted-dark);
}

body.woocommerce-cart .quantity,
body.single-product .quantity {
	border-radius: 999px;
}
body.woocommerce-cart .quantity input,
body.woocommerce-cart .quantity .qty,
body.woocommerce-cart .quantity button,
body.woocommerce-cart .quantity span {
	color: var(--dks-text-dark);
	background-color: transparent;
}
body.woocommerce-cart .quantity button:hover {
	color: #ffffff;
}
/* Le « × » entre quantité et prix, invisible lui aussi */
body.woocommerce-cart .product-quantity,
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
	color: var(--dks-text-dark);
}

/* Champ code promo */
body.woocommerce-cart .coupon input[type="text"],
body.woocommerce-cart #coupon_code {
	background-color: var(--dks-card-dark-strong);
	color: var(--dks-text-dark);
	border: 1px solid var(--dks-line-dark);
	border-radius: 999px;
	padding: 12px 18px;
}

/* Paiement */
body.woocommerce-checkout #payment {
	background-color: transparent;
}
body.woocommerce-checkout #payment ul.payment_methods {
	background-color: transparent;
	border: 1px solid var(--dks-line-dark);
	border-radius: var(--dks-radius);
	padding: 16px;
}
body.woocommerce-checkout #payment div.payment_box {
	background-color: rgba(255, 255, 255, .04);
	color: var(--dks-text-dark);
	border-radius: 10px;
}
body.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: rgba(255, 255, 255, .04);
}

/* Champs de formulaire */
body.woocommerce-cart #main input[type="text"],
body.woocommerce-checkout #main input[type="text"],
body.woocommerce-account #main input[type="text"],
body.woocommerce-checkout #main input[type="email"],
body.woocommerce-account #main input[type="email"],
body.woocommerce-checkout #main input[type="tel"],
body.woocommerce-account #main input[type="password"],
body.woocommerce-checkout #main textarea,
body.woocommerce-checkout #main select,
body.woocommerce-account #main select,
body.woocommerce-checkout .select2-container .select2-selection {
	background-color: var(--dks-card-dark-strong);
	color: var(--dks-text-dark);
	border: 1px solid var(--dks-line-dark);
	border-radius: 10px;
}
body.woocommerce-checkout #main input::placeholder,
body.woocommerce-account #main input::placeholder {
	color: var(--dks-muted-dark);
}
body.woocommerce-checkout #main input:focus,
body.woocommerce-account #main input:focus,
body.woocommerce-checkout #main textarea:focus {
	border-color: rgba(255, 255, 255, .45);
	outline: none;
}

/* Bandeaux d'information */
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-error {
	background-color: var(--dks-card-dark);
	border: 1px solid var(--dks-line-dark);
	border-radius: var(--dks-radius);
	color: var(--dks-text-dark);
	padding: 18px 22px;
}

/* --- Mon compte : menu latéral façon bouton « contour » ---
   Le thème pose un fond BLANC sur le conteneur du menu : on le neutralise
   à tous les niveaux (nav, ul, li), d'où les !important. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account nav.woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-navigation ul,
body.woocommerce-account .woocommerce-MyAccount-navigation li {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	color: var(--dks-text-dark) !important;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	background-color: transparent;
	border: 1px solid var(--dks-line-dark) !important;
	border-radius: 999px;
	transition: background-color .15s ease, border-color .15s ease;
}
/* Les icônes du thème se superposaient au libellé : on les remet dans le flux. */
body.woocommerce-account .woocommerce-MyAccount-navigation li a svg,
body.woocommerce-account .woocommerce-MyAccount-navigation li a img,
body.woocommerce-account .woocommerce-MyAccount-navigation li a i {
	position: static;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	color: currentColor;
	fill: currentColor;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	position: static;
	margin: 0;
	transform: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--dks-card-dark-strong);
	border-color: rgba(255, 255, 255, .45);
	color: #ffffff;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--dks-card-dark-strong);
	border-color: rgba(255, 255, 255, .55);
	color: #ffffff;
}

body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register {
	background-color: var(--dks-card-dark);
	border: 1px solid var(--dks-line-dark);
	border-radius: var(--dks-radius);
	padding: 28px;
}

/* Confirmation de commande */
body.woocommerce-order-received .woocommerce-thankyou-order-received {
	color: var(--dks-accent);
	font-weight: 800;
	font-size: 20px;
}
body.woocommerce .woocommerce-table--order-downloads .button,
body.woocommerce-account .woocommerce-table--order-downloads .button {
	white-space: normal;
	line-height: 1.35;
}

/* =====================================================================
   3. Mobile
   ===================================================================== */
@media (max-width: 767px) {
	/* Garde-fous anti-débordement horizontal */
	body.post-type-archive-product ul.products,
	body.tax-product_cat ul.products {
		grid-template-columns: 1fr;
	}
	body.post-type-archive-product ul.products li.product,
	body.tax-product_cat ul.products li.product,
	body.post-type-archive-product ul.products li.product a img,
	body.tax-product_cat ul.products li.product a img,
	body.single-product .woocommerce-product-gallery img {
		max-width: 100%;
		width: 100%;
	}
	body.woocommerce-cart table.shop_table,
	body.woocommerce-checkout table.shop_table,
	body.woocommerce-account table.shop_table {
		max-width: 100%;
	}

	body.single-product #main,
	body.woocommerce-cart #main,
	body.woocommerce-checkout #main,
	body.woocommerce-account #main {
		padding-top: 56px;
	}
	body.single-product .woocommerce-product-gallery {
		max-width: 100%;
	}
	body.post-type-archive-product ul.products li.product a img,
	body.tax-product_cat ul.products li.product a img {
		max-height: 320px;
	}
	body.woocommerce-cart .cart-collaterals .cart_totals,
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout .woocommerce-checkout-review-order {
		padding: 16px;
	}
	body.woocommerce-cart table.shop_table td {
		padding: 12px;
	}
	body.woocommerce-cart table.shop_table th {
		padding: 12px;
	}

	/* Ligne produit du panier : empilée, sinon le titre déborde de l'écran
	   (constaté sur un vrai iPhone). */
	body.woocommerce-cart table.shop_table td.product-name {
		display: block;
		width: 100%;
		word-break: break-word;
	}
	body.woocommerce-cart table.shop_table td.product-name a {
		font-size: 15px;
		line-height: 1.35;
		display: block;
		margin-bottom: 10px;
	}
	body.woocommerce-cart table.shop_table td.product-thumbnail {
		display: block;
		width: 100%;
	}
	body.woocommerce-cart table.shop_table td.product-thumbnail img {
		width: 84px;
	}
	body.woocommerce-cart table.shop_table td.product-remove {
		position: absolute;
		right: 12px;
	}
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
		position: relative;
		display: block;
	}
	/* Les boutons pleine largeur évitent les lignes coupées sur petit écran */
	body.woocommerce-cart .coupon .button,
	body.woocommerce-cart .actions .button,
	body.woocommerce-cart .wc-proceed-to-checkout .button {
		width: 100%;
		margin-bottom: 8px;
	}
	body.woocommerce-cart .coupon input[type="text"],
	body.woocommerce-cart #coupon_code {
		width: 100%;
		margin-bottom: 8px;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		margin-bottom: 22px;
	}
}