/* ==========================================================================
   So Glamy — Design Foundation (Phase 2)
   Tokens + typography + base sg- components for the UI/UX rebuild.

   RULES (house):
   - Scoped only: :root custom properties (all --sg-*) and .sg-* classes.
     NO global element selectors (no bare h1/body/*), so nothing leaks into
     the parent theme or WooCommerce.
   - Brand palette only: pink #E91E8C / rose-gold / blush. No maroon.
   - Headings = Georgia serif.
   - Text-fit is first-class: helpers below guarantee no hard-clipped text.
   ========================================================================== */

:root {
	/* ---- Brand palette ---- */
	--sg-pink: #E91E8C;          /* primary */
	--sg-pink-600: #cc157a;      /* hover/active */
	--sg-pink-100: #FCE3F1;      /* soft pink fill */
	--sg-rose-gold: #D4998F;
	--sg-rose-gold-100: #F1DDD8;
	--sg-bg: #FBF3F6;         /* section background */
	--sg-bg-2: #F6E7EE;       /* alt section background */
	--sg-cream: #FFFDFB;
	--sg-ink: #2A2024;           /* headings / near-black warm */
	--sg-body: #5B5157;          /* body copy */
	--sg-muted: #8C8288;         /* meta / secondary */
	--sg-line: #EEDCE5;          /* hairlines on blush */
	--sg-white: #ffffff;
	--sg-success: #1E8E5A;
	--sg-sale: #C0392B;

	/* ---- Typography ---- inherit the site-wide fonts so rebuilt sections
	   match the rest of the site exactly (Georgia headings + Montserrat body). */
	--sg-font-head: var(--tb-text-second-font, Georgia, 'Times New Roman', serif);
	--sg-font-body: var(--tb-text-primary-font, 'Montserrat', sans-serif);

	/* fluid type scale (mobile→desktop) */
	--sg-fs-hero: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);
	--sg-fs-h1:   clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);
	--sg-fs-h2:   clamp(1.35rem, 1.05rem + 1.5vw, 1.9rem);
	--sg-fs-h3:   clamp(1.1rem, 0.98rem + 0.6vw, 1.3rem);
	--sg-fs-body: 1rem;
	--sg-fs-sm:   0.8125rem;
	--sg-fs-xs:   0.6875rem;
	--sg-lh-tight: 1.16;
	--sg-lh: 1.55;
	--sg-tracking-eyebrow: 0.16em;

	/* ---- Spacing scale ---- */
	--sg-s1: 4px;  --sg-s2: 8px;  --sg-s3: 12px; --sg-s4: 16px;
	--sg-s5: 24px; --sg-s6: 32px; --sg-s7: 48px; --sg-s8: 64px; --sg-s9: 96px;

	/* ---- Radius / shadow ---- */
	--sg-r-sm: 10px; --sg-r: 14px; --sg-r-lg: 20px; --sg-r-pill: 999px;
	--sg-shadow: 0 2px 12px rgba(42, 32, 36, .06);
	--sg-shadow-md: 0 10px 30px rgba(42, 32, 36, .10);

	/* ---- Layout ---- */
	--sg-maxw: 1320px;
	--sg-gutter: clamp(16px, 4vw, 32px);
	--sg-section-y: clamp(40px, 6vw, 88px);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.sg-section {
	padding-top: var(--sg-section-y);
	padding-bottom: var(--sg-section-y);
}
.sg-section--blush { background: var(--sg-bg); }
.sg-section--blush2 { background: var(--sg-bg-2); }

.sg-container {
	width: 100%;
	max-width: var(--sg-maxw);
	margin-inline: auto;
	padding-inline: var(--sg-gutter);
}

/* Section heading block (eyebrow + title) */
.sg-head { margin-bottom: clamp(20px, 3vw, 36px); }
.sg-eyebrow {
	font-family: var(--sg-font-body);
	font-size: var(--sg-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sg-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sg-pink);
	margin: 0 0 var(--sg-s2);
}

/* ==========================================================================
   Typography (Georgia headings) — applied via classes, no global selectors
   ========================================================================== */
.sg-hero-title,
.sg-h1, .sg-h2, .sg-h3 {
	font-family: var(--sg-font-head);
	color: var(--sg-ink);
	line-height: var(--sg-lh-tight);
	font-weight: 600;
	margin: 0;
	/* prevent awkward single-word overflow on narrow screens */
	overflow-wrap: break-word;
	hyphens: none;
}
.sg-hero-title { font-size: var(--sg-fs-hero); }
.sg-h1 { font-size: var(--sg-fs-h1); }
.sg-h2 { font-size: var(--sg-fs-h2); }
.sg-h3 { font-size: var(--sg-fs-h3); }

.sg-body { font-family: var(--sg-font-body); font-size: var(--sg-fs-body); line-height: var(--sg-lh); color: var(--sg-body); }
.sg-muted { color: var(--sg-muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sg-s2);
	min-height: 46px;
	padding: 0 var(--sg-s6);
	border: 1px solid transparent;
	border-radius: var(--sg-r-pill);
	font-family: var(--sg-font-body);
	font-size: var(--sg-fs-sm);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
	/* text-fit: buttons never clip their label */
	white-space: normal;
	max-width: 100%;
}
.sg-btn:hover { transform: translateY(-1px); }
.sg-btn--primary { background: var(--sg-pink); color: var(--sg-white); }
.sg-btn--primary:hover { background: var(--sg-pink-600); color: var(--sg-white); }
.sg-btn--ghost { background: transparent; color: var(--sg-ink); border-color: var(--sg-line); }
.sg-btn--ghost:hover { border-color: var(--sg-pink); color: var(--sg-pink); }
.sg-btn--onphoto { background: rgba(255,255,255,.92); color: var(--sg-ink); }
.sg-btn--onphoto:hover { background: #fff; color: var(--sg-pink); }
.sg-btn--sm { min-height: 38px; padding: 0 var(--sg-s5); font-size: var(--sg-fs-xs); }

/* ==========================================================================
   Card + chip
   ========================================================================== */
.sg-card {
	background: var(--sg-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-r);
	box-shadow: var(--sg-shadow);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.sg-card:hover { box-shadow: var(--sg-shadow-md); }

.sg-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	min-height: 30px;
	padding: 0 var(--sg-s2);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-r-sm);
	font-family: var(--sg-font-body);
	font-size: var(--sg-fs-xs);
	font-weight: 600;
	color: var(--sg-body);
	background: var(--sg-white);
}

/* Sale/offer pill */
.sg-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--sg-r-pill);
	background: var(--sg-pink);
	color: #fff;
	font-family: var(--sg-font-body);
	font-size: var(--sg-fs-xs);
	font-weight: 700;
	letter-spacing: .02em;
}

/* ==========================================================================
   TEXT-FIT UTILITIES  (first-class per brief: never hard-clip text)
   - .sg-wrap        : always wrap, break long words, never overflow
   - .sg-clamp-2/3   : tidy multi-line ellipsis (with graceful fallback)
   Pair clamps in markup with a title="" attr so the full text stays available.
   ========================================================================== */
.sg-wrap { overflow-wrap: break-word; word-break: normal; white-space: normal; hyphens: none; }

.sg-clamp-2,
.sg-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
}
.sg-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.sg-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Reserve consistent height so clamped titles never shift the grid */
.sg-title-2line {
	min-height: calc(var(--sg-fs-body) * var(--sg-lh) * 2);
}

/* Accessible-only helper text */
.sg-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.sg-btn, .sg-card { transition: none; }
	.sg-btn:hover, .sg-card:hover { transform: none; }
}