/* =============================================================================
   UGL OZ Replica — DESIGN TOKENS
   Every value below is a MEASURED computed style from ugloz.is, captured over CDP.
   Sources: scrape/source-cdp/design-tokens.json, shell.json, details.json,
            details2.json, css/wp-content__themes__inbio__assets__css__style.css
   Do not "improve" a value here — it is the source contract.
   ========================================================================== */

:root {
	/* --- Palette (InBio custom properties as overridden on ugloz.is) --------- */
	--ugloz-primary:            #dd9933;   /* rgb(221,153,51)  buttons, badges, pagination */
	--ugloz-subtitle:           #dd9933;
	--ugloz-e-text:             #c48f20;   /* rgb(196,143,32)  feature circles, banner, tagline */
	--ugloz-accent:             #ff9900;   /* rgb(255,153,0)   hero span, "IMPORTANT:" */
	--ugloz-warn-border:        #ff8f00;   /* rgb(255,143,0)   impersonator notice border */
	--ugloz-heading:            #c4cfde;   /* rgb(196,207,222) headings, nav, card titles */
	--ugloz-lightn:             #c4cfde;
	--ugloz-body:               #878e99;   /* rgb(135,142,153) body copy, breadcrumbs */
	--ugloz-white:              #ffffff;
	--ugloz-white-75:           rgba(255, 255, 255, 0.75);
	--ugloz-price:              #757589;   /* rgb(117,117,137) card price */

	--ugloz-bg:                 #212428;   /* rgb(33,36,40)    page background */
	--ugloz-bg-2:               #212428;
	--ugloz-bar-bg:             #1f2125;   /* rgb(31,33,37)    page-title / breadcrumb bar */
	--ugloz-tertiary:           #0d1013;
	--ugloz-dark:               #1a1d23;
	--ugloz-darker:             #1e1f21;
	--ugloz-drawer-bg:          #191b1e;   /* rgb(25,27,30)    mobile drawer panel */
	--ugloz-scrim:              rgba(0, 0, 0, 0.8);
	--ugloz-separator:          #878e9982;
	--ugloz-border:             hsla(0, 0%, 100%, 0.2);

	/* Neumorphic surfaces (InBio signature) */
	--ugloz-surface:            linear-gradient(145deg, #1e2024, #23272b);
	--ugloz-surface-2:          linear-gradient(to right bottom, #212428, #16181c);
	--ugloz-shadow-1:           10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
	--ugloz-shadow-2:           inset 21px 21px 19px #181a1d, inset -21px -21px 19px #202225;
	--ugloz-inner-shadow:       1px 4px 2px -3px rgba(0, 0, 0, 0.7) inset,
	                            -1px -3px 3px -2px rgba(255, 255, 255, 0.2) inset;

	/* --- Typography ---------------------------------------------------------- */
	--ugloz-font-primary:       "Poppins", sans-serif;    /* body, prices, buttons */
	--ugloz-font-secondary:     "Montserrat", sans-serif; /* headings, nav, card titles */

	--ugloz-fs-body:            16px;
	--ugloz-lh-body:            30.4px;
	--ugloz-fs-b1:              18px;
	--ugloz-fs-b2:              22px;
	--ugloz-fs-b3:              14px;

	--ugloz-h1:                 44px;
	--ugloz-h2:                 36px;
	--ugloz-h3:                 30px;
	--ugloz-h4:                 24px;
	--ugloz-h5:                 18px;
	--ugloz-h6:                 16px;

	/* Homepage hero H1 overrides --h1 (measured 60/62, Montserrat 700, #fff) */
	--ugloz-hero-h1:            60px;
	--ugloz-hero-h1-lh:         62px;

	--ugloz-w-light:            300;
	--ugloz-w-regular:          400;
	--ugloz-w-medium:           500;
	--ugloz-w-semibold:         600;
	--ugloz-w-bold:             700;
	--ugloz-w-extrabold:        800;

	/* --- Spacing / radius / motion ------------------------------------------ */
	--ugloz-container:          1140px;   /* bootstrap container at >=1200 */
	--ugloz-section-gap:        100px;    /* .rn-section-gap padding: 100px 0 */
	--ugloz-section-gap-sm:     80px;     /* <=991px */
	--ugloz-e-con-pad-x:        10px;     /* Elementor .e-con padding: 0 10px */
	--ugloz-e-con-pad-y:        10px;     /* Elementor .e-con-inner padding: 10px 0 */
	--ugloz-widget-gap:         20px;     /* Elementor kit widget spacing */
	--ugloz-header-pad:         20px 45px;
	--ugloz-header-pad-sticky:  14px 45px;

	--ugloz-radius-btn:         6px;
	--ugloz-radius-badge:       4px;
	--ugloz-radius-thumb:       10px;
	--ugloz-radius-menu:        4px;
	--ugloz-radius-sm:          3px;

	--ugloz-transition:         0.4s;
	--ugloz-border-width:       2px;
}

/* --- Self-hosted Feather icon font (lifted from the source theme) ----------- */
@font-face {
	font-family: "feather";
	src: url("../fonts/Feather.woff") format("woff"),
	     url("../fonts/Feather.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="feather-"],
[class*=" feather-"] {
	font-family: "feather" !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Only the glyphs this build actually uses — codepoints from
   scrape/source-cdp/css/wp-content__plugins__rainbow-elements__assets__css__feather.css */
.feather-shopping-cart:before { content: "\e9ca"; }
.feather-menu:before          { content: "\e98f"; }
.feather-x:before             { content: "\ea02"; }
.feather-plus:before          { content: "\e9b1"; }
.feather-minus:before         { content: "\e996"; }
.feather-arrow-right:before   { content: "\e912"; }
.feather-search:before        { content: "\e9c1"; }
.feather-mail:before          { content: "\e98a"; }
.feather-chevron-down:before  { content: "\e92e"; }

/* =============================================================================
   PRIMITIVES — buttons / badges / cards
   Shared with the Wave-2 shop, product and woo agents. Extend, don't fork.
   ========================================================================== */

/* Solid gold button: Poppins 13/500 uppercase, ls .2px, 2px solid #dd9933, r6 */
.ugloz-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-block;
	font-family: var(--ugloz-font-primary);
	font-size: 13px;
	font-weight: var(--ugloz-w-medium);
	line-height: 13px;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ugloz-white);
	background: var(--ugloz-primary);
	border: var(--ugloz-border-width) solid var(--ugloz-primary);
	border-radius: var(--ugloz-radius-btn);
	padding: 11px 15px;
	text-decoration: none;
	transition: all 0.45s cubic-bezier(0.23, 0.88, 0.34, 0.99);
	cursor: pointer;
}

.ugloz-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--ugloz-primary);
	color: var(--ugloz-white);
	margin-top: -3px;
}

/* SALE! badge — measured: bg #dd9933, #fff, 14px, r4, absolute top:15px right:15px
 *
 * SPECIFICITY IS LOAD-BEARING (fixed 2026-08-02, Wave 1 audit).
 * WooCommerce ships `.woocommerce ul.products li.product .onsale` at (0,4,2) with a negative
 * margin. A bare `.woocommerce span.onsale` is only (0,2,1), so Woo won and the badge rendered
 * with `margin: -7px -7px 0 0` — overhanging the thumbnail, clipped, and it was the SOLE cause
 * of a 7px horizontal overflow at 390 on /shop/ and /product-category/.
 * The loop selector below is (0,4,3) so it beats Woo without needing !important.
 * The PDP-scoped badge (`.woocommerce div.product span.onsale`) belongs to product.css —
 * do not duplicate it here.
 */
.ugloz-badge,
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale {
	position: absolute;
	top: 15px;
	right: 15px;
	left: auto;
	z-index: 6;
	margin: 0;
	display: block;
	min-height: 20px;
	line-height: 25px;
	padding: 0 10px;
	font-family: var(--ugloz-font-primary);
	font-size: 14px;
	font-weight: var(--ugloz-w-regular);
	text-transform: uppercase;
	color: var(--ugloz-white);
	background-color: var(--ugloz-primary);
	border-radius: var(--ugloz-radius-badge);
}

/* Neumorphic circular control (mini-cart, hamburger, drawer close) */
.ugloz-circle {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: 100%;
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	text-align: center;
}

.ugloz-circle::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--ugloz-surface-2);
	box-shadow: var(--ugloz-shadow-1);
	opacity: 1;
	z-index: -1;
	transition: var(--ugloz-transition);
}

.ugloz-circle:hover::after {
	transform: scale(1.1);
}