/* RoboQube theme. Loaded after style.css on roboqube.in only. */
:root {
  --rq-navy: #0A1622; --rq-navy-2: #13212F; --rq-line-dark: #2A3B4D;
  --rq-deep: #0F5E8C; --rq-blue: #1E9FD8; --rq-sky: #7FD3F5; --rq-amber: #FF8A1F;
  --rq-white: #F2F5F8; --rq-bg: #F4F6F8; --rq-line: #DCE3EA;
  --rq-muted: #4A5A6A; --rq-muted-dark: #9FB3C6; --rq-soft-dark: #C9D6E2;
}
/* Account, checkout and policy pages keep the shared dark styling on navy;
   only the RoboQube pages (.rq-page) are light. */
body.rq { background: var(--rq-navy); font-family: 'Space Grotesk', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
body.rq .app-main-shell { padding-top: 0; margin-top: 0; flex: 1; background: var(--rq-navy); }
body.rq .app-main-shell:has(.rq-page) { background: var(--rq-bg); color: var(--rq-navy); }
.rq-page a, .rq-header a { color: inherit; }
.rq-wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.rq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rq-mono, .rq-sku { font-family: 'JetBrains Mono', monospace; }
.rq-muted { color: var(--rq-muted); font-size: 14px; }
.rq-lead { color: var(--rq-muted); font-size: 16px; line-height: 1.5; margin: 0; }

/* Header */
.rq-header { position: relative; z-index: 40; background: var(--rq-navy); color: var(--rq-white); }
.rq-header-main { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.rq-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--rq-white) !important; }
.rq-word { font-size: 24px; letter-spacing: -0.03em; font-weight: 500; }
.rq-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.rq-logo-text small { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--rq-muted-dark); }
.rq-word b { font-weight: 700; color: var(--rq-blue); }
.rq-search { flex: 1 1 280px; display: flex; min-width: 0; }
.rq-search input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--rq-line-dark); border-right: 0; border-radius: 10px 0 0 10px; background: var(--rq-navy-2); color: var(--rq-white); padding: 0 14px; font: inherit; font-size: 15px; }
.rq-search input::placeholder { color: var(--rq-muted-dark); }
.rq-search button { height: 44px; padding: 0 18px; border: 0; border-radius: 0 10px 10px 0; background: var(--rq-blue); color: var(--rq-navy); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.rq-actions { position: relative; display: flex; align-items: center; gap: 8px; }
.rq-action-link { color: var(--rq-soft-dark) !important; font-size: 15px; padding: 12px 10px; background: none; border: 0; cursor: pointer; text-decoration: none; font-family: inherit; }
.rq-action-link:hover { color: #fff !important; }
.rq-user svg { width: 22px; height: 22px; }
.rq-cart { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--rq-amber); color: var(--rq-navy); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
#cart-count { background: var(--rq-navy); color: #fff; font-size: 12px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.rq #profile-popup { position: absolute; top: 52px; right: 0; width: 256px; padding: 16px; border-radius: 10px; background: #fff; color: var(--rq-navy); box-shadow: 0 10px 30px rgba(10,22,34,.2); z-index: 60; }
.rq #cart-dropdown { top: 76px; right: 16px; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); overflow: auto; color: var(--rq-navy); }
.rq-catbar { border-top: 1px solid #1C2B3A; }
.rq-catbar .rq-wrap { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.rq-catbar a { color: var(--rq-muted-dark) !important; text-decoration: none; padding: 12px 0; }
.rq-catbar a:hover { color: #fff !important; }

/* Buttons */
.rq-btn-amber, .rq-btn-dark, .rq-btn-outline { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.rq-btn-amber { height: 52px; padding: 0 26px; background: var(--rq-amber); color: var(--rq-navy) !important; font-size: 17px; }
.rq-btn-amber:hover { background: #ff9c42; }
.rq-btn-outline { height: 52px; padding: 0 26px; border: 1.5px solid #2E4256; color: var(--rq-white) !important; font-size: 17px; font-weight: 500; }
.rq-btn-dark { height: 44px; padding: 0 16px; border-radius: 10px; background: var(--rq-navy); color: var(--rq-white) !important; font-size: 15px; }
.rq-btn-dark:hover { background: var(--rq-deep); }

/* Hero */
.rq-hero { background: url('../images/roboqube-mesh.svg') center top / 168px 194px, var(--rq-navy); color: var(--rq-white); border-top: 1px solid #1C2B3A; }
.rq-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 64px; padding-bottom: 72px; }
.rq-hero-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.rq-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .3em; color: var(--rq-muted-dark); }
.rq-hero h1 { margin: 0; font-size: 56px; line-height: 1.05; letter-spacing: -.035em; font-weight: 700; color: var(--rq-white); }
.rq-hero p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--rq-soft-dark); max-width: 540px; }
.rq-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.rq-hero-mark { flex: 1 1 320px; display: flex; justify-content: center; }
.rq-hero-mark img { max-width: 100%; height: auto; filter: drop-shadow(0 0 28px rgba(30, 159, 216, .35)); }

/* Page */
.rq-page { padding-top: 56px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 64px; }
.rq-page-tight { padding-top: 32px; gap: 24px; }
.rq-page h1, .rq-page h2 { color: var(--rq-navy); }
.rq-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.rq-sec-head h1, .rq-sec-head h2 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.rq-sec-lead { margin: -14px 0 20px; }
.rq-sec-head a { font-size: 15px; font-weight: 500; color: var(--rq-deep); }
.rq-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.rq-cat { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--rq-line); text-decoration: none; }
.rq-cat:hover { border-color: var(--rq-blue); box-shadow: 0 0 0 1px var(--rq-blue); }
.rq-cat-code { width: 48px; height: 48px; border-radius: 12px; background: #E3F3FB; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--rq-deep); }
.rq-cat strong { font-size: 18px; }
.rq-cat span:last-child { font-size: 14px; line-height: 1.45; color: var(--rq-muted); }

/* Cards */
.rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.rq-card { display: flex; flex-direction: column; border-radius: 18px; background: #fff; border: 1px solid var(--rq-line); overflow: hidden; }
.rq-card-photo { height: 180px; background: url('../images/roboqube-mesh.svg') center / 112px 129px, var(--rq-navy); display: flex; align-items: center; justify-content: center; position: relative; }
.rq-card-photo > img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.rq-card-photo > img.rq-card-noimg, .rq-pdp-photo > img.rq-card-noimg { width: 96px; height: 96px; background: none; opacity: .85; }
.rq-pill { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 6px; background: var(--rq-blue); color: var(--rq-navy); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.rq-pill-tq { background: var(--rq-white); }
.rq-pill-inline.rq-pill-tq { background: #E3F3FB; color: var(--rq-deep); }
.rq-pill-used { left: auto; right: 14px; background: var(--rq-amber); }
.rq-pill-inline { position: static; align-self: flex-start; background: var(--rq-amber); }
.rq-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rq-sku { font-size: 12px; color: var(--rq-muted); overflow-wrap: anywhere; }
.rq-card h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--rq-navy); }
.rq-card h3 a { text-decoration: none; }
.rq-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--rq-muted); flex: 1; }
.rq-card-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.rq-price { font-size: 22px; font-weight: 700; }
.rq-price s { font-size: 14px; font-weight: 400; color: var(--rq-muted); }
.rq-price-lg { font-size: 32px; }
.rq-out { color: #A33A00; font-weight: 700; font-size: 14px; }
.rq-stock { color: #0B7A53; font-weight: 700; font-size: 14px; }
.rq-empty { padding: 40px 24px; border-radius: 16px; border: 1px dashed var(--rq-line); background: #fff; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rq-empty strong { font-size: 19px; }
.rq-empty p { margin: 0; color: var(--rq-muted); }

/* Values */
.rq-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.rq-values div { padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--rq-line); display: flex; flex-direction: column; gap: 8px; }
.rq-values strong { font-size: 17px; }
.rq-values span { font-size: 14px; line-height: 1.45; color: var(--rq-muted); }

/* Product page */
.rq-crumbs { font-size: 14px; color: var(--rq-muted); }
.rq-crumbs a { color: var(--rq-deep); }
.rq-pdp { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.rq-pdp-photo { border-radius: 18px; background: #fff; border: 1px solid var(--rq-line); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 320px; justify-content: center; }
.rq-pdp-photo > img { max-width: 100%; max-height: 420px; object-fit: contain; }
.rq-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-thumbs button { width: 64px; height: 64px; padding: 4px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fff; cursor: pointer; }
.rq-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.rq-pdp-info { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.rq-pdp-info h1 { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.rq-datasheet { color: var(--rq-deep) !important; font-weight: 700; }
.rq-pdp-more { border-top: 1px solid var(--rq-line); padding-top: 24px; }
.rq-pdp-more h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.rq-pdp-more p { margin: 0 0 20px; color: var(--rq-muted); line-height: 1.55; white-space: pre-line; }
.rq-pdp-more ul { margin: 0; padding-left: 20px; list-style: disc; color: var(--rq-muted); line-height: 1.7; }

/* Footer */
.rq-footer { background: var(--rq-navy); color: var(--rq-muted-dark); }
.rq-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-top: 40px; padding-bottom: 40px; font-size: 14px; }
.rq-footer-brand { display: flex; flex-direction: column; gap: 8px; }
.rq-footer-brand .rq-word { font-size: 22px; color: var(--rq-white); }
.rq-footer-brand .rq-logo { gap: 8px; }
.rq-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rq-footer nav a { color: var(--rq-soft-dark) !important; text-decoration: none; padding: 10px 0; }
.rq-footer-brand a { color: var(--rq-sky); }
.rq-footer-gst { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

@media (max-width: 640px) {
  .rq-wrap { padding-left: 16px; padding-right: 16px; }
  .rq-header-main { gap: 12px; justify-content: space-between; }
  .rq-search { order: 3; flex-basis: 100%; }
  .rq-action-link { padding: 12px 6px; font-size: 14px; }
  .rq-catbar .rq-wrap { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  .rq-hero-row { padding-top: 40px; padding-bottom: 48px; gap: 32px; }
  .rq-hero h1 { font-size: 38px; }
  .rq-hero p { font-size: 17px; }
  .rq-hero-mark img { width: 180px; }
  .rq-page { padding-top: 40px; gap: 48px; }
  .rq-sec-head h1, .rq-sec-head h2 { font-size: 26px; }
  .rq-pdp-info h1 { font-size: 28px; }
}