/* ==========================================================================
   [wooforge_product_tabs] shortcode styles
   ========================================================================== */

.wooforge-product-tabs {
	--wf-tab-active-color: var(--wf-accent, #1a1a1a);
	--wf-tab-hover-bg: rgba(0, 0, 0, .05);
	--wf-tab-active-bg: rgba(0, 0, 0, .06);
	--wf-cat-width: 220px;
}

.wooforge-tabs-title {
	margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Inner flex container
   -------------------------------------------------------------------------- */

.wooforge-tabs-inner {
	display: flex;
}

/* --------------------------------------------------------------------------
   TOP layout
   -------------------------------------------------------------------------- */

.wooforge-product-tabs--top .wooforge-tabs-inner {
	flex-direction: column;
	gap: 24px;
}

.wooforge-product-tabs--top .wooforge-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wooforge-product-tabs--top .wooforge-tab-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 12px 16px;
	border: 2px solid transparent;
	text-align: center;
	line-height: 1.3;
	font-size: 0.875rem;
	font-weight: 500;
	transition: border-color 0.18s, background-color 0.18s;
	background: none;
	user-select: none;
}

.wooforge-product-tabs--top .wooforge-tab-btn:hover {
	background-color: var(--wf-tab-hover-bg);
	border-color: currentColor;
}

.wooforge-product-tabs--top .wooforge-tab-btn.is-active {
	border-color: var(--wf-tab-active-color);
	background-color: var(--wf-tab-active-bg);
}

.wooforge-product-tabs--top .wooforge-tab-img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   LEFT & RIGHT layouts — shared
   -------------------------------------------------------------------------- */

.wooforge-product-tabs--left .wooforge-tabs-inner,
.wooforge-product-tabs--right .wooforge-tabs-inner {
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

.wooforge-product-tabs--right .wooforge-tabs-inner {
	flex-direction: row-reverse;
}

.wooforge-product-tabs--left .wooforge-tabs-nav,
.wooforge-product-tabs--right .wooforge-tabs-nav {
	flex: 0 0 var(--wf-cat-width);
	width: var(--wf-cat-width);
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wooforge-product-tabs--left .wooforge-tabs-content,
.wooforge-product-tabs--right .wooforge-tabs-content {
	flex: 1 1 0;
	min-width: 0;
}

.wooforge-product-tabs--left .wooforge-tab-btn,
.wooforge-product-tabs--right .wooforge-tab-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 9px 14px;
	text-align: left;
	line-height: 1.3;
	font-size: 0.875rem;
	transition: border-color 0.15s, background-color 0.15s;
	background: none;
	user-select: none;
}

.wooforge-product-tabs--left .wooforge-tab-btn:hover,
.wooforge-product-tabs--right .wooforge-tab-btn:hover {
	background-color: var(--wf-tab-hover-bg);
}

.wooforge-product-tabs--left .wooforge-tab-btn.is-active {
	border-left-color: var(--wf-tab-active-color);
	background-color: var(--wf-tab-active-bg);
}

.wooforge-product-tabs--right .wooforge-tab-btn {
	border-right: 3px solid transparent;
	justify-content: flex-end;
	text-align: right;
}

.wooforge-product-tabs--right .wooforge-tab-btn.is-active {
	border-right-color: var(--wf-tab-active-color);
	background-color: var(--wf-tab-active-bg);
}

.wooforge-product-tabs--left .wooforge-tab-img,
.wooforge-product-tabs--right .wooforge-tab-img {
	display: block;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Shared tab elements
   -------------------------------------------------------------------------- */

.wooforge-tab-name {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}

.wooforge-tab-count {
	opacity: .55;
	font-size: 0.8em;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Tab panels — show/hide
   --------------------------------------------------------------------------
   All panels are stacked into the same grid cell instead of display:none:
   the container's height equals the TALLEST panel, so switching tabs never
   shifts the content below, and panel images have real layout from the
   start (no jump while they load in on first activation). */

.wooforge-tabs-content {
	display: grid;
	/* minmax(0,1fr), NOT the auto column a bare grid gets: an auto column
	   sizes to the panels' max-content, and a Swiper inside a panel lays its
	   slides out as wide flex children — the column balloons to the slide
	   row's width, Swiper re-measures the now-huge container, sizes the
	   slides even wider, and the block grows forever. minmax(0,1fr) pins the
	   column to the container width no matter what the slides measure.
	   align-items:start keeps each panel at its own content height so
	   height:100% descendants can't feed back into the row height. */
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.wooforge-tab-panel {
	width: 100%;
	min-width: 0;
}

.wooforge-tab-panel {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
}

.wooforge-tab-panel.is-active {
	visibility: visible;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Sub-tabs (hierarchy=nested)
   -------------------------------------------------------------------------- */

.wooforge-subtabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.wooforge-subtab-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 14px;
	border: 1px solid currentColor;
	cursor: pointer;
	font-size: 0.8125rem;
	opacity: .55;
	transition: opacity 0.15s, background-color 0.15s, color 0.15s;
	user-select: none;
}

.wooforge-subtab-btn:hover {
	opacity: .8;
}

.wooforge-subtab-btn.is-active {
	opacity: 1;
	background-color: var(--wf-tab-active-color);
	color: #fff;
	border-color: var(--wf-tab-active-color);
}

.wooforge-subtab-count {
	opacity: .75;
	font-size: 0.85em;
}

.wooforge-subtab-panel {
	display: none;
}

.wooforge-subtab-panel.is-active {
	display: block;
}

/* --------------------------------------------------------------------------
   Mobile: left/right collapses to horizontal scroll nav
   JS adds .wooforge-product-tabs--side-collapsed at the mobile breakpoint.
   -------------------------------------------------------------------------- */

.wooforge-product-tabs--side-collapsed .wooforge-tabs-inner {
	flex-direction: column !important;
	gap: 16px;
}

.wooforge-product-tabs--side-collapsed .wooforge-tabs-nav {
	flex: none !important;
	width: 100% !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 6px;
	padding-bottom: 4px;
	/* Snap to each item when scrolling */
	scroll-snap-type: x mandatory;
}

.wooforge-product-tabs--side-collapsed .wooforge-tab-btn {
	flex: 0 0 auto;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	justify-content: flex-start !important;
	border-right: none !important;
	border-bottom: 2px solid transparent !important;
	padding: 8px 12px !important;
	scroll-snap-align: start;
}

.wooforge-product-tabs--side-collapsed .wooforge-tab-btn.is-active {
	border-bottom-color: var(--wf-tab-active-color) !important;
	background-color: transparent !important;
}

.wooforge-product-tabs--side-collapsed .wooforge-tab-img {
	width: 40px !important;
	height: 40px !important;
}

/* Hide scrollbar in side-collapsed nav */
.wooforge-product-tabs--side-collapsed .wooforge-tabs-nav::-webkit-scrollbar {
	height: 3px;
}

.wooforge-product-tabs--side-collapsed .wooforge-tabs-nav::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .2);
}