/*
 * PDP (single product page) styles for storefront-artsets.
 * Loaded only on is_product() pages via pdp-hooks.php.
 *
 * Inherits design tokens from style.css:
 *   --pink: #8e07bb   (brand purple)
 *   --pink-bg: #d0b0eb
 *   --font: 'Outfit'
 *   --text: #1a1a1a
 *   --r: 8px
 */

/* ── Clip gallery overflow without touching body/content scroll ──────────── */
/* Clipping only within .pdp-gallery preserves the announcement bar and header. */

/* Flexslider injects .flex-viewport via JS — reinforce its overflow */
.woocommerce-product-gallery .flex-viewport {
	overflow: hidden !important;
}

/* jet-woo-product-gallery uses Swiper with centeredSlides/peek — clip it */
.jet-gallery-swiper-slider,
.jet-woo-product-gallery-slider.swiper-container,
.jet-woo-product-gallery-slider.swiper {
	overflow: hidden !important;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

body.single-product {
	background-color: #f5f3fb;
}

/* Neutralise Storefront's outer .col-full constraint on PDP.
   The inner .pdp-layout, .storefront-breadcrumb .col-full, and
   .woocommerce-tabs each control their own max-width and padding. */
body.single-product .site-content > .col-full {
	max-width: none;
	padding: 0;
}

.pdp-layout {
	display: grid;
	grid-template-columns: 42fr 58fr;
	gap: 20px;
	align-items: start;
	max-width: 1280px;
	margin: -70px auto 40px;
	padding: 0 10px;
}

.pdp-gallery {
	position: sticky;
	top: 100px;
	overflow: hidden; /* clip flexslider bleed */
	max-width: 470px;
}

.pdp-summary {
	min-width: 0;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */

.woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	/* overflow: visible so arrows can be positioned over the image edge */
	overflow: visible;
	position: relative;
	/* WC sets opacity:0 initially and JS sets it to 1; force visible immediately */
	opacity: 1 !important;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	border-radius: var(--r, 8px);
	display: block;
}

/* Do not set width — flexslider sets it to (n_slides × 100%) via JS.
   Overriding breaks slide 2+ positioning. */

/* ── Gallery: Photoswipe zoom trigger ────────────────────────────────────── */

/* The zoom icon sits in the top-right of the first image slide */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 20;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background 0.15s;
}

.woocommerce-product-gallery__trigger:hover {
	background: #fff;
}

.woocommerce-product-gallery__trigger img,
.woocommerce-product-gallery__trigger svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ── Gallery: flexslider direction nav arrows ────────────────────────────── */

.pdp-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	position: static;
}

.pdp-gallery .flex-direction-nav li {
	position: static;
}

/* Base styles for both arrows — always visible (override WC's hide-off-screen default) */
.pdp-gallery .flex-prev,
.pdp-gallery .flex-next {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute !important;
	top: 40% !important;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	background: #7100ba !important;
	border-radius: 50%;
	opacity: 0.85 !important;
	transition: opacity 0.2s;
	overflow: hidden;
	text-indent: -9999px;
	z-index: 10;
}

.pdp-gallery .flex-prev:hover,
.pdp-gallery .flex-next:hover {
	opacity: 1 !important;
}

/* Disabled state when at first/last slide */
.pdp-gallery .flex-prev.flex-disabled,
.pdp-gallery .flex-next.flex-disabled {
	opacity: 0.25 !important;
	pointer-events: none;
}

.pdp-gallery .flex-prev {
	left: 10px !important;
	right: auto !important;
}

.pdp-gallery .flex-next {
	right: 10px !important;
	left: auto !important;
}

/* White chevron icons via pseudo-elements */
.pdp-gallery .flex-prev::after,
.pdp-gallery .flex-next::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	border-radius: 1px;
}

.pdp-gallery .flex-prev::after {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.pdp-gallery .flex-next::after {
	transform: translate(-70%, -50%) rotate(45deg);
}

/* ── Gallery: thumbnail strip ────────────────────────────────────────────── */

.flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 10px !important;
	justify-content: flex-start;
	margin-top: 10px;
	padding: 0;
	list-style: none;
}

/* WooCommerce CSS uses float:left + margin-right:14.2857% on li — that
   percentage margin is the large gap. Zero it out and use flex gap instead. */
.flex-control-thumbs li,
.flex-control-thumbs li:nth-child(n) {
	flex: 1 1 0 !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
}

.flex-control-thumbs img {
	width: 85%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s;
	display: block;
	margin-top: -10px !important;
}

.flex-control-thumbs .flex-active {
	border-color: var(--pink, #8e07bb);
}

/* ── Summary: title, rating, price ──────────────────────────────────────── */

.pdp-summary .summary {
	float: none !important;
	width: 100% !important;
	padding: 0;
	background: transparent;
}

.pdp-summary .product_title {
	font-family: var(--font, 'Outfit'), sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--text, #1a1a1a);
	margin-bottom: 4px;
	line-height: 1.2;
}

.pdp-summary .woocommerce-product-rating {
	margin-bottom: 12px;
}

.pdp-summary .price {
	font-family: var(--font, 'Outfit'), sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: #222 !important;
	margin-top: 0;
	margin-bottom: 16px;
}

.pdp-summary .price .woocommerce-Price-amount {
	color: #222 !important;
}

.pdp-summary .price del {
	color: #999;
	font-size: 1.1rem;
}

.pdp-summary .woocommerce-product-details__short-description {
	font-size: 0.95rem;
	color: #444;
	margin-bottom: 20px;
	line-height: 1.6;
}
.pdp-summary .woocommerce-product-details__short-description p {
    margin: 0 0 10px;
    line-height: 1.4;
}
/* Sale badge inside summary column */
.pdp-summary .onsale {
	background: var(--pink, #8e07bb);
	color: #fff;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 0.8rem;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 10px;
}

.single-product h4 {
	margin-top: -8px !important;
}

/* ── Dispatch notice ─────────────────────────────────────────────────────── */

.dispatch-notice {
	font-family: 'Roboto', var(--font, 'Outfit'), sans-serif;
	font-size: 16px;
	color: #000;
	margin-bottom: 12px;
}

/* ── Stock status ────────────────────────────────────────────────────────── */

.in-stock {
	font-family: 'Roboto', var(--font, 'Outfit'), sans-serif;
	font-size: 16px;
	color: #000;
	margin-bottom: 12px;
}
.pdp-summary .stock.in-stock,
.pdp-summary .in-stock {
	color: #7202ba !important;
	font-weight: 500;
}
/* ── form.cart alignment ─────────────────────────────────────────────────── */

/* WooCommerce/Storefront may add margin to form.cart; pin to same left edge
   as the description block above it. */
.pdp-summary form.cart {
	margin: 0;
	padding: 0;
	text-align: left !important;
}

/* Force left-align on all purchase-area elements that Storefront or WC center */
.pdp-summary .cart > table.thwepo-extra-options,
.pdp-summary .cart > .stock,
.pdp-summary .cart > .dispatch-notice,
.pdp-summary .cart > .qty-label,
.pdp-summary .stock,
.pdp-summary .dispatch-notice,
.pdp-summary .qty-label,
.label-tag {
	text-align: left !important;
}

/* ── Phone model (THWEPO) ────────────────────────────────────────────────── */

/* THWEPO "leftside" layout renders label and input in separate <td>s side by
   side. Convert to block layout so they stack vertically (label above input).
   Also resets Storefront's global `table { width:100% }` and
   `td { padding: 1em 1.41575em }` which created the oversized card appearance. */
table.thwepo-extra-options,
table.thwepo-extra-options tbody,
table.thwepo-extra-options tr {
	display: block;
	width: 85%;
}

table.thwepo-extra-options {
	max-width: 380px;
	margin: 0 !important;
	margin-top: -25px !important;
	margin-bottom: 16px !important;
	border: none;
	background: transparent;
}

table.thwepo-extra-options td {
	display: block;
	width: 100%;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Gap between label cell and input cell in leftside layout */
table.thwepo-extra-options td.label.leftside {
	margin-bottom: 8px;
}

/* Abovefield layout: hide the <br/> separator — label margin-bottom handles gap */
table.thwepo-extra-options td.abovefield br {
	display: none;
}

/* Label */
.label-tag {
	font-weight: bold;
	font-size: 1rem;
	color: var(--text, #1a1a1a);
	margin-bottom: 0;
	display: block;
}

.label-tag::after {
	content: ' *';
	color: red;
}

/* Input — override THWEPO's min-height:40px; full width of the 380px container */
table.thwepo-extra-options input[type="text"],
table.thwepo-extra-options input.thwepof-input-field {
	font-size: 16px;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto;
	padding: 10px 14px !important;
	border: 1px solid #d0d0d0 !important;
	border-radius: 8px !important;
	background: #fff !important;
	box-sizing: border-box;
	color: #555;
}

/* ── Quantity + Add to cart ──────────────────────────────────────────────── */

/* form.cart is the flex container for the entire purchase section.
   flex-wrap: wrap + flex: 0 0 100% on full-width items forces them into
   their own rows; qty + button share the bottom row. */
.pdp-summary .cart {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.pdp-summary .cart > table.thwepo-extra-options,
.pdp-summary .cart > .stock,
.pdp-summary .cart > .dispatch-notice,
.pdp-summary .cart > .qty-label {
	flex: 0 0 100%;
	margin-bottom: 0;
}

/* "Množství" label injected by pdp.js above the stepper row */
.pdp-summary .qty-label {
	font-family: var(--font, 'Outfit'), sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text, #1a1a1a);
	display: block;
}

/* Qty + button row — JS wraps both in .pdp-cart-row so hidden inputs between
   them in the form DOM cannot break the side-by-side layout. */
.pdp-summary .pdp-cart-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	flex: 0 0 100%;
}

.pdp-summary .pdp-cart-row .single_add_to_cart_button {
	flex: 1;
}

/* Quantity stepper: input on the left, stacked up/down buttons on the right */
.pdp-summary .quantity {
	display: inline-flex;
	align-items: stretch;
	align-self: center;
	height: 44px;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
	width: 68px !important;
	flex: 0 0 68px !important;
	min-width: 68px !important;
	max-width: 68px !important;
}

/* Number input — left panel */
.pdp-summary .qty {
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	text-align: center;
	font-family: var(--font, 'Outfit'), sans-serif;
	font-size: 1.1rem;
	font-weight: 500;
	padding: 0;
	border: none;
	border-right: 1px solid #d5d5d5;
	border-radius: 0;
	height: 100%;
	background: #fff;
	color: #222;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: textfield;
}

.pdp-summary .qty::-webkit-inner-spin-button,
.pdp-summary .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Button column: stacked up/down, injected by pdp.js */
.qty-buttons {
	display: flex;
	flex-direction: column;
	width: 24px !important;
	flex: 0 0 24px !important;
}

.qty-btn {
	flex: 1;
	background: #fff !important;
	border: none;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	user-select: none;
	transition: background 0.15s;
	position: relative;
	color: inherit;
}

/* Divider between the two buttons */
.qty-btn.qty-plus {
	border-bottom: 1px solid #d5d5d5;
}

.qty-btn:hover { background: #f5f5f5 !important; }
.qty-btn:active { background: #ede7f6 !important; }

/* CSS chevron arrows in brand violet */
.qty-btn::after {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid #7100ba;
	border-top: 1.5px solid #7100ba;
}

.qty-btn.qty-plus::after {
	transform: rotate(-45deg) translate(1px, 1px);
}

.qty-btn.qty-minus::after {
	transform: rotate(135deg) translate(1px, -1px);
}


/* Override Storefront's default grey button with brand purple */
.pdp-summary .single_add_to_cart_button,
.pdp-summary .button.alt,
.single-product .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: center;
	flex: 0 0 auto;
	width: 260px !important;
	min-width: 220px !important;
	max-width: 260px !important;
	background-color: #7100ba !important;
	color: #fff !important;
	border-color: #7100ba !important;
	font-family: var(--font, 'Outfit'), sans-serif;
	font-size: 1rem;
	font-weight: 600;
	padding: 15px 28px;
	border-radius: 10px;
	transition: background-color 0.2s, border-color 0.2s;
	cursor: pointer;
	letter-spacing: 0.02em;
	white-space: nowrap;
	margin-top: -18px !important;
}

.pdp-summary .single_add_to_cart_button:hover,
.pdp-summary .button.alt:hover,
.single-product .single_add_to_cart_button:hover {
	background-color: #5a0090 !important;
	border-color: #5a0090 !important;
}

.pdp-summary .single_add_to_cart_button::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-right: 9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='white'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1-96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") no-repeat center / contain;
	vertical-align: middle;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.storefront-breadcrumb {
	padding: 0;
	margin: 0;
}

.storefront-breadcrumb .col-full {
	max-width: 1248px;
	margin: 0 auto;
	padding: 8px 20px 0;
	margin-top: -15px;
}

.woocommerce-breadcrumb {
	font-size: 0.82rem;
	color: #888;
	line-height: 1.4;
	display: block;
	margin-left: -50px;
}

.woocommerce-breadcrumb a {
	color: #888;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: #555;
	text-decoration: underline;
}

/* ── Stock — suppress any Storefront ::before icon/emoji ─────────────────── */

.pdp-summary .stock::before,
.pdp-summary .stock::after {
	content: none !important;
	display: none !important;
}

/* ── Product tabs ────────────────────────────────────────────────────────── */

/* Storefront renders tabs as a float:left sidebar (30% width, vertical li items).
   Override completely to get a horizontal top-tab-bar layout. */

.woocommerce-tabs {
	max-width: 1248px;
	margin: -85px auto 0;
	padding: 0 20px 48px;
	overflow: hidden; /* clear Storefront's float context */
}

/* Remove Storefront's default bottom margins that create a visible gap
   (body background #f5f3fb) between the tabs section and the footer.
   The .woocommerce-tabs margin-bottom is set to 0 above; these rules
   zero out the outer wrappers so no gap bleeds through. */
body.single-product .site-main {
	margin-bottom: 0 !important;
}

body.single-product .hentry.product {
	margin-bottom: 0 !important;
}

/* Tab bar — horizontal flex row */
.woocommerce-tabs ul.tabs {
	display: flex !important;
	flex-direction: row !important;
	float: none !important;
	width: 100% !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top: none !important;
	border-bottom: 1px solid #e0e0e0;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
	display: none !important;
}

/* Each tab — equal width */
.woocommerce-tabs ul.tabs li {
	flex: 1 !important;
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	background: transparent !important;
	position: relative !important;
	text-align: center;
	box-sizing: border-box;
}

.woocommerce-tabs ul.tabs li.active {
	border-bottom-color: #222 !important;
}

/* Hide Storefront's ::after triangle on active tab */
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li.active::after {
	display: none !important;
}

/* Tab links */
.woocommerce-tabs ul.tabs li a {
	display: block !important;
	padding: 14px 20px !important;
	font-family: var(--font, 'Outfit'), sans-serif !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	color: #999 !important;
	text-decoration: none !important;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: #222 !important;
}

/* Tab content panels — full width, override float */
.woocommerce-tabs .panel {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 24px 0 0 !important;
}

/* ── Stock confirmation modal ────────────────────────────────────────────── */

.stock-modal {
	position: fixed;
	z-index: 9999;
	right: 0;
	bottom: 0;
	width: 320px;
}

.stock-modal-content {
	background: var(--pink-bg, #af86ff);
	padding: 24px;
	border-radius: var(--r, 8px) var(--r, 8px) 0 0;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

#modal-message {
	color: #fff;
	font-family: var(--font, 'Outfit'), sans-serif;
	font-size: 0.95rem;
	margin-bottom: 16px;
	line-height: 1.5;
}

.stock-modal-actions {
	display: flex;
	gap: 10px;
}

.stock-modal-btn {
	flex: 1;
	padding: 10px 16px;
	border: none;
	border-radius: var(--r, 8px);
	font-family: var(--font, 'Outfit'), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}

.stock-modal-btn:hover {
	opacity: 0.85;
}

.stock-modal-btn--ok {
	background: var(--pink, #8e07bb);
	color: #fff;
}

.stock-modal-btn--cancel {
	background: #fff;
	color: var(--text, #1a1a1a);
}

body.single-product .woocommerce-tabs ul.tabs li,
body.single-product .woocommerce-tabs ul.tabs li a,
.qty-btn:focus,
.qty-btn:focus-visible,
.qty-btn:active {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
	border-bottom: 2px solid #222 !important;
}

body.single-product .woocommerce-tabs ul.tabs li a:focus,
body.single-product .woocommerce-tabs ul.tabs li a:active {
	outline: none !important;
	box-shadow: none !important;
}
/* ── Reviews: empty state — remove blue notice box ──────────────────────── */
/*
 * Storefront's WooCommerce CSS groups .woocommerce-noreviews with
 * .woocommerce-info/.woocommerce-error and applies the same blue/green
 * alert-box styling (background, border-left, padding, icon).
 * Production shows plain text only — strip all box styling here.
 * This rule only loads on is_product() pages (pdp.css scope).
 */

/* Shared typography for both empty-reviews paragraphs */
.woocommerce-noreviews,
.woocommerce-verification-required {
	font-family:  var(--font, 'Outfit'), sans-serif !important;
	font-size:    0.95rem !important;
	font-weight:  400 !important;
	line-height:  1.6 !important;
	color:        #555 !important;
	margin:       0 0 1em !important;
	padding:      0 !important;
}

.woocommerce-noreviews {
	background:        transparent !important;
	background-color:  transparent !important;
	border:            none !important;
	border-left:       none !important;
	border-top:        none !important;
	border-radius:     0 !important;
	box-shadow:        none !important;
	position:          static !important;
	list-style:        none !important;
	clear:             none !important;
}

/* Remove the WooCommerce icon (ⓘ) injected via ::before on this element */
.woocommerce-noreviews::before {
	display: none !important;
	content: none !important;
}

/* ── Responsive — tablet (≤900px) ────────────────────────────────────────── */

@media ( max-width: 900px ) {
	.pdp-layout {
		grid-template-columns: 1fr;
		gap: 24px;
		margin: 24px auto;
		padding: 0 16px;
	}

	.pdp-gallery {
		position: static;
		overflow: hidden;
	}

	.woocommerce-product-gallery__image img {
		max-height: 400px;
	}
}

/* ── Responsive — mobile (≤600px) ────────────────────────────────────────── */

@media ( max-width: 600px ) {
	/* Single-line breadcrumb — links are the nav value, product title is already in H1 */
	.woocommerce-breadcrumb {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}

	.pdp-layout {
		padding: 0 12px;
		margin: 16px auto;
		gap: 16px;
	}
	.pdp-summary .product_title {
		font-size: 1.35rem;
	}
	.pdp-summary .price {
		font-size: 1.2rem;
		
	}
	.pdp-summary .quantity {
		align-self: center;
	}

	.thwepo-extra-options {
		max-width: 100%;
	}
	.woocommerce-product-gallery__image img {
		max-height: 320px;
	}
	.stock-modal {
		width: 100%;
		right: 0;
	}
	.pdp-layout {
		margin-bottom: 0;
	}

	/* Remove any bottom padding from the summary wrapper */
	.pdp-summary .summary {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}

	.woocommerce-tabs {
		padding: 0 12px 40px;
		margin: -28px auto 0;
	}
}