/* ==========================================================================
   So Glamy — Site-wide UI consistency layer.
   One system for buttons, form fields, and pills across the WHOLE site so
   nothing looks mismatched (e.g. the black "Apply" coupon button).
   Loaded on every page AFTER brand.css. Uses the unified brand tokens.

   SAFETY: selectors deliberately EXCLUDE nav/menu, carousel arrows, quantity
   steppers, wishlist/quick-view icons, and close buttons so the theme's
   controls keep working.
   ========================================================================== */

/* ---------- Buttons → brand pink pill ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button[name="apply_coupon"],
button[name="update_cart"],
.wc-block-components-button,
.elementor-button,
.wp-element-button,
input[type="submit"]:not(.search-submit):not(.wpf-submit) {
	background-color: var(--tb-theme-color, #E91E8C) !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid var(--tb-theme-color, #E91E8C) !important;
	border-radius: 999px !important;
	font-family: var(--tb-text-primary-font, 'Montserrat', sans-serif) !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
button[name="apply_coupon"]:hover,
button[name="update_cart"]:hover,
.elementor-button:hover,
.wp-element-button:hover,
input[type="submit"]:not(.search-submit):not(.wpf-submit):hover {
	background-color: var(--tb-theme-color-hover, #C21374) !important;
	border-color: var(--tb-theme-color-hover, #C21374) !important;
	color: #fff !important;
}

/* Keep the theme's icon/utility controls untouched (don't pink-pill these) */
.owl-nav button, .slick-arrow, .quantity .button, .quantity button,
.qib-button, .plus, .minus, .wishlist-icon, .qview-button,
.mfp-close, .close, .search-submit, header button, .site-header button,
.wpf-filter-controls button {
	border-radius: initial;
}

/* ---------- Form fields → consistent border / radius / focus ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
input#coupon_code {
	border: 1px solid var(--sg-line, #EEDCE5) !important;
	border-radius: var(--sg-r-sm, 10px) !important;
	min-height: 46px;
	padding: 10px 14px;
	font-family: var(--tb-text-primary-font, 'Montserrat', sans-serif) !important;
	font-size: 14.5px;
	color: var(--sg-ink, #2A2024);
	background-color: #fff;
	box-shadow: none !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
input#coupon_code:focus {
	border-color: var(--tb-theme-color, #E91E8C) !important;
	box-shadow: 0 0 0 3px rgba(233, 30, 140, .14) !important;
	outline: none;
}

/* Field labels — consistent, small, tidy everywhere (they were inheriting a
   big default after this layer out-specified checkout.css). */
.woocommerce form .form-row > label,
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
	display: block;
	font-family: var(--tb-text-primary-font, 'Montserrat', sans-serif) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: .03em;
	color: var(--sg-ink, #2A2024);
	margin-bottom: 6px;
}

/* ---------- Pills / tags / badges → consistent ---------- */
.onsale, .wd-info-text .label, .product-label, .badge {
	border-radius: 999px !important;
}

/* ==========================================================================
   Banner Slider ([sg_banner_slider]) — full-width responsive carousel.
   CSS scroll-snap does the sliding; JS only wires arrows/dots.
   ========================================================================== */
.sg-bs {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--sg-r, 14px);
}
.sg-bs-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.sg-bs-track::-webkit-scrollbar { display: none; }
.sg-bs-slide {
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: center;
	display: block;
	text-decoration: none;
}
.sg-bs-slide img,
.sg-bs-slide picture {
	display: block;
	width: 100%;
	height: auto;
}
/* placeholder state */
.sg-bs-empty {
	aspect-ratio: 24 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sg-bg, #FBF3F6);
	border: 1px dashed var(--sg-line, #EEDCE5);
	color: var(--sg-muted, #8C8288);
	font-family: var(--tb-text-primary-font, sans-serif);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	padding: 20px;
}

/* Prev / next arrows */
.sg-bs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--sg-line, #EEDCE5);
	background: rgba(255, 255, 255, .92);
	color: var(--sg-ink, #2A2024);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, color .2s ease;
	z-index: 2;
	padding: 0;
}
.sg-bs-nav:hover { background: var(--sg-pink, #E91E8C); color: #fff; border-color: var(--sg-pink, #E91E8C); }
.sg-bs-prev { left: 14px; }
.sg-bs-next { right: 14px; }

/* Counter + dots bar */
.sg-bs-bar {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .92);
	border-radius: var(--sg-r-pill, 999px);
	padding: 6px 14px;
	z-index: 2;
}
.sg-bs-count {
	font-family: var(--tb-text-primary-font, sans-serif);
	font-size: 12px;
	font-weight: 700;
	color: var(--sg-ink, #2A2024);
}
.sg-bs-dots { display: flex; align-items: center; gap: 6px; }
.sg-bs-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #cfc6cb;
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}
.sg-bs-dot.is-active { background: var(--sg-pink, #E91E8C); width: 20px; border-radius: 999px; }

@media (max-width: 767px) {
	.sg-bs { border-radius: var(--sg-r-sm, 10px); }
	.sg-bs-nav { width: 34px; height: 34px; font-size: 18px; }
	.sg-bs-prev { left: 8px; }
	.sg-bs-next { right: 8px; }
	.sg-bs-bar { bottom: 10px; padding: 5px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.sg-bs-track { scroll-behavior: auto; }
}

/* ==========================================================================
   Card Carousel ([sg_card_carousel]) — heading + scrollable promo cards.
   Scroll-snap does the sliding; JS only wires the arrows.
   ========================================================================== */
.sg-cc {
	--sg-cc-per: 3;
	--sg-cc-gap: 18px;
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) clamp(14px, 3vw, 28px);
}
.sg-cc-head { text-align: center; margin-bottom: clamp(18px, 2.5vw, 30px); }
.sg-cc-title {
	font-family: var(--tb-text-second-font, Georgia, serif);
	font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--sg-ink, #2A2024);
	margin: 0 0 6px;
	overflow-wrap: break-word;
}
.sg-cc-sub {
	font-family: var(--tb-text-primary-font, sans-serif);
	font-size: clamp(.9rem, .85rem + .2vw, 1.05rem);
	color: var(--sg-body, #5B5157);
	margin: 0;
	overflow-wrap: break-word;
}

.sg-cc-wrap { position: relative; }
.sg-cc-track {
	display: flex;
	gap: var(--sg-cc-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 6px;
}
.sg-cc-track::-webkit-scrollbar { display: none; }

.sg-cc-card {
	flex: 0 0 calc((100% - (var(--sg-cc-per) - 1) * var(--sg-cc-gap)) / var(--sg-cc-per));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--sg-bg, #FBF3F6);
	border: 1px solid var(--sg-line, #EEDCE5);
	border-radius: var(--sg-r, 14px);
	padding: 14px;
	text-decoration: none;
	transition: box-shadow .25s ease, transform .25s ease;
}
.sg-cc-card:hover { box-shadow: var(--sg-shadow-md, 0 10px 30px rgba(42,32,36,.10)); transform: translateY(-3px); }
.sg-cc-media {
	display: block;
	aspect-ratio: 9 / 7;
	border-radius: var(--sg-r-sm, 10px);
	overflow: hidden;
	background: #fff;
}
.sg-cc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-cc-media.is-empty {
	border: 1px dashed var(--sg-line, #EEDCE5);
	background: repeating-linear-gradient(45deg, rgba(233,30,140,.04) 0 10px, transparent 10px 20px);
}
.sg-cc-caption {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-family: var(--tb-text-primary-font, sans-serif);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--sg-pink, #E91E8C);
	/* never clip the caption */
	white-space: normal;
	overflow-wrap: break-word;
}

/* Arrows */
.sg-cc-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--sg-line, #EEDCE5);
	background: #fff;
	color: var(--sg-ink, #2A2024);
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	padding: 0;
	box-shadow: var(--sg-shadow, 0 2px 12px rgba(42,32,36,.06));
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.sg-cc-nav:hover { background: var(--sg-pink, #E91E8C); color: #fff; border-color: var(--sg-pink, #E91E8C); }
.sg-cc-nav.is-off { opacity: .35; pointer-events: none; }
.sg-cc-prev { left: -6px; }
.sg-cc-next { right: -6px; }

.sg-cc-empty {
	text-align: center;
	padding: 28px;
	border: 1px dashed var(--sg-line, #EEDCE5);
	border-radius: var(--sg-r, 14px);
	background: var(--sg-bg, #FBF3F6);
	color: var(--sg-muted, #8C8288);
	font-family: var(--tb-text-primary-font, sans-serif);
	font-size: 13px;
	font-weight: 600;
}

/* Tablet / mobile: fewer per view with a peek so it's clearly scrollable */
@media (max-width: 991px) {
	.sg-cc { --sg-cc-per: 2.2; --sg-cc-gap: 14px; }
	.sg-cc-nav { display: none; }
}
@media (max-width: 600px) {
	.sg-cc { --sg-cc-per: 1.35; }
	.sg-cc-caption { font-size: 13px; }
}