/**
 * Ugett Store — Flagship design layer (v2).
 *
 * Loads last. Purely additive: it intensifies the signature tactical-neon
 * language established by the hero (angular frames, corner brackets, crimson
 * edge glow, metallic sheen) and propagates it cohesively across shared
 * primitives — buttons, cards, panels, sections — so every page reads as one
 * premium product. No layout/markup dependencies beyond a few opt-in classes.
 */

/* =========================================================================
   1. Signature tactical frame — corner brackets + neon edge glow.
   Reusable: add class .ug-frame to any positioned container, then drop in
   four .ug-frame__corner spans (tl/tr/bl/br). Used on the hero panel.
   ========================================================================= */
.ug-frame { position: relative; }
.ug-frame__corner {
	position: absolute;
	width: 20px;
	height: 20px;
	z-index: 3;
	pointer-events: none;
	border-color: var(--ug-red);
	filter: drop-shadow(0 0 5px var(--ug-red-glow));
	opacity: 0.9;
}
.ug-frame__corner--tl { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.ug-frame__corner--tr { top: 8px; right: 8px; border-top: 2px solid; border-right: 2px solid; }
.ug-frame__corner--bl { bottom: 8px; left: 8px; border-bottom: 2px solid; border-left: 2px solid; }
.ug-frame__corner--br { bottom: 8px; right: 8px; border-bottom: 2px solid; border-right: 2px solid; }

/* Hero panel — upgrade to the full neon-framed tactical container from the
   reference: layered crimson edge glow + slow breathing pulse. */
.ug-hero__card.ug-frame {
	border-color: var(--ug-border-red);
	box-shadow:
		var(--ug-shadow-lg),
		0 0 0 1px rgba(255, 70, 85, 0.18),
		0 0 46px -6px var(--ug-red-glow),
		inset 0 0 34px -18px rgba(255, 70, 85, 0.5);
	animation: ug-frame-pulse 5.5s var(--ug-ease) infinite;
}
.ug-hero__card.ug-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 120% 80% at 90% 0%, rgba(255, 70, 85, 0.10), transparent 55%),
		radial-gradient(ellipse 100% 70% at 0% 100%, rgba(120, 130, 150, 0.05), transparent 55%);
}
@keyframes ug-frame-pulse {
	0%, 100% { box-shadow: var(--ug-shadow-lg), 0 0 0 1px rgba(255, 70, 85, 0.18), 0 0 40px -8px var(--ug-red-glow), inset 0 0 34px -18px rgba(255, 70, 85, 0.5); }
	50%      { box-shadow: var(--ug-shadow-lg), 0 0 0 1px rgba(255, 70, 85, 0.30), 0 0 62px -4px var(--ug-red-glow), inset 0 0 40px -14px rgba(255, 70, 85, 0.65); }
}

/* =========================================================================
   2. Button system — complete the variant set + premium interactions.
   ========================================================================= */

/* Focus ring that matches the crimson identity (keyboard users). */
.ug-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ug-black), 0 0 0 4px var(--ug-red), 0 8px 26px var(--ug-red-glow);
}

/* Primary — add a light sheen that sweeps across on hover. */
.ug-btn--primary { position: relative; overflow: hidden; }
.ug-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -140%;
	width: 55%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: skewX(-18deg);
	transition: left var(--ug-dur-slow) var(--ug-ease);
	pointer-events: none;
}
.ug-btn--primary:hover::after { left: 140%; }

/* Secondary — metallic gunmetal fill, subtle top sheen. */
.ug-btn--secondary {
	background: linear-gradient(160deg, var(--ug-surface-2), var(--ug-gunmetal));
	border-color: var(--ug-border-strong);
	color: var(--ug-text);
}
.ug-btn--secondary:hover {
	border-color: var(--ug-border-red);
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Danger — solid deep crimson for destructive actions. */
.ug-btn--danger {
	background: linear-gradient(135deg, var(--ug-red-deep), #a3212d);
	color: #fff;
	border-color: transparent;
}
.ug-btn--danger:hover { box-shadow: 0 10px 30px var(--ug-red-glow); color: #fff; }

/* Ghost/outline gain a soft glow on hover for consistency with primary. */
.ug-btn--ghost:hover,
.ug-btn--outline:hover { box-shadow: 0 6px 20px rgba(255, 70, 85, 0.15); }

/* =========================================================================
   3. Section headings — tactical accent for a consistent, designed rhythm.
   ========================================================================= */
.ug-section__label,
.ug-kicker {
	position: relative;
	padding-left: 16px;
}
.ug-section__label::before,
.ug-kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 9px;
	height: 9px;
	transform: translateY(-50%) rotate(45deg);
	background: var(--ug-red);
	box-shadow: 0 0 10px var(--ug-red-glow);
}
/* Centered section heads keep the diamond but centered above the label. */
.ug-section__head--center .ug-section__label { padding-left: 0; padding-top: 18px; }
.ug-section__head--center .ug-section__label::before { left: 50%; top: 0; transform: translateX(-50%) rotate(45deg); }

/* =========================================================================
   4. Card cohesion — one premium hover language across every card family.
   Adds a soft crimson lift-glow + a thin metallic top sheen. Additive:
   existing per-card accents (e.g. product card top bar) still apply.
   ========================================================================= */
.ug-cat-card,
.ug-cat-tile,
.ug-benefit,
.ug-step,
.ug-review { position: relative; overflow: hidden; }

.ug-cat-card::after,
.ug-cat-tile::after,
.ug-benefit::after,
.ug-step::after,
.ug-review::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	pointer-events: none;
}

.ug-cat-card:hover,
.ug-cat-tile:hover,
.ug-benefit:hover,
.ug-step:hover {
	box-shadow: var(--ug-shadow), 0 0 0 1px rgba(255, 70, 85, 0.08), 0 0 32px -12px var(--ug-red-glow);
}

/* Steps — make the outlined index number feel like a HUD readout. */
.ug-step:hover .ug-step__num {
	-webkit-text-stroke-color: var(--ug-border-red);
	color: rgba(255, 70, 85, 0.06);
}

/* =========================================================================
   5. Panels — apply the framed, glowing surface to commerce + account.
   ========================================================================= */

/* Checkout order review + cart totals: add the signature crimson top edge
   and a soft outer glow so the money panel reads as the hero of checkout. */
body.ug-store .woocommerce-checkout-review-order,
body.ug-store #order_review.woocommerce-checkout-review-order,
body.ug-store .cart_totals {
	position: relative;
	overflow: hidden;
	box-shadow: var(--ug-shadow), 0 0 40px -18px var(--ug-red-glow);
}
body.ug-store .woocommerce-checkout-review-order::before,
body.ug-store .cart_totals::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ug-red), transparent 70%);
	box-shadow: 0 0 14px var(--ug-red-glow);
	pointer-events: none;
}

/* Account dashboard cards / address boxes / order table wrapper: unify with
   the premium surface + hover glow. */
body.ug-store .woocommerce-MyAccount-content,
body.ug-store .woocommerce-Address .woocommerce-Address-title,
body.ug-store .woocommerce-MyAccount-navigation {
	position: relative;
}
body.ug-store .woocommerce-MyAccount-navigation ul li.is-active a,
body.ug-store .woocommerce-MyAccount-navigation ul li:hover a {
	box-shadow: inset 3px 0 0 var(--ug-red), 0 0 24px -14px var(--ug-red-glow);
}

/* Product tabs — active tab underline gains a soft crimson glow. */
body.ug-store .woocommerce-tabs ul.tabs li.active a,
body.ug-store .woocommerce-tabs ul.tabs li a:hover {
	box-shadow: 0 2px 12px -4px var(--ug-red-glow);
}

/* Empty states — turn the dashed box into a soft glowing tactical panel. */
.ug-empty-state {
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 70, 85, 0.06), transparent 60%),
		linear-gradient(180deg, var(--ug-charcoal), transparent);
	box-shadow: 0 0 48px -22px var(--ug-red-glow);
}

/* Cart drawer panel — crimson leading edge + faint inner glow. */
.ug-cart-drawer__panel {
	box-shadow: -24px 0 70px rgba(0, 0, 0, 0.6), inset 3px 0 0 -1px rgba(255, 70, 85, 0.35);
}

/* =========================================================================
   6. Toasts — align the accent bar into the crimson-glow family.
   ========================================================================= */
.ug-toast { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ug-toast--success { box-shadow: var(--ug-shadow), 0 0 24px -14px rgba(53, 208, 127, 0.5); }
.ug-toast--error { box-shadow: var(--ug-shadow), 0 0 24px -12px var(--ug-red-glow); }

/* =========================================================================
   8. AGGRESSIVE NEON EDGES — global black + neon-red HUD skin.
   Angular notched corners (top-left + bottom-right, matching the buttons),
   red-tinted edges and a neon glow that follows the clipped silhouette, so the
   WHOLE store — cards, panels, inputs, controls — reads like the hero.
   ========================================================================= */
:root {
	--ug-edge: 12px;      /* card / panel corner cut */
	--ug-edge-sm: 8px;    /* input / small control corner cut */
}

/* ---- Cards: angular notch + red edge + silhouette glow on hover ---- */
.ug-product-card,
.ug-cat-card,
.ug-cat-tile,
.ug-benefit,
.ug-step,
.ug-review {
	clip-path: polygon(var(--ug-edge) 0, 100% 0, 100% calc(100% - var(--ug-edge)), calc(100% - var(--ug-edge)) 100%, 0 100%, 0 var(--ug-edge));
	border-color: rgba(255, 70, 85, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 70, 85, 0.3);
}
/* box-shadow is clipped by clip-path, so use filter for the outer neon glow. */
.ug-product-card:hover,
.ug-product-card:focus-within,
.ug-cat-card:hover,
.ug-cat-tile:hover,
.ug-benefit:hover,
.ug-step:hover,
.ug-review:hover {
	border-color: var(--ug-red);
	box-shadow: inset 0 0 0 1px rgba(255, 70, 85, 0.5);
	filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px var(--ug-red-glow));
}
/* List-view product cards keep the notch but the media divider follows suit. */
.ug-product-grid--list .ug-product-card { clip-path: polygon(var(--ug-edge) 0, 100% 0, 100% calc(100% - var(--ug-edge)), calc(100% - var(--ug-edge)) 100%, 0 100%, 0 var(--ug-edge)); }

/* ---- Panels: same angular language on every content surface ---- */
body.ug-store .woocommerce-checkout-review-order,
body.ug-store #order_review.woocommerce-checkout-review-order,
body.ug-store .cart_totals,
body.ug-store .woocommerce-MyAccount-content,
body.ug-store #customer_details .woocommerce-billing-fields,
body.ug-store #customer_details .woocommerce-shipping-fields,
body.ug-store #customer_details .woocommerce-additional-fields,
body.ug-store form.checkout_coupon,
body.ug-store form.login,
.ug-empty-state {
	clip-path: polygon(var(--ug-edge) 0, 100% 0, 100% calc(100% - var(--ug-edge)), calc(100% - var(--ug-edge)) 100%, 0 100%, 0 var(--ug-edge));
	border: 1px solid var(--ug-border-red);
}

/* ---- Inputs & selects: angular corners + red neon border + inner glow ---- */
.ug-form input[type="text"],
.ug-form input[type="email"],
.ug-form input[type="password"],
.ug-form input[type="search"],
.ug-form input[type="tel"],
.ug-form input[type="number"],
.ug-form textarea,
.ug-newsletter__form input,
body.ug-store .woocommerce input[type="text"],
body.ug-store .woocommerce input[type="email"],
body.ug-store .woocommerce input[type="tel"],
body.ug-store .woocommerce input[type="password"],
body.ug-store .woocommerce input[type="search"],
body.ug-store .woocommerce input[type="url"],
body.ug-store .woocommerce input[type="number"],
body.ug-store .woocommerce textarea,
body.ug-store .woocommerce select,
body.ug-store .woocommerce-ordering select,
body.ug-store select.orderby {
	clip-path: polygon(var(--ug-edge-sm) 0, 100% 0, 100% calc(100% - var(--ug-edge-sm)), calc(100% - var(--ug-edge-sm)) 100%, 0 100%, 0 var(--ug-edge-sm));
	border: 1px solid rgba(255, 70, 85, 0.35);
	box-shadow: inset 0 0 14px -10px var(--ug-red-glow);
}
.ug-form input:focus,
.ug-form textarea:focus,
.ug-newsletter__form input:focus,
body.ug-store .woocommerce input:focus,
body.ug-store .woocommerce textarea:focus,
body.ug-store .woocommerce select:focus,
body.ug-store .woocommerce-ordering select:focus,
body.ug-store select.orderby:focus {
	border-color: var(--ug-red);
	box-shadow: 0 0 0 1px var(--ug-red), 0 0 20px -6px var(--ug-red-glow);
}

/* ---- Buttons: red neon edges at rest on the outline/ghost/secondary set ---- */
.ug-btn--ghost,
.ug-btn--outline,
.ug-btn--secondary {
	border-color: var(--ug-border-red);
	box-shadow: 0 0 16px -8px var(--ug-red-glow);
}
.ug-btn--ghost:hover,
.ug-btn--outline:hover,
.ug-btn--secondary:hover {
	border-color: var(--ug-red);
	box-shadow: 0 0 22px -4px var(--ug-red-glow);
}

/* ---- Pagination & qty controls: matching notched corners ---- */
body.ug-store .woocommerce-pagination .page-numbers li a,
body.ug-store .woocommerce-pagination .page-numbers li span,
.ug-wishlist-btn,
.ug-qty {
	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
body.ug-store .woocommerce-pagination .page-numbers li a { border-color: var(--ug-border-red); }

/* ---- Icons: give the standalone icon tiles the neon edge + glow ---- */
.ug-wishlist-btn { border-color: var(--ug-border-red); }
.ug-stars__star.is-filled { filter: drop-shadow(0 0 5px var(--ug-red-glow)); }

/* =========================================================================
   9. GLASS TOUCH — frosted translucent surfaces on the overlays / floating
   panels that sit above the ambient background, so the blur actually reads.
   Paired with a clear neon-red edge for the tactical identity.
   ========================================================================= */

/* Cart drawer — frosted glass panel with a clear crimson leading edge. */
.ug-cart-drawer__panel {
	background: linear-gradient(160deg, rgba(23, 26, 31, 0.82), rgba(11, 13, 18, 0.9));
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border-left: 1px solid rgba(255, 70, 85, 0.5);
	box-shadow: -24px 0 70px rgba(0, 0, 0, 0.6), inset 2px 0 0 -1px rgba(255, 70, 85, 0.55);
}
.ug-cart-drawer__overlay { background: rgba(3, 3, 4, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Checkout review + cart totals — glassy money panel with a clear neon edge. */
body.ug-store .woocommerce-checkout-review-order,
body.ug-store #order_review.woocommerce-checkout-review-order,
body.ug-store .cart_totals {
	background: linear-gradient(160deg, rgba(23, 26, 31, 0.62), rgba(11, 13, 18, 0.72)) !important;
	-webkit-backdrop-filter: blur(14px) saturate(135%);
	backdrop-filter: blur(14px) saturate(135%);
	border-color: rgba(255, 70, 85, 0.5);
	box-shadow: var(--ug-shadow), 0 0 46px -16px var(--ug-red-glow);
}

/* Hero product card — a touch more frost + a clearer neon frame. */
.ug-hero__card.ug-frame {
	background: linear-gradient(158deg, rgba(29, 33, 39, 0.72), rgba(11, 13, 18, 0.82));
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-color: rgba(255, 70, 85, 0.55);
}
.ug-frame__corner { opacity: 1; border-width: 2.5px; filter: drop-shadow(0 0 7px var(--ug-red)); }

/* "IN STOCK" style green stays; product icon tiles get a light glass sheen. */
.ug-hero__card-icons .ug-cat-icon {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Header — keep the frosted bar, make the scrolled state read as clean glass. */
.ug-header {
	background: rgba(10, 11, 13, 0.55);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
}

/* Empty states — frosted tactical panel. */
.ug-empty-state {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Clearer neon on the outline/ghost button edges. */
.ug-btn--ghost,
.ug-btn--outline,
.ug-btn--secondary { border-color: rgba(255, 70, 85, 0.55); }

/* =========================================================================
   10. Motion hygiene — respect reduced-motion for the added animations.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.ug-hero__card.ug-frame { animation: none; }
	.ug-btn--primary::after { display: none; }
}