/* RoboHound theme - Jetsons atomic-age retro-futurism: pastel teal / coral / cream palette,
   retro-TV hero frame with the chrome robot-dog mascot, starburst + sparkle motifs, chunky
   rounded retro headline type (Baloo 2 / Fredoka via Google Fonts, loaded in the layout).
   Overrides base prism.css for the robohound site only (body.theme-dustrocket).
   Fonts are SELF-HOSTED (CSP style-src blocks Google Fonts): variable woff2 in /assets/fonts. */
@font-face{font-family:'Baloo 2';src:url('/assets/fonts/Baloo2.woff2') format('woff2');font-weight:400 800;font-display:optional}
@font-face{font-family:'Fredoka';src:url('/assets/fonts/Fredoka.woff2') format('woff2');font-weight:300 700;font-display:optional}
@font-face{font-family:'Chewy';src:url('/assets/fonts/Chewy.woff2') format('woff2');font-weight:400;font-display:optional}
.theme-dustrocket{
  --cream:#f6eedb; --cream2:#faf4e4; --card:#fdf8ec; --ink:#3a2a1c; --brown:#5b3b25; --muted:#83786a;
  --line:#a89d88; --frame:#6f665a; --teal:#8ccfc4; --teal-d:#1f7d7b; --coral:#ef6f5c; --coral-d:#c94a36;
  --gold:#e2a93b; --accent:#2ca6a4; --accent-d:#1f7d7b;
  background:var(--cream); color:var(--ink);
  font-family:'Fredoka','Trebuchet MS','Segoe UI',system-ui,-apple-system,sans-serif;
}
.theme-dustrocket .wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* --- atomic motifs (inline SVG data URIs) --- */
/* sparkle = classic 4-point star; burst = mid-century atomic starburst with dot tips */

/* header - pastel teal band under a coral top rule; the logo art carries its own cream chip */
.theme-dustrocket .rh-head{
  background:var(--teal);border-top:5px solid var(--coral-d);border-bottom:0;padding:6px 0;position:relative;z-index:3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fdf3dd' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef6f5c' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:left 38% top 18px,right 30% bottom 12px;
  background-size:20px 20px,13px 13px;
}
/* height:auto overrides prism.css's base .site-head .wrap{height:62px} (sized for a simple one-row header).
   On mobile this row wraps to 2 rows (logo/nav, then a full-width search below) - the fixed 62px trapped
   that second row as visual overflow outside normal layout flow, so the breadcrumb right after the header
   rendered UNDER the search bar instead of below it (Adam 2026-10-05, on a product page). */
.theme-dustrocket .rh-head-in{display:flex;align-items:center;gap:16px;height:auto}
/* logo sits directly on the teal header band (no cream chip) - the dog + wordmark art carries its own
   outline, so no CSS plate/shadow needed. A clean centred header row, no hero bridge. */
.theme-dustrocket .rh-brand{display:flex;align-items:center;text-decoration:none;flex:none;
  position:relative;z-index:6;margin:6px 0 0}
.theme-dustrocket .rh-mark{height:82px;width:auto;display:block}
.theme-dustrocket .rh-nav{display:flex;flex-wrap:nowrap;flex:none;align-items:center;gap:15px;margin-left:auto}
/* header search - cream pill input + coral round search button, matching the nav pills */
.theme-dustrocket .rh-search{display:flex;flex:none;align-items:stretch;margin-left:8px;position:relative;z-index:6}
.theme-dustrocket .rh-search input{font-family:'Fredoka',sans-serif;font-size:16px;color:#1d3833;
  background:var(--cream2);border:2px solid #47635d;border-right:0;border-radius:999px 0 0 999px;
  padding:7px 6px 7px 14px;width:380px;outline:none;box-shadow:2px 3px 0 rgba(31,77,72,.22)}
.theme-dustrocket .rh-search input::placeholder{color:#6f857d}
.theme-dustrocket .rh-search button{background:var(--coral);border:2px solid #47635d;border-left:0;
  border-radius:0 999px 999px 0;padding:0 14px;cursor:pointer;display:flex;align-items:center;
  box-shadow:2px 3px 0 rgba(31,77,72,.22)}
.theme-dustrocket .rh-search button:hover{background:var(--coral-d)}
.theme-dustrocket .rh-search button svg{width:17px;height:17px;fill:#fff;display:block}
.theme-dustrocket .rh-nav a{color:#1d3833;font-weight:600;font-size:13px;text-decoration:none;
  font-family:'Fredoka',sans-serif;text-transform:uppercase;letter-spacing:.6px}
.theme-dustrocket .rh-nav a:hover{color:#0c221f}
.theme-dustrocket .rh-nav a.acct{background:var(--cream2);color:var(--coral-d);border:2px solid #47635d;
  border-radius:999px;padding:6px 16px;box-shadow:2px 3px 0 rgba(31,77,72,.25)}
.theme-dustrocket .rh-nav a.acct:hover{color:var(--coral-d);background:#fff}

/* mobile hamburger drawer (CSS checkbox toggle, no JS) - hidden on desktop by default */
.theme-dustrocket .rh-burger,.theme-dustrocket .rh-scrim,.theme-dustrocket .rh-drawer{display:none}

/* hero - pastel teal field scattered with sparkles + atomic bursts, holding a retro-TV cream frame */
.theme-dustrocket .rh-hero{
  background:var(--teal);padding:38px 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fdf3dd' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%23ef6f5c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M24 6V18M24 30V42M6 24H18M30 24H42M11 11l8 8M29 29l8 8M37 11l-8 8M19 29l-8 8'/%3E%3C/g%3E%3Ccircle cx='24' cy='4' r='2.2' fill='%23ef6f5c'/%3E%3Ccircle cx='24' cy='44' r='2.2' fill='%23ef6f5c'/%3E%3Ccircle cx='4' cy='24' r='2.2' fill='%23ef6f5c'/%3E%3Ccircle cx='44' cy='24' r='2.2' fill='%23ef6f5c'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fdf3dd' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%23fdf3dd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M24 6V18M24 30V42M6 24H18M30 24H42M11 11l8 8M29 29l8 8M37 11l-8 8M19 29l-8 8'/%3E%3C/g%3E%3Ccircle cx='24' cy='4' r='2.2' fill='%23fdf3dd'/%3E%3Ccircle cx='24' cy='44' r='2.2' fill='%23fdf3dd'/%3E%3Ccircle cx='4' cy='24' r='2.2' fill='%23fdf3dd'/%3E%3Ccircle cx='44' cy='24' r='2.2' fill='%23fdf3dd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px top 46px,left 10px bottom 110px,right 14px top 150px,right 8px bottom 46px;
  background-size:34px 34px,68px 68px,24px 24px,54px 54px;
}
.theme-dustrocket .rh-hero-in{
  background:var(--cream2);border:4px solid var(--frame);border-radius:34px;
  padding:32px 44px;position:relative;
  box-shadow:0 0 0 7px #efe6cf,0 0 0 10px #9a9184,6px 12px 26px rgba(26,66,60,.30);
  display:flex;align-items:center;gap:34px;min-height:300px;
  /* corner sparkle + scrim + room scene. The blue atom-orbit motif was removed - it sat over the H1 and
     read like a stray emoji in the headline. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e35544' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
    linear-gradient(93deg,rgba(250,244,228,.97) 0%,rgba(250,244,228,.94) 32%,rgba(250,244,228,.62) 47%,rgba(250,244,228,0) 63%),
    url('/assets/img/dustrocket-hero-room.webp?v=1');
  background-repeat:no-repeat;
  background-position:left 26px top 28px,left top,right bottom;
  background-size:19px 19px,100% 100%,cover;
}
.theme-dustrocket .rh-hero-copy{position:relative;flex:1 1 55%;max-width:640px}
.theme-dustrocket .rh-hero h1{
  font-family:'Chewy','Baloo 2','Fredoka',sans-serif;font-size:56px;line-height:1.06;font-weight:400;
  color:var(--brown);letter-spacing:.4px;margin-bottom:14px}
.theme-dustrocket .rh-hero p{font-size:18px;color:var(--ink);max-width:520px;margin-bottom:24px;line-height:1.5}
.theme-dustrocket .rh-cta{display:inline-block;background:var(--coral);color:#fff;font-weight:600;
  font-family:'Baloo 2','Fredoka',sans-serif;
  padding:12px 32px;border-radius:999px;font-size:18px;text-decoration:none;transition:background .15s;
  border:2px solid var(--coral-d);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 rgba(160,50,35,.55)}
.theme-dustrocket .rh-cta:hover{background:var(--coral-d)}
/* desktop: the dog now lives inside the hero scene bg, so hide the floating mascot (kept for mobile) */
.theme-dustrocket .rh-hero-art{display:none;flex:0 0 38%;position:relative;text-align:center;min-width:0}
.theme-dustrocket .rh-hero-art img{position:relative;width:100%;max-width:390px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 10px 14px rgba(90,60,30,.28))}
/* coral double-stripe divider closing the teal hero band */
.theme-dustrocket .rh-hero::after{content:"";display:block;height:13px;margin-top:40px;
  background:linear-gradient(to bottom,var(--coral-d) 0 3px,var(--cream) 3px 5px,transparent 5px 8px,var(--coral) 8px 13px)}

/* trust stats strip - real tracked counts (HomeWidget product_count/retailer_count), never invented */
.theme-dustrocket .rh-trust{padding:16px 0;background:var(--cream)}
.theme-dustrocket .rh-trust .wrap{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.theme-dustrocket .rh-trust .stat{display:flex;align-items:center;gap:10px}
.theme-dustrocket .rh-trust .stat b{font-family:'Baloo 2','Fredoka',sans-serif;font-size:22px;color:var(--teal-d)}
.theme-dustrocket .rh-trust .stat span{font-size:13px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px}
.theme-dustrocket .rh-trust .stat svg{width:22px;height:22px;flex:none;color:var(--coral)}

/* sections + headings */
.theme-dustrocket main{padding-top:0}
/* member/auth pages (login/register/account) have no hero band, so restore a top gap on their .member-wrap
   main that the rule above zeroes - matches the 56px bottom padding so the card isn't hugging the header. */
.theme-dustrocket main.member-wrap{padding-top:56px}
/* top/bottom ONLY (not the padding shorthand) - .band is combined directly on the SAME element as .wrap on
   several base templates (article.html.twig's "wrap band prose", product_detail.html.twig's "wrap band
   product"), and the old shorthand's 0 horizontal value was overwriting .wrap's 22px at equal specificity,
   leaving those pages edge-to-edge on mobile (invisible on desktop - max-width centring hides it). Sections
   where .band wraps its OWN nested <div class="wrap"> (browse/rail/guides) are unaffected either way, since
   that inner div's padding never depended on .band's horizontal value in the first place. Root-cause fix
   covers every current and future wrap+band template combo, not just the one page that got screenshotted
   (Adam 2026-10-05, caught first on a guide page, then again on a product page). */
.theme-dustrocket .band{padding-top:14px;padding-bottom:16px}
.theme-dustrocket h2{font-family:'Chewy','Baloo 2','Fredoka',sans-serif;font-size:34px;font-weight:400;
  color:var(--teal-d);margin-bottom:12px;letter-spacing:.6px}
.theme-dustrocket .band:not(.rail) h2{text-align:left;color:var(--brown)}
/* rail heading on a coral ribbon banner with folded ends */
.theme-dustrocket .band.rail .rail-head h2{
  position:relative;display:inline-block;background:var(--coral);color:#fff6e2;
  font-size:30px;letter-spacing:.8px;padding:7px 24px 8px;margin:6px 0 14px 8px;
  border:2px solid var(--coral-d);border-radius:8px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),3px 4px 0 rgba(90,80,66,.25);
  transform:rotate(-1.4deg);text-shadow:1px 2px 0 rgba(160,50,35,.45)}
/* folded ribbon tails. The h2's transform:rotate makes it its own stacking context, which TRAPS a
   z-index:-1 pseudo so it paints ABOVE the h2 background (the tails looked like they sat in FRONT of the
   ribbon). Fix: the tails abut the ribbon edge instead of overlapping it (width == the side offset, so the
   body-side edge lands exactly on the h2 border), so only the outward fold shows - it reads as tucked
   behind, no dark strip over the ribbon face. */
.theme-dustrocket .band.rail .rail-head h2::before,
.theme-dustrocket .band.rail .rail-head h2::after{
  content:"";position:absolute;top:8px;bottom:-8px;width:14px;background:var(--coral-d);z-index:-1}
.theme-dustrocket .band.rail .rail-head h2::before{left:-14px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%)}
.theme-dustrocket .band.rail .rail-head h2::after{right:-14px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%)}
/* sparkles + faint atom orbits at the cream margins of the product bands */
.theme-dustrocket .band.rail{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232ca6a4' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef6f5c' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg opacity='.55'%3E%3Cg fill='none' stroke='%232ca6a4' stroke-width='2'%3E%3Cellipse cx='22' cy='22' rx='18' ry='7'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(60 22 22)'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(120 22 22)'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='3' fill='%23ef6f5c'/%3E%3Ccircle cx='40' cy='22' r='2.2' fill='%232ca6a4'/%3E%3Ccircle cx='31' cy='37.6' r='2.2' fill='%232ca6a4'/%3E%3Ccircle cx='13' cy='6.4' r='2.2' fill='%232ca6a4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg opacity='.5'%3E%3Cg fill='none' stroke='%23ef6f5c' stroke-width='2'%3E%3Cellipse cx='22' cy='22' rx='18' ry='7'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(60 22 22)'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(120 22 22)'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='3' fill='%231f7d7b'/%3E%3Ccircle cx='40' cy='22' r='2.2' fill='%23ef6f5c'/%3E%3Ccircle cx='31' cy='37.6' r='2.2' fill='%23ef6f5c'/%3E%3Ccircle cx='13' cy='6.4' r='2.2' fill='%23ef6f5c'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px top 40px,right 18px bottom 60px,right 24px top 300px,left 18px bottom 150px;
  background-size:20px 20px,15px 15px,46px 46px,54px 54px}

/* atom orbits flanking the browse-by-type row (peeking from the section margins) */
.theme-dustrocket .band.browse{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23ef6f5c' stroke-width='2'%3E%3Cellipse cx='22' cy='22' rx='18' ry='7'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(60 22 22)'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(120 22 22)'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='3' fill='%231f7d7b'/%3E%3Ccircle cx='40' cy='22' r='2.2' fill='%23ef6f5c'/%3E%3Ccircle cx='31' cy='37.6' r='2.2' fill='%23ef6f5c'/%3E%3Ccircle cx='13' cy='6.4' r='2.2' fill='%23ef6f5c'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%232ca6a4' stroke-width='2'%3E%3Cellipse cx='22' cy='22' rx='18' ry='7'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(60 22 22)'/%3E%3Cellipse cx='22' cy='22' rx='18' ry='7' transform='rotate(120 22 22)'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='3' fill='%23ef6f5c'/%3E%3Ccircle cx='40' cy='22' r='2.2' fill='%232ca6a4'/%3E%3Ccircle cx='31' cy='37.6' r='2.2' fill='%232ca6a4'/%3E%3Ccircle cx='13' cy='6.4' r='2.2' fill='%232ca6a4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef6f5c' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232ca6a4' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 16px top 72px,right 18px bottom 12px,left 52px bottom 26px,right 58px top 54px;
  background-size:72px 72px,56px 56px,13px 13px,16px 16px}

/* browse-by-type tiles - cream chip buttons with retro icon art + double outline */
.theme-dustrocket .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:0}
.theme-dustrocket .tile{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px 16px 14px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--brown);text-decoration:none;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;
  box-shadow:inset 0 0 0 4px #fff,4px 5px 0 rgba(90,80,66,.18);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.theme-dustrocket .tile img{height:104px;width:auto;display:block;
  filter:drop-shadow(0 4px 5px rgba(90,60,30,.22));transition:transform .15s}
.theme-dustrocket .tile:hover{border-color:var(--coral);transform:translateY(-2px);
  box-shadow:inset 0 0 0 4px #fff,6px 8px 0 rgba(90,80,66,.22)}
.theme-dustrocket .tile:hover img{transform:scale(1.05)}
.theme-dustrocket .tile:hover span{color:var(--coral-d)}
/* colour-blocked tiles like the punchy concept: coral / cream / teal panels */
.theme-dustrocket .tile:nth-child(1){background:var(--coral);border-color:var(--coral-d);color:#441407;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),4px 5px 0 rgba(90,80,66,.2)}
.theme-dustrocket .tile:nth-child(1):hover{border-color:#9c3423;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),6px 8px 0 rgba(90,80,66,.24)}
.theme-dustrocket .tile:nth-child(1):hover span{color:#2d0b02}
.theme-dustrocket .tile:nth-child(3){background:var(--teal);border-color:var(--teal-d);color:#0f3733;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),4px 5px 0 rgba(90,80,66,.2)}
.theme-dustrocket .tile:nth-child(3):hover{border-color:#155a58;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),6px 8px 0 rgba(90,80,66,.24)}
.theme-dustrocket .tile:nth-child(3):hover span{color:#062421}
/* 4th tile - specialty picks, lilac panel (the budget/mid/flagship tiers are coral/cream/teal) */
.theme-dustrocket .tile:nth-child(4){background:#d9c9ef;border-color:#8a6bbf;color:#3c2a5c;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),4px 5px 0 rgba(90,80,66,.2)}
.theme-dustrocket .tile:nth-child(4):hover{border-color:#6b4f94;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),6px 8px 0 rgba(90,80,66,.24)}
.theme-dustrocket .tile:nth-child(4):hover span{color:#2c1d47}

/* rails + product cards - cream, double outline, hard offset shadow, coral pill CTAs */
.theme-dustrocket .rail-head{display:flex;align-items:flex-end;justify-content:space-between}
.theme-dustrocket .rail-blurb{color:var(--muted);font-size:14px;font-weight:400;font-family:'Fredoka',sans-serif;margin:-6px 0 12px}
.theme-dustrocket .rail-more{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:8px 16px;
  font-weight:600;font-size:14px;color:var(--teal-d);text-decoration:none;white-space:nowrap;
  box-shadow:2px 3px 0 rgba(90,80,66,.18)}
.theme-dustrocket .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.theme-dustrocket .card{background:var(--card);border:2px solid var(--line);border-radius:18px;overflow:hidden;
  position:relative;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 4px #fff,4px 5px 0 rgba(90,80,66,.18);
  transition:box-shadow .15s,transform .15s}
.theme-dustrocket .card:hover{box-shadow:inset 0 0 0 4px #fff,6px 8px 0 rgba(90,80,66,.22);transform:translateY(-2px);border-color:var(--teal-d)}
.theme-dustrocket .card>img,.theme-dustrocket .card .noimg{background:#fff;padding:16px;height:170px;object-fit:contain;width:100%;box-sizing:border-box;border-bottom:1px solid #e4dcc8;border-radius:12px 12px 0 0;margin:4px 4px 0;width:calc(100% - 8px)}
.theme-dustrocket .card-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.theme-dustrocket .card .t{font-weight:600;font-size:15px;color:var(--ink);line-height:1.3;font-family:'Fredoka',sans-serif}
.theme-dustrocket .card .p{color:var(--brown);font-weight:700;font-size:20px;font-family:'Baloo 2','Fredoka',sans-serif}
.theme-dustrocket .card .p-oos{color:var(--muted)}
.theme-dustrocket .card .was{color:var(--muted)}
.theme-dustrocket .card-rating{display:flex;align-items:center;gap:2px;font-size:13px;color:var(--muted)}
.theme-dustrocket .card-rating .on{color:var(--gold)}.theme-dustrocket .card-rating .off{color:#ddd2b9}
.theme-dustrocket .card-rating .cr-num{color:var(--ink);margin-left:3px}
.theme-dustrocket .card-rating em{margin-left:2px;font-style:normal}
.theme-dustrocket .rlogos{display:flex;align-items:center;gap:5px}
.theme-dustrocket .rlogos img{border-radius:4px}
.theme-dustrocket .rlogos .more,.theme-dustrocket .stores{color:var(--muted);font-size:12px;font-weight:500}
/* Autonomy Score card badge: a deliberate 2-line stack - score on top, tier as a muted subtitle below -
   instead of letting "Autonomy N/10 - tier" word-wrap and orphan "automation" on its own line (Adam 2026-11-02). */
.theme-dustrocket .autonomy-badge{display:block;line-height:1.35}
.theme-dustrocket .autonomy-badge .ab-score{display:block;color:var(--ink)}
.theme-dustrocket .autonomy-badge .ab-tier{display:block;color:var(--muted);font-size:13px}
/* discount / stock badge = a COMPACT pill overlaid on the image top-left (as a direct flex child of the
   card it would otherwise stretch to a full-width bar). Absolute + align hug the corner. */
.theme-dustrocket .off-badge,.theme-dustrocket .oos-badge{position:absolute;top:12px;left:12px;z-index:2;
  align-self:flex-start;color:#fff;font-weight:600;border-radius:999px;font-size:12px;padding:3px 9px;
  box-shadow:1px 2px 0 rgba(90,80,66,.28)}
.theme-dustrocket .off-badge{background:var(--coral)}
.theme-dustrocket .oos-badge{background:#8a7c6d}
.theme-dustrocket .view-deal{background:var(--coral);color:#fff;text-align:center;font-weight:600;font-size:15px;
  font-family:'Baloo 2','Fredoka',sans-serif;letter-spacing:.3px;white-space:nowrap;
  padding:10px 14px;border-radius:999px;margin-top:auto;transition:background .15s;
  border:2px solid var(--coral-d);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(160,50,35,.5)}
.theme-dustrocket .card:hover .view-deal{background:var(--coral-d)}

/* footer - pastel teal band, a brand+links row, then an illustrated landscape strip along the bottom */
.theme-dustrocket .site-foot{
  background:var(--teal);color:#1d3833;margin-top:22px;font-size:14px;line-height:1.6;
  border-top:3px solid var(--coral-d);position:relative;
  /* base prism.css sets .site-foot{padding:26px 0} - override to 0, every bit of footer spacing comes
     from foot-top's own padding below, so the leaked base padding was adding 26px of plain teal with
     nothing drawn in it (Adam 2026-10-05, mobile screenshot) */
  padding:0}
.theme-dustrocket .site-foot::before{content:"";position:absolute;top:4px;left:0;right:0;height:3px;background:var(--coral)}
/* .foot-top carries BOTH .wrap and .foot-top classes at equal specificity - .wrap's 22px horizontal padding
   was being overwritten by this rule's own padding shorthand (0 left/right) by source order, same edge-to-
   edge bug class as the article-page fix above. Set horizontal padding explicitly instead of relying on
   .wrap to supply it. */
.theme-dustrocket .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px 56px;flex-wrap:wrap;
  padding:32px 22px 30px}
/* the brand side is one tidy stacked column: logo+tagline, the blurb, then the mascot + stamp (Adam design review 2026-10-31) */
.theme-dustrocket .foot-brand-block{display:flex;flex-direction:column;gap:18px;max-width:560px}
.theme-dustrocket .foot-wm{font-family:'Baloo 2','Fredoka',sans-serif;font-size:26px;font-weight:700;
  color:#123531;display:block}
.theme-dustrocket .foot-tagline{margin:4px 0 0;color:#2f4d47;font-weight:600}
.theme-dustrocket .foot-cols{display:flex;gap:48px;flex-wrap:wrap}
.theme-dustrocket .foot-col h3{font-family:'Baloo 2','Fredoka',sans-serif;font-size:15px;font-weight:700;
  color:#123531;margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px}
.theme-dustrocket .foot-col{display:flex;flex-direction:column;gap:7px}
.theme-dustrocket .foot-col a{color:#1d3833;font-weight:600;text-decoration:none}
.theme-dustrocket .foot-col a:hover{color:#fff}
.theme-dustrocket .foot-sub{margin:0;color:#123531;font-size:13px}
/* Dust Rocket robo-vac mascot sitting beside the stamp */
.theme-dustrocket .foot-mascot{flex:none;width:104px;height:auto;display:block;
  filter:drop-shadow(0 5px 7px rgba(18,53,49,.28))}
.theme-dustrocket .foot-end{display:flex;align-items:center;gap:20px;flex:none}
/* circular atomic rubber-stamp badge, matching the mockup's "Good floors, brighter days" stamp */
.theme-dustrocket .foot-badge{
  flex:none;width:92px;height:92px;border-radius:50%;background:var(--cream2);
  border:3px solid var(--coral-d);display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Baloo 2','Fredoka',sans-serif;font-weight:700;font-size:12px;line-height:1.35;color:var(--coral-d);
  text-transform:uppercase;letter-spacing:.3px;transform:rotate(-6deg);
  box-shadow:2px 3px 0 rgba(90,80,66,.25)}

@media(max-width:700px){
  .theme-dustrocket .foot-top{flex-direction:column;gap:28px;padding:26px 22px 24px}
  /* three nav columns stay in ONE row on mobile (3-col grid) instead of wrapping to 2-up + 1 (Adam 2026-10-31).
     Tight gap so the wider price labels ("$1,000 to $2,000") have room; they wrap within their column if needed. */
  .theme-dustrocket .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12px}
  .theme-dustrocket .foot-col a{font-size:13px}
  .theme-dustrocket .foot-end{gap:16px}
  .theme-dustrocket .foot-mascot{width:86px}
  .theme-dustrocket .foot-badge{width:74px;height:74px;font-size:10px}
}

@media(max-width:900px){
  .theme-dustrocket .grid{grid-template-columns:repeat(2,1fr)}
  /* tighten the trust strip on mobile: the gap belongs on .wrap (the flex row), not .rh-trust - the old
     rule targeted the wrong element so the 48px base gap stuck and the 3 stats sat miles apart (Adam 2026-10-23) */
  /* breathing room above the trust strip, tight below; "Browse by budget" h2 pulled up tight (Adam 2026-10-23) */
  .theme-dustrocket .rh-trust{padding:32px 16px 16px}
  .theme-dustrocket .band.browse h2{margin-top:0}
  .theme-dustrocket .rh-trust .wrap{gap:10px 26px;flex-direction:column;align-items:flex-start}
  .theme-dustrocket .rh-trust .stat b{font-size:18px}
  .theme-dustrocket .rh-trust .stat span{font-size:11px}
  /* keep "Compare prices" on ONE line in the narrow 2-col cards */
  .theme-dustrocket .view-deal{font-size:13px;letter-spacing:.1px;padding:10px 8px}
  .theme-dustrocket .band{padding-top:12px;padding-bottom:14px}
  .theme-dustrocket h2{font-size:28px}
  .theme-dustrocket .band.browse{background-image:none}
  .theme-dustrocket .band.rail{background-position:left 14px top 40px,right 18px bottom 60px,right 22px top 26px,left 18px bottom 150px}
  .theme-dustrocket .band.rail .rail-head h2{font-size:25px;padding:6px 18px 7px;margin-left:6px}
  .theme-dustrocket .tiles{grid-template-columns:1fr;gap:12px}
  .theme-dustrocket .tile{flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 16px;gap:16px}
  .theme-dustrocket .tile img{height:60px}
  .theme-dustrocket .rail-head{display:block}
  .theme-dustrocket .rail-blurb{margin:-4px 0 10px}
  .theme-dustrocket .rh-hero-in{flex-direction:column;padding:26px 22px;gap:16px;min-height:auto;
    /* mobile: bring the room scene back BEHIND the hero for a bit of excitement (Adam 2026-10-23), darkened
       with an overlay so the text stays readable; text flips to light below. The retro-TV cream frame stays. */
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd9cf' d='M12 0Q13 9 24 12Q13 15 12 24Q11 15 0 12Q11 9 12 0Z'/%3E%3C/svg%3E"),
      linear-gradient(180deg,rgba(24,44,40,.56) 0%,rgba(24,44,40,.74) 100%),
      url('/assets/img/dustrocket-hero-room.webp?v=1');
    background-position:right 22px top 22px,center,center;
    background-size:18px 18px,cover,cover;
    background-repeat:no-repeat}
  .theme-dustrocket .rh-hero h1{font-size:34px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
  .theme-dustrocket .rh-hero p{color:#f4ede1;text-shadow:0 1px 7px rgba(0,0,0,.4)}
  /* unbroken teal flow on mobile: drop the coral double-stripe divider under the hero so the teal runs
     straight down into the trust strip (Adam 2026-10-23) */
  .theme-dustrocket .rh-hero::after{display:none}
  /* no dog in the mobile hero - it's already in the header (Adam 2026-09-27) */
  .theme-dustrocket .rh-hero-art{display:none}
  .theme-dustrocket .rh-mark{height:58px}
  .theme-dustrocket .rh-brand{margin:0}
  .theme-dustrocket .rh-nav{gap:16px}
  .theme-dustrocket .rh-nav a:not(.acct){display:none}
  /* header wraps: logo + Sign in on row 1, the search full-width on its own row below */
  .theme-dustrocket .rh-head-in{flex-wrap:wrap;gap:12px 16px}
  .theme-dustrocket .rh-search{order:3;flex-basis:100%;margin-left:0;transform:none}
  .theme-dustrocket .rh-search input{flex:1;width:auto}
  /* slight gap so the full-width search separates from the hero, not flush against it (Adam 2026-09-27) */
  .theme-dustrocket .rh-head{padding-bottom:12px}
  .theme-dustrocket .rh-nav{margin-left:auto;transform:none}

  /* hamburger drawer - the only way to browse by budget/guides on mobile since rh-nav links are hidden above
     (Adam 2026-10-05: "we need our hamburger menu"). Order 4 so it sits after the wrapped search row. */
  .theme-dustrocket .rh-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    order:2;flex:none;width:38px;height:38px;padding:9px;border-radius:10px;
    background:rgba(255,255,255,.3);cursor:pointer;z-index:30}
  .theme-dustrocket .rh-burger span{display:block;height:2.5px;border-radius:2px;background:#123531}
  .theme-dustrocket .rh-scrim{display:block;position:fixed;inset:0;background:rgba(26,66,60,.45);
    opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
  .theme-dustrocket .rh-drawer-toggle:checked ~ .rh-scrim{opacity:1;pointer-events:auto}
  .theme-dustrocket .rh-drawer{display:block;position:fixed;top:0;right:0;height:100%;width:80%;max-width:320px;
    background:var(--cream2);box-shadow:-8px 0 24px rgba(26,66,60,.3);padding:54px 20px 30px;
    overflow-y:auto;transform:translateX(100%);transition:transform .22s ease;z-index:50;
    font-family:'Fredoka',sans-serif}
  .theme-dustrocket .rh-drawer-toggle:checked ~ .rh-drawer{transform:translateX(0)}
  .theme-dustrocket .rh-drawer-x{position:absolute;top:10px;right:16px;font-size:32px;line-height:1;
    color:var(--brown);cursor:pointer}
  .theme-dustrocket .rh-drawer .dh{margin:20px 0 8px;font-size:12px;text-transform:uppercase;
    letter-spacing:.08em;color:var(--teal-d);opacity:.85;font-weight:700}
  .theme-dustrocket .rh-drawer .dh:first-of-type{margin-top:0}
  .theme-dustrocket .rh-drawer a{display:block;padding:10px 0;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--line);text-decoration:none}
}

/* Homepage "RoboHound guides" band - links to our editorial buying guides (Adam 2026-09-27) */
.theme-dustrocket .rh-guides .rail-blurb{max-width:60ch;margin:0 0 14px}
.theme-dustrocket .rh-guide-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.theme-dustrocket .rh-guide-links a{display:block;padding:14px 16px;background:#fff;border:1px solid #e3ded3;border-radius:12px;color:#123531;font-weight:600;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.theme-dustrocket .rh-guide-links a:hover{border-color:#2ca6a4;box-shadow:0 2px 10px rgba(44,166,164,.15)}
.theme-dustrocket .rh-guide-links a span{display:block;margin-top:4px;font-weight:400;font-size:.88em;color:#5b6b66;line-height:1.4}

/* ============================================================================
   Design-polish batch (Adam design review, 2026-10-23) - robohound-scoped only.
   ============================================================================ */

/* [1] BUTTON WEIGHT - base .btn is 700, watch-form button 700, view-deal/rh-cta 600;
   the heavy weight reads thick/blurry at small sizes. Settle every Dust Rocket button on 500. */
.theme-dustrocket .btn,
.theme-dustrocket .watch-form button,
.theme-dustrocket .view-deal,
.theme-dustrocket .rh-cta,
.theme-dustrocket .rail-more{font-weight:500}

/* [1b] TRACK-THIS-PRICE - lift the optional opt-in checkbox above the input row so email + "alert under $" +
   Watch-price pair on ONE line (tightens the box vertically). Shared base DOM is unchanged; this is a
   robohound-only visual reorder via flex `order` (watch-label first, opt-in second, inputs+button after). */
.theme-dustrocket .watch-label{order:-2}
.theme-dustrocket .watch-optin{order:-1}

/* [2] CONTRAST - two greys sit too faint on the cream bg; darken to ~AA on cream. */
/* (a) breadcrumbs: base var(--muted) #83786a -> #5f513d; keep the current-page crumb a touch firmer */
.theme-dustrocket .breadcrumbs{color:#5f513d}
.theme-dustrocket .breadcrumbs [aria-current]{color:#3a2a1c}
/* (b) the "We do not track or alert on Amazon or eBay..." note (base .lr-note #6a7686) */
.theme-dustrocket .link-retailers .lr-note{color:#5f513d}

/* [3] SPEC TABLE - shared borders use var(--line) #a89d88 (too hard) + a blue-grey #f7f9fc header
   that's off-theme on cream. Soften borders to near the cell fill + bring the header into the palette. */
.theme-dustrocket table.specs,
.theme-dustrocket table.specs th,
.theme-dustrocket table.specs td{border-color:#efe7d4}
.theme-dustrocket .specs th{background:var(--cream2);color:var(--ink)}

/* [6] PRICE-CHECK STAT ROW - base .pc-stats is a small left-bunched flex row; make it a proper
   4-cell stat panel spanning the block width, label-over-value, with "Now" emphasised. Wraps 2x2 on mobile. */
.theme-dustrocket .pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.theme-dustrocket .pc-stats span{display:flex;flex-direction:column;justify-content:flex-start;gap:3px;
  background:var(--cream2);border:1px solid #efe7d4;border-radius:12px;padding:11px 14px 12px;
  font-size:21px;font-weight:700;color:var(--brown);font-family:'Baloo 2','Fredoka',sans-serif;line-height:1.1}
.theme-dustrocket .pc-stats em{display:block;font-style:normal;font-size:11px;font-weight:600;
  color:#6a5f4f;text-transform:uppercase;letter-spacing:.04em;margin:0;font-family:'Fredoka',sans-serif}
.theme-dustrocket .pc-stats i{display:block;font-style:normal;font-weight:500;color:#83786a;font-size:12px;
  font-family:'Fredoka',sans-serif}
/* emphasise the live "Now" cell (the last of the four) */
.theme-dustrocket .pc-stats span:last-child{background:#eaf5f2;border-color:#bfe0da;color:var(--teal-d)}
.theme-dustrocket .pc-stats span:last-child em{color:var(--teal-d)}
@media(max-width:560px){
  .theme-dustrocket .pc-stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================================
   Design-polish batch #2 (Adam design review, 2026-10-23b) - robohound-scoped only.
   Footer logo, price-input font, badge weight, buyer-guide card (.bg-*) tweaks,
   white image panel, hero top padding. All overrides of SHARED defaults are
   scoped under .theme-dustrocket so TV Rex / BrickTurtle / Coffee Lens are untouched.
   ============================================================================ */

/* [1] FOOTER LOGO - the wide dustrocket lockup image replaces the plain wordmark in both footers. */
.theme-dustrocket .foot-logo{height:44px;width:auto;display:block;margin-bottom:2px}

/* [2] PRICE FILTER INPUT FONT - the Min/Max $ inputs don't inherit font-family (browsers reset form
   controls to the platform default), so force them back onto the theme's Fredoka. */
.theme-dustrocket .facet-price .fp-row input{font-family:inherit}

/* [3] BADGE WEIGHT - shared .badge is 700; soften to 600 on Dust Rocket. */
.theme-dustrocket .badge{font-weight:600}
/* Dust Rocket "Lowest price we've seen" deal badge: coral, with the custom retro siren graphic. */
.theme-dustrocket .badge-deal{background:var(--coral);color:#fff}
.theme-dustrocket .badge-deal .badge-ico{width:17px}
.theme-dustrocket .badge-deal .badge-ico img{display:block;width:17px;height:17px}

/* [4] BUYER-GUIDE CARD (.bg-*) - the horizontal rated/buyer-guide list rows. Lighter, larger title + CTA;
   the "$X off (Y%)" discount pill back to the owner's mockup size (12px/500). */
.theme-dustrocket .bg-title{font-weight:500;font-size:18px}
.theme-dustrocket .bg-save{font-size:12px;font-weight:500}
.theme-dustrocket .bg-cta{font-weight:500;font-size:14px;padding:8px 16px;border-radius:9px}

/* [4b] HOMEPAGE GRID CARD "% off" pill (.off-badge, top-left of the grid cards) - owner wants it a lot
   bigger. Only size/weight/padding here; its coral background + absolute corner positioning (set earlier
   in this file) are kept. */
.theme-dustrocket .off-badge{font-size:18px;font-weight:600;padding:3px 9px}

/* [5] WHITE IMAGE PANEL - on the horizontal .bg-pick cards the product photo sat as a small white box on
   the cream card. Make the image column a solid-white panel flush to the card's left/top/bottom border,
   with the rest of the card staying cream. The card is .bg-pick{padding:14px 18px;border-radius:14px}, so
   negative margins cancel the top/left/bottom padding (right stays, keeping the gap to the body column);
   align-self:stretch makes it full card height; round only the LEFT corners to match the 14px radius. */
.theme-dustrocket .bg-pick{overflow:hidden}
.theme-dustrocket .bg-thumb{align-self:stretch;display:flex;align-items:center;justify-content:center;
  background:#fff;margin:-14px 0 -14px -18px;padding:10px 12px;border-right:1px solid #ece3cf;
  border-radius:14px 0 0 14px;box-sizing:border-box}
/* the image inside the panel keeps its contain-fit box but centres within the taller white column */
.theme-dustrocket .bg-thumb img{background:transparent}
/* the rank badge is absolutely positioned inside .bg-thumb; nudge it off the new panel's padded edge */
.theme-dustrocket .bg-thumb .bg-rank{top:4px;left:4px}

/* [6] HERO TOP PADDING (desktop) - tighten the gap above the hero from 38px to 18px. The mobile
   .rh-hero-in override (further down this file's @media max-width:900px) is left alone. */
.theme-dustrocket .rh-hero{padding:18px 0 0}

/* [5-mobile] the shared mobile rule (prism.css ~185-190) restacks .bg-thumb full-width; cancel the
   negative margins + left-only radius there so the stacked phone card isn't pulled out of the card box. */
@media(max-width:640px){
  .theme-dustrocket .bg-thumb{align-self:auto;margin:0;border-right:0;border-radius:0;
    border-bottom:1px solid #ece3cf;padding:12px}
}

/* [7] DUST ROCKET AUTONOMY SCORE (v2) - 2-column row + boxed card (Adam's mockup 2026-10-23).
   The Price-check section and the Autonomy Score card sit side by side (Price check ~60% left, autonomy
   card ~40% right) on the PDP; on narrow mobile they stack (autonomy below price check). Scoped to
   .theme-dustrocket; the block is already gated to robovac + config.show_autonomy in the template. */
.theme-dustrocket .dr-pc-autonomy-row{display:flex;gap:18px;align-items:stretch;margin:1.6rem 0}
.theme-dustrocket .dr-pc-autonomy-row .dr-pc-col{flex:1 1 60%;min-width:0}
.theme-dustrocket .dr-pc-autonomy-row .dr-autonomy-col{flex:1 1 40%;min-width:0;display:flex}
/* box the Price check to match the autonomy card, so the two widgets read as a matching pair (Adam 2026-10-23
   "both boxed up"). Same frame as .dr-autonomy-card (border/radius/padding/cream bg/shadow). */
.theme-dustrocket .dr-pc-autonomy-row .dr-pc-col > .price-check-block{margin:0;height:100%;box-sizing:border-box;
  border:1px solid #e3e0d8;border-radius:14px;padding:1.1rem 1.3rem;background:#fffdf7;box-shadow:0 1px 0 #efe9db}
.theme-dustrocket .dr-pc-autonomy-row .dr-autonomy-col > .dr-autonomy-card{margin:0;width:100%;box-sizing:border-box}

/* The card itself - a deliberate boxed panel matching the theme (teal accents, cream card, coral tier pill).
   Replaces the old full-width tick-list with the five v2 component rows (earned / max). */
.theme-dustrocket .dr-autonomy-card{border:1px solid #e3e0d8;border-radius:14px;padding:1.1rem 1.2rem;
  background:#fffdf7;box-shadow:0 1px 0 #efe9db}
/* heading inherits the base robohound h2 (34px/400, 28px mobile) so it matches the "Price check" heading;
   only the margin is kept (Adam 2026-10-31 - "Autonomy Score" same size as Price check for consistency). */
.theme-dustrocket .dr-autonomy-card h2{margin:.1rem 0 .4rem}
/* align-items:center + margin-left:auto on the pill: the tier pill sits flush-right and lifts up to sit
   level with the big score number rather than dropping to its baseline (Adam 2026-10-31). */
.theme-dustrocket .dr-autonomy-card .autonomy-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .3rem}
.theme-dustrocket .dr-autonomy-card .autonomy-score-n{font-size:2rem;font-weight:700;line-height:1;color:#1f7d7b}
.theme-dustrocket .dr-autonomy-card .autonomy-score-max{color:#8a8578;font-size:1rem;font-weight:600}
.theme-dustrocket .dr-autonomy-card .autonomy-tier{margin-left:auto;background:#ff6f59;color:#fff;border-radius:999px;
  padding:.18rem .66rem;font-size:.82rem;font-weight:700}
.theme-dustrocket .dr-autonomy-card .autonomy-method{color:#4a463d;font-size:.88rem;line-height:1.45;margin:.1rem 0 .7rem}
.theme-dustrocket .dr-autonomy-card .autonomy-comps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.theme-dustrocket .dr-autonomy-card .autonomy-comps li{border-top:1px dashed #ece3cf}
.theme-dustrocket .dr-autonomy-card .autonomy-comps li:first-child{border-top:0}
/* each row is a native <details>; the summary is the clickable row (label + points + chevron), collapsed by default */
.theme-dustrocket .dr-autonomy-card .ac-row>summary{display:flex;align-items:center;gap:.5rem;font-size:.95rem;
  padding:.45rem 0;cursor:pointer;list-style:none}
.theme-dustrocket .dr-autonomy-card .ac-row>summary::-webkit-details-marker{display:none}
.theme-dustrocket .dr-autonomy-card .ac-label{color:#2a2620}
.theme-dustrocket .dr-autonomy-card .ac-pts{margin-left:auto;color:#1f7d7b;font-weight:600;font-variant-numeric:tabular-nums}
.theme-dustrocket .dr-autonomy-card .ac-chev{color:#8a8578;font-size:.8rem;transition:transform .12s ease;line-height:1}
.theme-dustrocket .dr-autonomy-card .ac-row[open]>summary .ac-chev{transform:rotate(180deg)}
.theme-dustrocket .dr-autonomy-card .ac-why{margin:0 0 .5rem;padding:.1rem .1rem .2rem;font-size:.85rem;line-height:1.45;color:#5a564c}
/* "Hands-off limitation" warnings: amber caution note under the component rows, so a high total can't hide a
   deal-breaker (e.g. no small-object avoidance). */
.theme-dustrocket .dr-autonomy-card .autonomy-warnings{list-style:none;margin:.7rem 0 0;padding:.5rem .7rem;
  background:#fff6e5;border:1px solid #f0d79a;border-radius:9px;display:grid;gap:.35rem}
.theme-dustrocket .dr-autonomy-card .autonomy-warnings li{font-size:.85rem;line-height:1.4;color:#7a5a12;
  padding-left:1.25rem;position:relative}
.theme-dustrocket .dr-autonomy-card .autonomy-warnings li::before{content:"\26A0";position:absolute;left:0;top:0}

@media(max-width:760px){
  .theme-dustrocket .dr-pc-autonomy-row{flex-direction:column;gap:14px}
  .theme-dustrocket .dr-pc-autonomy-row .dr-pc-col,
  .theme-dustrocket .dr-pc-autonomy-row .dr-autonomy-col{flex:1 1 auto}
}
/* Specialty Picks hub: three linked cards (the homepage tile target). Matches the atomic-age card look. */
.theme-dustrocket .specialty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:1.4rem 0}
.theme-dustrocket .specialty-card{display:flex;flex-direction:column;gap:.5rem;background:var(--cream2,#fbf3e4);border:2px solid #47635d;
  border-radius:16px;padding:1.1rem 1.2rem;text-decoration:none;color:#2a2620;box-shadow:3px 4px 0 rgba(31,77,72,.18);transition:transform .08s ease}
.theme-dustrocket .specialty-card:hover{transform:translate(-1px,-2px)}
.theme-dustrocket .specialty-card h3{margin:0;color:var(--brown,#7a4a2b);font-size:1.15rem}
.theme-dustrocket .specialty-card p{margin:0;font-size:.92rem;line-height:1.45;color:#4a463d}
.theme-dustrocket .specialty-card .specialty-go{margin-top:auto;color:#1f7d7b;font-weight:700;font-size:.9rem}
@media(max-width:760px){.theme-dustrocket .specialty-grid{grid-template-columns:1fr}}