/* ==========================================================================
   Baby Toes — brand foundation
   Palette + typography from the official brand board.
   Usage ratio: White 55% · Soft Silver 20% · Blush 15% · Charcoal 7% · Champagne 3%
   ========================================================================== */

:root {
	--bt-grey:      #8F8C89; /* Silver Grey    — primary text / headings / logo */
	--bt-blush:     #E8A6AD; /* Blush Pink     — accents / highlights / icons   */
	--bt-champagne: #F4D7D9; /* Champagne Blush */
	--bt-silver:    #D8D5D2; /* Soft Silver    — sub text / borders / dividers  */
	--bt-charcoal:  #30302F; /* Deep Charcoal  — important text on light bg     */
	--bt-white:     #FFFFFF;

	--bt-font-script:  'Allura', cursive;
	--bt-font-heading: 'Montserrat', sans-serif;
	--bt-font-body:    'DM Sans', sans-serif;

	--bt-max: 1180px;
}

/* ---------- Base ---------- */

body.bt-brand {
	font-family: var(--bt-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;          /* 160% per brand board */
	color: var(--bt-grey);
	background: var(--bt-white);
	-webkit-font-smoothing: antialiased;
}

body.bt-brand h1,
body.bt-brand h2,
body.bt-brand h3,
body.bt-brand h4,
body.bt-brand h5,
body.bt-brand h6 {
	font-family: var(--bt-font-heading);
	font-weight: 500;          /* Montserrat Medium */
	letter-spacing: 0.02em;    /* 2% */
	line-height: 1.2;          /* 120% */
	color: var(--bt-grey);
	margin: 0 0 0.6em;
}

body.bt-brand h1 { font-size: clamp(30px, 4.4vw, 46px); }
body.bt-brand h2 { font-size: clamp(26px, 3.2vw, 32px); }  /* 32 desktop / 26 mobile */
body.bt-brand h3 { font-size: clamp(19px, 2.1vw, 22px); }

body.bt-brand p { margin: 0 0 1.15em; }

body.bt-brand a { color: var(--bt-grey); text-decoration: none; transition: color .25s ease; }
body.bt-brand a:hover { color: var(--bt-blush); }

body.bt-brand strong,
body.bt-brand .bt-strong { color: var(--bt-charcoal); font-weight: 500; }

@media (max-width: 767px) {
	body.bt-brand { font-size: 14px; }   /* 14px mobile per brand board */
}

/* ---------- Brand primitives ---------- */

.bt-script {
	font-family: var(--bt-font-script);
	font-weight: 400;
	color: var(--bt-grey);
	line-height: 1;
	font-size: clamp(46px, 7vw, 78px);
}

/* Tagline — 12px desktop / 10px mobile, 4px tracking */
.bt-tagline {
	font-family: var(--bt-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--bt-grey);
}

@media (max-width: 767px) {
	.bt-tagline { font-size: 10px; letter-spacing: 3px; }
}

.bt-eyebrow {
	font-family: var(--bt-font-heading);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bt-blush);
	display: block;
	margin-bottom: 14px;
}

/* Thin line divider — a signature brand element */
.bt-rule {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--bt-blush);
	border: 0;
	margin: 22px auto;
}

.bt-rule--left { margin-left: 0; margin-right: auto; }

/* Soft dots */
.bt-dot {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--bt-champagne);
	margin: 0 5px;
	vertical-align: middle;
}

/* ---------- Buttons ---------- */

body.bt-brand .bt-btn,
body.bt-brand .woocommerce a.button,
body.bt-brand .woocommerce button.button,
body.bt-brand .woocommerce input.button,
body.bt-brand .woocommerce a.button.alt,
body.bt-brand .woocommerce button.button.alt {
	font-family: var(--bt-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 15px 34px;
	border: 1px solid var(--bt-blush);
	border-radius: 999px;
	background: var(--bt-blush);
	color: var(--bt-white);
	line-height: 1;
	display: inline-block;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

body.bt-brand .bt-btn:hover,
body.bt-brand .woocommerce a.button:hover,
body.bt-brand .woocommerce button.button:hover,
body.bt-brand .woocommerce input.button:hover,
body.bt-brand .woocommerce a.button.alt:hover,
body.bt-brand .woocommerce button.button.alt:hover {
	background: transparent;
	color: var(--bt-charcoal);
	border-color: var(--bt-charcoal);
}

body.bt-brand .bt-btn--ghost {
	background: transparent;
	color: var(--bt-grey);
	border-color: var(--bt-silver);
}

body.bt-brand .bt-btn--ghost:hover {
	border-color: var(--bt-blush);
	color: var(--bt-blush);
	background: transparent;
}

/* ---------- WooCommerce: let the product be the hero ---------- */

body.bt-brand .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 42px 30px;
	margin: 0;
	padding: 0;
}

body.bt-brand .woocommerce ul.products::before,
body.bt-brand .woocommerce ul.products::after { content: none; display: none; }

body.bt-brand .woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
}

body.bt-brand .woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	background: var(--bt-champagne);
	margin-bottom: 18px;
	transition: opacity .3s ease;
}

body.bt-brand .woocommerce ul.products li.product:hover a img { opacity: .88; }

body.bt-brand .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bt-font-heading);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.02em;
	line-height: 1.35;
	color: var(--bt-grey);
	padding: 0 0 6px;
}

body.bt-brand .woocommerce ul.products li.product .price {
	font-family: var(--bt-font-body);
	font-size: 15px;
	color: var(--bt-charcoal);
	font-weight: 400;
}

body.bt-brand .woocommerce ul.products li.product .price del { color: var(--bt-silver); margin-right: 6px; }
body.bt-brand .woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--bt-blush); }

body.bt-brand .woocommerce ul.products li.product .button {
	margin-top: 14px;
	font-size: 11px;
	padding: 12px 26px;
}

body.bt-brand .woocommerce span.onsale {
	background: var(--bt-blush);
	color: var(--bt-white);
	font-family: var(--bt-font-heading);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 7px 14px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	top: 12px;
	left: 12px;
	margin: 0;
}

@media (max-width: 1024px) {
	body.bt-brand .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
}

@media (max-width: 480px) {
	body.bt-brand .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
	body.bt-brand .woocommerce ul.products li.product .button { padding: 10px 18px; letter-spacing: 1px; }
}

/* Single product */
body.bt-brand .woocommerce div.product .product_title { font-size: clamp(24px, 3vw, 32px); }
body.bt-brand .woocommerce div.product p.price { color: var(--bt-charcoal); font-size: 20px; }
body.bt-brand .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 999px 999px 0 0; }

/* Notices */
body.bt-brand .woocommerce-message,
body.bt-brand .woocommerce-info {
	border-top-color: var(--bt-blush);
	background: #FBF6F6;
	color: var(--bt-charcoal);
}

body.bt-brand .woocommerce-message::before,
body.bt-brand .woocommerce-info::before { color: var(--bt-blush); }

/* ---------- Section helpers used by the Elementor layouts ---------- */

.bt-soft   { background: var(--bt-champagne); }
.bt-silver-bg { background: #F7F6F5; }

.bt-card {
	background: var(--bt-white);
	border: 1px solid var(--bt-silver);
	border-radius: 16px;
	padding: 34px 28px;
	text-align: center;
	height: 100%;
	transition: border-color .25s ease, transform .25s ease;
}

.bt-card:hover { border-color: var(--bt-blush); transform: translateY(-3px); }

.bt-card h3 { margin-bottom: 8px; }
.bt-card p  { font-size: 14px; margin: 0; color: var(--bt-grey); }

/* Category tile */
.bt-cat {
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	background: var(--bt-champagne);
	aspect-ratio: 3 / 4;
}

.bt-cat__label {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 22px 18px;
	background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,0));
	font-family: var(--bt-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bt-charcoal);
	text-align: center;
}

/* Footprint mark */
.bt-mark {
	display: inline-block;
	width: 42px;
	height: 42px;
	color: var(--bt-blush);
}

.bt-mark svg { width: 100%; height: 100%; display: block; }