/* HAMSTER ROBOTICS PRODUCTS CATALOG */

.hrp-page {
  color:#f5f7fa;
}

.hrp-page *,
.hrp-page *::before,
.hrp-page *::after {
  box-sizing:border-box;
}

.hrp-page a {
  text-decoration:none;
}

.hrp-dot {
  color:#ff9d00;
}

.hrp-eyebrow {
  display:block;
  color:#ff9d00;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.hrp-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:75px 20px;
}

.hrp-intro > div:first-child {
  max-width:750px;
}

.hrp-intro h2,
.hrp-section-title h2 {
  margin:15px 0;
  color:#fff;
  font-size:clamp(30px,3vw,42px);
  line-height:1.2;
}

.hrp-intro p {
  color:#aeb9c6;
  font-size:16px;
  line-height:1.8;
}

.hrp-intro-stat {
  min-width:190px;
  text-align:center;
  padding:25px;
  border:1px solid rgba(255,157,0,.3);
  border-radius:18px;
  background:#0c1015;
}

.hrp-intro-stat strong {
  display:block;
  color:#ff9d00;
  font-size:65px;
  line-height:1;
}

.hrp-intro-stat span {
  display:block;
  margin-top:12px;
  color:#8e9aa8;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
}

.hrp-featured-section,
.hrp-catalog-section {
  margin-bottom:85px;
}

.hrp-section-title {
  margin-bottom:30px;
}

.hrp-featured {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:410px;
  overflow:hidden;
  margin-bottom:24px;
  border:1px solid rgba(255,157,0,.23);
  border-radius:22px;
  background:linear-gradient(130deg,#0e1218,#07090c);
}

.hrp-featured.reverse .hrp-featured-visual {
  order:2;
}

.hrp-featured-visual {
  min-height:400px;
  background:
    radial-gradient(ellipse at center,rgba(255,157,0,.13),transparent 65%),
    #080b10;
}

.hrp-featured-visual img,
.hrp-card-visual img,
.hrp-detail-visual img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.hrp-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  height:100%;
  min-height:220px;
  padding:25px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,157,0,.14),transparent 58%),
    linear-gradient(135deg,#101720,#07090d);
}

.hrp-placeholder.large {
  min-height:390px;
}

.hrp-placeholder-icon {
  color:#ff9d00;
  font-size:85px;
  line-height:1;
  opacity:.7;
}

.hrp-placeholder > span:not(.hrp-placeholder-icon) {
  color:#ff9d00;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.hrp-placeholder strong {
  color:#f5f7fa;
  font-size:clamp(18px,2vw,27px);
}

.hrp-placeholder small {
  color:#7f8a98;
  font-size:10px;
  letter-spacing:1.4px;
}

.hrp-featured-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:45px;
}

.hrp-featured-content h2 {
  margin:16px 0 7px;
  color:#fff;
  font-size:clamp(30px,3.3vw,47px);
  line-height:1.1;
}

.hrp-featured-content h3 {
  margin:0 0 18px;
  color:#ffad27;
  font-size:17px;
  font-weight:600;
}

.hrp-featured-content p {
  color:#aeb9c6;
  font-size:15px;
  line-height:1.8;
}

.hrp-featured-specs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:25px 0;
}

.hrp-featured-specs > div {
  padding:12px;
  border:1px solid #26303a;
  border-radius:10px;
}

.hrp-featured-specs small {
  display:block;
  color:#8996a4;
  font-size:10px;
  margin-bottom:7px;
}

.hrp-featured-specs strong {
  color:#fff;
  font-size:12px;
  overflow-wrap:anywhere;
}

.hrp-actions,
.hrp-detail-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.hrp-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:9px;
  font-size:13px;
  font-weight:800;
  transition:.2s ease;
}

.hrp-button.primary {
  color:#090909;
  background:#ff9d00;
  border:1px solid #ff9d00;
}

.hrp-button.primary:hover {
  background:#ffb53d;
}

.hrp-button.secondary {
  color:#ff9d00;
  background:transparent;
  border:1px solid #ff9d00;
}

.hrp-not-available {
  display:inline-flex;
  align-items:center;
  color:#9eabb9;
  font-size:12px;
  font-weight:700;
}

.hrp-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:20px;
  border:1px solid #222b35;
  border-radius:16px;
  background:#0b0e13;
}

.hrp-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hrp-filter {
  padding:10px 14px;
  border:1px solid #2b3540;
  border-radius:8px;
  background:#121820;
  color:#cbd4df;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.hrp-filter.active,
.hrp-filter:hover {
  background:#ff9d00;
  border-color:#ff9d00;
  color:#080808;
}

#hrp-search {
  min-width:190px;
  padding:12px 15px;
  border:1px solid #303b47;
  border-radius:9px;
  background:#080b10;
  color:#fff;
  font-size:13px;
}

.hrp-results {
  margin:22px 0;
  color:#9aa7b5;
  font-size:13px;
}

.hrp-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.hrp-product-card {
  min-width:0;
  overflow:hidden;
  border:1px solid #252e38;
  border-radius:17px;
  background:#0b0f14;
  transition:.2s ease;
}

.hrp-product-card:hover {
  transform:translateY(-3px);
  border-color:rgba(255,157,0,.65);
}

.hrp-product-card[hidden] {
  display:none !important;
}

.hrp-card-visual {
  display:block;
  height:225px;
  background:#0a0e13;
}

.hrp-card-body {
  padding:23px;
}

.hrp-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.hrp-category {
  color:#ff9d00;
  font-size:11px;
  font-weight:800;
}

.hrp-status {
  display:inline-flex;
  padding:6px 9px;
  border-radius:7px;
  border:1px solid #3b4652;
  color:#b6c0cb;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.hrp-status.prototype {
  color:#ffb444;
  border-color:rgba(255,157,0,.45);
}

.hrp-status.available {
  color:#54d995;
  border-color:rgba(84,217,149,.4);
}

.hrp-card-body h3 {
  margin:19px 0 9px;
  font-size:22px;
  line-height:1.2;
}

.hrp-card-body h3 a {
  color:#fff;
}

.hrp-card-body p {
  min-height:45px;
  color:#aeb9c6;
  font-size:13px;
  line-height:1.6;
}

.hrp-card-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid #26303a;
}

.hrp-details {
  color:#ff9d00;
  font-size:12px;
  font-weight:800;
}

.hrp-card-footer .hrp-button {
  padding:9px 12px;
  font-size:11px;
}

.hrp-bottom-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:45px;
  border:1px solid rgba(255,157,0,.3);
  border-radius:20px;
  background:linear-gradient(120deg,#17130d,#090b0e);
}

.hrp-bottom-cta h2 {
  color:#fff;
  font-size:32px;
  margin:12px 0;
}

.hrp-bottom-cta p {
  color:#aeb9c6;
  line-height:1.7;
}

.hrp-breadcrumb {
  padding:12px 0 30px;
  color:#8c9aaa;
  font-size:13px;
}

.hrp-breadcrumb a {
  color:#ff9d00;
}

.hrp-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid #30343c;
  border-radius:20px;
  background:#0b0e13;
}

.hrp-detail-visual {
  min-height:500px;
}

.hrp-detail-info {
  padding:55px;
}

.hrp-detail-info h1 {
  color:#fff;
  font-size:clamp(35px,4vw,60px);
  line-height:1.1;
  margin:15px 0;
}

.hrp-detail-info h2 {
  color:#ffae2b;
  font-size:20px;
  font-weight:500;
  margin-bottom:20px;
}

.hrp-detail-info > p {
  color:#b7c2ce;
  font-size:15px;
  line-height:1.9;
  margin:25px 0;
}

.hrp-detail-note {
  font-size:12px !important;
  color:#83909e !important;
}

.hrp-specifications {
  margin:65px 0;
}

.hrp-specifications h2 {
  color:#fff;
  font-size:36px;
  margin:15px 0 30px;
}

.hrp-spec-table {
  border:1px solid #29323c;
  border-radius:15px;
  overflow:hidden;
}

.hrp-spec-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:19px 24px;
  border-bottom:1px solid #29323c;
  background:#0b0e13;
}

.hrp-spec-row:last-child {
  border-bottom:none;
}

.hrp-spec-row span {
  color:#9ca9b8;
}

.hrp-spec-row strong {
  color:#fff;
  font-weight:600;
}

#hrp-empty {
  padding:35px;
  color:#9ca9b8;
  text-align:center;
}

@media(max-width:1000px) {
  .hrp-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hrp-featured-specs {
    grid-template-columns:1fr;
  }
}

@media(max-width:700px) {
  .hrp-intro,
  .hrp-bottom-cta {
    flex-direction:column;
    align-items:flex-start;
    padding:35px 20px;
  }

  .hrp-featured,
  .hrp-detail {
    grid-template-columns:1fr;
  }

  .hrp-featured.reverse .hrp-featured-visual {
    order:0;
  }

  .hrp-featured-visual,
  .hrp-detail-visual {
    min-height:260px;
  }

  .hrp-featured-content,
  .hrp-detail-info {
    padding:28px;
  }

  .hrp-grid {
    grid-template-columns:1fr;
  }

  .hrp-toolbar {
    align-items:stretch;
  }

  #hrp-search {
    width:100%;
  }

  .hrp-spec-row {
    grid-template-columns:1fr;
    gap:6px;
  }
}