/* AiGAP Robotics — responsive layer.

   Every screen is authored desktop-first with inline styles, which is what keeps the
   .dc.html files readable and directly openable. This sheet adapts those layouts to
   narrower viewports without touching a single inline declaration.

   Two rules make that safe:
     1. Nothing here applies above 1280px, so the desktop design is byte-for-byte unchanged.
     2. Inline styles beat class selectors, so every override inside a media query carries
        !important. Outside media queries !important is never used.

   Vocabulary — add the class, keep the inline style:
     rs-g6 rs-g5 rs-g4 rs-g3 rs-g2   column grids, collapsed by step
     rs-split                        asymmetric two-column band (hero, feature, CTA)
     rs-shell                        sidebar + main; sidebar unsticks and stacks
     rs-shell-r                      main + right rail; rail drops below
     rs-stack                        any grid, straight to one column on phones
     rs-pad                          page gutter, tightened on phones
     rs-row                          flex row allowed to wrap
     rs-col                          flex row that becomes a column
     rs-full                         child that goes full width once stacked
     rs-x                            horizontal scroller for wide tables
     rs-t-hero rs-t-xl rs-t-lg rs-t-md   display type, fluid
     rs-hide-sm rs-hide-xs           drop secondary chrome on small screens
     rs-hdr-*                        site header parts (see the header block)
*/

/* ---------- unconditional, layout-neutral ---------- */
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }
.rs-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rs-x::-webkit-scrollbar { height: 6px; }
.rs-x::-webkit-scrollbar-thumb { background: #D8D5CC; border-radius: 3px; }
.rs-x::-webkit-scrollbar-track { background: transparent; }

/* ---------- 1280 — narrow laptop ---------- */
@media (max-width: 1280px) {
  /* Table wrappers are usually inline `overflow:hidden` so the 3px corners clip.
     Below full width that has to yield to a scroller, and only !important beats an
     inline declaration. overflow-y stays hidden, so the corners still clip. */
  .rs-x { overflow-x: auto !important; }

  .rs-g6 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .rs-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rs-g4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rs-split { gap: 40px !important; }
  .rs-t-hero { font-size: 52px !important; }
  .rs-t-xl { font-size: 36px !important; }
}

/* ---------- 1024 — tablet landscape ---------- */
@media (max-width: 1024px) {
  .rs-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rs-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rs-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rs-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .rs-split { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .rs-shell, .rs-shell-r { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .rs-shell > aside, .rs-shell-r > aside,
  .rs-shell > .rs-rail, .rs-shell-r > .rs-rail { position: static !important; top: auto !important; max-height: none !important; }
  .rs-shell-r > .rs-rail { order: 2 !important; }

  .rs-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .rs-row { flex-wrap: wrap !important; }
  .rs-hide-md { display: none !important; }

  /* Hairline KPI strips draw their dividers with a 1px gap over a grey background.
     Once the tiles wrap, any slack in the last row shows that grey as a dead block —
     so the tiles grow to fill it instead. */
  .rs-kpi > * { flex: 1 1 auto !important; }

  .rs-t-hero { font-size: 44px !important; }
  .rs-t-xl { font-size: 32px !important; }
  .rs-t-lg { font-size: 28px !important; }
}

/* ---------- 760 — phone ---------- */
@media (max-width: 760px) {
  .rs-g6, .rs-g5, .rs-g4, .rs-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rs-g2, .rs-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .rs-split { gap: 26px !important; }

  .rs-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .rs-full { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; }

  /* Section rhythm: 56px of air is a lot of scrolling on a 390px screen. */
  .rs-sec { padding-top: 34px !important; }

  .rs-t-hero { font-size: 34px !important; letter-spacing: -.03em !important; }
  .rs-t-xl { font-size: 26px !important; }
  .rs-t-lg { font-size: 23px !important; }
  .rs-t-md { font-size: 21px !important; }

  /* Tables never shrink below the width their content needs — they scroll instead. */
  .rs-x > * { min-width: 640px; }
  .rs-x.rs-x-wide > * { min-width: 860px; }
}

/* ---------- 460 — small phone ---------- */
@media (max-width: 460px) {
  .rs-g6, .rs-g5, .rs-g4, .rs-g3, .rs-g2 { grid-template-columns: minmax(0, 1fr) !important; }
  .rs-g6.rs-keep2, .rs-g4.rs-keep2, .rs-g3.rs-keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rs-pad { padding-left: 13px !important; padding-right: 13px !important; }
  .rs-t-hero { font-size: 29px !important; }
}

/* ---------- line-item rows ----------
   Cart, checkout and the seller comparison are repeated rows whose columns are the
   whole point — scrolling them sideways would be worse than stacking. The markup has
   no per-cell hooks, so each row is re-laid by child position. The child order below
   is the contract: if a cell is added or reordered in the .dc.html, update the map.

   rs-line-cart   thumb · name · seller select · qty stepper · line total · remove
   rs-line-sum    name · part code · qty · line total
   rs-line-offer  seller · why · price+eta · fit bar · pin button                      */
@media (max-width: 700px) {
  .rs-line-cart {
    grid-template-columns: 56px minmax(0, 1fr) auto auto !important;
    row-gap: 12px !important; align-items: center !important;
  }
  .rs-line-cart > :nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; }
  .rs-line-cart > :nth-child(2) { grid-area: 1 / 2 / 2 / 5 !important; }
  .rs-line-cart > :nth-child(3) { grid-area: 2 / 1 / 3 / 5 !important; }
  .rs-line-cart > :nth-child(4) { grid-area: 3 / 1 / 4 / 3 !important; }
  .rs-line-cart > :nth-child(5) { grid-area: 3 / 3 / 4 / 4 !important; }
  .rs-line-cart > :nth-child(6) { grid-area: 3 / 4 / 4 / 5 !important; }

  .rs-line-offer {
    grid-template-columns: minmax(0, 1fr) 92px auto !important;
    row-gap: 13px !important;
  }
  .rs-line-offer > :nth-child(1) { grid-area: 1 / 1 / 2 / 4 !important; }
  .rs-line-offer > :nth-child(2) { grid-area: 2 / 1 / 3 / 4 !important; }
  .rs-line-offer > :nth-child(3) { grid-area: 3 / 1 / 4 / 2 !important; }
  .rs-line-offer > :nth-child(4) { grid-area: 3 / 2 / 4 / 3 !important; }
  .rs-line-offer > :nth-child(5) { grid-area: 3 / 3 / 4 / 4 !important; }
}
@media (max-width: 620px) {
  .rs-line-sum {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    row-gap: 6px !important; column-gap: 12px !important;
  }
  /* The title truncates on one line at desktop; on a phone it is allowed to wrap. */
  .rs-line-sum > :nth-child(1) { grid-area: 1 / 1 / 2 / 4 !important; white-space: normal !important; }
  .rs-line-sum > :nth-child(2) { grid-area: 2 / 1 / 3 / 2 !important; }
  .rs-line-sum > :nth-child(3) { grid-area: 2 / 2 / 3 / 3 !important; }
  .rs-line-sum > :nth-child(4) { grid-area: 2 / 3 / 3 / 4 !important; }
}

/* ---------- site header ----------
   The bar already wraps; these rules decide the order it wraps in and stop the
   nav from pushing the cart off-screen. */
@media (max-width: 1180px) {
  .rs-hdr-bar { gap: 12px 16px !important; }
  .rs-hdr-nav > a { padding-left: 9px !important; padding-right: 9px !important; }
}
/* 1080 rather than 980: below this the bar wraps on its own anyway, and left to
   itself it drops the cart onto a line of its own under the nav. Taking control a
   little early keeps the order deliberate — identity and cart, then search, then nav. */
@media (max-width: 1080px) {
  .rs-hdr-search { order: 3 !important; flex: 1 1 100% !important; max-width: none !important; }
  .rs-hdr-nav {
    order: 4 !important; margin-left: 0 !important; width: 100% !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px !important;
  }
  .rs-hdr-nav::-webkit-scrollbar { display: none; }
  .rs-hdr-nav > a { flex: none !important; }
  .rs-hdr-actions { order: 2 !important; margin-left: auto !important; }
  .rs-hdr-live { display: none !important; }
}
@media (max-width: 620px) {
  .rs-hdr-strip { display: none !important; }
  .rs-hdr-sub { display: none !important; }
  /* "ROBOTIC MARKET" is half the brand, so it shrinks rather than disappears —
     dropping it would leave the bare parent-company name. */
  .rs-hdr-mark { font-size: 9px !important; letter-spacing: .06em !important; }
  .rs-hdr-bar { min-height: 0 !important; padding-top: 11px !important; padding-bottom: 11px !important; }
  .rs-hdr-cart-total { display: none !important; }
}

/* ---------- admin console ----------
   The console is a 246px left rail beside a scrolling document. Below 1024 the rail
   stops being a rail: it becomes a full-width console bar above the content, and the
   grouped links flow as one wrapped row. Sign-out and the operator card stay reachable. */
@media (max-width: 1024px) {
  .rs-adm { flex-direction: column !important; align-items: stretch !important; }

  .rs-adm-nav {
    width: 100% !important; height: auto !important; min-height: 0 !important;
    position: static !important; overflow: visible !important;
    flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important;
  }
  .rs-adm-group { flex-direction: row !important; flex-wrap: wrap !important; padding: 8px 10px !important; }
  .rs-adm-group > a { white-space: nowrap !important; }
  .rs-adm-label { display: none !important; }
  .rs-adm-foot {
    margin-top: 0 !important; margin-left: auto !important;
    border-top: 0 !important; padding: 8px 14px !important; flex-direction: row !important; align-items: center !important;
  }
  .rs-adm-spend { display: none !important; }
  .rs-adm-head { padding-left: 20px !important; padding-right: 20px !important; position: static !important; }
  .rs-adm-body { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 760px) {
  .rs-adm-head, .rs-adm-body { padding-left: 16px !important; padding-right: 16px !important; }
  .rs-adm-foot { display: none !important; }
}

/* ---------- assistant / chat ---------- */
@media (max-width: 1024px) {
  .rs-chat { grid-template-columns: minmax(0, 1fr) !important; }
  .rs-chat-side { order: 2 !important; position: static !important; max-height: none !important; }
  .rs-chat-log { min-height: 420px !important; height: auto !important; max-height: none !important; }
}

/* ---------- coarse pointers ----------
   Kills the 300 ms tap delay without disabling pinch-zoom. */
@media (hover: none) and (pointer: coarse) {
  button, a, select, [role="button"] { touch-action: manipulation; }
}