/* Subastas Online — Brand Pass v1.6
   Source: brand tokens + footer spec extracted from apex mockup at subastas-online.com
   Apply via: WP admin → Apariencia → Editor → Estilos → CSS adicional
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --so-navy: #0D1B2A;
  --so-navy2: #162236;
  --so-accent: #E84C2B;
  --so-accent2: #FF6B47;
  --so-gold: #F5A623;
  --so-light: #F7F5F0;
  --so-mid: #E8E4DC;
  --so-text: #1A1A2E;
  --so-muted: #6B7280;
  --so-white: #FFFFFF;
  --so-card-r: 12px;
  --so-ff-head: 'Syne', sans-serif;
  --so-ff-body: 'DM Sans', sans-serif;
}

/* Base typography + background */
html, body {
  max-width: 100% !important;
  overflow-x: clip !important;
}

body {
  font-family: var(--so-ff-body);
  background: var(--so-light);
  color: var(--so-text);
  font-size: 15px;
  line-height: 1.6;
}

/* Force border-box on full-width sections so padding doesn't overflow viewport */
.so-hero,
.so-trust,
.so-how {
  box-sizing: border-box !important;
}

/* Sticky-footer pattern — push footer to viewport bottom when content is short.
   Scoped only to .wp-site-blocks so it doesn't interfere with body width. */
.wp-site-blocks {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wp-site-blocks > main,
.wp-site-blocks main.wp-block-group {
  flex: 1 0 auto !important;
}

.wp-site-blocks > footer.wp-block-template-part {
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-site-title,
.wp-block-site-title a {
  font-family: var(--so-ff-head) !important;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Scope generic link color to body content only */
a {
  color: inherit;
  text-decoration: none;
}

p a,
.entry-content a,
.wp-block-paragraph a,
li > a:not(.button):not(.wp-block-button__link) {
  color: var(--so-accent);
}

p a:hover,
.entry-content a:hover,
.wp-block-paragraph a:hover {
  color: var(--so-accent2);
}

/* Header — dark navy + sticky to top */
header.wp-block-template-part,
.wp-block-template-part[data-type="header"],
.site-header {
  background: var(--so-navy) !important;
  color: var(--so-white);
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  transition: padding 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

/* Offset sticky header below WP admin bar for logged-in users */
body.admin-bar header.wp-block-template-part {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 46px !important;
  }
}

/* Header default size — tight resting height matching mockup */
header.wp-block-template-part .wp-block-group {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

header.wp-block-template-part .so-logo-icon,
header.wp-block-template-part .so-logo-icon svg,
header.wp-block-template-part .so-logo-text {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle elevation + shrink on scroll (added by JS via .so-header-scrolled class) */
header.wp-block-template-part.so-header-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35) !important;
  background: rgba(13, 27, 42, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header.wp-block-template-part.so-header-scrolled .wp-block-group {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

header.wp-block-template-part.so-header-scrolled .so-logo-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}

header.wp-block-template-part.so-header-scrolled .so-logo-icon svg {
  width: 15px !important;
  height: 15px !important;
}

header.wp-block-template-part.so-header-scrolled .so-logo-text {
  font-size: 15px !important;
}

header.wp-block-template-part a,
.wp-block-template-part[data-type="header"] a,
.site-header a {
  color: rgba(255, 255, 255, 0.75) !important;
}

header.wp-block-template-part a:hover,
.wp-block-template-part[data-type="header"] a:hover,
.site-header a:hover {
  color: var(--so-white) !important;
}

header .wp-block-site-title a,
.site-header .wp-block-site-title a {
  color: var(--so-white) !important;
}

header .wp-block-navigation,
.site-header .wp-block-navigation {
  color: var(--so-white);
}

/* Header logo — orange play-icon box + Subastas/Online wordmark (mockup spec) */
.so-header-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--so-white) !important;
}

.so-header-logo:hover {
  text-decoration: none !important;
}

.so-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--so-accent);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.so-logo-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--so-white);
}

.so-logo-text {
  font-family: var(--so-ff-head) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--so-white) !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.so-logo-text .so-logo-accent {
  color: var(--so-accent2) !important;
}

/* Hide WP site title when our logo is rendered alongside it */
header.wp-block-template-part:has(.so-header-logo) .wp-block-site-title {
  display: none !important;
}

/* Footer — dark navy base */
footer.wp-block-template-part,
.wp-block-template-part[data-type="footer"],
.site-footer {
  background: var(--so-navy) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

footer.wp-block-template-part a,
.wp-block-template-part[data-type="footer"] a,
.site-footer a {
  color: rgba(255, 255, 255, 0.38) !important;
}

footer.wp-block-template-part a:hover,
.wp-block-template-part[data-type="footer"] a:hover,
.site-footer a:hover {
  color: var(--so-white) !important;
}

/* Buttons and CTAs */
.wp-block-button__link,
.wp-element-button,
button.wp-element-button {
  background: var(--so-accent) !important;
  color: var(--so-white) !important;
  border-radius: 6px !important;
  font-family: var(--so-ff-body);
  font-weight: 500;
  padding: 10px 22px;
  border: none;
  transition: background 0.2s;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button.wp-element-button:hover {
  background: var(--so-accent2) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--so-accent) !important;
  border: 2px solid var(--so-accent) !important;
}

/* WooCommerce — product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--so-white);
  border-radius: var(--so-card-r);
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--so-mid);
  transition: box-shadow 0.2s, transform 0.2s;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button {
  background: var(--so-accent) !important;
  color: var(--so-white) !important;
  border-radius: 6px !important;
  font-family: var(--so-ff-body);
  font-weight: 500;
  padding: 10px 20px;
  border: none;
  transition: background 0.2s;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--so-accent2) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-Price-amount,
.woocommerce span.amount {
  color: var(--so-accent) !important;
  font-family: var(--so-ff-head) !important;
  font-weight: 700;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--so-ff-head) !important;
  font-weight: 600;
  color: var(--so-text);
}

/* Product title dark, hover orange */
.woocommerce ul.products li.product a:not(.button),
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--so-text) !important;
}

.woocommerce ul.products li.product a:not(.button):hover,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--so-accent) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  color: var(--so-accent) !important;
}

/* Notices and alerts */
.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--so-accent) !important;
}

.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--so-accent) !important;
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--so-mid);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--so-ff-body);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--so-accent);
  outline: none;
}

/* Dokan vendor dashboard accents */
.dokan-btn-theme,
.dokan-dashboard .dokan-btn-theme {
  background: var(--so-accent) !important;
  border-color: var(--so-accent) !important;
  color: var(--so-white) !important;
}

.dokan-btn-theme:hover {
  background: var(--so-accent2) !important;
  border-color: var(--so-accent2) !important;
}

/* Cart drawer product title - dark text */
.woocommerce-mini-cart__item a,
.cart-drawer a:not(.button) {
  color: var(--so-text) !important;
}

/* ===== FOOTER — mockup-exact spec =====
   Container: 1100px max, centered, full-bleed background
   Grid: 1.5fr 1fr 1fr 1fr, gap 2rem
   Brand title 18px / accent2; description 12px / 0.4 / 220px
   Headings 12px / 600 / 0.6 op / 0.8px tracking
   Links 12px / 0.38 op
   Bottom row: border-top + padding-top, copyright|pay-badges
*/

/* Footer outer container — full width, padding spec */
.wp-site-blocks footer.wp-block-template-part,
footer.wp-block-template-part {
  padding: 2.5rem 2rem 2rem !important;
  font-size: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  width: 100% !important;
  max-width: none !important;
}

/* Strip WP's global content-size constraint inside the footer (preserves our own 1100px cap below) */
footer.wp-block-template-part .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
footer.wp-block-template-part :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
}

/* Inner Grupo: 1100px cap, centered */
footer.wp-block-template-part > .wp-block-group,
footer.wp-block-template-part > div > .wp-block-group {
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Columnas -> CSS grid 1.5fr 1fr 1fr 1fr, gap 2rem */
footer.wp-block-template-part .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
  align-items: start !important;
}

footer.wp-block-template-part .wp-block-column {
  min-width: 0 !important;
}

/* Footer list items + links */
footer.wp-block-template-part ul.wp-block-list,
footer.wp-block-template-part .wp-block-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

footer.wp-block-template-part .wp-block-list li {
  margin: 0 0 7px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  line-height: 1.5 !important;
}

footer.wp-block-template-part .wp-block-list li a {
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 12px !important;
  display: block !important;
}

footer.wp-block-template-part .wp-block-list li a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Column headings (h4 or h5) — 12px / 600 / 0.6 op / 0.8px tracking */
footer.wp-block-template-part h4.wp-block-heading,
footer.wp-block-template-part h5.wp-block-heading {
  font-family: var(--so-ff-head) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin: 0 0 12px 0 !important;
  white-space: nowrap !important;
}

/* SubastasOnline.com brand title — 18px / 700 / accent2 span */
.so-brand-title {
  color: var(--so-white) !important;
  font-family: var(--so-ff-head) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 8px 0 !important;
  white-space: nowrap !important;
}

.so-brand-title .so-brand-accent {
  color: var(--so-accent2) !important;
}

/* Brand description — 12px / 0.4 op / 220px max */
footer.wp-block-template-part .wp-block-column:first-child p {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  max-width: 220px !important;
}

/* Hide the separator block — bottom row uses border-top instead */
footer.wp-block-template-part .wp-block-separator {
  display: none !important;
}

/* Bottom row Grupo — border-top divider + flex copyright|badges */
footer.wp-block-template-part .wp-block-group .wp-block-group {
  padding-top: 1.5rem !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* Copyright paragraph */
footer.wp-block-template-part .wp-block-group .wp-block-group p {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 12px !important;
  font-family: var(--so-ff-body) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Payment-method buttons styled as mockup .pay-badge */
footer.wp-block-template-part .wp-block-buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer.wp-block-template-part .wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
}

footer.wp-block-template-part .wp-block-button .wp-block-button__link,
footer.wp-block-template-part .wp-block-button .wp-element-button,
footer.wp-block-template-part .wp-block-button a {
  background: rgba(255, 255, 255, 0.07) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-family: var(--so-ff-head) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}

footer.wp-block-template-part .wp-block-button .wp-block-button__link:hover,
footer.wp-block-template-part .wp-block-button .wp-element-button:hover,
footer.wp-block-template-part .wp-block-button a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ===== HOMEPAGE Phase A — hero + trust bar + cómo funciona ===== */

@keyframes so-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* === Homepage layout: hide page title + remove content-area width cap === */

body.home .wp-block-post-title,
body.home h1.wp-block-post-title,
body.home .entry-title,
body.home main > h1.wp-block-heading:first-child {
  display: none !important;
}

/* Zero html/body spacing so header sits at the very top edge */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Strip main's inline margin-top (var(--wp--preset--spacing--60)) and all padding on homepage */
body.home main,
body.home main.wp-block-group,
body.home main[style],
body.home .wp-block-post-content,
body.home .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kill inline padding-top/bottom var(--wp--preset--spacing--60) on the alignfull
   wp-block-group wrapping the homepage hero */
body.home main > .wp-block-group,
body.home main .wp-block-group.alignfull,
body.home main .wp-block-group.has-global-padding,
body.home .wp-block-group[style*="padding"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kill default block spacing between homepage sections (hero/trust/cómo funciona) */
body.home .wp-block-post-content > *,
body.home .wp-block-html,
body.home main > .wp-block-group > *,
body.home main > * {
  margin-top: 31px !important;
  margin-bottom: 0 !important;
  max-width: none !important;
}

/* First child of homepage main: zero top spacing so hero touches header */
body.home main > *:first-child,
body.home .wp-block-post-content > *:first-child,
body.home .wp-block-html:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Override inline style="margin-top:var(--wp--preset--spacing--60)" on main */
body.home main[style] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Header has no bottom margin/padding so hero sits flush */
header.wp-block-template-part {
  margin-bottom: 0 !important;
}

/* Cómo funciona sits inside a centered area — restore default beige bg around it
   (cancels any prior margin-top: 0 from the broad rule above) */
body.home .so-how {
  margin: 2.5rem auto !important;
}

/* Restore .so-main 1100px cap on homepage — broad max-width: none rule above
   strips it, so we re-apply with higher specificity + !important here */
body.home .so-main {
  max-width: 1100px !important;
  margin: 0 auto !important;
  width: auto !important;
}

/* HERO */
.so-hero {
  background: var(--so-navy);
  padding: calc(3.5rem + 50px) 2rem calc(4.5rem - 50px);
  position: relative;
  overflow: hidden;
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

.so-hero::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232,76,43,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.so-hero::after {
  content: '';
  position: absolute;
  left: 25%;
  bottom: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245,166,35,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.so-hero-inner {
  max-width: 1100px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: start;
  position: relative;
}

.so-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,76,43,0.15);
  border: 1px solid rgba(232,76,43,0.3);
  color: var(--so-accent2);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.so-hero-badge .so-dot {
  width: 6px;
  height: 6px;
  background: var(--so-accent2);
  border-radius: 50%;
  animation: so-pulse 1.5s infinite;
}

.so-hero h1 {
  font-family: var(--so-ff-head) !important;
  font-size: 50px !important;
  font-weight: 800 !important;
  color: var(--so-white) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.5px !important;
  margin: 0 0 1.2rem 0 !important;
}

.so-hero h1 .so-hero-h1-accent {
  color: var(--so-accent2);
}

.so-hero-sub {
  color: rgba(255,255,255,0.58) !important;
  font-size: 16px !important;
  margin: 0 0 2rem 0 !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  max-width: 480px !important;
}

.so-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.so-btn-primary {
  background: var(--so-accent) !important;
  color: var(--so-white) !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  font-family: var(--so-ff-body) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s !important;
}

.so-btn-primary:hover {
  background: var(--so-accent2) !important;
  transform: translateY(-1px);
  color: var(--so-white) !important;
}

.so-btn-outline {
  background: transparent !important;
  color: var(--so-white) !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  font-family: var(--so-ff-body) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s !important;
}

.so-btn-outline:hover {
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--so-white) !important;
}

.so-hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.8rem;
  flex-wrap: wrap;
}

.so-stat-num {
  font-family: var(--so-ff-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--so-white);
  display: block;
}

.so-stat-lbl {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 1px;
}

/* HERO CARD */
.so-hero-card {
  background: var(--so-navy2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}

.so-hero-card-img {
  width: 100%;
  height: 210px;
  background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.so-hero-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--so-accent);
  color: var(--so-white);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.8px;
  font-family: var(--so-ff-head);
}

.so-hero-card-live {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.65);
  color: #4ade80;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
}

.so-hero-card-live .so-dot-live {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  animation: so-pulse 1.2s infinite;
}

.so-hero-card-body {
  padding: 1.3rem;
}

.so-hero-card-body h3 {
  font-family: var(--so-ff-head) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--so-white) !important;
  margin: 0 0 3px 0 !important;
}

.so-hero-card-cat {
  font-size: 11px;
  color: rgba(255,255,255,0.33);
  margin-bottom: 14px;
}

.so-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 13px;
}

.so-price-current {
  font-family: var(--so-ff-head);
  font-size: 24px;
  font-weight: 800;
  color: var(--so-gold);
}

.so-price-unit {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-bottom: 3px;
}

.so-bid-count {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.so-bid-count strong {
  color: var(--so-white);
  font-weight: 600;
}

.so-timer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.so-timer-label {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
}

.so-timer-boxes {
  display: flex;
  gap: 5px;
}

.so-tbox {
  background: rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 6px 9px;
  text-align: center;
  min-width: 38px;
}

.so-tbox-n {
  font-family: var(--so-ff-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--so-white);
  line-height: 1;
  display: block;
}

.so-tbox-u {
  font-size: 9px;
  color: rgba(255,255,255,0.28);
  margin-top: 2px;
  text-transform: uppercase;
  display: block;
}

.so-tbox.so-warn .so-tbox-n { color: var(--so-gold); }
.so-tbox.so-urg .so-tbox-n  { color: var(--so-accent2); }

.so-bid-btn {
  width: 100%;
  background: var(--so-accent) !important;
  color: var(--so-white) !important;
  padding: 12px !important;
  border-radius: 7px !important;
  font-family: var(--so-ff-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: none !important;
  cursor: pointer;
  transition: background 0.2s;
}

.so-bid-btn:hover { background: var(--so-accent2) !important; }

.so-auto-puja {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 8px;
}

/* TRUST BAR */
.so-trust {
  background: var(--so-white);
  border-top: 1px solid var(--so-mid);
  border-bottom: 1px solid var(--so-mid);
  padding: 1.1rem 2rem;
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

.so-trust-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.so-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--so-muted);
}

.so-trust-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--so-accent);
  flex-shrink: 0;
}

.so-trust-item strong { color: var(--so-text); }

/* ===== PHASE B/C — Main section: categories + auction grid + sidebar ===== */

.so-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  box-sizing: border-box;
}

/* Section header */
.so-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.so-section-title {
  font-family: var(--so-ff-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--so-text);
}

.so-section-link {
  font-size: 13px;
  color: var(--so-accent) !important;
  text-decoration: none !important;
  font-weight: 500;
}

.so-section-link:hover { color: var(--so-accent2) !important; }

/* Categories */
.so-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.so-cat-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: var(--so-white);
  border: 1px solid var(--so-mid);
  border-radius: 8px;
  padding: 9px 15px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.2s;
  text-decoration: none !important;
  color: var(--so-text) !important;
}

.so-cat-pill:hover {
  background: var(--so-navy);
  color: var(--so-white) !important;
  border-color: var(--so-navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13,27,42,0.15);
}

.so-cat-pill.so-cat-active {
  background: var(--so-navy);
  color: var(--so-white) !important;
  border-color: var(--so-navy);
}

.so-cat-pill .so-emoji {
  font-size: 16px;
  line-height: 1;
}

.so-cat-count {
  font-size: 10px;
  background: var(--so-mid);
  color: var(--so-muted);
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 2px;
  transition: all 0.2s;
}

.so-cat-pill:hover .so-cat-count,
.so-cat-pill.so-cat-active .so-cat-count {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}

/* Filter bar */
.so-filter-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--so-white);
  border: 1px solid var(--so-mid);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.so-filter-bar > .so-filter-btn,
.so-filter-bar > .so-filter-select,
.so-filter-bar > .so-filter-sep,
.so-filter-bar > .so-filter-count {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
}

.so-filter-bar > .so-filter-count {
  display: inline !important;
}

.so-filter-btn {
  padding: 7px 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  border: 1px solid var(--so-mid);
  background: var(--so-white);
  cursor: pointer;
  font-family: var(--so-ff-body);
  transition: all 0.15s;
  color: var(--so-text);
}

.so-filter-btn.so-active {
  background: var(--so-navy);
  color: var(--so-white);
  border-color: var(--so-navy);
}

.so-filter-btn:hover:not(.so-active) { background: var(--so-light); }

.so-filter-sep {
  width: 1px;
  height: 20px;
  background: var(--so-mid);
}

.so-filter-select {
  border: 1px solid var(--so-mid);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--so-ff-body);
  background: var(--so-white);
  color: var(--so-text);
  cursor: pointer;
  outline: none;
}

.so-filter-select:focus { border-color: var(--so-navy); }

.so-filter-count {
  font-size: 12px;
  color: var(--so-muted);
  margin-left: 4px;
}

/* Content row */
.so-content-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
}

/* Auction grid */
.so-auction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.2rem;
}

/* Auction card */
.so-a-card {
  background: var(--so-white);
  border: 1px solid var(--so-mid);
  border-radius: var(--so-card-r);
  overflow: hidden;
  transition: all 0.25s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.so-a-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-3px);
  border-color: rgba(13,27,42,0.14);
}

.so-a-card-img {
  height: 185px;
  background: #f0ede6;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.so-a-card-img .so-ph {
  font-size: 60px;
  opacity: 0.18;
  user-select: none;
}

.so-a-type {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  letter-spacing: 0.7px;
  font-family: var(--so-ff-head);
}

.so-type-auction { background: #FFF3E0; color: #BF360C; }
.so-type-buy     { background: #E8F5E9; color: #1B5E20; }
.so-type-both    { background: #EDE7F6; color: #4527A0; }

.so-a-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.so-a-card-body h4 {
  font-family: var(--so-ff-head) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.35 !important;
  color: var(--so-text) !important;
}

.so-a-meta {
  font-size: 11px;
  color: var(--so-muted);
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.so-a-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.so-a-price-val {
  font-family: var(--so-ff-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--so-accent);
}

.so-a-price-sub {
  font-size: 10px;
  color: var(--so-muted);
  margin-bottom: 2px;
}

.so-a-bids .so-a-bids-n {
  font-size: 14px;
  font-weight: 600;
  color: var(--so-text);
  text-align: right;
}

.so-a-bids .so-a-bids-l {
  font-size: 10px;
  color: var(--so-muted);
  text-align: right;
}

.so-a-timer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  background: var(--so-light);
  border-radius: 6px;
  margin-bottom: 10px;
}

.so-a-timer svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: var(--so-muted);
}

.so-a-timer-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--so-text);
  font-family: var(--so-ff-head);
}

.so-a-timer-lbl {
  font-size: 10px;
  color: var(--so-muted);
  margin-left: auto;
}

.so-a-timer.so-urgent {
  background: #FFF5F3;
  border: 1px solid rgba(232,76,43,0.15);
}

.so-a-timer.so-urgent svg { stroke: var(--so-accent); }
.so-a-timer.so-urgent .so-a-timer-time { color: var(--so-accent); }
.so-a-timer.so-urgent .so-a-timer-lbl { color: var(--so-accent); font-weight: 500; }

.so-a-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.so-btn-bid {
  background: var(--so-accent) !important;
  color: var(--so-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--so-ff-body) !important;
  cursor: pointer;
  transition: background 0.15s;
}

.so-btn-bid:hover { background: var(--so-accent2) !important; }

.so-btn-view {
  background: var(--so-white) !important;
  color: var(--so-text) !important;
  border: 1px solid var(--so-mid) !important;
  border-radius: 6px !important;
  padding: 9px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: var(--so-ff-body) !important;
  cursor: pointer;
  transition: all 0.15s;
}

.so-btn-view:hover { background: var(--so-light) !important; }

.so-a-seller {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--so-mid);
}

.so-seller-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--so-white);
  font-family: var(--so-ff-head);
  flex-shrink: 0;
}

.so-seller-name {
  font-size: 11px;
  color: var(--so-muted);
}

.so-seller-stars {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.so-star { width: 10px; height: 10px; fill: var(--so-gold); }
.so-star.so-star-empty { fill: var(--so-mid); }

/* Sidebar */
.so-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.so-widget {
  background: var(--so-white);
  border: 1px solid var(--so-mid);
  border-radius: var(--so-card-r);
  overflow: hidden;
}

.so-widget-head {
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--so-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.so-widget-head h4 {
  font-family: var(--so-ff-head) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--so-text) !important;
  margin: 0 !important;
}

.so-widget-head a {
  font-size: 11px;
  color: var(--so-accent) !important;
  text-decoration: none !important;
}

.so-widget-body { padding: 12px 14px; }

.so-es-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--so-mid);
}

.so-es-item:last-child { border-bottom: none; padding-bottom: 0; }
.so-es-item:first-child { padding-top: 0; }

.so-es-thumb {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--so-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.so-es-info { flex: 1; min-width: 0; }

.so-es-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--so-text);
  margin-bottom: 1px;
}

.so-es-price {
  font-family: var(--so-ff-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--so-accent);
}

.so-es-time {
  font-size: 10px;
  color: var(--so-muted);
}

.so-es-bid-btn {
  background: var(--so-accent) !important;
  color: var(--so-white) !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-family: var(--so-ff-body) !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.so-es-bid-btn:hover { background: var(--so-accent2) !important; }

/* Newsletter */
.so-nl-text {
  font-size: 12px;
  color: var(--so-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.so-nl-row {
  display: flex;
  gap: 6px;
}

.so-nl-input {
  flex: 1;
  border: 1px solid var(--so-mid);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--so-ff-body);
  outline: none;
  color: var(--so-text);
}

.so-nl-input:focus { border-color: var(--so-navy); }

.so-nl-btn {
  background: var(--so-navy) !important;
  color: var(--so-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 13px !important;
  font-size: 12px !important;
  font-family: var(--so-ff-body) !important;
  cursor: pointer;
  font-weight: 500 !important;
  transition: background 0.15s;
}

.so-nl-btn:hover { background: var(--so-navy2) !important; }

/* Sell CTA box */
.so-sell-box {
  background: var(--so-navy);
  border-radius: var(--so-card-r);
  padding: 1.4rem;
  color: var(--so-white);
}

.so-sell-box h4 {
  font-family: var(--so-ff-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--so-white) !important;
  margin: 0 0 6px 0 !important;
}

.so-sell-box p {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
  line-height: 1.6;
}

.so-sell-box button {
  width: 100%;
  background: var(--so-accent) !important;
  color: var(--so-white) !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 11px !important;
  font-size: 13px !important;
  font-family: var(--so-ff-body) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background 0.15s;
}

.so-sell-box button:hover { background: var(--so-accent2) !important; }

.so-sell-box .so-sell-note {
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  text-align: center;
  margin-top: 8px;
}

/* Pagination */
.so-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 2rem;
}

.so-page-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--so-mid);
  border-radius: 6px;
  background: var(--so-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--so-ff-body);
  color: var(--so-text);
  transition: all 0.15s;
}

.so-page-btn.so-active {
  background: var(--so-navy);
  color: var(--so-white);
  border-color: var(--so-navy);
}

.so-page-btn:hover:not(.so-active) { background: var(--so-light); }

/* Main section responsive */
@media (max-width: 900px) {
  .so-content-row { grid-template-columns: 1fr; }
  .so-sidebar { order: -1; }
}

@media (max-width: 600px) {
  .so-main { padding: 1.5rem 1.2rem; }
  .so-auction-grid { grid-template-columns: 1fr; }
}

/* COMO FUNCIONA — centered rounded card at 7/12 of viewport width (user spec) */
.so-how {
  background: var(--so-navy);
  border-radius: 16px;
  padding: 3rem 2rem;
  margin: 2.5rem auto;
  width: 58.333vw;
  max-width: 1100px;
  position: relative;
  overflow: hidden;
}

.so-how::before {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(232,76,43,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.so-how h2 {
  font-family: var(--so-ff-head) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: var(--so-white) !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.5px !important;
}

.so-how-sub {
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  margin-bottom: 2.5rem;
}

.so-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.so-step { text-align: center; padding: 1rem; }

.so-step-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(232,76,43,0.12);
  border: 1px solid rgba(232,76,43,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-family: var(--so-ff-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--so-accent2);
}

.so-step h5 {
  font-family: var(--so-ff-head) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--so-white) !important;
  margin: 0 0 6px 0 !important;
}

.so-step p {
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Homepage responsive */
@media (max-width: 900px) {
  .so-hero-inner { grid-template-columns: 1fr; }
  .so-hero-card { display: none; }
  .so-hero h1 { font-size: 36px !important; }
  .so-steps { grid-template-columns: repeat(2, 1fr); }
  .so-trust-inner { gap: 1.5rem; }
}

@media (max-width: 600px) {
  .so-hero { padding: 2rem 1.2rem 3rem; }
  .so-hero h1 { font-size: 30px !important; }
  .so-hero-stats { gap: 1.5rem; }
  .so-steps { grid-template-columns: 1fr; }
}

/* Cómo funciona width responsive scale */
@media (max-width: 1100px) {
  .so-how { width: 88vw !important; }
}

@media (max-width: 600px) {
  .so-how { width: 92vw !important; padding: 2rem 1.2rem !important; }
}

/* === Responsive footer — mockup breakpoints === */

/* Tablet: 4 cols -> 2 cols, allow heading wrap, stack bottom row */
@media (max-width: 900px) {
  footer.wp-block-template-part .wp-block-columns {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  footer.wp-block-template-part h4.wp-block-heading,
  footer.wp-block-template-part h5.wp-block-heading,
  .so-brand-title {
    white-space: normal !important;
  }

  footer.wp-block-template-part .wp-block-group .wp-block-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
}

/* Mobile: 2 cols -> 1 col */
@media (max-width: 600px) {
  .wp-site-blocks footer.wp-block-template-part,
  footer.wp-block-template-part {
    padding: 2rem 1.2rem 1.5rem !important;
  }

  footer.wp-block-template-part .wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  footer.wp-block-template-part .wp-block-column:first-child p {
    max-width: 100% !important;
  }
}

/* === CONDICION BADGE ===
 * Companion mu-plugin: /wp-content/mu-plugins/condicion-badge.php
 * Renders the value of pa_condicion as a colored pill on product cards + single page.
 * Also hides the native WC Simple Auctions "Item condition: New" row.
 */

.so-cond {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #6b7280;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  margin-top: 0.4rem;
}

.so-cond--single {
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  margin: 0.3rem 0 0.9rem;
}

.so-cond-nuevo-en-caja { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.so-cond-nuevo { background: #22c55e; }
.so-cond-reacondicionado { background: #3b82f6; }
.so-cond-usado { background: #6b7280; }
.so-cond-para-repuestos { background: #f97316; }
.so-cond-no-funciona { background: #ef4444; }

p.auction-condition,
.auction-condition,
.auction-ajax-change p.auction-condition {
  display: none !important;
}

/* Subastas Online — Brand Pass Patches v1.0
 * Quick fixes for homepage layout issues observed after first launch render.
 * Append to subastas-brand-pass.css or load as a separate file enqueued AFTER it.
 *
 * Fixes:
 *  1. Trust bar — convert bullet list to horizontal flex row
 *  2. Hero CTA button — restore filled orange button (was rendering as plain text)
 *  3. WC products block heading "Seleccion de personal" — hide
 *  4. Page title visibility — ensure hidden on Inicio specifically
 *  5. Footer brand title sizing
 *  6. Misc spacing tweaks
 */

/* ============================================================================
 * 1. TRUST BAR — horizontal row instead of bullet list
 * ============================================================================ */
.so-trust-bar {
  background: var(--so-bg, #F6F1EA);
  padding: 1.5rem 1rem;
  width: 100%;
  border-bottom: 1px solid rgba(15, 44, 78, 0.08);
}

.so-trust-bar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  list-style: none !important;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
}

.so-trust-bar li {
  list-style: none !important;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(15, 44, 78, 0.7);
  letter-spacing: 0.3px;
  padding: 0;
  margin: 0;
  position: relative;
}

.so-trust-bar li::marker {
  content: "";
}

.so-trust-bar li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -1.5rem;
  top: 0;
  color: rgba(15, 44, 78, 0.3);
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .so-trust-bar ul {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  .so-trust-bar li:not(:last-child)::after {
    display: none;
  }
}

/* ============================================================================
 * 2. HERO CTA BUTTON — filled orange button
 * ============================================================================ */
.so-cta-primary {
  display: inline-block;
  background: #FF6A2E;
  color: #FFFFFF !important;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 0.9rem 2rem;
  border-radius: 4px;
  border: 2px solid #FF6A2E;
  transition: all 0.2s ease;
  cursor: pointer;
}

.so-cta-primary:hover {
  background: #E85A1E;
  border-color: #E85A1E;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 106, 46, 0.3);
}

.so-cta-primary:visited {
  color: #FFFFFF !important;
}

/* Hero CTA position */
.so-hero .so-cta-primary {
  margin-top: 1.5rem;
}

/* ============================================================================
 * 3. WC PRODUCTS BLOCK — hide auto "Seleccion de personal" heading
 * ============================================================================ */
.wp-block-woocommerce-product-collection > h2,
.wc-block-product-collection > h2 {
  display: none !important;
}

/* If you want to keep heading but restyle it */
.wp-block-woocommerce-product-collection h2.wp-block-heading {
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  color: #0F2C4E;
  text-align: center;
  margin: 2rem 0 1.5rem;
}

/* ============================================================================
 * 4. HOMEPAGE — ensure page title is hidden on Inicio
 * ============================================================================ */
.home .wp-block-post-title,
.page-id-172 .wp-block-post-title,
body.home h1.entry-title,
body.home .wp-block-template-part h1:first-child {
  display: none !important;
}

/* Also remove default Twenty Twenty-Five spacing above hero on homepage */
.home main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================================
 * 5. FOOTER POLISH
 * ============================================================================ */
/* Brand title sizing in footer */
.wp-block-site-title a {
  font-family: "Syne", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
}

/* Hide Twenty Twenty-Five default footer Twenty/WordPress credit strings */
.wp-block-template-part footer .wp-block-paragraph:has-text("Twenty Twenty"),
.wp-block-template-part footer p:has(a[href*="wordpress.org"]) {
  display: none !important;
}

/* ============================================================================
 * 6. CATALOG PRODUCT CARDS — defensive sizing
 * ============================================================================ */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: #FF6A2E;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
  background: #FF6A2E;
  color: #FFFFFF;
  border: 2px solid #FF6A2E;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.woocommerce ul.products li.product a.button:hover {
  background: #E85A1E;
  border-color: #E85A1E;
  color: #FFFFFF;
}

/* ============================================================================
 * 7. COMO FUNCIONA SECTION POLISH
 * ============================================================================ */
.so-como-funciona {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.so-como-funciona h2 {
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  color: #0F2C4E;
  text-align: center;
  margin-bottom: 2rem;
}

.so-como-funciona ol {
  list-style: none;
  counter-reset: step-counter;
  padding: 0;
}

.so-como-funciona ol li {
  counter-increment: step-counter;
  padding: 1rem 0 1rem 3.5rem;
  position: relative;
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  color: #0F2C4E;
}

.so-como-funciona ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: #FF6A2E;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

.so-como-funciona ol li strong {
  color: #0F2C4E;
  font-weight: 700;
}

/* End of patches */

/* Subastas Online — Brand Pass Final Patches v2.0
 * Append below the v1.0 patches in subastas-brand-pass.css.
 *
 * Fixes from observed homepage rendering:
 *  1. CTA button — constrain width to content (was rendering full-width)
 *  2. Hero text — ensure full title fits without clipping
 *  3. Como funciona — ensure left padding so counter circles aren't clipped
 *  4. Hero subtitle alignment polish
 *  5. Trust bar mobile fallback
 *  6. Como funciona section card-like background
 */

/* ============================================================================
 * 1. CTA BUTTON — constrain width
 * ============================================================================ */
.so-hero .so-cta-primary,
.so-cta-primary {
  display: inline-block !important;
  width: auto !important;
  max-width: 280px;
  align-self: flex-start !important;
  text-align: center;
  margin-right: auto !important;
}

/* If hero uses flex/grid that stretches children, override */
.so-hero,
.so-hero-inner {
  align-items: flex-start !important;
}

/* ============================================================================
 * 2. HERO TITLE — prevent clipping
 * ============================================================================ */
.so-hero-title {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-wrap: break-word;
  hyphens: none;
  line-height: 1.05;
  margin-top: 0;
  padding-top: 1rem;
}

/* Make sure hero container has enough height for 3-line title */
.so-hero {
  min-height: 480px;
  padding: 3rem 2rem;
}

@media (max-width: 768px) {
  .so-hero {
    min-height: 360px;
    padding: 2rem 1rem;
  }
  .so-hero-title {
    font-size: 2.2rem !important;
  }
}

/* ============================================================================
 * 3. COMO FUNCIONA — left padding for counter circles
 * ============================================================================ */
.so-como-funciona {
  padding: 2rem 3rem !important;
  max-width: 900px !important;
  margin: 3rem auto !important;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 44, 78, 0.05);
}

.so-como-funciona ol {
  padding-left: 0 !important;
  margin: 0;
}

.so-como-funciona ol li {
  padding-left: 4rem !important;
  margin: 0.5rem 0;
}

.so-como-funciona ol li::before {
  left: 0.5rem !important;
}

@media (max-width: 768px) {
  .so-como-funciona {
    padding: 1.5rem 1.5rem !important;
  }
  .so-como-funciona ol li {
    padding-left: 3rem !important;
    font-size: 0.95rem;
  }
  .so-como-funciona ol li::before {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
    left: 0 !important;
  }
}

/* ============================================================================
 * 4. HERO SUBTITLE POLISH
 * ============================================================================ */
.so-hero-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 1.5rem 0 0;
  max-width: 480px;
}

/* ============================================================================
 * 5. TRUST BAR MOBILE
 * ============================================================================ */
@media (max-width: 768px) {
  .so-trust-bar {
    padding: 1rem 0.5rem;
  }
  .so-trust-bar li {
    font-size: 0.85rem;
  }
}

/* ============================================================================
 * 6. SUBASTAS DESTACADAS PRODUCT GRID — defensive spacing
 * ============================================================================ */
.so-featured-products + .wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-collection {
  max-width: 1200px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
}

/* Section title styling */
.so-featured-products h2 {
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  color: #0F2C4E;
  text-align: center;
  margin: 3rem 0 1rem;
}

.so-featured-products .so-section-sub,
.so-featured-products p {
  text-align: center;
  color: rgba(15, 44, 78, 0.65);
  font-family: "DM Sans", sans-serif;
  margin-bottom: 2rem;
}

/* End of v2 patches */


/* =============================================================
 * Hide Dokan vendor profile completion banner (Errores_02 #4)
 * Gustavo: "Que no aparezca siempre lo del progreso del profile"
 * ============================================================= */
.dokan-dashboard-content .dokan-profile-progressbar,
.dokan-dashboard-content .dokan-profile-completion-progressbar,
.dokan-profile-completion-notice,
.dokan-progress-bar-wrap,
.dokan-vendor-profile-progress,
.dokan-onboarding-progress,
.dokan-add-facebook-progress,
.dokan-dashboard-content [class*="profile-complete"],
.dokan-dashboard-content [class*="profile-progress"],
.dokan-dashboard-content [class*="vendor-profile-progress"],
.dokan-dashboard-content .dokan-vendor-dashboard__profile-completion-progress,
.dokan-dashboard-content [class*="ProfileCompletion"] {
    display: none !important;
}


/* === Hide long Description field in vendor product editor (Errores_03 #9, since Dokan locks the Enable toggle) === */
.dokan-product-form .dokan-form-group:has(label[for*="description"]):not(:has(label[for*="short"])),
.dokan-product-form .dokan-product-edit__description,
.dokan-product-form [class*="product-description-field"]:not([class*="short"]) {
    display: none !important;
}

/* === Errores_04 #1 (full-width pages + panel) + #2 (3-4 col grid) =========== */

/* Full-width wrap on /subastas/ + /ventas/ where our category tree lives */
.wp-block-columns:has(.so-category-tree) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Product grid responsive columns inside the tree-equipped layout */
.wp-block-columns:has(.so-category-tree) ul.products,
.wp-block-columns:has(.so-category-tree) .products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
    list-style: none;
    padding-left: 0;
}
@media (min-width: 768px) {
    .wp-block-columns:has(.so-category-tree) ul.products,
    .wp-block-columns:has(.so-category-tree) .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (min-width: 1280px) {
    .wp-block-columns:has(.so-category-tree) ul.products,
    .wp-block-columns:has(.so-category-tree) .products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
.wp-block-columns:has(.so-category-tree) ul.products li.product,
.wp-block-columns:has(.so-category-tree) .products li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Mobile: stack tree above products */
@media (max-width: 767px) {
    .wp-block-columns:has(.so-category-tree) {
        flex-direction: column;
    }
    .wp-block-columns:has(.so-category-tree) .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* Dokan vendor dashboard: full-width container */
.dokan-dashboard-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    gap: 24px;
}
.dokan-dashboard-content,
.dokan-dashboard-product-listing-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
ul.dokan-dashboard-menu,
.dokan-dashboard-nav {
    flex: 0 0 240px !important;
    max-width: 240px !important;
}

/* Vendor tables (Subastas, Productos) wider; date columns don't break */
.dokan-table {
    width: 100% !important;
    max-width: 100% !important;
}
.dokan-table th,
.dokan-table td {
    padding: 8px 10px;
    vertical-align: top;
}
.dokan-table th:nth-child(5),
.dokan-table th:nth-child(6),
.dokan-table td:nth-child(5),
.dokan-table td:nth-child(6) {
    white-space: nowrap;
}

/* Mobile: dashboard stacks */
@media (max-width: 767px) {
    .dokan-dashboard-wrap {
        flex-direction: column;
    }
    ul.dokan-dashboard-menu,
    .dokan-dashboard-nav {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* === End Errores_04 #1 + #2 ============================================== */


/* === Errores_05 fix v2 — violet sidebar bleed (DOM-confirmed selectors) === */
/* Target: <div class="dokan-dash-sidebar"> inside <div class="dokan-dashboard-wrap"> (flex).
   Stops it stretching to match the right column. */
.dokan-dashboard-wrap {
    align-items: flex-start !important;
}

.dokan-dash-sidebar {
    align-self: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
}

/* === Errores_05 — /ventas/ + /subastas/ card button alignment === */
.woocommerce ul.products li.product,
ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
}
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
    margin-top: auto !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    min-height: 3em;
}

/* === Errores_05 — center WC chart legend rows (v2 — no wrap) === */
/* DOM: ul.woocommerce-legend__list > li.woocommerce-legend__item.
   v1 made each LI inline-flex which caused text wrapping. v2 keeps LI
   at full width but forces the inner content (checkbox + label + value)
   to sit in a single nowrap row centered in the card. */
ul.woocommerce-legend__list {
    align-items: center !important;
}

ul.woocommerce-legend__list li.woocommerce-legend__item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
}

ul.woocommerce-legend__list li.woocommerce-legend__item > *,
ul.woocommerce-legend__list li.woocommerce-legend__item span,
ul.woocommerce-legend__list li.woocommerce-legend__item input {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}


/* === Errores_05 v3 — violet bleed (kill bg on wrapper, keep on UL) === */
/* The .dokan-dash-sidebar wrapper has its own violet background. Even when
   the v2 flex-start rule stops it stretching, any padding/inherent height
   still paints violet below the menu items. Removing the wrapper bg leaves
   only the menu UL painting violet — exact match to the menu content area. */
div.dokan-dash-sidebar,
.dokan-dashboard-wrap > .dokan-dash-sidebar,
#dokan-navigation {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* === Errores_05 v4 — sidebar width + content fill === */
/* The .dokan-dashboard-wrap is flex with both children at flex: 1 1 auto,
   so they share the 1320px container ~50/50. That leaves a huge gap
   between the visible menu and the content cards. Pin sidebar to ~280px
   and let content take the rest. */
.dokan-dashboard-wrap > .dokan-dash-sidebar {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
}

.dokan-dashboard-wrap > .dokan-dashboard-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* === Errores_05 v5 — force flex row layout on dashboard wrap === */
/* v4 wasn't enough — the wrap is rendering as block (or wrapping), stacking
   sidebar above content. Force flex row + nowrap + pin sidebar + grow content. */
.dokan-dashboard-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dokan-dashboard-wrap > .dokan-dash-sidebar {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
}

.dokan-dashboard-wrap > .dokan-dashboard-content {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* === Errores_05 — /ventas/ + /subastas/ grid no-overflow + uniform cards === */

/* Grid: auto-fit so cards never overflow container; min 220px each */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0 !important;
}

/* Images: same height across all cards, object-fit cover for crop */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .wp-post-image,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin-bottom: 0.8rem !important;
}

/* Title: 3 lines max with ellipsis -> uniform vertical space per card */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 3.6em !important;
    height: 3.6em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

/* Price block consistent vertical space */
.woocommerce ul.products li.product .price {
    min-height: 1.5em !important;
    display: block !important;
    margin-bottom: 0.8rem !important;
}


/* === Errores_05 — block-based Product Collection title clamp === */
/* /ventas/ uses wp-block-post-title (block-based collection), not the classic
   .woocommerce-loop-product__title. Add block selectors so clamp applies there too. */
.wc-block-product-template li .wp-block-post-title,
.wc-block-product-template .wp-block-post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-post-template .wp-block-post-title,
.wp-block-post-template li .wp-block-post-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 3.6em !important;
    height: 3.6em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

/* Block-based product collection: make each card a flex column with button pinned bottom */
.wc-block-product-template li,
.wp-block-post-template li,
.wp-block-woocommerce-product-collection li.wc-block-product {
    display: flex !important;
    flex-direction: column !important;
}

.wc-block-product-template li .wp-block-button,
.wp-block-post-template li .wp-block-button,
.wc-block-product-template li .wc-block-components-product-button,
.wp-block-woocommerce-product-collection li .wc-block-components-product-button {
    margin-top: auto !important;
}

/* Block-based product collection: image uniform height across cards */
.wc-block-product-template li img,
.wp-block-post-template li img,
.wp-block-woocommerce-product-collection li img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* === Errores_05 — title clamp forced (high specificity) === */
/* Console confirmed title is h2.woocommerce-loop-product__title. Earlier rule
   wasn't biting; bump specificity with body+ul prefix and !important everywhere. */
body .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
body ul.products li.product h2.woocommerce-loop-product__title,
body .woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 3.6em !important;
    max-height: 3.6em !important;
    height: auto !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    word-break: break-word !important;
}


/* === Errores_05 — mobile hero + nav drawer fixes === */

/* Mobile (under 600px): prevent hero overflow, fit text to viewport, center button */
@media (max-width: 600px) {
    .so-hero {
        padding: 2rem 1.2rem 3rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .so-hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 !important;
    }

    .so-hero h1 {
        font-size: 28px !important;
        letter-spacing: -0.5px !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
        margin: 0 0 1rem 0 !important;
    }

    .so-hero-sub {
        font-size: 14px !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
    }

    .so-hero-btns {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .so-btn-primary,
    .so-hero-btns a.so-btn-primary {
        margin: 0 auto !important;
        display: inline-block !important;
    }
}

/* === Errores_05 — mobile navigation drawer: make items visible === */
/* Twenty Twenty-Five Navigation block's mobile overlay defaults to white bg.
   Our header sets nav links to white (rgba 0.75), so links become invisible
   on the overlay. Force dark bg + white text on the overlay to match header. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
    background-color: var(--so-navy) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    color: var(--so-white) !important;
    background: transparent !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.5rem 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open a:hover {
    color: var(--so-accent2) !important;
}

/* Close (X) button visible on dark drawer */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close svg {
    color: var(--so-white) !important;
    fill: var(--so-white) !important;
}

/* === Errores_05 — mobile nav: convert full-screen modal to dropdown === */
/* By default, Twenty Twenty-Five Navigation block opens as a full-screen overlay
   on mobile. Gustavo wants a compact dropdown below the header instead. */
@media (max-width: 781px) {
    /* Anchor: navigation block needs to be relative so the dropdown sits below it */
    header.wp-block-template-part .wp-block-navigation {
        position: relative !important;
    }

    /* The responsive container: stop being a full-screen modal, become a dropdown */
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation__responsive-container.has-modal-open {
        position: absolute !important;
        top: calc(100% + 0.55rem) !important;  /* sits just below the header */
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 220px !important;
        min-width: 200px !important;
        max-width: 90vw !important;
        height: auto !important;
        max-height: none !important;
        padding: 0.4rem 0 !important;
        background-color: var(--so-navy) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
        border-radius: 8px !important;
        z-index: 200 !important;
    }

    /* Inner container — column layout, no extra padding */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }

    /* Menu items — tight vertical spacing (half font size) */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        list-style: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
        border-bottom: none !important;
    }

    /* Link inside each item — vertical padding ~half font size */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: block !important;
        padding: 0.5em 1rem !important;
        color: var(--so-white) !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
        color: var(--so-accent2) !important;
        background-color: rgba(255, 255, 255, 0.04) !important;
    }

    /* Hide the big X close button (compact dropdown doesn't need it) */
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    /* Restore body scroll — block sometimes locks it for full-screen modal */
    body.has-modal-open {
        overflow: auto !important;
        position: static !important;
    }
}