/**
 * Single product — description / info tabs.
 *
 * Restyles the WooCommerce tabs block (.woocommerce-tabs.wc-tabs-wrapper) on the
 * single product page to match the flat, squared design used across the site
 * (see #home-screen in style.css and the category cards). The whole block is
 * visually split off from the rest of the product page with a boxed panel.
 */

/* Legacy aliases — the --pt-* names point at the global design tokens
   (design-system/tokens.css). New code should use --vk-* directly. */
.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce .related.products,
.woocommerce .up-sells.upsells {
	--pt-bg: var(--vk-bg);
	--pt-bg-muted: var(--vk-bg-muted);
	--pt-ink: var(--vk-ink);
	--pt-ink-soft: var(--vk-ink-soft);
	--pt-accent: var(--vk-accent);
	--pt-border: var(--vk-border);
}

/* =========================================================================
   Wrapper — split the tabs block off from the rest of the page.
   ========================================================================= */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
	margin: 48px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--pt-border);
	clear: both;
}

/* =========================================================================
   Tab titles — hidden.
   There is only one tab ("Opis") and the panel already carries its own
   heading, so the tab bar is redundant.
   ========================================================================= */
.woocommerce-tabs .tabs.wc-tabs {
	display: none !important;
}

/* =========================================================================
   Tab panel (the description content)
   ========================================================================= */
.woocommerce-tabs .wc-tab {
	margin: 0;
	padding: 32px 28px !important;
	background: white;
	border: 1px solid var(--pt-border);
	color: var(--pt-ink-soft);
	font-size: 16px;
	line-height: 1.7;
}

.woocommerce-tabs .wc-tab > *:first-child { margin-top: 0; }
.woocommerce-tabs .wc-tab > *:last-child  { margin-bottom: 0; }

/* Panel heading — squared accent tick, matching .hs-section-title. */
.woocommerce-tabs .wc-tab h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: clamp(20px, 4.5vw, 28px);
	line-height: 1.2;
	color: var(--pt-ink);
}
.woocommerce-tabs .wc-tab h2::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 1em;
	background: var(--pt-accent);
}

.woocommerce-tabs .wc-tab p {
	margin: 0 0 14px;
}

.woocommerce-tabs .wc-tab strong {
	color: var(--pt-ink);
}

/* Feature / option lists. */
.woocommerce-tabs .wc-tab ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.woocommerce-tabs .wc-tab ul li {
	position: relative;
	padding: 0 0 0 22px;
	margin: 0 0 8px;
}
.woocommerce-tabs .wc-tab ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 8px;
	height: 8px;
	background: var(--pt-accent);
}

.woocommerce-tabs .wc-tab a {
	color: var(--pt-accent);
	text-decoration: none;
}
.woocommerce-tabs .wc-tab a:hover {
	text-decoration: underline;
}

/* =========================================================================
   Related products / up-sells.
   The card grid itself is styled by the shared ul.products rules in
   category_page/woocommerce-category-page.css; here we only add the section
   separation and heading to match the rest of the page.
   ========================================================================= */
.woocommerce .related.products,
.woocommerce .up-sells.upsells,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.upsells {
	margin: 48px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--pt-border);
	clear: both;
}

/* Section heading — squared accent tick, matching .hs-section-title. */
.woocommerce .related.products > h2,
.woocommerce .up-sells.upsells > h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	font-size: clamp(20px, 4.5vw, 28px);
	line-height: 1.2;
	color: var(--pt-ink);
}
.woocommerce .related.products > h2::before,
.woocommerce .up-sells.upsells > h2::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 1em;
	background: var(--pt-accent);
}

/* The nested image wrapper WooCommerce adds on related cards — keep the
   squared, contained media look defined for the loop image. */
.woocommerce .related.products li.product .wc-product-image img,
.woocommerce .up-sells.upsells li.product .wc-product-image img {
	margin: 0;
}

/* =========================================================================
   Scale up (tablet+)
   ========================================================================= */
@media (min-width: 600px) {
	.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
		margin-top: 64px;
		padding-top: 56px;
	}
	.woocommerce-tabs .wc-tab {
		padding: 48px 56px;
	}
	.woocommerce .related.products,
	.woocommerce .up-sells.upsells {
		margin-top: 64px;
		padding-top: 56px;
	}
}


.product_title {
	font-size: xx-large;
}

.woocommerce-product-gallery__wrapper {
	background-color: white;
	padding: 10px;
}

.entry-summary {
	background-color: white;
	padding: 15px;
}

/* =========================================================================
   Add to cart button — flat, squared primary button.
   Mirrors .hs-btn--primary from the home screen (style.css): red accent,
   no border radius, arrow that nudges right on hover.
   ========================================================================= */
.woocommerce div.product form.cart .single_add_to_cart_button {
	display: inline-block;
	padding: 14px 26px;
	background: var(--vk-accent);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
	background: var(--vk-accent-dark);
	color: #fff;
}
/* Arrow that nudges right on hover — same affordance as the hero CTA. */
.woocommerce div.product form.cart .single_add_to_cart_button::after {
	content: "\2192";
	display: inline-block;
	margin-left: 10px;
	transition: transform .2s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover::after {
	transform: translateX(4px);
}
/* Disabled state (e.g. variation not selected). */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
	background: var(--vk-ink-soft);
	cursor: not-allowed;
	opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product form.cart .single_add_to_cart_button,
	.woocommerce div.product form.cart .single_add_to_cart_button::after {
		transition: none;
	}
	.woocommerce div.product form.cart .single_add_to_cart_button:hover::after {
		transform: none;
	}
}