/**
 * Shopify Buy Button brand overrides.
 *
 * The Buy Button SDK renders in iframes, so most styling is passed
 * via the options JSON in inc/shopify.php. This file styles the
 * surrounding placeholders + the grid wrapper for collection embeds.
 */

:root {
	--sbc-charcoal: var(--wp--preset--color--charcoal, #1a1a1a);
	--sbc-espresso: var(--wp--preset--color--espresso, #3d2817);
	--sbc-tan: var(--wp--preset--color--coffee-tan, #b08968);
	--sbc-gold: var(--wp--preset--color--gold, #c9a96e);
	--sbc-cream: var(--wp--preset--color--cream, #f5ebd6);
	--sbc-warm-white: var(--wp--preset--color--warm-white, #faf6ee);
	--sbc-muted: var(--wp--preset--color--muted, #6b5d4f);
}

/* Placeholder shown when no product/collection ID is set yet */
.sbc-shopify-placeholder {
	background: var(--sbc-cream);
	border: 2px dashed var(--sbc-tan);
	border-radius: 6px;
	padding: 1.5rem;
	color: var(--sbc-espresso);
	text-align: center;
	font-size: 0.95rem;
}
.sbc-shopify-placeholder code {
	background: rgba(176, 137, 104, 0.18);
	padding: 0.1rem 0.45rem;
	border-radius: 2px;
	font-family: 'Inter', monospace;
	font-size: 0.9em;
}

/* Collection grid columns — Buy Button's product cards line up to a CSS grid */
.sbc-shopify-collection .shopify-buy__product-set {
	display: grid;
	gap: 1.5rem;
}
.sbc-cols-2 .shopify-buy__product-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbc-cols-3 .shopify-buy__product-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbc-cols-4 .shopify-buy__product-set { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 880px) {
	.sbc-cols-3 .shopify-buy__product-set,
	.sbc-cols-4 .shopify-buy__product-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.sbc-cols-2 .shopify-buy__product-set,
	.sbc-cols-3 .shopify-buy__product-set,
	.sbc-cols-4 .shopify-buy__product-set { grid-template-columns: 1fr; }
}

/* Floating cart placement (Buy Button cart drawer mounts top-right) */
.sbc-shopify-cart-mount { position: relative; z-index: 9999; }

/* Details / FAQ accordions (carried over from WC build — also useful here) */
.wp-block-details {
	border-bottom: 1px solid var(--sbc-tan);
	padding: 1rem 0;
}
.wp-block-details summary {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--sbc-charcoal);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	font-family: 'Bebas Neue', sans-serif;
	color: var(--sbc-tan);
	font-size: 1.5rem;
	transition: transform 0.2s ease;
}
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details > *:not(summary) {
	margin-top: 0.75rem;
	color: var(--sbc-muted);
	line-height: 1.65;
}

/* Checkmark list style used in patterns */
ul.is-style-checkmark {
	list-style: none;
	padding-left: 0;
}
ul.is-style-checkmark li {
	padding-left: 1.75rem;
	position: relative;
	margin-bottom: 0.5rem;
}
ul.is-style-checkmark li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--sbc-gold);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.5;
}

/* Header polish */
.sbc-site-header { box-shadow: 0 1px 0 rgba(176,137,104,0.15); }