/* ==========================================================================
   DS SHOP v1.0 — boutique WooCommerce dans le style de la page d'accueil
   Les sélecteurs #id et les chaînes priment sur le thème.
   ========================================================================== */

.dss-hero,
.dss-after {
	--bg:      #0B0B0D;
	--surf:    #16161B;
	--surf2:   #1D1D24;
	--line:    rgba(255,255,255,.09);
	--line2:   rgba(255,255,255,.16);
	--tx:      #F4F4F6;
	--mut:     #9E9EAB;
	--dim:     #6F6F7C;
	--red:     #E11D2A;
	--red2:    #FF3B45;
	--redk:    #A9121C;
	--redsoft: rgba(225,29,42,.12);
	--glow:    rgba(225,29,42,.35);
	--r:       18px;
	--ez:      cubic-bezier(.22,.61,.36,1);
	--font:    "Inter", system-ui, -apple-system, sans-serif;
	--disp:    "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

	font-family: var(--font);
	color: var(--tx);
}

/* --------------------------------------------------------------------------
   1. Bandeau d'introduction
   -------------------------------------------------------------------------- */
.dss-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, #17171E, #0B0B0D 62%);
	border: 1px solid var(--line2);
	border-radius: 26px;
	padding: 46px 44px;
	margin: 0 0 42px;
}
.dss-hero__glow {
	position: absolute;
	top: -180px; left: 18%;
	width: 620px; height: 420px;
	background: radial-gradient(50% 50% at 50% 50%, var(--glow) 0%, transparent 70%);
	filter: blur(50px);
	pointer-events: none;
}
.dss-hero__in { position: relative; max-width: 760px; }

.dss-eyebrow {
	display: inline-block;
	font-size: .73rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--red2);
	background: var(--redsoft);
	border: 1px solid rgba(225,29,42,.28);
	border-radius: 999px;
	padding: 7px 15px;
}

.dss-hero__t {
	font-family: var(--disp) !important;
	font-weight: 800 !important;
	letter-spacing: -.025em;
	line-height: 1.1;
	font-size: clamp(1.85rem, 3.6vw, 2.9rem) !important;
	color: var(--tx) !important;
	margin: 18px 0 14px !important;
}
.dss-hero__l { color: var(--mut) !important; max-width: 62ch; margin: 0 !important; }

.dss-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dss-chips span {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: .87rem;
	color: var(--mut);
}

.dss-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.dss-btn,
a.dss-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-family: var(--font) !important;
	font-weight: 600 !important;
	font-size: .95rem !important;
	text-transform: none !important;
	padding: 13px 26px !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--red), var(--redk)) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	box-shadow: 0 18px 40px -18px var(--glow) !important;
	transition: transform .22s var(--ez), filter .22s var(--ez);
}
.dss-btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff !important; }
.dss-btn--ghost,
a.dss-btn--ghost {
	background: rgba(255,255,255,.04) !important;
	border: 1px solid var(--line2) !important;
	box-shadow: none !important;
	color: var(--tx) !important;
}
.dss-btn--ghost:hover { background: rgba(255,255,255,.09) !important; border-color: var(--red) !important; }

/* --------------------------------------------------------------------------
   2. Barre de tri et titres du thème
   -------------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: #9E9EAB !important; }

ul.products li.product .rating-count,
ul.products li.product .star-rating,
ul.products li.product .woocommerce-product-rating { display: none !important; }

/* --------------------------------------------------------------------------
   3. Grille produits
   -------------------------------------------------------------------------- */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

ul.products li.product {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 0 20px !important;
	background: #16161B !important;
	border: 1px solid rgba(255,255,255,.09) !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	position: relative;
	display: flex !important;
	flex-direction: column;
	transition: transform .32s cubic-bezier(.22,.61,.36,1),
	            border-color .32s cubic-bezier(.22,.61,.36,1),
	            box-shadow .32s cubic-bezier(.22,.61,.36,1);
}
ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: rgba(225,29,42,.45) !important;
	box-shadow: 0 32px 68px -34px #000 !important;
}

ul.products li.product a img,
ul.products li.product img {
	margin: 0 !important;
	border-radius: 0 !important;
	background: radial-gradient(120% 100% at 50% 0%, #24242C 0%, #141419 72%);
	padding: 26px !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
ul.products li.product:hover img { transform: scale(1.05); }

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-size: 1.14rem !important;
	color: #F4F4F6 !important;
	margin: 18px 20px 8px !important;
	padding: 0 !important;
}

ul.products li.product .price {
	font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-size: 1.4rem !important;
	color: #fff !important;
	margin: 0 20px 16px !important;
	display: flex; align-items: baseline; gap: 10px;
}
ul.products li.product .price del {
	color: #6F6F7C !important; font-size: .85rem !important; font-weight: 500 !important; opacity: 1 !important;
}
ul.products li.product .price ins {
	background: none !important; text-decoration: none !important; color: #FF3B45 !important;
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
	margin: auto 20px 0 !important;
	display: block !important;
	text-align: center;
	border-radius: 999px !important;
	padding: 13px 20px !important;
	font-weight: 600 !important;
	font-size: .93rem !important;
	background: linear-gradient(135deg, #E11D2A, #A9121C) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	box-shadow: 0 18px 40px -18px rgba(225,29,42,.35) !important;
}
ul.products li.product .button:hover { filter: brightness(1.1); }

ul.products li.product .onsale,
span.onsale {
	position: absolute !important;
	top: 14px !important; left: 14px !important; right: auto !important;
	margin: 0 !important; padding: 6px 13px !important;
	min-width: 0 !important; min-height: 0 !important; line-height: 1.3 !important;
	border-radius: 999px !important;
	font-size: .76rem !important; font-weight: 700 !important;
	background: linear-gradient(135deg, #E11D2A, #A9121C) !important;
	color: #fff !important;
	box-shadow: 0 14px 30px -14px rgba(225,29,42,.6) !important;
	z-index: 3;
}

/* Court descriptif éventuel sous le titre */
ul.products li.product p { color: #9E9EAB !important; font-size: .9rem !important; margin: 0 20px 14px !important; }

/* --------------------------------------------------------------------------
   4. Blocs sous la liste
   -------------------------------------------------------------------------- */
.dss-after { margin-top: 56px; }

.dss-grid { display: grid; gap: 20px; }
.dss-grid--4 { grid-template-columns: repeat(4, 1fr); }

.dss-card {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 24px;
	transition: transform .3s var(--ez), border-color .3s var(--ez);
}
.dss-card:hover { transform: translateY(-4px); border-color: var(--line2); }
.dss-card h3 {
	font-family: var(--disp) !important;
	font-size: 1.05rem !important;
	color: var(--tx) !important;
	margin: 0 0 8px !important;
}
.dss-card p { color: var(--mut) !important; font-size: .92rem !important; margin: 0 !important; }
.dss-ico {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	font-size: 1.25rem;
	background: var(--redsoft);
	border: 1px solid rgba(225,29,42,.25);
	border-radius: 13px;
	margin-bottom: 15px;
}

.dss-help {
	margin-top: 26px;
	background: linear-gradient(140deg, #17171D, #0C0C10);
	border: 1px solid var(--line2);
	border-radius: 24px;
	padding: 34px;
	display: grid;
	grid-template-columns: 1.4fr .6fr;
	gap: 28px;
	align-items: center;
}
.dss-help h2 {
	font-family: var(--disp) !important;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
	color: var(--tx) !important;
	margin: 16px 0 10px !important;
}
.dss-help p { color: var(--mut) !important; margin: 0 !important; }
.dss-help__cta { display: grid; gap: 10px; }

.dss-faq { margin-top: 40px; max-width: 880px; }
.dss-faq__t {
	font-family: var(--disp) !important;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
	color: var(--tx) !important;
	margin: 0 0 20px !important;
}
.dss-faq details {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: 14px;
	margin-bottom: 11px;
	overflow: hidden;
}
.dss-faq details[open] { border-color: rgba(225,29,42,.4); }
.dss-faq summary {
	cursor: pointer; list-style: none;
	padding: 18px 54px 18px 22px;
	position: relative;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 1rem;
	color: var(--tx);
}
.dss-faq summary::-webkit-details-marker { display: none; }
.dss-faq summary::after {
	content: "+";
	position: absolute; right: 22px; top: 50%;
	transform: translateY(-50%);
	font-size: 1.45rem; font-weight: 400; color: var(--red2);
	transition: transform .25s var(--ez);
}
.dss-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dss-faq details > div { padding: 0 22px 20px; color: var(--mut); font-size: .95rem; }

/* --------------------------------------------------------------------------
   5. Réassurance sur la fiche produit
   -------------------------------------------------------------------------- */
.dss-reass {
	list-style: none !important;
	margin: 22px 0 0 !important;
	padding: 18px 20px !important;
	background: #16161B;
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 16px;
	display: grid;
	gap: 10px;
}
.dss-reass li { color: #9E9EAB !important; font-size: .92rem; margin: 0 !important; }
.dss-reass a { color: #F4F4F6 !important; font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.dss-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.dss-help { grid-template-columns: 1fr; }
	ul.products { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 18px !important; }
}

@media (max-width: 767px) {
	.dss-hero { padding: 30px 22px; border-radius: 20px; }
	.dss-hero__cta .dss-btn { width: 100%; }
	.dss-grid--4 { grid-template-columns: 1fr; }
	.dss-help { padding: 24px; border-radius: 20px; }
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	ul.products li.product .woocommerce-loop-product__title { font-size: .95rem !important; margin: 14px 14px 6px !important; }
	ul.products li.product .price { font-size: 1.1rem !important; margin: 0 14px 12px !important; }
	ul.products li.product .button { margin: auto 14px 0 !important; padding: 11px 12px !important; font-size: .85rem !important; }
	ul.products li.product img { padding: 16px !important; }
}

@media (max-width: 420px) {
	ul.products { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dss-hero *, .dss-after *, ul.products li.product { transition: none !important; }
}

/* ==========================================================================
   7. MARKUP RÉEL DU THÈME ECOMALL (widget Elementor « ts-products ») v1.1.1
   Relevé par inspection :
   .ts-product-wrapper.ts-shortcode > .content-wrapper > div.products > .product
   Ce n'est pas la liste WooCommerce standard (ul.products), d'où l'absence
   d'effet des règles précédentes.
   ========================================================================== */

.ts-product-wrapper .products,
.ts-products .products,
div.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)) !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* La carte */
.ts-product-wrapper .products > .product,
.ts-product-wrapper .products > li,
div.products > .product,
div.products > li,
ul.products > li.product {
	background: #16161B !important;
	border: 1px solid rgba(255, 255, 255, .09) !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 0 18px !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	display: flex !important;
	flex-direction: column;
	box-shadow: none !important;
	transition: transform .32s cubic-bezier(.22,.61,.36,1),
	            border-color .32s cubic-bezier(.22,.61,.36,1),
	            box-shadow .32s cubic-bezier(.22,.61,.36,1) !important;
}
.ts-product-wrapper .products > .product:hover,
div.products > .product:hover,
ul.products > li.product:hover {
	transform: translateY(-6px);
	border-color: rgba(225, 29, 42, .45) !important;
	box-shadow: 0 32px 68px -34px #000 !important;
}

/* Tous les fonds clairs internes disparaissent */
.products .product *:not(img):not(.onsale):not(.button):not(a.button):not(.add_to_cart_button) {
	background-color: transparent !important;
	box-shadow: none !important;
	border-color: rgba(255, 255, 255, .07) !important;
}

/* Visuel produit */
.products .product img {
	background: radial-gradient(120% 100% at 50% 0%, #24242C 0%, #141419 72%) !important;
	padding: 22px !important;
	border-radius: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.products .product:hover img { transform: scale(1.05); }

/* Textes */
.products .product h2,
.products .product h3,
.products .product h4,
.products .product .product-name,
.products .product .product-name a,
.products .product .woocommerce-loop-product__title,
.products .product .woocommerce-loop-product__title a {
	font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-size: 1.1rem !important;
	color: #F4F4F6 !important;
	margin: 16px 18px 6px !important;
	padding: 0 !important;
	line-height: 1.25 !important;
}
.products .product .product-categories,
.products .product .posted_in,
.products .product .category,
.products .product .product-cat,
.products .product .product-cat a {
	color: #6F6F7C !important;
	font-size: .76rem !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 16px 18px 0 !important;
}

/* Prix */
.products .product .price {
	font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-size: 1.35rem !important;
	color: #FFFFFF !important;
	margin: 4px 18px 14px !important;
	display: flex !important;
	align-items: baseline;
	gap: 9px;
}
.products .product .price del,
.products .product .price del .amount {
	color: #6F6F7C !important;
	font-size: .85rem !important;
	font-weight: 500 !important;
	opacity: 1 !important;
	order: 2;
}
.products .product .price ins,
.products .product .price ins .amount {
	background: none !important;
	text-decoration: none !important;
	color: #FF3B45 !important;
	order: 1;
}

/* Bouton */
.products .product .button,
.products .product .add_to_cart_button,
.products .product .add-to-cart a {
	display: block !important;
	margin: auto 18px 0 !important;
	text-align: center !important;
	border-radius: 999px !important;
	padding: 13px 18px !important;
	font-weight: 600 !important;
	font-size: .92rem !important;
	text-transform: none !important;
	background: linear-gradient(135deg, #E11D2A, #A9121C) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	box-shadow: 0 18px 40px -18px rgba(225, 29, 42, .35) !important;
}

/* Éléments à masquer : étoiles vides et actions superposées du thème */
.products .product .star-rating,
.products .product .rating-count,
.products .product .reviews-content,
.products .product .ts-wishlist-button,
.products .product .compare,
.products .product .quickview,
.products .product .ts-quickview,
.products .product .product-button .quickview { display: none !important; }

/* Badge promo */
.products .product .onsale,
.products .product .product-label,
.products .product .product-label > span {
	position: absolute !important;
	top: 14px !important; left: 14px !important; right: auto !important; bottom: auto !important;
	margin: 0 !important; padding: 6px 13px !important;
	min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important;
	line-height: 1.3 !important; border-radius: 999px !important;
	font-size: .76rem !important; font-weight: 700 !important;
	background: linear-gradient(135deg, #E11D2A, #A9121C) !important;
	color: #fff !important;
	box-shadow: 0 14px 30px -14px rgba(225, 29, 42, .6) !important;
	z-index: 4;
}

@media (max-width: 767px) {
	.ts-product-wrapper .products,
	div.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	.products .product img { padding: 14px !important; }
	.products .product h2,
	.products .product h3,
	.products .product .product-name a { font-size: .93rem !important; margin: 12px 12px 4px !important; }
	.products .product .price { font-size: 1.05rem !important; margin: 2px 12px 10px !important; }
	.products .product .button,
	.products .product .add-to-cart a { margin: auto 12px 0 !important; padding: 11px 10px !important; font-size: .84rem !important; }
	.products .product .product-categories,
	.products .product .product-cat { margin: 12px 12px 0 !important; }
}

@media (max-width: 420px) {
	.ts-product-wrapper .products,
	div.products { grid-template-columns: 1fr !important; }
}