/* Approved client-feedback presentation fixes.
 * Keep these selectors narrow: retail cards, Skincare category arrows, the
 * mobile navigation drawer, explicit feedback-owned treatment transition
 * presentation, and confirmed cross-family layout regressions. Editorial /
 * treatment/category imagery outside these components intentionally retains
 * its existing crop behaviour. */

/* The Skincare category card component owns final arrow geometry. This
 * neutralizes older/global absolute-arrow rules without label-specific widths
 * or padding hacks, including long labels such as Brightening & Pigmentation
 * Care. */
.gloskin-skincare-categories .gloskin-ui1-category-card__arrow,
.gloskin-skincare-category-related .gloskin-ui1-category-card__arrow {
	position: static;
	inset: auto;
	transform: none;
	align-self: stretch;
	display: grid;
	place-items: center;
	min-width: 58px;
}

/* Only the mobile drawer panel becomes an opaque Gloskin surface.
 * The separate backdrop keeps its existing translucency and click-to-close
 * behaviour; desktop header opacity is untouched. */
@media (max-width: 1040px) {
	.gloskin-ui1-drawer__panel {
		background: var(--gloskin-bg);
		opacity: 1;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		isolation: isolate;
	}

	/* Active top-level mobile navigation keeps the same text baseline as the
	 * inactive rows, but the red state now hugs the label instead of inheriting
	 * the link's flex:1 full-row geometry. The negative logical margin exactly
	 * offsets the added inline padding, so activation changes paint/measure only
	 * and never shifts the label or depends on JavaScript timing. */
	.gloskin-ui1-nav--mobile > .gloskin-ui1-nav__list > .gloskin-ui1-nav__item.is-active > .gloskin-ui1-nav__row > .gloskin-ui1-nav__link {
		flex: 0 1 auto;
		min-width: 0;
		margin-inline-start: -10px;
		padding-inline: 14px;
	}
}

/* The Treatment transition sits on the normal editorial surface,
 * not a dark contrast surface. Prevent the generic closing-CTA inverse token
 * from washing out its Next Step copy against that background. */
.gloskin-treatment-single__transition .gloskin-ui1-closing-cta {
	--gloskin-ui1-contrast-foreground: var(--gloskin-text);
	color: var(--gloskin-text);
}

.gloskin-treatment-single__transition .gloskin-ui1-closing-cta__copy h2,
.gloskin-treatment-single__transition .gloskin-ui1-closing-cta__copy p,
.gloskin-treatment-single__transition .gloskin-ui1-closing-cta .gloskin-ui1-eyebrow {
	color: var(--gloskin-text);
}

.gloskin-treatment-single__transition .gloskin-ui1-closing-cta .gloskin-ui1-text-link {
	color: var(--gloskin-accent-readable);
}

/* VR-20260904 — ordinary page and section headings wrap from their real grid
 * width. Earlier character-count caps were authored in several family owners;
 * this approved feedback layer neutralizes those caps without nowrap, forced
 * breaks, per-page offsets, or changes to legitimate article/card measures. */
.gloskin-ui1-hero__title,
.gloskin-clinics-hero h1,
.gloskin-ui1 .gloskin-doctors-hero__copy h1,
.gloskin-ui1 .gloskin-doctor-single__hero-copy h1,
.gloskin-ui1 .gloskin-doctor-single__detail-copy h2 {
	max-width: none;
}

/* 404 ornament field — animated halo/orbit deliberately extend beyond the
 * container scene. Neutralize the older clipping owners on both the section
 * and ambient layer so transform/box-shadow animation can breathe naturally. */
body.gloskin-ui1 .gloskin-ui1-not-found,
body.gloskin-ui1 .gloskin-ui1-not-found__ambient {
	overflow: visible;
}

/* Checkout closure — keep the final payment/trust area visually separate from
 * the dark consultation/footer surface. The commerce wrapper owns this space,
 * so no footer-specific margin or fragile last-child selector is required. */
body.gloskin-ui1.woocommerce-checkout .gloskin-ui1-commerce-native {
	padding-bottom: clamp(68px, 7vw, 104px);
}

@media (max-width: 760px) {
	body.gloskin-ui1.woocommerce-checkout .gloskin-ui1-commerce-native {
		padding-bottom: clamp(50px, 12vw, 72px);
	}
}

/* Keep the desktop browser scrollbar intentional and
 * quiet across shared UI1 routes. Firefox consumes scrollbar-color while
 * Chromium/Safari use the WebKit pseudo-elements below. Mobile keeps the
 * platform-native scrollbar behaviour. */
@media (min-width: 1041px) {
	html {
		scrollbar-color: #b8c3d8 #f1f4f9;
		scrollbar-width: auto;
	}

	html::-webkit-scrollbar {
		width: 13px;
		height: 13px;
	}

	html::-webkit-scrollbar-track {
		background: #f1f4f9;
	}

	html::-webkit-scrollbar-thumb {
		background: #b8c3d8;
		border: 3px solid #f1f4f9;
		border-radius: 999px;
	}

	html::-webkit-scrollbar-thumb:hover {
		background: #98a7c2;
	}
}

/* Header 2 is the canonical mobile shell. Once the
 * desktop nav is hidden, use an explicit two-track layout so the logo and the
 * first utility (search) always retain breathing room without changing desktop
 * geometry or utility semantics. */
@media (max-width: 760px) {
	[data-gloskin-header="header-2"] .gloskin-ui1-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: clamp(14px, 4vw, 20px);
	}

	[data-gloskin-header="header-2"] .gloskin-ui1-brand {
		grid-column: 1;
		min-width: 0;
	}

	[data-gloskin-header="header-2"] .gloskin-ui1-header__zone--end {
		grid-column: 2;
	}
}

/* At phone widths the language selector moves
 * into the navigation drawer so the logo/search/action row cannot be squeezed.
 * The drawer copy remains hidden outside this breakpoint, leaving the desktop
 * and tablet language control unchanged. */
.gloskin-ui1-drawer__language {
	display: none;
}

@media (max-width: 430px) {
	[data-gloskin-header="header-2"] .gloskin-ui1-header__zone--end > .gloskin-ui1-lang-switcher {
		display: none;
	}

	.gloskin-ui1-drawer__language {
		display: grid;
		gap: 8px;
		margin-top: 18px;
		padding: 18px 0 2px;
		border-top: 1px solid color-mix(in srgb, var(--gloskin-border) 82%, transparent);
	}

	.gloskin-ui1-drawer__language-label {
		color: var(--gloskin-muted);
		font-family: var(--gloskin-font-ui);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	.gloskin-ui1-drawer__language .gloskin-ui1-lang-switcher {
		display: block;
		width: 100%;
	}

	.gloskin-ui1-drawer__language .gloskin-ui1-lang-switcher__summary {
		width: 100%;
		min-height: 44px;
		justify-content: space-between;
		padding: 9px 12px;
		border: 1px solid color-mix(in srgb, var(--gloskin-border) 86%, transparent);
		border-radius: 12px;
		background: color-mix(in srgb, var(--gloskin-bg) 92%, var(--gloskin-surface));
	}

	.gloskin-ui1-drawer__language .gloskin-ui1-lang-switcher__menu {
		position: static;
		width: 100%;
		margin-top: 6px;
		box-shadow: 0 10px 24px color-mix(in srgb, var(--gloskin-refresh-black) 7%, transparent);
	}
}

/* Promo section surface ownership stays separate from the
 * poster-card treatment below. Promo data, taxonomy and poster assets remain
 * untouched. */
.gloskin-promo--limited {
	background: var(--gloskin-surface);
}

.gloskin-promo--regular {
	background: var(--gloskin-bg);
}

/* The enhanced Promo slider stage is the stationary card
 * shell and already clips moving slides. Put border/shadow on that shell so the
 * effect stays visible outside the clipping boundary and steady during slide
 * transitions; the inner media keeps only descendant clipping. */
.gloskin-promo .gloskin-promo__carousel {
	width: min(100%, 1180px);
	margin-inline: auto;
	padding-inline: clamp(14px, 3vw, 34px);
}

.gloskin-promo .gloskin-ui1-promo-carousel__stage {
	border: 1px solid color-mix(in srgb, var(--gloskin-border) 88%, transparent);
	border-radius: 24px;
	background: var(--gloskin-promo-blush, #fff5f1);
	box-shadow:
		0 2px 5px color-mix(in srgb, var(--gloskin-refresh-black) 6%, transparent),
		0 18px 42px -12px color-mix(in srgb, var(--gloskin-refresh-black) 15%, transparent),
		0 34px 70px -24px color-mix(in srgb, var(--gloskin-refresh-black) 12%, transparent);
}

.gloskin-promo .gloskin-promo__media {
	overflow: hidden;
	border: 0;
	box-shadow: none;
}

/* Promo keeps the shared carousel controller and ARIA
 * hooks; only the page-specific controls gain a larger touch target and a
 * high-contrast resting/hover presentation. Existing :focus-visible styling
 * from the shared slider owner remains in force. */
.gloskin-promo button.gloskin-ui1-promo-carousel__prev,
.gloskin-promo button.gloskin-ui1-promo-carousel__next {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	border-color: var(--gloskin-refresh-black);
	background: var(--gloskin-refresh-black);
	color: var(--gloskin-inverse);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--gloskin-refresh-black) 18%, transparent);
}

.gloskin-promo button.gloskin-ui1-promo-carousel__prev::before,
.gloskin-promo button.gloskin-ui1-promo-carousel__next::before {
	width: 16px;
	height: 16px;
}

.gloskin-promo button.gloskin-ui1-promo-carousel__prev:is(:hover, :focus-visible),
.gloskin-promo button.gloskin-ui1-promo-carousel__next:is(:hover, :focus-visible) {
	border-color: var(--gloskin-accent);
	background: var(--gloskin-accent);
	color: var(--gloskin-inverse);
}

.gloskin-promo button.gloskin-ui1-promo-carousel__prev:disabled,
.gloskin-promo button.gloskin-ui1-promo-carousel__next:disabled,
.gloskin-promo button.gloskin-ui1-promo-carousel__prev[aria-disabled="true"],
.gloskin-promo button.gloskin-ui1-promo-carousel__next[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
}

@media (max-width: 760px) {
	.gloskin-promo .gloskin-promo__carousel {
		padding-inline: 10px;
	}

	.gloskin-promo button.gloskin-ui1-promo-carousel__prev,
	.gloskin-promo button.gloskin-ui1-promo-carousel__next {
		width: 46px;
		height: 46px;
		min-width: 46px;
		min-height: 46px;
	}

}

/* Mobile form focus safety. iOS/WebKit zooms the visual viewport when a
 * focusable text-entry control computes below 16px. Keep pinch zoom and the
 * page viewport fully user-scalable; normalize only editable controls. The
 * selector intentionally carries body + control specificity so no !important
 * typography patch is required under registry-scoped route loading. */
@media (max-width: 1040px) {
	body.gloskin-ui1 :is(
		input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]),
		select,
		textarea
	) {
		font-size: 16px;
	}
}