/*
 * The flat content sections: reviews, specifications.
 * One vertical flow — the tabs are gone, nothing hides.
 */
.gsl-sections {
	margin-block: var(--wp--preset--spacing--60);
}

.gsl-sections__part {
	margin-bottom: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.gsl-sections__title {
	font-family: var(--wp--preset--font-family--fixel-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.gsl-sections__count {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	margin-left: var(--wp--preset--spacing--20);
}

/* The reviews template prints its own «Відгуки/Reviews» heading — the section
   already said the word, once is enough. */
.gsl-sections__reviews .woocommerce-Reviews-title {
	display: none;
}

/* --- specifications table ------------------------------------------------ */

.gsl-sections .shop_attributes {
	width: 100%;
	max-width: 70ch;
	border-collapse: collapse;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	overflow: hidden;
}

.gsl-sections .shop_attributes th,
.gsl-sections .shop_attributes td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	/* 14 px, the size every other product text reads at (ADR 0029). */
	font-size: var(--wp--preset--font-size--base);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	text-align: left;
	vertical-align: top;
	background: var(--wp--preset--color--base);
}

.gsl-sections .shop_attributes tr:last-child th,
.gsl-sections .shop_attributes tr:last-child td {
	border-bottom: 0;
}

.gsl-sections .shop_attributes th {
	width: 42%;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.gsl-sections .shop_attributes p {
	margin: 0;
}

/* «Основні» / «Додатково» over a long table: a quiet caption row, not a
   second heading (characteristics research, 24.09.2026). */
.gsl-sections .shop_attributes .gsl-sections__group th {
	width: auto;
	padding-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
}

/* WooCommerce's small-screen stylesheet stacks every row under 768px — the
   label above, the value below, «display: block» on the row and both cells
   at (0,2,3) — and its general stylesheet sets the values in italics. Six
   facts then cost 344px, and «1,5 мм» in italics reads worse than upright.
   The table keeps its two columns at every width and its values stand
   straight (owner, 23.09.2026). Three classes here outweigh WooCommerce's
   two, so the width and the padding are repeated where the weight is. */
.gsl-sections .gsl-sections__specs .shop_attributes tr {
	display: table-row;
}

.gsl-sections .gsl-sections__specs .shop_attributes th,
.gsl-sections .gsl-sections__specs .shop_attributes td {
	display: table-cell;
	/* A row of 36px: the whole table stands open now, so every row pays. */
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-style: normal;
}

.gsl-sections .gsl-sections__specs .shop_attributes th {
	width: 42%;
}

/* WooCommerce wraps every value in a paragraph and pads it 8px top and
   bottom at (0,2,3) — on a wide screen the value sat a line lower than its
   label and each row grew to 52px (design review, 28.09.2026). */
.gsl-sections .gsl-sections__specs .shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* --- reviews: list and form ---------------------------------------------- */

.gsl-sections .commentlist {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	max-width: 70ch;
}

.gsl-sections .commentlist .comment_container {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	margin-bottom: var(--wp--preset--spacing--30);
}

.gsl-sections .comment-form input[type="text"],
.gsl-sections .comment-form input[type="email"],
.gsl-sections .comment-form textarea {
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
	font: inherit;
	background: var(--wp--preset--color--base);
}

.gsl-sections .comment-form .submit {
	height: 42px;
	padding-inline: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* The form waits behind one honest button — an empty questionnaire is not
   a first screen's worth of content. Native <details>, no script. */
.gsl-sections__leave {
	max-width: 70ch;
}

.gsl-sections__leave-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--50);
	border: 1.5px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--brand-action);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.gsl-sections__leave-btn::-webkit-details-marker {
	display: none;
}

.gsl-sections__leave[open] .gsl-sections__leave-btn {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Named parts, so a later rule can address one section without counting. */
.gsl-sections__specs .shop_attributes {
	font-size: var(--wp--preset--font-size--small);
}

/* --- the fold: only the rare long tail keeps a short public face --------- */
/* Twelve rows stay open, the fold begins past sixteen (23.09.2026). The
   view script applies the state, so a scriptless visitor simply sees
   everything open. */

.gsl-sections__specs.is-folded .shop_attributes tr:nth-child(n + 13) {
	display: none;
}

.gsl-sections__specs.is-folded .shop_attributes tr:nth-child(12) th,
.gsl-sections__specs.is-folded .shop_attributes tr:nth-child(12) td {
	border-bottom: 0;
}

.gsl-sections__unfold {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: var(--wp--preset--spacing--30);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--brand-action);
	cursor: pointer;
}

.gsl-sections__unfold::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
}

.gsl-sections__unfold[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
	.gsl-sections__unfold::after {
		transition: none;
	}
}

/* In the two-column tail the wrapper draws the top rule and the first part
   starts flush; the spacing between parts stays. */
.gsl-sections--lower {
	margin-block: 0;
}

.gsl-sections--lower .gsl-sections__part:first-child {
	padding-top: 0;
	border-top: 0;
}

/* WooCommerce's own stars under each review are the text glyphs of the theme's
   ink, which put black stars a screen below the gold ones in the rating line —
   the very thing the rating-line block was written to stop. Same two colours
   here: earned stars gold, the rest the grey of an outline. The selector is
   deliberately one class longer than WooCommerce's own, which carries the same
   weight and cannot be relied on to lose. */
.gsl-sections .gsl-sections__reviews .commentlist .star-rating {
	color: var(--wp--preset--color--gold);
}

.gsl-sections .gsl-sections__reviews .commentlist .star-rating::before {
	color: var(--wp--preset--color--border-strong);
}