/* ==========================================================================
   PROFESSIONAL SKINCARE PAGE (/professional-skincare/)
   Same tokens, type scale, buttons and motion language as the homepage.
   ========================================================================== */
.e-con.gfe-ps-hero {
	--padding-top: calc(var(--gfe-header-h) + clamp(46px, 5vw, 84px));
	--padding-bottom: clamp(54px, 5vw, 84px);
	background-color: #62674F;
	background-image:
		radial-gradient(55% 70% at 26% 16%, rgba(129, 134, 107, .12) 0%, rgba(129, 134, 107, 0) 65%),
		linear-gradient(180deg, #63684F 0%, #60654D 55%, #5A5F48 100%);
}
.e-con.gfe-ps-hero > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(34px, 5vw, 84px); align-items: center; }
.e-con.gfe-ps-copy { max-width: 620px; padding: 0; }
.gfe-sec .gfe-ps-h1 .elementor-heading-title { font-size: clamp(38px, 4.3vw, 60px); color: var(--gfe-paper); text-wrap: pretty; }
.gfe-sec .gfe-ps-lead.elementor-widget-text-editor { margin-top: 24px; font-size: 16.5px; line-height: 1.8; color: var(--gfe-paper); max-width: 34em; }
.gfe-ps-hero .e-con.gfe-actions { margin-top: 32px; flex-wrap: wrap; gap: 14px; padding: 0; }
.e-con.gfe-ps-media { position: relative; justify-self: center; width: 100%; max-width: 420px; padding: 0; }

/* Shared page pieces */
.gfe-sec .gfe-ps-h2 .elementor-heading-title { font-size: clamp(30px, 3vw, 42px); color: var(--gfe-ink); text-wrap: pretty; }
.gfe-sec .gfe-ps-h2--light .elementor-heading-title { color: var(--gfe-paper); }
.gfe-sec .gfe-ps-text.elementor-widget-text-editor { margin-top: 20px; font-size: 15.5px; line-height: 1.8; color: #565A4B; max-width: 34em; }
.gfe-sec .gfe-ps-text--light.elementor-widget-text-editor { color: var(--gfe-paper); }
.gfe-ps-frame { position: relative; margin: 0; overflow: hidden; border-radius: 3px; }
.gfe-ps-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 28px 54px -36px rgba(46, 49, 38, .8); }
.e-con.gfe-ps-split > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(34px, 5vw, 78px); align-items: center; }
.e-con.gfe-ps-split .e-con.gfe-actions { margin-top: 28px; padding: 0; }

/* Cream bands */
.e-con.gfe-ps-cream {
	--padding-top: clamp(54px, 5vw, 80px);
	--padding-bottom: clamp(54px, 5vw, 80px);
	background-color: #EBE8DE;
	background-image:
		radial-gradient(50% 80% at 24% 28%, rgba(248, 246, 240, .85) 0%, rgba(248, 246, 240, 0) 70%),
		linear-gradient(180deg, #E4E1D4 0%, #EEEBE2 52%, #E4E1D4 100%);
}
/* Sage bands */
.e-con.gfe-ps-sage {
	--padding-top: clamp(54px, 5vw, 80px);
	--padding-bottom: clamp(54px, 5vw, 80px);
	background-color: #62674F;
	background-image: linear-gradient(180deg, #5F644C 0%, #62674F 46%, #5A5F48 100%);
	border-top: 1px solid rgba(255, 255, 255, .06);
}
.e-con.gfe-ps-center > .e-con-inner { display: flex; flex-direction: column; align-items: center; }
.gfe-ps-center .gfe-eyebrow, .gfe-ps-center .gfe-ps-h2 { text-align: center; }
.gfe-ps-center .gfe-ps-text { text-align: center; margin-left: auto; margin-right: auto; }

/* 2. Category grid */
.e-con.gfe-ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); width: 100%; margin-top: clamp(26px, 2.6vw, 38px); padding: 0; }
.e-con.gfe-ps-cat {
	--padding-top: 24px; --padding-bottom: 26px; --padding-left: 24px; --padding-right: 24px;
	display: flex; flex-direction: column; gap: 0;
	background: rgba(244, 240, 235, .07);
	border: 1px solid rgba(244, 240, 235, .18);
	border-radius: 3px;
	transition: background-color .5s var(--gfe-ease), border-color .5s var(--gfe-ease), transform .5s var(--gfe-ease-out);
}
.e-con.gfe-ps-cat:hover { background: rgba(244, 240, 235, .11); border-color: rgba(242, 231, 205, .45); transform: translateY(-4px); }
.gfe-sec .gfe-ps-cat__title .elementor-heading-title { font-family: var(--gfe-serif); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.15; color: var(--gfe-paper); }
.gfe-sec .gfe-ps-cat__text.elementor-widget-text-editor { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--gfe-paper); }
.gfe-sec .gfe-ps-note.elementor-widget-text-editor { margin-top: clamp(22px, 2vw, 28px); font-size: 13.5px; line-height: 1.7; color: var(--gfe-paper); text-align: center; max-width: 46em; }

/* 3. Steps */
.e-con.gfe-ps-steps { display: flex; flex-direction: column; gap: 0; margin-top: 26px; padding: 0; }
.e-con.gfe-ps-step { --padding-top: 18px; --padding-bottom: 18px; --padding-left: 0px; --padding-right: 0px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(59, 63, 49, .16); }
.gfe-sec .gfe-ps-step__title .elementor-heading-title { display: flex; align-items: baseline; gap: 12px; font-family: var(--gfe-sans); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gfe-ink); }
.gfe-sec .gfe-ps-step__title .elementor-heading-title .gfe-ps-num { font-family: var(--gfe-serif); font-size: 26px; letter-spacing: 0; line-height: 1; color: #8C6F3D; }
.gfe-sec .gfe-ps-step__text.elementor-widget-text-editor { margin-top: 8px; padding-left: 40px; font-size: 14.5px; line-height: 1.7; color: #565A4B; }

/* 4. Shop band */
.e-con.gfe-ps-shop { background-image: linear-gradient(180deg, #585D46 0%, #535844 100%); }
.gfe-ps-shop .e-con.gfe-actions { margin-top: 30px; justify-content: center; padding: 0; }
.gfe-sec .gfe-ps-ext.elementor-widget-text-editor { margin-top: 16px; font-size: 13.5px; line-height: 1.7; color: var(--gfe-paper); text-align: center; }

/* 5. Continue links */
.e-con.gfe-ps-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); width: 100%; margin-top: clamp(24px, 2.4vw, 34px); padding: 0; }
.e-con.gfe-ps-link {
	--padding-top: 24px; --padding-bottom: 24px; --padding-left: 24px; --padding-right: 24px;
	display: flex; flex-direction: column; gap: 0;
	background: rgba(239, 236, 227, .92);
	border-radius: 6px;
	text-decoration: none; color: inherit;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 30px -22px rgba(64, 68, 50, .55);
	transition: transform .55s var(--gfe-ease-out), box-shadow .55s var(--gfe-ease-out), background-color .55s;
}
.e-con.gfe-ps-link:hover, .e-con.gfe-ps-link:focus-visible { transform: translateY(-5px); background: #F2EFE7; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 26px 44px -26px rgba(64, 68, 50, .6); }
.gfe-sec .gfe-ps-link__title .elementor-heading-title { font-family: var(--gfe-serif); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.15; color: var(--gfe-ink); }
.gfe-sec .gfe-ps-link__text.elementor-widget-text-editor { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: #565A4B; }
.gfe-sec .gfe-ps-link__more { margin-top: auto; padding-top: 16px; }
.gfe-sec .gfe-ps-link__more .elementor-heading-title { font-family: var(--gfe-sans); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gfe-ink); }
.e-con.gfe-ps-link:hover .gfe-ps-link__more .elementor-heading-title::after { transform: translateX(5px); }

/* Motion: same reveal language as the homepage */
.gfe-js .gfe-ps-grid > .e-con, .gfe-js .gfe-ps-links > .e-con { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .9s var(--gfe-ease-out), transform 1s var(--gfe-ease-out), background-color .55s, border-color .5s, box-shadow .55s; }
.gfe-js .gfe-sec.is-in .gfe-ps-grid > .e-con, .gfe-js .gfe-sec.is-in .gfe-ps-links > .e-con { opacity: 1; transform: none; }
.gfe-js .gfe-ps-grid > .e-con:nth-child(3n+2), .gfe-js .gfe-ps-links > .e-con:nth-child(2) { transition-delay: .1s; }
.gfe-js .gfe-ps-grid > .e-con:nth-child(3n+3), .gfe-js .gfe-ps-links > .e-con:nth-child(3) { transition-delay: .2s; }
.gfe-js .gfe-ps-links > .e-con:nth-child(4) { transition-delay: .3s; }
.gfe-js .gfe-sec.is-in .gfe-ps-grid > .e-con:hover, .gfe-js .gfe-sec.is-in .gfe-ps-links > .e-con:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
	.gfe-js .gfe-ps-grid > .e-con, .gfe-js .gfe-ps-links > .e-con { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
	.e-con.gfe-ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.gfe-ps-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.e-con.gfe-ps-hero > .e-con-inner, .e-con.gfe-ps-split > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.e-con.gfe-ps-media { max-width: 380px; justify-self: start; }
	.e-con.gfe-ps-split .e-con.gfe-ps-media { justify-self: stretch; max-width: 520px; }
}
@media (max-width: 600px) {
	.e-con.gfe-ps-grid, .e-con.gfe-ps-links { grid-template-columns: minmax(0, 1fr); }
	.gfe-ps-hero .e-con.gfe-actions .elementor-widget-button, .gfe-ps-shop .e-con.gfe-actions .elementor-widget-button { width: 100%; }
	.gfe-ps-hero .gfe-btn .elementor-button, .gfe-ps-shop .gfe-btn .elementor-button, .gfe-ps-hero .gfe-btn-outline .elementor-button { width: 100%; white-space: normal; text-align: center; line-height: 1.4; padding: 14px 22px; }
	.gfe-sec .gfe-ps-step__text.elementor-widget-text-editor { padding-left: 0; }
}

/* External CTA (plain link so it can carry target/rel) + arrow on card labels */
.gfe-ps-cta-w { display: inline-flex; }
.gfe-sec a.gfe-button.gfe-ps-cta { gap: 12px; }
.gfe-ext-icon { width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8h-2V5.4L4.4 13 3 11.6 10.6 4H6z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8h-2V5.4L4.4 13 3 11.6 10.6 4H6z'/%3E%3C/svg%3E") no-repeat center / contain; opacity: .9; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gfe-sec .gfe-ps-link__more .elementor-heading-title::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 9px;
	margin-left: 10px;
	vertical-align: 0;
	background: currentColor;
	-webkit-mask: var(--gfe-arrow) no-repeat center / contain;
	mask: var(--gfe-arrow) no-repeat center / contain;
	transition: transform .45s var(--gfe-ease);
}
@media (max-width: 600px) {
	.gfe-ps-hero .e-con.gfe-actions .gfe-ps-cta-w, .gfe-ps-shop .e-con.gfe-actions .gfe-ps-cta-w { width: 100%; }
	.gfe-sec a.gfe-button.gfe-ps-cta { width: 100%; white-space: normal; text-align: center; line-height: 1.4; padding: 14px 22px; }
}

/* Anchor jump clears the fixed header */
#categories { scroll-margin-top: calc(var(--gfe-header-h) - 10px); }

/* Replaceable media slots: hero portrait, band banner, shop strip */
.gfe-ps-img--hero img { aspect-ratio: 4 / 5; }
.e-con.gfe-ps-banner { width: 100%; margin-top: clamp(24px, 2.4vw, 34px); padding: 0; }
.e-con.gfe-ps-strip { width: min(100%, 760px); margin-top: clamp(22px, 2.2vw, 30px); padding: 0; }
.gfe-ps-banner img, .gfe-ps-strip img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 3px; box-shadow: 0 26px 50px -34px rgba(30, 33, 24, .75); }
.gfe-ps-banner img { aspect-ratio: 3 / 1; }
.gfe-ps-strip img { aspect-ratio: 16 / 6; }
@media (max-width: 767px) {
	.gfe-ps-banner img, .gfe-ps-strip img { aspect-ratio: 2.2 / 1; }
}