/* Straton · components — buttons, cards, breadcrumbs, prose, single product, page hero.
   Accent is ORANGE (--rx-primary). Card title bars are carbon (--rx-band). */

/* ============================================================
   Buttons
   ============================================================ */
.rx-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); font-size: 1rem;
  line-height: 1.1; padding: .8rem 1.6rem; border-radius: 999px;
  background: var(--rx-primary); color: var(--rx-white);
  border: 2px solid var(--rx-primary); cursor: pointer; text-align: center;
  transition: background .2s var(--rx-ease), border-color .2s var(--rx-ease), color .2s var(--rx-ease), transform .2s var(--rx-ease);
}
.rx-btn:hover { background: var(--rx-orange-dark); border-color: var(--rx-orange-dark); color: #fff; transform: translateY(-1px); }

/* Ghost / outline (orange outline on dark or light surfaces) */
.rx-btn--ghost { background: transparent; color: var(--rx-primary); border-color: var(--rx-primary); }
.rx-btn--ghost:hover { background: var(--rx-primary); color: #fff; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.rx-breadcrumbs { font-size: var(--rx-text-sm); color: var(--rx-ink-soft); }
.rx-breadcrumbs a { color: var(--rx-ink-soft); }
.rx-breadcrumbs a:hover { color: var(--rx-primary); }
.rx-breadcrumbs span[aria-current] { color: var(--rx-ink); }
.rx-breadcrumbs__sep { margin: 0 .45rem; color: var(--rx-grey-200); }

/* ============================================================
   Cards
   --product = category card (photo cover + carbon title band)
   --item    = product card (product image on white, contain, + carbon title band)
   ============================================================ */
.rx-card {
  background: var(--rx-band); border-radius: var(--rx-radius-lg); overflow: hidden;
  box-shadow: var(--rx-shadow-sm);
  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--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 card: cropped photo fills the frame */
.rx-card--product { background: var(--rx-white); }
.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 card: full product on white, never cropped */
.rx-card--item { background: var(--rx-white); }
.rx-card--item .rx-card__media { aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; padding: var(--rx-space-2); }
.rx-card--item .rx-card__media img { width: 100%; height: 100%; object-fit: contain; }

/* Carbon title band (both card types) */
.rx-card__title {
  margin-top: auto; display: block; padding: .8rem var(--rx-space-2); text-align: center;
  background: var(--rx-band); color: #fff;
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); font-size: .95rem; line-height: 1.3;
  transition: color .2s var(--rx-ease);
}
.rx-card:hover .rx-card__title { color: var(--rx-primary); }

/* Placeholder when an image is missing */
.rx-card__media--placeholder { background: var(--rx-grey-100); position: relative; }
.rx-card__media--placeholder::after {
  content: "Straton"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--rx-grey); font-family: var(--rx-font-head); font-weight: 700; letter-spacing: .05em;
}

/* ============================================================
   Prose (product/page body)
   ============================================================ */
.rx-prose { font-size: var(--rx-text-md); color: var(--rx-ink); line-height: var(--rx-leading-normal); }
.rx-prose h2 { font-size: var(--rx-text-lg); margin: var(--rx-space-4) 0 var(--rx-space-2); color: var(--rx-ink-900); }
.rx-prose h3 { font-size: var(--rx-text-md); margin: var(--rx-space-3) 0 var(--rx-space-1); color: var(--rx-ink-900); }
.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 a { color: var(--rx-link); border-bottom: 1px solid rgba(255, 96, 0, .3); }
.rx-prose a:hover { color: var(--rx-orange-dark); border-bottom-color: var(--rx-orange-dark); }
.rx-prose img { max-width: 100%; height: auto; border-radius: var(--rx-radius); }
.rx-prose figure { margin: var(--rx-space-3) 0; }
.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-ink-900); color: #fff; }
.rx-prose tbody tr:nth-child(even) { background: var(--rx-grey-100); }

/* ============================================================
   Page hero (interior pages) + generic page wrapper
   ============================================================ */
.rx-pagehead {
  background: var(--rx-grey-100);
  border-bottom: 3px solid var(--rx-primary);
  padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.rx-pagehead .rx-breadcrumbs { justify-content: center; margin-bottom: .8rem; }
.rx-pagehead__title {
  color: var(--rx-ink-900); font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold);
  font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.1; margin: 0; text-wrap: balance;
}
.rx-pagehead__title::after {
  content: ""; display: block; width: 64px; height: 3px; margin: 1rem auto 0;
  background: var(--rx-primary); border-radius: 2px;
}
.rx-page__inner { padding-block: clamp(2.4rem, 5vw, 4rem); }
.rx-page__inner .rx-prose { max-width: 820px; margin-inline: auto; font-size: 1.06rem; }
.rx-page__inner .rx-prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); padding-left: 1rem; border-left: 5px solid var(--rx-primary);
  line-height: 1.2; margin: clamp(2rem, 4vw, 2.8rem) 0 1rem;
}
.rx-page__inner .rx-prose p { color: var(--rx-ink-soft); line-height: 1.75; margin: 0 0 1.1rem; }
.rx-page__inner .rx-prose strong { color: var(--rx-ink); }
.rx-page__form { max-width: 640px; margin: var(--rx-space-4) auto 0; }

/* ============================================================
   Single product — share row, image card, body
   ============================================================ */
.rx-product__wrap { padding-block: var(--rx-space-4) var(--rx-space-5); }
.rx-product__line { height: 1px; background: var(--rx-primary); opacity: .85; margin: var(--rx-space-3) 0 var(--rx-space-4); }
.rx-product__top { display: grid; grid-template-columns: 1fr 380px; gap: var(--rx-space-5); align-items: start; }
.rx-product__title { font-size: var(--rx-text-2xl); color: var(--rx-ink-900); 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;
  flex: 0 0 34px; width: 34px; height: 34px; overflow: hidden;
  border-radius: 50%; background: var(--rx-band); color: #fff;
  transition: background .2s var(--rx-ease), transform .2s var(--rx-ease);
}
/* Constrain the icon — base.css resets svg height:auto which blows up a viewBox svg in flex. */
.rx-share__btn svg { width: 16px; height: 16px; display: block; flex: none; }
.rx-share__btn:hover { background: var(--rx-primary); transform: translateY(-2px); }

.rx-product__body h2 { font-size: var(--rx-text-lg); color: var(--rx-ink-900); margin: var(--rx-space-3) 0 var(--rx-space-1); }

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

/* ============================================================
   Category archive
   ============================================================ */
.rx-archive__head { text-align: center; margin: var(--rx-space-2) 0 var(--rx-space-4); }
.rx-archive__title { font-size: var(--rx-text-2xl); color: var(--rx-ink-900); }
.rx-archive__desc { color: var(--rx-ink-soft); max-width: 720px; margin: var(--rx-space-1) auto 0; }
.rx-subcats { display: flex; flex-wrap: wrap; justify-content: center; 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-ink-900);
  transition: background .2s var(--rx-ease), color .2s var(--rx-ease), border-color .2s var(--rx-ease);
}
.rx-subcat:hover { background: var(--rx-primary); color: #fff; border-color: var(--rx-primary); }

/* Products page heading (single grid, no subcategory lines for Straton) */
.rx-prodgrid { padding-block: var(--rx-space-2) var(--rx-space-3); }

/* Pagination */
.rx-archive .pagination, .rx-prodgrid .pagination, .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--rx-space-4);
}
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
  padding: 0 .7rem; border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); color: var(--rx-ink-900);
  transition: background .2s var(--rx-ease), color .2s var(--rx-ease), border-color .2s var(--rx-ease);
}
.nav-links a.page-numbers:hover { background: var(--rx-grey-100); }
.nav-links .page-numbers.current { background: var(--rx-primary); color: #fff; border-color: var(--rx-primary); }

/* ============================================================
   Related products
   ============================================================ */
.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); color: var(--rx-ink-900); }

/* ============================================================
   Theme contact form (home + Contacto page + product inquiry)
   ============================================================ */
.rx-form, .rx-inquiry__form-el { display: grid; gap: var(--rx-space-2); }
.rx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rx-space-2); }
.rx-form label, .rx-field > span, .rx-radios legend {
  display: block; font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold);
  color: var(--rx-ink-900); font-size: .9rem; margin-bottom: .35rem;
}
.rx-form input, .rx-form textarea, .rx-field input, .rx-field textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
  font: inherit; background: #fff; color: var(--rx-ink); box-sizing: border-box;
}
.rx-form textarea, .rx-field textarea { resize: vertical; min-height: 110px; }
.rx-form input:focus, .rx-form textarea:focus,
.rx-field input:focus, .rx-field textarea:focus {
  outline: none; border-color: var(--rx-primary); box-shadow: 0 0 0 3px rgba(255, 96, 0, .18);
}
.rx-radios { border: 0; padding: 0; margin: 0; }
.rx-radio { display: flex; align-items: center; gap: .45rem; color: var(--rx-ink); font-size: .92rem; margin: .25rem 0; font-weight: var(--rx-fw-regular); }
.rx-radio input { width: auto; accent-color: var(--rx-primary); }
.rx-form .rx-btn, .rx-inquiry__submit { justify-self: start; margin-top: .3rem; border: 0; cursor: pointer; }
.rx-hp { position: absolute !important; left: -9999px !important; }
.rx-form__ok { background: #eaf7ee; color: #1d7a3e; padding: var(--rx-space-2); border-radius: var(--rx-radius); margin-bottom: var(--rx-space-3); }

/* Product inquiry block (light card on the single product page) */
.rx-inquiry { margin-top: var(--rx-space-5); background: var(--rx-grey-100); }
.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-ink-900); 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__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rx-space-2); align-items: start; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .rx-product__top { grid-template-columns: 1fr; }
  .rx-product__media { position: static; max-width: 340px; margin-inline: auto; }
  .rx-inquiry__inner { grid-template-columns: 1fr; gap: var(--rx-space-3); }
  .rx-inquiry__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rx-form__row { grid-template-columns: 1fr; }
}