/* =========================================================
   Carti-Tarot.ro v1.9.2
   FINAL MOBILE PRODUCT GRID LAYER
   Loaded after main.css to neutralize legacy WooCommerce rules.
   ========================================================= */

@media (max-width: 820px) {

	/* Every product collection uses the same grid. */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.ct-v13-product-grid ul.products,
	.ct-v14-shop-results ul.products,
	.single-product div.product .related ul.products,
	.single-product div.product .upsells ul.products,
	.ct-product-search-page ul.products,
	.woocommerce-cart .cross-sells ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-flow: row !important;
		align-items: stretch !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.woocommerce ul.products::before,
	.woocommerce ul.products::after,
	.woocommerce-page ul.products::before,
	.woocommerce-page ul.products::after,
	.ct-v13-product-grid ul.products::before,
	.ct-v13-product-grid ul.products::after,
	.ct-v14-shop-results ul.products::before,
	.ct-v14-shop-results ul.products::after,
	.single-product div.product .related ul.products::before,
	.single-product div.product .related ul.products::after,
	.ct-product-search-page ul.products::before,
	.ct-product-search-page ul.products::after {
		display: none !important;
		content: none !important;
	}

	/* Card geometry. */
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product,
	.ct-v13-product-grid ul.products li.product,
	.ct-v14-shop-results ul.products li.product,
	.single-product div.product .related ul.products li.product,
	.single-product div.product .upsells ul.products li.product,
	.ct-product-search-page ul.products li.product,
	.woocommerce-cart .cross-sells ul.products li.product {
		display: flex !important;
		flex-direction: column !important;
		float: none !important;
		clear: none !important;
		position: relative !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 0 12px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		border: 1px solid rgba(208,168,95,.14) !important;
		border-radius: 10px !important;
		background: linear-gradient(180deg,#100d16,#0b0910) !important;
		text-align: center !important;
	}

	/* Product link becomes the flexible upper area. */
	.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
	.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link,
	.ct-v13-product-grid ul.products li.product a.woocommerce-LoopProduct-link,
	.ct-v14-shop-results ul.products li.product a.woocommerce-LoopProduct-link,
	.single-product div.product .related ul.products li.product a.woocommerce-LoopProduct-link,
	.ct-product-search-page ul.products li.product a.woocommerce-LoopProduct-link,
	.woocommerce-cart .cross-sells ul.products li.product a.woocommerce-LoopProduct-link {
		display: flex !important;
		flex: 1 1 auto !important;
		flex-direction: column !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
	}

	/* Image ratio is identical everywhere. */
	.woocommerce ul.products li.product a img,
	.woocommerce-page ul.products li.product a img,
	.ct-v13-product-grid ul.products li.product a img,
	.ct-v14-shop-results ul.products li.product a img,
	.single-product div.product .related ul.products li.product a img,
	.ct-product-search-page ul.products li.product a img,
	.woocommerce-cart .cross-sells ul.products li.product a img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 0 12px !important;
		padding: 0 !important;
		object-fit: contain !important;
		object-position: center !important;
		border-radius: 0 !important;
		background: #fff !important;
	}

	/* Three lines max gives equal card heights without tiny text. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
	.ct-v13-product-grid ul.products li.product .woocommerce-loop-product__title,
	.ct-v14-shop-results ul.products li.product .woocommerce-loop-product__title,
	.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
	.ct-product-search-page ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
		display: -webkit-box !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 3 !important;
		overflow: hidden !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 4.05em !important;
		max-height: 4.05em !important;
		margin: 0 10px 7px !important;
		padding: 0 !important;
		color: #f0e8f2 !important;
		font-size: 13px !important;
		font-weight: 720 !important;
		line-height: 1.35 !important;
		text-align: center !important;
		text-decoration: none !important;
	}

	/* Price area stays aligned even with a sale price. */
	.woocommerce ul.products li.product .price,
	.woocommerce-page ul.products li.product .price,
	.ct-v13-product-grid ul.products li.product .price,
	.ct-v14-shop-results ul.products li.product .price,
	.single-product div.product .related ul.products li.product .price,
	.ct-product-search-page ul.products li.product .price,
	.woocommerce-cart .cross-sells ul.products li.product .price {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-wrap: wrap !important;
		gap: 4px 6px !important;
		width: auto !important;
		min-height: 2.1em !important;
		margin: auto 8px 10px !important;
		padding: 0 !important;
		color: var(--ct-v13-gold) !important;
		font-size: 12px !important;
		font-weight: 780 !important;
		line-height: 1.25 !important;
		text-align: center !important;
	}

	.woocommerce ul.products li.product .price del,
	.woocommerce-page ul.products li.product .price del,
	.ct-v13-product-grid ul.products li.product .price del,
	.ct-v14-shop-results ul.products li.product .price del,
	.single-product div.product .related ul.products li.product .price del,
	.ct-product-search-page ul.products li.product .price del {
		color: #857552 !important;
		opacity: .72 !important;
		font-size: 11px !important;
	}

	.woocommerce ul.products li.product .price ins,
	.woocommerce-page ul.products li.product .price ins,
	.ct-v13-product-grid ul.products li.product .price ins,
	.ct-v14-shop-results ul.products li.product .price ins,
	.single-product div.product .related ul.products li.product .price ins,
	.ct-product-search-page ul.products li.product .price ins {
		color: var(--ct-v13-gold) !important;
		font-weight: 820 !important;
		text-decoration: none !important;
	}

	/* Same CTA everywhere. */
	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button,
	.ct-v13-product-grid ul.products li.product .button,
	.ct-v14-shop-results ul.products li.product .button,
	.single-product div.product .related ul.products li.product .button,
	.single-product div.product .upsells ul.products li.product .button,
	.ct-product-search-page ul.products li.product .button,
	.woocommerce-cart .cross-sells ul.products li.product .button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		align-self: center !important;
		width: calc(100% - 20px) !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 44px !important;
		margin: 0 10px !important;
		padding: 8px 7px !important;
		box-sizing: border-box !important;
		border: 1px solid #d8b56c !important;
		border-radius: 6px !important;
		background: linear-gradient(135deg,#d8b56c,#ad823e) !important;
		color: #171006 !important;
		font-size: 11px !important;
		font-weight: 820 !important;
		line-height: 1.15 !important;
		letter-spacing: .01em !important;
		text-align: center !important;
		text-transform: none !important;
		white-space: normal !important;
		box-shadow: none !important;
	}

	/* Sale badge must stay inside its own card. */
	.woocommerce ul.products li.product .onsale,
	.woocommerce-page ul.products li.product .onsale,
	.ct-v13-product-grid ul.products li.product .onsale,
	.ct-v14-shop-results ul.products li.product .onsale,
	.single-product div.product .related ul.products li.product .onsale,
	.ct-product-search-page ul.products li.product .onsale {
		top: 7px !important;
		right: 7px !important;
		left: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 6px 8px !important;
		border-radius: 5px !important;
		font-size: 10px !important;
		line-height: 1 !important;
	}

	/* No carousel-like horizontal overflow. */
	.ct-v13-product-grid,
	.ct-v14-shop-results,
	.single-product div.product .related,
	.single-product div.product .upsells,
	.ct-product-search-page,
	.woocommerce-cart .cross-sells {
		min-width: 0 !important;
		max-width: 100% !important;
		overflow: visible !important;
	}
}

@media (max-width: 420px) {

	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.ct-v13-product-grid ul.products,
	.ct-v14-shop-results ul.products,
	.single-product div.product .related ul.products,
	.single-product div.product .upsells ul.products,
	.ct-product-search-page ul.products,
	.woocommerce-cart .cross-sells ul.products {
		gap: 9px !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
	.ct-v13-product-grid ul.products li.product .woocommerce-loop-product__title,
	.ct-v14-shop-results ul.products li.product .woocommerce-loop-product__title,
	.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
	.ct-product-search-page ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
		margin-left: 8px !important;
		margin-right: 8px !important;
		font-size: 12px !important;
	}

	.woocommerce ul.products li.product .price,
	.woocommerce-page ul.products li.product .price,
	.ct-v13-product-grid ul.products li.product .price,
	.ct-v14-shop-results ul.products li.product .price,
	.single-product div.product .related ul.products li.product .price,
	.ct-product-search-page ul.products li.product .price,
	.woocommerce-cart .cross-sells ul.products li.product .price {
		font-size: 11px !important;
	}

	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button,
	.ct-v13-product-grid ul.products li.product .button,
	.ct-v14-shop-results ul.products li.product .button,
	.single-product div.product .related ul.products li.product .button,
	.single-product div.product .upsells ul.products li.product .button,
	.ct-product-search-page ul.products li.product .button,
	.woocommerce-cart .cross-sells ul.products li.product .button {
		width: calc(100% - 16px) !important;
		margin-left: 8px !important;
		margin-right: 8px !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 10.5px !important;
	}
}

/* Very narrow phones still keep the requested 2-column layout,
   but reduce outer page gutters so cards remain usable. */
@media (max-width: 360px) {
	.ct-v13-products .ct-container,
	.ct-v14-shop-results,
	.ct-product-search-page .ct-container,
	.single-product div.product .related,
	.woocommerce-cart .cross-sells {
		min-width: 0 !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
	.ct-v13-product-grid ul.products li.product .woocommerce-loop-product__title,
	.ct-v14-shop-results ul.products li.product .woocommerce-loop-product__title,
	.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
	.ct-product-search-page ul.products li.product .woocommerce-loop-product__title {
		font-size: 11.5px !important;
	}
}