/**
 * WooCommerce Custom Styles for Tygiel Theme
 * 
 * Dostosowanie stylów WooCommerce do motywu Tygiel
 */

/* Przyciski WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	@apply bg-gold text-navy font-bold py-3 px-8 rounded-full hover:bg-gold/90 transition-all duration-300 shadow-lg hover:shadow-xl;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	@apply bg-navy text-white font-bold py-3 px-8 rounded-full hover:bg-navy/90 transition-all duration-300 shadow-lg hover:shadow-xl;
}

/* Formularz dodawania do koszyka */
.woocommerce div.product form.cart {
	@apply space-y-4;
}

.woocommerce div.product form.cart .quantity {
	@apply mb-4;
}

.woocommerce div.product form.cart .quantity input.qty {
	@apply w-20 px-4 py-2 border-2 border-gray-300 rounded-lg text-center;
}

/* Cena produktu */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	@apply text-gold font-bold;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	@apply text-gray-400 opacity-70;
}

/* Zakładki produktu */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	@apply flex border-b-2 border-gray-200 mb-6;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	@apply mr-2;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	@apply block px-6 py-3 text-navy font-semibold rounded-t-lg hover:bg-gray-100 transition-colors;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	@apply bg-white border-b-2 border-gold;
}

.woocommerce div.product .woocommerce-tabs .panel {
	@apply p-6 bg-white rounded-b-lg;
}

/* Tabela dodatkowych informacji */
.woocommerce table.shop_attributes {
	@apply w-full border-collapse;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	@apply px-4 py-3 border-b border-gray-200;
}

.woocommerce table.shop_attributes th {
	@apply bg-gray-50 font-semibold text-navy text-left;
}

/* Recenzje */
.woocommerce #reviews #comments ol.commentlist {
	@apply space-y-6;
}

.woocommerce #reviews #comments ol.commentlist li {
	@apply bg-gray-50 p-6 rounded-lg;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	@apply space-y-2;
}

.woocommerce #reviews #comments ol.commentlist li .star-rating {
	@apply text-gold;
}

/* Powiązane produkty */
.woocommerce .related.products,
.woocommerce .upsells.products {
	@apply mt-12;
}

.woocommerce .related.products h2,
.woocommerce .upsells.products h2 {
	@apply text-4xl font-bold text-navy mb-8 text-center;
}

.woocommerce ul.products {
	@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
}

.woocommerce ul.products li.product {
	@apply bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105;
}

.woocommerce ul.products li.product a img {
	@apply w-full h-auto object-cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	@apply text-xl font-bold text-navy mt-4 px-4;
}

.woocommerce ul.products li.product .price {
	@apply text-gold font-bold text-lg px-4 py-2;
}

/* Komunikaty WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	@apply p-4 rounded-lg mb-4;
}

.woocommerce-message {
	@apply bg-green-100 border-l-4 border-green-500 text-green-700;
}

.woocommerce-info {
	@apply bg-blue-100 border-l-4 border-blue-500 text-blue-700;
}

.woocommerce-error {
	@apply bg-red-100 border-l-4 border-red-500 text-red-700;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
	@apply text-sm text-gray-600 mb-6;
}

.woocommerce-breadcrumb a {
	@apply text-navy hover:text-gold transition-colors;
}

/* Warianty produktu */
.woocommerce div.product form.cart .variations {
	@apply mb-6;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	@apply py-2;
}

.woocommerce div.product form.cart .variations select {
	@apply w-full px-4 py-2 border-2 border-gray-300 rounded-lg;
}

/* Galeria produktu - dostosowanie do Tailwind */
.woocommerce div.product div.images {
	@apply mb-8;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	@apply absolute top-4 right-4 z-10 bg-white/80 p-2 rounded-full hover:bg-white transition-colors;
}

/* Responsywność */
@media (max-width: 768px) {
	.woocommerce ul.products {
		@apply grid-cols-1;
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		@apply flex-col;
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		@apply mr-0 mb-2;
	}
}