/* =========================================================
   Receta Ecuatoriana – CSS unificado (mobile-first)
   Reemplaza por completo assets/css/recetas.css
   ========================================================= */

/* ---------- Tokens / base ---------- */
:root{
  --re-pri:#0b6b3a;
  --re-sec:#f08300;
  --re-bg:#ffffff;
  --re-txt:#222222;
  --re-muted:#6b7280;
  --re-card:#ffffff;
  --re-border:#e5e7eb;

  /* Shell / sticky */
  --re-sticky-offset:72px;   /* alto del header sticky del tema */
  --appbar-h:64px;           /* alto de barra inferior */
}

.re-single,.re-archive{ max-width:1100px; margin:2rem auto; padding:0 1rem; }
.re-single{ font-size:17px; line-height:1.55; color:var(--re-txt); }

/* ---------- Botones / chips ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:.6rem;
  border:1px solid var(--re-border); background:#fff; color:inherit;
  text-decoration:none; cursor:pointer;
}
.btn:hover{ background:#fafafa; }
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--re-border); padding:.35rem .55rem;
  border-radius:.6rem; font-size:.9rem; color:var(--re-muted);
}
.badge strong{ color:var(--re-txt); }
/* ===== HERO v2 (overlay móvil, split desktop) ===== */
.re-hero-v2{
  display:grid; gap:1rem; grid-template-columns:1fr; margin-bottom:1rem;
}
.re-hero-v2__media{
  position:relative; margin:0; border-radius:.9rem; overflow:hidden;
  aspect-ratio: 4 / 3; /* evita CLS y da marco estable */
}
.re-hero-v2__img{ width:100%; height:100%; object-fit:cover; display:block; }

.re-hero-v2__overlay{
  position:absolute; inset:auto 0 0 0; padding:1rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.0) 60%);
  color:#fff; display:flex; flex-direction:column; gap:.5rem;
}
.re-hero-v2__title{
  margin:0; font-size: clamp(1.3rem, 4vw, 2rem);
  text-wrap: balance;
}
.re-meta{
  list-style:none; margin:0; padding:0; display:flex; gap:.4rem; flex-wrap:wrap;
}
.re-meta__item{
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; padding:.35rem .55rem; border-radius:.55rem; font-size:.9rem;
}
.re-meta__item svg{ width:18px; height:18px; fill:currentColor; opacity:.95; }
.re-meta__item .lbl{ opacity:.9; }
.re-meta__item strong{ font-weight:700; }

/* Panel de texto/acciones (queda debajo en móvil, izquierda en desktop) */
.re-hero-v2__panel{
  background:#111827; color:#fff; border-radius:.9rem; padding:1rem;
}
.re-hero-v2__intro{
  margin:0; line-height:1.6; opacity:.95;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.re-hero-v2__intro[aria-expanded="true"],
.re-hero-v2__intro[data-collapsed="false"]{
  -webkit-line-clamp:unset; overflow:visible;
}
.re-intro-toggle{ margin-top:.45rem; }

/* Desktop: 2 columnas, panel = izquierda, imagen = derecha */
@media (min-width: 1024px){
  .re-hero-v2{ grid-template-columns: 1.15fr .85fr; align-items:stretch; }
  .re-hero-v2__media{ order:2; aspect-ratio: auto; min-height: 380px; }
  .re-hero-v2__panel{ order:1; display:flex; flex-direction:column; justify-content:center; }
}

/* Micro-mejoras de lectura */
.re-hero-v2__panel, .re-hero-v2__overlay { backdrop-filter: saturate(110%); }

/* =========================================================
   Pestañas con iconos (accesibles) + sticky
   ========================================================= */
.re-tabs2-wrap{
   top:var(--re-sticky-offset);
  z-index:6; background:#fff; padding-top:.25rem; margin: .5rem 0 1rem;
}
.re-tabs2{
  display:flex; gap:.5rem; overflow-x:auto; padding:.35rem;
  border:1px solid var(--re-border); border-radius:.6rem; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.re-tab{
  appearance:none; border:1px solid var(--re-border); background:#fff; color:inherit;
  border-radius:.6rem; padding:.5rem .85rem; display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer; white-space:nowrap; min-height:44px;
}
.re-tab[aria-selected="true"], .re-tab.is-active{ background:#f9fafb; border-color:#d1d5db; }
.tab-ico{ width:18px; height:18px; fill:currentColor; opacity:.85; }
.re-panels{ margin-top:.25rem; }
.re-tabpanel[hidden]{ display:none !important; }
.re-tabpanel.is-active{ display:block; }

/* =========================================================
   Ingredientes (lista) + Nutrición (compacta) en 2 columnas
   ========================================================= */
.re-ing-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.re-ing-list ul{ margin:0; padding-left:1.1rem; line-height:1.6; }

.re-nutri--compact{
  background:#111827; color:#fff; border-radius:.8rem; padding:1rem;
  font-size:.85rem;
}
.re-h2-sm{ font-size:1rem; margin:0 0 .5rem; color:#fff; }
.re-nutri--compact table{ width:100%; border-collapse:collapse; }
.re-nutri--compact th, .re-nutri--compact td{
  padding:.35rem .2rem; border-top:1px solid rgba(255,255,255,.15);
}
.re-nutri--compact th{ width:65%; font-weight:600; }
.re-nutri--compact td{ text-align:right; }

/* Desktop: 2 columnas y nutrición sticky */
@media (min-width:1024px){
  .re-ing-grid{ grid-template-columns:1.1fr .9fr; align-items:start; }
  .re-nutri--compact{ position:sticky; top:calc(var(--re-sticky-offset) + 56px); }
}

/* =========================================================
   Preparación + Video responsivo
   ========================================================= */
.re-pasos ol{ margin:0; padding-left:1.2rem; line-height:1.7; }
.re-video-wrap{ position:relative; padding-top:56.25%; border-radius:.8rem; overflow:hidden; }
.re-video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* =========================================================
   Relacionadas / tarjetas
   ========================================================= */
.re-grid-cards{ display:grid; gap:1rem; grid-template-columns:1fr; }
.re-card{
  background:var(--re-card); border:1px solid var(--re-border);
  border-radius:.8rem; overflow:hidden; display:flex; flex-direction:column;
}
.re-card__media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.re-card__body{ padding:.85rem; display:flex; flex-direction:column; gap:.35rem; }
.re-card__title{ font-size:1.05rem; margin:.1rem 0; }
.re-card__meta{ color:var(--re-muted); font-size:.9rem; display:flex; gap:.5rem; flex-wrap:wrap; }

@media (min-width:980px){ .re-grid-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* =========================================================
   Archivo de recetas (listado) – opcional
   ========================================================= */
.re-archive .re-filters{
  display:grid; gap:.75rem; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:1rem;
}
.re-archive .re-filters .field{ display:flex; gap:.5rem; flex-direction:column; }
@media (max-width:980px){
  .re-archive .re-filters{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* =========================================================
   Barra inferior tipo app (shell)
   ========================================================= */
.has-appbar{ padding-bottom:calc(var(--appbar-h) + env(safe-area-inset-bottom)); }
.re-appbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--appbar-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff; border-top:1px solid var(--re-border);
  display:flex; justify-content:space-around; align-items:stretch; z-index:1000;
}
.appbar__item{
  position:relative; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  text-decoration:none; font-size:12px; color:var(--re-txt);
}
.appbar__item svg{ width:22px; height:22px; fill:currentColor; }
.appbar__item.is-active{ color:var(--re-pri); font-weight:600; }
.appbar__item .badge{
  position:absolute; margin-left:14px; margin-top:-18px; font-size:10px; background:var(--re-sec);
  color:#fff; border-radius:999px; padding:0 6px; line-height:16px; min-width:16px; text-align:center; display:none;
}
/* Esconde la appbar en escritorio */
@media (min-width:1024px){
  .re-appbar{ display:none; }
  .has-appbar{ padding-bottom:0; }
}

/* =========================================================
   Print
   ========================================================= */
@media print{
  header, footer, .re-appbar, .re-tabs2-wrap, .re-related, .re-archive .re-filters { display:none !important; }
  .re-single, .re-archive { max-width:100% !important; margin:0 !important; }
}

/* =========================================================
   Accesibilidad
   ========================================================= */
.re-tabs2 a:focus-visible, .re-tab:focus-visible, .btn:focus-visible{
  outline:2px solid var(--re-sec); outline-offset:2px;
}


/* Porciones */
.re-portion{ margin-top:.75rem; }
.re-portion label{ display:block; font-weight:600; margin-bottom:.25rem; color:#fff; }
.portion-controls{ display:flex; align-items:center; gap:.5rem; justify-content:center; }
.portion-controls input[type="range"]{ width:180px; }
.btn-mini{ padding:.35rem .6rem; font-size:.9rem; }
.muted{ opacity:.8; display:block; margin-top:.25rem; }

/* Lista de ingredientes (checkbox) */
.re-ings{ margin:0; padding-left:0; list-style:none; }
.re-ings li{ padding:.25rem 0; }
.ing-check{ width:18px; height:18px; margin-right:.35rem; }
.ing-check:checked + .ing-text{ text-decoration:line-through; opacity:.7; }

/* CTA inline bajo ingredientes */
.re-cta-inline{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }

/* Bottom-sheet */
.re-sheet[hidden]{ display:none; }
.re-sheet{ position:fixed; inset:0; z-index:1001; }
.sheet__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.sheet__panel{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
  max-height:75vh; display:flex; flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,.12);
}
.sheet__header, .sheet__footer{ padding:.75rem 1rem; border-top:1px solid var(--re-border); }
.sheet__header{ border-top:none; display:flex; justify-content:space-between; align-items:center; }
.sheet__body{ padding:.5rem 1rem 1rem; overflow:auto; }
.sheet-list{ margin:0; padding-left:1rem; }

/* Modo Cocina */
.re-cook[hidden]{ display:none; }
.re-cook{
  position:fixed; inset:0; background:#0b0f14; color:#fff; z-index:1002;
  display:flex; flex-direction:column;
}
.cook__top{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; background:#111827; }
.cook__title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:.75rem; }
.cook__body{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:1rem; text-align:center; }
.cook__step{ font-size:1.3rem; line-height:1.6; max-width:28rem; }
.cook__timer{ margin-top:1rem; display:flex; gap:.75rem; align-items:center; }
#cookTime{ font-variant-numeric:tabular-nums; font-size:1.1rem; }
.cook__nav{ display:flex; gap:.75rem; justify-content:center; padding: 1rem; border-top:1px solid rgba(255,255,255,.1); }

/* Desktop: hoja de lista más estrecha */
@media (min-width: 768px){
  .sheet__panel{ left:50%; transform:translateX(-50%); width:560px; border-radius:16px; }
}

/* ===== Tabs: scrollables, con snap y hints ===== */
.re-tabs2-wrap{
   top: var(--re-sticky-offset);
  z-index: 6; background: #fff; padding-top: .25rem; margin: .5rem 0 1rem;
}
.re-tabs2{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: .5rem;
  overflow-x: auto;
  padding: .35rem .5rem;
  border: 1px solid var(--re-border);
  border-radius: .6rem;
  background: #fff;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.re-tabs2::-webkit-scrollbar{ height: 0; } /* oculta scroll bar en iOS/Chrome */

.re-tabs2::before, .re-tabs2::after{
  content: ""; position: sticky; top: 0; width: 20px; height: 100%; z-index: 1; pointer-events: none;
}
.re-tabs2::before{ left: 0;  background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)); }
.re-tabs2::after { right: 0; background: linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)); }

.re-tab{
  scroll-snap-align: start;
  appearance: none; border:1px solid var(--re-border); background:#fff; color:inherit;
  border-radius:.6rem; padding:.6rem .85rem; display:inline-flex; align-items:center; gap:.45rem;
  cursor:pointer; white-space:nowrap; min-height:44px; line-height:1;
}
.re-tab .tab-label{ display:inline-block; max-width: 11ch; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.re-tab[aria-selected="true"], .re-tab.is-active{ background:#f9fafb; border-color:#d1d5db; }
.tab-ico{ width:18px; height:18px; fill:currentColor; opacity:.9; }

/* Muy angosto: muestra solo íconos para evitar salto de línea */
@media (max-width: 360px){
  .re-tab .tab-label{ display:none; }
}

/* Admin bar de WP: aumenta offset sticky para que no tape */
body.admin-bar { --re-sticky-offset: calc(72px + 32px); }
@media (max-width: 782px){
  body.admin-bar { --re-sticky-offset: calc(72px + 46px); }
}

/* Cuando Cook Mode está activo, oculta appbar y quita padding inferior */
.no-appbar .re-appbar{ display: none !important; }
.no-appbar{ padding-bottom: 0 !important; }

/* 1) Chips (meta) en una sola línea + scroll suave */
.re-meta{
  display:flex; flex-wrap:nowrap; gap:.35rem;
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.re-meta::-webkit-scrollbar{ display:none; height:0; }
.re-meta__item{ font-size:.85rem; padding:.35rem .5rem; }

/* 2) Menos padding lateral en móvil + imagen más “ancha” */
@media (max-width: 480px){
  .re-single{ padding-left:.5rem; padding-right:.5rem; }
  /* Lleva la imagen casi a borde sin perder el radio */
  .re-hero-v2__media{ margin-left:-.25rem; margin-right:-.25rem; border-radius:1rem; }
}

/* 3) Botones: color correcto y variantes en fondo oscuro */
.btn{ color: var(--re-txt); }                          /* antes heredaba y quedaba blanco sobre blanco */
.re-hero-v2__panel .btn{
  color:#fff; background:transparent;                  /* ghost en panel oscuro */
  border-color: rgba(255,255,255,.35);
}
.re-hero-v2__panel .btn:hover{ background:rgba(255,255,255,.08); }

/* (detalle) título y chips un poco más cerca para caber mejor */
.re-hero-v2__overlay{ gap:.4rem; padding: .9rem; }
.re-hero-v2__title{ margin-bottom:.15rem; }

/* ===== Botón icon-only para "ver más" ===== */
.btn--icononly{
  width:38px; height:38px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.6rem; border:1px solid var(--re-border); background:#fff; color:var(--re-txt);
  margin-top:.4rem;
}
.ico{ width:18px; height:18px; fill:currentColor; }
.sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* ===== Acciones pequeñas con iconos ===== */
.re-hero-v2__actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.btn--sm{ padding:.4rem .6rem; font-size:.9rem; }
.btn__ico{ width:18px; height:18px; margin-right:.35rem; fill:currentColor; }
.re-hero-v2__panel .btn--ghost{ color:#fff; background:transparent; border-color:rgba(255,255,255,.35); }
.re-hero-v2__panel .btn--ghost:hover{ background:rgba(255,255,255,.08); }

/* En pantallas muy angostas convierte acciones a solo icono */
@media (max-width: 380px){
  .re-hero-v2__actions .btn span{ display:none; }
  .re-hero-v2__actions .btn{ padding:.4rem; }
  .re-hero-v2__actions .btn__ico{ margin-right:0; }
}

/* Estado activo del guardado: usa el icono lleno */
.btn.is-active .ico-bookmark{ display:none; }
.btn.is-active .ico-bookmark-fill{ display:inline; }

/* ===== Header de sección (da jerarquía) ===== */
.re-sectionbar{
  display:flex; align-items:center; gap:.6rem; margin:.2rem 0 .6rem;
}
.re-sectionbar h2{ font-size:1.1rem; margin:0; }
.re-sectionbar__meta{ margin-left:auto; color:var(--re-muted); font-size:.9rem; }
.sec-ico{ width:20px; height:20px; fill:currentColor; color:var(--re-pri); }

/* ===== Toolbar de chips ===== */
.re-toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 .75rem; }
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:999px; border:1px solid var(--re-border);
  background:#fff; font-size:.9rem; cursor:pointer;
}
.chip:hover{ background:#fafafa; }
.chip .ico{ width:16px; height:16px; }

/* ===== Pasos mejorados ===== */
.re-steps{ counter-reset: step; list-style:none; padding-left:0; margin:0; display:grid; gap:.5rem; }
.re-steps li{
  counter-increment: step; background:#fff; border:1px solid var(--re-border);
  border-radius:.75rem; padding:.75rem .9rem; line-height:1.6; position:relative;
}
.re-steps li::before{
  content: counter(step); position:absolute; left:.65rem; top:.65rem;
  width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  background:var(--re-pri); color:#fff; font-weight:700; font-size:.9rem;
}
.re-steps li{ padding-left: 3rem; } /* deja espacio para el badge numérico */

.step-tools{ margin-top:.45rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.chip--timer{ background:#f6fef7; border-color:#cfead8; }

/* Video meta (duración/origen) si lo agregas por JS */
#videoMeta{ display:none; } /* lo mostraremos si JS le pone contenido */

@media (prefers-color-scheme: dark){
  .re-steps li{ background:#111827; border-color:#222; }
}

/* ===== Relacionadas: 2 cols móvil, 3 cols desktop ===== */
.re-grid-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));  /* ← 2 columnas en móvil */
  gap:.75rem;
}

/* Título en dos líneas máx y todo el card a misma altura */
.re-card{
  display:flex; flex-direction:column; height:100%;
  background:var(--re-card); border:1px solid var(--re-border); border-radius:.8rem; overflow:hidden;
}
.re-card__media img{
  width:100%; height:auto;
  aspect-ratio: 1 / 1;           /* ← cuadrado en móvil */
  object-fit: cover; display:block;
}
.re-card__body{ padding:.7rem; display:flex; flex-direction:column; gap:.35rem; }
.re-card__title a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-decoration:none;
}
.re-card__meta{ color:var(--re-muted); font-size:.9rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* A partir de tablet/desktop: 3 columnas y ratio 4:3 si prefieres más panorámico */
@media (min-width: 980px){
  .re-grid-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .re-card__media img{ aspect-ratio: 4 / 3; }
}

/* No sticky en móvil y agrega separación */
.re-nutri--compact{
  position: static;      /* ← evita que se “flote” sobre lo que sigue en móvil */
  margin-bottom: 1rem;   /* espacio antes de las relacionadas */
  z-index: 0;
}

/* Asegura que el bloque de relacionadas siempre se vea encima si hubiera solapes */
.re-related{
  position: relative;
  z-index: 1;
  margin-top: .25rem;    /* micro separación extra */
}

/* Grid 2x3 en móvil (ya puesto), por si acaso refuerzo */
.re-grid-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
}

/* Sólo en desktop vuelve a sticky el panel nutricional */
@media (min-width:1024px){
  .re-nutri--compact{
    position: sticky;
    top: calc(var(--re-sticky-offset) + 56px);
  }
}

/* ===== Grid cat�logo (como el dise�o) ===== */
.cat-grid{
  --gap: 1rem;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(1, minmax(0,1fr));
  margin: 0 auto;
}
@media (min-width: 640px){ .cat-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px){ .cat-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* override opcional por atributo cols del shortcode */
.cat-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cat-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.cat-card{
  background: #fff;
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid var(--re-border);
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

.cat-card__media{
  display:block; background:#d1d5db; /* gris */
}
.cat-card__media img,
.cat-card__ph{
  display:block; width:100%; height:auto;
  aspect-ratio: 4/3; object-fit: cover;
}

.cat-card__foot{
  background:#1f2430; /* pie oscuro como el mockup */
  color:#fff;
  padding: .9rem 1rem .85rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.cat-card__title{
  margin:0; font-size:1rem; line-height:1.2; letter-spacing:.02em;
}
.cat-card__title a{ color:#fff; text-decoration:none; }
.cat-card__title a:hover{ text-decoration: underline; }

.cat-card__meta{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
}

/* Rating pill */
.rating-badge{
  display:inline-flex; align-items:center; gap:.25rem;
  padding: .25rem .45rem; background:#fff; color:#111827;
  border-radius: 999px; font-size:.9rem; line-height:1;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.rating-badge .star{ color:#d1d5db; font-size: .95rem; line-height:1; }
.rating-badge .star.full{ color:#f59e0b; }
.rating-badge .star.half{ color:#f59e0b; position:relative; }
.rating-badge .star.half::after{
  content:'?'; position:absolute; left:0; color:#d1d5db; clip-path: inset(0 50% 0 0);
}
.rating-badge .rating-num{ margin-left:.25rem; font-weight:600; font-size:.9rem; }

/* VER M�S */
.cat-card__more{
  color:#e5e7eb; text-decoration:none; font-size:.85rem; letter-spacing:.06em;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.cat-card__more:hover{ color:#fff; }