/* ==========================================================================
   Xccessories Lab — brand layer over main.css
   The logo's arc runs cyan → blue → violet → orange; that gradient, pill-shaped
   controls and a ring motif are what set this storefront apart. Accent and ink
   still come from the Customizer (inline :root rule after this file).
   1. Tokens         4. Homepage        7. Footer & mobile
   2. Base & buttons 5. Product cards
   3. Header & nav   6. Shop & product
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */
:root {
	--gn-accent: #4a2ee0;
	--gn-ink: #0f0b24;
	--gn-text: #3a3752;
	--gn-muted: #6b6882;
	--gn-line: #e8e6f3;
	--gn-line-strong: #d6d3e8;
	--gn-soft: #f5f4fb;
	--gn-star: #f7a513;
	--gn-radius: 18px;
	--gn-radius-sm: 999px;
	--gn-shadow: 0 14px 34px -16px rgba(40, 24, 120, .28);
	--gn-shadow-lg: 0 26px 60px -22px rgba(40, 24, 120, .4);

	--xl-cyan: #0aa5f0;
	--xl-blue: #1260f5;
	--xl-violet: #4a2ee0;
	--xl-orange: #f7a513;
	--xl-gradient: linear-gradient(90deg, var(--xl-cyan), var(--xl-blue) 32%, var(--xl-violet) 62%, var(--xl-orange));
	--xl-gradient-btn: linear-gradient(100deg, var(--xl-blue), var(--gn-accent));
}

/* 2. Base & buttons ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.005em; }
::selection { background: color-mix(in srgb, var(--xl-orange) 30%, #fff); }

.gn-eyebrow { letter-spacing: .22em; font-weight: 600; }
.gn-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--xl-orange); }
.gn-eyebrow:has(svg)::before { display: none; }
.gn-eyebrow svg { color: var(--xl-orange); }

.gn-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce-page a.button, .woocommerce-page button.button {
	background: var(--xl-gradient-btn); background-size: 140% 100%; background-position: 0 0;
	font-weight: 600; letter-spacing: .01em; transition: background-position .25s, box-shadow .2s, color .15s, border-color .15s;
}
.gn-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
	background: var(--xl-gradient-btn); background-size: 140% 100%; background-position: 100% 0;
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--gn-accent) 70%, transparent);
}
.gn-btn--outline, .gn-btn--outline:hover, .gn-btn--light, .gn-btn--light:hover { background: #fff; box-shadow: none; }
.gn-btn--ghost-light, .gn-btn--ghost-light:hover { background: transparent; box-shadow: none; }
.gn-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); }

.gn-tag { border-radius: 999px; padding: 3px 9px; }
.gn-tag--sale { background: var(--xl-orange); color: var(--gn-ink); }
.gn-tag--hot { background: var(--xl-gradient-btn); }
.gn-badge { background: var(--xl-orange); color: var(--gn-ink); }

/* Section titles carry a short run of the logo gradient, like the rules either side of "LAB". */
.gn-section__head .gn-section__title, .gn-reviews__summary .gn-section__title { position: relative; padding-bottom: 12px; font-weight: 700; }
.gn-section__head .gn-section__title::after, .gn-reviews__summary .gn-section__title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: var(--xl-gradient);
}

input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"],
select, textarea,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border-radius: 12px; }

/* 3. Header & nav -------------------------------------------------------- */
.gn-topbar { background: var(--gn-ink); }
.gn-topbar__msg svg { color: var(--xl-orange); }

.gn-header { border-bottom: 0; box-shadow: 0 1px 0 var(--gn-line); }
.gn-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--xl-gradient); opacity: .9; }
.gn-nav { border-top-color: transparent; }

.gn-search { border-radius: 999px; }
.gn-search .gn-search__cat { border-radius: 999px 0 0 999px; padding-left: 18px; background-color: #fff; }
.gn-search .gn-search__cat option { background: #fff; color: var(--gn-ink); }
.gn-search .gn-search__input { padding-left: 16px; }
.gn-search__btn { width: 40px; border-radius: 50%; background: var(--xl-gradient-btn); }
.gn-search__btn:hover { background: var(--gn-accent); }

.gn-catmenu__toggle { border-radius: 999px; padding: 0 20px; background: var(--gn-ink); }
.gn-catmenu__toggle svg { color: var(--xl-orange); }
.gn-menu a { border-radius: 999px; padding-inline: 14px; font-weight: 600; }
.gn-catmenu__icon, .gn-mnav__icon { border-radius: 50%; background: color-mix(in srgb, var(--gn-accent) 8%, #fff); }

/* 4. Homepage ------------------------------------------------------------ */
/* Hero: deep violet-black with the logo's colours glowing from opposite corners,
   and the product art inside a gradient ring that echoes the logo's arc. */
.gn-hero__main {
	border-radius: 28px;
	background:
		radial-gradient(520px 380px at 8% 0%, color-mix(in srgb, var(--xl-cyan) 38%, transparent), transparent 70%),
		radial-gradient(560px 420px at 70% 45%, color-mix(in srgb, var(--xl-violet) 55%, transparent), transparent 70%),
		radial-gradient(420px 320px at 100% 100%, color-mix(in srgb, var(--xl-orange) 30%, transparent), transparent 70%),
		var(--gn-ink);
}
.gn-hero__main .gn-eyebrow { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.gn-hero__title { font-weight: 700; letter-spacing: -.015em; }
.gn-hero__media { padding: 28px 28px 8px 0; }
.gn-hero__media::before {
	content: ""; position: absolute; width: min(82%, 380px); aspect-ratio: 1; border-radius: 50%;
	padding: 5px; background: conic-gradient(from 200deg, var(--xl-cyan), var(--xl-blue), var(--xl-violet), var(--xl-orange), transparent 78%, var(--xl-cyan));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; opacity: .9;
}
.gn-hero__media img {
	position: relative; max-height: 380px; object-fit: contain; object-position: center;
	-webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
}
.gn-hero__badge { border-radius: 999px; background: var(--xl-orange); color: var(--gn-ink); }
.gn-hero__trust { border-top: 1px solid rgba(255, 255, 255, .08); }
.gn-hero__trust-icon { border: 0; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.gn-hero__trust li:nth-child(1) .gn-hero__trust-icon { color: var(--xl-cyan); }
.gn-hero__trust li:nth-child(2) .gn-hero__trust-icon { color: #7aa2ff; }
.gn-hero__trust li:nth-child(3) .gn-hero__trust-icon { color: #a896ff; }
.gn-hero__trust li:nth-child(4) .gn-hero__trust-icon { color: var(--xl-orange); }

/* Category tiles: round media with a gradient ring. */
.gn-cat { border-color: transparent; background: var(--gn-soft); }
.gn-cat:hover { border-color: transparent; background: #fff; box-shadow: var(--gn-shadow); }
.gn-cat__media, .gn-cat__media--photo {
	width: 80px; height: 80px; border-radius: 50%; border: 2px solid transparent;
	background: linear-gradient(#fff, #fff) padding-box, var(--xl-gradient) border-box;
}
.gn-cat__media--photo img { padding: 10px; }
.gn-cat:hover .gn-cat__media--photo { border-color: transparent; }

.gn-tabs { border-radius: 999px; }
.gn-tab { border-radius: 999px; }
.gn-tab[aria-selected="true"] { background: var(--gn-ink); color: #fff; box-shadow: none; }

.gn-promo {
	border-radius: 28px;
	background:
		radial-gradient(480px 360px at 90% 50%, color-mix(in srgb, var(--xl-orange) 55%, transparent), transparent 70%),
		linear-gradient(120deg, var(--gn-ink) 30%, color-mix(in srgb, var(--xl-violet) 70%, var(--gn-ink)));
}
.gn-countdown__unit { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); }

.gn-brand { border-radius: 999px; min-height: 76px; }
.gn-brand:hover, .gn-budget__item:hover { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--xl-gradient) border-box; }
.gn-budget__item { border-radius: 999px; justify-content: center; }
.gn-budget__item svg { color: var(--xl-orange); }

.gn-why__item { border-radius: 22px; background: #fff; border: 1px solid var(--gn-line); }
.gn-why__icon { border-radius: 50%; background: var(--xl-gradient-btn); color: #fff; box-shadow: none; }
.gn-why__grid li:nth-child(even) .gn-why__icon { background: linear-gradient(120deg, var(--xl-violet), var(--xl-orange)); }

.gn-review { border-radius: 22px; background: var(--gn-soft); border-color: transparent; }
.gn-review__avatar { background: var(--xl-gradient-btn); color: #fff; }

/* 5. Product cards ------------------------------------------------------- */
.woocommerce ul.products li.product.gn-card, .woocommerce-page ul.products li.product.gn-card, ul.products li.product.gn-card {
	border: 1.5px solid var(--gn-line); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.woocommerce ul.products li.product.gn-card:hover {
	border-color: transparent; transform: translateY(-3px);
	background: linear-gradient(#fff, #fff) padding-box, var(--xl-gradient) border-box;
}
.gn-card__media { margin: 6px 6px 0; border-radius: 14px; overflow: hidden; }
.gn-card__brand { color: var(--gn-accent); letter-spacing: .14em; }
.woocommerce ul.products li.product .gn-card__title, .gn-card__title { font-weight: 500; }
.gn-card__price, .woocommerce ul.products li.product .gn-card__price { font-weight: 700; }
.woocommerce ul.products li.product .gn-card__actions .button, .gn-card__actions .button { border-radius: 999px; background: #fff; }
.woocommerce ul.products li.product .gn-card__actions .button:hover { background: var(--xl-gradient-btn); border-color: transparent; }

.gn-rail__btn:hover { color: #fff; border-color: transparent; background: var(--xl-gradient-btn); }

/* 6. Shop & product ------------------------------------------------------ */
.gn-chip.is-active { background: var(--gn-ink); border-color: var(--gn-ink); color: #fff; box-shadow: none; }
.gn-chip.is-active svg { color: var(--xl-orange); }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: 50%; min-width: 42px; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--xl-gradient-btn); border-color: transparent; }

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-viewport { border-radius: 26px; }
.gn-single__brand { color: var(--gn-accent); letter-spacing: .18em; }
.woocommerce div.product form.cart .button { border-radius: 999px; }
.quantity, .gn-wish--inline { border-radius: 999px; }
.gn-swatch { border-radius: 999px; }
.gn-trust li { border-radius: 16px; background: #fff; border: 1px solid var(--gn-line); }
.gn-trust svg { color: var(--xl-orange); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { border-image: var(--xl-gradient) 1; }

.wc-block-components-button:not(.is-link), .wp-block-woocommerce-cart .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
	background: var(--xl-gradient-btn) !important; border-radius: 999px !important;
}
.gn-minicart .woocommerce-mini-cart__buttons .button { border-radius: 999px; }
.gn-minicart .woocommerce-mini-cart__buttons .button.checkout { background: var(--xl-gradient-btn); border-color: transparent; }
.gn-freeship__bar span { background: var(--xl-gradient); }

/* 7. Footer & mobile ----------------------------------------------------- */
.gn-footer { position: relative; }
.gn-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--xl-gradient); }
.gn-footer__bottom { border-top: 1px solid; border-image: var(--xl-gradient) 1; }
.gn-footer__logo { display: inline-block; line-height: 0; }
.gn-footer__logo img { width: auto; height: 58px; max-width: 100%; }
.gn-footer__title { letter-spacing: .12em; text-transform: uppercase; font-size: 13px; font-weight: 600; }
.gn-social a { border-radius: 50%; }
.gn-social a:hover { background: var(--xl-gradient-btn); }
.gn-contact svg { color: var(--xl-orange); }

.gn-toast { border-radius: 999px; }

@media (max-width: 959px) {
	.gn-hero__media { padding: 0 20px; }
	.gn-hero__media::before { width: min(62%, 240px); }
	.gn-hero__media img { max-height: 240px; -webkit-mask-image: none; mask-image: none; }
	.gn-cat__media, .gn-cat__media--photo { width: 64px; height: 64px; }
	.gn-tabbar { border-top: 0; box-shadow: 0 -1px 0 var(--gn-line), 0 -6px 20px -12px rgba(40, 24, 120, .25); }
	.gn-tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--xl-gradient); }
	.gn-footer__logo img { height: 44px; }
}

/* Logo lockup carries the tagline under the name, so it needs more height than a bare wordmark. */
.gn-logo img { height: 58px; }
@media (max-width: 959px) {
	.gn-logo img { height: 46px; }
}

/* Wide screens: give Payment & Delivery enough width for five full-size badges in one row. */
@media (min-width: 1281px) {
	.gn-footer__grid { grid-template-columns: 1.4fr repeat(3, .85fr) 1.45fr; }
}