/**
 * Voguish Child — Shop Page Promotion rail.
 * Scoped to body.voguish-child-has-promo so it only affects promo-enabled archives.
 * Tokens are --vch-*; the only data-driven color is --vch-rail-accent (set inline).
 */

body.voguish-child-has-promo {
	--vch-bg-soft: #fafaf8;
	--vch-ink: #1c1c1e;
	--vch-ink-2: #3a3a3c;
	--vch-ink-3: #6b6b6f;
	--vch-line: #ececec;
	--vch-line-2: #e4e4e1;
	--vch-radius: 4px;
	--vch-radius-lg: 8px;
}

/* Layout: turn the products row into a 2-column grid (grid | 312px rail).
 *
 * The parent's .wkvot-row is a float-based Bootstrap-style row carrying clearfix
 * ::before/::after pseudo-elements (content:" "; display:table). When the row
 * becomes a grid container those pseudo-elements are promoted to GRID ITEMS,
 * consuming the first/last cells and shoving the real columns into the wrong
 * tracks (products-col into the 312px track, rail wrapping to a second row).
 * So we MUST neutralise the clearfix pseudos and place the two real children
 * explicitly. (Verified via getComputedStyle(row,'::before') = display:table.) */
body.voguish-child-has-promo #wkvot-shop-products .wkvot-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 312px;
	gap: 56px;
	align-items: start;
}
body.voguish-child-has-promo #wkvot-shop-products .wkvot-row::before,
body.voguish-child-has-promo #wkvot-shop-products .wkvot-row::after {
	content: none;
	display: none;
}
body.voguish-child-has-promo #wkvot-shop-products .wkvot-shop-products-col {
	grid-column: 1;
	float: none;
	min-width: 0;
	width: auto;
	max-width: none;
	flex: none;
}
body.voguish-child-has-promo .voguish-child-shop-rail {
	grid-column: 2;
	position: sticky;
	top: 152px;
}

@media (max-width: 1024px) {
	body.voguish-child-has-promo #wkvot-shop-products .wkvot-row {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	/* Single column: both children share column 1 so they stack; an explicit
	   grid-column:2 here would spawn an implicit second track. Order puts the
	   rail above the product grid. */
	body.voguish-child-has-promo #wkvot-shop-products .wkvot-shop-products-col {
		grid-column: 1;
		order: 1;
	}
	/* Hide the promotion rail entirely on tablets and below (<= 1024px); the
	   product grid takes the full width via the single-column rule above. */
	body.voguish-child-has-promo .voguish-child-shop-rail {
		display: none;
	}
}

/* Card shell. */
body.voguish-child-has-promo .vch-rail-card {
	/* background: var(--vch-bg-soft); */
	border-radius: var(--vch-radius-lg);
	padding: 30px 26px;
}

/* Stack: sections flow with hairline dividers between them (YITH-style). */
body.voguish-child-has-promo .vch-rail-section + .vch-rail-section {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--vch-line);
}

/* Rich section: TinyMCE-authored content. */
body.voguish-child-has-promo .vch-rail-rich {
	color: var(--vch-ink-2);
	font-size: 14px;
	line-height: 1.6;
}
body.voguish-child-has-promo .vch-rail-rich > :first-child {
	margin-top: 0;
}
body.voguish-child-has-promo .vch-rail-rich > :last-child {
	margin-bottom: 0;
}
body.voguish-child-has-promo .vch-rail-rich p {
	margin: 0 0 10px;
}
body.voguish-child-has-promo .vch-rail-rich h2,
body.voguish-child-has-promo .vch-rail-rich h3,
body.voguish-child-has-promo .vch-rail-rich h4 {
	color: var(--vch-ink);
	margin: 16px 0 8px;
	line-height: 1.25;
}
body.voguish-child-has-promo .vch-rail-rich h3 {
	font-size: 15px;
}
body.voguish-child-has-promo .vch-rail-rich h4 {
	font-size: 13.5px;
}
body.voguish-child-has-promo .vch-rail-rich ul,
body.voguish-child-has-promo .vch-rail-rich ol {
	margin: 0 0 10px;
	padding-left: 18px;
}
body.voguish-child-has-promo .vch-rail-rich li {
	margin: 0 0 4px;
}
body.voguish-child-has-promo .vch-rail-rich a {
	color: var(--vch-rail-accent);
	text-decoration: underline;
}
body.voguish-child-has-promo .vch-rail-rich img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vch-radius);
	margin: 6px 0;
}
body.voguish-child-has-promo .vch-rail-rich blockquote {
	margin: 0 0 10px;
	padding: 4px 0 4px 14px;
	border-left: 2px solid var(--vch-line-2);
	color: var(--vch-ink-3);
}

/* Image (lightbox) button — image opens full-screen in Magnific Popup. */
body.voguish-child-has-promo .vch-rail-imgbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--vch-line-2);
	border-radius: var(--vch-radius);
	padding: 9px 14px;
	color: var(--vch-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
body.voguish-child-has-promo .vch-rail-imgbtn:hover {
	border-color: var(--vch-rail-accent);
	color: var(--vch-rail-accent);
}
body.voguish-child-has-promo .vch-rail-imgbtn-ic {
	font-size: 14px;
	line-height: 1;
	color: var(--vch-rail-accent);
}
body.voguish-child-has-promo .vch-rail-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vch-ink-3);
	margin-bottom: 8px;
}
body.voguish-child-has-promo .vch-rail-title {
	font-size: 20px;
	line-height: 1.25;
	color: var(--vch-ink);
	margin: 0 0 8px;
}
body.voguish-child-has-promo .vch-rail-sub {
	color: var(--vch-ink-2);
	margin: 0 0 18px;
}
body.voguish-child-has-promo .vch-rail-link,
body.voguish-child-has-promo .vch-rail-step-link {
	color: var(--vch-rail-accent);
	text-decoration: none;
}
body.voguish-child-has-promo .vch-rail-help {
	display: inline-block;
	margin-top: 18px;
	color: var(--vch-ink);
	font-weight: 600;
	text-decoration: none;
}

/* Steps. */
body.voguish-child-has-promo .vch-rail-steps { list-style: none; margin: 0; padding: 0; }
body.voguish-child-has-promo .vch-rail-step { display: flex; gap: 14px; padding: 12px 0; }
body.voguish-child-has-promo .vch-rail-node {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--vch-line-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--vch-ink-2);
}
body.voguish-child-has-promo .vch-rail-node.done {
	background: var(--vch-rail-accent);
	border-color: var(--vch-rail-accent);
	color: #fff;
}
body.voguish-child-has-promo .vch-rail-step-body h3 { margin: 0 0 2px; font-size: 15px; }
body.voguish-child-has-promo .vch-rail-step-body p { margin: 0; color: var(--vch-ink-3); font-size: 14px; }

/* Prose. */
body.voguish-child-has-promo .vch-rail-note p { color: var(--vch-ink-2); margin: 0 0 10px; }

/* FAQ. */
body.voguish-child-has-promo .vch-rail-faq-item { border-top: 1px solid var(--vch-line); }
body.voguish-child-has-promo .vch-rail-faq-q {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 14px 0;
	font-size: 15px;
	color: var(--vch-ink);
	cursor: pointer;
}
body.voguish-child-has-promo .vch-rail-faq-a { display: none; }
body.voguish-child-has-promo .vch-rail-faq-q.open + .vch-rail-faq-a { display: block; }
body.voguish-child-has-promo .vch-rail-faq-a-inner { padding: 0 0 14px; color: var(--vch-ink-2); font-size: 14px; }

/* Checklist. */
body.voguish-child-has-promo .vch-rail-check { list-style: none; margin: 0; padding: 0; }
body.voguish-child-has-promo .vch-rail-check li { display: flex; gap: 12px; padding: 10px 0; }
body.voguish-child-has-promo .vch-rail-check-ic {
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--vch-rail-accent) 12%, transparent);
	color: var(--vch-rail-accent);
	font-size: 13px;
}
body.voguish-child-has-promo .vch-rail-check-body b { display: block; font-size: 14px; }
body.voguish-child-has-promo .vch-rail-check-body span { color: var(--vch-ink-3); font-size: 13px; }

/* Promo. */
body.voguish-child-has-promo .vch-rail-promo-ic {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vch-rail-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}
body.voguish-child-has-promo .vch-rail-promo-body { color: var(--vch-ink-2); margin: 0 0 14px; }
body.voguish-child-has-promo .vch-rail-promo-code {
	display: flex;
	justify-content: space-between;
	width: 100%;
	border: 1px dashed var(--vch-line-2);
	border-radius: var(--vch-radius);
	background: none;
	padding: 10px 12px;
	cursor: pointer;
	margin-bottom: 12px;
}
body.voguish-child-has-promo .vch-rail-promo-code .code { font-weight: 600; letter-spacing: .05em; }
body.voguish-child-has-promo .vch-rail-promo-code .copy { color: var(--vch-ink-3); font-size: 12px; }
body.voguish-child-has-promo .vch-rail-promo-cta {
	display: inline-block;
	background: var(--vch-rail-accent);
	padding: 10px 16px;
	border-radius: var(--vch-radius);
	text-decoration: none;
}

/* Keep the CTA label white in every link state. The redesign sets
   `body.voguish-redesign a:link/:hover/:visited { color: inherit }` (specificity
   0,0,2,2), which out-specifies the rule above and greys the text. The extra
   `.vch-rail-promo` class here (0,0,3,1) wins cleanly without !important. */
body.voguish-child-has-promo .vch-rail-promo .vch-rail-promo-cta,
body.voguish-child-has-promo .vch-rail-promo .vch-rail-promo-cta:link,
body.voguish-child-has-promo .vch-rail-promo .vch-rail-promo-cta:hover,
body.voguish-child-has-promo .vch-rail-promo .vch-rail-promo-cta:focus,
body.voguish-child-has-promo .vch-rail-promo .vch-rail-promo-cta:active,
body.voguish-child-has-promo .vch-rail-promo .vch-rail-promo-cta:visited {
	color: #fff;
}

/* PhotoSwipe arrows for rail galleries (marker class .vch-pswp, added by the JS
   on open). The default skin draws bare glyph sprites with no backing, so on a
   WIDE image that fills the viewport the arrows land on the image itself and
   become invisible. Give them a solid translucent disc so they read over any
   image. Scoped to .vch-pswp so the product-page gallery keeps its native look. */
/* Solid, pure-black backdrop for rail galleries — no tint, no transition, so it
   appears as direct black instead of fading through the page colours behind. */
.pswp.vch-pswp .pswp__bg {
	background: #000 !important;
	transition: none !important;
}

.pswp.vch-pswp .pswp__button--arrow--left,
.pswp.vch-pswp .pswp__button--arrow--right {
	width: 56px;
	height: 56px;
	top: 50%;
	margin-top: -28px;
	/* !important: the default skin sets `background:0 0` on `.pswp--svg` arrows
	   (and a minified rule wins over non-important inline), so force the disc. */
	background-color: rgba( 0, 0, 0, 0.55 ) !important;
	border-radius: 50%;
}
.pswp.vch-pswp .pswp__button--arrow--left {
	left: 16px;
}
.pswp.vch-pswp .pswp__button--arrow--right {
	right: 16px;
}
.pswp.vch-pswp .pswp__button--arrow--left:hover,
.pswp.vch-pswp .pswp__button--arrow--right:hover {
	background-color: rgba( 0, 0, 0, 0.78 ) !important;
}
/* Re-center the sprite glyph inside the disc and drop the default skin's small
   dark box behind it (the disc is the backing now). Sprite is 32x30 → 12px/13px
   insets centre it in the 56x56 disc. */
.pswp.vch-pswp .pswp__button--arrow--left:before,
.pswp.vch-pswp .pswp__button--arrow--right:before {
	top: 13px;
	background-color: transparent;
}
.pswp.vch-pswp .pswp__button--arrow--left:before {
	left: 12px;
}
.pswp.vch-pswp .pswp__button--arrow--right:before {
	left: auto;
	right: 12px;
}