/*
 * Base: todo lo que aparece en más de una pantalla (cabecera, pie, botones,
 * tarjetas, paneles, formularios, avisos). Mobile-first: las reglas sin
 * media query son las del teléfono; las de escritorio se suman con min-width.
 *
 * Breakpoints (los del prototipo): 561px, 961px, 1181px.
 */

/* ---------- Reset mínimo ---------- */

*, *::before, *::after { box-sizing: border-box; }

body.or-body {
	margin: 0;
	background: var(--or-white);
	color: var(--or-ink);
	font-family: var(--or-font);
	font-size: var(--or-fs-md);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--or-ink); text-underline-offset: 3px; }
a:hover { color: var(--or-coral-deep); }

:focus-visible { outline: 2px solid var(--or-coral-deep); outline-offset: 3px; border-radius: 6px; }

/* Las partes de plantilla envuelven cabecera y pie en un <div>: con
 * display:contents la cabecera puede ser sticky respecto de la página y no
 * de ese envoltorio, que mide lo mismo que ella. */
.or-site-header, .or-site-footer { display: contents; }

/* Nada del contenido puede ensanchar la página: lo que sobresalga a los
 * costados (una entrada animada desde la derecha, una sombra) se recorta.
 * Va en <main> y no en <body>: el overflow del body se traslada al viewport y
 * Safari de iOS no siempre lo respeta. `clip` y no `hidden`: no crea un
 * contenedor de scroll, así nada sticky de adentro deja de funcionar. */
.or-main { margin: 0; overflow-x: clip; }
.wp-site-blocks > * + * { margin-block-start: 0; }

.or-sr, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.or-hp { position: absolute; left: -9999px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Layout ---------- */

.or-wrap { max-width: var(--or-wrap); margin-inline: auto; padding-inline: var(--or-gutter); }
.or-narrow { max-width: 760px; }
.or-sec { padding-top: 56px; }
.or-sec--lg { padding-top: 72px; }
.or-sec--bottom { padding-bottom: 64px; }
.or-stack { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.or-stack > * { margin: 0; }
.or-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.or-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.or-split--top { align-items: start; }
.or-split--stretch { align-items: stretch; }
.or-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.or-grid6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.or-row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.or-grow { flex: 1; }
.or-mt { margin-top: 6px; }
.or-anchor { display: block; position: relative; top: calc(-1 * var(--or-hdr-h) - 16px); }

@media (min-width: 561px) {
	.or-grid6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.or-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 961px) {
	.or-sec { padding-top: 80px; }
	.or-sec--lg { padding-top: 96px; }
	.or-sec--bottom { padding-bottom: 88px; }
	.or-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
	.or-split--rev > :first-child { order: 2; }
	.or-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
	.or-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.or-sticky { position: sticky; top: calc(var(--or-hdr-h) + 34px); }
}

/* ---------- Tipografía ---------- */

.or-kick {
	font-family: var(--or-font-display); font-weight: 600; letter-spacing: 0.16em;
	text-transform: uppercase; font-size: var(--or-fs-xs); color: var(--or-violet);
}
.or-kick--coral { color: var(--or-coral); }
.or-kick--deep { color: var(--or-coral-deep); }
.or-h1 { margin: 0; font-size: 36px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.or-h2 { margin: 6px 0 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.or-h2--sm { font-size: var(--or-fs-xl); margin: 0; }
.or-d2 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 800; }
.or-accent { color: var(--or-coral-deep); }
.or-lead { margin: 0; font-size: var(--or-fs-lg); color: var(--or-muted); max-width: 62ch; }
.or-muted { color: var(--or-muted-2); font-size: var(--or-fs-sm); }
.or-small { font-size: var(--or-fs-xs); }
.or-u { text-decoration: underline; text-underline-offset: 3px; }
.or-link-strong { font-weight: 700; }
.or-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.or-price del { color: var(--or-muted-2); font-weight: 500; margin-right: 6px; font-size: 0.85em; }
.or-price ins { text-decoration: none; }
.or-prose { max-width: 68ch; }
.or-prose p, .or-prose li { color: var(--or-text-2); }

@media (min-width: 561px) {
	.or-h1 { font-size: 48px; }
	.or-h2 { font-size: var(--or-fs-h2); }
	.or-d2 { font-size: 40px; }
}

/* ---------- Botones ---------- */

.or-btn, .woocommerce a.button, .woocommerce button.button, #place_order, .checkout-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 0 26px; border-radius: var(--or-r-pill);
	border: 1.5px solid var(--or-ink); background: var(--or-ink); color: var(--or-white);
	font-weight: 700; font-size: var(--or-fs-sm); letter-spacing: 0.02em; text-decoration: none;
	transition: background var(--or-ease), color var(--or-ease), border-color var(--or-ease);
	cursor: pointer;
}
.or-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, #place_order:hover, .checkout-button:hover {
	background: var(--or-coral); border-color: var(--or-coral); color: var(--or-ink);
}
.or-btn--ghost { background: transparent; color: var(--or-ink); }
.or-btn--ghost:hover { background: var(--or-ink); border-color: var(--or-ink); color: var(--or-white); }
.or-btn--coral { background: var(--or-coral); border-color: var(--or-coral); color: var(--or-ink); }
.or-btn--coral:hover { background: var(--or-white); border-color: var(--or-white); color: var(--or-ink); }
.or-btn--light { background: var(--or-white); border-color: var(--or-white); color: var(--or-ink); }
.or-btn--light:hover { background: var(--or-coral); border-color: var(--or-coral); }
.or-btn--wa { background: var(--or-wa); border-color: var(--or-wa); color: var(--or-ink); }
.or-btn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: var(--or-ink); }
.or-btn--sm { min-height: 44px; padding: 0 18px; }
.or-btn[disabled], .or-btn.disabled { opacity: 0.5; pointer-events: none; }

.or-icon-btn {
	width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--or-r-pill); border: 0; background: transparent; color: var(--or-ink);
	position: relative; text-decoration: none;
}
.or-icon-btn:hover { background: #F4F1F2; color: var(--or-ink); }

.or-arrow {
	width: 44px; height: 44px; border-radius: var(--or-r-pill); border: 1.5px solid var(--or-line-2);
	background: var(--or-white); color: var(--or-ink); display: inline-flex; align-items: center; justify-content: center;
}
.or-arrow:hover { border-color: var(--or-ink); }
/* Carrusel al principio o al final: la flecha queda visible pero apagada,
 * para que se entienda que no hay más en esa dirección. */
.or-arrow:disabled { opacity: 0.35; cursor: default; border-color: var(--or-line-2); }

.or-linkbtn { border: 0; background: none; padding: 0; min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; color: var(--or-ink); text-decoration: underline; text-underline-offset: 3px; }
.or-linkbtn--sm { font-size: var(--or-fs-xs); color: var(--or-muted-2); }

.or-chip {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--or-r-pill);
	border: 1.5px solid var(--or-line-2); background: var(--or-white); color: var(--or-ink);
	font-weight: 600; font-size: var(--or-fs-sm); text-decoration: none; white-space: nowrap;
}
.or-chip:hover { border-color: var(--or-ink); color: var(--or-ink); }
.or-chip.is-on { background: var(--or-ink); border-color: var(--or-ink); color: var(--or-white); }

.or-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--or-r-pill); background: var(--or-white); border: 1px solid #E5DFE2; font-weight: 700; font-size: var(--or-fs-xs); }
.or-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Barra superior y cabecera ---------- */

.or-topbar { background: var(--or-ink); color: var(--or-white); font-size: 12px; }
.or-topbar__in { display: flex; justify-content: center; align-items: center; min-height: 40px; padding-block: 8px; text-align: center; }
.or-topbar__msg { display: inline-flex; gap: 8px; align-items: center; }
.or-topbar svg { flex: none; }

.or-hdr { position: sticky; top: 0; z-index: 30; background: var(--or-white); border-bottom: 1px solid var(--or-line); }
.admin-bar .or-hdr { top: 46px; }
.or-hdr__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; height: var(--or-hdr-h); }
.or-hd-m { justify-self: start; margin-left: -10px; }
.or-hdr__logo { justify-self: center; }
.or-hdr__icons { justify-self: end; display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.or-hd-d, .or-only-d { display: none !important; }

.or-logo { display: flex; flex: none; background: var(--or-ink); padding: 8px 12px; border-radius: var(--or-r-sm); }
.or-logo img { height: 28px; width: auto; }

.or-badge-count.is-empty { display: none; }
.or-badge-count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--or-r-pill);
	background: var(--or-coral); color: var(--or-ink); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.or-secure { display: inline-flex; align-items: center; gap: 8px; font-size: var(--or-fs-xs); font-weight: 600; color: var(--or-muted-2); }
.or-hdr--checkout { position: static; }
.or-hdr--checkout .or-hdr__row { display: flex; justify-content: space-between; }

/* Nav de escritorio con submenú por hover y por foco (teclado). */
.or-nav__list { display: flex; gap: 20px; align-items: center; margin: 0; padding: 0; list-style: none; }
.or-nav__list > li { position: relative; }
.or-nav a {
	display: inline-flex; align-items: center; gap: 4px; padding: 8px 0;
	font-family: var(--or-font-display); font-weight: 600; font-size: var(--or-fs-sm); letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--or-ink); text-decoration: none; white-space: nowrap;
}
.or-nav a:hover { color: var(--or-coral-deep); }
.or-nav__sub {
	position: absolute; top: 100%; left: -16px; min-width: 220px; margin: 0; padding: 8px 0; list-style: none;
	background: var(--or-white); border: 1px solid var(--or-line); border-radius: var(--or-r-md); box-shadow: var(--or-shadow);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--or-ease), transform var(--or-ease), visibility var(--or-ease);
}
.or-nav__sub a { display: flex; padding: 10px 16px; text-transform: none; letter-spacing: 0; font-family: var(--or-font); font-size: 15px; font-weight: 500; }
.has-sub:hover > .or-nav__sub, .has-sub:focus-within > .or-nav__sub { opacity: 1; visibility: visible; transform: none; }

@media (min-width: 783px) {
	.admin-bar .or-hdr { top: 32px; }
}

@media (min-width: 961px) {
	.or-only-d { display: inline-flex !important; }
	.or-topbar { font-size: var(--or-fs-xs); }
}

@media (min-width: 1181px) {
	.or-hd-m { display: none !important; }
	.or-hd-d { display: flex !important; }
	.or-hdr__row { display: flex; gap: 20px; }
	.or-nav { flex: 1; margin-left: 8px; }
	.or-hdr__icons { margin-left: auto; margin-right: -10px; }
	.or-logo img { height: 32px; }
}

/* ---------- Paneles: buscador, off-canvas y cajón ----------
 * Cerrados por defecto. Sin JS se abren con :target; con JS (html.or-js) sólo
 * con .is-open, porque :target no se puede «des-apuntar» sin navegar y el
 * panel quedaría abierto después de cerrarlo. */

.or-searchpanel { display: none; border-top: 1px solid var(--or-line); background: var(--or-white); }
html:not(.or-js) .or-searchpanel:target, .or-searchpanel.is-open { display: block; }
.or-searchpanel__in { display: flex; gap: 8px; align-items: center; padding-block: 12px; }
.or-search { flex: 1; display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--or-line-2); border-radius: var(--or-r-pill); padding-left: 18px; background: var(--or-white); }
.or-search:focus-within { border-color: var(--or-ink); }
.or-search input[type="search"] { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font-size: 16px; outline: none; }

/* visibility se apaga con retraso: así, al cerrar, el panel termina de
 * deslizarse antes de ocultarse (antes desaparecía de golpe). Al abrir, el
 * retraso es 0 y se ve desde el primer cuadro. */
.or-oc { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; overflow: hidden; transition: visibility 0s linear 0.35s; }
.or-oc.is-open { transition-delay: 0s; }
html:not(.or-js) .or-oc:target, .or-oc.is-open { visibility: visible; pointer-events: auto; }
.or-oc__backdrop { position: absolute; inset: 0; background: var(--or-backdrop); opacity: 0; transition: opacity 0.35s ease; }
html:not(.or-js) .or-oc:target .or-oc__backdrop, .or-oc.is-open .or-oc__backdrop { opacity: 1; }
.or-oc__panel {
	position: absolute; top: 0; bottom: 0; width: min(88vw, 420px); background: var(--or-white);
	display: flex; flex-direction: column; box-shadow: 0 0 60px rgb(0 0 0 / 0.18); margin: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.or-oc--left .or-oc__panel { left: 0; transform: translateX(-100%); }
.or-oc--right .or-oc__panel { right: 0; transform: translateX(100%); }
html:not(.or-js) .or-oc:target .or-oc__panel, .or-oc.is-open .or-oc__panel { transform: none; }
.or-oc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 0 12px 0 20px; border-bottom: 1px solid #ECE4E1; }
.or-oc__head strong { font-size: 20px; font-weight: 600; }
.or-oc__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.or-oc__foot { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid #ECE4E1; }
.or-oc__foot .or-btn { flex: 1; }
.or-oc__foot-link { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 20px; border-top: 1px solid #ECE4E1; text-decoration: none; }
html.or-lock { overflow: hidden; }

/* Menú móvil */
.or-mn__item {
	display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px;
	border-bottom: 1px solid #ECE4E1; background: none; font-family: var(--or-font-display); font-weight: 600;
	font-size: var(--or-fs-md); letter-spacing: 0.06em; text-transform: uppercase; color: var(--or-ink); text-decoration: none; cursor: pointer;
}
summary.or-mn__item { list-style: none; }
summary.or-mn__item::-webkit-details-marker { display: none; }
.or-mn__group[open] > summary svg { transform: rotate(180deg); }
.or-mn__item--hl { color: var(--or-coral-deep); box-shadow: inset 4px 0 0 var(--or-coral); }
.or-mn__sub { display: flex; align-items: center; min-height: 48px; padding: 0 20px 0 36px; border-bottom: 1px solid #F4F0F1; background: var(--or-cream-2); font-size: 15px; color: var(--or-text-2); text-decoration: none; }
.or-mn__sub--2 { padding-left: 52px; font-size: var(--or-fs-sm); }

/* ---------- Cajón del carrito ---------- */

.or-drawer .or-oc__panel { width: min(92vw, 440px); }
.or-drawer .or-oc__head strong { display: flex; align-items: baseline; gap: 10px; }
.or-drawer__count { font-size: var(--or-fs-sm); font-weight: 500; color: var(--or-muted-2); }

.or-drawer__added {
	display: flex; align-items: center; gap: 10px; margin: 12px 20px 0; padding: 10px 14px; border-radius: var(--or-r-sm);
	background: #E9F5EE; color: var(--or-success); font-size: var(--or-fs-sm); font-weight: 600;
}
.or-drawer__added-icon { flex: none; width: 24px; height: 24px; border-radius: var(--or-r-pill); background: var(--or-success); color: var(--or-white); display: flex; align-items: center; justify-content: center; }

.or-drawer__ship { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-bottom: 1px solid #ECE4E1; font-size: var(--or-fs-xs); }
.or-drawer__ship > span:first-child { display: flex; align-items: center; gap: 8px; }
.or-drawer__ship svg { flex: none; color: var(--or-coral-deep); }
/* Barra de avance al envío gratis: la usan la ficha, el carrito y el cajón
 * del carrito (que está en todas las páginas), por eso vive en base.css. */
.or-bar { display: block; height: 8px; border-radius: var(--or-r-pill); background: #ECE4E1; overflow: hidden; margin-top: 10px; }
.or-bar > span { display: block; height: 100%; background: var(--or-coral); border-radius: var(--or-r-pill); transition: width 0.4s ease; }
.or-drawer__ship .or-bar { margin: 0; height: 6px; }
.or-drawer__ship.is-free { color: var(--or-success); font-weight: 600; }
.or-drawer__ship.is-free svg { color: var(--or-success); }
.or-drawer__ship.is-free .or-bar > span { background: var(--or-success); }

.or-mini { list-style: none; margin: 0; padding: 4px 20px; }
.or-mini__item {
	position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px;
	padding: 16px 30px 16px 0; border-bottom: 1px solid var(--or-line); transition: opacity 0.2s, background-color 0.6s;
}
.or-mini__item:last-child { border-bottom: 0; }
.or-mini__item.is-busy { opacity: 0.45; pointer-events: none; }
.or-mini__img img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--or-r-sm); border: 1px solid #EFEBED; background: var(--or-white); }
.or-mini__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.or-mini__name { font-weight: 600; font-size: var(--or-fs-sm); line-height: 1.35; text-decoration: none; }
.or-mini__meta { font-size: var(--or-fs-xs); color: var(--or-violet); }
.or-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.or-mini__qty { display: inline-flex; align-items: center; height: 34px; border: 1.5px solid var(--or-line-2); border-radius: var(--or-r-pill); }
.or-mini__qty button { width: 32px; height: 100%; border: 0; background: none; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--or-ink); border-radius: var(--or-r-pill); }
.or-mini__qty button:hover:not(:disabled) { background: var(--or-cream); }
.or-mini__qty button:disabled { opacity: 0.3; cursor: default; }
.or-mini__qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: var(--or-fs-sm); }
.or-mini__qty-text { font-size: var(--or-fs-xs); color: var(--or-muted-2); }
.or-mini__price { font-size: var(--or-fs-sm); }
.or-mini__remove {
	position: absolute; top: 14px; right: 0; width: 28px; height: 28px; border-radius: var(--or-r-pill);
	display: flex; align-items: center; justify-content: center; color: var(--or-muted-2); text-decoration: none;
}
.or-mini__remove:hover { background: var(--or-cream); color: var(--or-ink); }

.or-drawer__foot { padding: 16px 20px 20px; border-top: 1px solid #ECE4E1; display: flex; flex-direction: column; gap: 10px; background: var(--or-white); }
.or-drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--or-fs-lg); }
.or-drawer__total strong { font-size: 20px; font-weight: 800; }
.or-drawer__hint { margin: -6px 0 2px; font-size: var(--or-fs-xs); color: var(--or-coral-deep); font-weight: 600; }
.or-drawer__checkout { width: 100%; }
.or-drawer__links { display: flex; justify-content: center; gap: 20px; font-size: var(--or-fs-sm); }
.or-drawer__links a { text-decoration: underline; text-underline-offset: 3px; }

.or-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; }
.or-drawer__empty-icon { width: 72px; height: 72px; border-radius: var(--or-r-pill); background: var(--or-cream); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.or-drawer__empty strong { font-size: var(--or-fs-lg); }
.or-drawer__empty p { margin: 0 0 8px; color: var(--or-muted-2); font-size: var(--or-fs-sm); max-width: 30ch; }

/* Con JS: botones de cantidad. Sin JS: «Cant. 2» y el carrito para editar. */
html:not(.or-js) [data-or-js-only], html.or-js [data-or-nojs-only] { display: none !important; }

/* Mensaje de error junto al botón de compra (AJAX). */
.or-buy-msg { flex-basis: 100%; margin: 0; padding: 10px 14px; border-radius: var(--or-r-sm); background: #FCEDEC; color: var(--or-error); font-size: var(--or-fs-sm); font-weight: 600; }
.single_add_to_cart_button.is-loading { opacity: 0.75; cursor: progress; }
.single_add_to_cart_button.is-done { background: var(--or-success) !important; border-color: var(--or-success) !important; color: var(--or-white) !important; }

/* ---------- Tarjetas y medios ---------- */

.or-ph {
	position: relative; aspect-ratio: 1 / 1; border-radius: var(--or-r-md); overflow: hidden; background: var(--or-white);
	border: 1px solid #EFEBED; display: flex; align-items: center; justify-content: center; margin: 0;
}
.or-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.or-ph__empty {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
	font-size: var(--or-fs-xs); color: var(--or-muted-2); border: 1.5px dashed var(--or-line-2); border-radius: 13px; background: var(--or-white);
}

.or-card { position: relative; display: flex; flex-direction: column; min-width: 0; list-style: none; margin: 0; }
.or-card__link { display: flex; flex-direction: column; gap: 12px; color: var(--or-ink); text-decoration: none; height: 100%; }
.or-card__link:hover { color: var(--or-ink); }
.or-card__link:hover .or-ph img { transform: scale(1.05); }
.or-card__body { display: flex; flex-direction: column; gap: 2px; }
.or-card--static { gap: 12px; }
.or-card__mat { font-size: var(--or-fs-xs); color: var(--or-violet); font-weight: 600; }
.or-card__name { font-weight: 600; font-size: var(--or-fs-md); line-height: 1.35; }
.or-card__price { font-weight: 800; font-size: var(--or-fs-lg); }
.or-card__note { font-size: var(--or-fs-xs); color: var(--or-violet); }
.or-card__title { font-size: var(--or-fs-lg); }
.or-card__text { font-size: var(--or-fs-sm); color: var(--or-muted); }

.or-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.or-pdp__head .or-badges { position: static; }
.or-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--or-r-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: var(--or-white); border: 1px solid var(--or-line); color: var(--or-ink); }
.or-badge--acero { background: var(--or-ink); border-color: var(--or-ink); color: var(--or-white); }
.or-badge--oferta { background: var(--or-coral); border-color: var(--or-coral); color: var(--or-ink); }
.or-badge--agotado { background: var(--or-cream); color: var(--or-muted-2); }

/* Grillas de productos nativas (loop, relacionados) */
ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 961px) {
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
}

/* Carrusel con scroll-snap */
/* Sin barra de scroll: en móvil la tarjeta cortada al borde ya indica que
 * hay más, y en escritorio están las flechas.
 *
 * overflow-x:auto recorta también en vertical, así que el relleno reserva
 * lugar para la elevación y la sombra de la tarjeta al pasar el mouse, y el
 * margen negativo lo devuelve para que el layout no cambie. overflow-y:hidden
 * evita el scroll vertical fantasma que aparecía al elevarse una tarjeta. */
.or-car {
	position: relative; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	overflow-y: hidden; padding: 8px 14px 30px; margin: -8px -14px -22px; scroll-padding-inline: 14px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.or-car::-webkit-scrollbar { display: none; }
.or-car > * { flex: 0 0 72%; scroll-snap-align: start; }
@media (min-width: 561px) { .or-car > * { flex-basis: calc((100% - 14px) / 2); } }
@media (min-width: 961px) {
	.or-car { gap: 22px; }
	.or-car > * { flex-basis: calc((100% - 66px) / 4); }
}

.or-sechead { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.or-sechead__actions { display: flex; gap: 8px; align-items: center; }

/* Reseñas */
.or-reviews__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.or-reviews--center .or-reviews__head { align-items: center; text-align: center; }
.or-reviews__score { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.or-reviews--center .or-reviews__score { justify-content: center; }
.or-reviews__score a { color: var(--or-muted); }
.or-reviews__label { font-weight: 600; letter-spacing: 0.08em; }
.or-reviews__score strong { font-size: 22px; }
.or-gword { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.5px; }
.or-gword span:nth-child(1), .or-gword span:nth-child(4) { color: #4285F4; }
.or-gword span:nth-child(2), .or-gword span:nth-child(6) { color: #EA4335; }
.or-gword span:nth-child(3) { color: #FBBC05; }
.or-gword span:nth-child(5) { color: #34A853; }
.or-stars { display: inline-flex; gap: 2px; color: var(--or-star); }
.or-stars .is-off { color: var(--or-line-2); }
.or-reviews__head { position: relative; }
.or-reviews__nav { display: none; gap: 8px; }
img.or-rv__av { object-fit: cover; background: var(--or-cream); }
.or-rv-grid { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 14px; scrollbar-width: none; }
.or-rv-grid::-webkit-scrollbar { display: none; }
.or-rv { flex: 0 0 85%; scroll-snap-align: start; background: var(--or-cream); border: 1px solid #ECE4E1; border-radius: var(--or-r-md); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.or-rv p { margin: 0; color: var(--or-text-2); }
.or-rv__who { display: flex; gap: 14px; align-items: center; }
.or-rv__who div { display: flex; flex-direction: column; }
.or-rv__who strong { font-weight: 600; }
.or-rv__who span { font-size: var(--or-fs-sm); color: var(--or-muted-2); }
.or-rv__av { width: 48px; height: 48px; flex: none; border-radius: var(--or-r-pill); display: flex; align-items: center; justify-content: center; color: var(--or-white); font-weight: 700; font-size: var(--or-fs-lg); }
.or-rv__av--coral { background: var(--or-coral-deep); }
.or-rv__av--violeta { background: var(--or-violet); }
.or-rv__av--negro { background: var(--or-ink); }
@media (min-width: 961px) {
	.or-rv-grid:not(.or-rv-grid--car) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; }
	.or-rv-grid--car { gap: 24px; }
	.or-rv-grid--car > .or-rv { flex-basis: calc((100% - 48px) / 3); }
	.or-reviews__nav { display: flex; }
	.or-reviews--center .or-reviews__nav { position: absolute; right: 0; bottom: 0; }
}

/* Acordeones */
.or-acc { border-top: 1px solid var(--or-line); padding: 16px 0; }
.or-acc summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 28px; }
.or-acc summary::-webkit-details-marker { display: none; }
.or-acc[open] summary span { transform: rotate(45deg); }
.or-acc summary span { transition: transform var(--or-ease); font-size: 20px; line-height: 1; }
.or-acc__body { color: var(--or-muted); font-size: var(--or-fs-sm); }
.or-acc__body p { margin: 10px 0 0; }
ul.or-acc__body { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Formularios ---------- */

.or-fld { display: flex; flex-direction: column; gap: 6px; font-size: var(--or-fs-xs); font-weight: 600; color: var(--or-text-2); }
.or-fld--inline { flex-direction: row; align-items: center; gap: 8px; }
.or-fld input, .or-fld select, .or-fld textarea,
.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce-input-wrapper input, .woocommerce-input-wrapper select,
.or-coupon input, .or-cart-actions input {
	width: 100%; height: 48px; border-radius: var(--or-r-sm); border: 1.5px solid var(--or-line-2); padding: 0 14px;
	background: var(--or-white); color: var(--or-ink); font-weight: 500; font-size: 16px;
}
.or-fld--inline select { width: auto; height: 42px; }
.or-fld textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; }
.or-fld input:focus, .or-fld select:focus, .or-fld textarea:focus,
.woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .or-coupon input:focus {
	outline: 2px solid var(--or-coral); outline-offset: 1px; border-color: var(--or-ink);
}
.or-alert { margin: 0; padding: 12px 16px; border-radius: var(--or-r-sm); background: #FCEDEC; color: var(--or-error); font-size: var(--or-fs-sm); font-weight: 600; }

.woocommerce form .form-row label { display: block; font-size: var(--or-fs-xs); font-weight: 600; color: var(--or-text-2); }
.woocommerce form .form-row abbr.required { text-decoration: none; margin-left: 2px; }

/* Cantidad: el input nativo de WooCommerce, con botones que agrega site.js. */
div.quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--or-line-2); border-radius: var(--or-r-pill); height: 48px; }
.quantity input.qty { width: 52px; height: 100%; border: 0; background: none; text-align: center; font-weight: 700; font-size: 16px; -moz-appearance: textfield; }
.quantity input.qty::-webkit-inner-spin-button, .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.or-qty-btn { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; color: var(--or-ink); }

/* ---------- Avisos de WooCommerce ---------- */

.woocommerce-notices-wrapper:empty { display: none; }
/* Los avisos se imprimen fuera de los contenedores del tema (hook
 * woocommerce_before_single_product, cabecera del carrito…): se alinean aquí. */
.or-main > .woocommerce-notices-wrapper, .wp-block-post-content > .woocommerce > .woocommerce-notices-wrapper { max-width: var(--or-wrap); margin-inline: auto; padding-inline: var(--or-gutter); }
.wc-block-components-notice-banner > svg { flex: none; width: 24px; height: 24px; fill: var(--or-success); }
.wc-block-components-notice-banner__content { flex: 1; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
	list-style: none; margin: 16px 0; padding: 14px 18px; border-radius: var(--or-r-md);
	background: var(--or-cream); border: 1px solid #ECE4E1; font-size: var(--or-fs-sm);
	display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.woocommerce-error { background: #FCEDEC; border-color: #F3C9C5; color: var(--or-error); flex-direction: column; align-items: flex-start; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button { min-height: 40px; padding: 0 18px; order: 2; }

/* ---------- Banda de contacto, mapa y pie ---------- */

.or-contactband { background: var(--or-white); border-top: 1px solid var(--or-line); }
.or-contactband__in { display: flex; flex-direction: column; gap: 40px; padding-block: 56px; }
.or-cband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: center; }
.or-citem { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--or-ink); text-decoration: none; padding: 8px; border-radius: var(--or-r-md); }
.or-citem svg { color: var(--or-coral-deep); }
a.or-citem:hover { color: var(--or-ink); }
.or-citem strong { font-size: 20px; color: var(--or-coral-deep); font-weight: 700; }
.or-citem span { color: var(--or-muted); font-size: 15px; }

.or-mapbox { position: relative; border-radius: var(--or-r-lg); overflow: hidden; border: 1px solid var(--or-line); display: flex; flex-direction: column-reverse; }
.or-mapbox iframe, .or-mapbox img { display: block; width: 100%; height: 260px; border: 0; object-fit: cover; }
.or-mapcard { background: var(--or-white); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; font-size: var(--or-fs-sm); }
.or-mapcard strong { font-size: 17px; }
.or-mapcard__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.or-foot { background: var(--or-ink); color: var(--or-on-dark); font-size: var(--or-fs-sm); }
.or-foot > .or-wrap { padding-top: 56px; padding-bottom: 96px; }
.or-foot a { color: var(--or-on-dark); text-decoration: none; }
.or-foot a:hover { color: var(--or-coral); }
.or-foot a.or-btn { color: var(--or-ink); }
.or-foot__ws { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 26px 24px; border-radius: var(--or-r-lg); background: var(--or-dark-2); margin-bottom: 48px; }
.or-foot__ws > div { display: flex; flex-direction: column; gap: 4px; }
.or-foot__ws strong { font-size: 20px; color: var(--or-white); }
.or-foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.or-foot__brand { display: flex; flex-direction: column; gap: 14px; }
.or-foot__brand img { height: 40px; width: auto; align-self: flex-start; }
.or-foot__brand p { margin: 0; }
.or-foot__social { display: flex; gap: 6px; }
.or-foot__social .or-icon-btn { color: var(--or-white); }
.or-foot__social .or-icon-btn:hover { background: var(--or-dark-2); }
.or-foot__col { display: flex; flex-direction: column; gap: 10px; }
.or-foot__col strong { color: var(--or-white); }
.or-foot__bottom { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--or-text-2); margin-top: 44px; padding-top: 22px; font-size: var(--or-fs-xs); }
.or-pays { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.or-pays li { padding: 4px 10px; border-radius: 6px; background: var(--or-dark-2); color: var(--or-white); font-weight: 600; font-size: 12px; }

.or-wa {
	position: fixed; right: 16px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: var(--or-r-pill);
	background: var(--or-wa); color: var(--or-white); display: flex; align-items: center; justify-content: center; box-shadow: var(--or-shadow);
}
.or-wa:hover { background: #1EBE5A; color: var(--or-white); }
/* En móvil, la barra fija de compra (ficha) o de total (carrito) ocupa el
 * borde inferior: el botón de WhatsApp sube para no taparla. Con JS, la ficha
 * oculta su barra cuando el botón real está en pantalla (html.or-bar-off) y
 * WhatsApp vuelve a su lugar. */
.single-product .or-wa, .woocommerce-cart .or-wa { bottom: 92px; transition: bottom 0.3s ease, transform 0.25s, background 0.2s; }
html.or-bar-off .single-product .or-wa { bottom: 20px; }

@media (min-width: 561px) {
	.or-mapbox { display: block; height: var(--or-map-h, 480px); }
	.or-mapbox iframe, .or-mapbox img { height: 100%; position: absolute; inset: 0; }
	.or-mapcard { position: absolute; left: 16px; top: 16px; right: 16px; max-width: 380px; border-radius: var(--or-r-md); box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); }
	.or-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.or-foot__bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
}

@media (min-width: 961px) {
	.or-contactband__in { gap: 56px; padding-block: 72px; }
	.or-cband { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
	.or-citem strong { font-size: var(--or-fs-xl); }
	.or-foot > .or-wrap { padding-top: 64px; padding-bottom: 32px; }
	.or-foot__ws { padding: 26px 28px; margin-bottom: 52px; }
	.or-foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
	.or-wa { right: 22px; bottom: 22px; width: 58px; height: 58px; }
	.single-product .or-wa, .woocommerce-cart .or-wa { bottom: 22px; }
}

/* ---------- Ajustes de teléfonos compartidos ---------- */

@media (max-width: 560px) {
	/* Grupos de botones: a todo el ancho y del mismo tamaño, en vez de anchos
	 * dispares uno debajo del otro. */
	.or-btns { flex-direction: column; align-items: stretch; }
	.or-btns .or-btn { width: 100%; }

	/* Cabecera de sección: la acción («Ver todo») chica y a la derecha. */
	.or-sechead { flex-wrap: nowrap; align-items: flex-end; margin-bottom: 18px; }
	.or-sechead .or-h2 { font-size: 24px !important; }
	.or-sechead__actions .or-btn { min-height: 38px; padding: 0 14px; font-size: 13px; white-space: nowrap; }

	/* Carruseles: dos tarjetas y un asomo de la tercera (antes una sola al 72 %). */
	.or-car > * { flex-basis: 44%; }

	/* En la tarjeta, el material ya figura debajo de la foto: el badge de
	 * acero quirúrgico repetía lo mismo encima de la imagen. Se deja en
	 * escritorio (hay espacio) y en la ficha. */
	.or-card .or-badge--acero { display: none; }

	/* Tarjetas: badges más chicos para no tapar la foto. */
	.or-badges { top: 6px; left: 6px; gap: 4px; }
	.or-badge { min-height: 20px; padding: 1px 8px; font-size: 10px; }
	.or-card__link { gap: 10px; }
	.or-card__name { font-size: var(--or-fs-sm); }
	.or-card__price { font-size: var(--or-fs-md); }
	.or-card__mat { font-size: 12px; }
}

/* Con la sesión de WordPress iniciada, la barra negra del admin tapaba la
 * cabecera de los paneles laterales (y su botón de cerrar). */
.admin-bar .or-oc { top: 46px; }
@media (min-width: 783px) {
	.admin-bar .or-oc { top: 32px; }
}

/* Botones en el celular: 12px, como los del recuadro del mapa. Incluye los
 * de WooCommerce y los de los bloques, para que todo el sitio sea parejo. */
@media (max-width: 560px) {
	.or-btn, .or-sechead__actions .or-btn, .woocommerce a.button, .woocommerce button.button, #place_order, .checkout-button, .wp-block-button .wp-block-button__link { font-size: 12px; }
}

/* Desplegables: mientras site.js anima la apertura/cierre el contenido se
 * recorta; sin JS (o con «reducir movimiento») abren al instante. */
details.is-animating { overflow: hidden; }