/* =============================================================================
   UGL OZ Replica — HOMEPAGE
   Sections reproduced in SOURCE ORDER (RECON §8 / scrape/source-cdp/home-sections.json).
   The source is Elementor Pro 4 flexbox containers; this is a classic PHP rebuild
   of the same geometry, so the container model is replicated literally:

     .ugloz-con        = Elementor .e-con        -> padding: 0 10px
     .ugloz-con__inner = Elementor .e-con-inner  -> max-width 1140px, margin 0 auto,
                                                    padding-block 10px
     widget bottom gap = Elementor kit widget spacing = 20px

   Verified section heights at 1440 (home-sections.json `height`):
     0 warning 105 · 1 hero 540 · 2 search+Oils grid 2695 · 3 heading 50
     4 orals grid 1620 · 5 heading 50 · 6 sarms grid 2084 · 7 hidden heading 50
     8 empty spacer 20 · 9 feature icons 201 · 10 contact strip 391 · 11 tagline 71
   ========================================================================== */

.ugloz-home { }

.ugloz-con {
	padding: 0 var(--ugloz-e-con-pad-x);
	display: flex;
	flex-direction: column;
	width: 100%;
}
.ugloz-con__inner {
	max-width: var(--ugloz-container);
	width: 100%;
	margin: 0 auto;
	padding-block: var(--ugloz-e-con-pad-y);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
/* two-column rows (hero, contact strip) */
.ugloz-con--row > .ugloz-con__inner {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0;
}
/* Elementor child containers (.e-con-full) carry the kit's default 10px padding
   on all four sides. Measured: the hero copy starts at x=160 while the product
   grid below it starts at x=150 — that 10px is this padding, and it is also what
   makes the hero description wrap to 5 lines rather than 4. */
.ugloz-col {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px;
}
@media (min-width: 768px) {
	.ugloz-col--half { width: 50%; }
	.ugloz-col--third { width: 33.3333%; }
}

/* Elementor widget rhythm: every widget but the last in its container gets 20px */
.ugloz-widget { margin: 0 0 var(--ugloz-widget-gap); }
.ugloz-con__inner > .ugloz-widget:last-child,
.ugloz-col > .ugloz-widget:last-child { margin-bottom: 0; }

/* ---------- 0 · impersonator warning --------------------------------------- */
/* Measured: 2px solid #ff8f00, padding 10px, centred, "IMPORTANT:" #ff9900 bold,
   rest #ffffff, plus a yellow-green glow box-shadow straight off the source. */
.ugloz-warning {
	padding: 10px;
	border: 2px solid var(--ugloz-warn-border);
	box-shadow: 0px 0px 30px 10px rgba(227, 255, 24, 0.5);
	color: var(--ugloz-white);
}
.ugloz-warning p {
	text-align: center;
	color: var(--ugloz-white);
	margin: 0;
	line-height: 30.4px;
}
.ugloz-warning strong { color: var(--ugloz-accent); }

/* ---------- 1 · hero -------------------------------------------------------- */
/* InBio: span.subtitle { display:block; margin-bottom:20px }. On the source the
   rendered gap from the eyebrow box to the H1 box measures 30.4px, because the
   wrapping <p> contributes a strut on top of that margin. The padding below
   reproduces the extra 10.4px without relying on margin collapsing. */
.ugloz-hero__eyebrow-wrap { margin: 0; padding-bottom: 10.4px; }
.ugloz-hero__eyebrow {
	display: block;
	font-family: var(--ugloz-font-secondary);
	font-size: 14px;
	font-weight: var(--ugloz-w-medium);
	line-height: 26.6px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ugloz-heading);
	margin: 0 0 20px;
}
.ugloz-hero__title {
	font-family: var(--ugloz-font-secondary);
	font-size: var(--ugloz-hero-h1);
	line-height: var(--ugloz-hero-h1-lh);
	font-weight: var(--ugloz-w-bold);
	color: var(--ugloz-white);
	margin: 0 0 22px;
	letter-spacing: normal;
	text-transform: none;
}
.ugloz-hero__title span { color: var(--ugloz-accent); }
.ugloz-hero__desc {
	color: var(--ugloz-white);
	font-family: var(--ugloz-font-primary);
	font-size: 16px;
	line-height: 30.4px;
	margin: 0;
}
/* Top-aligned in its column (measured: the source's image sits at the column's
   content top at 820 and 390), horizontally centred. */
.ugloz-hero__media { align-items: center; justify-content: flex-start; }
.ugloz-hero__media img { max-width: 500px; width: 100%; height: auto; }

/* Responsive hero — MEASURED on the source at 820 and 390, not guessed:
     820 : H1 50px/60px · eyebrow letter-spacing 3px · description 30px/40px mb
           left column is a FIXED 371px (Elementor --width), right column flexes
           and the slogan image fills it (279px)
     390 : H1 32px/40px · eyebrow letter-spacing 1px · columns stack
           eyebrow gap drops from 30.4px to 20px · image 320px (100%)          */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.ugloz-hero .ugloz-col--half:first-child  { width: 371px; flex: 0 0 371px; }
	.ugloz-hero .ugloz-col--half:last-child   { width: auto;  flex: 1 1 0; }
}
@media only screen and (max-width: 1199px) {
	.ugloz-hero__title { font-size: 50px; line-height: 60px; }
}
@media only screen and (max-width: 1024px) {
	.ugloz-hero__desc { line-height: 30px; margin-bottom: 40px; }
}
@media only screen and (max-width: 767px) {
	.ugloz-hero__title { font-size: 32px; line-height: 40px; }
	.ugloz-hero__eyebrow { letter-spacing: 1px; }
	.ugloz-hero__eyebrow-wrap { padding-bottom: 0; }
}

/* ---------- 2 · search + section headings ---------------------------------- */
.ugloz-section-heading {
	font-family: var(--ugloz-font-secondary);
	font-size: 30px;
	font-weight: var(--ugloz-w-bold);
	line-height: 30px;
	color: var(--ugloz-heading);
	text-align: left;
	text-transform: none;
	margin: 0 0 var(--ugloz-widget-gap);
}
/* Measured heading-widget heights: 1440 -> 30px, 820 -> 28px, 390 -> 24px. */
@media only screen and (max-width: 1024px) {
	.ugloz-section-heading { font-size: 28px; line-height: 28px; }
}
@media only screen and (max-width: 767px) {
	.ugloz-section-heading { font-size: 24px; line-height: 24px; }
}

/* 7 · the "Pharma Meds" heading the source hides with visibility:hidden.
   It still occupies 50px of the page. Replicate-don't-fix. */
.ugloz-section-heading--hidden { visibility: hidden; margin-bottom: 0; }

/* 8 · the empty Elementor container: 20px of nothing (e-con-inner padding). */
.ugloz-spacer > .ugloz-con__inner { min-height: 20px; }

/* ---------- 9 · three feature icons ---------------------------------------- */
/* Measured: white 50px FA glyph inside a 100x100 circle, bg #c48f20; captions
   16px #878e99 centred. The source lays this out as SIX 33.33% children that
   wrap: three icons on row 1, three captions on row 2. */
.ugloz-features > .ugloz-con__inner {
	flex-direction: row;
	flex-wrap: wrap;
}
/* Elementor's .elementor-icon-wrapper is a full-width block with a normal line
   box, so the inline-flex 100px circle inside it sits on the baseline and the
   widget measures 110.4px, not 100 — which is what makes the source's feature
   container 200.8px tall and opens a 39px gap down to the caption.
   Measured on the source over CDP. Do NOT centre with align-items here: that
   shrink-wraps the widget and the baseline gap disappears. */
.ugloz-features__icon .ugloz-widget {
	width: 100%;
	line-height: 30.4px;
	text-align: center;
	/* 100px circle + 10.4px = the source's measured 110.4px wrapper height. */
	padding-bottom: 10.4px;
}
.ugloz-features__icon .ugloz-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: var(--ugloz-e-text);
	color: var(--ugloz-white);
}
.ugloz-features__icon .ugloz-icon svg {
	width: 50px;
	height: 50px;
	fill: var(--ugloz-white);
}
/* Poppins, NOT Montserrat: the source renders these captions as bare <span>s
   inside the heading widget, so they inherit the body font — only the h3
   headings pick up Montserrat from the h1..h6 rule. Montserrat made
   "EXPRESS SHIPPING AUSTRALIA WIDE" 305px wide against the source's 270px and
   wrapped the third caption onto a second line at 390. */
.ugloz-features__caption {
	display: block;
	text-align: center;
	font-family: var(--ugloz-font-primary);
	font-size: 16px;
	font-weight: var(--ugloz-w-regular);
	line-height: 30.4px;
	color: var(--ugloz-body);
	text-transform: none;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* No mobile override: below 768px .ugloz-col is already 100% wide, so the six
   children stack exactly as the source does (3 icon blocks then 3 captions) and
   the measured circle-to-circle pitch stays 130.4px. An explicit column
   direction plus margins made it 140px and drifted the section by 20px. */

/* ---------- 10 · contact strip --------------------------------------------- */
.ugloz-divider {
	border: 0;
	border-top: 1px solid #000;
	width: 100%;
	margin: 0;
}
.ugloz-divider-wrap { padding-block: 15px; }
.ugloz-contact__text p {
	color: var(--ugloz-body);
	font-family: var(--ugloz-font-primary);
	font-size: 17px;
	line-height: 50px;
	text-align: left;
	text-shadow: 48px 0px 10px rgba(0, 0, 0, 0.3);
	margin: 0;
}
.ugloz-contact__text a { color: var(--ugloz-heading); }
.ugloz-contact__text a:hover { color: var(--ugloz-primary); }
/* The source right-aligns only the IMAGE widget (--align-self:flex-end on
   .elementor-element-2dd154c6). The divider above it stays full column width —
   putting align-items:flex-end on the column instead collapses that divider to
   zero and the strip loses its right-hand rule. */
.ugloz-contact__media > .ugloz-widget:last-child { align-self: flex-end; }
.ugloz-contact__media img { width: 300px; max-width: 100%; height: auto; }

/* No mobile override for the contact copy: the source keeps line-height 50px
   and the same text-shadow at 390 (measured line pitch 50px, not 34px).
   It does gain 20px between the leading &nbsp; paragraph and the copy below it
   at 390 — measured first-ink at 12718 vs 12698 without this. Desktop and
   tablet match to the pixel without it, so it is scoped to <=767. */
@media only screen and (max-width: 767px) {
	.ugloz-contact__text p:first-child { margin-bottom: 20px; }
}

/* ---------- SEO content zone (STANDARDS #6) -------------------------------- */
/* Rendered from the front page's WP editor content, so the client edits it at
   wp-admin -> Pages -> Home. Placed between the contact strip and the closing
   tagline per PROJECT-BRIEF decision 10 (this homepage has no FAQ section). */
.ugloz-seo-zone > .ugloz-con__inner { padding-block: 40px 10px; }
.ugloz-seo-zone .ugloz-prose h2 {
	font-family: var(--ugloz-font-secondary);
	font-size: var(--ugloz-h2);
	font-weight: var(--ugloz-w-bold);
	line-height: 1.25;
	color: var(--ugloz-heading);
	margin: 0 0 20px;
}
.ugloz-seo-zone .ugloz-prose p {
	color: var(--ugloz-body);
	font-family: var(--ugloz-font-primary);
	font-size: 16px;
	line-height: 32px;
}
.ugloz-seo-zone .ugloz-prose > *:last-child { margin-bottom: 0; }

@media only screen and (max-width: 767px) {
	.ugloz-seo-zone .ugloz-prose h2 { font-size: 26px; }
}

/* ---------- 11 · closing tagline ------------------------------------------- */
/* Measured: H3, centred, uppercase, #c48f20, line-height 51px,
   letter-spacing -2.7px, word-spacing 3px, text-decoration overline. */
.ugloz-tagline {
	padding: 10px;
	justify-content: center;
}
.ugloz-tagline__title {
	font-family: var(--ugloz-font-secondary);
	font-size: 30px;
	font-weight: var(--ugloz-w-bold);
	line-height: 51px;
	letter-spacing: -2.7px;
	word-spacing: 3px;
	text-transform: uppercase;
	text-decoration: overline;
	text-align: center;
	color: var(--ugloz-e-text);
	margin: 0;
	width: 100%;
}

/* No small-screen override: the source keeps 30px/51px and letter-spacing
   -2.7px at 390 and simply wraps to two lines (measured line pitch 51px). */

/* ---------- product grid widgets on the homepage --------------------------- */
.ugloz-products.woocommerce { width: 100%; }
.ugloz-products .ugloz-empty-grid {
	color: var(--ugloz-body);
	font-family: var(--ugloz-font-primary);
	padding: 20px 0;
	margin: 0;
}