/* Babypresenter – layout and component styles. Design tokens live in theme.json. */

:root {
	--bp-surface: var(--wp--preset--color--accent-3);
	--bp-border: var(--wp--preset--color--accent-5);
	--bp-border-ui: var(--wp--preset--color--accent-6);
	--bp-muted: var(--wp--preset--color--accent-4);
	--bp-sage: var(--wp--preset--color--accent-1);
	--bp-sage-dark: var(--wp--preset--color--accent-2);
	--bp-radius: 2px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--bp-sage-dark);
	outline-offset: 2px;
}

/* ---------- Header ---------- */
.bp-header__row { row-gap: 0.75rem; }
.bp-logo { margin: 0; white-space: nowrap; }
.bp-nav { flex: 1 1 auto; }
.bp-nav .wp-block-navigation-item__content { padding-block: 0.25rem; }
.bp-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.bp-search { flex: 0 1 280px; margin: 0; }
.bp-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--bp-border-ui);
	border-radius: var(--bp-radius);
	padding: 0;
	background: var(--wp--preset--color--base);
}
.bp-search .wp-block-search__input {
	border: 0;
	padding: 0.55rem 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	background: transparent;
	min-height: 44px;
}
.bp-search .wp-block-search__button {
	margin: 0;
	padding: 0 0.75rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	min-width: 44px;
}
.bp-search .wp-block-search__button:hover { background: var(--bp-surface); color: var(--wp--preset--color--contrast); }

@media (max-width: 781px) {
	/* Logo and menu button on one row, full-width search below. */
	.bp-header__row { flex-wrap: wrap; }
	.bp-logo { order: 1; }
	.bp-nav { order: 2; flex: 0 0 auto; }
	.bp-search { order: 3; flex: 1 1 100%; }
	.bp-nav .wp-block-navigation__responsive-container-open { padding: 10px; margin-right: -10px; }
	.bp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 3rem;
		font-size: var(--wp--preset--font-size--large);
		gap: 1rem;
	}
}

/* ---------- Intro, chips ---------- */
.bp-intro { margin-top: var(--wp--preset--spacing--30); }
.bp-intro h1 { margin-bottom: 0.5rem; }
.bp-intro__text { color: var(--bp-muted); font-size: var(--wp--preset--font-size--medium); margin-top: 0; }
.bp-intro__text p:last-child { margin-bottom: 0; }

.bp-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--bp-border-ui);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	transition: background-color 0.15s;
}
.bp-chip:hover { background: var(--bp-sage); color: var(--wp--preset--color--contrast); }
.bp-chip.is-current { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* ---------- Shop layout: filters + grid ---------- */
.bp-shop-layout { margin-top: var(--wp--preset--spacing--50); align-items: flex-start !important; }
@media (min-width: 782px) {
	.bp-shop-layout__filters { position: sticky; top: 1.5rem; }
}
@media (max-width: 781px) {
	.bp-shop-layout { gap: 0.75rem !important; }
	.bp-shop-layout__filters { flex-basis: auto !important; }
}

.bp-filters__title { margin: 0 0 0.75rem; }
.bp-filters .wp-block-woocommerce-product-filter-attribute,
.bp-filters .wp-block-woocommerce-product-filter-taxonomy {
	border-top: 1px solid var(--bp-border);
	padding-top: 1rem;
	margin-top: 1rem;
}
.bp-filter-title { margin: 0 0 0.5rem; font-weight: 600; }
.bp-filters .wc-block-product-filter-checkbox-list__label { font-size: var(--wp--preset--font-size--small); }
.bp-filters .wc-block-product-filter-checkbox-list__input { border-color: var(--bp-border-ui); }
/* Mobile-only "Filtrera produkter" button (WooCommerce hides it on desktop; don't override display there). */
.bp-filters .wc-block-product-filters__open-overlay {
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--bp-border-ui);
	border-radius: var(--bp-radius);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Bar above the grid: count · "Annonslänkar" · sorting */
.bp-grid__bar { gap: 0.5rem 1rem; margin-bottom: 1rem; }
.bp-grid__bar h2 { margin: 0 auto 0 0 !important; text-align: left !important; }
.bp-grid__bar .woocommerce-result-count { margin: 0; color: var(--bp-muted); font-size: var(--wp--preset--font-size--small); }
.bp-grid__bar .wc-block-catalog-sorting { margin-left: auto; }
.bp-grid__bar .woocommerce-ordering { margin: 0; }
.bp-grid__bar select {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	min-height: 40px;
	padding: 0 2rem 0 0.75rem;
	border: 1px solid var(--bp-border-ui);
	border-radius: var(--bp-radius);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.bp-ad-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bp-muted);
}

/* Product grid: 2 columns on mobile, 4 on desktop. */
.bp-grid .wc-block-product-template,
.bp-grid ul.wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1024px) {
	.bp-grid .wc-block-product-template,
	.bp-grid ul.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
	}
}
.bp-grid .wc-block-product-template > li {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
.bp-pagination { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--small); }

/* ---------- Product card (grids and single product share .bp-media) ---------- */
.bp-card { height: 100%; align-items: stretch !important; }
.bp-media,
.bp-media.wc-block-components-product-image {
	background: var(--bp-surface);
	border-radius: var(--bp-radius);
	overflow: hidden;
	margin: 0 0 0.75rem !important;
	aspect-ratio: 1 / 1;
}
.bp-media a { display: block; height: 100%; }
.bp-media img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	padding: 8%;
	box-sizing: border-box;
	mix-blend-mode: multiply; /* white product backgrounds blend into the grey */
	transition: transform 0.25s ease;
}
.bp-card .bp-media a:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .bp-media img { transition: none; } .bp-card .bp-media a:hover img { transform: none; } }

.bp-brand {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.bp-card__title { margin: 0 !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
.bp-card__title a { text-decoration: none; }
.bp-card__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.bp-card__price { margin: 0.25rem 0 0 !important; font-weight: 600; }
.bp-card__price ins { text-decoration: none; }
.bp-shop { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--bp-muted); }
.bp-card__button { margin-top: auto !important; padding-top: 0.75rem; width: 100%; }
.bp-card__button .wp-block-button__link,
.bp-card .wc-block-components-product-button__button {
	width: 100%;
	min-height: 44px;
	justify-content: center;
	font-size: var(--wp--preset--font-size--small) !important;
	border-radius: var(--bp-radius);
}
.bp-card .wc-block-components-product-button { align-items: stretch !important; }

/* ---------- Single product ---------- */
.bp-product { margin-top: var(--wp--preset--spacing--40); }
.bp-product__summary > * + * { margin-top: 0.75rem; }
.bp-product__summary .wp-block-post-title { margin-top: 0.25rem; }
.bp-product__excerpt { color: var(--bp-muted); }
.bp-product__summary .bp-shop { font-size: var(--wp--preset--font-size--small); }
.bp-product__summary .cart.bp-affiliate { margin: 1rem 0 0; }
.bp-product__summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	min-width: min(100%, 320px);
	box-sizing: border-box;
	max-width: 100%;
	padding: 0 2rem;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
}
@media (max-width: 781px) { .bp-product__summary .single_add_to_cart_button { width: 100%; } }
.bp-ad-note { margin-top: 0.5rem !important; }

/* ---------- Guide + FAQ ---------- */
.bp-after-grid { margin-top: var(--wp--preset--spacing--60); }
.bp-guide h2 { margin-top: 2rem; }
.bp-faq { margin-top: var(--wp--preset--spacing--50); }
.bp-faq details { border-bottom: 1px solid var(--bp-border); }
.bp-faq details:first-of-type { border-top: 1px solid var(--bp-border); }
.bp-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 2rem 1rem 0;
	font-weight: 600;
	position: relative;
}
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.85rem; font-weight: 400; font-size: 1.25rem; }
.bp-faq details[open] summary::after { content: "–"; }
.bp-faq details > :not(summary) { margin-top: 0; color: var(--bp-muted); }

/* ---------- Home ---------- */
.bp-hero h1 { margin-bottom: 0.75rem; }
.bp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; }
@media (min-width: 1024px) { .bp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.25rem !important; } }
.bp-tile {
	position: relative;
	min-height: 9rem;
	padding: 1.25rem;
	border-radius: var(--bp-radius);
	justify-content: flex-end !important;
	gap: 0.25rem !important;
	transition: box-shadow 0.15s;
}
.bp-tile h2 { margin: 0; }
.bp-tile p { margin: 0; color: #3a3a3a; }
.bp-tile a { text-decoration: none; }
.bp-tile a::after { content: ""; position: absolute; inset: 0; } /* whole tile clickable */
.bp-tile:hover { box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast); }
.bp-tile:focus-within { outline: 2px solid var(--bp-sage-dark); outline-offset: 2px; }
@media (min-width: 1024px) { .bp-tile { min-height: 13rem; padding: 1.75rem; } }

.bp-steps { grid-template-columns: 1fr !important; }
@media (min-width: 782px) { .bp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2rem !important; } }
.bp-steps h3 { margin-bottom: 0.25rem; }
.bp-steps p { margin-top: 0; }

/* ---------- Footer ---------- */
.bp-footer h2 { margin-bottom: 0.5rem; }
.bp-footer__links { list-style: none; padding: 0; margin: 0; }
.bp-footer__links li { margin: 0.35rem 0; }
.bp-footer__links a { text-decoration: none; }
.bp-footer__links a:hover { text-decoration: underline; }
.bp-disclosure { text-align: left; }

/* WooCommerce injects a store-notices container as the first child of the product collection's first group. */
.bp-grid__bar > .wc-block-components-notices { order: -1; flex: 0 0 100%; }
.bp-grid__bar > .wc-block-components-notices:not(:has(*)) { display: none; }