/**
 * Team Maker Plus - Home Layout & Styles
 * Pure Native Theme integration (Zero Custom Card HTML)
 */

/* ================= GLOBAL RESET & OVERFLOW CONTAINMENT ================= */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body.home,
.home .website-wrapper,
.home .main-page-wrapper {
  background-color: #F5F6F4 !important;
}

.home .main-page-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.home #main-content.container {
  padding-top: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

.whb-top-bar {
  overflow: hidden !important;
}

.whb-tmp-mobile-top-trust,
.whb-column_mobile1 {
  max-width: 100% !important;
  overflow: hidden !important;
}

.woocommerce-store-notice.demo_store {
  display: none !important;
}

/* ================= CONTAINER ================= */
.tmp-home-wrapper {
  display: flex !important;
  flex-direction: column !important;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px 48px;
  box-sizing: border-box;
  overflow-x: clip !important;
}

.tmp-home-wrapper > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ================= HERO DUAL ================= */
.tmp-hero-dual-row {
  display: flex;
  gap: 24px;
}

/* Reparto 7/5 del hero (spec Home · fila 1: "grid 12 col: 7 + 5").
   El tema carga `.wp-block-wd-column { flex: 1 0 0px }` DESPUÉS de este
   fichero, así que el reparto por defecto era 50/50; de ahí el selector
   hijo + !important. Los bloques wd/column del hero no llevan
   columnWidthDesktop (atributo que wd/column no declara: era inerte). */
.tmp-hero-dual-row > .tmp-hero-maker-col {
  flex: 7 1 0% !important;
}

.tmp-hero-dual-row > .tmp-hero-trades-col {
  flex: 5 1 0% !important;
}

.tmp-hero-maker-cover {
  position: relative;
  min-height: 640px;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
}

/* Encuadre de la foto del maker. El asset es un retrato 480×720 y el banner
   es mucho más ancho que alto: con el `object-position: 50% 50%` por defecto
   el recorte vertical se comía la cara. Alineado arriba se ve la cabeza en
   cualquier ancho. */
.tmp-hero-maker-cover .wp-block-cover__image-background {
  object-position: center 15%;
}

.tmp-hero-overlay-content {
  position: relative;
  z-index: 2;
  padding: 40px 36px 36px;
  background: linear-gradient(to top, rgba(21, 38, 44, 0.95) 0%, rgba(21, 38, 44, 0.45) 60%, transparent 100%);
}

.tmp-eyebrow-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFD9CF;
  margin: 0 0 10px 0;
  font-weight: 500;
}

/* El eyebrow del hero cae en la parte alta del degradado, donde la foto aún
   está clara: sin esta sombra el coral se pierde sobre el gris del taller. */
.tmp-hero-overlay-content .tmp-eyebrow-mono {
  text-shadow: 0 1px 4px rgba(21, 38, 44, 0.8);
}

.tmp-hero-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  margin: 0 0 24px 0;
  max-width: 14ch;
}

/* Bajada del hero editorial. El bloque core/paragraph no ofrece control de
   medida de línea, así que la medida y la escala tipográfica viven aquí. */
.tmp-hero-subtitle {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  max-width: 46ch;
  margin: 0 0 24px 0;
}

.tmp-hero-actions-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tmp-btn-hero-white {
  background: #ffffff !important;
  color: #15262C !important;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 6px;
  text-decoration: none;
  border: none !important;
}

.tmp-btn-hero-white:hover {
  background: #F5F6F4 !important;
}

/* CTA del banner promo (bloque core/button). El tema solo estiliza sus
   propias clases .btn, no .wp-block-button__link, así que aquí se aplican
   los tokens del sistema de diseño al enlace del botón. */
.tmp-hero-promo-btn .wp-block-button__link {
  background-color: #ffffff !important;
  color: var(--tmp-ink) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  padding: 13px 24px !important;
  border-radius: var(--tmp-control-radius) !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.tmp-hero-promo-btn .wp-block-button__link:hover {
  background-color: var(--tmp-bg) !important;
  color: var(--tmp-ink) !important;
}

.tmp-btn-text-mob { display: none; }
.tmp-btn-text-desk { display: inline; }
.tmp-link-hero-all {
  color: #ffffff !important;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
}


/* Columna Derecha: ¿En qué trabajas? */
.tmp-trades-container {
  background: #FFFFFF;
  border: 1px solid #E3E7E5;
  border-radius: 14px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.tmp-trades-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.tmp-trades-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #15262C;
  margin: 0;
}

.tmp-trades-head a {
  color: #15262C;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
}

/* T4.7: el enlace "Ver todos los oficios" dejó de ser un <a> suelto dentro del
   bloque y ahora es un core/paragraph (bloque nativo). El <p> no debe aportar
   márgenes: .tmp-trades-head alinea sus hijos por baseline y el margen inferior
   por defecto del párrafo (--wd-block-spacing) desplazaría la línea. */
.tmp-trades-container .tmp-trades-head > p {
  margin: 0;
}

/* T4.7: al convertir los <div> en wp:group, los contenedores pasan a llevar
   .is-layout-flow y el CSS del tema padre (woodmart/css/parts/base.css) inyecta
   `margin-block: 0 var(--wd-block-spacing)` en los hijos directos con
   especificidad (0,2,0). Estas dos reglas devuelven el ritmo original de la
   tarjeta "¿En qué trabajas?": la cabecera vuelve a separar 14px de la rejilla
   y su h2 vuelve a no tener margen inferior. */
.tmp-trades-container > .wp-block-group.tmp-trades-head {
  margin-bottom: 14px;
}

.tmp-trades-container .tmp-trades-head > h2 {
  margin-bottom: 0;
}

.tmp-trades-container .wp-block-wd-container,
.tmp-trades-container .wd-dir-row,
.tmp-trades-grid,
.tmp-trades-pattern-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  height: calc(100% - 46px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.tmp-oficio-tile,
.wp-block-cover.tmp-oficio-tile {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 8px !important;
  overflow: hidden;
  position: relative;
  display: flex !important;
  align-items: flex-end !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tmp-oficio-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(21, 38, 44, 0.15);
}

.tmp-oficio-tile .wp-block-cover__inner-container {
  width: 100%;
  padding: 12px !important;
}

.tmp-oficio-tile p {
  margin: 0 !important;
  text-align: left !important;
}

.tmp-oficio-tile p a {
  display: inline-block;
  background: #ffffff !important;
  color: #15262C !important;
  font-family: 'Archivo', sans-serif;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.tmp-trade-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tmp-trade-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(21, 38, 44, 0.15);
}

.tmp-trade-badge {
  background: #ffffff;
  color: #15262C;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ================= POR CATEGORÍA ================= */
.tmp-categories-section {
  margin-top: 44px;
}

.tmp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}

.tmp-section-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #15262C;
  margin: 0;
}

.tmp-section-head a {
  color: #15262C;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
}

/* T4.7: los enlaces "Ver toda la tienda" / "Ver todo" pasaron de <a> suelto a
   core/paragraph (bloque nativo). Mismo motivo que en .tmp-trades-head: el <p>
   no debe aportar márgenes y romper la alineación por baseline de la cabecera. */
.tmp-section-head > p {
  margin: 0;
}

.tmp-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.tmp-cat-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E3E7E5;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tmp-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(21, 38, 44, 0.08);
}

.tmp-cat-img,
.tmp-cat-img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
  margin: 0;
}

.tmp-cat-icon-wrap {
  width: 64px;
  height: 64px;
  background: #15262C;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tmp-cat-info h3 {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #15262C;
  margin: 0 0 3px 0;
}

.tmp-cat-info h3 a {
  color: #15262C;
  text-decoration: none;
}

.tmp-cat-info h3 a::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.tmp-cat-info p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #5F6E74;
  margin: 0;
  text-transform: uppercase;
}

/* ================= LO MÁS NUEVO (NATIVE THEME CARDS) ================= */
/* ================= LO MÁS NUEVO (PRODUCT CARDS) ================= */
.tmp-products-section {
  margin-top: 48px;
}


/* ================= MAKERS ================= */
.tmp-makers-section {
  margin-top: 56px;
  width: 100%;
}

.tmp-makers-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 24px;
}

.tmp-makers-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #E4573D;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.tmp-makers-intro h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #15262C;
  margin: 0 0 8px 0;
  line-height: 1.15;
}

.tmp-makers-intro,
.tmp-makers-header,
.tmp-makers-section .tmp-makers-intro,
.tmp-makers-section .tmp-makers-header {
  align-items: flex-start !important;
  text-align: left !important;
}

/* T4.7: el eyebrow dejó de ser un <span> suelto y ahora es un core/paragraph
   (bloque nativo), así que coincidiría con estas reglas de párrafo y perdería
   su tipografía y su margen inferior. Se excluye explícitamente. */
.wp-block-group.tmp-makers-intro > p:not(.tmp-makers-eyebrow),
.tmp-makers-intro p:not(.tmp-makers-eyebrow),
.tmp-makers-header p:not(.tmp-makers-eyebrow),
.tmp-makers-section p:not(.tmp-makers-eyebrow) {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  color: #3E4F55;
  max-width: 65ch;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  text-align: left !important;
  line-height: 1.5;
}

/* T4.7: "Conocer a los makers" pasó de <a class="tmp-btn-makers-outline"> suelto
   a un bloque core/button, así que la clase vive ahora en el envoltorio
   .wp-block-button y el diseño se aplica al enlace interior. Las tres clases
   (0,3,0) ganan sin necesidad de !important al CSS del tema padre
   (woodmart/css/parts/wp-blocks.css), que pinta .wp-block-button__link como
   píldora oscura (fondo #32373c, radio 9999px, mayúsculas) dentro de
   .wp-block-button. */
.wp-block-button.tmp-btn-makers-outline .wp-block-button__link {
  display: inline-block;
  background-color: #FFFFFF;
  color: #15262C;
  border: 1px solid #15262C;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.tmp-btn-makers-outline .wp-block-button__link:hover {
  background-color: #15262C;
  color: #ffffff;
}

.tmp-maker-cards-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

.tmp-maker-cards-col {
  width: 100% !important;
  max-width: 100% !important;
}

.tmp-maker-card {
  position: relative;
  border-radius: 12px !important;
  overflow: hidden !important;
  min-height: 540px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tmp-maker-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.tmp-maker-card .wp-block-cover__background {
  background: linear-gradient(to top, rgba(21, 38, 44, 0.95) 0%, rgba(21, 38, 44, 0.4) 45%, transparent 80%) !important;
  opacity: 1 !important;
}

.tmp-maker-card .wp-block-cover__inner-container {
  position: relative;
  z-index: 3;
  width: 100% !important;
  padding: 24px 22px !important;
  text-align: left !important;
}

.tmp-maker-oficio {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #FFD9CF !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
}

.tmp-maker-card .tmp-maker-handle {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tmp-maker-card .tmp-maker-handle a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.tmp-maker-kit {
  font-family: 'Archivo', sans-serif !important;
  font-size: 14px !important;
  color: #E3E7E5 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ================= BARRA DE CONFIANZA ================= */
.tmp-trust-section-wrap {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid #D9DEDC;
  border-bottom: 1px solid #D9DEDC;
  width: 100%;
}

.tmp-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

.tmp-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tmp-trust-icon {
  width: 28px !important;
  height: 28px !important;
  color: #15262C !important;
  flex-shrink: 0 !important;
}

.tmp-trust-text strong {
  display: block !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #15262C !important;
  line-height: 1.25 !important;
}

.tmp-trust-text span {
  display: block !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: 13px !important;
  color: #5F6E74 !important;
  line-height: 1.25 !important;
}

/* ================= EMPRESAS B2B ================= */
.tmp-b2b-container {
  margin-top: 40px;
  background: #FFFFFF;
  border: 1px solid #E3E7E5;
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 1px 3px rgba(21, 38, 44, 0.04);
  width: 100%;
}

.tmp-b2b-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.tmp-b2b-content h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #15262C;
  margin: 0 0 6px 0;
}

.tmp-b2b-content p {
  font-size: 15px;
  color: #3E4F55;
  margin: 0;
  max-width: 65ch;
  line-height: 1.5;
}

.tmp-btn-b2b {
  background: #15262C !important;
  color: #ffffff !important;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  border: none !important;
}

/* ================= RESPONSIVE ================= */
.tmp-eyebrow-desk { display: inline; }
.tmp-eyebrow-mob { display: none; }

@media (max-width: 1023px) {
  .tmp-hero-dual-row {
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 20px;
  }

  /* Apiladas, cada columna del hero ocupa el ancho completo. Sin esto el
     tema deja `flex: 1 1 100%` (pensado para fila) sobre una fila en
     columna: el ancho caía al max-content (~860 px) y el hero se salía
     de la pantalla en móvil. */
  .tmp-hero-dual-row > .tmp-hero-maker-col,
  .tmp-hero-dual-row > .tmp-hero-trades-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .tmp-hero-maker-cover {
    min-height: 480px;
  }

  .tmp-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tmp-makers-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tmp-maker-cards-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .tmp-trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .tmp-b2b-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .tmp-home-wrapper {
    padding: 0 16px 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .home #main-content.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero: hide hotspots on mobile per user directive, clean text */
  .tmp-hero-maker-cover {
    min-height: 440px !important;
  }

  .tmp-hero-hotspots,
  .tmp-hotspot {
    display: none !important;
  }

  /* Scrim del banner: cubre la parte baja de la foto sea cual sea la altura
     del bloque de texto. El degradado de la caja de texto (escritorio) deja
     el eyebrow sobre la zona clara de la foto en móvil.
     z-index 0 = por encima de la imagen del cover (mismo nivel, va después en
     el árbol) y por debajo del contenedor interno del cover, que el núcleo
     pinta con z-index 1. */
  .tmp-hero-maker-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(21, 38, 44, 0.95) 0%, rgba(21, 38, 44, 0.8) 55%, rgba(21, 38, 44, 0.45) 78%, rgba(21, 38, 44, 0) 100%);
  }

  /* El texto del hero va por encima del scrim. */
  .tmp-hero-overlay-content {
    position: relative;
    z-index: 2;
  }

  .tmp-hero-overlay-content {
    max-width: 100% !important;
    padding: 24px 18px 20px !important;
    /* El degradado se mueve al propio banner (ver ::after) para que cubra
       siempre la parte baja de la foto y no solo la caja de texto, que en
       móvil es proporcionalmente mucho más alta. */
    background: none !important;
  }

  .tmp-eyebrow-desk { display: none !important; }
  .tmp-eyebrow-mob {
    display: inline !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    word-break: normal !important;
  }

  .tmp-hero-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }

  .tmp-link-hero-all { display: none !important; }
  .tmp-btn-text-mob { display: inline !important; }
  .tmp-btn-text-desk { display: none !important; }

  /* ¿En qué trabajas? horizontal scroll on mobile with compact badge padding */
  .tmp-trades-container {
    padding: 10px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    border: none !important;
  }

  .tmp-trades-container .wp-block-wd-container,
  .tmp-trades-container .wd-dir-row,
  .tmp-trades-grid,
  .tmp-trades-pattern-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .tmp-trades-container .tmp-oficio-tile,
  .tmp-trades-container .wp-block-cover.tmp-oficio-tile,
  .tmp-trades-pattern-grid .tmp-oficio-tile,
  .tmp-trades-grid .tmp-trade-card {
    flex: 0 0 135px !important;
    width: 135px !important;
    min-width: 135px !important;
    height: 135px !important;
    min-height: 135px !important;
    border-radius: 8px !important;
    position: relative !important;
    scroll-snap-align: start !important;
  }

  .tmp-trades-container .tmp-oficio-tile .wp-block-cover__inner-container {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    right: auto !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }

  .tmp-trades-container .tmp-oficio-tile p.has-large-font-size {
    margin: 0 !important;
    padding: 0 !important;
  }

  .tmp-trades-container .tmp-oficio-tile p a {
    display: inline-block !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    color: #15262C !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  /* Categories 2x2 grid */
  .wp-block-group.tmp-categories-grid,
  .tmp-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tmp-cat-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    gap: 8px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .tmp-cat-img,
  .tmp-cat-img img,
  .tmp-cat-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
  }

  .tmp-cat-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .tmp-cat-info h3 {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  .tmp-cat-info p {
    display: none !important;
  }

  /* Lo más nuevo 2-column clean grid */
  .tmp-products-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 36px !important;
  }

  .tmp-products-section .wd-products-element,
  .tmp-products-section .products.elements-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 10px !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .tmp-products-section .product-grid-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tmp-products-section .product-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* Makers horizontal swipe carousel */
  .tmp-makers-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 40px !important;
  }

  .tmp-makers-intro h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* T4.7: mismo motivo que en la regla equivalente de escritorio: el eyebrow es
     ahora un core/paragraph y no debe heredar el tamaño de los párrafos. */
  .tmp-makers-intro p:not(.tmp-makers-eyebrow) {
    font-size: 14px !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .tmp-maker-cards-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    width: 100% !important;
  }

  .tmp-maker-cards-col {
    flex: 0 0 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start !important;
  }

  .tmp-maker-card {
    min-height: 440px !important;
    padding: 20px 16px !important;
  }

  .tmp-maker-card .tmp-maker-handle {
    font-size: 17px !important;
    white-space: nowrap !important;
  }

  /* Trust bar 2x2 */
  .tmp-trust-section-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 0 !important;
    margin-top: 32px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .tmp-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tmp-trust-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tmp-trust-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  .tmp-trust-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .tmp-trust-text strong {
    font-size: 11px !important;
    line-height: 1.25 !important;
    word-break: normal !important;
  }

  .tmp-trust-text span {
    font-size: 10px !important;
    line-height: 1.25 !important;
    word-break: normal !important;
  }

  /* B2B container */
  .tmp-b2b-container {
    padding: 20px 16px !important;
    margin-top: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tmp-b2b-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .tmp-b2b-content h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  .tmp-b2b-content p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    margin-bottom: 14px !important;
  }

  .tmp-btn-b2b {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .tmp-hero-maker-cover {
    min-height: 420px;
  }

  .tmp-hero-overlay-content {
    padding: 20px 16px 18px;
  }

  .tmp-hero-title {
    font-size: 26px;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   Product Badges: Design System Tokens
   ========================================================================== */
.product-label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

.product-label.featured {
  background-color: #FFFFFF !important;
  color: #15262C !important;
  border: 1px solid #E3E7E5 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.product-label.new {
  background-color: #15262C !important;
  color: #FFFFFF !important;
}

.product-label.onsale {
  background-color: #E4573D !important;
  color: #FFFFFF !important;
}