/**
 * Product information tabs.
 *
 * Figma: 472:7978. Section 1920 wide, padding 120/140, gap 40, white with a
 * 1px #f5f5f5 rule above it.
 */

.oe-tabs {
	/*
	 * 120 on the 1920 frame down to the 48 the phone used, as one ramp rather
	 * than the 120/72/48 ladder that was here.
	 */
	padding-block: clamp(48px, 6.25vw, 120px);
	border-block-start: 1px solid #f5f5f5;
	background-color: var(--oe-color-white);
}

.oe-tabs .oe-container {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 1.39vw + 13.3px, 40px);
}

/* -- Tab bar ------------------------------------------------------------- */

.oe-tabs__bar {
	display: flex;
	gap: 24px;
	border-block-end: 1px solid var(--oe-color-neutral-300, #d3d3d3);
	overflow-x: auto;
	scrollbar-width: none;
}

.oe-tabs__bar::-webkit-scrollbar { display: none; }

/* The 1.5px underline is inside the 40px height in the design, so it is a
   shadow — a border would make the active tab a pixel and a half taller than
   its neighbours and shift the whole row. */
.oe-tabs__tab {
	flex: none;
	height: 40px;
	padding-inline: 0px;
	border: 0;
	border-radius: 0px;
	background: none;
	font-family: var(--oe-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #7a7a7a;
	white-space: nowrap;
	cursor: pointer;
	transition: color 200ms var(--oe-ease, ease), box-shadow 200ms var(--oe-ease, ease);
	text-transform: uppercase;
}

.oe-tabs__tab:hover { color: var(--oe-color-ink); }

.oe-tabs__tab.is-active {
	color: var(--oe-color-black);
	box-shadow: inset 0 -1.5px 0 0 var(--oe-color-black);
}

.oe-tabs__tab:focus-visible {
	outline: 2px solid var(--oe-color-black);
	outline-offset: -2px;
}

/* -- Panels -------------------------------------------------------------- */

/*
 * One rhythm value for the whole panel, published as a custom property so the
 * description wrapper below can reuse it rather than restate it. It was the
 * two copies drifting apart that put a heading on top of its own paragraph
 * once before.
 */
.oe-tabs__panel {
	--oe-tabs-rhythm: clamp(20px, 0.35vw + 17.3px, 24px);

	display: flex;
	flex-direction: column;
	gap: var(--oe-tabs-rhythm);
	max-width: 1640px;
}

.oe-tabs__panel[hidden] { display: none; }

.oe-tabs__panel > * { margin: 0; }

/*
 * Fluid between the two sizes the design actually specifies: 48px on the
 * 1920 frame and 28px on the phone. The middle term is the line through
 * those two points (48px at 1920, 28px at 767), so every width in between
 * gets its own size instead of jumping at a breakpoint — roughly 40px on a
 * 1440 laptop and 32px on a tablet. The clamp ends do the old breakpoints'
 * job, which is why no media query restates this size any more.
 */
.oe-tabs__panel h2 {
	font-family: var(--oe-font-title);
	font-size: clamp(21px, 1.74vw + 14.6px, 48px);
	font-weight: 600;
	line-height: 1.12;
	color: var(--oe-color-ink);
	text-wrap: balance;
}

/* The sub-headings pull back half the panel rhythm so they sit closer to the
   body they introduce than to the block above — 12 against 24 on a desktop,
   8 against 20 on a phone, and the ramp between. Line height is unitless so it
   follows the size down instead of being restated per breakpoint. */
.oe-tabs__panel h3 {
	margin-block-end: calc(-1 * clamp(8px, 0.35vw + 5.3px, 12px));
	font-family: var(--oe-font-title);
	font-size: clamp(20px, 0.35vw + 17.3px, 24px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--oe-color-ink);
}

.oe-tabs__panel p,
.oe-tabs__panel li {
	font-family: var(--oe-font-body);
	font-size: clamp(16px, 0.17vw + 14.7px, 18px);
	font-weight: 400;
	line-height: 1.6;
	color: #363636;
}

.oe-tabs__panel ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-tabs__panel li strong { color: var(--oe-color-ink); font-weight: 500; }

.oe-tabs__panel a { color: inherit; text-decoration: underline; }

.oe-tabs__note {
	font-family: var(--oe-font-body);
	font-size: 16px;
	line-height: 25.6px;
	color: rgba(26, 26, 26, 0.6);
}

/* WooCommerce prints the review list and form here; give it room but let it
   keep its own markup so review plugins still behave. */
.oe-tabs__panel #reviews { width: 100%; }
.oe-tabs__panel #reviews .commentlist { margin: 0; padding: 0; list-style: none; }

/* -- Responsive ---------------------------------------------------------- */

/* Only layout is left here: every size in this file is now a clamp that
   already reaches its phone value on its own. */
@media (max-width: 767px) {
	/* The four labels are wider than a phone, so the bar scrolls rather than
	   wrapping into a second row that pushes the panel down.

	   The bleed is written against --oe-gutter-inline, not against a literal
	   24px. base.css pins that gutter flat at 15px at every width, so a -24px
	   margin here reached 9px past the page on each side and the right-hand 9
	   became document overflow — the whole of the horizontal scroll this page
	   had on a phone. Tied to the variable, the bar cancels exactly the gutter
	   it is inside, whatever that gutter later becomes. */
	.oe-tabs__bar {
		gap: 16px;
		margin-inline: calc(-1 * var(--oe-gutter-inline));
		padding-inline: var(--oe-gutter-inline);
	}
}

@media (prefers-reduced-motion: reduce) {
	.oe-tabs__tab { transition: none; }
}

/*
 * The description panel holds one block per plate type and shows whichever the
 * builder is on. `hidden` is only a UA default, which any `display` rule on the
 * element would beat, so it is restated rather than left to chance.
 */
.oe-tabs__desc[hidden] {
	display: none;
}

/*
 * The wrapper has to carry the panel's own column rhythm, because it now sits
 * between the panel and the copy.
 *
 * The panel spaces its children by --oe-tabs-rhythm, and `h3` pulls back half
 * of that to sit closer to the body it introduces. Wrapping the copy in this
 * element made the wrapper the flex child instead — so the gap stopped falling
 * between a heading and its paragraph, while the negative margin kept applying
 * through the descendant selector. The heading had nothing left to pull against
 * and landed on top of the text below it.
 *
 * Inheriting the panel's variable rather than restating a number is what keeps
 * the two from drifting apart again: a description block is spaced by the same
 * value as the static tabs beside it, at every width, by construction.
 */
.oe-tabs__desc {
	display: flex;
	flex-direction: column;
	gap: var(--oe-tabs-rhythm);
}

.oe-tabs__desc > * {
	margin: 0;
}