/*
 * Foundation: page, type, links, buttons, form fields, notices and the store
 * notice bar. Components (cards, product page, cart, checkout) live in their
 * own slices and build on these.
 */

/* ---------- Page and type ---------- */

/* Additional CSS forces the page colour with !important; this is the one
   place the redesign has to answer in kind. */
body.sd-ui {
	background-color: var(--sd-bg) !important;
	font-family: var(--sd-font);
	color: var(--sd-ink-2);
	line-height: var(--sd-leading);
	-webkit-font-smoothing: antialiased;
}

body.sd-ui h1,
body.sd-ui h2,
body.sd-ui h3,
body.sd-ui h4,
body.sd-ui .wp-block-heading {
	font-family: var(--sd-font);
	color: var(--sd-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: var(--sd-leading-tight);
}

body.sd-ui h1,
body.sd-ui .entry-title {
	font-size: var(--sd-text-2xl);
}

/* Section titles on the home ("Los más vendidos", "Pollo"…) were thin 300. */
body.sd-ui .entry-content > h2,
body.sd-ui .entry-content > .wp-block-heading,
body.sd-ui section.related > h2,
body.sd-ui section.up-sells > h2 {
	font-size: var(--sd-text-xl);
	font-weight: 800;
	margin: var(--sd-s8) 0 var(--sd-s4);
}

body.sd-ui a {
	color: var(--sd-primary);
}

body.sd-ui a:hover {
	color: var(--sd-primary-hover);
}

body.sd-ui a:focus-visible,
body.sd-ui button:focus-visible,
body.sd-ui .button:focus-visible,
body.sd-ui input:focus-visible,
body.sd-ui select:focus-visible,
body.sd-ui textarea:focus-visible {
	outline: 3px solid var(--sd-focus);
	outline-offset: 2px;
}

/* ---------- Buttons ---------- */

/* Secondary (default): quiet, outlined, still a full tap target. */
body.sd-ui .button,
body.sd-ui button.button,
body.sd-ui input.button,
body.sd-ui .woocommerce a.button,
body.sd-ui .woocommerce button.button,
body.sd-ui input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sd-s2);
	min-height: var(--sd-tap);
	padding: 0 var(--sd-s5);
	border: 1.5px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-size: var(--sd-text-md);
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

body.sd-ui .button:hover,
body.sd-ui .woocommerce a.button:hover,
body.sd-ui .woocommerce button.button:hover {
	background: var(--sd-surface-2);
	border-color: var(--sd-muted);
	color: var(--sd-ink);
}

/* Primary: the one action that moves the order forward. */
body.sd-ui .button.alt,
body.sd-ui .woocommerce a.button.alt,
body.sd-ui .woocommerce button.button.alt,
body.sd-ui .single_add_to_cart_button,
body.sd-ui .woocommerce button.single_add_to_cart_button,
body.sd-ui .add_to_cart_button,
body.sd-ui .woocommerce a.add_to_cart_button,
body.sd-ui .checkout-button,
body.sd-ui #place_order,
body.sd-ui .wc-block-cart__submit-button,
body.sd-ui .wc-block-components-checkout-place-order-button {
	background: var(--sd-primary);
	border-color: var(--sd-primary);
	color: #fff;
}

body.sd-ui .button.alt:hover,
body.sd-ui .woocommerce a.button.alt:hover,
body.sd-ui .woocommerce button.button.alt:hover,
body.sd-ui .single_add_to_cart_button:hover,
body.sd-ui .woocommerce button.single_add_to_cart_button:hover,
body.sd-ui .add_to_cart_button:hover,
body.sd-ui .woocommerce a.add_to_cart_button:hover,
body.sd-ui .checkout-button:hover,
body.sd-ui #place_order:hover,
body.sd-ui .wc-block-cart__submit-button:hover {
	background: var(--sd-primary-hover);
	border-color: var(--sd-primary-hover);
	color: #fff;
	filter: none;
}

body.sd-ui .button:active,
body.sd-ui .single_add_to_cart_button:active,
body.sd-ui #place_order:active {
	transform: translateY(1px);
}

/* WooCommerce marks a button that is waiting on AJAX with .loading. */
body.sd-ui .button.loading {
	opacity: 0.7;
}

/* ---------- Form fields ---------- */

body.sd-ui input[type="text"],
body.sd-ui input[type="email"],
body.sd-ui input[type="tel"],
body.sd-ui input[type="number"],
body.sd-ui input[type="password"],
body.sd-ui input[type="search"],
body.sd-ui select,
body.sd-ui textarea {
	min-height: var(--sd-tap);
	padding: 10px 14px;
	border: 1.5px solid var(--sd-line);
	border-radius: var(--sd-radius-sm);
	background-color: var(--sd-surface);
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-size: 16px; /* 16 px or iOS zooms the page on focus */
	box-shadow: none;
}

body.sd-ui textarea {
	min-height: 96px;
}

body.sd-ui input:focus,
body.sd-ui select:focus,
body.sd-ui textarea:focus {
	border-color: var(--sd-ink-2);
	background-color: var(--sd-surface);
}

body.sd-ui label {
	color: var(--sd-ink);
	font-weight: 600;
	font-size: var(--sd-text-sm);
}

/* ---------- Notices ---------- */

body.sd-ui .woocommerce-info,
body.sd-ui .woocommerce-message,
body.sd-ui .woocommerce-error,
body.sd-ui .woocommerce-noreviews,
body.sd-ui p.no-comments {
	margin: 0 0 var(--sd-s4);
	padding: var(--sd-s3) var(--sd-s4);
	border: 1px solid var(--sd-line);
	border-left: 4px solid var(--sd-muted);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	color: var(--sd-ink);
	font-size: var(--sd-text-sm);
	box-shadow: var(--sd-shadow-1);
}

body.sd-ui .woocommerce-info::before,
body.sd-ui .woocommerce-message::before,
body.sd-ui .woocommerce-error::before {
	display: none;
}

body.sd-ui .woocommerce-message {
	border-left-color: var(--sd-deal);
}

body.sd-ui .woocommerce-error {
	border-left-color: var(--sd-primary);
	background: var(--sd-primary-soft);
}

body.sd-ui .woocommerce-info a,
body.sd-ui .woocommerce-message a,
body.sd-ui .woocommerce-error a {
	color: var(--sd-primary);
	font-weight: 600;
}

/* ---------- Store notice ----------
   WooCommerce prints it at the top of <body>; Storefront pinned it over the
   bottom of the screen in blue, where it covered products and the buy button.
   In the flow, above the header, it reads as an announcement bar instead. */

body.sd-ui .woocommerce-store-notice,
body.sd-ui p.demo_store {
	position: static;
	margin: 0;
	padding: var(--sd-s2) var(--sd-s4);
	background: var(--sd-ink);
	color: #fff;
	font-size: var(--sd-text-xs);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	box-shadow: none;
}

body.sd-ui .woocommerce-store-notice a,
body.sd-ui p.demo_store a {
	color: #fff;
}

body.sd-ui .woocommerce-store-notice__dismiss-link {
	float: none;
	display: inline;
	margin: 0 0 0 var(--sd-s2);
	padding: 0;
	background: none;
	font-weight: 600;
	opacity: 0.8;
}