/* GripSockSource - Private Label Grip Socks page.
 * Loaded only on /private-label-grip-socks/. Keep page-specific rules here,
 * never in the post content. The page reuses the shared gss-page-* component
 * system from pages.css; only the pieces that pages.css does not define yet
 * are declared below.
 */

/* Hero: image occupies the right column instead of the generic hero note.
 * The figure background is a light neutral, never the dark brand blue: if an
 * image ever fails to load the panel must still read as a normal light block
 * instead of a solid navy shape that looks like an intentional graphic.
 */
.gss-page-pl .gss-page-hero-grid > figure.gss-hero-visual {
	margin: 0;
	overflow: hidden;
	background: #eef3f8;
	position: relative;
}
.gss-page-pl .gss-hero-visual img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.gss-page-pl .gss-hero-visual figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 4px;
	padding: 18px 20px;
	color: #fff;
	background: linear-gradient(to top, rgba(11, 36, 59, .92), rgba(11, 36, 59, 0));
}
.gss-page-pl .gss-hero-visual span {
	color: #ff9871;
	font: 700 .6rem "Manrope", sans-serif;
	letter-spacing: .13em;
}
.gss-page-pl .gss-hero-visual strong {
	font: 700 .95rem "Manrope", sans-serif;
	line-height: 1.4;
}
.gss-page-pl .gss-page-hero-grid { position: relative; }

/* The hero H1 must never be clipped, offset or overlapped by the media column.
 * Note the selector: the hero section itself carries both .gss-page-hero and
 * .gss-page-pl, so the two classes must be compounded (no descendant space)
 * for the rule to match. The shared hero uses line-height 1.04, which is
 * tighter than the glyph box at this page's large clamp() size. 1.08 keeps a
 * multi-line headline comfortably inside its own box. */
.gss-page-pl.gss-page-hero h1,
.gss-page-pl .gss-page-hero h1 {
	max-width: none;
	height: auto;
	margin: 0;
	position: static;
	line-height: 1.08;
	padding-bottom: 2px;
}

/* Media column inside a split section, aligned with the adjacent copy block.
 * Same principle as the hero: the frame behind the image is a light neutral,
 * so an image that has not painted yet (or fails) never shows as a solid navy
 * panel. The caption below keeps its dark band because it carries white text. */
.gss-page-pl .gss-split-media {
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	background: #eef3f8;
}
.gss-page-pl .gss-split-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.gss-page-pl .gss-split-media figcaption {
	display: grid;
	gap: 4px;
	padding: 16px 18px;
	color: #fff;
	background: #12355b;
}
.gss-page-pl .gss-split-media span {
	color: #ff9871;
	font: 700 .6rem "Manrope", sans-serif;
	letter-spacing: .13em;
}
.gss-page-pl .gss-split-media strong {
	font: 700 .92rem "Manrope", sans-serif;
	line-height: 1.4;
}

/* Cards that carry their own image: the media fills the card edge to edge. */
.gss-page-pl .gss-card { padding: 0; overflow: hidden; }
.gss-page-pl .gss-card-media { margin: 0; background: #eef3f8; }
.gss-page-pl .gss-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.gss-page-pl .gss-card-body { padding: 24px 26px 28px; }
.gss-page-pl .gss-card-body h3 { margin: 0 0 10px; }
.gss-page-pl .gss-card-txt { margin: 0; color: #5e6b78; }

/* Definition list used for the illustrative specification summary. */
.gss-page-pl .gss-spec-list {
	display: grid;
	grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
	gap: 0;
	margin: 28px 0 0;
	border-top: 1px solid #dde6ee;
}
.gss-page-pl .gss-spec-list dt {
	padding: 14px 18px 14px 0;
	border-bottom: 1px solid #dde6ee;
	color: #172433;
	font: 700 .95rem "Manrope", sans-serif;
}
.gss-page-pl .gss-spec-list dd {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid #dde6ee;
	color: #5e6b78;
}

/* Comparison table: scroll inside its own wrapper rather than widening the page. */
.gss-page-pl .gss-table-wrap {
	margin: 0;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.gss-page-pl .gss-table-wrap .gss-data-table { min-width: 680px; }
.gss-page-pl .gss-table-wrap .gss-data-table th:first-child { width: 20%; }

/* Inline note under a table or image grid. */
.gss-page-pl .gss-note {
	margin: 26px 0 0;
	color: #5e6b78;
	font-size: .92rem;
	line-height: 1.6;
}

/* Compact checklist variant used by the quote-preparation block. */
.gss-page-pl .gss-checks-compact li { padding: 15px 0 15px 30px; }
.gss-page-pl .gss-checks-compact li strong { color: #172433; }

/* White closing CTA. */
.gss-page-pl.gss-final-cta { background: #fff; }
.gss-page-pl.gss-final-cta h2 { margin: 0 0 14px; color: #0b243b; }
.gss-page-pl.gss-final-cta p { max-width: 720px; color: #5e6b78; }

/* Neutralise the global .gss-entry-content h2 top margin inside this page. */
.gss-page-pl h2 { margin-top: 0; }

/* Wide blocks must scroll inside their own container, never widen the page. */
.gss-entry-content { min-width: 0; }

/*
 * Composed sections in this page body stack a heading block directly above a
 * grid. The shared .gss-split inside a bordered container needs the same gap
 * rhythm as the OEM page, which pages.css already provides, so nothing extra
 * is required there.
 */

@media (max-width: 900px) {
	.gss-page-pl .gss-hero-visual img { aspect-ratio: 16 / 10; }
	.gss-page-pl .gss-split-media img { aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
	.gss-page-pl .gss-spec-list { grid-template-columns: 1fr; }
	.gss-page-pl .gss-spec-list dt { padding-bottom: 2px; border-bottom: 0; }
	.gss-page-pl .gss-spec-list dd { padding-top: 2px; }
	.gss-page-pl .gss-table-wrap .gss-data-table { min-width: 480px; }
	.gss-page-pl .gss-table-wrap .gss-data-table th,
	.gss-page-pl .gss-table-wrap .gss-data-table td { padding: 13px 12px; font-size: .92rem; }
}


/* ---------------------------------------------------------------------------
 * Illustrative concept strip
 * A numbered row of real reference images that shows how the separate parts of
 * one private label program sit together. It is deliberately a plain image row
 * rather than a card grid, so it does not read as a second product listing.
 * ------------------------------------------------------------------------ */
.gss-page-pl .gss-concept-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.gss-page-pl .gss-concept-part {
	margin: 0;
	overflow: hidden;
	border: 1px solid #dde6ee;
	border-radius: 10px;
	background: #eef3f8;
}
.gss-page-pl .gss-concept-part img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.gss-page-pl .gss-concept-part figcaption {
	display: flex;
	gap: 9px;
	align-items: baseline;
	padding: 13px 15px;
	color: #172433;
	background: #fff;
	font: 700 .82rem "Manrope", sans-serif;
}
.gss-page-pl .gss-concept-part figcaption span {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	color: #fff;
	background: #f26b38;
	font-size: .66rem;
	font-weight: 800;
}

/* Sub-heading used inside a split copy column. */
.gss-page-pl .gss-subheading {
	margin: 30px 0 6px;
	color: #172433;
	font: 700 1.06rem "Manrope", sans-serif;
}

/* Secondary link that sits next to the primary button on the white closing CTA. */
.gss-page-pl .gss-text-link-onlight {
	align-self: center;
	color: #0b243b;
	font-weight: 700;
}
.gss-page-pl .gss-text-link-onlight:hover { color: #d95324; }

@media (max-width: 900px) {
	.gss-page-pl .gss-concept-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.gss-page-pl .gss-concept-strip { grid-template-columns: 1fr; }
}