/* ============================================================
   UNBORING FASHION — DIVI CHILD
   Editorial / fashion design system
   Design only. No plugin functionality.
   ============================================================ */

/* ------------------------------------------------------------
   Tipografía Tropika (autoalojada)
   Archivo: assets/fonts/tropika-island-int.woff2
   Se declara con font-family "Tropika" para que el resto del
   CSS (variable --ub-font-display) no necesite cambiar nada.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Tropika";
  src: url("../fonts/tropika-island-int.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette */
  --ub-black: #111111;
  --ub-white: #ffffff;
  --ub-ink: #171717;
  --ub-muted: #737373;
  --ub-line: #e9e9e9;
  --ub-paper: #fbfaf8;

  /* Signature palette */
  --ub-pink: #ff72b6;
  --ub-pink-soft: #ffd2e8;
  --ub-lime: #d9ff45;
  --ub-lilac: #c9b6ff;
  --ub-lilac-soft: #eee8ff;

  /* Typography
     Tropika es una fuente decorativa de un único peso (no tiene
     variantes bold/semibold/light) — pensada solo para titulares
     grandes tipo portada (H1, .ub-display, .ub-hero-title,
     .ub-section-title), NUNCA para texto a tamaño pequeño ni para
     todos los niveles de encabezado.
     Para H2-H6 usamos --ub-font-heading: una pila de fuentes del
     sistema que sí tienen semibold real (600), para poder variar
     el peso donde Tropika no puede. */
  --ub-font-display: "Tropika", "Bodoni 72", Didot, Georgia, serif;
  --ub-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ub-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --ub-content: 1380px;
  --ub-narrow: 860px;
  --ub-gap: clamp(18px, 2.2vw, 34px);

  /* UI */
  --ub-radius: 0px;
  --ub-shadow: 0 18px 50px rgba(0, 0, 0, .08);
  --ub-transition: 180ms ease;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body {
  color: var(--ub-ink);
  background: var(--ub-white);
  font-family: var(--ub-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* H1: único nivel que usa Tropika por defecto — reservado a
   titulares grandes tipo portada. Mayúsculas automáticas aunque
   se escriba en minúscula/frase en Divi. */
h1,
.et_pb_module h1 {
  font-family: var(--ub-font-display) !important;
  font-weight: 400;
  letter-spacing: -.035em;
  text-transform: uppercase;
  line-height: .92;
}

/* H2-H6: fuente del sistema con semibold real. Así sí se pueden
   variar tamaños y pesos sin depender de una fuente de un solo
   peso. Usa las clases .ub-weight-* para ajustar el peso puntual
   de cualquier título dentro de Divi Builder. */
h2, h3, h4, h5, h6,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6,
.entry-title,
.et_pb_post .entry-title {
  font-family: var(--ub-font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

h2 { line-height: 1.05; }
h3, h4, h5, h6 { line-height: 1.15; }

p, li, input, textarea, select, button {
  font-family: var(--ub-font-body);
}

/* Utilidades de peso — aplícalas en "CSS ID y clases" de
   cualquier módulo de texto/título en Divi Builder. */
.ub-weight-regular { font-weight: 400 !important; }
.ub-weight-medium { font-weight: 500 !important; }
.ub-weight-semibold { font-weight: 600 !important; }
.ub-weight-bold { font-weight: 700 !important; }
.ub-weight-black { font-weight: 900 !important; }

::selection {
  background: var(--ub-lime);
  color: var(--ub-black);
}

/* ------------------------------------------------------------
   Editorial typography helpers
   ------------------------------------------------------------ */
.ub-display,
.ub-display * {
  font-family: var(--ub-font-display) !important;
}

.ub-kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--ub-font-body) !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ub-hero-title,
.ub-hero-title h1,
.ub-hero-title h2 {
  font-family: var(--ub-font-display) !important;
  font-size: clamp(58px, 8vw, 132px) !important;
  line-height: .82 !important;
  letter-spacing: -.055em !important;
  text-transform: uppercase;
}

.ub-section-title,
.ub-section-title h2 {
  font-family: var(--ub-font-display) !important;
  font-size: clamp(42px, 5.4vw, 84px) !important;
  line-height: .88 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Signature colors
   ------------------------------------------------------------ */
.ub-bg-pink { background: var(--ub-pink-soft) !important; }
.ub-bg-pink-strong { background: var(--ub-pink) !important; }
.ub-bg-lime { background: var(--ub-lime) !important; }
.ub-bg-lilac { background: var(--ub-lilac-soft) !important; }
.ub-bg-lilac-strong { background: var(--ub-lilac) !important; }
.ub-bg-paper { background: var(--ub-paper) !important; }
.ub-bg-black { background: var(--ub-black) !important; color: var(--ub-white) !important; }

.ub-marker-pink,
.ub-marker-lime,
.ub-marker-lilac {
  display: inline;
  padding-inline: .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ub-marker-pink { background: linear-gradient(transparent 56%, var(--ub-pink) 56%); }
.ub-marker-lime { background: linear-gradient(transparent 56%, var(--ub-lime) 56%); }
.ub-marker-lilac { background: linear-gradient(transparent 56%, var(--ub-lilac) 56%); }

/* ------------------------------------------------------------
   Divi section / row helpers
   ------------------------------------------------------------ */
.ub-wide .et_pb_row,
.et_pb_row.ub-wide {
  width: min(94%, var(--ub-content));
  max-width: var(--ub-content);
}

.ub-editorial-section {
  border-top: 1px solid var(--ub-black);
  border-bottom: 1px solid var(--ub-black);
}

.ub-rule-top { border-top: 1px solid var(--ub-black); }
.ub-rule-bottom { border-bottom: 1px solid var(--ub-black); }
.ub-outline { border: 1px solid var(--ub-black); }
.ub-shadow { box-shadow: var(--ub-shadow); }

/* ------------------------------------------------------------
   Editorial hero
   ------------------------------------------------------------ */
.ub-hero {
  overflow: hidden;
  border-top: 1px solid var(--ub-black);
  border-bottom: 1px solid var(--ub-black);
}
.ub-hero > .et_pb_row {
  width: min(94%, 1500px);
  max-width: 1500px;
}
.ub-hero h1 {
  font-family: var(--ub-font-display) !important;
  font-size: clamp(60px, 8.8vw, 144px) !important;
  line-height: .80 !important;
  letter-spacing: -.06em !important;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.ub-button,
.et_pb_button.ub-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px !important;
  border: 1px solid var(--ub-black) !important;
  border-radius: 0 !important;
  background: var(--ub-black) !important;
  color: var(--ub-white) !important;
  font-family: var(--ub-font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  transition: transform var(--ub-transition), box-shadow var(--ub-transition), background var(--ub-transition), color var(--ub-transition) !important;
}
.ub-button:hover,
.et_pb_button.ub-button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--ub-lime);
}
.ub-button.ub-button-pink:hover,
.et_pb_button.ub-button.ub-button-pink:hover { box-shadow: 5px 5px 0 var(--ub-pink); }
.ub-button.ub-button-lilac:hover,
.et_pb_button.ub-button.ub-button-lilac:hover { box-shadow: 5px 5px 0 var(--ub-lilac); }

/* ------------------------------------------------------------
   Divi Blog — editorial cards
   Add .ub-blog-grid to a Divi Blog module.
   ------------------------------------------------------------ */
.ub-blog-grid .et_pb_ajax_pagination_container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ub-gap);
}
.ub-blog-grid article.et_pb_post {
  margin: 0 !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ub-black) !important;
  background: transparent !important;
}
.ub-blog-grid .entry-featured-image-url {
  margin: 0 0 16px !important;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.ub-blog-grid .entry-featured-image-url img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.ub-blog-grid article:hover img { transform: scale(1.025); }
.ub-blog-grid .entry-title {
  margin-top: 0;
  font-family: var(--ub-font-heading) !important;
  font-weight: 600 !important;
  font-size: clamp(20px, 1.6vw, 28px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}
.ub-blog-grid .post-meta {
  font-family: var(--ub-font-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  color: var(--ub-muted) !important;
}

/* Landscape magazine variant */
.ub-blog-landscape .et_pb_post {
  display: grid;
  grid-template-columns: minmax(180px, .85fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: start;
  border-bottom: 1px solid var(--ub-black);
  padding-bottom: 22px !important;
}
.ub-blog-landscape .entry-featured-image-url {
  margin: 0 !important;
}

/* ------------------------------------------------------------
   Image / collage helpers
   ------------------------------------------------------------ */
.ub-tape,
.ub-tape-pink,
.ub-tape-lime,
.ub-tape-lilac { position: relative; }

.ub-tape::before,
.ub-tape-pink::before,
.ub-tape-lime::before,
.ub-tape-lilac::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: -11px;
  left: 40%;
  width: 88px;
  height: 24px;
  transform: rotate(-5deg);
  opacity: .86;
  pointer-events: none;
}
.ub-tape::before,
.ub-tape-pink::before { background: var(--ub-pink); }
.ub-tape-lime::before { background: var(--ub-lime); }
.ub-tape-lilac::before { background: var(--ub-lilac); }

.ub-tilt-left { transform: rotate(-1.4deg); }
.ub-tilt-right { transform: rotate(1.4deg); }
.ub-photo-frame { border: 1px solid var(--ub-black); background: var(--ub-white); padding: 8px; }
.ub-image-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   Editorial cards
   ------------------------------------------------------------ */
.ub-card {
  position: relative;
  background: var(--ub-white);
  border: 1px solid var(--ub-black);
  transition: transform var(--ub-transition), box-shadow var(--ub-transition);
}
.ub-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ub-lime);
}
.ub-card-pink:hover { box-shadow: 7px 7px 0 var(--ub-pink); }
.ub-card-lilac:hover { box-shadow: 7px 7px 0 var(--ub-lilac); }

/* ------------------------------------------------------------
   Header / navigation — conservative defaults
   ------------------------------------------------------------ */
#main-header {
  box-shadow: none !important;
  border-bottom: 1px solid var(--ub-line);
}
#top-menu-nav > ul > li > a,
.et-menu > li > a {
  font-family: var(--ub-font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase;
}

/* Useful when using a Theme Builder menu module */
.ub-nav .et-menu > li > a {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Forms — visual only
   ------------------------------------------------------------ */
.ub-form input[type="text"],
.ub-form input[type="email"],
.ub-form input[type="url"],
.ub-form input[type="number"],
.ub-form input[type="tel"],
.ub-form input[type="search"],
.ub-form select,
.ub-form textarea {
  width: 100%;
  border: 1px solid var(--ub-black) !important;
  border-radius: 0 !important;
  background: var(--ub-white) !important;
  color: var(--ub-black) !important;
  padding: 13px 14px !important;
  box-shadow: none !important;
}
.ub-form input:focus,
.ub-form select:focus,
.ub-form textarea:focus {
  outline: 3px solid var(--ub-lilac);
  outline-offset: 0;
}

/* ------------------------------------------------------------
   HOME — bloques de portada tipo revista
   Pensados para montarse en Divi Builder combinando módulos
   nativos (Texto, Imagen, Galería, Tienda, Suscripción, Blog)
   con estas clases en "CSS ID y clases" de cada módulo/fila.
   Ver README para la tabla de qué módulo usar en cada bloque.
   ------------------------------------------------------------ */

/* -- Grid modificador de columnas para .ub-blog-grid -- */
.ub-blog-grid.ub-cols-2 .et_pb_ajax_pagination_container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ub-blog-grid.ub-cols-3 .et_pb_ajax_pagination_container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ub-blog-grid.ub-cols-4 .et_pb_ajax_pagination_container { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -- Hero split: foto/collage + texto (sección "Moda para una
   vida menos aburrida"). Aplica a la et_pb_row que contiene dos
   columnas: una de texto y otra de imagen. -- */
.ub-hero-split.et_pb_row {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--ub-gap);
}
.ub-hero-split > .et_pb_column { width: 100% !important; }
.ub-hero-split .ub-collage-image {
  position: relative;
  border: 1px solid var(--ub-black);
}

/* -- Grid "Lo último en Unboring" / cualquier grid de tarjetas
   sencillas que no venga de un módulo Blog (ej. módulos Blurb
   dentro de una fila). -- */
.ub-card-grid {
  display: grid !important;
  gap: var(--ub-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ub-card-grid.ub-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ub-card-grid.ub-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ub-card-grid .et_pb_blurb_image { margin-bottom: 12px !important; aspect-ratio: 4/5; overflow: hidden; }
.ub-card-grid .et_pb_blurb_image img { width: 100%; height: 100%; object-fit: cover; }
.ub-card-grid .et_pb_module_header {
  font-family: var(--ub-font-heading) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -.01em;
}

/* -- Banner de marcas / promo a todo ancho, con CTA (sección
   "Descubre marcas"). Aplica a la et_pb_section o et_pb_row. -- */
.ub-banner {
  padding: var(--ub-gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--ub-gap);
}
.ub-banner .ub-banner-title {
  font-family: var(--ub-font-display) !important;
  text-transform: uppercase;
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: .9 !important;
  letter-spacing: -.03em;
}

/* -- Mini-slider / carrusel de revista (CSS puro, sin JS).
   Sirve para el carrusel de marcas del banner, para "looks de
   la semana" o cualquier tira horizontal de tarjetas.
   Estructura esperada:
   <div class="ub-carousel">
     <div class="ub-carousel-item">...</div>
     <div class="ub-carousel-item">...</div>
   </div>
   En Divi: una fila con "Módulo de código" usando ese HTML, o
   varias columnas dentro de una fila con overflow — lo más
   sencillo es un módulo de código para controlar bien el scroll.
   -- */
.ub-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.ub-carousel-item {
  flex: 0 0 auto;
  width: clamp(120px, 22vw, 180px);
  scroll-snap-align: start;
  background: var(--ub-white);
  border: 1px solid var(--ub-black);
  padding: 10px;
  text-align: center;
}
.ub-carousel-item img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  margin-bottom: 8px;
}
.ub-carousel-item .ub-carousel-label {
  font-family: var(--ub-font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* -- Grid de tienda (módulo Shop de Divi). Aplica a la
   et_pb_shop del bloque "Shop Unboring". -- */
.ub-shop-grid .et_shop_image { border: 1px solid var(--ub-black); margin-bottom: 10px !important; }
.ub-shop-grid .woocommerce-loop-product__title,
.ub-shop-grid .et_shop_product_title {
  font-family: var(--ub-font-heading) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.ub-shop-grid .price { font-family: var(--ub-font-body) !important; font-weight: 700 !important; }

/* -- Bento de herramientas (5 tarjetas, sección "Herramientas
   Unboring"). Aplica a una fila con varias columnas dentro. -- */
.ub-tools-bento {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--ub-black);
  border: 1px solid var(--ub-black);
}
.ub-tools-bento > .et_pb_column {
  background: var(--ub-lilac-soft) !important;
  padding: 26px 16px !important;
  text-align: center;
}
.ub-tools-bento .et_pb_module_header {
  font-family: var(--ub-font-heading) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* -- Barra de newsletter horizontal (módulo Suscripción / Email
   Optin de Divi). Aplica a la et_pb_signup o a su fila. -- */
.ub-newsletter-bar.et_pb_row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--ub-gap);
  border-top: 1px solid var(--ub-black);
  padding-top: var(--ub-gap);
}
.ub-newsletter-bar .et_pb_newsletter_form { display: flex; gap: 0; }
.ub-newsletter-bar input[type="email"] {
  border: 1px solid var(--ub-black) !important;
  border-radius: 0 !important;
  min-width: 260px;
}
.ub-newsletter-bar .et_pb_newsletter_button {
  border-radius: 0 !important;
  background: var(--ub-black) !important;
}

/* ------------------------------------------------------------
   Footer (bloque de la home, sección "The Unboring Edit")
   ------------------------------------------------------------ */
.ub-footer {
  border-top: 1px solid var(--ub-black);
}
.ub-footer a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   Footer GLOBAL de Divi (widgets + barra inferior) — se aplica
   en todas las páginas automáticamente, sin tocar footer.php.
   Selectores estándar de Divi: #main-footer, .footer-widget,
   #footer-bottom, #footer-info, .et-social-icons.
   ------------------------------------------------------------ */
#main-footer {
  background: var(--ub-black) !important;
  padding-top: 56px;
}

/* Títulos de widget ("Archivos", "Categorías"...) */
#main-footer .widget-title,
#main-footer .fwidget h4 {
  font-family: var(--ub-font-heading) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ub-white) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 12px;
  margin-bottom: 16px !important;
}

/* Listas dentro de los widgets (enlaces de Archivos/Categorías,
   o de tu menú/nav personalizado si usas el bloque .ub-footer-nav) */
#main-footer .fwidget ul,
.ub-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
#main-footer .fwidget ul li,
.ub-footer-nav li {
  margin: 0 0 10px;
}
#main-footer .fwidget a,
.ub-footer-nav a {
  color: rgba(255, 255, 255, .75) !important;
  font-family: var(--ub-font-body);
  font-size: 14px;
  text-decoration: none;
}
#main-footer .fwidget a:hover,
.ub-footer-nav a:hover {
  color: var(--ub-white) !important;
}

/* Bloque de marca (logo + tagline) para el widget de "Custom HTML" */
.ub-footer-brand {
  color: var(--ub-white);
}
.ub-footer-brand .ub-footer-logo {
  font-family: var(--ub-font-display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.ub-footer-brand p {
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  max-width: 280px;
}

/* Bloque de pie inyectado automáticamente por functions.php
   (unboring_fashion_footer_brand_block). Sustituye visualmente a
   los widgets por defecto de Divi, que se ocultan aquí debajo. */
.ub-footer-inject {
  background: var(--ub-black);
  padding: 48px 20px 24px;
}
.ub-footer-inject-row {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.ub-footer-inject .ub-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.ub-footer-inject .ub-footer-nav li { margin: 0; }

/* Ocultar los widgets por defecto de Divi en el pie (Archivos,
   Categorías, etc.) ahora que el bloque de arriba los sustituye.
   Si en el futuro quieres volver a usar widgets normales ahí,
   borra esta regla. */
#main-footer .footer-widget,
#main-footer .et_pb_widget_area {
  display: none !important;
}

/* Placeholder limpio para imágenes que aún no has subido
   (usado por la función unboring_fashion_image() en la plantilla
   de home). Sustituye al icono de imagen rota. */
.ub-img-placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: #999;
  font-family: var(--ub-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  padding: 10px;
}

/* Iconos sociales del pie (barra inferior de Divi) */
#footer-bottom .et-social-icons a,
.ub-footer-social a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 50%;
  color: var(--ub-white) !important;
  transition: background var(--ub-transition), border-color var(--ub-transition), color var(--ub-transition);
}
#footer-bottom .et-social-icons a:hover,
.ub-footer-social a:hover {
  background: var(--ub-lime) !important;
  border-color: var(--ub-lime) !important;
  color: var(--ub-black) !important;
}

/* Barra inferior: copyright + enlaces legales */
#footer-bottom,
.ub-footer-bottombar {
  background: var(--ub-black) !important;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0;
}
#footer-bottom .container,
.ub-footer-bottombar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
#footer-info,
.ub-footer-bottombar p {
  color: rgba(255, 255, 255, .55) !important;
  font-family: var(--ub-font-body);
  font-size: 12px;
  margin: 0;
}
.ub-footer-bottombar a {
  color: rgba(255, 255, 255, .55);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ub-footer-bottombar a:hover { color: var(--ub-white); }

@media (max-width: 640px) {
  #footer-bottom .container,
  .ub-footer-bottombar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .ub-blog-grid .et_pb_ajax_pagination_container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ub-blog-landscape .et_pb_post {
    grid-template-columns: 1fr;
  }
  .ub-hero h1 {
    font-size: clamp(56px, 15vw, 96px) !important;
  }
  .ub-hero-split.et_pb_row,
  .ub-banner {
    grid-template-columns: 1fr;
  }
  .ub-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ub-tools-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ub-blog-grid .et_pb_ajax_pagination_container,
  .ub-blog-grid.ub-cols-2 .et_pb_ajax_pagination_container,
  .ub-blog-grid.ub-cols-3 .et_pb_ajax_pagination_container,
  .ub-blog-grid.ub-cols-4 .et_pb_ajax_pagination_container,
  .ub-card-grid,
  .ub-card-grid.ub-cols-2,
  .ub-card-grid.ub-cols-3,
  .ub-tools-bento {
    grid-template-columns: 1fr;
  }
  .ub-newsletter-bar.et_pb_row {
    flex-direction: column;
    align-items: stretch;
  }
  .ub-hero-title,
  .ub-hero-title h1,
  .ub-hero-title h2 {
    font-size: clamp(52px, 16vw, 82px) !important;
  }
  .ub-section-title,
  .ub-section-title h2 {
    font-size: clamp(42px, 13vw, 68px) !important;
  }
}

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