/* ----------------------------------------------------------------
   Wooptima Group Products
   Colors & spacing use AutomaticCSS tokens with safe fallbacks.
   ---------------------------------------------------------------- */

.wa-product-page {
	--wapp-accent: var(--secondary);
	--wapp-text: var(--base);
	--wapp-muted: var(--base-semi-light);
	--wapp-border: var(--base-ultra-light);
	--wapp-hover: var(--base-ultra-light);
	--wapp-cta: var(--action);

	box-sizing: border-box;
	color: var(--wapp-text);
	/* Anchors the school-swap loader. Safe for the toast, which is position:fixed —
	   only transform/filter/will-change would re-root a fixed descendant. */
	position: relative;
}

.wa-product-page *,
.wa-product-page *::before,
.wa-product-page *::after {
	box-sizing: border-box;
}

/* ---- Header ---- */
.wa-product-page__header {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-xs) / 2);
	margin-bottom: var(--space-xs);
}

.wa-product-page__title {
	margin: 0;
	font-size: var(--text-l);
	color: var(--wapp-text);
	font-weight: 700;
}

.wa-product-page__school {
	margin: 0;
	font-size: var(--text-m);
	color: var(--wapp-text);
	font-weight: 400;
	min-height: 54px;
}

.wa-product-page__school-name {
	color: var(--wapp-text);
	font-weight: 600;
}

/* ---- School picker ---- */
.wa-product-page__school-picker [hidden] {
	display: none;
}

.wa-product-page__school-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 500;
	color: var(--wapp-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.wa-product-page__school-link:hover,
.wa-product-page__school-link:focus-visible {
	text-decoration-thickness: 2px;
}

/* Drops onto its own line under the school name. A <button> keeps shrink-to-fit
   width even when block-level, so it stays link-sized rather than stretching —
   but it does inherit the control's centred text, hence the explicit alignment. */
[data-wa-school-current] .wa-product-page__school-link {
	display: block;
	text-align: left;
	font-size: calc(var(--text-s) * 1.15);
}

/* AutomaticCSS sets html{font-size:10px}, so 1rem = 10px here — 60rem is 600px,
   which lands the select on the same width it has at the checkout. */
.wa-product-page__school-select {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	width: 100%;
}

/* Flex items default to min-width:auto, so they refuse to shrink below their
   min-content width — and select2 renders the school name with white-space:nowrap.
   Without this, a long name makes the select unshrinkable and shoves "Zrušiť" off
   the viewport, scrolling the whole page sideways on mobile. */
.wa-product-page__school-select .select2 {
	min-width: 0;
	max-width: 60rem;
}

.wa-product-page__school-select-input {
	min-width: 0;
}

/* Round X, following the cart's remove control (2.4rem box). The cart draws its X with
   a "×" glyph, which sits off-centre because a glyph's ink never fills its em box — an
   SVG has no such metrics, so it centres on the geometry. Fixed size, so it must not
   shrink when a long school name squeezes the row. */
.wa-product-page__school-cancel {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-m);
	background: var(--base-ultra-light);
	color: var(--wapp-text);
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

/* Inline SVGs sit on the text baseline, which would re-introduce the offset. */
.wa-product-page__school-cancel svg {
	display: block;
}

/* The cart marks these !important to outrank WooCommerce's own a.remove styling —
   this is a plain button with nothing competing for it, so it does not need to. */
.wa-product-page__school-cancel:hover,
.wa-product-page__school-cancel:focus-visible {
	background: #d16060;
	color: #fff;
}

.wa-product-page.is-school-loading .wa-product-page__school-picker {
	opacity: 0.6;
	pointer-events: none;
}

/* ---- School swap loader ----
   Following the configurator's gallery loader. Toggled by a class rather than a
   `hidden` attribute so it can fade; JS only adds it once the request has been
   running a moment, so a fast swap never flashes it. */
.wa-product-page__loader {
	position: absolute;
	inset: 0;
	z-index: 5;
	/* Block, not flex: the spinner centres itself via sticky (see below), and a
	   flex line would fight it. */
	display: block;
	background: color-mix(in srgb, var(--white, #fff) 72%, transparent);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
	pointer-events: none;
}

.wa-product-page.is-school-loading .wa-product-page__loader {
	opacity: 1;
	visibility: visible;
	/* Swallow clicks on the content underneath while it is being replaced. */
	pointer-events: auto;
}

/* The widget runs ~1500px tall, so centring the spinner in the overlay would park
   it below the fold — invisible in exactly the case it exists for. Sticky keeps it
   in the middle of the viewport instead, clamped to the overlay's bounds, so it is
   on screen wherever the visitor happens to be scrolled. */
.wa-product-page__loader-spinner {
	position: sticky;
	top: calc(50vh - 24px);
	display: block;
	margin-inline: auto;
	width: 42px;
	height: 42px;
	border: 3px solid color-mix(in srgb, var(--wapp-accent) 20%, transparent);
	border-top-color: var(--wapp-accent);
	border-radius: 50%;
	animation: wa-product-page-spin 0.7s linear infinite;
}

/* The spinner is the only signal that anything is happening, so it keeps moving —
   just slowly enough not to trigger vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
	.wa-product-page__loader-spinner {
		animation-duration: 2.4s;
	}
}

@keyframes wa-product-page-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Bricks ships its WooCommerce CSS inside `@layer bricks`, and that is where
   `.woocommerce .select2-dropdown{border-radius:0!important}` lives. For !important
   declarations the cascade reverses layer order, so a layered !important outranks an
   unlayered one no matter its specificity — an override out here could never win, and
   has to join the same layer instead. Only product pages are hit: wc_body_class() adds
   `woocommerce` on is_woocommerce() pages but not on the checkout, so there the rule
   never matches and the dropdown keeps its radius. This restores the checkout's look. */
@layer bricks {
	.select2-container--open .wa-school-dropdown.select2-dropdown {
		border-radius: var(--radius-s) !important;
	}
}

/* ---- Table ---- */
.wa-product-page__table {
	width: 100%;
}

.wa-product-page__row {
	display: grid;
	grid-template-columns: 3fr 1fr 1fr 1fr;
	align-items: center;
	gap: var(--space-m);
	padding-block: var(--space-xs);
	padding-inline: 0;
	border-bottom: 1px solid var(--wapp-border);
	border-radius: 4px;
	transition: all ease-in-out .2s;
}

.wa-product-page__row:hover {
	transform: translateY(-2px);
}

.wa-product-page__row--head:hover {
	transform: none;
}

.wa-product-page__row--head {
	padding-top: 0;
	padding-bottom: var(--space-xs);
	padding-inline: 0;
	border-bottom: none;
}

.wa-product-page__row--head:hover {
	background-color: transparent;
}

.wa-product-page__col {
	font-size: var(--text-m);
	color: var(--wapp-text);
	font-weight: 600;
}

.wa-product-page__col--total {
	margin-left: auto;
	text-align: right;
}

/* ---- Cells ---- */
.wa-product-page__cell {
	min-width: 0;
}

.wa-product-page__cell--total {
	margin-left: auto;
	text-align: right;
}

.wa-product-page__cell--product {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.wa-product-page__thumb {
	width: 90px;
	height: 90px;
	display: block;
	cursor: pointer;
}

.wa-product-page__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 4px;
	background: var(--white);
}

.wa-product-page__name {
	font-size: calc(var(--text-m) * 1.1);
	color: var(--wapp-text);
}

.wa-product-page__cell--unit {
	font-size: calc(var(--text-m) * 1.1);
	color: var(--wapp-text);
	white-space: nowrap;
}

.wa-product-page__row-total {
	font-size: calc(var(--text-m) * 1.1);
	font-weight: 700;
	color: var(--wapp-accent);
	white-space: nowrap;
}

/* ---- Quantity selector ----
   Uses the theme's native markup/classes (.quantity, .qty_button, .qty),
   so it inherits the global quantity styling. No local overrides here. */

/* ---- Footer ---- */
.wa-product-page__footer {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-s);
    padding-top: var(--space-s);
}

.wa-product-page__total {
	font-size: calc(var(--text-m) * 1.1);
	white-space: nowrap;
}

/* Add-to-cart + the reveal-after-add "go to cart" link, side by side. */
.wa-product-page__actions {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.wa-product-page__cart-link {
	white-space: nowrap;
	/* Sits to the left of the primary add-to-cart button. */
	order: -1;
}

/* Belt-and-braces: the button starts hidden via the [hidden] attribute, but
   wa-button sets display, which would otherwise override [hidden]. */
.wa-product-page__cart-link[hidden] {
	display: none;
}

.wa-product-page__total-label {
	color: var(--wapp-accent);
	font-weight: 500;
}

.wa-product-page__total-value {
	color: var(--wapp-accent);
	font-weight: 700;
	font-size: calc(var(--text-l) * 1.1);
	margin-left: var(--space-xs);
}

.wa-product-page__submit {
	position: relative;
}

.wa-product-page__submit[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}

.wa-product-page.is-loading .wa-product-page__submit {
	cursor: wait;
}

/* ---- Notice / toast ---- */
.wa-product-page__notice {
	position: fixed;
	top: calc(9rem + var(--space-xs));
	right: max(var(--gutter), calc((100vw - var(--wa-page-container-width)) / 2));
	left: auto;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	max-width: min(45rem, calc(100vw - (var(--gutter) * 2)));
	padding: 0.875rem 1rem;
	margin: 0;
	border-radius: 12px;
	background: var(--white, #fff);
	color: var(--wapp-text);
	box-shadow:
		0 12px 40px rgba(15, 23, 42, 0.1),
		0 2px 8px rgba(15, 23, 42, 0.05);
	border: 1px solid rgba(15, 23, 42, 0.06);
	font-size: calc(var(--text-m, 1rem) * 0.9);
	line-height: 1.45;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(calc(var(--gutter) / 2), 0, 0);
	transition:
		opacity 0.28s ease,
		transform 0.28s ease,
		visibility 0.28s ease;
	pointer-events: none;
}

.wa-product-page__notice.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}

.wa-product-page__notice--success {
	background: color-mix(in srgb, var(--success, #16a34a) 10%, #fff);
	border-color: color-mix(in srgb, var(--success, #16a34a) 22%, transparent);
	color: color-mix(in srgb, var(--success, #16a34a) 75%, #0f172a);
}

.wa-product-page__notice--error {
	background: color-mix(in srgb, var(--wapp-cta, #dc2626) 10%, #fff);
	border-color: color-mix(in srgb, var(--wapp-cta, #dc2626) 22%, transparent);
	color: color-mix(in srgb, var(--wapp-cta, #dc2626) 75%, #0f172a);
}

.wa-product-page__notice--info {
	background: color-mix(in srgb, var(--wapp-accent) 8%, #fff);
	border-color: color-mix(in srgb, var(--wapp-accent) 20%, transparent);
	color: color-mix(in srgb, var(--wapp-accent) 78%, #0f172a);
}

.wa-product-page__notice-icon {
	flex-shrink: 0;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
}

.wa-product-page__notice-icon svg {
	display: block;
}

.wa-product-page__notice--success .wa-product-page__notice-icon--success {
	display: inline-flex;
	color: var(--success, #16a34a);
	background: color-mix(in srgb, var(--success, #16a34a) 18%, #fff);
}

.wa-product-page__notice--error .wa-product-page__notice-icon--error {
	display: inline-flex;
	color: var(--wapp-cta, #dc2626);
	background: color-mix(in srgb, var(--wapp-cta, #dc2626) 18%, #fff);
}

/* Info reuses the error glyph — same "read me" shape, neutral colour. */
.wa-product-page__notice--info .wa-product-page__notice-icon--error {
	display: inline-flex;
	color: var(--wapp-accent);
	background: color-mix(in srgb, var(--wapp-accent) 16%, #fff);
}

.wa-product-page__notice-text {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding-top: 0.2rem;
	font-weight: 500;
}

/* ---- Responsive: compact product cards ---- */
@media (max-width: 767px) {
	.wa-product-page__row--head {
		display: none !important;
	}

	.wa-product-page__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-s);
		padding: var(--space-s) var(--space-xs);
	}

	.wa-product-page__row {
		position: relative;
	}

	.wa-product-page__thumb {
		width: 40px;
		height: 40px;
	}

	.wa-product-page__cell--unit {
		align-self: center;
		text-align: right;
	}

	.wa-product-page__cell--qty {
		align-self: center;
	}

	.wa-product-page__cell--total {
		justify-self: end;
		align-self: center;
	}

	.wa-product-page__footer {
		justify-content: space-between;
		gap: var(--space-s);
	}

	.wa-product-page__footer .wa-product-page__submit {
		flex: 1 1 auto;
		justify-content: center;
	}

	.wa-product-page__notice {
		top: calc(7rem + var(--space-xs));
	}
}

@media (max-width: 487px) {
	.wa-product-page__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.wa-product-page__total {
		text-align: right;
	}

	.wa-product-page__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	/* Stacked on mobile: keep the primary add-to-cart button on top. */
	.wa-product-page__cart-link {
		order: 0;
	}

	.wa-product-page__footer .wa-product-page__submit,
	.wa-product-page__footer .wa-product-page__cart-link {
		width: 100%;
	}
}

/* ----------------------------------------------------------------
   Bundle child list (cart / mini-cart / checkout order review)
   Rendered under the grouped bundle line as a read-only toggle.
   ---------------------------------------------------------------- */
.wa-bundle-details {
	margin: 6px 0 0;
	font-size: 13px;
}

.wa-bundle-details__summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	color: var(--secondary, #1763aa);
	list-style: none;
	user-select: none;
}

.wa-bundle-details__summary::-webkit-details-marker {
	display: none;
}

.wa-bundle-details__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-left: 2px;
}

.wa-bundle-details[open] .wa-bundle-details__summary::after {
	transform: rotate(-135deg);
}

.wa-bundle-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.wa-bundle-list__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	color: var(--base);
}

.wa-bundle-list__qty {
	white-space: nowrap;
	font-weight: 600;
}

/* Order tables (thank-you, order view) hand the name cell the whole column, so
   the quantity needs a cap or it drifts away from the item it belongs to. */
.wa-bundle-list--order {
	max-width: 38rem;
}

.wa-bundle-list--order .wa-bundle-list__item {
	font-size: var(--text-s);
	color: var(--base-semi-light);
	padding: 2px 0;
}

tr.wa-bundle-details-row {
	border-bottom: 1px solid var(--wa-cart-bg-primary);
}

tr.wa-bundle-cart-item > td {
	padding-bottom: 0 !important;
	border-bottom: none !important; /* separator moves to the details row below */
}

tr.wa-bundle-details-row > td {
	border-top: none;
}

tr.wa-bundle-details-row > td.wa-bundle-details-spacer {
	padding: 0;
}

tr.wa-bundle-details-row > td.wa-bundle-details-cell {
	padding: var(--space-s);
	padding-top: 0;
}

/* On mobile the responsive cart stacks cells — drop the lead spacers. */
@media (max-width: 767px) {
	tr.wa-bundle-details-row > td.wa-bundle-details-spacer {
		display: none;
	}

	tr.wa-bundle-details-row > td.wa-bundle-details-cell {
		padding-top: var(--space-s);
	}

	tr.wa-bundle-details-row {
		border-bottom: 2px solid var(--wa-cart-bg-primary);
	}

	.woocommerce-cart-form .shop_table_responsive tbody tr.woocommerce-cart-form__cart-item.wa-bundle-cart-item {
		border-bottom: none !important;
	}
}

/* The lifted toggle / list sits under the name, not squeezed into the name column. */
tr.wa-bundle-details-row .wa-bundle-details,
tr.wa-bundle-details-row .wa-bundle-list--cart {
	margin-top: 0;
	width: 100%;
}

/* Cart page: always-expanded list (mirrors the thank-you page), lifted into its
   own row by the cart JS. */
.wa-bundle-list--cart {
	max-width: 38rem;
}

.wa-bundle-list--cart .wa-bundle-list__item {
	font-size: var(--text-s);
	color: var(--base-semi-light);
	padding: 2px 0;
}