/**
 * Self-contained styles — no dependency on the active theme's CSS custom
 * properties. Colors fall back to sane neutrals but can be re-themed by
 * overriding these custom properties from a theme or child theme.
 */
.btc-page, .btc-tailoring-box, .btc-garment-grid, .btc-fabric-grid {
	--btc-ink: #1a1a1a;
	--btc-paper: #ffffff;
	--btc-accent: #b28c47;
	--btc-border: rgba(0, 0, 0, .14);
	--btc-surface: #f6f5f2;
	color: var(--btc-ink);
}

/* Self-styled buttons — this plugin can't rely on the active theme's .button
   (or WooCommerce's own, which some themes dequeue) having any padding at
   all, so every button it renders needs its look defined here. */
.btc-page .button, .btc-tailoring-box .button, .btc-garment-grid .button, .btc-fabric-grid .button {
	display: inline-block; padding: 12px 26px; font-size: 13px; font-weight: 700;
	letter-spacing: .02em; text-decoration: none; text-align: center; cursor: pointer;
	background: var(--btc-ink); color: var(--btc-paper); border: 0; border-radius: 3px;
	transition: opacity .15s ease;
}
.btc-page .button:hover, .btc-tailoring-box .button:hover, .btc-garment-grid .button:hover, .btc-fabric-grid .button:hover { opacity: .85; }

/* — "Have us make it" upsell box, shown on any product page — */
.btc-tailoring-box {
	margin-top: 24px; padding: 20px; background: var(--btc-surface); border-radius: 4px;
}
.btc-tailoring-box__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; opacity: .7; }
.btc-tailoring-box p { margin: 0 0 14px; font-size: 14px; line-height: 22px; }

/* — page layout — */
.btc-page { max-width: 1200px; margin-inline: auto; padding: 0 20px 80px; }
.btc-section { padding: 40px 0; }
.btc-section--center { text-align: center; }
.btc-hero { padding: 48px 0 32px; border-bottom: 2px solid var(--btc-ink); }
.btc-hero h1 { font-size: 42px; line-height: 1.1; margin: 10px 0 16px; }
.btc-kicker { display: inline-block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.btc-field-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.btc-lede { font-size: 14px; line-height: 22px; opacity: .8; }
.btc-note { font-size: 12px; opacity: .6; margin: 0; }

.btc-banner { padding: 14px 18px; margin-bottom: 24px; font-size: 14px; font-weight: 600; border-left: 3px solid; }
.btc-banner--error { background: color-mix(in srgb, #b3392f 10%, transparent); border-color: #b3392f; color: #7a251d; }

.btc-form { max-width: 760px; }
.btc-group { margin: 26px 0; }
.btc-radio-list { display: grid; gap: 6px; margin: 0 0 20px; font-size: 14px; }

.btc-legend { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 13px; font-weight: 600; font-style: italic; color: var(--btc-accent); }
.btc-legend__icon { flex: none; fill: currentColor; stroke: none; }

.btc-field { margin: 0 0 16px; }
.btc-field label { display: block; font-size: 12px; margin-bottom: 6px; opacity: .75; }
.btc-field input[type="text"] {
	width: 100%; min-height: 42px; padding: 8px 12px; font: inherit; font-size: 14px;
	border: 1px solid var(--btc-border); border-radius: 3px; background: var(--btc-paper); color: var(--btc-ink);
}
.btc-textarea {
	width: 100%; min-height: 96px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical;
	border: 1px solid var(--btc-border); border-radius: 3px; background: var(--btc-paper); color: var(--btc-ink);
}

.btc-measurements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; margin: 0 0 26px; }

/* — order method cards — */
.btc-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.btc-method-card {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
	padding: 20px 14px; border: 1px solid var(--btc-border); border-radius: 4px; cursor: pointer;
	font-size: 13px; font-weight: 600;
}
.btc-method-card.is-active { border-color: var(--btc-accent); background: color-mix(in srgb, var(--btc-accent) 8%, transparent); }
.btc-method-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* — swatch cards (garment picker, option choices) — */
.btc-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.btc-swatch {
	position: relative; display: block; text-align: left; text-decoration: none; color: inherit;
	background: none; border: 0; padding: 0; cursor: pointer;
}
.btc-swatch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.btc-swatch figure { aspect-ratio: 1/1; margin: 0; outline: 3px solid transparent; outline-offset: -3px; border-radius: 3px; overflow: hidden; }
.btc-swatch.is-selected figure { outline-color: var(--btc-accent); }
.btc-swatch:focus-within figure { outline-color: var(--btc-accent); }
.btc-swatch__check {
	position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--btc-accent); color: #fff;
	display: none; align-items: center; justify-content: center;
}
.btc-swatch.is-selected .btc-swatch__check { display: flex; }
.btc-swatch__name { font-size: 13px; font-weight: 600; margin: 10px 0 0; line-height: 19px; }
.btc-swatch__delta { display: block; font-weight: 400; opacity: .6; }
.btc-recommend-badge {
	position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--btc-accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.btc-recommend-badge svg { fill: currentColor; stroke: none; }

.btc-image-slot { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.btc-image-slot--empty {
	display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
	background: repeating-linear-gradient( 135deg, #f2f1ee, #f2f1ee 8px, #e6e4de 8px, #e6e4de 16px );
}
.btc-image-slot__label { font-size: 11px; font-weight: 600; opacity: .65; }

.btc-also-add { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; margin: 8px 0 28px; }

/* — "shop by garment" grid (begin-your-order landing, and the homepage teaser) — */
.btc-garment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.btc-garment-tile { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; }
.btc-garment-tile__media { position: absolute; inset: 0; }
.btc-garment-tile__overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px;
	background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .15) 55%, transparent 100%);
}
.btc-garment-tile__name { color: #fff; font-size: 30px; font-weight: 800; line-height: 1.05; margin: 0; }
.btc-garment-tile__price { color: rgba(255, 255, 255, .88); font-size: 14px; margin: 0 0 4px; }
.btc-garment-tile .button.btc-garment-tile__cta { width: fit-content; background: #fff; color: var(--btc-ink); }

/* — fabric picker (choosing which cloth to make a garment from) — */
.btc-fabric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.btc-fabric-card { display: block; text-decoration: none; color: inherit; }
.btc-fabric-card figure { aspect-ratio: 4/5; margin: 0; border-radius: 3px; overflow: hidden; }
.btc-fabric-card__name { font-size: 14px; font-weight: 700; margin: 10px 0 2px; line-height: 19px; }
.btc-fabric-card__price { font-size: 13px; opacity: .7; margin: 0; }

/* — price breakdown + quantity/submit footer — */
.btc-totals { margin: 8px 0 20px; padding-top: 14px; border-top: 1px solid var(--btc-border); }
.btc-totals__row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; font-weight: 600; }
.btc-totals__row--grand { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--btc-border); font-size: 16px; }
.btc-totals__row--grand span:last-child { font-size: 20px; }

.btc-order-actions { display: flex; gap: 12px; }
.btc-qty-input {
	width: 72px; min-height: 46px; padding: 8px 12px; font: inherit; font-size: 14px; text-align: center;
	border: 1px solid var(--btc-border); border-radius: 3px; background: var(--btc-paper); color: var(--btc-ink);
}
.btc-order-actions__submit { flex: none; }

@media (max-width: 860px) {
	.btc-method-grid { grid-template-columns: 1fr; }
	.btc-swatch-grid { grid-template-columns: 1fr 1fr; }
	.btc-measurements-grid { grid-template-columns: 1fr 1fr; }
	.btc-hero h1 { font-size: 30px; }
	.btc-garment-grid { grid-template-columns: 1fr 1fr; }
	.btc-fabric-grid { grid-template-columns: 1fr 1fr; }
	.btc-order-actions { flex-direction: column; }
	.btc-order-actions__submit { width: 100%; }
}