/* Core Tabs block (wp:tabs) inside the product description. The block ships
   almost no styling on classic themes, so give it a proper tab bar in the
   site colours (#004F91 navy, #69cd72 green). The editor sets an inline text
   colour on each tab button, hence the !important on colour states.
   product-tabs.js adds the sliding indicator and the mobile accordion. */

.single-product .wp-block-tabs {
	margin: 0 0 30px;
}

.single-product .wp-block-tab-list {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 0 30px;
	overflow-x: auto;
	border-bottom: 1px solid #e5e5e5;
	scrollbar-width: none;
}

.single-product .wp-block-tab-list::-webkit-scrollbar {
	display: none;
}

/* Core's button reset ships with the Tabs block stylesheet, which is not loaded
   when Product Tabs Manager tabs replace the block: repeat it here. */
.single-product .wp-block-tab-list button[role="tab"] {
	position: relative;
	box-sizing: border-box;
	width: max-content;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 24px;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	line-height: 1.3;
	color: #777 !important;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.single-product .wp-block-tab-list button[role="tab"]:hover {
	color: #004F91 !important;
}

.single-product .wp-block-tab-list button[role="tab"][aria-selected="true"] {
	font-weight: 600;
	color: #004F91 !important;
}

/* No focus ring on tabs, accordion headers or panels (the theme/Bootstrap adds one on click). */
.single-product .wp-block-tabs button,
.single-product .wp-block-tabs button:focus,
.single-product .wp-block-tabs button:focus-visible,
.single-product .wp-block-tab-panel,
.single-product .wp-block-tab-panel:focus,
.single-product .wp-block-tab-panel:focus-visible {
	outline: none !important;
	box-shadow: none;
}

/* Per-tab underline: grey on hover; green on the selected tab until the
   script takes over with the sliding indicator below. */
.single-product .wp-block-tab-list button[role="tab"]::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	border: 0;
	background: transparent;
	transform: scaleX(0);
	transition: transform 0.3s ease, background-color 0.2s ease;
	pointer-events: none;
}

.single-product .wp-block-tab-list button[role="tab"]:hover::before {
	background: #e5e5e5;
	transform: scaleX(1);
}

.single-product .wp-block-tab-list button[role="tab"][aria-selected="true"]::before {
	width: auto;
	background: #69cd72;
	transform: scaleX(1);
}

.single-product .qq-tabs-js .wp-block-tab-list button[role="tab"][aria-selected="true"]::before {
	background: transparent;
}

/* One green bar that slides and resizes to the selected tab. */
.single-product .qq-tabs__indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 0;
	height: 3px;
	background: #69cd72;
	opacity: 0;
	pointer-events: none;
}

.single-product .qq-tabs__indicator.is-ready {
	opacity: 1;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.single-product .wp-block-tab-panel > :first-child,
.single-product .wp-block-tab-panel > :first-child .wp-block-heading {
	margin-top: 0;
}

/* Panels switch via the `hidden` attribute, so the animation replays each time
   a panel is shown. */
.single-product .wp-block-tabs:not(.qq-tabs--accordion) .wp-block-tab-panel:not([hidden]) {
	animation: qq-tab-panel-in 0.4s ease both;
}

@keyframes qq-tab-panel-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
 * Mobile accordion (class added by product-tabs.js below 768px)
 * ========================================================================= */

.single-product .qq-tabs--accordion .wp-block-tab-list {
	display: none;
}

.single-product .qq-tabs--accordion {
	border-top: 1px solid #e5e5e5;
}

.single-product .qq-tabs__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 16px 40px 16px 16px;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	border-left: 3px solid transparent;
	background: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: #444;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.single-product .qq-tabs__toggle[hidden] {
	display: none;
}

.single-product .qq-tabs__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease, margin-top 0.3s ease;
}

.single-product .qq-tabs__toggle[aria-expanded="true"] {
	border-left-color: #69cd72;
	background: #f8f9f9;
	font-weight: 600;
	color: #004F91;
}

.single-product .qq-tabs__toggle[aria-expanded="true"]::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

/* Override core's `[hidden] { display: none !important }`: in accordion mode
   the script decides which panels are open, not the tab state. */
.single-product .qq-tabs--accordion .wp-block-tab-panel,
.single-product .qq-tabs--accordion .wp-block-tab-panel[hidden] {
	display: none !important;
	overflow: hidden;
}

.single-product .qq-tabs--accordion .wp-block-tab-panel.is-open,
.single-product .qq-tabs--accordion .wp-block-tab-panel.is-animating {
	display: block !important;
}

.single-product .qq-tabs--accordion .wp-block-tab-panel.is-animating {
	transition: height 0.35s ease;
}

.single-product .qq-tabs--accordion .wp-block-tab-panel.is-open {
	border-bottom: 1px solid #e5e5e5;
}

/* Spacing as pseudo-elements rather than padding, so it is part of the
   animated height and collapses smoothly. */
.single-product .qq-tabs--accordion .wp-block-tab-panel::before,
.single-product .qq-tabs--accordion .wp-block-tab-panel::after {
	content: "";
	display: block;
	height: 20px;
}

.single-product .qq-tabs--accordion .wp-block-tab-panel::after {
	height: 10px;
}

/* Stack image + text columns inside accordion panels. */
.single-product .qq-tabs--accordion .wp-block-tab-panel .wp-block-columns {
	flex-wrap: wrap !important;
}

.single-product .qq-tabs--accordion .wp-block-tab-panel .wp-block-column {
	flex-basis: 100% !important;
}

/* =========================================================================
 * Product Tabs Manager: parent description + nested tabs
 * ========================================================================= */

/* Same size the Tabs block sets inline on its tab bar. */
.single-product .qq-ptabs > .wp-block-tab-list {
	font-size: 18px;
}

.single-product .qq-ptabs__description {
	margin: 0 0 24px;
}

.single-product .qq-ptabs__description > :last-child {
	margin-bottom: 0;
}

.single-product .qq-subtabs {
	margin: 0;
}

/* Nested tab bar: pills, wrapping on narrow screens (no sideways scroll). */
.single-product .qq-subtabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.single-product .qq-subtabs__tab {
	margin: 0;
	padding: 9px 18px;
	border: 1px solid #cfd8e1;
	border-radius: 999px;
	background: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #3e4c59;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.single-product .qq-subtabs__tab:hover {
	border-color: #004F91;
	color: #004F91;
}

.single-product .qq-subtabs__tab[aria-selected="true"] {
	border-color: #004F91;
	background: #004F91;
	color: #fff;
}

.single-product .qq-subtabs__tab:focus {
	outline: none;
}

.single-product .qq-subtabs__tab:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 79, 145, 0.25);
}

.single-product .qq-subtabs__panel:focus {
	outline: none;
}

.single-product .qq-subtabs__panel > :first-child {
	margin-top: 0;
}

.single-product .qq-subtabs:not(.qq-subtabs--accordion) .qq-subtabs__panel:not([hidden]) {
	animation: qq-tab-panel-in 0.35s ease both;
}

/* Nested accordion (class added by product-tabs.js below 768px). */
.single-product .qq-subtabs--accordion .qq-subtabs__list {
	display: none;
}

.single-product .qq-subtabs__toggle {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 36px 12px 12px;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	background: transparent;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: #3e4c59;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.2s ease;
}

.single-product .qq-subtabs__toggle[hidden] {
	display: none;
}

.single-product .qq-subtabs__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 10px;
	height: 2px;
	background: currentColor;
	box-shadow: none;
}

.single-product .qq-subtabs__toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 2px;
	height: 10px;
	margin-top: -4px;
	background: currentColor;
	transition: transform 0.25s ease;
}

.single-product .qq-subtabs__toggle[aria-expanded="true"] {
	font-weight: 600;
	color: #004F91;
}

.single-product .qq-subtabs__toggle[aria-expanded="true"]::before {
	transform: scaleY(0);
}

.single-product .qq-subtabs__toggle:focus {
	outline: none;
}

.single-product .qq-subtabs__toggle:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(0, 79, 145, 0.4);
}

.single-product .qq-subtabs--accordion .qq-subtabs__panel,
.single-product .qq-subtabs--accordion .qq-subtabs__panel[hidden] {
	display: none !important;
	overflow: hidden;
}

.single-product .qq-subtabs--accordion .qq-subtabs__panel.is-open,
.single-product .qq-subtabs--accordion .qq-subtabs__panel.is-animating {
	display: block !important;
}

.single-product .qq-subtabs--accordion .qq-subtabs__panel.is-animating {
	transition: height 0.3s ease;
}

.single-product .qq-subtabs--accordion .qq-subtabs__panel::before,
.single-product .qq-subtabs--accordion .qq-subtabs__panel::after {
	content: "";
	display: block;
	height: 14px;
}

.single-product .qq-subtabs--accordion .qq-subtabs__panel.is-open {
	padding: 0 12px;
	border-bottom: 1px solid #e5e5e5;
}

@media (prefers-reduced-motion: reduce) {
	.single-product .wp-block-tabs:not(.qq-tabs--accordion) .wp-block-tab-panel:not([hidden]),
	.single-product .qq-subtabs:not(.qq-subtabs--accordion) .qq-subtabs__panel:not([hidden]) {
		animation: none;
	}

	.single-product .wp-block-tab-list button[role="tab"],
	.single-product .wp-block-tab-list button[role="tab"]::before,
	.single-product .qq-tabs__indicator.is-ready,
	.single-product .qq-tabs__toggle,
	.single-product .qq-tabs__toggle::after,
	.single-product .qq-tabs--accordion .wp-block-tab-panel.is-animating,
	.single-product .qq-subtabs__tab,
	.single-product .qq-subtabs__toggle,
	.single-product .qq-subtabs__toggle::before,
	.single-product .qq-subtabs--accordion .qq-subtabs__panel.is-animating {
		transition: none;
	}
}