/* RouxLub · components — buttons, cards, badges, breadcrumbs */

.rx-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold);
  padding: .8rem 1.5rem; border-radius: var(--rx-radius);
  background: var(--rx-red); color: var(--rx-white);
  border: 2px solid var(--rx-red); cursor: pointer;
  transition: background .2s var(--rx-ease), border-color .2s var(--rx-ease), color .2s var(--rx-ease);
}
.rx-btn:hover { background: var(--rx-red-dark); border-color: var(--rx-red-dark); color: #fff; }
.rx-btn--ghost { background: transparent; color: var(--rx-navy); border-color: var(--rx-navy); }
.rx-btn--ghost:hover { background: var(--rx-navy); color: #fff; }

.rx-card {
  background: var(--rx-white); border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg);
  overflow: hidden;
  transition: box-shadow .25s var(--rx-ease), transform .25s var(--rx-ease);
}
.rx-card:hover { box-shadow: var(--rx-shadow-md); transform: translateY(-3px); }
.rx-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rx-card__title { font-size: var(--rx-text-md); padding: var(--rx-space-2); }
.rx-card__title a { color: var(--rx-navy); }
.rx-card__title a:hover { color: var(--rx-red); }

.rx-badge {
  display: inline-block; font-family: var(--rx-font-head); font-size: var(--rx-text-xs);
  font-weight: var(--rx-fw-semibold); letter-spacing: .04em; text-transform: uppercase;
  color: var(--rx-blue-700); background: rgba(0, 81, 233, .08);
  padding: .25rem .6rem; border-radius: 999px;
}

.rx-breadcrumbs { font-size: var(--rx-text-sm); color: var(--rx-ink-muted); }
.rx-breadcrumbs a { color: var(--rx-ink-soft); }
.rx-breadcrumbs a:hover { color: var(--rx-red); }
.rx-breadcrumbs span[aria-current] { color: var(--rx-ink); }
.rx-breadcrumbs__sep { margin: 0 .4rem; color: var(--rx-grey-200); }

/* ---- Prose (product/page body) ---- */
.rx-prose { max-width: 760px; font-size: var(--rx-text-md); color: var(--rx-ink); }
.rx-prose h2 { font-size: var(--rx-text-lg); margin: var(--rx-space-4) 0 var(--rx-space-2); color: var(--rx-navy); }
.rx-prose h3 { font-size: var(--rx-text-md); margin: var(--rx-space-3) 0 var(--rx-space-1); }
.rx-prose p { margin: 0 0 var(--rx-space-2); }
.rx-prose ul, .rx-prose ol { margin: 0 0 var(--rx-space-2) 1.2em; }
.rx-prose table { width: 100%; border-collapse: collapse; margin: var(--rx-space-2) 0; font-size: var(--rx-text-sm); }
.rx-prose th, .rx-prose td { border: 1px solid var(--rx-border); padding: .6rem .8rem; text-align: left; }
.rx-prose thead th { background: var(--rx-grey-100); color: var(--rx-navy); }

/* ---- Single product (traced from roux.com.mx) ---- */
.rx-product__wrap { padding-block: var(--rx-space-3) var(--rx-space-5); }
.rx-product__top { display: grid; grid-template-columns: 1fr 360px; gap: var(--rx-space-5); align-items: start; margin-top: var(--rx-space-3); }
.rx-product__title { font-size: var(--rx-text-2xl); color: var(--rx-navy); margin-bottom: var(--rx-space-2); }

.rx-share { display: flex; gap: .55rem; margin-bottom: var(--rx-space-3); }
.rx-share__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--rx-navy); color: #fff;
  transition: background .2s var(--rx-ease), transform .2s var(--rx-ease);
}
.rx-share__btn:hover { background: var(--rx-red); transform: translateY(-2px); }

.rx-product__media {
  position: sticky; top: calc(var(--rx-header-h) + 18px);
  border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg); overflow: hidden;
  background: var(--rx-white); padding: var(--rx-space-3); box-shadow: var(--rx-shadow-sm);
}
.rx-product__img { width: 100%; height: auto; display: block; object-fit: contain; }

/* Inquiry block (navy "Más información sobre éste producto") */
.rx-inquiry { position: relative; background: #eef2f7; margin-top: var(--rx-space-5); }
.rx-inquiry__inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--rx-space-5); padding-block: var(--rx-space-5); align-items: center; }
.rx-inquiry__title { color: var(--rx-navy); font-size: var(--rx-text-xl); line-height: var(--rx-leading-tight); }
.rx-inquiry__lead { color: var(--rx-ink-soft); margin-top: var(--rx-space-2); font-size: var(--rx-text-md); max-width: 34ch; }
.rx-inquiry__band { height: 72px; background: var(--rx-red); }

.rx-inquiry__form-el { display: grid; gap: var(--rx-space-2); }
.rx-field { display: block; }
.rx-field > span, .rx-radios legend { display: block; color: var(--rx-navy); font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); font-size: .9rem; margin-bottom: .4rem; }
.rx-field input, .rx-field textarea {
  width: 100%; padding: .8rem .9rem; border: 0; border-radius: var(--rx-radius);
  background: #fff; color: var(--rx-ink); font: inherit; box-sizing: border-box;
}
.rx-field textarea { resize: vertical; min-height: 84px; }
.rx-field input:focus, .rx-field textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(252, 0, 0, .35); }
.rx-inquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rx-space-2); align-items: start; }
.rx-radios { border: 0; padding: 0; margin: 0; }
.rx-radio { display: flex; align-items: center; gap: .45rem; color: var(--rx-ink-soft); font-size: .92rem; margin: .25rem 0; }
.rx-radio input { width: auto; accent-color: var(--rx-red); }
.rx-inquiry__submit { justify-self: end; margin-top: .4rem; min-width: 160px; justify-content: center; }

@media (max-width: 860px) {
  .rx-product__top { grid-template-columns: 1fr; }
  .rx-product__media { position: static; max-width: 320px; }
  .rx-inquiry__inner { grid-template-columns: 1fr; gap: var(--rx-space-3); }
  .rx-inquiry__grid { grid-template-columns: 1fr; }
  .rx-inquiry__submit { justify-self: stretch; }
}

/* ---- Productos page: lines + subcategory grids ---- */
.rx-prodline { margin-top: var(--rx-space-5); }
.rx-prodline:first-of-type { margin-top: var(--rx-space-4); }
.rx-prodline__title { font-size: var(--rx-text-xl); color: var(--rx-navy); margin-bottom: var(--rx-space-3); padding-bottom: .6rem; border-bottom: 2px solid var(--rx-red); }
.rx-prodline__title a { color: var(--rx-navy); }
.rx-prodline__title a:hover { color: var(--rx-red); }

/* ---- Archive / category ---- */
.rx-archive__head { margin: var(--rx-space-2) 0 var(--rx-space-3); }
.rx-archive__title { font-size: var(--rx-text-2xl); }
.rx-archive__desc { color: var(--rx-ink-soft); max-width: 720px; margin-top: var(--rx-space-1); }
.rx-subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--rx-space-4); }
.rx-subcat {
  font-family: var(--rx-font-head); font-size: .9rem; font-weight: var(--rx-fw-semibold);
  padding: .4rem .9rem; border: 1px solid var(--rx-border); border-radius: 999px; color: var(--rx-navy);
}
.rx-subcat:hover { background: var(--rx-navy); color: #fff; border-color: var(--rx-navy); }

/* ---- Pagination: "Páginas de Productos" heading + page links, separated from the product grid ---- */
.rx-archive .pagination { margin-top: var(--rx-space-5); padding-top: var(--rx-space-4); border-top: 1px solid var(--rx-border); }
.rx-archive .pagination .screen-reader-text {
  display: block; position: static; width: auto; height: auto; clip: auto; clip-path: none;
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold); font-size: var(--rx-text-lg);
  line-height: 1.2; color: var(--rx-navy); margin: 0 0 var(--rx-space-3);
}
.rx-archive .pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rx-archive .pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .85rem;
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); font-size: .95rem; color: var(--rx-navy);
  border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
  transition: background .2s var(--rx-ease), color .2s var(--rx-ease), border-color .2s var(--rx-ease);
}
.rx-archive .pagination a.page-numbers:hover { background: var(--rx-navy); color: #fff; border-color: var(--rx-navy); }
.rx-archive .pagination .page-numbers.current { background: var(--rx-red); color: #fff; border-color: var(--rx-red); }
.rx-archive .pagination .page-numbers.dots { border: 0; min-width: 1.5rem; color: var(--rx-ink-muted); }

/* ---- Cards: --product = category photo (cropped); --item = product image (full, square) ---- */
.rx-card--product .rx-card__link, .rx-card--item .rx-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.rx-card--product .rx-card__media, .rx-card--item .rx-card__media { display: block; overflow: hidden; }

/* Category cards: cropped photo fills the frame */
.rx-card--product .rx-card__media { aspect-ratio: 4 / 3; background: var(--rx-grey-100); }
.rx-card--product .rx-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Product cards: full product (the tambo) on white, never cropped */
.rx-card--item .rx-card__media { aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; padding: 0; }
.rx-card--item .rx-card__media img { width: 100%; height: 100%; object-fit: contain; }

/* Shared: placeholder + title */
.rx-card--product .rx-card__media--placeholder, .rx-card--item .rx-card__media--placeholder {
  background: linear-gradient(135deg, var(--rx-navy), var(--rx-blue-700)); position: relative; padding: 0;
}
.rx-card--product .rx-card__media--placeholder::after, .rx-card--item .rx-card__media--placeholder::after {
  content: "RouxLub"; position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255, 255, 255, .45); font-family: var(--rx-font-head); font-weight: 700; letter-spacing: .05em;
}
.rx-card--product .rx-card__title {
  display: block; padding: var(--rx-space-2); font-family: var(--rx-font-head);
  font-weight: var(--rx-fw-semibold); color: var(--rx-navy); font-size: 1rem;
}
.rx-card--product:hover .rx-card__title { color: var(--rx-red); }
/* Product item: navy title band (traced from the original) */
.rx-card--item .rx-card__link { background: #fff; }
.rx-card--item .rx-card__title {
  margin-top: auto; display: block; padding: .8rem var(--rx-space-2); text-align: center;
  background: var(--rx-navy); color: #fff;
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); font-size: .95rem;
  transition: background .2s var(--rx-ease);
}
.rx-card--item:hover .rx-card__title { background: var(--rx-blue-700); }

/* ---- Related ---- */
.rx-related { margin-top: var(--rx-space-5); padding-top: var(--rx-space-4); border-top: 1px solid var(--rx-border); }
.rx-related__title { font-size: var(--rx-text-lg); margin-bottom: var(--rx-space-3); }

/* ---- Prose media + forms (Kadence pages migrated to semantic) ---- */
.rx-prose img { max-width: 100%; height: auto; border-radius: var(--rx-radius); }
.rx-prose svg { max-width: 64px; max-height: 64px; width: auto; height: auto; color: var(--rx-navy); fill: currentColor; }
.rx-prose figure { margin: var(--rx-space-3) 0; }
.rx-prose form { max-width: 560px; margin: var(--rx-space-3) 0; }
.rx-prose label {
  display: block; font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold);
  color: var(--rx-navy); margin: var(--rx-space-2) 0 .35rem; font-size: .95rem;
}
.rx-prose input[type="text"], .rx-prose input[type="email"], .rx-prose input[type="tel"],
.rx-prose input[type="number"], .rx-prose input:not([type]), .rx-prose textarea, .rx-prose select {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
  font: inherit; background: var(--rx-white); color: var(--rx-ink); box-sizing: border-box;
}
.rx-prose textarea { min-height: 130px; resize: vertical; }
.rx-prose input:focus, .rx-prose textarea:focus, .rx-prose select:focus {
  outline: none; border-color: var(--rx-blue-500); box-shadow: 0 0 0 3px rgba(0, 81, 233, .12);
}
.rx-prose form button, .rx-prose input[type="submit"], .rx-prose input[type="button"] {
  margin-top: var(--rx-space-2); background: var(--rx-red); color: #fff; border: 0;
  padding: .8rem 1.6rem; border-radius: var(--rx-radius);
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); font-size: 1rem; cursor: pointer;
  transition: background .2s var(--rx-ease);
}
.rx-prose form button:hover, .rx-prose input[type="submit"]:hover { background: var(--rx-red-dark); }