/*
Theme Name: Nat and Fit
Template: twentytwentyfive
Description: Child theme of Twenty Twenty-Five for Nat and Fit. Colours, fonts, sizes and spacing live in theme.json (edit them in Apariencia → Editor → Estilos). This file only holds the block styles registered in functions.php and a few components.
Version: 3.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: natandfit
*/

/* ==========================================================================
   1. Base
   ========================================================================== */
:root {
	--nf-radius: 24px;
	--nf-radius-lg: 28px;
	--nf-border: 1px solid rgba(10, 10, 10, .08);
	--nf-muted-on-dark: #b9beb3;
	--nf-shadow: 0 18px 40px rgba(10, 10, 10, .08);
}
html { scroll-behavior: smooth; }
::selection { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--accent-1);
	border-radius: 6px;
}
:where(.is-style-nf-dark, .is-style-nf-card-dark, .nf-site-footer) :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--accent-1);
	box-shadow: none;
}

/* Muted text (colour «Gris texto») stays readable on dark backgrounds. */
:where(.is-style-nf-dark, .is-style-nf-card-dark, .nf-site-footer) .has-accent-4-color { color: var(--nf-muted-on-dark) !important; }
/* Highlighted words in headings (Resaltar → colour «Verde principal»). */
mark.has-accent-1-color { background: none !important; }

/* ==========================================================================
   2. Header (solid and sticky, or transparent over the first section)
   ========================================================================== */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0); }

.nf-header {
	--nf-header-fg: var(--wp--preset--color--contrast);
	color: var(--nf-header-fg);
	background: rgba(255, 255, 255, .85);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid rgba(10, 10, 10, .06);
	transition: background-color .3s ease, border-color .3s ease;
}
body.nf-header-overlay .wp-site-blocks > header.wp-block-template-part { position: fixed; left: 0; right: 0; }
body.nf-header-overlay:not(.nf-scrolled) .nf-header {
	--nf-header-fg: var(--nf-overlay-fg, #fff);
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
body.nf-header-dark { --nf-overlay-fg: var(--wp--preset--color--contrast); }
/* Room for the floating header in the first section. */
body.nf-header-overlay .wp-block-post-content > .alignfull:first-child { padding-top: calc(var(--wp--preset--spacing--60) + 76px) !important; }

/* Every item in the header (title, menu, icons) uses the same colour… */
.nf-header :where(.wp-block-site-title a, .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-open, .wc-block-customer-account__link, .wc-block-mini-cart__button) {
	color: var(--nf-header-fg);
}
/* …and the same underline on hover. */
.nf-header .wp-block-navigation-item__content { padding: .35em .1em; position: relative; }
.nf-header .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
	background: var(--wp--preset--color--accent-1); transform: scaleX(0); transition: transform .2s ease;
}
.nf-header .wp-block-navigation-item__content:hover::after,
.nf-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
/* The open mobile menu always reads dark on white. */
.nf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }

/* Account and cart icons: same size, colour and hit area. */
.nf-header-icons { gap: .25rem !important; }
.nf-header :where(.wc-block-customer-account__link, .wc-block-mini-cart__button) {
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0;
	border-radius: 999px; background: transparent; border: 0; cursor: pointer;
	transition: background-color .15s ease;
}
.nf-header :where(.wc-block-customer-account__link, .wc-block-mini-cart__button):hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nf-header :where(.wc-block-customer-account__account-icon, .wc-block-mini-cart__icon) { width: 22px; height: 22px; fill: currentColor; color: currentColor; }
.nf-header .wc-block-mini-cart__button { position: relative; }
.nf-header .wc-block-mini-cart__badge {
	position: absolute; top: 2px; right: 0; transform: none; margin: 0;
	min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
	font-size: .7rem; font-weight: 700; line-height: 18px;
	background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--contrast) !important; border: 0;
}
.nf-header .wc-block-mini-cart__amount { display: none; }

/* ==========================================================================
   3. Block styles (registered in functions.php, chosen in the «Estilos» panel)
   ========================================================================== */

/* Group · Tarjeta / Tarjeta oscura */
.is-style-nf-card,
.is-style-nf-card-dark {
	display: flex; flex-direction: column; gap: 1rem; height: 100%;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--nf-radius);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.is-style-nf-card { background: var(--wp--preset--color--base); border: var(--nf-border); color: var(--wp--preset--color--contrast); }
.is-style-nf-card-dark { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--contrast); }
.is-style-nf-card-dark :where(h1, h2, h3, h4, .is-style-nf-price) { color: var(--wp--preset--color--base); }
:where(.is-style-nf-card, .is-style-nf-card-dark) > * { margin-block: 0 !important; }
:where(.is-style-nf-card, .is-style-nf-card-dark) > .wp-block-buttons:last-child { margin-top: auto !important; padding-top: .25rem; }
:where(.wp-block-column, .wp-block-post-content) > .is-style-nf-card:hover,
:where(.wp-block-column) > .is-style-nf-card-dark:hover { transform: translateY(-4px); box-shadow: var(--nf-shadow); }
.is-style-nf-card:hover { border-color: rgba(47, 133, 0, .35); }
/* A card laid out as a row (Group → Fila): icon + text, no lift. */
.is-style-nf-card.is-layout-flex:not(.is-vertical) { flex-direction: row; align-items: center; gap: 1rem; height: auto; padding: 1.1rem 1.25rem; }
.is-style-nf-card.is-layout-flex:not(.is-vertical):hover { transform: none; box-shadow: none; }
.is-style-nf-card.is-layout-flex:not(.is-vertical) > .wp-block-group > * { margin: 0; }

/* Group / Cover · Sección oscura con brillo */
.is-style-nf-dark { color: var(--wp--preset--color--base); overflow: hidden; }
.wp-block-group.is-style-nf-dark {
	background:
		radial-gradient(50% 70% at 90% 10%, rgba(102, 255, 0, .16), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(102, 255, 0, .07), transparent 70%),
		var(--wp--preset--color--contrast);
}
.wp-block-cover.is-style-nf-dark .wp-block-cover__background {
	background:
		radial-gradient(50% 70% at 90% 10%, rgba(102, 255, 0, .22), transparent 70%),
		linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .75) 55%, rgba(10, 10, 10, .55) 100%) !important;
	opacity: 1 !important;
}
.is-style-nf-dark :where(h1, h2, h3, h4) { color: var(--wp--preset--color--base); }
.is-style-nf-dark .has-accent-4-color { color: #c9cec3 !important; }
/* Rounded dark box inside a section (e.g. the final call to action). */
.wp-block-group.is-style-nf-dark:not(.alignfull) { border-radius: 32px; }

/* Paragraph · Etiqueta */
.is-style-nf-eyebrow {
	display: inline-flex; align-items: center; gap: .5em;
	font-size: .78rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}
.is-style-nf-eyebrow::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
	background: var(--wp--preset--color--accent-1); box-shadow: 0 0 0 4px rgba(102, 255, 0, .2);
}
.is-style-nf-eyebrow.has-text-align-center { display: flex; justify-content: center; }
:where(.is-style-nf-dark, .is-style-nf-card-dark) .is-style-nf-eyebrow { color: var(--wp--preset--color--accent-1); }

/* Paragraph · Insignia verde */
.is-style-nf-tag {
	align-self: flex-start; display: inline-block; width: fit-content;
	padding: .25em .85em; border-radius: 999px;
	font-size: .75rem !important; font-weight: 600;
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
}

/* Paragraph · Precio («desde <strong>40 €</strong> / sesión») */
.is-style-nf-price { font-weight: 700; }
.is-style-nf-price strong { font-size: 2.1rem; letter-spacing: -.02em; }

/* Paragraph · Número en círculo / en cuadrado */
.is-style-nf-number,
.is-style-nf-chip {
	display: grid; place-items: center; flex: none; font-weight: 700;
	width: 52px; height: 52px; font-size: 1rem !important;
}
.is-style-nf-number { border-radius: 50%; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-1); }
.is-style-nf-chip { border-radius: 16px; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); }
.is-style-nf-card-dark .is-style-nf-chip { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); }

/* Paragraph · Icono (the text is read by screen readers, the icon is drawn) */
[class*="is-style-nf-icon-"] {
	position: relative; flex: none; width: 52px; height: 52px; margin: 0;
	border-radius: 16px; background: var(--wp--preset--color--contrast);
	font-size: 0 !important; color: transparent; overflow: hidden;
}
[class*="is-style-nf-icon-"]::before {
	content: ""; position: absolute; inset: 13px; background: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--nf-icon) center / contain no-repeat; mask: var(--nf-icon) center / contain no-repeat;
}
.is-style-nf-icon-whatsapp { --nf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.3-.5 0-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l1.9.9c.3.1.5.2.5.3.1.2.1.7-.1 1.2z'/%3E%3C/svg%3E"); }
.is-style-nf-icon-phone { --nf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); }
.is-style-nf-icon-mail { --nf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }
.is-style-nf-icon-pin { --nf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.is-style-nf-icon-instagram { --nf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM17.5 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E"); }
.is-style-nf-icon-clock { --nf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.4 3.2 1.9-.8 1.3L11 13V7h2v5.4z'/%3E%3C/svg%3E"); }

/* List · Lista con checks */
ul.is-style-nf-check { list-style: none; padding-left: 0; }
ul.is-style-nf-check li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
ul.is-style-nf-check li::before {
	content: "✓"; position: absolute; left: 0; top: .15em;
	width: 1.35rem; height: 1.35rem; border-radius: 50%;
	display: grid; place-items: center; font-size: .75rem; font-weight: 700;
	background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3);
}
:where(.is-style-nf-dark, .is-style-nf-card-dark) ul.is-style-nf-check li::before { background: rgba(102, 255, 0, .15); color: var(--wp--preset--color--accent-1); }

/* Image · Redondeada / Vertical redondeada / Cabecera de tarjeta */
.is-style-nf-rounded img { border-radius: var(--nf-radius); }
.is-style-nf-portrait img { border-radius: var(--nf-radius-lg); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.is-style-nf-card-top { margin: calc(-1 * clamp(1.5rem, 2.5vw, 2rem)) calc(-1 * clamp(1.5rem, 2.5vw, 2rem)) .25rem !important; }
.is-style-nf-card-top img { border-radius: var(--nf-radius) var(--nf-radius) 0 0; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Group · Preguntas frecuentes (Detalles blocks inside) */
.is-style-nf-faq > .wp-block-details { border-bottom: 1px solid rgba(10, 10, 10, .1); padding: 1.1rem 0; margin: 0; }
.is-style-nf-faq summary { font-weight: 600; font-size: 1.1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.is-style-nf-faq summary::-webkit-details-marker { display: none; }
.is-style-nf-faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--accent-3); transition: transform .2s ease; }
.is-style-nf-faq details[open] summary::after { transform: rotate(45deg); }
.is-style-nf-faq details > p { color: var(--wp--preset--color--accent-4); margin-top: .75rem; }

/* Outline button on dark backgrounds keeps the text colour. */
.is-style-outline > .wp-block-button__link { border-color: currentColor; }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Hero chips («✓ Presencial»…) */
.nf-chips { gap: .5rem !important; }
.nf-chips > p {
	margin: 0; padding: .45em 1em; border-radius: 999px; font-size: .85rem; font-weight: 500;
	border: 1px solid rgba(255, 255, 255, .14); color: #d9ddd4;
}
.nf-chips > p::before { content: "✓ "; color: var(--wp--preset--color--accent-1); font-weight: 700; }

/* Portal preview card in the hero */
.nf-mock {
	font-size: .95rem;
	padding: 1.75rem;
	background: linear-gradient(180deg, #171a14, #101210);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--nf-radius-lg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(102, 255, 0, .06);
}
.nf-mock-row { border-radius: 14px; background: rgba(255, 255, 255, .04); padding: .8rem 1rem !important; flex-wrap: nowrap !important; gap: .75rem; }
.nf-mock-row > p { margin: 0; }
.nf-mock-row > p:last-child { white-space: nowrap; }
.nf-mock-row.is-done > p:last-child { color: var(--wp--preset--color--accent-1); font-weight: 600; }
.nf-mock-row.is-today { background: rgba(102, 255, 0, .1); outline: 1px solid rgba(102, 255, 0, .35); }
.nf-progress { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.nf-progress > div { height: 100%; border-radius: inherit; background: var(--wp--preset--color--accent-1); }
@media (max-width: 600px) {
	.nf-mock { padding: 1.25rem !important; }
	.nf-mock-row { padding: .7rem .8rem !important; font-size: .9rem; }
}

/* Photo with a floating dark card (Sobre mí) */
.nf-photo-wrap { position: relative; }
.nf-photo-wrap > .is-style-nf-card-dark { position: absolute; left: -1.5rem; bottom: -1.5rem; max-width: 78%; height: auto; box-shadow: 0 25px 60px rgba(10, 10, 10, .25); }
@media (max-width: 781px) { .nf-photo-wrap > .is-style-nf-card-dark { position: relative; left: 0; bottom: 0; max-width: none; margin: -3rem 1rem 0 !important; } }

/* Big quote mark on dark quote cards */
.nf-quote { position: relative; overflow: hidden; }
.nf-quote::before { content: "“"; position: absolute; top: -.2em; right: .15em; font-size: 10rem; line-height: 1; font-weight: 800; color: rgba(102, 255, 0, .25); pointer-events: none; }

/* Timeline (Sobre mí) */
.nf-timeline .is-style-nf-tag { font-size: .8rem !important; }

/* Click-to-load map */
.nf-map {
	position: relative; min-height: 420px; height: 100%; border-radius: var(--nf-radius); overflow: hidden;
	display: grid; place-items: center; text-align: center; padding: 2rem;
	background:
		linear-gradient(rgba(10, 10, 10, .05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(10, 10, 10, .05) 1px, transparent 1px) 0 0 / 32px 32px,
		var(--wp--preset--color--base);
	border: var(--nf-border);
}
.nf-map.is-loaded { padding: 0; display: block; }
.nf-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.nf-map p { margin: .5rem 0 0; font-size: .85rem; color: var(--wp--preset--color--accent-4); }
.nf-map strong { display: block; font-size: 1.05rem; margin-bottom: .9rem; }
.nf-map button {
	font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 999px; padding: .85rem 1.7rem;
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-1);
}
.nf-map button:hover { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); }

/* Footer */
.nf-site-footer a { color: #d6dad0; text-decoration: none; }
.nf-site-footer a:hover { color: var(--wp--preset--color--accent-1); }
.nf-footer-title { color: #7d8377; font-size: .78rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.nf-footer-links { line-height: 2; }

@media (max-width: 781px) { .nf-hide-mobile { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.is-style-nf-card, .is-style-nf-card:hover, .is-style-nf-card-dark:hover { transition: none; transform: none; }
}

/* ==========================================================================
   5. Plugins
   ========================================================================== */

/* Fluent Forms */
.fluentform .ff-el-input--label label { font-weight: 500; font-size: .95rem; }
.fluentform .ff-el-form-control {
	font-family: inherit; font-size: .95rem; color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(10, 10, 10, .15); border-radius: 12px; padding: .8rem 1rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fluentform select.ff-el-form-control { height: auto; }
.fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--accent-3); box-shadow: 0 0 0 3px rgba(102, 255, 0, .35); outline: none; }
.fluentform .ff-el-form-control::placeholder { color: #9aa093; }
.fluentform .ff_t_c, .fluentform .ff-el-form-check-label { font-size: .9rem; line-height: 1.5; }
.fluentform .ff-btn-submit, .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	font-family: inherit; font-weight: 600; font-size: 1rem;
	background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--contrast) !important;
	border: 0; border-radius: 999px; padding: .9rem 1.9rem; opacity: 1;
}
.fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--accent-1) !important; }
.fluentform .ff-el-help-message { color: var(--wp--preset--color--accent-4); font-size: .85rem; }
.ff-message-success { border: 0; border-radius: 16px; box-shadow: none; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--contrast); }

/* WooCommerce */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery img { border-radius: 20px; }

/* Sections touch the footer (no white strip between them). */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.wp-site-blocks > main + footer, main > .wp-block-post-content > :last-child { margin-block-end: 0; }

/* Logo and site title */
.wp-block-site-logo img { border-radius: 10px; }
.nf-title-accent { color: var(--wp--preset--color--accent-3); }
.nf-site-footer .nf-title-accent,
body.nf-header-overlay:not(.nf-scrolled) .nf-header .nf-title-accent { color: var(--wp--preset--color--accent-1); }

/* ==========================================================================
   6. WooCommerce (appearance only: same tokens as the rest of the site)
   ========================================================================== */
:root {
	--nf-field-border: 1px solid rgba(10, 10, 10, .15);
	--nf-field-radius: 12px;
	--nf-focus-ring: 0 0 0 3px rgba(102, 255, 0, .35);
}

/* --- Product grid (shop, categories, related products) --- */
.wc-block-product-template .wc-block-product {
	display: flex; flex-direction: column; gap: .6rem;
	padding: .75rem .75rem 1.25rem;
	background: var(--wp--preset--color--base);
	border: var(--nf-border); border-radius: var(--nf-radius);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wc-block-product-template .wc-block-product:hover { transform: translateY(-4px); box-shadow: var(--nf-shadow); border-color: rgba(47, 133, 0, .35); }
.wc-block-product-template .wc-block-product > * { margin: 0 !important; padding-inline: .5rem; }
.wc-block-product-template .wc-block-product > .wc-block-components-product-image { padding-inline: 0; }
.wc-block-product-template .wc-block-components-product-image img { border-radius: 18px; }
.wc-block-product-template .wp-block-post-title { text-align: left !important; font-size: 1.1rem !important; font-weight: 600; line-height: 1.3 !important; }
.wc-block-product-template .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.wc-block-product-template .wc-block-components-product-price { text-align: left; font-weight: 700; font-size: 1.15rem !important; }
.wc-block-product-template .wp-block-woocommerce-product-button { margin-top: auto !important; text-align: left; }
.wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link { width: 100%; }
.wc-block-product-results-count { color: var(--wp--preset--color--accent-4); font-size: var(--wp--preset--font-size--small); }

/* Sort select and any classic select / input */
.woocommerce-ordering select,
.woocommerce form .input-text,
.woocommerce form .form-row .input-text,
.woocommerce form select,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.woocommerce-account select {
	font: inherit; font-size: .95rem; color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: var(--nf-field-border); border-radius: var(--nf-field-radius); padding: .75rem 1rem;
}
.woocommerce-ordering select { padding: .5rem 2.25rem .5rem 1rem; }
.woocommerce form .input-text:focus, .woocommerce form .form-row .input-text:focus, .woocommerce form select:focus, .woocommerce-ordering select:focus {
	outline: none; border-color: var(--wp--preset--color--accent-3); box-shadow: var(--nf-focus-ring);
}

/* --- Single product --- */
.single-product .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); }
.single-product .wp-block-column .wc-block-components-product-price { font-size: 1.6rem !important; font-weight: 700; }
.single-product .wp-block-post-excerpt { color: var(--wp--preset--color--accent-4); font-size: var(--wp--preset--font-size--large); }
.single-product .woocommerce-product-gallery__trigger { background: var(--wp--preset--color--base); border-radius: 999px; }
.single-product form.cart .single_add_to_cart_button { padding: .95rem 2rem; font-size: 1rem; }
/* Only the description is left, so no tab bar. */
.woocommerce-tabs ul.tabs, .wc-tabs { display: none !important; }
.woocommerce-tabs .woocommerce-Tabs-panel { padding: 0; margin: 0; border: 0; }
.woocommerce-Tabs-panel--description ul { list-style: none; padding-left: 0; }
.woocommerce-Tabs-panel--description ul li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.woocommerce-Tabs-panel--description ul li::before {
	content: "✓"; position: absolute; left: 0; top: .15em; width: 1.35rem; height: 1.35rem; border-radius: 50%;
	display: grid; place-items: center; font-size: .75rem; font-weight: 700;
	background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3);
}

/* --- Notices (blocks and classic) --- */
.wc-block-components-notice-banner,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: 16px !important; border: 1px solid transparent !important; padding: .9rem 1.1rem !important;
	font-size: .95rem; box-shadow: none !important;
}
.wc-block-components-notice-banner.is-success, .woocommerce-message { background: var(--wp--preset--color--accent-2) !important; border-color: rgba(47, 133, 0, .3) !important; }
.wc-block-components-notice-banner.is-success > svg { background: var(--wp--preset--color--accent-3) !important; }
.wc-block-components-notice-banner.is-error, .woocommerce-error { background: #fdf0f0 !important; border-color: rgba(204, 51, 51, .35) !important; }
.wc-block-components-notice-banner.is-error > svg { background: var(--wp--preset--color--danger) !important; }
.wc-block-components-notice-banner.is-info, .woocommerce-info { background: var(--wp--preset--color--accent-5) !important; border-color: rgba(10, 10, 10, .1) !important; }
.wc-block-components-notice-banner.is-warning { background: #fff7e8 !important; border-color: rgba(212, 138, 0, .4) !important; }
.wc-block-components-notice-banner.is-warning > svg { background: var(--wp--preset--color--warning) !important; }
.wc-block-components-notice-banner .wc-forward, .woocommerce-message .button { color: var(--wp--preset--color--contrast) !important; font-weight: 600; }

/* --- Form fields in cart / checkout blocks --- */
.wc-block-components-text-input input[type],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	border: var(--nf-field-border) !important; border-radius: var(--nf-field-radius) !important;
	background-color: var(--wp--preset--color--base) !important; font-family: inherit !important;
}
.wc-block-components-text-input input[type]:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus {
	border-color: var(--wp--preset--color--accent-3) !important; box-shadow: var(--nf-focus-ring) !important; outline: none !important;
}
.wc-block-components-text-input.has-error input, .wc-block-components-combobox.has-error input { border-color: var(--wp--preset--color--danger) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] { border-radius: 6px; border-color: rgba(10, 10, 10, .35); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--wp--preset--color--accent-1); }
.wc-block-components-radio-control__input:checked { border-color: var(--wp--preset--color--contrast) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--wp--preset--color--contrast) !important; }
.wc-block-components-checkout-step__title, .wc-block-cart__totals-title { font-weight: 600 !important; letter-spacing: -.01em; }
.wc-block-cart__totals-title { text-transform: none !important; font-size: 1.05rem !important; }

/* --- Cart --- */
.wc-block-cart-items__header { font-size: .75rem; letter-spacing: .1em; color: var(--wp--preset--color--accent-4); }
.wc-block-cart-item__image img { border-radius: 12px; }
.wc-block-components-product-name { color: var(--wp--preset--color--contrast) !important; font-weight: 600; text-decoration: none !important; }
.wc-block-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--accent-5); border: var(--nf-border) !important; border-radius: var(--nf-radius) !important;
	padding: 1.25rem 1.5rem !important;
}
.wc-block-components-totals-wrapper { border-color: rgba(10, 10, 10, .08) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 700 !important; font-size: 1.15rem !important; }
.wc-block-components-order-summary-item__image img { border-radius: 10px; }
.wc-block-components-order-summary-item__quantity { background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--accent-1) !important; border: 0 !important; box-shadow: none !important; }
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { font-weight: 600; }
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font-size: var(--wp--preset--font-size--xx-large); }

/* --- Checkout header (parts/checkout-header.html) --- */
.nf-checkout-header { position: sticky; top: 0; z-index: 100; }
.nf-secure { display: inline-flex; align-items: center; gap: .4rem; color: var(--wp--preset--color--accent-3); font-weight: 600; margin: 0; }
.nf-secure::before {
	content: ""; width: 14px; height: 14px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7zm4 10.7V20h-2v-2.3a2 2 0 1 1 2 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7zm4 10.7V20h-2v-2.3a2 2 0 1 1 2 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nf-checkout-header a { color: var(--wp--preset--color--contrast); }

/* --- Mi cuenta (classic shortcode) --- */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce form.lost_reset_password,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
	border: var(--nf-border) !important; border-radius: var(--nf-radius) !important;
	padding: clamp(1.5rem, 3vw, 2.25rem) !important; background: var(--wp--preset--color--base); margin-top: 1rem;
}
.woocommerce-account .woocommerce form .form-row label { font-weight: 500; font-size: .95rem; }
.woocommerce-account .woocommerce form .input-text { width: 100%; }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1rem; font-size: .95rem; }
.woocommerce-account .woocommerce-form-login__rememberme input { accent-color: var(--wp--preset--color--contrast); }
.woocommerce-account .woocommerce-LostPassword a { font-size: .9rem; }
.woocommerce-account .show-password-input { opacity: .6; }
/* Dashboard navigation as pills */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.woocommerce-MyAccount-navigation li a {
	display: inline-block; padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .95rem;
	border: var(--nf-border); color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base);
	transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { border-color: var(--wp--preset--color--accent-3); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--contrast); }
.woocommerce-MyAccount-navigation-link--natandfit-portal a { background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--contrast) !important; border-color: var(--wp--preset--color--accent-1) !important; font-weight: 600; }
.woocommerce-MyAccount-content { font-size: 1rem; }
/* Order tables (Mi cuenta and order received) */
.woocommerce table.shop_table, .woocommerce-orders-table, .woocommerce-table--order-details {
	border: var(--nf-border) !important; border-radius: var(--nf-radius); border-collapse: separate !important; border-spacing: 0; overflow: hidden; width: 100%;
}
.woocommerce table.shop_table th { background: var(--wp--preset--color--accent-5); font-weight: 600; font-size: .85rem; text-align: left; }
.woocommerce table.shop_table :where(th, td) { padding: .85rem 1rem !important; border-color: rgba(10, 10, 10, .08) !important; }
.woocommerce-orders-table .button, .woocommerce table.shop_table .button { padding: .45rem 1rem; font-size: .85rem; }
.woocommerce-order-overview, .wc-block-order-confirmation-summary { border-radius: var(--nf-radius); }

/* --- Mini cart drawer --- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-weight: 700; letter-spacing: -.02em; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__content { border-radius: var(--nf-radius) 0 0 var(--nf-radius); }
.wc-block-mini-cart__footer { background: var(--wp--preset--color--accent-5); }

/* --- Mi cuenta inside the site layout (page «Mi cuenta» → card .nf-account) --- */
.nf-account .woocommerce > h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1rem; }
.nf-account .woocommerce form.login,
.nf-account .woocommerce form.register,
.nf-account .woocommerce form.lost_reset_password { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none; }
.nf-account .woocommerce form .form-row { padding: 0; margin: 0 0 1rem; }
.nf-account .woocommerce-form-login__submit { margin-right: .5rem !important; }
.nf-account .woocommerce-LostPassword { margin: .5rem 0 0; }
/* Logged in: navigation pills on top, content below (one column). */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
.woocommerce-account .woocommerce-MyAccount-navigation { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: var(--nf-border); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; }
.woocommerce-MyAccount-content > p:first-child { font-size: var(--wp--preset--font-size--large); }
.woocommerce-MyAccount-content mark { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--contrast); padding: 0 .3em; border-radius: 4px; }
.woocommerce-Addresses { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.woocommerce-Addresses::before, .woocommerce-Addresses::after { display: none !important; }
.woocommerce-Addresses .woocommerce-Address { width: auto !important; float: none !important; padding: 1.25rem; border: var(--nf-border); border-radius: 16px; }
.woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; list-style: none; }
.woocommerce-MyAccount-navigation li a { text-decoration: none !important; line-height: 1.4; }
/* Content shown only to visitors / only to logged-in customers. */
.logged-in .nf-guest-only, body:not(.logged-in) .nf-member-only { display: none !important; }
.nf-member-only .wp-block-button__link { width: 100%; }
.woocommerce-MyAccount-navigation li a { display: block; }
/* WooCommerce gives every item but the first 1em of vertical padding: reset so the pills line up. */
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; align-items: center; }
.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child { padding: 0 !important; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { text-decoration: none; }

/* --- WooCommerce «Próximamente» page (site in coming-soon mode) --- */
body:has(.woocommerce-coming-soon-default) { background: var(--wp--preset--color--contrast); }
.woocommerce-coming-soon-default .coming-soon-cover {
	color: var(--wp--preset--color--base) !important;
	background:
		radial-gradient(50% 60% at 85% 10%, rgba(102, 255, 0, .18), transparent 70%),
		radial-gradient(40% 50% at 10% 100%, rgba(102, 255, 0, .08), transparent 70%),
		var(--wp--preset--color--contrast) !important;
}
.woocommerce-coming-soon-default .woocommerce-coming-soon-header { background: transparent !important; }
.woocommerce-coming-soon-default .wp-block-site-logo img { width: 44px !important; height: 44px !important; border-radius: 10px; }
.woocommerce-coming-soon-default .wp-block-site-title { font-size: 1.15rem !important; font-weight: 700; }
.woocommerce-coming-soon-default .wp-block-site-title a { color: var(--wp--preset--color--base) !important; text-decoration: none; }
.woocommerce-coming-soon-default .nf-title-accent { color: var(--wp--preset--color--accent-1); }
.woocommerce-coming-soon-default .woocommerce-coming-soon-header-login .wp-block-button__link {
	background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--contrast) !important;
	border: 0 !important; padding: .6rem 1.4rem; font-weight: 600;
}
.woocommerce-coming-soon-default .woocommerce-coming-soon-header-login .wp-block-button__link:hover {
	background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important;
}
.woocommerce-coming-soon-default .woocommerce-coming-soon-banner { color: var(--wp--preset--color--accent-1) !important; letter-spacing: -.035em; }
.woocommerce-coming-soon-default .woocommerce-coming-soon-banner + p,
.woocommerce-coming-soon-default p { color: var(--nf-muted-on-dark) !important; }
.woocommerce-coming-soon-default .wp-block-social-links .wp-social-link,
.woocommerce-coming-soon-default .wp-block-social-links .wp-social-link a { color: var(--nf-muted-on-dark) !important; background: transparent !important; }
.woocommerce-coming-soon-default .wp-block-social-links .wp-social-link svg { fill: currentColor; }
.woocommerce-coming-soon-default .wp-block-social-links .wp-social-link:hover a { color: var(--wp--preset--color--accent-1) !important; }