/**
 * Shared base rules for the catalog runtime.
 */

/*
 * Keep the viewport width stable when navigating between a short page and one
 * tall enough to need the vertical scrollbar. Without a reserved gutter,
 * centered shells — including the site header, logo, actions, headings and
 * catalog grid — shift horizontally by the scrollbar width.
 */
html {
	scrollbar-gutter: stable;
}

.myc-app-body {
	font-family: var(--ps-font-sans);
}

.myc-app-body .myc-virtual-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* `summary` earns its place here now that the product steps are disclosures:
   their header is the control, and without it the browser default was the one
   focus treatment on the page that was not the theme's. */
.myc-app-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid rgb(28 53 87 / 44%);
	outline-offset: 3px;
}

/* WooCommerce gives the first notice tabindex="-1" and focuses it on load so a
   screen reader announces it (woocommerce.js, focus_populate_live_region). That
   focus is not the visitor's: the ring above would draw a second frame around
   the notice's own border, on checkout, account and anywhere else it happens. */
.myc-app-body :is(.woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner)[tabindex='-1']:focus-visible {
	outline: none;
	outline-offset: 0;
}

.myc-app-body :is(
	button,
	input[type='button'],
	input[type='submit'],
	input[type='reset'],
	[role='button'],
	a.myc-primary-link,
	a.myc-secondary-link,
	a.myc-card-link,
	a.myc-card-buy,
	a.myc-page-link
) {
	-webkit-tap-highlight-color: transparent;
}

.myc-app-body :is(button, input, select, textarea):disabled {
	cursor: not-allowed;
}

@media (max-width: 760px) {
	.myc-page {
		padding-right: var(--ps-page-gutter-mobile);
		padding-left: var(--ps-page-gutter-mobile);
	}

	.myc-layout-full .myc-page {
		padding-right: clamp(var(--ps-page-gutter-mobile), 4vw, 16px);
		padding-left: clamp(var(--ps-page-gutter-mobile), 4vw, 16px);
	}
}

/*
 * The kicker + h1 band at the top of the shop, search, category and account
 * dashboard pages. One shared rule so all four move together instead of
 * four near-identical copies (they started that way and had already drifted
 * once by the time this was written).
 */
.myc-account-dashboard-head,
.myc-view-catalog .myc-catalog-page-heading,
.myc-view-search .myc-catalog-page-heading,
.myc-view-category .myc-catalog-page-heading {
	background-color: #e7e2e2;
	background-image:
		radial-gradient(circle at 12% 24%, rgb(255 255 255 / 86%) 0 1px, transparent 1.5px),
		radial-gradient(circle at 78% 68%, rgb(112 103 107 / 7%) 0 1px, transparent 1.5px),
		linear-gradient(135deg, rgb(255 255 255 / 72%), rgb(248 246 246 / 92%));
	background-size: 7px 7px, 9px 9px, 100% 100%;
}

/*
 * One rhythm for every block, in one place.
 *
 * Each of these used to set its own outer margin in its own stylesheet, and
 * they had drifted: three had a bottom and no top, one had both, one had a gap
 * only between two of itself, and the newest had none at all. A page built from
 * them came out unevenly spaced and no single file said what the spacing was.
 *
 * Top and bottom both, which reads as double but is not: these are siblings in
 * normal flow, so adjacent margins collapse and 64px above meets 64px below as
 * one 64px gap. What it buys is the first block on a page being spaced from the
 * header, and the last from the footer, without a rule for either case.
 *
 * Stated here rather than in the component sheets because those are enqueued
 * only on pages that use them, and the rhythm is a property of the page.
 */
.ps-cover,
.ps-highlights,
.ps-reviews,
.ps-latest-products,
.ps-category-block,
.ps-info-box {
	margin-block: var(--ps-block-rhythm);
}

/*
 * Except at the ends, where the page has already left the room.
 *
 * `.myc-page` pads 64px top and bottom and the section inside it adds 8 more,
 * and padding stops a child's margin collapsing through it — so the first
 * block's 70px was added to that instead of disappearing into it, and the gap
 * under the header came out at 142px. The same at the foot, against the
 * padding before the footer.
 *
 * The rhythm is what separates blocks *from each other*; what separates the
 * outermost ones from the page is the page's own padding, and it was there
 * first.
 */
:is(.ps-cover, .ps-highlights, .ps-reviews, .ps-latest-products, .ps-category-block, .ps-info-box):first-child {
	margin-block-start: 0;
}

:is(.ps-cover, .ps-highlights, .ps-reviews, .ps-latest-products, .ps-category-block, .ps-info-box):last-child {
	margin-block-end: 0;
}

/*
 * A box in a column is not a block on the page: the row is. Its margin would
 * come out of the height the column stretched it to, so the row carries the
 * spacing and the boxes sit flush inside it.
 */
.wp-block-column .ps-info-box {
	margin-block: 0;
}

@media (max-width: 760px) {
	.ps-cover,
	.ps-highlights,
	.ps-reviews,
	.ps-latest-products,
	.ps-category-block,
	.ps-info-box {
		margin-block: var(--ps-block-rhythm-compact);
	}

	.wp-block-column .ps-info-box {
		margin-block: 0;
	}
}

/*
 * The banner sits closer to whatever is above it than the rhythm asks.
 *
 * Its own decision, not a second rhythm: it is a full-width panel with its own
 * dark ground and reads as heavier than the blocks around it, so the gap that
 * looks right between two ordinary ones looks adrift above this. The owner's
 * numbers, tuned on the page.
 *
 * After the compact block rather than before it, and at the same weight: the
 * rhythm sets both margins at once, so an exception written earlier would be
 * overwritten below 760px and the banner would quietly go back to 48. Order is
 * doing the work here, which is why the two live together.
 *
 * 1080px, not 760: this follows the phone-and-tablet line the rest of the theme
 * draws, and the rhythm's own breakpoint is narrower.
 */
.ps-cover {
	margin-block-start: 50px;
}

@media (max-width: 1080px) {
	.ps-cover {
		margin-block-start: 35px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.myc-app-body *,
	.myc-app-body *::before,
	.myc-app-body *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* -------------------------------------------------- botón de WhatsApp -- */

/*
 * The floating WhatsApp button comes from a plugin and sits above the page on
 * z-index alone, so while one of this theme's overlays is open it lands on top
 * of the panel — over the cart, over the mobile menu, over the filter drawer.
 * It steps aside for as long as they are open.
 *
 * Two body classes because two scripts set them: the shared interface lock
 * covers the search sheet, the mobile menu and the filters; the cart drawer
 * keeps a lock of its own. The size-guide dialog needs neither — it opens with
 * showModal(), so the browser puts it in the top layer and the button is behind
 * its backdrop already.
 *
 * `visibility` and not `display`, so the plugin's own show and hide logic is
 * never contradicted: the button comes back exactly as the plugin left it.
 */
.myc-app-body .wa__widget_container {
	transition: opacity var(--ps-transition-fast), visibility var(--ps-transition-fast);
}

body.myc-interface-is-open .wa__widget_container,
body.myc-cart-is-open .wa__widget_container {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}