/**
 * E-Bicis storefront skin (Layer 5) — RadPower-style product cards + grid.
 *
 * This stylesheet only loads on the E-Bicis site (shipped by the client plugin),
 * so it freely re-paints the SHARED product-card / product-grid into a bold,
 * white, spec-forward commerce look — without touching the bookstore (Vendaval),
 * which keeps its cover-forward boutique card. Everything reads design tokens, so
 * the teal/orange palette comes from styles/ebicis.json.
 *
 * Reference: radpowerbikes.com (3-up grid, square white tiles, quick-spec chips,
 * bold price, financing line, full-width CTA).
 */

/* ----------------------------------------------------------------- *
 *  Cross-document View Transitions — a modern page-to-page morph     *
 *  (home ↔ catálogo ↔ archives ↔ producto). Progressive enhancement: *
 *  browsers without support just navigate instantly. The new page    *
 *  rises + fades in while the old fades up and away — a lively, last- *
 *  generation feel. Reduced-motion users get an instant swap.        *
 * ----------------------------------------------------------------- */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation: woo-sil7en-vt-out 220ms var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)) both;
	}

	::view-transition-new(root) {
		animation: woo-sil7en-vt-in 380ms var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)) both;
	}

	@keyframes woo-sil7en-vt-out {
		to {
			opacity: 0;
			transform: translateY(-10px) scale(0.992);
		}
	}

	@keyframes woo-sil7en-vt-in {
		from {
			opacity: 0;
			transform: translateY(14px) scale(0.994);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* ----------------------------------------------------------------- *
 *  Slightly tighter type scale for E-Bicis — a touch smaller than    *
 *  the base reads cleaner / more premium. Scales rem uniformly.      *
 * ----------------------------------------------------------------- */
html {
	font-size: 96.5%;
}

/* ----------------------------------------------------------------- *
 *  Product card — white tile, spec-forward                           *
 * ----------------------------------------------------------------- */
.woo-sil7en-product-card {
	--wsx-card-aspect: 1 / 1;
	--wsx-card-fit: contain;
	gap: 0.55rem;
	padding: 1rem 1rem 1.15rem;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #d9e6e3);
	border-radius: var(--wp--custom--radius--xl, 0.75rem);
	transition:
		transform 250ms var(--wp--custom--motion--ease--soft, ease),
		box-shadow 250ms var(--wp--custom--motion--ease--soft, ease),
		border-color 250ms var(--wp--custom--motion--ease--soft, ease);
}

@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-product-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--wp--custom--shadow--md, 0 16px 40px rgb(13 27 26 / 0.1));
		border-color: color-mix(in srgb, var(--wp--preset--color--primary, #0ea89b) 45%, var(--wp--preset--color--border, #d9e6e3));
	}
}

/* The tile lifts as a whole; the cover itself sits flat on white. */
.woo-sil7en-product-card__media {
	background: var(--wp--preset--color--base, #fff);
	border: 0;
	border-radius: var(--wp--custom--radius--lg, 0.5rem);
}

.woo-sil7en-product-card:hover .woo-sil7en-product-card__media {
	transform: none;
	box-shadow: none;
}

.woo-sil7en-product-card__media img {
	padding: 0.5rem;
}

.woo-sil7en-product-card__name {
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	font-weight: 700;
	line-height: 1.2;
}

.woo-sil7en-product-card__name a:hover {
	color: var(--wp--preset--color--primary, #0ea89b);
}

/* Spec chips sit just under the title (power / range / speed / payload). */
.woo-sil7en-product-card__specs {
	margin-block: 0.35rem 0.15rem;
}

/* Price: bold + dark (the financing line carries the brand colour). */
.woo-sil7en-product-card__price {
	font-size: var(--wp--preset--font-size--lg, 1.35rem);
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #0d1b1a);
}

/* ----------------------------------------------------------------- *
 *  Premium dark buttons (RadPower-style).                            *
 *  Charcoal fill + white text + soft depth + hover lift — far        *
 *  punchier than the soft teal solid. Teal stays for links/accents.  *
 *  Filled buttons on DARK surfaces flip to white (override below).   *
 * ----------------------------------------------------------------- */
.woo-sil7en-product-card__atc,
.woo-sil7en-add-to-cart__button.wp-element-button,
.woo-sil7en-btn--primary,
.woo-sil7en-button--primary,
.wp-element-button:not(.is-style-outline) {
	align-self: stretch;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--contrast, #1a1a1a);
	border: 1.5px solid var(--wp--preset--color--contrast, #1a1a1a);
	border-radius: var(--wp--custom--radius--pill, 999px);
	box-shadow:
		0 1px 2px rgb(0 0 0 / 0.10),
		0 8px 20px -10px rgb(0 0 0 / 0.45);
	transition:
		background 160ms ease,
		box-shadow 200ms ease,
		transform 160ms ease;
}

.woo-sil7en-product-card__atc {
	margin-block-start: 0.75rem;
	padding: 0.72rem 1rem;
	font-size: var(--wp--preset--font-size--sm, 0.95rem);
}

.woo-sil7en-product-card__atc:hover,
.woo-sil7en-product-card__atc:focus-visible,
.woo-sil7en-add-to-cart__button.wp-element-button:hover,
.woo-sil7en-add-to-cart__button.wp-element-button:focus-visible,
.woo-sil7en-btn--primary:hover,
.woo-sil7en-btn--primary:focus-visible,
.woo-sil7en-button--primary:hover,
.woo-sil7en-button--primary:focus-visible,
.wp-element-button:not(.is-style-outline):hover,
.wp-element-button:not(.is-style-outline):focus-visible {
	color: #fff;
	background: #2b3138;
	border-color: #2b3138;
	box-shadow:
		0 2px 6px rgb(0 0 0 / 0.16),
		0 16px 30px -12px rgb(0 0 0 / 0.5);
}

/* Core buttons.css does `a.woo-sil7en-btn:hover { color: primary-ink }` — and on
   E-Bicis primary-ink is DARK (#06302f), so a dark pill button's label turned
   dark-on-dark on hover. Doubling the class (0,3,0) outranks that 0,2,1 rule. */
.woo-sil7en-btn--primary.woo-sil7en-btn--primary:hover,
.woo-sil7en-btn--primary.woo-sil7en-btn--primary:focus-visible,
.woo-sil7en-button--primary.woo-sil7en-button--primary:hover,
.woo-sil7en-button--primary.woo-sil7en-button--primary:focus-visible {
	color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-product-card__atc:hover,
	.woo-sil7en-add-to-cart__button.wp-element-button:hover,
	.woo-sil7en-btn--primary:hover,
	.woo-sil7en-button--primary:hover,
	.wp-element-button:not(.is-style-outline):hover {
		transform: translateY(-1px);
	}
}

/* Outline / secondary buttons — crisp dark outline on light surfaces. */
.wp-element-button.is-style-outline,
.woo-sil7en-btn--secondary {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	background: transparent;
	border-color: var(--wp--preset--color--contrast, #1a1a1a);
	box-shadow: none;
}

.woo-sil7en-btn--secondary:hover,
.woo-sil7en-btn--secondary:focus-visible {
	color: #fff;
	background: var(--wp--preset--color--contrast, #1a1a1a);
	border-color: var(--wp--preset--color--contrast, #1a1a1a);
}

/* Out of stock → "Ver modelo": quiet dark outline (no fill, no shadow). */
.woo-sil7en-product-card__atc.is-view {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	background: transparent;
	border-color: var(--wp--preset--color--border, #e3e6e6);
	box-shadow: none;
}

.woo-sil7en-product-card__atc.is-view:hover,
.woo-sil7en-product-card__atc.is-view:focus-visible {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	background: transparent;
	border-color: var(--wp--preset--color--contrast, #1a1a1a);
	transform: none;
	box-shadow: none;
}

/* On dark surfaces (the "¿Listo…?" CTA band) flip filled buttons to white. */
.has-surface-strong-background-color .wp-element-button:not(.is-style-outline) {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	background: #fff;
	border-color: #fff;
	box-shadow: 0 2px 16px rgb(0 0 0 / 0.28);
}

.has-surface-strong-background-color .wp-element-button:not(.is-style-outline):hover,
.has-surface-strong-background-color .wp-element-button:not(.is-style-outline):focus-visible {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	background: color-mix(in srgb, #fff 88%, var(--wp--preset--color--primary, #00b8bf));
	border-color: color-mix(in srgb, #fff 88%, var(--wp--preset--color--primary, #00b8bf));
}

/* WooCommerce buttons (cart/checkout blocks + classic .button.alt) align with
   the dark site system. WC/theme.json paint these with the brand teal; this
   high-specificity rule brings the whole store in line. Quantity steppers and
   outline/link variants are intentionally excluded. */
.wc-block-components-button.wp-element-button:not(.is-link):not(.is-style-outline),
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	color: #fff;
	background-color: var(--wp--preset--color--contrast, #1a1a1a);
	border-color: var(--wp--preset--color--contrast, #1a1a1a);
}

.wc-block-components-button.wp-element-button:not(.is-link):not(.is-style-outline):hover,
.wc-block-components-button.wp-element-button:not(.is-link):not(.is-style-outline):focus,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: #fff;
	background-color: #2b3138;
	border-color: #2b3138;
}

/* CTAs that sit on DARK surfaces by design — the hero slides and the simulador
   result panel — use the same premium button, inverted to white-on-dark (the
   doubled class beats each block's own teal/amber rule regardless of load order). */
.woo-sil7en-hero-carousel .woo-sil7en-hero-carousel__cta,
.woo-sil7en-savings-calc .woo-sil7en-savings-calc__cta {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	background: #fff;
	border: 1px solid #fff;
	font-weight: 600;
	box-shadow:
		0 1px 2px rgb(0 0 0 / 0.12),
		0 10px 24px -10px rgb(0 0 0 / 0.5);
	transition:
		background 160ms ease,
		box-shadow 200ms ease,
		transform 160ms ease;
}

.woo-sil7en-hero-carousel .woo-sil7en-hero-carousel__cta:hover,
.woo-sil7en-hero-carousel .woo-sil7en-hero-carousel__cta:focus-visible,
.woo-sil7en-savings-calc .woo-sil7en-savings-calc__cta:hover,
.woo-sil7en-savings-calc .woo-sil7en-savings-calc__cta:focus-visible {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	background: color-mix(in srgb, #fff 86%, var(--wp--preset--color--primary, #00b8bf));
	border-color: color-mix(in srgb, #fff 86%, var(--wp--preset--color--primary, #00b8bf));
	box-shadow:
		0 2px 6px rgb(0 0 0 / 0.18),
		0 16px 30px -12px rgb(0 0 0 / 0.55);
}

@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-hero-carousel .woo-sil7en-hero-carousel__cta:hover,
	.woo-sil7en-savings-calc .woo-sil7en-savings-calc__cta:hover {
		transform: translateY(-1px);
	}
}

/* ----------------------------------------------------------------- *
 *  Grid — 3-up large tiles (RadPower), 2-up tablet, 1-up mobile      *
 * ----------------------------------------------------------------- */
.woo-sil7en-product-grid__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}

/* The grid sits in a ~900px column next to the filter sidebar, so 3-up must hold
   well below 900px; only drop to 2-up on real tablets and 1-up on phones. */
@container (max-width: 720px) {
	.woo-sil7en-product-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 460px) {
	.woo-sil7en-product-grid__list {
		grid-template-columns: 1fr;
	}
}

/* Fallback for browsers without container queries on narrow viewports. */
@media (max-width: 600px) {
	.woo-sil7en-product-grid__list {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------- *
 *  Logo sizing — cap the EBICIS wordmark so it never dominates.      *
 * ----------------------------------------------------------------- */
.wsh__brand-mark {
	max-height: 2.4rem;
	width: auto;
}

/* On the transparent overlay (over the dark hero) the nav is white, so invert
   the teal logo to white too; once the bar turns solid on scroll it reverts. */
.wsh--overlay:not(.wsh--solid):not(.wsh--exiting) .wsh__brand-mark {
	filter: brightness(0) invert(1);
}

/* Footer logo — teal wordmark inverted to white on the dark footer surface. */
.wsf__logo-img {
	max-height: 2.6rem;
	width: auto;
	filter: brightness(0) invert(1);
}

/* ----------------------------------------------------------------- *
 *  Mobile burger — lead with the menu links, not the promo.          *
 *  The shared site-header stacks its dark "Destacado de la semana"    *
 *  feature ABOVE the nav in the drawer below 64em. E-Bicis drops it   *
 *  on mobile/tablet so the category + menu links are the first thing  *
 *  shown; the desktop two-pane mega-menu (>=64em) keeps the feature   *
 *  as its left anchor. Unlayered, so it beats the block's @layer rule.*
 * ----------------------------------------------------------------- */
@media (max-width: 63.99em) {
	.wsh__feature {
		display: none;
	}
}

/* ----------------------------------------------------------------- *
 *  Mobile burger search — a plain, always-visible field at the top   *
 *  of the drawer (phones have no row-2 search). Injected by the      *
 *  client plugin into the shared site-header drawer; hidden from     *
 *  48em up, where the bar's own search returns.                      *
 * ----------------------------------------------------------------- */
.wsh__drawer-search {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-block: 0.25rem 1rem;
	padding-inline: 0.85rem;
	border: 1px solid var(--wp--preset--color--border, #d9e6e3);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--surface, #f5f7f7);
}

.wsh__drawer-search:focus-within {
	border-color: var(--wp--preset--color--primary, #00b8bf);
}

.wsh__drawer-search-input {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 2.9rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast, #0d1b1a);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.95rem);
}

.wsh__drawer-search-input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #0d1b1a) 60%, transparent);
}

.wsh__drawer-search-input:focus-visible {
	outline: none;
}

.wsh__drawer-search-submit {
	display: inline-grid;
	place-items: center;
	inline-size: 2.9rem;
	block-size: 2.9rem;
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--primary, #00b8bf);
	cursor: pointer;
}

@media (min-width: 48em) {
	.wsh__drawer-search {
		display: none;
	}
}

/* ----------------------------------------------------------------- *
 *  PDP — wide media gallery + sticky buy panel (RadPower-style).     *
 *  Overrides the book buy-box (narrow 3:4 cover) for the e-bike PDP. *
 * ----------------------------------------------------------------- */
@media (min-width: 48rem) {
	.woo-sil7en-buy-box {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: clamp(1.5rem, 1rem + 2vw, 3rem);
		align-items: start;
	}

	/* Buy panel follows the scroll while the gallery is tall. */
	.woo-sil7en-buy-box__panel {
		position: sticky;
		top: 5.5rem;
	}
}

/* Square, contained gallery on a calm surface (bikes, not 3:4 covers). */
.woo-sil7en-buy-box__cover {
	background: var(--wp--preset--color--surface, #f5f5f5);
}

.woo-sil7en-gallery__stage {
	aspect-ratio: 1 / 1;
}

.woo-sil7en-gallery:not(.is-lightbox) .woo-sil7en-gallery__img {
	object-fit: contain;
	padding: clamp(0.5rem, 2vw, 1.5rem);
}

.woo-sil7en-gallery__thumb button {
	width: 4rem;
	height: 4rem;
}

/* The e-bike cover fills its column on mobile (no 13rem book cap). */
@media (max-width: 47.99rem) {
	.woo-sil7en-buy-box__cover {
		max-inline-size: none;
	}
}


/* Guided finder surfaced below the catalogue grid (shop + category archives). */
.woo-sil7en-archive-finder {
	margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* The buying-guidance bands are full-width with no theme gutter, so the cards
   went edge-to-edge below wideSize. Give them a responsive horizontal inset. */
.woo-sil7en-finder-band,
.woo-sil7en-comparator-band {
	padding-inline: clamp(1rem, 0.4rem + 2.5vw, 3.5rem);
}

/* ----------------------------------------------------------------- *
 *  Footer (FSE, editable) — polish for the native-blocks footer.     *
 *  parts/footer.html is now core blocks (Group / Columns / List /    *
 *  Social Icons / Site Logo), so it is fully editable in the Site    *
 *  Editor; this only paints it to match the dark editorial brand.    *
 * ----------------------------------------------------------------- */
.woo-sil7en-footer-fse a {
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 82%, transparent);
	text-decoration: none;
}

.woo-sil7en-footer-fse a:hover,
.woo-sil7en-footer-fse a:focus-visible {
	color: var(--wp--preset--color--base, #fff);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--wp--preset--color--accent, #ffb703);
}

/* Column titles — gold eyebrow, uppercase, tracked (our editorial look). The
   doubled scope outranks the group's inherited has-base-color on the heading. */
.woo-sil7en-footer-fse .woo-sil7en-footer-fse__title {
	margin-block-end: 1rem;
	color: var(--wp--preset--color--accent, #ffb703);
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Link columns — reset list chrome, comfortable vertical rhythm. */
.woo-sil7en-footer-fse__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.woo-sil7en-footer-fse__nav {
	column-gap: var(--wp--preset--spacing--lg, 2rem);
}

/* Brand column — teal logo inverted to white on the dark footer. */
.woo-sil7en-footer-fse .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.woo-sil7en-footer-fse__desc,
.woo-sil7en-footer-fse__nap {
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 82%, transparent);
	margin-block: 0.35rem;
}

.woo-sil7en-footer-fse__note {
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 60%, transparent);
	font-style: italic;
}

.woo-sil7en-footer-fse__social {
	margin-block-start: 1rem;
}

/* Trust strip — quiet, muted, a hairline above. */
.woo-sil7en-footer-fse__trust {
	gap: 1.75rem;
	padding-block-start: var(--wp--preset--spacing--md, 1.5rem);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fff) 16%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 72%, transparent);
}

.woo-sil7en-footer-fse__trust p {
	margin: 0;
}

/* Bottom bar — give the inline 1px top border a visible colour + style. */
.woo-sil7en-footer-fse__bottom {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fff) 16%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 60%, transparent);
}

.woo-sil7en-footer-fse__bottom p {
	margin: 0;
}