/* =====================================================================
   LIFESTYLE SHOES — Hello Elementor child design
   ---------------------------------------------------------------------
   BRAND COLORS: edit the six --brand-* values below to retune the whole
   site. Everything else references these variables.
   ===================================================================== */

:root {
	/* ---- Brand palette (edit here) ---- */
	--brand-primary:      #34347a;  /* deep indigo — buttons, header, headings */
	--brand-primary-600:  #2b2b66;  /* hover / darker */
	--brand-primary-700:  #212150;  /* pressed / footer */
	--brand-primary-050:  #f1f1f9;  /* pale indigo tint — section backgrounds */
	--brand-ink:          #1c1c3a;  /* body text */
	--brand-accent:       #e2a53c;  /* warm gold — sale badges, highlights */
	--brand-accent-600:   #c98f2b;

	/* ---- Neutrals ---- */
	--c-white:   #ffffff;
	--c-bg:      #ffffff;
	--c-muted:   #6b6b80;
	--c-line:    #e7e7ef;
	--c-star:    #ffffff;

	/* ---- Design tokens ---- */
	--radius:      12px;
	--radius-sm:   8px;
	--radius-pill: 999px;
	--shadow-sm:   0 1px 2px rgba(28,28,58,.06), 0 1px 3px rgba(28,28,58,.08);
	--shadow-md:   0 6px 18px rgba(28,28,58,.10);
	--shadow-lg:   0 16px 40px rgba(28,28,58,.16);
	--container:   1200px;

	/* ---- Type ---- */
	--font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	color: var(--brand-ink);
	background: var(--c-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h-display {
	font-family: var(--font-display);
	color: var(--brand-ink);
	line-height: 1.15;
	letter-spacing: -.01em;
}

a { color: var(--brand-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-primary-600); }

img { max-width: 100%; height: auto; }

/* Constrain default WooCommerce wrappers so content never runs edge to edge */
.woocommerce, .woocommerce-page,
.woocommerce .content-area, .woocommerce-page .content-area {
	max-width: var(--container);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
   Buttons (WooCommerce + generic)
   --------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-block-button__link,
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--brand-primary);
	color: var(--c-white);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	letter-spacing: .01em;
	padding: .85rem 1.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
	box-shadow: var(--shadow-sm);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover {
	background: var(--brand-primary-600);
	color: var(--c-white);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(0); }

/* Secondary / outline button (e.g. "View cart", quantity, back links) */
.woocommerce a.button.wc-forward:not(.checkout-button),
.woocommerce .button.alt.disabled {
	background: var(--brand-primary-050);
	color: var(--brand-primary);
	box-shadow: none;
}

/* ---------------------------------------------------------------------
   Shop / archive grid
   --------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin: 0 0 2.5rem;
}
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

.woocommerce ul.products li.product {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1rem 1rem 1.25rem;
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	position: relative;
	overflow: hidden;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.woocommerce ul.products li.product a img {
	border-radius: var(--radius-sm);
	margin-bottom: 1rem;
	background: var(--brand-primary-050);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--brand-ink);
	padding: 0 0 .35rem;
}

.woocommerce ul.products li.product .price {
	color: var(--brand-primary);
	font-weight: 700;
	font-size: 1.05rem;
}
.woocommerce ul.products li.product .price del { color: var(--c-muted); font-weight: 400; margin-right: .4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .star-rating { margin: .4rem auto .2rem; color: var(--brand-accent); }

.woocommerce ul.products li.product .button {
	margin-top: .85rem;
}

/* ---------------------------------------------------------------------
   Sale badge
   --------------------------------------------------------------------- */
.woocommerce span.onsale {
	background: var(--brand-accent);
	color: #3a2a05;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: .8rem;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: .45rem .7rem;
	border-radius: var(--radius-pill);
	top: 1rem;
	left: 1rem;
	right: auto;
	margin: 0;
	box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   Single product
   --------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	margin-bottom: .5rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--brand-primary);
	font-size: 1.6rem;
	font-weight: 700;
}
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--radius); overflow: hidden; }
.woocommerce div.product form.cart .quantity input.qty {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: .7rem;
	width: 4.5rem;
	text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--brand-primary-050);
	border: 0;
	border-radius: var(--radius-pill);
	margin-right: .5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--brand-primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--c-white); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--c-line); }

/* ---------------------------------------------------------------------
   Cart & Checkout
   --------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--brand-primary-050); color: var(--brand-ink); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form.checkout_coupon,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
	border-radius: var(--radius);
	border-top-color: var(--brand-primary);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--brand-primary); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout .select2-container .select2-selection {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: .8rem .9rem;
	min-height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input:focus {
	outline: none;
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 3px rgba(52,52,122,.15);
}

/* ---------------------------------------------------------------------
   Notices / result count / ordering
   --------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count { color: var(--c-muted); }
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	padding: .55rem 1rem;
	background: var(--c-white);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	margin: 0 .25rem;
	color: var(--brand-ink);
	background: var(--c-white);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--brand-primary);
	color: var(--c-white);
	border-color: var(--brand-primary);
}

/* ---------------------------------------------------------------------
   Header / navigation (Hello Elementor default header)
   --------------------------------------------------------------------- */
.site-header,
header.site-header { box-shadow: var(--shadow-sm); }
.site-navigation .menu-item a,
nav.site-navigation a { font-weight: 500; color: var(--brand-ink); }
.site-navigation .menu-item a:hover { color: var(--brand-primary); }

/* Cart count / mini cart accents if present */
.woocommerce-cart-form .actions .button,
a.wc-block-cart__submit-button { background: var(--brand-primary); }

/* ---------------------------------------------------------------------
   Footer (Hello Elementor default footer)
   --------------------------------------------------------------------- */
.site-footer,
footer.site-footer {
	background: var(--brand-primary-700);
	color: rgba(255,255,255,.82);
}
.site-footer a, footer.site-footer a { color: var(--c-white); }
.site-footer a:hover, footer.site-footer a:hover { color: var(--brand-accent); }

/* ---------------------------------------------------------------------
   Utility section band you can reuse in Elementor via class "brand-band"
   --------------------------------------------------------------------- */
.brand-band { background: var(--brand-primary-050); }
.brand-fill { background: var(--brand-primary); color: var(--c-white); }
.brand-fill h1, .brand-fill h2, .brand-fill h3 { color: var(--c-white); }
.text-gold { color: var(--brand-accent); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.woocommerce a.button, .woocommerce button.button { width: 100%; }
}

/* =====================================================================
   HEADER  (template-parts/header.php)
   ===================================================================== */
.ls-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.ls-header { position: relative; z-index: 100; }

/* Announcement bar */
.ls-topbar {
	background: var(--brand-primary-700);
	color: rgba(255,255,255,.9);
	font-size: .85rem;
}
.ls-topbar .ls-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 40px;
	gap: 1rem;
}
.ls-topbar-phone { color: #fff; font-weight: 600; white-space: nowrap; }
.ls-topbar-phone:hover { color: var(--brand-accent); }

/* Main header row */
.ls-header-main { background: #fff; border-bottom: 1px solid var(--c-line); }
.ls-header-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 78px;
}
.ls-brand { flex: 0 0 auto; margin-right: auto; }
.ls-brand img { max-height: 52px; width: auto; }
.ls-brand-text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--brand-primary);
	letter-spacing: -.01em;
}

/* Nav */
.ls-nav .ls-menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ls-nav .ls-menu li { position: relative; }
.ls-nav .ls-menu a {
	color: var(--brand-ink);
	font-weight: 500;
	font-size: .98rem;
	padding: .35rem 0;
	transition: color .15s ease;
}
.ls-nav .ls-menu a:hover,
.ls-nav .ls-menu .current-menu-item > a { color: var(--brand-primary); }
/* Sub-menus */
.ls-nav .ls-menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	padding: .5rem 0;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all .18s ease;
	z-index: 20;
}
.ls-nav .ls-menu li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ls-nav .ls-menu ul.sub-menu a { display: block; padding: .55rem 1.1rem; }

/* Utility actions */
.ls-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.ls-action {
	position: relative;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--brand-ink);
	font-size: 1.05rem;
	transition: background .15s ease, color .15s ease;
}
.ls-action:hover { background: var(--brand-primary-050); color: var(--brand-primary); }
.ls-cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--brand-accent);
	color: #3a2a05;
	font-size: .7rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 999px;
}

/* Mobile toggle */
.ls-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
}
.ls-nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--brand-ink);
	transition: none;
}

@media (max-width: 900px) {
	.ls-nav-toggle { display: flex; }
	.ls-header-inner { flex-wrap: wrap; }
	.ls-nav {
		flex-basis: 100%;
		display: none;
		order: 5;
	}
	.ls-header.ls-nav-open .ls-nav { display: block; }
	.ls-nav .ls-menu { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 1rem; }
	.ls-nav .ls-menu > li { border-top: 1px solid var(--c-line); }
	.ls-nav .ls-menu a { padding: .85rem 0; }
	.ls-nav .ls-menu ul.sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding-left: 1rem;
	}
	.ls-brand { margin-right: 0; }
	.ls-actions { margin-left: auto; }
}

/* =====================================================================
   FOOTER  (template-parts/footer.php)
   ===================================================================== */
.ls-footer { background: var(--brand-primary-700); color: rgba(255,255,255,.78); }
.ls-footer-cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 2.5rem;
	padding-top: 64px;
	padding-bottom: 48px;
}
.ls-footer-title {
	color: #fff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 0 1.1rem;
}
.ls-footer-brandname { font-family: var(--font-display); font-size: 1.4rem; text-transform: none; letter-spacing: 0; }
.ls-footer-logo img { max-height: 56px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.ls-footer-blurb { font-size: .92rem; line-height: 1.7; margin: 0 0 1.25rem; max-width: 34ch; }

.ls-footer-links, .ls-footer-contact { list-style: none; margin: 0; padding: 0; }
.ls-footer-links li { margin-bottom: .7rem; }
.ls-footer-links a { color: rgba(255,255,255,.78); font-size: .95rem; }
.ls-footer-links a:hover { color: var(--brand-accent); }

.ls-footer-contact li {
	display: flex;
	gap: .7rem;
	margin-bottom: .9rem;
	font-size: .95rem;
	line-height: 1.5;
}
.ls-footer-contact i { color: var(--brand-accent); margin-top: .25rem; width: 16px; text-align: center; flex: 0 0 auto; }
.ls-footer-contact a { color: rgba(255,255,255,.78); }
.ls-footer-contact a:hover { color: var(--brand-accent); }

.ls-social { display: flex; gap: .6rem; }
.ls-social a {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.08);
	border-radius: 50%;
	color: #fff;
	font-size: .95rem;
	transition: background .15s ease, color .15s ease;
}
.ls-social a:hover { background: var(--brand-accent); color: #3a2a05; }

.ls-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.ls-footer-bottom-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding-top: 20px; padding-bottom: 20px;
	font-size: .88rem;
}
.ls-pay { display: flex; gap: .6rem; font-size: 1.7rem; color: rgba(255,255,255,.65); }

@media (max-width: 900px) {
	.ls-footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
	.ls-footer-cols { grid-template-columns: 1fr; }
	.ls-footer-bottom-inner { flex-direction: column; text-align: center; }
}