/**
 * GothamPeps :: Brand skin
 *
 * Loaded after theme.css and woocommerce.css. The base sheets carry the
 * layout and the colour tokens; this file carries everything that makes the
 * store look like GothamPeps: the blue ticker, the category rail, the black
 * header with its capital-letter menu, the cyan Cormorant hero, blue-framed
 * product cards with navy buttons, and the research-use band.
 *
 * Structure
 *   1. Type and base
 *   2. Buttons
 *   3. Top bar ticker
 *   4. Category rail
 *   5. Header
 *   6. Hero (homepage and page banner)
 *   7. Section headings
 *   8. Product cards
 *   9. Featured showcase
 *   10. Promo (text + video)
 *   11. Offer card, feature boxes, steps
 *   12. Research-use band
 *   13. Footer
 *   14. Forms, notices, misc
 */

/* ==========================================================================
   1. Type and base
   ========================================================================== */

body { background-color: var(--gp-body-bg); }

h1, h2, h3, h4, h5, h6 { color: var(--gp-heading-color); }

::selection { background: var(--gp-primary); color: var(--gp-white); }

.gp-eyebrow {
	color: var(--gp-accent);
	font-family: var(--gp-font-body);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

/*
 * Primary: solid cyan. The live site sets white on cyan, which reads at
 * roughly 2:1; near-black text keeps the same look at a comfortable 11:1.
 */
.gp-btn,
.gp-content .wp-block-button__link {
	gap: .5rem;
	padding: .8125rem 1.5rem;
	border-radius: 3px;
	background: var(--gp-accent);
	color: #04141a;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .06em;
}

.gp-btn:hover {
	background: var(--gp-white);
	color: #04141a;
	box-shadow: 0 0 0 4px rgba(36, 207, 239, .18);
}

.gp-btn svg { width: 1rem; height: 1rem; }

/* Outline: blue hairline, cyan label -- "Explore stacks", "Get discount". */
.gp-btn--outline,
.gp-btn--ghost {
	background: transparent;
	border: 1px solid var(--gp-primary);
	color: var(--gp-accent);
}

.gp-btn--outline:hover,
.gp-btn--ghost:hover {
	background: var(--gp-primary);
	border-color: var(--gp-primary);
	color: var(--gp-white);
	box-shadow: none;
}

/* Pill: rounded outline with an icon -- "View COAs", trust badges. */
.gp-btn--pill {
	padding: .625rem 1.25rem;
	border: 1px solid var(--gp-primary);
	border-radius: 15px;
	background: rgba(0, 0, 0, .35);
	color: var(--gp-accent);
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	backdrop-filter: blur(4px);
}

.gp-btn--pill:hover {
	background: var(--gp-primary);
	border-color: var(--gp-primary);
	color: var(--gp-white);
	box-shadow: none;
}

/* ==========================================================================
   3. Top bar ticker
   ========================================================================== */

.gp-topbar {
	position: relative;
	z-index: var(--gp-z-topbar);
	overflow: hidden;
	background: var(--gp-primary);
	color: var(--gp-white);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

@media (min-width: 640px) {
	.gp-topbar { font-size: .8125rem; }
}

.gp-topbar__ticker {
	display: flex;
	width: max-content;
	animation: gp-ticker var(--gp-ticker-speed, 40s) linear infinite;
}

.gp-topbar:hover .gp-topbar__ticker,
.gp-topbar:focus-within .gp-topbar__ticker { animation-play-state: paused; }

.gp-topbar__track {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-topbar__item {
	display: flex;
	align-items: center;
	padding: .6875rem 2.5rem;
	white-space: nowrap;
}

@keyframes gp-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Reduced motion: a still, centred first message instead of a crawl. */
@media (prefers-reduced-motion: reduce) {
	.gp-topbar__ticker { animation: none; width: 100%; justify-content: center; }
	.gp-topbar__track[aria-hidden="true"],
	.gp-topbar__item + .gp-topbar__item { display: none; }
}

/* ==========================================================================
   4. Category rail
   ========================================================================== */

.gp-rail { display: none; }

@media (min-width: 1200px) {
	body.gp-has-rail { --gp-rail-w: 60px; padding-left: var(--gp-rail-w); }

	.gp-rail {
		position: fixed;
		top: var(--gp-admin-bar);
		bottom: 0;
		left: 0;
		z-index: calc(var(--gp-z-sticky) + 5);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .5rem;
		width: var(--gp-rail-w);
		padding: .5rem 0 1rem;
		background: var(--gp-ink-2);
		border-right: 1px solid rgba(255, 255, 255, .06);
	}
}

.gp-rail__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: .75rem;
	border: 0;
	border-radius: 3px;
	background: var(--gp-primary);
	color: var(--gp-white);
	cursor: pointer;
	transition: background-color var(--gp-speed) var(--gp-ease);
}

.gp-rail__menu:hover { background: var(--gp-primary-hover); }
.gp-rail__menu svg { width: 22px; height: 22px; }

.gp-rail__list {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-rail__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 3px;
	transition: background-color var(--gp-speed) var(--gp-ease);
}

.gp-rail__link:hover,
.gp-rail__link:focus-visible,
.gp-rail__link.gp-is-current { background: rgba(57, 134, 245, .16); }

.gp-rail__link.gp-is-current::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: -6px;
	width: 2px;
	background: var(--gp-primary);
}

.gp-rail__thumb { display: flex; width: 34px; height: 34px; }
.gp-rail__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Name slides out to the right on hover or keyboard focus. */
.gp-rail__label {
	position: absolute;
	top: 50%;
	left: calc(100% + 12px);
	padding: .5rem .875rem;
	background: var(--gp-black);
	border: 1px solid var(--gp-primary);
	border-radius: 3px;
	color: var(--gp-white);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(-6px, -50%);
	transition: opacity .2s var(--gp-ease), transform .2s var(--gp-ease);
}

.gp-rail__link:hover .gp-rail__label,
.gp-rail__link:focus-visible .gp-rail__label { opacity: 1; transform: translate(0, -50%); }

/* ==========================================================================
   5. Header
   ========================================================================== */

.gp-header {
	background: var(--gp-black);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	box-shadow: none;
}

.gp-header--scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .8); }

.gp-header__inner { padding-block: .625rem; }

@media (min-width: 640px) { .gp-header__inner { padding-block: .75rem; } }

.gp-brand__logo { max-height: 52px; width: auto; }

.gp-header--scrolled .gp-brand__logo { max-height: 44px; }

@media (min-width: 1024px) {
	.gp-nav { flex: 1; display: flex; justify-content: center; }
}

.gp-nav__list,
.gp-nav .menu { gap: 1.375rem; }

@media (min-width: 1280px) {
	.gp-nav__list,
	.gp-nav .menu { gap: 1.75rem; }
}

.gp-nav a {
	color: var(--gp-white);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}

@media (min-width: 1280px) { .gp-nav a { font-size: 1rem; } }

.gp-nav a:hover,
.gp-nav .current-menu-item > a,
.gp-nav .current_page_item > a,
.gp-nav .current-menu-ancestor > a,
.gp-nav .current-menu-parent > a {
	color: var(--gp-primary);
	border-bottom: 0;
	padding-bottom: .25rem;
}

/* Dropdowns. */
.gp-nav .sub-menu,
.gp-nav .children {
	background: var(--gp-black);
	border: 1px solid rgba(57, 134, 245, .4);
	border-top: 2px solid var(--gp-primary);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .9);
}

.gp-nav .sub-menu a,
.gp-nav .children a { font-size: .8125rem; letter-spacing: .08em; }

/* Icons. */
.gp-header__actions .gp-icon-btn { color: var(--gp-primary); }
.gp-header__actions .gp-icon-btn:hover { color: var(--gp-accent); }
.gp-header__actions .gp-icon-btn svg { width: 24px; height: 24px; }

.gp-count {
	background: var(--gp-white);
	color: var(--gp-primary-hover);
	font-weight: 700;
}

/* Drawer & overlays on the dark palette. */
.gp-drawer,
.gp-cart-drawer,
.gp-filter-drawer { background: var(--gp-ink); color: var(--gp-body-color); }

.gp-search-overlay { background: rgba(0, 0, 0, .96); }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.gp-hero {
	height: auto;
	min-height: clamp(460px, 62vh, 620px);
	background: var(--gp-black);
}

.gp-hero__inner { padding-block: 3.5rem; }

@media (min-width: 768px) {
	.gp-hero__content { width: 58%; text-align: left; }
	.gp-hero__actions,
	.gp-hero__features { justify-content: flex-start; }
}

.gp-hero__bg { background-position: 70% center; }

/*
 * The photo is dark already; a left-weighted scrim guarantees the copy stays
 * legible whatever image the editor swaps in.
 */
.gp-hero__scrim {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 75%),
		linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 40%);
}

.gp-hero__content { max-width: 40rem; }

.gp-hero__eyebrow {
	margin-bottom: 1rem;
	color: var(--gp-white);
	font-family: var(--gp-font-heading);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

@media (min-width: 768px) { .gp-hero__eyebrow { font-size: 1.125rem; } }

.gp-hero__title {
	margin-bottom: 1.5rem;
	color: var(--gp-accent);
	font-family: var(--gp-font-heading);
	font-size: clamp(2.75rem, 6.2vw, 4.625rem);
	font-weight: 700;
	line-height: .98;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-shadow: 0 0 40px rgba(36, 207, 239, .25);
	overflow-wrap: anywhere;
}

/* Keep the editor's line break at every width; hiding it runs words together. */
.gp-hero__title br { display: inline; }

@media (max-width: 479px) {
	.gp-hero__title { font-size: 2.5rem; }
	.gp-hero--banner .gp-hero__title { font-size: 2.25rem; }
}

.gp-hero__text {
	max-width: 34rem;
	margin-bottom: 0;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .7);
	color: var(--gp-white);
	font-size: .9375rem;
	font-weight: 400;
}

.gp-hero__actions { margin-top: 1.75rem; gap: 1rem; }

.gp-hero__actions .gp-btn--ghost {
	border-radius: 15px;
	text-transform: none;
	letter-spacing: .01em;
	font-weight: 500;
}

/* Trust badges become outline pills. */
.gp-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
	margin-top: 1.25rem;
	padding: 0;
	border: 0;
	background: none;
}

.gp-hero__feature {
	flex-direction: row;
	gap: .5rem;
	padding: .625rem 1.25rem;
	border: 1px solid var(--gp-primary);
	border-radius: 15px;
	background: rgba(0, 0, 0, .35);
	color: var(--gp-accent);
	text-align: left;
	backdrop-filter: blur(4px);
}

.gp-hero__feature-icon { width: auto; height: auto; margin: 0; background: none; border: 0; color: var(--gp-accent); }
.gp-hero__feature-icon svg { width: 1rem; height: 1rem; }
.gp-hero__feature-label { color: var(--gp-accent); font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.gp-hero__feature-label br { display: none; }

/* Page banner: centred title over the hexagon artwork. */
.gp-hero--banner { min-height: clamp(260px, 34vh, 360px); text-align: center; }
.gp-hero--banner .gp-hero__bg { background-position: center; }
.gp-hero--banner .gp-hero__scrim { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 65%); }
.gp-hero--banner .gp-hero__inner { justify-content: center; }
.gp-hero--banner .gp-hero__content { width: 100%; max-width: 48rem; margin-inline: auto; text-align: center; align-items: center; }

.gp-hero--banner .gp-hero__title {
	margin-bottom: 1.25rem;
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .8);
}

.gp-hero--banner .gp-hero__text { margin-inline: auto; border: 0; padding-bottom: 0; }
.gp-hero--banner .gp-hero__actions { justify-content: center; margin-top: 0; }

/* ==========================================================================
   7. Section headings
   ========================================================================== */

.gp-section-head { align-items: center; }

.gp-title {
	color: var(--gp-white);
	font-family: var(--gp-font-heading);
	font-size: clamp(1.875rem, 3.6vw, 2.625rem);
	font-weight: 500;
	line-height: 1.1;
}

.gp-section-head--center .gp-eyebrow { color: var(--gp-primary); letter-spacing: .06em; font-weight: 500; font-size: .9375rem; }

/* "More products" pill. */
.gp-section-head__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	border-radius: 35px;
	background: var(--gp-pill-bg);
	color: var(--gp-pill-text);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	transition: background-color var(--gp-speed) var(--gp-ease), color var(--gp-speed) var(--gp-ease);
}

.gp-section-head__link:hover { background: var(--gp-white); color: var(--gp-primary-hover); }
.gp-section-head__link svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   8. Product cards
   ========================================================================== */

.woocommerce ul.products li.product,
ul.products li.product {
	padding: 1.25rem;
	background: var(--gp-card);
	border: 1px solid var(--gp-primary);
	border-radius: 0;
	text-align: center;
	transition: border-color var(--gp-speed) var(--gp-ease), box-shadow var(--gp-speed) var(--gp-ease), transform var(--gp-speed) var(--gp-ease);
}

ul.products li.product:hover {
	border-color: var(--gp-accent);
	box-shadow: 0 0 0 1px var(--gp-accent), 0 18px 40px -20px rgba(36, 207, 239, .45);
	transform: translateY(-2px);
}

.gp-product__media { background: var(--gp-black); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	color: var(--gp-primary);
	font-family: var(--gp-font-body);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: 0;
}

ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--gp-accent); }

.gp-product__cat { color: var(--gp-muted); }

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	color: var(--gp-primary);
	font-family: var(--gp-font-body);
	font-size: 1rem;
	font-weight: 600;
}

/* Navy "Add to cart". */
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.gp-products .button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: .5rem 1rem;
	border: 0;
	border-radius: 0;
	background: var(--gp-navy);
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: capitalize;
}

.woocommerce ul.products li.product .button:hover,
ul.products li.product .button:hover { background: var(--gp-primary); color: var(--gp-white); }

.woocommerce ul.products li.product .button.loading { opacity: .7; }
.woocommerce ul.products li.product .added_to_cart { color: var(--gp-accent); font-size: .8125rem; }

/* Badges. */
.gp-badge,
.woocommerce span.onsale {
	border-radius: 999px;
	font-family: var(--gp-font-body);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.gp-badge--hot { background: var(--gp-hot); color: var(--gp-white); }
.woocommerce span.onsale { background: var(--gp-accent); color: #04141a; }

/* Hover actions: round light buttons, like the wishlist heart. */
.gp-product__action {
	border: 0;
	border-radius: 50%;
	background: #e9e9e9;
	color: #222;
}

.gp-product__action:hover { background: var(--gp-primary); color: var(--gp-white); }

/* ==========================================================================
   9. Featured showcase
   ========================================================================== */

.gp-showcase {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background: #0b0b0b var(--gp-showcase-bg) center / cover no-repeat;
	isolation: isolate;
}

.gp-showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 60%);
}

.gp-showcase__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.gp-showcase__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 3rem; }
}

.gp-showcase__eyebrow {
	display: block;
	margin-bottom: 1.25rem;
	color: var(--gp-white);
	font-family: var(--gp-font-heading);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.gp-showcase__title {
	margin-bottom: 1.5rem;
	color: var(--gp-white);
	font-family: var(--gp-font-heading);
	font-size: clamp(2rem, 3.4vw, 2.625rem);
	font-weight: 500;
	line-height: 1.1;
}

.gp-showcase__text {
	max-width: 22rem;
	margin-bottom: 1.75rem;
	color: var(--gp-body-color);
	font-size: .875rem;
	line-height: 1.7;
}

.gp-showcase__text strong { color: var(--gp-white); font-weight: 600; }

.gp-showcase__intro .gp-btn--outline { border-radius: 0; }

/* Phones: a swipeable row. From 640px: a grid. */
.gp-showcase__items {
	display: flex;
	gap: 1rem;
	margin-inline: calc(var(--gp-gutter) * -1);
	padding: 0 var(--gp-gutter) .5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gp-showcase__items::-webkit-scrollbar { display: none; }
.gp-showcase__items > * { flex: 0 0 68%; scroll-snap-align: start; }

@media (min-width: 640px) {
	.gp-showcase__items {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 1.25rem;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}
}

.gp-showcase__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.gp-showcase__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--gp-black);
	border: 1px solid rgba(57, 134, 245, .35);
}

.gp-showcase__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--gp-ease);
}

.gp-showcase__item:hover .gp-showcase__media img { transform: scale(1.05); }

.gp-showcase__item-title {
	margin: 0;
	font-family: var(--gp-font-heading);
	font-size: 1.25rem;
	font-weight: 500;
}

.gp-showcase__item-title a { color: var(--gp-white); }
.gp-showcase__item-title a:hover { color: var(--gp-accent); }

/* ==========================================================================
   10. Promo (text + video)
   ========================================================================== */

.gp-promo__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.gp-promo__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; }
	.gp-promo--reverse .gp-promo__media { order: -1; }
}

.gp-promo__eyebrow {
	display: block;
	margin-bottom: 1rem;
	color: var(--gp-accent);
	font-size: .9375rem;
	font-weight: 700;
}

.gp-promo__title {
	margin-bottom: 1.5rem;
	color: var(--gp-white);
	font-family: var(--gp-font-heading);
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);
	font-weight: 500;
	line-height: 1.25;
}

.gp-promo__text { max-width: 34rem; color: var(--gp-body-color); font-size: 1rem; line-height: 1.6; }
.gp-promo__text p:last-child { margin-bottom: 0; }
.gp-promo__body .gp-btn { margin-top: 1.75rem; }

.gp-promo__media {
	overflow: hidden;
	background: #1c1c1c;
	border: 1px solid rgba(255, 255, 255, .06);
}

.gp-promo__video,
.gp-promo__media img {
	display: block;
	width: 100%;
	aspect-ratio: 11 / 10;
	object-fit: cover;
}

/* ==========================================================================
   11. Offer card, feature boxes, steps
   ========================================================================== */

.gp-offer__inner { display: grid; gap: 2.5rem; align-items: center; }

@media (min-width: 900px) {
	.gp-offer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
}

.gp-offer__eyebrow {
	display: block;
	margin-bottom: 1rem;
	color: var(--gp-primary);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.gp-offer__title {
	margin-bottom: 1.25rem;
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-size: clamp(2rem, 3.6vw, 2.75rem);
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
}

.gp-offer__text { max-width: 30rem; color: var(--gp-body-color); font-size: .9375rem; }
.gp-offer__body .gp-btn { margin-top: 1.25rem; border-radius: 0; font-size: .8125rem; }

.gp-offer__visual {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 320px;
	padding: 1.5rem;
	background: #0a1422 var(--gp-offer-bg) right center / cover no-repeat;
}

.gp-offer__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 21rem;
	padding: 1.5rem 1.25rem;
	background: rgba(0, 0, 0, .72);
	border: 1px solid var(--gp-primary);
	text-align: center;
	backdrop-filter: blur(6px);
}

.gp-offer__kicker,
.gp-offer__label { color: var(--gp-body-color); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }

.gp-offer__figure {
	margin: .5rem 0;
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-size: clamp(2rem, 3.4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.01em;
}

.gp-offer__label { padding-bottom: .875rem; border-bottom: 2px solid var(--gp-primary); width: 70%; }
.gp-offer__small { margin: .875rem 0 0; color: var(--gp-muted); font-size: .75rem; line-height: 1.6; }

/* Feature boxes: dark cards with a blue frame. */
.gp-feature-card--card,
.gp-feature-card--center {
	background: linear-gradient(160deg, #0b1a33 0%, #050a14 70%);
	border: 1px solid rgba(57, 134, 245, .45);
	border-radius: 0;
	transition: border-color var(--gp-speed) var(--gp-ease), transform var(--gp-speed) var(--gp-ease);
}

.gp-feature-card--card:hover,
.gp-feature-card--center:hover { border-color: var(--gp-accent); transform: translateY(-2px); }

.gp-feature__icon { color: var(--gp-primary); background: transparent; border: 0; }
.gp-feature__icon svg { width: 2.25rem; height: 2.25rem; }

.gp-feature-card__title {
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.4;
}

.gp-feature-card__text { color: var(--gp-muted); }

/* Steps. */
.gp-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.gp-steps__item {
	position: relative;
	padding: 1.25rem 3rem 1.25rem 1.25rem;
	background: linear-gradient(160deg, #141414, #070707);
	border: 1px solid rgba(255, 255, 255, .35);
	transition: border-color var(--gp-speed) var(--gp-ease);
}

.gp-steps__item:hover { border-color: var(--gp-primary); }

.gp-steps__num {
	display: block;
	margin-bottom: .5rem;
	color: var(--gp-white);
	font-size: 1.25rem;
	font-weight: 500;
}

.gp-steps__title {
	margin: 0 0 .625rem;
	color: var(--gp-white);
	font-family: var(--gp-font-heading);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.gp-steps__text { margin: 0; color: var(--gp-body-color); font-size: .8125rem; line-height: 1.6; }

.gp-steps__arrow {
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 1.375rem;
	height: 1.375rem;
	color: var(--gp-primary);
	transform: translateY(-50%);
}

.gp-steps__cta { margin-top: 2.5rem; text-align: center; }
.gp-steps__cta .gp-btn { border-radius: 0; font-size: .8125rem; }

/* ==========================================================================
   12. Research-use band
   ========================================================================== */

.gp-disclaimer { padding-block: 2.5rem 0; background: var(--gp-body-bg); }

.gp-disclaimer__inner {
	position: relative;
	display: flex;
	gap: 1.25rem;
	padding: 1.75rem 1.5rem;
	background: #121212 var(--gp-disclaimer-bg) center / cover no-repeat;
	border-left: 3px solid var(--gp-primary);
	isolation: isolate;
}

.gp-disclaimer__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 10, 10, .55);
}

@media (min-width: 768px) { .gp-disclaimer__inner { padding: 2rem 2.5rem; } }

.gp-disclaimer__icon { flex: none; width: 1.75rem; height: 1.75rem; color: var(--gp-accent); }

.gp-disclaimer__title {
	margin: 0 0 .75rem;
	color: var(--gp-accent);
	font-family: var(--gp-font-heading);
	font-size: 1.375rem;
	font-weight: 500;
}

.gp-disclaimer__text { margin: 0; max-width: 72rem; color: var(--gp-body-color); font-size: .8125rem; line-height: 1.7; }

/* ==========================================================================
   13. Footer
   ========================================================================== */

.gp-footer { background: var(--gp-footer-bg); color: var(--gp-muted); }

.gp-footer__title {
	color: var(--gp-white);
	font-family: var(--gp-font-heading);
	font-size: 1.3125rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.gp-footer__logo { max-height: 90px; width: auto; margin-bottom: 1.25rem; }
.gp-footer__about { color: var(--gp-body-color); font-size: .9375rem; max-width: 22rem; }

.gp-footer__menu a,
.gp-footer a { color: var(--gp-muted); }

.gp-footer__menu a:hover,
.gp-footer a:hover { color: var(--gp-primary); }

.gp-footer__bottom { border-top-color: rgba(255, 255, 255, .08); color: var(--gp-muted); }

/* ==========================================================================
   14. Forms, notices, misc
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	background-color: var(--gp-surface);
	border-color: rgba(255, 255, 255, .14);
	color: var(--gp-white);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--gp-primary);
	box-shadow: 0 0 0 3px rgba(57, 134, 245, .25);
}

::placeholder { color: #7b8494; }

label { color: var(--gp-white); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error { background: var(--gp-surface); color: var(--gp-body-color); }

/* Inner-page title banner uses the hexagon artwork. */
.gp-page-header {
	background:
		linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
		#0b0b0b url("../images/hexagon-bg.jpg") center / cover no-repeat;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.gp-page-header__title {
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .8);
}

.gp-to-top { background: var(--gp-primary); color: var(--gp-white); }
.gp-to-top:hover { background: var(--gp-accent); color: #04141a; }

/* WooCommerce positions .onsale absolutely; inside the stack it must flow. */
.woocommerce ul.products li.product .gp-badge-stack .onsale,
.gp-badge-stack .onsale {
	position: static;
	min-width: 0;
	min-height: 0;
	margin: 0;
	line-height: 1.6;
}

/* Cormorant defaults to old-style figures; doses and prices read better lining. */
h1, h2, h3, h4, h5, h6,
.gp-title,
.price,
.amount { font-variant-numeric: lining-nums; }

/* Single product ---------------------------------------------------------- */

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--gp-primary);
	font-family: var(--gp-font-body);
	font-size: 1.625rem;
	font-weight: 700;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del { color: var(--gp-muted-light); font-size: 1.125rem; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .stock.in-stock { color: var(--gp-accent); }
.woocommerce div.product .stock.out-of-stock { color: var(--gp-hot); }

.woocommerce div.product form.cart .button,
.woocommerce .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.alt {
	border: 0;
	border-radius: 0;
	background: var(--gp-navy);
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-weight: 700;
	letter-spacing: .08em;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce .single_add_to_cart_button:hover { background: var(--gp-primary); color: var(--gp-white); }

/* Cart, checkout and account buttons follow the same navy. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .checkout-button,
.woocommerce #place_order {
	border-radius: 0;
	background: var(--gp-navy);
	color: var(--gp-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--gp-primary); color: var(--gp-white); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gp-accent); }

/* WooCommerce's own form fields (account, checkout, cart coupon). */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text,
.woocommerce-page form .form-row select,
.woocommerce .input-text,
.select2-container--default .select2-selection--single {
	background-color: var(--gp-surface);
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--gp-white);
}

.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--gp-white); }
.select2-dropdown { background: var(--gp-surface); border-color: rgba(255, 255, 255, .14); color: var(--gp-white); }

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input { filter: invert(1); opacity: .7; }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon { border-color: rgba(57, 134, 245, .4); background: var(--gp-black); }

/* WooCommerce Blocks (block cart and checkout) fields. */
.wc-block-components-text-input input[type],
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input[type],
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-totals-coupon__input input {
	background-color: var(--gp-surface) !important;
	border-color: rgba(255, 255, 255, .16) !important;
	color: var(--gp-white) !important;
}

.wc-block-components-text-input label,
.wc-block-components-combobox .wc-block-components-combobox-control label,
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-components-textarea::placeholder { color: var(--gp-muted) !important; }

.wc-block-components-text-input.is-active input[type],
.wc-block-components-text-input input[type]:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--gp-primary) !important;
	box-shadow: 0 0 0 1px var(--gp-primary) !important;
}

.wc-blocks-components-select__expand { fill: var(--gp-muted); }

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-radio-control__input {
	background: var(--gp-surface) !important;
	border-color: rgba(255, 255, 255, .3) !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--gp-accent); }

.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	color: var(--gp-body-color);
}

.wp-block-woocommerce-checkout-order-summary-block { border-color: rgba(57, 134, 245, .4) !important; }

.wc-block-components-button:not(.is-link).contained,
.wc-block-components-checkout-place-order-button {
	border-radius: 0;
	background: var(--gp-navy);
	color: var(--gp-white);
}

.wc-block-components-button:not(.is-link).contained:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--gp-primary); color: var(--gp-white); }