/*
 * Listing cards, drawn the way the app draws them.
 *
 * Every number here is from the Flutter source rather than from taste:
 * ListingResultCard's own docstring specifies the result card down to the
 * hex codes, and QwVehicleCardShell + AppTheme give the carousel card.
 * Where the two disagreed with the app's older CSS exports the widget
 * wins, because the widget is what ships.
 *
 * The one deliberate difference is the arrangement: the app is a phone, so
 * its results are one column. Here the cards keep their exact geometry and
 * wrap into as many columns as the window allows, which at phone width is
 * the single column the app has.
 */

/* ------------------------------------------------------------------ */
/* The result card: used-car, new-car, rental and tour results.        */
/* 370x114, image 135x114 on the leading side.                         */
/* ------------------------------------------------------------------ */

.qw-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qw-result {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 114px;
  background: var(--brand-surface);
  border-radius: 12px;              /* AppTheme.cardRadius */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);   /* cardShadowStandard */
  overflow: hidden;
}

/* The whole card is one link: two links to the same place in one card
   splits the ranking signal and reads twice to a screen reader. */
.qw-result__link {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* The card's link is the title, stretched over the card. Anything else
   on the card that is itself a link or a button - the showrooms line,
   the heart - sits above that sheet and stays clickable. */
.qw-result__title[href] {
  color: inherit;
  text-decoration: none;
}

.qw-result__title[href]:hover { text-decoration: underline; }

.qw-result__title[href]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Above the title's stretched link, which covers the whole card. The
   location is in the flow and needs to be lifted; the heart is not, and
   lifting it the same way took its `position: absolute` away - so it
   stopped being pinned to the card's corner and floated to wherever the
   row's content happened to end. On the saved-ads screen that was 20px
   outside the card. Its own z-index already clears the link. */
.qw-result__location--link {
  position: relative;
  z-index: 1;
}

/* The heart sits over the picture's top-right, as it does on a product
   card; the picture is on the leading side of this one. */
.qw-result .qw-circlebtn--favourite {
  inset-inline-end: 10px;
  top: 10px;
}

.qw-result__media {
  position: relative;
  flex: 0 0 135px;                  /* image 135x114 */
  width: 135px;
  align-self: stretch;
  background: #2B3A55;              /* VehicleImagePlaceholder's first tint,
                                       so a slow image never flashes white */
  overflow: hidden;
}

.qw-result__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qw-result__body {
  flex: 1 1 auto;
  min-width: 0;                     /* or a long title stops the ellipsis */
  padding: 10px 12px;               /* AppTheme.cardPadding, plus the app's
                                       12 of horizontal breathing room */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Six, not two. The card is the app's fixed 114 and its four lines are
     66 tall, so at a 2px gap 42px of it was empty - 21 above the title
     and 21 under the meta, which read as a band of nothing at each end
     of every row. The lines take 12 of it back. */
  gap: 6px;
}

.qw-result__title {
  margin: 0;
  font-size: 18px;                  /* Inter Bold 18 */
  font-weight: 700;
  line-height: 1.2;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qw-result__price {
  margin: 0;
  font-size: 18px;                  /* Inter Bold 18 */
  font-weight: 700;
  line-height: 1.2;
  color: #333333;
  white-space: nowrap;
}

.qw-result__location {
  margin: 0;
  font-size: 12px;                  /* Inter Regular 12 */
  line-height: 1.3;
  color: var(--brand-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qw-result__meta {
  margin: 0;
  font-size: 11px;                  /* Inter Regular 11 */
  line-height: 1.3;
  color: var(--brand-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The separator the app draws between facts, in its own grey. */
.qw-result__meta .sep,
.qw-card__meta .sep {
  color: #D1D5DB;
  padding: 0 4px;
}

.qw-result__rating {
  font-weight: 700;
  color: var(--brand-text-muted);
}

/* ------------------------------------------------------------------ */
/* Badges over the image. A featured listing shows the star and never    */
/* the text pill - the app's rule everywhere.                            */
/* ------------------------------------------------------------------ */

.qw-badges {
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1;
}

.qw-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-surface);
  background: var(--brand-button-blue);
  line-height: 1.4;
  white-space: nowrap;
}

.qw-badge--urgent {
  background: #B71C1C;
}

.qw-badge--featured {
  background: #B71C1C;              /* the small red star badge */
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.qw-badge--certified {
  background: #0F7B3E;
}

/* The photo-count pill, bottom-left, black at 50%. */
.qw-photocount {
  position: absolute;
  inset-inline-start: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-surface);
  background: rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ */
/* The carousel card: home-page strips and inventory grids.             */
/* 224x278, image 128 tall across the top.                              */
/* ------------------------------------------------------------------ */

/*
 * A strip, not a grid. The app's landing sections are horizontal
 * carousels - `scrollDirection: Axis.horizontal` with a
 * `SizedBox(width: 12)` between cards - so the cards keep their 224 width
 * and the row scrolls sideways rather than wrapping into rows of them.
 *
 * Snap on proximity rather than mandatory: a mandatory snap fights a
 * trackpad flick and makes a long strip feel sticky.
 */
.qw-cards {
  display: flex;
  gap: 12px;                         /* the app's separator width */
  padding: 0 0 4px;                  /* room for the shadow, not a scrollbar */
  margin: 16px 0 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.qw-cards::-webkit-scrollbar {
  display: none;
}

.qw-cards > .qw-card {
  flex: 0 0 224px;                   /* AppTheme.cardCarouselWidth */
  width: 224px;
  scroll-snap-align: start;
}

/* Every other card that can appear in a strip. Without a basis a flex
   child shrinks to its content, which squeezed an inventory strip's
   service cards to about 95px and broke every title across three
   lines. The service and product cards are 170 in the app, the vehicle
   cards 224. */
.qw-cards > .qw-service-card,
.qw-cards > .qw-product {
  flex: 0 0 170px;
  width: 170px;
  scroll-snap-align: start;
}

.qw-cards > .qw-newcar,
.qw-cards > .qw-rental,
.qw-cards > .qw-tour,
.qw-cards > .qw-upcoming {
  flex: 0 0 224px;
  width: 224px;
  scroll-snap-align: start;
}

/* The "Showrooms with Stock" strip on a new-car page. Its markup arrived
   with the strip (87ddbb9) but no rules ever did, so the seven showrooms
   ran together as one line of links. Same card standard as everything
   else on the shelf: 224 wide, the surface, the 12px radius and the
   standard shadow; the name, the city, the number, and Book Test Drive
   pinned to the foot so a one-line name and a two-line name end level. */
.qw-cards > .qw-stockshowroom {
  flex: 0 0 224px;
  width: 224px;
  scroll-snap-align: start;
}

.qw-stockshowroom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--brand-surface);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.qw-stockshowroom__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
  line-height: 1.33;
  color: var(--brand-heading-gray);
  text-decoration: none;
}

.qw-stockshowroom__city {
  font-size: 14px;
  color: var(--brand-text-secondary);
}

.qw-stockshowroom__phone {
  font-size: 14px;
  color: var(--brand-action-blue);
  text-decoration: none;
}

.qw-stockshowroom__book {
  display: block;
  margin-top: auto;                     /* pinned to the foot of the card */
  padding: 10px 12px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-action-blue);
  color: var(--brand-surface);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.qw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 224px;                /* kUsedCarPreviewCardHeight */
  background: var(--brand-surface);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.qw-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.qw-card__media {
  position: relative;
  height: 128px;                    /* kVehicleCardImageHeight */
  flex: 0 0 128px;
  background: #2B3A55;
  overflow: hidden;
}

.qw-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qw-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;                    /* AppTheme.cardPadding */
  display: flex;
  flex-direction: column;
  /* One gap, the same on every car card. spaceBetween divided each
     card's own leftover instead, so a used car sat at 3.1 and a new car
     at 1.7 - the card that had more to say had less room between its
     lines. The height stays a floor so nothing is clipped. */
  justify-content: center;
  gap: 3px;
}

.qw-card__title {
  margin: 0;
  font-size: 16px;                  /* AppTheme.cardTitle, fontMd */
  font-weight: 400;                 /* w600 -> w400, with the app */
  line-height: 1.15;
  color: var(--brand-heading-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qw-card__price {
  margin: 0;
  font-size: 16px;                  /* AppTheme.cardPrice */
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand-heading-gray);
  white-space: nowrap;
}

.qw-card__location {
  margin: 0;
  font-size: 14px;                  /* AppTheme.fontBody */
  line-height: 1.15;
  color: var(--brand-label-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qw-card__meta {
  margin: 0;
  font-size: 12px;                  /* AppTheme.fontSm */
  line-height: 1.15;
  color: var(--brand-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An unrated listing shows 0.0 (0) rather than dropping the star, so the
   line is always in the same place - the app's rule, and the reason the
   rental cards used to lose their year and fuel type along with it. */
.qw-star {
  color: var(--brand-button-blue);
  font-size: 12px;
}

/* Hover is a website affordance the phone has no need for; the shadow is
   the app's own elevation, lifted one step. */
.qw-result:hover,
.qw-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

@media (prefers-reduced-motion: no-preference) {
  .qw-result,
  .qw-card {
    transition: box-shadow 120ms ease;
  }
}

/* A product with no photograph: its category, drawn, on the app's navy. */
.qw-result__media--glyph,
.qw-card__media--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-chrome-navy);
  color: rgba(255, 255, 255, 0.7);   /* Colors.white70 */
}

/* ------------------------------------------------------------------ */
/* The detail page's photograph: QwImageGallery, 300 tall.             */
/* ------------------------------------------------------------------ */

.qw-hero {
  margin: 12px 0 20px;
  border-radius: 12px;
  overflow: hidden;
  background: #2B3A55;
  aspect-ratio: auto;
}

.qw-hero img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

@media (max-width: 640px) {
  .qw-hero img {
    height: 220px;
  }
}

.qw-hero--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: var(--brand-chrome-navy);
  color: rgba(255, 255, 255, 0.7);
}

.qw-hero--glyph svg {
  width: 96px;
  height: 96px;
}

/* ------------------------------------------------------------------ */
/* Category tiles: the app's FilterCard - icon over an 11px label,      */
/* 80 tall, radius 6, no border.                                        */
/* ------------------------------------------------------------------ */

/*
 * Two rows, always, and page through the rest - the app's
 * ResponsiveTwoRowGrid, whose whole purpose is a grid that stays exactly
 * two rows tall and pages over the overflow rather than growing downward.
 *
 * Column flow with a fixed two-row track does that in CSS alone: the tiles
 * fill down then across, the strip scrolls sideways, and scroll-snap makes
 * it page rather than drift. Sixty-four brands are then two rows and eight
 * pages, not eight rows.
 */
/*
 * Two rows, filled across and then down.
 *
 * Checked against the running Flutter web rather than inferred: its first
 * row reads Toyota, SUV, Doha, Under 5K, Sedan, Nissan, Toyota Land
 * Cruiser, Sports and the second picks up at Al Rayyan. Column flow put
 * the same sixteen items in a different order on the screen, which is the
 * kind of thing only looking at the two catches.
 *
 * Eight columns at full width, the app's own maxColumns, and the row
 * height is its itemHeight.
 */
/*
 * A page of tiles: eight columns by two rows, filled across then down -
 * checked against the running app, whose first row reads Toyota, SUV,
 * Doha, Under 5K and whose second picks up at Al Rayyan.
 */
.qw-tiles {
  display: grid;
  /*
   * Two rows, always - the rule the strip exists for. The grid flows down
   * its columns, so a narrow screen loses columns and scrolls sideways
   * rather than growing a third row. Fixing eight columns and letting
   * them wrap was what broke it: at four columns a page of sixteen came
   * out four rows deep.
   */
  grid-template-rows: repeat(2, 80px);  /* rows: 2, itemHeight: 80 */
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 1fr);
  gap: 8px;                             /* CategoryIconGrid's gap */
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

/*
 * The pager the two-row rule needs. ResponsiveTwoRowGrid is the only one
 * of the app's grid helpers with a hard row cap: it pages over the
 * overflow rather than growing downward, so 73 brands are two rows and
 * five pages, not ten rows.
 */
.qw-pager {
  /* No display here. The panel that is hidden is hidden by
     `.qw-cattabs__panel { display: none }`, and this rule sits after it
     in the file, so a `display: flex` on the pager would have beaten it
     on source order and shown all seven panels at once. The open panel
     gets its flex from the :has() rule below. */
  gap: 16px;
  margin: 12px 0 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.qw-pager::-webkit-scrollbar {
  display: none;
}

@media (max-width: 664px) {
  /* Narrower columns so more of the two rows stays on screen; the row
     count does not change. */
  .qw-tiles { grid-auto-columns: minmax(92px, 1fr); }
}

@media (max-width: 380px) {
  /* Narrower again, and still by the auto columns. This set an explicit
     three-column template instead, which a strip that flows down its
     columns cannot use: the items fill those three first, every column
     after them is implicit at 92px, and the free space that the three
     `1fr` columns were to share is then negative - so all three resolved
     to 0px and their six tiles stacked on top of each other at the left
     edge. */
  .qw-tiles { grid-auto-columns: minmax(84px, 1fr); }
}

.qw-tiles::-webkit-scrollbar {
  display: none;
}

.qw-tiles > .qw-tile {
  scroll-snap-align: start;
}

/* The dots under the strip: 6px circles, 2px apart, the app's own sizes.
   Rendered by the page and updated by a small script; with no script they
   are simply absent and the strip still scrolls. */
.qw-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  /* All four sides: a list carries the browser's own 16px below it, and
     that sat under the dots as a second gap nobody had asked for - the
     tiles ended 57px above the next block where every other pair of
     blocks is 24 apart. */
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* A `display` rule beats the `hidden` attribute, so without this the six
   dot rows belonging to the closed tabs each kept their margin and left
   122px of nothing between the tiles and the next section. */
.qw-dots[hidden] {
  display: none;
}

.qw-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(195, 195, 195, 0.3);  /* brandFacetBorder at 30% */
  cursor: pointer;
}

.qw-dot[aria-current="true"] {
  background: var(--brand-button-blue);
}

.qw-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;                          /* the app's 4px between icon and label */
  height: 80px;
  padding: 6px;
  background: var(--brand-surface);
  /* Six, not the cards' twelve. The app's filter and menu tiles are a
     smaller radius than its listing cards, on purpose. */
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
}

.qw-tile__icon {
  color: var(--brand-text-secondary);
  flex: 0 0 auto;
}

/* Flags keep their own colours: a tinted flag is not a flag. */
.qw-tile__icon--asset {
  width: 32px;
  height: 24px;
  object-fit: contain;
}

.qw-tile__label {
  font-size: 11px;                   /* AppTheme.fontXs */
  font-weight: 500;
  line-height: 1.2;
  color: var(--brand-text-secondary);
  /* Two lines, not an ellipsis: the app wraps "Toyota Land Cruiser" onto
     a second line and a truncated brand is a brand you cannot read. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.qw-tile:hover .qw-tile__label {
  color: var(--brand-link-blue);
}

/* ------------------------------------------------------------------ */
/* Explore QatarWheels Services.                                        */
/*                                                                      */
/* One gap token, on the product owner's directive: every spacing,      */
/* padding and inset inside this card is the same 12. It was six        */
/* different numbers in the app before somebody measured them.          */
/* ------------------------------------------------------------------ */

.qw-services {
  --services-gap: 12px;
  margin: 24px 0;
}

/* Outlined, not filled: white ground, #06025E border and text. */
.qw-services__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid #06025E;
  border-radius: 8px;
  background: var(--brand-surface);
  color: #06025E;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.qw-services__cta:hover {
  background: rgba(6, 2, 94, 0.04);
}

.qw-services__tint {
  margin-top: var(--services-gap);
  padding: var(--services-gap);
  border-radius: 12px;
  background: rgba(197, 218, 250, 0.56);
}

.qw-services__heading {
  margin: 0 0 var(--services-gap);
  font-size: 16px;
  font-weight: 600;                  /* 600, not the 700 it was built as */
  color: var(--brand-heading-gray);
}

.qw-services__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--services-gap);
}

.qw-service {
  display: flex;
  align-items: center;
  gap: var(--services-gap);
  /* The floor the three tiles share, so they are equal because the layout
     says so rather than because their copy wraps the same way. */
  min-height: 88px;
  padding: var(--services-gap);
  border-radius: 12px;
  background: var(--brand-surface);
  text-decoration: none;
}

.qw-service--wide {
  margin-top: var(--services-gap);
}

.qw-service--trailing {
  justify-content: space-between;
}

.qw-service__icon {
  flex: 0 0 auto;
  /* The source assets are recoloured to this flat grey in the app; the
     filter reproduces it here without editing the files, so a redrawn
     icon dropped in later still matches. */
  filter: grayscale(1) brightness(0.62);
}

.qw-service__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.qw-service__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-service__subtitle {
  font-size: 12px;
  color: #868687;
}

/* ------------------------------------------------------------------ */
/* UnderlineTabRow: white ground, Inter Medium 14 throughout - the same */
/* weight active or not - #7A7A7A inactive, #06025E active with a 2px   */
/* underline spanning that tab's own width, over a #E0E0E0 divider.     */
/*                                                                      */
/* Seven tabs, so the app's rule makes this the scrolling variant       */
/* rather than the equal-width one (equal width at four or fewer).      */
/* ------------------------------------------------------------------ */

.qw-cattabs {
  margin: 12px 0 0;
}

.qw-cattabs__strip {
  display: flex;
  /* Spread, not packed left - which is how the running app draws seven
     tabs across the width. */
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
  border-bottom: 1px solid #E0E0E0;
  scrollbar-width: none;
}

.qw-cattabs__strip::-webkit-scrollbar {
  display: none;
}

/* Hidden from sight, not from the keyboard: display:none would drop the
   whole strip out of the tab order. */
.qw-cattabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qw-cattabs__tab {
  flex: 0 0 auto;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;              /* sit the 2px on the 1px divider */
  font-size: 14px;
  font-weight: 500;                 /* Inter Medium, active or not */
  color: #7A7A7A;
  white-space: nowrap;
  cursor: pointer;
}

/* The active tab. `:has()` rather than a sibling combinator because the
   labels live inside the strip while the radios sit outside it, next to
   the panels - and a sibling selector cannot climb out of the strip. */
/* Every panel is hidden; the checked tab's is put back below. This rule
   went missing when the pager replaced the old grid block, which left
   all seven stacked down the page. */
.qw-cattabs__panel {
  display: none;
}

/* The open one. `:has()` rather than a sibling combinator because the
   labels live inside the strip while the radios sit outside it. */
.qw-cattabs:has(#cattab-0:checked) .qw-cattabs__panel--0,
.qw-cattabs:has(#cattab-1:checked) .qw-cattabs__panel--1,
.qw-cattabs:has(#cattab-2:checked) .qw-cattabs__panel--2,
.qw-cattabs:has(#cattab-3:checked) .qw-cattabs__panel--3,
.qw-cattabs:has(#cattab-4:checked) .qw-cattabs__panel--4,
.qw-cattabs:has(#cattab-5:checked) .qw-cattabs__panel--5,
.qw-cattabs:has(#cattab-6:checked) .qw-cattabs__panel--6 {
  display: flex;
}

/* A section's heading and its "see all", the app's SectionHeader. */
.qw-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.qw-sectionhead h2 {
  margin: 0;
}

.qw-sectionhead a {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  /* The app's own action blue, which its SectionHeader draws View All
     in - not the generic link blue. */
  color: var(--brand-action-blue);
  text-decoration: none;
}

.qw-poweredby {
  margin: 0 0 2px;
  text-align: center;
  font-size: 12px;
  color: var(--brand-text-muted);
}


/* ==================================================================== */
/* QwCardShell - the shared shell every card sits on.                    */
/*                                                                       */
/* White surface, cardRadius, cardShadowStandard, cardPadding around the */
/* content when there is an image slot. It exists for the reason the     */
/* app's does: five cards were each carrying their own copy of this and  */
/* had drifted - one on radius 6, another on a heavier legacy shadow.    */
/* ==================================================================== */

.qw-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--brand-surface);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);   /* cardShadowStandard */
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.qw-shell__image {
  position: relative;
  display: block;
  flex: 0 0 auto;
  background: #2B3A55;
  overflow: hidden;
}

.qw-shell__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qw-shell__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;                        /* AppTheme.cardPadding */
  /* The app's card body is a Column with spaceBetween, which is what
     stops the lines bunching at the top of a fixed-height card and
     leaving a band of nothing underneath. */
  justify-content: space-between;
  gap: 4px;
}

.qw-shell:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

/* -------------------------------------------------------------------- */
/* Auto Store - AutoStoreProductCard: 172x244, image 128.                */
/* -------------------------------------------------------------------- */

.qw-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* In the grid it fills its column; 172 is the width it takes in a
   carousel, where the row scrolls sideways and every card is that wide.
   Held to 172 inside the grid as well, it left the rest of a wider column
   empty - on a phone that is half the row beside every product. */
.qw-products > .qw-product {
  flex-basis: auto;
  width: 100%;
}

@media (max-width: 560px) {
  /* Two to a row. `auto-fill` needs 356px for two 172px columns and a
     phone's content box is 343px at 375px wide, so it dropped to one
     column - one 172px card with the rest of the row blank beside it. */
  .qw-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The store card is the compact one: the landings wrap it in a SizedBox
   of cardCarouselWidthCompact, not the 224 the car cards use. Without a
   basis of its own it collapsed to whatever the flex row would give it,
   which put eleven 65px slivers where the app shows five cards. */
.qw-product {
  flex: 0 0 172px;                      /* AppTheme.cardCarouselWidthCompact */
  width: 172px;
  min-height: 244px;
  display: flex;
}
.qw-product__shell { width: 100%; }
.qw-product .qw-shell__image { height: 128px; }

.qw-product__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--brand-chrome-navy);
  color: rgba(255, 255, 255, 0.7);
}

/* Two lines reserved whether or not the title wraps, so a row of cards
   is a row rather than a staircase. 14 * 1.4 * 2. */
.qw-product__title {
  height: 39.2px;
  overflow: hidden;
  /* AppTheme.cardTitleCompactOf: fontBody at w400 in textHeading. The
     card was drawn from an old CSS export that said Medium 14 #191C1E;
     the widget it actually renders says otherwise. */
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 400;                     /* w600 -> w400, with the app */
  line-height: 1.4;                     /* the style's own height */
  color: var(--brand-heading-gray);     /* QwColors.textHeading #1F2937 */
}

.qw-product__price {
  margin-top: 2px;
  font-size: 16px;                      /* Inter SemiBold 16 */
  font-weight: 600;
  color: #1F2937;
}

.qw-product__was {
  margin-inline-start: 6px;
  font-size: 12px;                      /* Inter Regular 12 */
  font-weight: 400;
  color: #737785;
}

.qw-product__rating,
.qw-service-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;                      /* Inter Regular 12 */
  color: #353535;
}

.qw-product__delivery {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 9px;                       /* Inter Regular 9 */
  color: var(--brand-text-muted);
}

.qw-product__delivery svg { color: var(--brand-label-gray); }

/* The flush-left ribbon: square on the outside edge, rounded on the
   inside, 11 from the top of the image. */
.qw-ribbon {
  position: absolute;
  inset-inline-start: 0;
  top: 11px;
  padding: 2px 6px;
  border-radius: 0 4px 4px 0;
  background: #BA1A1A;
  color: var(--brand-surface);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
}

/* -------------------------------------------------------------------- */
/* Auto Service - ServiceListingCard: image 170/128, price 20.           */
/* -------------------------------------------------------------------- */

.qw-services-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.qw-service-card { display: flex; }
.qw-service-card__shell { width: 100%; }
.qw-service-card .qw-shell__image { aspect-ratio: 170 / 128; }

.qw-service-card__title {
  height: 39.2px;
  overflow: hidden;
  font-size: 14px;                      /* AppTheme.cardTitleCompact */
  font-weight: 400;                     /* the widget, not the old export */
  line-height: 1.4;
  color: #191C1E;
}

.qw-service-card__price {
  margin-top: 4px;
  font-size: 20px;                      /* Inter Bold 20 - corrected up
                                           from 16 in the app */
  font-weight: 700;
  color: #1F2937;
}

.qw-service-card__status,
.qw-service-card__location {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;                      /* Inter Regular 12 */
  color: var(--brand-text-muted);
}

.qw-service-card__status { color: #B71C1C; }
.qw-service-card__status.is-open { color: #0F7B3E; }

.qw-service-card__tag {
  margin-top: 2px;
  font-size: 9px;                       /* Inter Regular 9 */
  color: #003F9C;
}

/* The app's own Book button: full width, 36 tall, outlined in the action
   blue with its label in fontSm at w600. */
/* The card's own link is its title, stretched over the card, so the
   Book button beside it stays a link of its own. */
.qw-service-card__title[href] {
  color: inherit;
  text-decoration: none;
}

.qw-service-card__title[href]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.qw-service-card__book {
  position: relative;
  z-index: 1;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-top: 10px;
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;                   /* AppTheme.radiusMd */
  color: var(--brand-action-blue);
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 600;
}

.qw-shell:hover .qw-service-card__book {
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}

/* The star is blue, not gold. */
.qw-star { color: #003F9C; }
.qw-star--filled { color: #003F9C; }

/* -------------------------------------------------------------------- */
/* Showrooms - BusinessListingCard: image 192, name 18 over two lines.   */
/* -------------------------------------------------------------------- */

.qw-businesses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.qw-business {
  /* A column: image, details, then the two actions. It was a row,
     which put the action block alongside the card. */
  display: flex;
  flex-direction: column;
}
.qw-business__shell { width: 100%; }
.qw-business .qw-shell__image { height: 192px; }

/* The count reads under the name, not off to its right - which is where
   BusinessListingCard puts it, and its own comment says why: a long name
   and a chip fighting for one row. It keeps a fixed slot either way, so a
   business reporting no count leaves the card the same height as one
   that does. */
.qw-business__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.qw-business__name {
  flex: 1 1 auto;
  min-width: 0;
  /* Two lines at most, but only as tall as the name actually is: the
     fixed 48 left a band of nothing under every one-line name. The grid
     already equalises the cards in a row. */
  max-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  line-height: 1.33;
  color: var(--brand-heading-gray);
}

.qw-business__metric {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-surface-tint);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-secondary);
}

.qw-business__row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 16px;                      /* AppTheme.fontMd */
  color: var(--brand-text-secondary);
}

.qw-business__row + .qw-business__row { margin-top: 4px; }
.qw-business__row.is-open { color: #0F7B3E; }

.qw-business__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;
  color: #353535;
}

/* -------------------------------------------------------------------- */
/* Rentals and tours - both 270 tall, in the landing strips.             */
/* -------------------------------------------------------------------- */

.qw-rental,
.qw-tour,
.qw-newcar,
.qw-upcoming {
  flex: 0 0 224px;
  width: 224px;
  scroll-snap-align: start;
  display: flex;
}

.qw-rental__shell,
.qw-tour__shell,
.qw-newcar__shell,
.qw-upcoming__shell { width: 100%; }

/* The app's own heights, restored - kRentalPreviewCardHeight for the
   rental and tour cards, kExclusiveNewCarCardHeight for the new-car one.
   What was actually wrong was not the height but the packing: the lines
   sat in a block at the top with the leftover height below them. The
   app's card body is a spaceBetween column, so the lines spread down the
   card instead. That is set on the content below. */
/* Floors, not fixed heights: the gap below is a real 3px, so a card
   with one row more grows rather than losing the row off the bottom.
   kRentalPreviewCardHeight is 260, but the constant says so itself:
   "sized when a rental could still carry three price rows ... could
   come down to 224 to match". At 3px gaps a tour deal needs 235, and
   260 left 25px of nothing under the last line. */
.qw-rental, .qw-tour { min-height: 235px; }
.qw-upcoming { min-height: 191px; }       /* kUpcomingCarPreviewCardHeight */
.qw-newcar { min-height: 224px; }         /* kExclusiveNewCarCardHeight */

.qw-rental .qw-shell__content,
.qw-tour .qw-shell__content,
.qw-newcar .qw-shell__content,
.qw-upcoming .qw-shell__content { justify-content: center; gap: 3px; }

/* The new car's price had no line-height of its own, so it inherited the
   page's 1.55 and stood 6px taller than the used car's identical row. */
.qw-newcar__price { line-height: 1.15; }

.qw-rental .qw-shell__image,
.qw-tour .qw-shell__image,
.qw-newcar .qw-shell__image,
.qw-upcoming .qw-shell__image { height: 128px; }

.qw-rental__title,
.qw-tour__title,
.qw-newcar__title,
.qw-upcoming__title {
  font-size: 16px;                      /* AppTheme.cardTitle */
  font-weight: 400;                     /* w600 -> w400, with the app */
  line-height: 1.15;
  color: var(--brand-heading-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two stacked rates, which is what the rental export asks for. */
.qw-rental__price,
.qw-tour__price {
  font-size: 16px;                      /* AppTheme.cardPrice */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-rental__city,
.qw-tour__meta {
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);       /* QwColors.textLabel */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One combined row: the rating in Inter Bold 12 #353535 behind a blue
   star, then "Year | Fuel" in Inter Regular 14 var(--brand-text-muted) - the rental
   export's own description of this line. */
.qw-rental__meta {
  display: flex;
  align-items: baseline;
  gap: 0;                               /* the widget spaces its own parts */
  font-size: 14px;
  color: var(--brand-text-muted);
  white-space: nowrap;
  overflow: hidden;
}

/* The star: 13px in valueBlue, 2px clear of the rating. */
.qw-rental__meta .qw-star {
  font-size: 13px;
  margin-inline-end: 2px;               /* SizedBox(width: 2) */
}

/* The rating: fontSm in textPrimary, at the widget's own weight. */
.qw-rental__rating {
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 400;
  color: #353535;                       /* QwColors.textPrimary */
  margin-inline-end: 4px;               /* SizedBox(width: 4) */
}

/* The facts run, bar included, in textLabel at fontBody. */
.qw-rental__facts {
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);       /* QwColors.textLabel */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Superseded by the QwCardMetaLine rule above: the widget sets no weight
   on the rating, so it renders at the regular one. This block stayed
   behind and put Bold back wherever it applied. */

.qw-tour__name {
  font-size: 11px;                      /* AppTheme.fontXs, Medium */
  font-weight: 500;
  line-height: 1.15;
  color: #003F9C;
}

.qw-newcar__link,
.qw-upcoming__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--brand-link-blue);
  text-decoration: underline;
}

/* -------------------------------------------------------------------- */
/* Videos - MoreVideoCard: 366x98, its own border, thumb 128x80.         */
/* This section is a vertical list in the app, not a horizontal strip.   */
/* -------------------------------------------------------------------- */

.qw-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(366px, 100%), 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.qw-video {
  min-height: 98px;
  background: var(--brand-surface);
  border: 1px solid #C3C6D6;
  border-radius: 8px;
  overflow: hidden;
}

.qw-video__link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 9px;
  color: inherit;
  text-decoration: none;
}

.qw-video__thumb {
  position: relative;
  flex: 0 0 128px;
  width: 128px;
  height: 80px;
  border-radius: 4px;
  background: #2B3A55;
  overflow: hidden;
}

.qw-video__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qw-video__play {
  position: absolute;
  inset-inline-end: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--brand-surface);
}

.qw-video__body { min-width: 0; }

.qw-video__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  color: #191C1E;
}

.qw-video__tag {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #737785;
}

/* -------------------------------------------------------------------- */
/* Blog and news - BlogArticleCard: 370x114, radius 8, lighter shadow.   */
/* -------------------------------------------------------------------- */

.qw-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.qw-article {
  min-height: 114px;
  background: var(--brand-surface);
  border-radius: 8px;
  /* This card's own, lighter than the listing cards'. */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.qw-article__link {
  display: flex;
  align-items: stretch;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.qw-article__thumb {
  flex: 0 0 114px;
  width: 114px;
  background: #2B3A55;
}

.qw-article__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qw-article__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

/* Plain uppercase text, not a coloured pill. */
.qw-article__category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #003F9C;
}

/* Article cards resolve through the same cardTitle in the app, so they
   change with the car cards. */
.qw-article__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #191C1E;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qw-article__meta {
  font-size: 11px;
  color: #737785;
}

/* The 4px dot the app puts between meta parts. */
.qw-article__meta .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 6px;
  border-radius: 50%;
  background: #C3C6D6;
  vertical-align: middle;
}

/* A strip of product cards is 172 wide per card, not the vehicle 224. */
.qw-cards--products > .qw-product {
  flex: 0 0 172px;
  width: 172px;
  scroll-snap-align: start;
}

/* The featured star badge: a small dark square with a star, top-left of
   the image - what the running app draws in place of a text pill. */
.qw-starbadge {
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Square, and the same height as the text badge it stands in for:
     .qw-badge is 2px of padding around a 14px line, so 18. At 22 the star
     sat a little taller than every badge beside it on the same corner. */
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--brand-chrome-navy);
  color: var(--brand-surface);
  z-index: 1;
}


/* ------------------------------------------------------------------ */
/* The Auto Store card's two circles: a favourite heart in the image's   */
/* top-right, and add-to-cart pinned to the card's bottom-right - the    */
/* card's, not the image's, which the app records as a product-owner     */
/* correction. Both 32x32, per PLUS BUTTON.txt: rgba(66,70,84,0.1) fill, */
/* 1px solid rgba(136,102,136,0.3), 0 1px 2px rgba(0,0,0,0.05), and a    */
/* flat var(--brand-label-gray) glyph.                                                   */
/* ------------------------------------------------------------------ */

.qw-circlebtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(66, 70, 84, 0.1);
  border: 1px solid rgba(136, 102, 136, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--brand-label-gray);
  z-index: 2;
}

.qw-circlebtn--favourite {
  inset-inline-end: 8px;
  top: 8px;
  background: rgba(255, 255, 255, 0.85);
}

/* The heart is a submit button in a form now, not a span. The form is
   only a wrapper - the button positions itself against the card. */
.qw-product__fav { display: contents; }

button.qw-circlebtn { cursor: pointer; }

/* Saved, and it says so: filled, in the same red the app fills it. */
.qw-circlebtn--favourite.is-saved { color: var(--brand-status-closed); }

/* The plus wearing its count, as the app's does. */
.qw-circlebtn--cart.is-incart {
  border-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
}

.qw-circlebtn__count { font-size: 14px; font-weight: 700; }

/* One line of the basket, as CartItemGroup draws it: the seller over a
   row of picture, title, stepper and price, then that line's own facts. */
.qw-cartline {
  padding: 16px 0;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-cartline__seller {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.qw-cartline__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.qw-cartline__photo {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  background: var(--brand-surface-tint, #F2F6FD);
  color: var(--brand-action-blue);
  overflow: hidden;
}

.qw-cartline__photo svg { width: 40px; height: 40px; }

.qw-cartline__off {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  padding: 2px 4px;
  background: var(--brand-status-closed);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.qw-cartline__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--brand-heading-gray);
}

.qw-cartline__prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.qw-cartline__was { font-size: 12px; color: var(--brand-text-muted); }

@media (max-width: 560px) {
  /* The line wraps rather than squeezing. Four things share this row -
     the photograph and the counter are fixed widths and the price will
     not break, so the title was the only one that could give, and on a
     320px screen it gave everything: it measured 0px wide, the product
     had no name at all, and the price ran off the edge regardless. */
  .qw-cartline__row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .qw-cartline__title { flex: 1 1 160px; }

  /* Against the right edge, wherever it lands. */
  .qw-cartline__prices { margin-inline-start: auto; }
}

.qw-cartline__facts,
.qw-carttotals {
  margin: 8px 0 0;
}

.qw-cartline__facts > div,
.qw-carttotals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.qw-cartline__facts dt,
.qw-carttotals dt {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.qw-cartline__facts dd,
.qw-carttotals dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}


.qw-carttotals__total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--brand-hairline);
}

.qw-carttotals__total dt,
.qw-carttotals__total dd {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-voucher__prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  color: var(--brand-text-muted);
  font-size: 13px;
}

/* The bar at the foot: the total on its own line - label at one end,
   amount at the other - and the button under it. */
.qw-cartfoot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 10px;
}

.qw-cartfoot__label { font-size: 13px; color: var(--brand-text-muted); }
.qw-cartfoot__total { font-size: 16px; font-weight: 700; }

/* Total items: the label, then the count at the row's end, like every
   other line of the summary it heads. */
.qw-carttotals__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

/* The basket's own counter: minus, the number, plus. The app draws it as
   one pill with a hairline round it. */
.qw-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 96px;
  height: 40px;
  padding: 0 4px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;
  background: var(--brand-surface);
}

.qw-qty__btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--brand-button-blue);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.qw-qty__count {
  min-width: 20px;
  color: var(--brand-button-blue);
  text-align: center;
  font-weight: 700;
}

.qw-circlebtn--cart {
  inset-inline-end: 8px;
  bottom: 8px;
  background: rgba(255, 255, 255, 0.95);
}

.qw-product { position: relative; }

/* Every card that carries a heart is the box the heart positions
   against. .qw-result already declares it; these did not. */
.qw-rental,
.qw-tour,
.qw-service-card { position: relative; }

.qw-rental .qw-circlebtn--favourite,
.qw-tour .qw-circlebtn--favourite,
.qw-service-card .qw-circlebtn--favourite {
  inset-inline-end: 10px;
  top: 10px;
}


/* ------------------------------------------------------------------ */
/* Car Comparison - CarComparisonPreviewCard from the New Cars landing. */
/* Two cars over a 128-tall split image row, a 28x28 VS badge on the    */
/* seam, their names underneath.                                        */
/* ------------------------------------------------------------------ */

.qw-comparison {
  flex: 0 0 224px;                      /* AppTheme.cardCarouselWidth */
  width: 224px;
  list-style: none;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
  overflow: hidden;
}

.qw-comparison__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.qw-comparison__images {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  height: 128px;
  background: var(--brand-hairline);
}

.qw-comparison__img {
  width: 100%;
  height: 128px;
  object-fit: cover;
}

/* Centred on the seam between the two halves. */
.qw-comparison__vs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-action-blue);   /* QwColors.actionFill */
  color: var(--brand-surface);
  font-size: 12px;                      /* AppTheme.fontXs */
  font-weight: 800;
  line-height: 1;
}

.qw-comparison__names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

.qw-comparison__name {
  font-size: 14px;                      /* AppTheme.fontSm */
  font-weight: 600;
  color: var(--brand-heading-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qw-comparison__name:last-child {
  text-align: end;
}


/* ------------------------------------------------------------------ */
/* The landing search bar. The app shows one under the chip row on      */
/* every landing; this site had none.                                   */
/* ------------------------------------------------------------------ */

.qw-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0 14px;
  height: 48px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.qw-searchbar__icon {
  flex: 0 0 auto;
  color: var(--brand-label-gray);
}

.qw-searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--brand-heading-gray);
}

.qw-searchbar__input::placeholder {
  color: var(--brand-label-gray);
}


/* ------------------------------------------------------------------ */
/* The listing detail, built against the app's screen.                  */
/* ------------------------------------------------------------------ */

/* The price sits under the title in the app's near-black, not in link
   blue - blue reads as something to click. */
/* The line the app prints above the price in secondary grey - on a tour,
   the vehicle it is driven in, now that the heading names the deal. */
.qw-detail__subtitle {
  margin: 2px 0 0;
  font-size: 15px;                      /* AppTheme.fontMd */
  font-weight: 500;
  color: var(--brand-heading-gray);
}

.qw-detail__price {
  margin: 4px 0 6px;
  font-size: 24px;                      /* AppTheme.fontDisplay */
  font-weight: 800;                     /* AppTheme.detailPrice */
  color: var(--brand-heading-gray);
}

.qw-detail__place {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

/* Views/leads, same look as the location line above it. */
.qw-detail__metrics {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.qw-detail__metrics span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* The outlined Call under the location. */
/* The outlined Call: the same action colour, drawn as an outline. */
/* View Inventory and Call Now share a row - two full-width bars stacked
   pushed everything below them down a screen. */
/* Full width, like the chip row directly under it - capped at 480 the
   two buttons sat short of everything else on the page. */
.qw-bizactions {
  display: flex;
  gap: 12px;
  margin: 12px 0 0;
}

.qw-bizactions > a { flex: 1 1 0; margin: 0; }

.qw-callbtn {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--brand-action-blue);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.qw-callbtn:hover { background: #F5F6FA; }

/* The four facts: an icon over a value, no label. */
.qw-facttiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
}

/* BusinessStatChip: 10 of vertical padding, a hairline border at radius
   8, a fixed 20px slot holding either the value or an icon - both in the
   action blue - then a 2px gap and the label at fontXs on one line.
   The slot is fixed because a value (16 bold) and an 18px icon do not
   measure the same, and three chips in a row came out ragged without
   it; the label is one line because the opening hours wrapped to two and
   made its chip taller than the other two. */
.qw-facttiles > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  text-align: center;
}

.qw-facttiles > li > svg,
.qw-facttiles__big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  font-size: 16px;                       /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-action-blue);
}

.qw-facttiles svg { color: var(--brand-action-blue); }

.qw-facttiles > li > span:last-child {
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;                       /* AppTheme.fontXs */
  color: var(--brand-text-secondary);
}

/* The specification, two columns. */
.qw-specgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
  margin: 12px 0 28px;
}

.qw-specgrid dt {
  font-size: 13px;
  color: var(--brand-label-gray);
}

.qw-specgrid dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

/* A feature group, folded away behind its name. */
.qw-featuregroup {
  border-bottom: 1px solid var(--brand-hairline);
  padding: 4px 0;
}

.qw-featuregroup > summary {
  padding: 12px 0;
  font-weight: 600;
  color: var(--brand-heading-gray);
  cursor: pointer;
  list-style: none;
}

.qw-featuregroup > summary::-webkit-details-marker { display: none; }

/* The chevron, turned down when the group is open. */
.qw-featuregroup > summary::after {
  content: "";
  float: inline-end;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-right: 2px solid var(--brand-label-gray);
  border-bottom: 2px solid var(--brand-label-gray);
  transform: rotate(45deg);
}

.qw-featuregroup[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 8px;
}

/* The seller card. */
.qw-sellercard {
  margin: 28px 0 0;
  padding: 14px 16px;
  background: #E8EEFB;
  border-radius: 12px;
}

.qw-sellercard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.qw-sellercard__head h2 { margin: 0; }

.qw-sellercard__body {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--brand-surface);
  border-radius: 8px;
}

.qw-sellercard__name { margin: 0; font-weight: 600; color: var(--brand-heading-gray); }

.qw-reportad {
  margin: 22px 0;
  text-align: center;
}

.qw-reportad a {
  color: #C62828;
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* The contact bar, pinned to the foot as the app pins it.              */
/* ------------------------------------------------------------------ */

.qw-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 10px 16px 12px;
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-hairline);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.qw-actionbar__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--brand-action-blue);   /* QwColors.actionFill #06035E */
  color: var(--brand-surface);
  font-weight: 600;
  text-decoration: none;
}

.qw-actionbar__row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  max-width: 1100px;
  margin: 8px auto 0;
}

/* Buy Now and Add to cart are submits now, not links: same box, and the
   font a button would otherwise pick for itself. */
button.qw-actionbar__call,
button.qw-actionbar__addtocart {
  width: 100%;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.qw-actionbar__call { border: 0; }

.qw-actionbar__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  /* The app's own contact link: its action blue at 14/600, the same as
     the Call button beside it rather than a lighter link blue at the
     browser's default weight. */
  color: var(--brand-action-blue);
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 600;
  text-decoration: none;
}

.qw-actionbar__link--whatsapp { color: #25D366; }  /* AppTheme.whatsappGreen */

@media (max-width: 664px) {
  .qw-facttiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qw-specgrid { grid-template-columns: 1fr; }
}


/* The pinned contact bar floats over the foot of the page, so the page
   ends with room for it rather than with its last strip underneath. */
.qw-actionbar ~ *, body:has(.qw-actionbar) .wrap.page {
  padding-bottom: 108px;
}


/* The seller card's inner row: a round photo beside the name, rating and
   city, which is how the app lays it out - not a stack of three lines. */
.qw-sellercard__body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qw-sellercard__avatar {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
}

.qw-sellercard__text { min-width: 0; }

.qw-sellercard__rating,
.qw-sellercard__city {
  margin: 4px 0 0;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.qw-sellercard__star { color: var(--brand-link-blue); }


/* A featured ad's mark on the detail screen: the same navy square with a
   white star the cards carry, and no text pill beside it. */
.qw-featuredmark { margin: 0 0 14px; }

.qw-featuredmark__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}


/* ------------------------------------------------------------------ */
/* The store card's image badges, from AutoStoreProductCard: the        */
/* discount at the top start corner, the sold count flush into the      */
/* bottom end corner, SOLD OUT flush into the bottom start one.         */
/* ------------------------------------------------------------------ */

.qw-imgbadge {
  position: absolute;
  z-index: 2;
  padding: 2px 6px;                     /* EdgeInsets.symmetric(horizontal: 6) */
  border-radius: 4px;
  color: var(--brand-surface);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.qw-imgbadge--discount {
  inset-inline-start: 8px;
  top: 12px;
  background: var(--brand-status-closed);                  /* AppTheme.brandStatusClosed */
}

/* Flush into the corner, so the inner corners are the only rounded ones. */
.qw-imgbadge--sold {
  inset-inline-end: 0;
  bottom: 0;
  background: var(--brand-status-open);                  /* AppTheme.brandStatusOpen */
  border-radius: 4px 0 0 0;
}

.qw-imgbadge--soldout {
  inset-inline-start: 0;
  bottom: 0;
  background: var(--brand-text-muted);
  border-radius: 0 4px 0 0;
}


/* ------------------------------------------------------------------ */
/* The ads carousel. Its slides come from the admin panel - uploaded    */
/* and ordered there, served per placement - so what runs here is not   */
/* decided in this stylesheet or in the template.                       */
/* ------------------------------------------------------------------ */

.qw-ads {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.qw-ads::-webkit-scrollbar { display: none; }

.qw-ads__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--brand-surface);
}

.qw-ads__img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* The caption sits on a scrim so it stays readable over any photograph. */
.qw-ads__text {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.qw-ads__title { font-size: 15px; font-weight: 700; }
.qw-ads__subtitle { font-size: 13px; }


/* ------------------------------------------------------------------ */
/* The upcoming-car detail, against the app's screen.                   */
/* ------------------------------------------------------------------ */

/* The price and the rating share a line, the rating pushed to the end. */
.qw-upcoming__priceline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.qw-upcoming__rating {
  margin: 0;
  font-weight: 600;
  color: var(--brand-heading-gray);
  white-space: nowrap;
}

/* Economy, gearbox, fuel and engine, inline behind their glyphs. */
.qw-iconfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 8px 0 18px;
  padding: 0;
  list-style: none;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.qw-iconfacts > li {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* On-Road Price, Showrooms with Stock, Book Test Drive. */
.qw-tiles3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.qw-tiles3 a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 8px;
  background: #E8EEFB;
  color: var(--brand-heading-gray);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.qw-tiles3 a:hover { background: #DCE6F9; }

/* The finance and insurance rows. */
.qw-promorows {
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
}

.qw-promorows > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--brand-status-open-bg, #F1FAF3);
}

.qw-promorows__icon { color: var(--brand-status-open); }

.qw-promorows__text { display: flex; flex-direction: column; }

.qw-promorows__title { font-weight: 600; color: var(--brand-heading-gray); }

.qw-promorows__sub { font-size: 13px; color: var(--brand-text-muted); }

.qw-promorows__text a {
  margin-top: 4px;
  color: var(--brand-status-open);
  font-weight: 600;
  font-size: 14px;
}

/* Pros and cons: ticked in green, crossed in red. */
.qw-proscons__head {
  margin: 16px 0 6px;
  font-weight: 600;
}

.qw-proscons__head--good { color: var(--brand-status-open); }
.qw-proscons__head--bad { color: var(--brand-status-closed); }

.qw-proscons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qw-proscons > li {
  position: relative;
  padding-inline-start: 26px;
  margin-bottom: 6px;
  color: var(--brand-text-muted);
}

.qw-proscons > li::before {
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}

.qw-proscons--good > li::before { content: "\2713"; color: var(--brand-status-open); }
.qw-proscons--bad > li::before { content: "\2715"; color: var(--brand-status-closed); }

/* The review summary and the reviews themselves. */
.qw-reviewscore {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 2px;
}

.qw-reviewscore__value { font-size: 22px; font-weight: 700; color: var(--brand-heading-gray); }
.qw-reviewscore__stars { color: var(--brand-heading-gray); letter-spacing: 2px; }

.qw-reviews {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.qw-review {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--brand-surface-tint);
}

.qw-review__title { margin: 0; font-weight: 600; color: var(--brand-heading-gray); }

.qw-review__by {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--brand-label-gray);
}

.qw-review__stars { margin: 6px 0 0; color: var(--brand-heading-gray); letter-spacing: 2px; }

.qw-review__body { margin: 8px 0 0; color: var(--brand-text-muted); }

@media (max-width: 664px) {
  .qw-tiles3 { grid-template-columns: 1fr; }
}


/* The app labels a business rating above the stars on a tour deal. */
.qw-upcoming__ratinglabel {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--brand-label-gray);
}


/* ------------------------------------------------------------------ */
/* The product detail.                                                  */
/* ------------------------------------------------------------------ */

.qw-certpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #E8EEFB;
  color: var(--brand-link-blue);
  font-size: 12px;
  font-weight: 600;
}

.qw-priceline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 6px;
}

.qw-priceline__was { color: var(--brand-label-gray); }

.qw-offpill {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand-status-open-bg, #E4F6E9);
  color: var(--brand-status-open);
  font-size: 12px;
  font-weight: 700;
}

.qw-detail__rating,
.qw-detail__delivery {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--brand-text-muted);
}

/* A label on the start, its value on the end - the app's shipping rows. */
.qw-pairs { margin: 12px 0 28px; }

.qw-pairs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0;
}

.qw-pairs dt { color: var(--brand-label-gray); }

.qw-pairs dd {
  margin: 0;
  text-align: end;
  color: var(--brand-heading-gray);
}

.qw-actionbar__addtocart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;
  color: var(--brand-action-blue);
  font-weight: 600;
  text-decoration: none;
}


/* The service's opening line, and the trust marks under its reviews. */
.qw-openline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--brand-status-open);
  font-size: 14px;
}

.qw-trustrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.qw-trustrow > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--brand-text-muted);
  font-size: 12px;
  text-align: center;
}

.qw-trustrow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-status-open-bg, #E4F6E9);
  color: var(--brand-status-open);
}

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

/* The review form opens on a button, and is not there until it does. */
.qw-reviewtoggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.qw-reviewtoggle:checked ~ .qw-reviewwrite--btn { display: none; }
.qw-reviewtoggle:not(:checked) ~ .qw-reviewform { display: none; }

.qw-reviewwrite--btn {
  display: inline-block;
  cursor: pointer;
}

/* Six marks, three to a row, each in a card of its own with its figure
   inside the circle rather than printed under the label. */
.qw-trustrow--cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.qw-trustcard {
  padding: 14px 8px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  background: var(--brand-surface);
}

/* No green disc behind these: the card is the shape, and the figure and
   its glyph are in the app's own action blue. */
.qw-trustcard .qw-trustrow__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--brand-action-blue);
}

.qw-trustrow__icon b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.qw-trustrow__short { font-size: 13px; }

/* Said, once it has been. */
.qw-actionbar__addtocart.is-added {
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}

@media (max-width: 480px) {
  .qw-trustrow--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A mark that has a figure behind it says the figure under its label;
   one that has none says its label alone, as the app does. */
.qw-trustrow__value {
  display: block;
  color: var(--brand-heading-gray);
  font-size: 13px;
}

.qw-trustrow__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.qw-trustrow__link:hover span:last-child { text-decoration: underline; }

/* The product's own badge, beside the seller's. */
.qw-certpill--badge {
  background: var(--brand-surface-tint, #F2F6FD);
  color: var(--brand-heading-gray);
}


/* ------------------------------------------------------------------ */
/* The business detail's cover: the banner, the Open pill in its        */
/* corner, and the logo sitting over its lower edge.                    */
/* ------------------------------------------------------------------ */

.qw-bizcover {
  position: relative;
  margin: 0 0 52px;
  border-radius: 12px;
  overflow: visible;
}

.qw-bizcover__img {
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  object-fit: cover;
}

.qw-bizcover__open {
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--brand-status-open);
  color: var(--brand-surface);
  font-size: 12px;
  font-weight: 700;
}

.qw-bizcover__logo {
  position: absolute;
  bottom: -40px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--brand-surface);
  background: var(--brand-surface);
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* The panel under the bell: the app's notification sheet, where you    */
/* are rather than on a page of its own.                                */
/* ------------------------------------------------------------------ */

.qw-notifsheet {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 12px;
  background: var(--brand-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  color: var(--brand-text);
  text-align: start;
}

.qw-notifsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.qw-notifsheet__empty {
  margin: 12px 0;
  color: var(--brand-text-muted);
  font-size: 14px;                       /* AppTheme.fontBody */
}

.qw-notifsheet__all {
  display: block;
  padding-top: 8px;
  border-top: 1px solid var(--brand-facet-border);
  color: var(--brand-action-blue);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* The panel hangs from the actions row, which is what it is aligned to
   the end of. */
.qw-headactions { position: relative; }

/* Two fields to a row - the day it opens beside the day it closes, the
   hour beside the hour - as the app pairs them. */
.qw-pairrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.qw-pair { display: flex; flex-direction: column; }

.qw-pair__label {
  margin-bottom: 6px;
  font-weight: 600;
}

.qw-pair__field {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;                    /* AppTheme.fieldRadius */
  background: var(--brand-surface);
}

@media (max-width: 520px) {
  .qw-pairrow { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* The edit screen's two media panes: the header carousel and the logo, */
/* side by side and the same height, because they are set together.     */
/* ------------------------------------------------------------------ */

/* Every select on a form, with room for its own arrow.
   The browser draws the chevron inside the box's padding, so a select
   padded 12 all round put the arrow hard against the border while the
   text beside it had room to breathe. */
select.qw-branch__field,
select.qw-addmore__field,
select.qw-addmore__new,
.qw-pair__field,
.qw-bizform select,
#qw-bizform select {
  padding-inline-end: 36px;
}

/* One branch: four fields that only mean anything together, so they are
   drawn together, inside a rule of their own. */
.qw-branch {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;
  background: var(--brand-surface);
}

.qw-branch__heading {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-branch__label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

/* A branch stored as one line the form cannot split into its fields. */
.qw-branch__asis {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--brand-text-secondary);
}

.qw-branch__field {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;
  background: var(--brand-surface);
  font: inherit;
}

.qw-branch .qw-pairrow { margin-bottom: 0; }

/* The extra number fields keep the phone field's own shape, so an eight
   digit box does not sit beside a free-text one. */
.qw-phonefield.qw-addmore__field,
.qw-phonefield.qw-addmore__new { padding: 0; }

/* Which page of cities, under the grid. */
.qw-dashpager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.qw-dashpage {
  min-width: 32px;
  padding: 6px 10px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--brand-action-blue);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.qw-dashpage.is-on {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: #FFFFFF;
}

/* From and To, each under its own word. */
.qw-duration__pair {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qw-duration__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-label-gray);
}

/* The side bar's circle, when a business has a logo to put in it. */
.qw-mehead__logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* A section's heading with its own controls at the end of the line -
   "Add More", where the app puts it, rather than as another labelled
   box in the form. */
.qw-sectionrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 6px;
}

.qw-sectionrow__title {
  margin: 0;
  font-size: 18px;
}

.qw-sectionrow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The same row over a single field rather than over a section. */
.qw-sectionrow--field {
  align-items: center;
  margin: 16px 0 6px;
}

.qw-sectionrow--field .qw-field__label { margin-bottom: 0; }

.qw-addmore__btn {
  color: var(--brand-action-blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.qw-addmore__btn:hover { text-decoration: underline; }

.qw-addmore { margin: 0; }

.qw-addmore__field,
.qw-addmore__new {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;                    /* AppTheme.fieldRadius */
  background: var(--brand-surface);
}

select.qw-addmore__field,
select.qw-addmore__new { font: inherit; }

/* The revealed field: hidden until the control is pressed, and it stays
   open once something has been typed into it because the checkbox keeps
   its state. */
.qw-addmore__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.qw-addmore__new { display: none; }

/* The phone variant is a flex row, and .qw-phonefield's own display
   would otherwise win by coming later in this file. */
.qw-phonefield.qw-addmore__new { display: none; }

.qw-addmore__toggle:checked ~ .qw-addmore__new { display: block; }

.qw-addmore__toggle:checked ~ .qw-phonefield.qw-addmore__new { display: flex; }

/* The photographs take the width: they are the carousel across the top
   of the profile, and half a row made every thumbnail a stamp. */
.qw-headerform { margin: 0; }

/* The name and the logo share a line - a logo is a small square, and a
   row of its own gave it the weight of the carousel above it. */
.qw-namerow {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  /* The logo pane is as tall as the two fields beside it: a short box
     floating at the top of a taller column read as something that had
     not finished loading. */
  align-items: stretch;
  margin-top: 16px;
}

.qw-namerow__field { min-width: 0; }

.qw-logoform { margin: 0; display: flex; }

.qw-mediapane--logo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

/* Whatever is in it - the dropzone or the picture - takes the room under
   the heading, so the pane matches the fields beside it. */
.qw-mediapane--logo .qw-dropzone,
.qw-mediapane--logo .qw-logopane { flex: 1; }

.qw-mediapane--logo .qw-dropzone { padding: 12px 8px; }

.qw-mediapane--logo .qw-dropzone__hint { display: none; }

.qw-mediapane--logo .qw-logopane img { width: 96px; height: 96px; }

@media (max-width: 520px) {
  .qw-namerow { grid-template-columns: 1fr; }
}

.qw-mediapane {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 12px;
  background: var(--brand-surface);
}

.qw-mediapane__title {
  margin: 0 0 8px;
  font-size: 16px;                       /* AppTheme.fontMd */
  font-weight: 600;
}

.qw-logopane {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.qw-logopane img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

/* The header carousel sits inside the cover, so it keeps the cover's
   height and corners rather than the ad gallery's own. */
.qw-bizcover .qw-gallery,
.qw-bizcover .qw-hero { margin: 0; border-radius: 12px; overflow: hidden; }

.qw-bizcover .qw-gallery__img,
.qw-bizcover .qw-hero img { height: 220px; }

/* The logo sits centre-bottom over the cover, which is exactly where a
   gallery puts its arrows. On a business they go to the end of the row
   instead, clear of it. */
.qw-bizcover .qw-gallery__nav {
  inset-inline: auto 12px;
  justify-content: flex-end;
}

/* Nothing uploaded: the app's own empty header - a storefront on the
   dark blue it falls back to - rather than a stranger's car. */
.qw-bizcover__none,
.qw-bizcover__logo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2B3A55;
  color: rgba(255, 255, 255, 0.55);
}

.qw-bizcover__logo--none { color: rgba(255, 255, 255, 0.6); }

.qw-bizbtn--filled {
  display: block;
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--brand-action-blue);   /* QwColors.actionFill */
  color: var(--brand-surface);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.qw-facttiles__big {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}


/* ------------------------------------------------------------------ */
/* The upcoming-car spec sheet, from upcoming_car_spec_detail_screen:   */
/* the text on the left, the photograph filling the whole right half    */
/* and running to the edge of the screen.                               */
/* ------------------------------------------------------------------ */

.qw-specsheet {
  display: grid;
  grid-template-columns: 1fr 1fr;       /* the screen's two Expanded halves */
  align-items: stretch;                 /* the photo fills the band's height */
  margin: 8px 0 24px;
}

.qw-specsheet__text { padding-inline-end: 32px; }

.qw-specsheet__name {
  margin: 0;
  font-size: 24px;                      /* AppTheme.fontDisplay */
  font-weight: 800;
  color: var(--brand-heading-gray);
}

.qw-specsheet__trim {
  margin: 4px 0 0;                      /* SizedBox(height: 4) */
  font-size: 24px;                      /* AppTheme.fontDisplay */
  font-weight: 800;
  color: var(--brand-heading-gray);
}

.qw-specsheet__heading {
  margin: 24px 0 0;                     /* SizedBox(height: 24) */
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 600;
  color: var(--brand-label-gray);
}

.qw-specsheet__list { margin: 0; }

/* Each row is a label over its value, 16px apart. */
.qw-specsheet__list > div { padding-top: 16px; }

.qw-specsheet__list dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #A3A3A3;                       /* the screen's own grey */
}

.qw-specsheet__list dd {
  margin: 0;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 700;
  color: #000000;
}

.qw-specsheet__about {
  margin: 16px 0 8px;                   /* SizedBox(16) then SizedBox(8) */
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
}

/*
 * The photograph runs off the right of the content column to the edge of
 * the window, as it does on the screen - the negative margin is the
 * distance from the wrap's edge to the viewport's.
 */
.qw-specsheet__photo {
  position: relative;
  margin-inline-end: calc(50% - 50vw);
  min-height: 420px;
}

.qw-specsheet__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qw-specsheet__reviewslink { margin: 8px 0 0; }

/* The photo pane, when the column holds a gallery rather than one image:
   it takes the column's full height, as the single photograph did. Below
   tablet the column is in flow and the pane keeps its own height. */
@media (min-width: 901px) {
  .qw-specsheet__photo .qw-hero,
  .qw-specsheet__photo .qw-gallery { position: absolute; inset: 0; margin: 0; }
  .qw-specsheet__photo .qw-hero img,
  .qw-specsheet__photo .qw-gallery__slide,
  .qw-specsheet__photo .qw-gallery__img { height: 100%; }
}

/* One column below tablet, and the photo stops bleeding. */
@media (max-width: 900px) {
  .qw-specsheet { grid-template-columns: 1fr; }
  .qw-specsheet__text { padding-inline-end: 0; }

  .qw-specsheet__photo {
    margin-inline-end: 0;
    min-height: 0;
    margin-top: 20px;
  }

  .qw-specsheet__photo img {
    position: static;
    height: auto;
    border-radius: 12px;                /* AppTheme.cardRadius */
  }
}


/* The business screen's Write a Review, and its directions link. */
a.qw-writereview,
.qw-writereview {
  padding: 7px 14px;
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;
  color: var(--brand-action-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.qw-getdirections {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-link-blue);
  font-weight: 600;
}


/* ------------------------------------------------------------------ */
/* The concierge landings - Sell My Car and Buy My Car.                 */
/* ------------------------------------------------------------------ */

.qw-concierge__heading {
  margin: 0;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-concierge__tagline {
  margin: 6px 0 14px;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

/* The four ticked lines under the tagline. */
.qw-ticklist {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.qw-ticklist > li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--brand-heading-gray);
}

.qw-ticklist svg { color: var(--brand-status-open); }

/* The three onboarding packages, side by side. */
.qw-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0 28px;
  padding: 0;
  list-style: none;
}

.qw-package {
  padding: 16px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
}

.qw-package__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qw-package__icon { color: var(--brand-heading-gray); }

.qw-package__label {
  flex: 1 1 auto;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-package__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-link-blue);
}

.qw-package__bullets {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.qw-package__bullets > li {
  position: relative;
  padding-inline-start: 24px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--brand-text-muted);
}

/* A green tick before each line, as the card draws it. */
.qw-package__bullets > li::before {
  content: "✓";

  inset-inline-start: 0;
  color: var(--brand-status-open);
  font-weight: 700;
}

/* The reasons: an icon in a tinted row beside a heading and a line. */
.qw-reasons {
  margin: 12px 0 24px;
  padding: 0;
  list-style: none;
}

.qw-reasons > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  padding: 14px 16px;
  background: var(--brand-surface-tint);
  border-radius: 8px;                   /* AppTheme.radiusMd */
}

.qw-reasons__icon { color: var(--brand-link-blue); }

.qw-reasons__text { display: flex; flex-direction: column; }

.qw-reasons__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-reasons__desc {
  font-size: 14px;
  color: var(--brand-text-muted);
}

.qw-concierge__cta { margin: 24px 0 0; }

@media (max-width: 900px) {
  .qw-packages { grid-template-columns: 1fr; }
}


/* The success stories: a clip, the customer's words, and who they are. */
.qw-stories {
  display: flex;
  gap: 16px;
  margin: 12px 0 28px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.qw-stories::-webkit-scrollbar { display: none; }

.qw-story {
  flex: 0 0 224px;                      /* AppTheme.cardCarouselWidth */
  width: 224px;
  padding-bottom: 12px;
  background: var(--brand-surface);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  overflow: hidden;
}

.qw-story__clip {
  position: relative;
  display: block;
}

.qw-story__clip img {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
}

.qw-story__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-surface);
}

.qw-story__quote {
  margin: 10px 12px 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.qw-story__author {
  margin: 8px 12px 0;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-story__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 12px 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.qw-story__stars { color: var(--brand-heading-gray); letter-spacing: 1px; }


/* ------------------------------------------------------------------ */
/* The VMS dashboard, from the app's vms_dashboard_screen.              */
/* ------------------------------------------------------------------ */

.qw-vms__empty {
  padding: 32px 16px;
  text-align: center;
}

.qw-vms__emptyhead {
  margin: 0;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-vms__emptysub {
  margin: 8px 0 20px;
  color: var(--brand-text-muted);
}

/* The stat tiles. Two abreast on the app's phone width, four across on a
   desktop; the type is the tile's own. */
.qw-vmstiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
}

.qw-vmstile {
  display: flex;
  flex-direction: column;
  padding: 16px;                        /* EdgeInsets.all(16) */
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
}

.qw-vmstile__top {
  display: flex;
  align-items: center;
  gap: 6px;                             /* SizedBox(width: 6) */
  color: var(--brand-heading-gray);
}

.qw-vmstile__label {
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
}

.qw-vmstile__value {
  margin-top: 10px;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-vmstile__sub {
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 500;
  color: var(--brand-text-muted);
}

.qw-vmstile--warn { border-color: var(--brand-status-closed); }
.qw-vmstile--warn .qw-vmstile__top { color: var(--brand-status-closed); }

.qw-vmstile--good .qw-vmstile__top { color: var(--brand-status-open); }

/* The vehicles themselves. */
.qw-vmslist {
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
}

.qw-vmsrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 14px 16px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
}

.qw-vmsrow__link { text-decoration: none; }

.qw-vmsrow__name {
  display: block;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-vmsrow__variant {
  font-size: 12px;
  color: var(--brand-text-muted);
}

.qw-vmsbadge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;                 /* AppTheme.radiusPill */
  font-size: 12px;
  font-weight: 600;
}

.qw-vmsbadge--good {
  background: #E4F6E9;
  color: var(--brand-status-open);
}

.qw-vmsbadge--warn {
  background: #FBE9E9;
  color: var(--brand-status-closed);
}

.qw-vms__links { color: var(--brand-text-muted); }

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


/* ------------------------------------------------------------------ */
/* My Ads: the domain toggle, the status tabs, and the ad rows.         */
/* ------------------------------------------------------------------ */

.qw-domaintoggle {
  display: inline-flex;
  gap: 4px;
  margin: 8px 0 14px;
  padding: 4px;
  background: var(--brand-surface-tint);
  border-radius: 999px;                 /* AppTheme.radiusPill */
}

.qw-domaintoggle__opt {
  padding: 7px 20px;
  border-radius: 999px;
  color: var(--brand-text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.qw-domaintoggle__opt.is-on {
  background: var(--brand-action-blue);  /* QwColors.actionFill */
  color: var(--brand-surface);
}

/* The same underline row as every other one on the site: 24 between the
   words and no padding inside them. Four pills 16 apart from their own
   text read as a different control from the Leads/Location row above
   them, on the same screen. */
.qw-statustabs {
  display: flex;
  gap: 24px;
  margin: 12px 0 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--brand-hairline);
  scrollbar-width: none;
}

.qw-statustabs::-webkit-scrollbar { display: none; }

.qw-statustab {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  color: var(--brand-text-muted);
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.qw-statustab.is-on {
  border-bottom-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
}

.qw-adlist { margin: 0; padding: 0; list-style: none; }

.qw-adrow {
  position: relative;
  margin-bottom: 10px;
  padding: 14px 16px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
}

/* The sell side's ribbon, flush into the corner. */
.qw-adrow__ribbon {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  padding: 2px 8px;
  border-radius: 0 12px 0 4px;
  background: var(--brand-status-closed);
  color: var(--brand-surface);
  font-size: 11px;
  font-weight: 700;
}

.qw-adrow__title {
  display: block;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
  color: var(--brand-heading-gray);
  text-decoration: none;
}

.qw-adrow__price {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-adrow__counts {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.qw-adrow__counts > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.qw-adrow__update {
  margin-inline-start: auto;
  color: var(--brand-link-blue);
  font-weight: 600;
}


/* ------------------------------------------------------------------ */
/* Chats: the list, and one thread.                                     */
/* ------------------------------------------------------------------ */

.qw-chatlist { margin: 0; padding: 0; list-style: none; }

.qw-chatrow {
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-chatrow__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  text-decoration: none;
}

.qw-chatrow__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-surface-tint);
  color: var(--brand-heading-gray);
  font-weight: 700;
}

.qw-chatrow__body { min-width: 0; }

.qw-chatrow__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qw-chatrow__name {
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

/* The unread mark: a dot, as the row shows it. */
.qw-chatrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-link-blue);
}

.qw-chatrow__listing {
  display: block;
  font-size: 13px;
  color: var(--brand-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qw-chatrow.is-unread .qw-chatrow__listing { color: var(--brand-heading-gray); }

/* The thread's head: who, and whether they are about. */
.qw-chathead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
}

.qw-chathead__name {
  margin: 0;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 600;
}

.qw-chathead__status {
  font-size: 13px;
  color: var(--brand-status-open);
}

/* The thread menu's actions, at the trailing end of the head. */
.qw-chathead__actions { margin-inline-start: auto; display: flex; gap: 6px; }
.qw-chathead__action {
  padding: 6px 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--brand-action-blue);
  cursor: pointer;
}
.qw-chathead__action--danger { color: var(--brand-danger, #c62828); }

/* The car the conversation is about, kept above the messages. */
.qw-chatcontext {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--brand-surface-tint);
  border-radius: 8px;                   /* AppTheme.radiusMd */
}

.qw-chatcontext__title { font-weight: 600; color: var(--brand-heading-gray); }
.qw-chatcontext__price { font-weight: 700; color: var(--brand-heading-gray); }

/* The date separator. */
.qw-datepill {
  width: fit-content;
  margin: 0 auto 12px;
  padding: 4px 14px;
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface-tint);
  color: var(--brand-text-muted);
  font-size: 12px;
}

.qw-bubbles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.qw-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
}

/* Mine to the end of the line in the action colour, theirs to the start. */
.qw-bubble--mine {
  align-self: flex-end;
  background: var(--brand-action-blue);
  color: var(--brand-surface);
  border-end-end-radius: 4px;
}

.qw-bubble--theirs {
  align-self: flex-start;
  background: var(--brand-surface-tint);
  color: var(--brand-heading-gray);
  border-end-start-radius: 4px;
}

.qw-composer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
}

.qw-composer__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;
  background: var(--brand-surface);
  font: inherit;
}

.qw-composer__send {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-action-blue);
  color: var(--brand-surface);
  font-weight: 600;
  cursor: pointer;
}


/* ------------------------------------------------------------------ */
/* A journey step: the count, the fields, and Continue.                 */
/* ------------------------------------------------------------------ */

.page--narrow { max-width: 620px; }

.qw-stepcount {
  margin: 0 0 4px;
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 600;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qw-stepform { margin-top: 8px; }

.qw-field {
  display: block;
  margin-bottom: 16px;
}

.qw-field__group {
  margin: 24px 0 8px;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
}

.qw-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-surface);
  /* The app's field text, not the page's - a select was rendering a size
     larger than the label above it. */
  font-family: inherit;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-heading-gray);
}

.qw-field__input::placeholder { color: var(--brand-text-muted); }

.qw-stepform__continue {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-action-blue);  /* QwColors.actionFill */
  color: var(--brand-surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}


/* ------------------------------------------------------------------ */
/* Two cars, compared.                                                  */
/* ------------------------------------------------------------------ */

.qw-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 16px 0 28px;
}

.qw-versus__side { text-align: center; }

.qw-versus__img {
  width: 100%;
  height: 180px;
  border-radius: 12px;                  /* AppTheme.cardRadius */
  object-fit: cover;
}

.qw-versus__name {
  margin: 10px 0 0;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-versus__variant {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.qw-versus__price {
  margin: 6px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

/* The badge between them, as the card draws it. */
.qw-versus__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-action-blue);
  color: var(--brand-surface);
  font-size: 12px;
  font-weight: 800;
}

/* Left value, the label, then the right value - so the eye compares
   across the row rather than reading two separate lists. */
.qw-versustable {
  width: 100%;
  border-collapse: collapse;
}

.qw-versustable tr { border-bottom: 1px solid var(--brand-hairline); }

.qw-versustable__label {
  width: 34%;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--brand-label-gray);
  text-align: center;
}

.qw-versustable__value {
  padding: 12px 8px;
  font-weight: 600;
  color: var(--brand-heading-gray);
  text-align: center;
}

@media (max-width: 664px) {
  .qw-versus { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------ */
/* The results screen's search field and filter chips.                  */
/* ------------------------------------------------------------------ */

.qw-searchbar--results { margin-top: 12px; }

.qw-filterbar {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.qw-filterbar::-webkit-scrollbar { display: none; }

.qw-filterchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 104px;                     /* an even row, not ragged to the text */
  padding: 8px 16px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

/* A chip that is carrying a value reads as set the way the app's does:
   the same white ground, its border and its words in the action blue,
   and a cross where the arrow was. */
.qw-filterdrop.is-on .qw-filterchip {
  border-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
}

/* No chevron: the app's pills carry a leading icon on Sort and nothing
   else, so the label sits centred in its pill as it does there. */
.qw-filterchip__lead {
  flex: none;
  margin-inline-end: 4px;
  color: inherit;
}

/* Where the cross goes. */
.qw-filterchip__gap { width: 13px; }

.qw-chipwrap {
  position: relative;
  display: inline-flex;
}

.qw-chipclear {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  color: var(--brand-action-blue);
}

.qw-chipclear:hover { color: var(--brand-status-closed); }

/* The blocks spliced between results sit outside the list's own rhythm. */
.qw-results__interstitial {
  grid-column: 1 / -1;                  /* the full width of the grid */
  list-style: none;
  margin: 20px 0;
}


/* The business card's two actions, as the app ends it: View Inventory
   beside a call button. */
.qw-business__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;                     /* pinned to the foot of the card */
  padding: 0 12px 12px;
}

.qw-business__actions .qw-bizbtn--filled {
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}

.qw-business__call {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-surface-tint);
  color: var(--brand-action-blue);
}


/* ------------------------------------------------------------------ */
/* The header: logo and search on top, the sections underneath.         */
/* ------------------------------------------------------------------ */

.qw-headsearch {
  /* On the same row as the buttons, and to their left: both sit at the
     right end of the header. */
  display: flex;
  align-items: center;
  gap: 10px;
  order: -1;
  flex: 1 1 auto;
  min-width: 180px;
  margin: 0;
  padding: 0 14px;
  /* The same height as the buttons it sits beside, which are 7px of
     padding around a 13px line. It stood 8px taller than them. */
  height: 36px;
  background: var(--brand-surface);
  border-radius: 10px;
  color: var(--brand-label-gray);
}

.qw-headsearch input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--brand-heading-gray);
}

.qw-headsearch input::placeholder { color: var(--brand-label-gray); }

/* The search takes the space the language switch used to push against, so
   that block no longer needs to claim it. */


/* The sections row, scrollable rather than wrapped on a narrow screen. */
.site-header .site-nav {
  display: flex;
  gap: 22px;
  padding: 0 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-header .site-nav::-webkit-scrollbar { display: none; }

.site-header .site-nav > a { white-space: nowrap; }


/* Off the page, still in it: a landing's heading is not drawn, but a
   screen reader and a search engine still get the page's title. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* The three-line button beside the sections. A link, not a script toggle:
   it goes to the More menu, which is a page. */
.qw-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 7px;
  margin-inline-end: 6px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
}

.qw-hamburger:hover { background: rgba(255, 255, 255, 0.12); }

.qw-hamburger > span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
}

/* The sections row carries the button, so it lines them up together. */
.site-header .site-nav { align-items: center; }


/* ------------------------------------------------------------------ */
/* Services beside an Elite clip.                                       */
/* ------------------------------------------------------------------ */

.qw-services__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  /* Clear of the Driving Test button above it, which the two columns sat
     flush against - and close to it, because the button belongs to this
     block rather than to the tiles above. */
  margin-top: 8px;
}

/* The services card carries its own 12px, so the pane beside it takes the
   same and the two start on one line. */
.qw-services__video { margin-top: 12px; }

.qw-services__video {
  border-radius: 12px;                  /* AppTheme.cardRadius */
  overflow: hidden;
  background: #000000;
}



/* ------------------------------------------------------------------ */
/* The header's actions, with the language switch on the far right.     */
/* ------------------------------------------------------------------ */

.qw-headactions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* No auto margin: it would take the room the search field grows into. */
  flex: 0 0 auto;
}

.qw-headbtn {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;                   /* AppTheme.radiusMd, as the Driving Test button */
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.qw-headbtn:hover { background: rgba(255, 255, 255, 0.12); }

/* Last in the row, so it sits hard right. */
.qw-headlang {
  margin-inline-start: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .qw-services__split { grid-template-columns: 1fr; }
}


/* The Elite pane: the clip's own frame, a play badge, its name. */
.qw-services__video {
  position: relative;
  display: block;
  text-decoration: none;
}

.qw-services__video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;                  /* AppTheme.cardRadius */
}

.qw-services__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-surface);
}

.qw-services__videotitle {
  position: absolute;
  inset-inline-start: 14px;
  bottom: 12px;
  color: var(--brand-surface);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}


/* ------------------------------------------------------------------ */
/* The More menu, from the app's more_menu_screen.                      */
/*                                                                      */
/* A sheet rather than a full-width page: the app shows it as a panel,   */
/* so it keeps a sheet's measure and centres in the page.                */
/* ------------------------------------------------------------------ */

.qw-more {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  z-index: 60;
  width: 50%;                           /* the left half of the screen */
  max-width: none;
  margin: 0;
  padding: 20px 24px 40px;
  overflow-y: auto;
  background: var(--brand-background);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
}

/* The sheet's close, in its top corner. */
.qw-more__close {
  position: absolute;
  inset-inline-end: 0;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  color: var(--brand-heading-gray);
}

.qw-more__close:hover { background: var(--brand-surface-tint); }

.qw-more__logo {
  margin: 8px 0 20px;
  text-align: center;
}

.qw-more__signin {
  display: block;
  padding: 15px 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;                      /* AppTheme.fontMd */
}

/* Get Verified, Gain Trust. */
.qw-more__verify {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
}

.qw-more__verifyicon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-surface-tint);
  color: var(--brand-action-blue);
}

.qw-more__verify > span:last-child { display: flex; flex-direction: column; }

.qw-more__verifytitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-more__verifybody {
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

.qw-more__invite {
  margin: 0 0 16px;
  text-align: center;
}

.qw-more__invite a { color: var(--brand-link-blue); font-weight: 600; }

/* The tile grid: three across, as the sheet lays them out. */
.qw-moretiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.qw-moretile {
  list-style: none;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
}

.qw-moretile > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 10px;
  min-height: 92px;
  color: var(--brand-heading-gray);
  text-decoration: none;
}

.qw-moretile__icon { color: var(--brand-heading-gray); }

.qw-moretile__label {
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 500;
  text-align: center;
}

/* The Elite panel spans the two cells beside the last tile. */
.qw-moretile--elite {
  grid-column: span 2;
  background: var(--brand-chrome-navy);
  border-color: var(--brand-chrome-navy);
}

.qw-moretile--elite > a {
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 20px;
  color: var(--brand-surface);
}

.qw-moretile__elitetitle {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.qw-moretile__elitebody {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* A group of rows: one card, hairlines between. */
.qw-morelist {
  margin: 8px 0 22px;
  padding: 0;
  list-style: none;
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
  overflow: hidden;
}

.qw-morelist > li + li { border-top: 1px solid var(--brand-hairline); }

.qw-morerow > a,
.qw-morerow > span,
.qw-morelist > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: var(--brand-heading-gray);
  text-decoration: none;
}

.qw-morerow__label { flex: 1 1 auto; font-size: 15px; }

.qw-morerow__value {
  font-weight: 700;
  color: var(--brand-link-blue);
}

/* The pill the app puts on a row that is not ready yet. */
.qw-morerow__soon {
  padding: 2px 9px;
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface-tint);
  color: var(--brand-text-muted);
  font-size: 12px;
}

.qw-morerow.is-soon .qw-morerow__label { color: var(--brand-text-muted); }

/* How many things are in the basket, on the Cart row - the count the
   app's cart icon carries. */
.qw-morerow__badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-button-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* The chevron each row ends with. */
.qw-morerow__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--brand-muted);
  border-right: 2px solid var(--brand-muted);
  transform: rotate(45deg);
}

[dir="rtl"] .qw-morerow__chevron { transform: rotate(-135deg); }

.qw-more h2 {
  margin: 0 0 4px;
  font-size: 18px;                      /* AppTheme.fontLg */
}

.qw-more__help {
  margin-top: 26px;
  text-align: center;
  color: var(--brand-text-muted);
}

@media (max-width: 664px) {
  .qw-moretiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qw-moretile--elite { grid-column: span 2; }
}


/* The rest of the screen behind the sheet: dimmed, and a click anywhere
   on it closes - which is what a popup menu does. */
.qw-more__scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45);
}

/* The page does not scroll behind the sheet. */
body:has(.qw-more) { overflow: hidden; }


/* The More sheet's signed-in head, from more_menu_screen. */
.qw-more__profile {
  margin: 0 0 24px;
  text-align: center;
}

.qw-more__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--brand-surface-tint);
  color: var(--brand-label-gray);
}

/* The completion badge, on the avatar's corner. */
.qw-more__badge {
  /* top: 4, start: avatarStart + 52 - the badge sits at the avatar's top
     corner, not under it. */
  position: absolute;
  inset-inline-start: 52px;
  top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-action-blue);  /* AppTheme.brandActionBlue */
  border: 2px solid var(--brand-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--brand-surface);
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 600;
  white-space: nowrap;
}

.qw-more__name {
  margin: 40px 0 0;                     /* SizedBox(height: 40) */
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 700;
  color: var(--brand-heading-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 144x36, filled in actionFill, an 18px radius - the button's own size. */
.qw-more__viewprofile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 36px;
  margin-top: 8px;                      /* SizedBox(height: 8) */
  border-radius: 18px;
  background: var(--brand-action-blue);
  color: var(--brand-surface);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}


/* A tile for something not built yet: greyed, and it does not lead off. */
.qw-moretile.is-soon > a { color: var(--brand-text-muted); pointer-events: none; }
.qw-moretile.is-soon .qw-moretile__icon { color: var(--brand-muted); }
.qw-moretile.is-soon .qw-morerow__soon { margin-top: 2px; }

.qw-more__invite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--brand-text-muted);
}


/* ------------------------------------------------------------------ */
/* The app's empty state: the logo, a line, a line under it - and the   */
/* action as a full-width button at the foot of the screen.             */
/* ------------------------------------------------------------------ */

.qw-emptystate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 80px 16px 40px;
  text-align: center;
}

.qw-emptystate__logo { opacity: .9; margin-bottom: 18px; }

.qw-emptystate__title {
  margin: 0;
  font-size: 16px;                      /* AppTheme.fontMd */
  color: var(--brand-heading-gray);
}

.qw-emptystate__body {
  margin: 0;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

.qw-emptystate__cta { margin: 24px 0 0; }

.qw-emptystate__cta > a {
  display: block;
  padding: 15px 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* My Bookings, from my_bookings_screen.                                */
/* ------------------------------------------------------------------ */

.qw-bookings {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;                            /* SizedBox(height: 12) */
}

.qw-booking {
  display: flex;
  align-items: flex-start;
  gap: 12px;                            /* SizedBox(width: 12) */
  padding: 16px;                        /* EdgeInsets.all(16) */
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
}

.qw-booking__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  object-fit: cover;
}

.qw-booking__body { flex: 1; min-width: 0; }

.qw-booking__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.qw-booking__service {
  display: block;
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-booking__title {
  display: block;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

/* The status pill: its colour at 12% behind its own text. */
.qw-booking__status {
  flex: none;
  padding: 4px 10px;
  border-radius: 16px;
  background: rgba(6, 3, 94, 0.12);
  color: var(--brand-action-blue);
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 600;
  text-transform: capitalize;
}

/* The app's three: waiting blue, on its way red, done green - each on a
   wash of its own colour. */
.qw-booking__status.is-waiting {
  background: rgba(0, 85, 204, 0.12);
  color: var(--brand-link-blue);
}

.qw-booking__status.is-onway {
  background: rgba(163, 22, 22, 0.12);
  color: var(--brand-status-closed);
}

.qw-booking__status.is-done {
  background: rgba(22, 128, 61, 0.12);
  color: var(--brand-status-open);
}

/* The list's own search field, which the app hides behind an icon. */
.qw-listsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0 12px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;
  background: var(--brand-surface);
  color: var(--brand-text-muted);
}

.qw-listsearch__field {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--brand-heading-gray);
}

.qw-listsearch__field:focus { outline: none; }

/* One field of the address form. The form used to carry its own inline
   styles, one copy per input. */
.qw-addressfield {
  width: 100%;
  margin-bottom: 4px;
  padding: 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;
  background: var(--brand-surface);
  font: inherit;
  color: var(--brand-heading-gray);
}

select.qw-addressfield { padding-inline-end: 36px; }

/* Adding an address inside the checkout: the form is not there until the
   "+ Address" control asks for it. */
.qw-addrtoggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.qw-addrtoggle:not(:checked) ~ .qw-addrform { display: none; }

.qw-addrform {
  margin: 8px 0 20px;
  padding: 16px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
  background: var(--brand-surface);
}

/* One saved address, as a row you can pick. */
.qw-addrpick {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.qw-addrpick__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--brand-hairline);
  cursor: pointer;
}

.qw-addrpick__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The line about the transaction, in the app's own green. */
.qw-securebanner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 12px;
  border-radius: 12px;
  background: #ECFDF5;
  color: var(--brand-status-open);
  font-size: 14px;
  font-weight: 600;
}

.qw-orderdetails {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
  background: var(--brand-surface);
}

.qw-orderdetails > summary {
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* The two ways to pay. */
.qw-paymethods {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.qw-paymethod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--brand-hairline);
  cursor: pointer;
}

.qw-paymethod__icon { color: var(--brand-action-blue); }

.qw-paymethod--fixed { border-bottom: 0; }

/* The row's own edit and delete. */
.qw-addrpick__item { list-style: none; }

.qw-addrpick__tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.qw-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--brand-text-muted);
  cursor: pointer;
}

.qw-iconbtn:hover { background: var(--brand-surface-tint, #F2F6FD); }
.qw-iconbtn--danger:hover { color: var(--brand-status-closed); }

/* The card form, and what it promises underneath. */
.qw-cardform__error {
  margin: 8px 0 0;
  color: var(--brand-status-closed);
  font-size: 13px;
}

.qw-cardmarks {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 24px 0 0;
  color: var(--brand-text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.qw-cardmarks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qw-paymethod__note {
  display: block;
  color: var(--brand-text-muted);
  font-size: 13px;
}

/* Thank you for your order. */
.qw-thanks {
  margin: 32px 0;
  padding: 32px 24px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
  background: var(--brand-surface);
  text-align: center;
}

.qw-thanks__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ECFDF5;
  color: var(--brand-status-open);
}

.qw-thanks__title { margin: 16px 0 8px; }

/* The same circle, in the blue of something that has not happened yet
   rather than the green of something that has. */
.qw-thanks__tick--soon {
  background: var(--brand-surface-tint, #F2F6FD);
  color: var(--brand-action-blue);
}

.qw-thanks__line { margin: 0 0 20px; color: var(--brand-text-muted); }

.qw-thanks__facts { text-align: start; }

.qw-thanks__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.qw-thanks__primary,
.qw-thanks__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

.qw-thanks__primary {
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}

.qw-thanks__secondary {
  border: 1px solid var(--brand-action-blue);
  color: var(--brand-action-blue);
}


.qw-booking__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;                      /* SizedBox(height: 8) */
  font-size: 12px;
  color: var(--brand-text-muted);
}

.qw-booking__id {
  display: block;
  margin-top: 4px;                      /* SizedBox(height: 4) */
  font-size: 12px;
  color: var(--brand-text-muted);
}

/* The search field the app reveals from its header is defined once, with
   its magnifying glass, further up. A second definition stood here and
   gave the input a pill of its own, so the field was drawn inside the
   field - a box in a box - and `.qw-listsearch input` outranks
   `.qw-listsearch__field`, so it won. */


/* ------------------------------------------------------------------ */
/* Addresses, from addresses_screen.                                    */
/* ------------------------------------------------------------------ */

.qw-addresses {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.qw-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;                            /* SizedBox(width: 12) */
  padding: 12px 0;                      /* symmetric(vertical: 12) */
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-address__icon { flex: none; color: var(--brand-text-muted); }

.qw-address__body { flex: 1; min-width: 0; }

.qw-address__label {
  display: block;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-heading-gray);
  margin-bottom: 2px;                   /* SizedBox(height: 2) */
}

.qw-address__line {
  display: block;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

.qw-address__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-label-gray);
}

/* The bottom CTA: full width, 48 high, filled in actionFill. */
.qw-addressbtn {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 16px;                     /* EdgeInsets.all(16) */
  border: 0;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}


/* ------------------------------------------------------------------ */
/* The notification inbox, from notifications_screen.                   */
/* ------------------------------------------------------------------ */

.qw-notifhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qw-notifmarkall {
  border: 0;
  background: none;
  padding: 6px 4px;
  color: var(--brand-action-blue);
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
  cursor: pointer;
}

.qw-notifs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.qw-notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;                    /* symmetric(vertical: 8) */
  border-bottom: 1px solid var(--brand-hairline);
}

/* Unread carries a faint tint as well as the dot. */
.qw-notif.is-unread { background: var(--brand-surface-tint); }

.qw-notif__icon { flex: none; color: var(--brand-label-gray); padding-top: 2px; }

.qw-notif__body { flex: 1; min-width: 0; }

.qw-notif__title {
  display: block;
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 400;
  color: var(--brand-heading-gray);
}

.qw-notif.is-unread .qw-notif__title { font-weight: 600; }

/* Two lines, then an ellipsis - the app's maxLines: 2. */
.qw-notif__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-notif__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--brand-action-blue);
}


/* ------------------------------------------------------------------ */
/* Notification settings, from notification_settings_screen.            */
/* ------------------------------------------------------------------ */

.qw-prefrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;                            /* SizedBox(width: 12) */
  padding: 14px 16px;                   /* symmetric(h: 16, v: 14) */
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-hairline);
  cursor: pointer;
}

.qw-prefrow__text { flex: 1; min-width: 0; }

.qw-prefrow__label {
  display: block;
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-prefrow__caption {
  display: block;
  margin-top: 2px;                      /* SizedBox(height: 2) */
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

/* The switch is the checkbox, drawn as the app's CheckSwitch. */
.qw-prefswitch {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 2px 0 0;
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-hairline);
  cursor: pointer;
  transition: background 120ms ease;
}

.qw-prefswitch::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease;
}

.qw-prefswitch:checked { background: var(--brand-action-blue); }
.qw-prefswitch:checked::after { transform: translateX(18px); }

.qw-prefsave {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 16px;
  border: 0;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 16px;                      /* AppTheme.fontMd, as the theme sets */
  font-weight: 600;
  cursor: pointer;
}


/* ------------------------------------------------------------------ */
/* My Profile, from individual_profile_screen.                          */
/* ------------------------------------------------------------------ */

.qw-profileform { margin-top: 16px; }

/* SellNowFieldLabel: an icon, then the label. */
.qw-fieldlabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;                   /* SizedBox(height: 16) then 8 */
  color: var(--brand-heading-gray);
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
}

.qw-profileform .qw-field__input { margin-bottom: 8px; }

/* GenderToggle: two options, the chosen one filled. */
.qw-gendertoggle { display: flex; gap: 8px; }

.qw-genderopt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.qw-genderopt input { position: absolute; opacity: 0; pointer-events: none; }

.qw-genderopt:has(input:checked) {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: #FFFFFF;
}


/* The chat list's vertical chips, from chat_list_screen. */
.qw-chatchips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}

.qw-chatchip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface);
  color: var(--brand-text-muted);
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 600;
  text-decoration: none;
}

.qw-chatchip.is-on {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: #FFFFFF;
}


/* ------------------------------------------------------------------ */
/* The VMS empty state's logo and enterprise panel.                     */
/* ------------------------------------------------------------------ */

.qw-vms__emptylogo {
  margin: 40px 0 48px;                  /* SizedBox(40) ... SizedBox(48) */
  text-align: center;
}

/* The panel's top corners are heavily rounded - a 56px radius. */
.qw-vmspromo {
  margin-top: 17px;                     /* SizedBox(height: 17) */
  padding: 32px 20px 20px;              /* fromLTRB(20, 32, 20, 20) */
  border-radius: 56px 56px 0 0;
  background: #1B2A4A;
  text-align: start;
}

.qw-vmspromo__icon { color: rgba(255, 255, 255, 0.24); }

.qw-vmspromo__title {
  margin: 40px 0 2px;                   /* SizedBox(40), then 2 */
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  white-space: pre-line;                /* the string carries its own break */
}

.qw-vmspromo__caption {
  margin: 0 0 16px;                     /* SizedBox(height: 16) */
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}

.qw-vmspromo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;                         /* brandActionButtonHeight */
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}


/* ------------------------------------------------------------------ */
/* The Driving Test dashboard, from driving_test_dashboard_screen.      */
/* ------------------------------------------------------------------ */

.qw-dtempty {
  padding: 24px;
  text-align: center;
}

.qw-dtempty__title {
  margin: 16px 0 0;                     /* SizedBox(height: 16) */
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-dtbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin-top: 20px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.qw-dtsection {
  margin: 20px 0 8px;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-dtstats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
}

.qw-dtstat {
  padding: 14px;
  border-radius: 8px;
  background: var(--brand-surface);
}

.qw-dtstat__label {
  display: block;
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--brand-text-muted);
}

.qw-dtstat__value {
  display: block;
  margin-top: 6px;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

/* The trend card: no border - a filled card never gets an outline. */
.qw-dttrend {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 4px;
  padding: 16px 16px 8px 12px;          /* fromSTEB(12, 16, 16, 8) */
  border-radius: 8px;
  background: var(--brand-surface);
}

.qw-dttrend__axis { font-size: 10px; color: var(--brand-text-muted); }

.qw-dttrend__chart { width: 100%; height: 140px; }

.qw-dttrend__caption {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 11px;                      /* AppTheme.fontXs */
  color: var(--brand-text-muted);
  text-align: center;
}

.qw-dthistory {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.qw-dtattempt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;                        /* EdgeInsets.all(12) */
  border-radius: 8px;
  background: var(--brand-surface);
}

.qw-dtattempt__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E5E7EB;
  color: var(--brand-label-gray);
}

.qw-dtattempt__icon.is-passed {
  background: rgba(6, 3, 94, 0.12);
  color: var(--brand-action-blue);
}

.qw-dtattempt__body { flex: 1; min-width: 0; }

.qw-dtattempt__title {
  display: block;
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 700;
  color: var(--brand-heading-gray);
  text-decoration: none;
}

.qw-dtattempt__when {
  display: block;
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-dtattempt__score { display: block; margin-top: 4px; }

.qw-dtattempt__scorelabel {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.qw-dtattempt__scorevalue {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-action-blue);
}

.qw-dtpill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}

.qw-dtpill.is-passed { background: #DCFCE7; color: var(--brand-status-open); }
.qw-dtpill.is-failed { background: #FEE2E2; color: var(--brand-status-closed); }


/* ------------------------------------------------------------------ */
/* How it works, and the concierge FAQ.                                 */
/* ------------------------------------------------------------------ */

.qw-howitworks {
  position: relative;
  display: block;
  max-width: 480px;
  border-radius: 12px;                  /* AppTheme.cardRadius */
  overflow: hidden;
}

.qw-howitworks img { display: block; width: 100%; height: auto; }

.qw-howitworks__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.25);
}

.qw-faqs { list-style: none; margin: 8px 0 0; padding: 0; }

.qw-faq {
  padding: 12px 0;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-faq__q {
  cursor: pointer;
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-faq__a {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-text-muted);
}

/* ------------------------------------------------------------------ */
/* "What do you want to sell?", from sell_now_bottom_sheet.             */
/* ------------------------------------------------------------------ */

.qw-selltiles {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;       /* crossAxisCount: 2 */
  gap: 8px;                             /* main/crossAxisSpacing: 8 */
  margin: 16px 0 0;
  padding: 0;
}

.qw-selltile {
  display: flex;
  align-items: center;
  gap: 10px;                            /* SizedBox(width: 10) */
  padding: 8px 12px;                    /* symmetric(h: 12, v: 8) */
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.qw-selltile__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EFF6FF;
  color: var(--brand-action-blue);
}

.qw-selltile__label {
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 500;
  color: var(--brand-heading-gray);
}


/* The directories' browse title, from business_directory_screen. */
.qw-browsetitle {
  margin: 16px 0 12px;
  color: var(--brand-heading-gray);
}


/* ------------------------------------------------------------------ */
/* The blog index, from blog_list_screen.                               */
/* ------------------------------------------------------------------ */

.qw-blogpills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                             /* SizedBox(width: 8) */
  margin: 16px 0;
  padding: 0;
}

.qw-blogpill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;                      /* symmetric(h: 16, v: 8) */
  border: 1px solid var(--brand-hairline);
  border-radius: 18px;
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.qw-blogpill.is-on {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: #FFFFFF;
}

/* The featured card: a 224px image with its badge, then the text. */
.qw-blogfeature {
  display: block;
  margin-bottom: 16px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-decoration: none;
}

.qw-blogfeature__media { position: relative; display: block; }

.qw-blogfeature__media img {
  display: block;
  width: 100%;
  height: 224px;
  object-fit: cover;
}

.qw-blogfeature__badge {
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 500;
  letter-spacing: 0.5px;
}

.qw-blogfeature__body { display: block; padding: 16px; }

.qw-blogfeature__trending {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-value-blue);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.qw-blogfeature__title {
  display: block;
  margin-top: 8px;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-blogfeature__meta {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

.qw-blogfeature__dot {
  width: 4px;
  height: 4px;
  margin: 0 8px;
  border-radius: 50%;
  background: var(--brand-facet-border);
}

/* The carousel between articles spans the grid. */
.qw-articles__ad { grid-column: 1 / -1; list-style: none; }

/* ------------------------------------------------------------------ */
/* Elite of Qatar, from elite_videos_screen.                            */
/* ------------------------------------------------------------------ */

/* The search field on the Elite page's black ground: the shared pill would
   have drawn a white box on it. */
.qw-elite__search {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}

.qw-elite__search .qw-listsearch__field {
  color: #FFFFFF;
}

.qw-elite__search .qw-listsearch__field::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.qw-elite {
  margin: -24px 0 -48px;                /* the page's own black ground */
  padding: 24px 0 48px;
  background: #0A0A0A;
}

.qw-elite__crumbs a { color: rgba(255, 255, 255, 0.7); }

.qw-elite__title {
  margin: 8px 0 20px;
  color: #FFFFFF;
  font-size: 24px;                      /* AppTheme.fontDisplay */
  font-weight: 700;
}

/* The header's gold suffix. */
.qw-elite__suffix {
  margin-inline-start: 8px;
  color: #D4AF37;                       /* AppTheme.eliteGold */
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 500;
  letter-spacing: 1.1px;
  vertical-align: middle;
}

.qw-elite__empty .qw-emptystate__title { color: #FFFFFF; }

.qw-heroes { list-style: none; margin: 0; padding: 0; }

/* One 400px hero per video.
   Scoped to the shelf: the home page's carousel carries the same class
   and is a different thing entirely. Unscoped, its 344px of slides plus
   its dots were cropped to this height, and the dots landed outside the
   section, floating over the block below. */
.qw-heroes .qw-hero {
  position: relative;
  display: block;
  height: 400px;
  overflow: hidden;
  text-decoration: none;
}

.qw-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;                         /* Opacity(opacity: 0.8) */
}

/* Black at the foot, clear by 60% up. */
.qw-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.87) 0%, transparent 60%);
}

.qw-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #D4AF37;
}

.qw-hero__text {
  position: absolute;
  inset-inline: 24px;
  bottom: 24px;
}

.qw-hero__tag {
  display: block;
  color: #D4AF37;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
}

.qw-hero__name {
  display: block;
  margin-top: 4px;
  color: #FFFFFF;
  font-size: 24px;                      /* AppTheme.fontDisplay */
  font-weight: 700;
}

/* A textarea keeps its own rows rather than a field's fixed height. */
textarea.qw-field__input {
  height: auto;
  min-height: 150px;
  resize: vertical;
}

/* ------------------------------------------------------------------ */
/* Policy pages, from policy_screen and policy_section_card.            */
/* ------------------------------------------------------------------ */

.qw-policytitle {
  margin: 8px 0 16px;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 700;
  color: var(--brand-value-blue);       /* AppTheme.brandButtonBlue */
}

.qw-policysections {
  list-style: none;
  display: grid;
  gap: 12px;                            /* SizedBox(height: 12) */
  margin: 0;
  padding: 0;
}

.qw-policycard {
  padding: 16px;                        /* EdgeInsets.all(16) */
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
}

.qw-policycard__head {
  display: flex;
  align-items: center;
  gap: 8px;                             /* SizedBox(width: 8) */
  margin: 0;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-policycard__head svg { flex: none; color: var(--brand-value-blue); }

.qw-policycard__intro {
  margin: 12px 0 0;                     /* SizedBox(height: 12) */
  font-size: 14px;                      /* AppTheme.fontBody */
  line-height: 1.55;
  color: var(--brand-text-muted);
}

.qw-policybullets {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.qw-policybullets li {
  display: flex;
  gap: 8px;
  padding-top: 8px;                     /* EdgeInsets.only(top: 8) */
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-text-muted);
}

.qw-policybullets__dot {
  flex: none;
  font-weight: 600;
  color: var(--brand-value-blue);
}

/* The comparison picker, from car_comparison_selection_screen. */
.qw-comparepick { margin-top: 16px; }

.qw-comparepick__label {
  display: flex;
  align-items: center;
  gap: 6px;                             /* SizedBox(width: 6) */
  margin: 16px 0 8px;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

.qw-comparepick .qw-prefsave { margin-top: 24px; }

.qw-comparepopular {
  margin: 24px 0 12px;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

/* Popular Comparisons: one card per row, as the app lists them. */
.qw-comparelist {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.qw-comparelist > li { width: 100%; }


/* ------------------------------------------------------------------ */
/* Car Reviews, from car_reviews_screen.                                */
/* ------------------------------------------------------------------ */

.qw-reviewpick { margin-top: 16px; }

.qw-reviewpick__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
  color: var(--brand-text-muted);
}

.qw-reviewpick .qw-prefsave { margin-top: 12px; }

/* Write a Review: outlined, in the action blue. */
.qw-reviewwrite {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 12px;
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: transparent;
  color: var(--brand-action-blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* The popular row: 140-wide cards with an 80px image. */
.qw-popcars {
  list-style: none;
  display: flex;
  gap: 12px;                            /* SizedBox(width: 12) */
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
}

.qw-popcar {
  display: block;
  width: 140px;
  border-radius: 8px;
  background: var(--brand-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-decoration: none;
}

.qw-popcar__img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.qw-popcar__body { display: block; padding: 8px; }

.qw-popcar__name {
  display: block;
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-popcar__count {
  display: block;
  margin-top: 2px;
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}


/* ------------------------------------------------------------------ */
/* The search screen's empty state, from search_screen.                 */
/* ------------------------------------------------------------------ */

.qw-searchhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.qw-searchhead h2 {
  margin: 0;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-searchhead a {
  color: var(--brand-action-blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.qw-recents { list-style: none; margin: 12px 0 0; padding: 0; }

.qw-recent {
  display: flex;
  align-items: center;
  gap: 12px;                            /* SizedBox(width: 12) */
  padding: 10px;                        /* AppTheme.cardPadding */
  margin-bottom: 8px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 14px;
  text-decoration: none;
}

.qw-recent svg { flex: none; color: var(--brand-label-gray); }

.qw-brandchips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                             /* spacing/runSpacing: 8 */
  margin: 12px 0 0;
  padding: 0;
}

.qw-brandchip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 14px;
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Sign in, from phone_entry_screen.                                    */
/* ------------------------------------------------------------------ */

.qw-auth {
  max-width: 460px;
  padding: 8px 24px 24px;               /* fromLTRB(24, 8, 24, 24) */
  text-align: center;
}

.qw-auth__logo { margin: 48px 0 32px; }

.qw-auth__headline {
  margin: 0;
  font-size: 24px;                      /* AppTheme.fontDisplay */
  font-weight: 700;
  color: var(--brand-text-dark);        /* CONFIRMED 353535 */
}

.qw-auth__sub {
  margin: 8px 0 56px;                   /* SizedBox(8) then 56 */
  font-size: 14px;
  color: var(--brand-text-muted);
}

/* The 56px field: a fixed country code, a rule, then the number. */
.qw-phonefield {
  display: flex;
  align-items: center;
  gap: 14px;                            /* SizedBox(width: 14) */
  height: 56px;
  padding: 0 16px;                      /* symmetric(horizontal: 16) */
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: var(--brand-background);
  text-align: start;
}

.qw-phonefield__code {
  color: var(--brand-text-dark);
  font-size: 16px;
  border-inline-end: 1px solid var(--brand-facet-border);
  padding-inline-end: 14px;
}

.qw-phonefield__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 16px;
  color: var(--brand-text-dark);
  outline: none;
}

.qw-auth form .qw-prefsave { margin-top: 32px; }

.qw-auth__terms {
  margin-top: 24px;
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

/* The More sheet's header band, from more_menu_screen. */
.qw-more__band {
  height: 140px;
  margin: -24px -20px 0;                /* flush to the sheet's top edge */
  background: linear-gradient(90deg, #1A3A8A 0%, #0055CC 100%);
}

/* The avatar hangs 32px below the band's foot. */
.qw-more__profile { margin-top: -32px; }

.qw-more__avatar {
  width: 72px;
  height: 72px;
  padding: 4px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* 2 o'clock, not the bottom corner. */
.qw-more__badge {
  top: 4px;
  bottom: auto;
  inset-inline-end: -34px;
}


/* ------------------------------------------------------------------ */
/* My Purchases, from my_purchases_screen.                              */
/* ------------------------------------------------------------------ */

.qw-purchases {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
}

/* No outline: a filled card never gets one (the app's own rule), and the
   placed-on band has to reach the card's edges to read as a band. */
.qw-purchase {
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
  overflow: hidden;
}

/* The whole card opens the order, as tapping it does in the app. */
.qw-purchase__link {
  display: block;
  padding: 16px;                        /* EdgeInsets.all(16) */
  color: inherit;
  text-decoration: none;
}

.qw-purchase__link:hover { background: var(--brand-surface-muted, #F8FAFC); }

.qw-purchase__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* The seller, not the order number: the app leads the card with who is
   selling, and the number is on the order itself. */
.qw-purchase__seller {
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-heading-gray);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The status pill: its own colour at 15% behind its own text, the colour
   set per card by --qw-pill (see PurchaseTabs.colour). It was amber for
   every status, so a cancelled order looked pending. */
.qw-purchase__status {
  flex: none;
  padding: 4px 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--qw-pill, #D97706) 15%, transparent);
  color: var(--qw-pill, #D97706);
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 600;
}

.qw-purchase__item {
  display: flex;
  align-items: center;
  gap: 12px;                            /* SizedBox(width: 12) */
  margin-top: 12px;                     /* SizedBox(height: 12) */
}

.qw-purchase__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  object-fit: cover;
}

.qw-purchase__itembody { flex: 1; min-width: 0; }

.qw-purchase__title {
  display: block;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-heading-gray);
}

.qw-purchase__qty { color: var(--brand-text-muted); font-weight: 400; }

/* The order's own total, right against the card's edge. */
.qw-purchase__total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px;
  margin-top: 8px;                      /* SizedBox(height: 8) */
  font-size: 14px;
  color: var(--brand-heading-gray);
}

.qw-purchase__totallabel {
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-purchase__price {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

/* The tinted band across the foot of the card, not a hairline rule. */
.qw-purchase__placed {
  display: block;
  padding: 10px 16px;
  background: #EFF6FF;
  text-align: center;
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

/* Preview cards on a results page: a grid that wraps, not the landing's
   pager - a listing has to show everything it paginated for. */
.qw-cardgrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 16px;
  margin: 12px 0 0;
  padding: 0;
}

.qw-cardgrid > .qw-card { width: auto; }

/*
  Result cards get a bigger thumbnail on a wide screen rather than a
  wider field of white beside the same small one. Capping the column
  instead just left a band of empty page down the right.
*/
@media (min-width: 1400px) {
  .qw-result { min-height: 132px; }
  .qw-result__media { flex-basis: 168px; width: 168px; }
}


/* ------------------------------------------------------------------ */
/* Choose Theme and Select Language, from their bottom sheets.          */
/* ------------------------------------------------------------------ */

.qw-sheetpage {
  max-width: 460px;
  padding-inline: 0;
}

/* The 122px navy header, rounded at the top like the sheet's own. */
.qw-sheethead {
  position: relative;
  height: 122px;
  border-radius: 32px 32px 0 0;
  background: var(--brand-action-blue);
}

.qw-sheethead__title {
  display: block;
  padding: 24px;
  color: #FFFFFF;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.qw-sheethead__close {
  position: absolute;
  inset-inline-end: 20px;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

/* The disc overlaps the header's foot, as the sheet's icon does. */
.qw-sheethead__disc {
  position: absolute;
  left: 50%;
  top: 49.75px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 6px solid var(--brand-action-blue);
  border-radius: 50%;
  background: var(--brand-surface);
  color: var(--brand-action-blue);
}

.qw-sheetbody {
  padding: 64px 24px 24px;              /* content body padding-top: 64 */
  border-radius: 0 0 16px 16px;
  background: var(--brand-surface);
  text-align: center;
}

.qw-sheetnote {
  margin: 0 0 32px;
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-text-muted);
}

/* 16px radios, not the 24px default. */
.qw-radiorow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--brand-heading-gray);
  cursor: pointer;
}

.qw-radiorow input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid var(--brand-facet-border);
  border-radius: 50%;
  cursor: pointer;
}

.qw-radiorow input:checked {
  border-color: var(--brand-action-blue);
  background:
    radial-gradient(circle, var(--brand-action-blue) 0 4px, transparent 5px);
}

.qw-sheetexplain {
  margin: 7px 0 24px;                   /* SizedBox(height: 31) less the row gap */
  font-size: 14px;
  line-height: 1.62;
  color: var(--brand-text-muted);
  text-align: start;
}

/* Select Language: a title with Cancel beside it, then the rows. */
.qw-langhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 24px 16px;
}

.qw-langhead__title {
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  line-height: 1.56;
  color: var(--brand-heading-gray);
}

.qw-langhead__cancel {
  color: var(--brand-link-blue);
  font-size: 14px;
  text-decoration: none;
}

.qw-langlist { list-style: none; margin: 0; padding: 0; }

.qw-langrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;                   /* symmetric(h: 24, v: 16) */
  border-bottom: 1px solid var(--brand-hairline);
  background: var(--brand-surface);
  color: #111418;
  font-size: 16px;                      /* AppTheme.fontMd */
  text-decoration: none;
}

.qw-langrow__radio {
  width: 20px;
  height: 20px;
  border: 2px solid #C3C6CF;
  border-radius: 50%;
}

.qw-langrow.is-on .qw-langrow__radio {
  border-color: var(--brand-link-blue);
  background:
    radial-gradient(circle, var(--brand-link-blue) 0 5px, transparent 6px);
}


/* ------------------------------------------------------------------ */
/* The concierge landings, in two halves.                               */
/* ------------------------------------------------------------------ */

.qw-concierge2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.qw-concierge2col__main { min-width: 0; }

/*
  The form follows the reading rather than waiting at the bottom of it.
  Its own scroll keeps a long form usable on a short window.
*/
.qw-concierge2col__side {
  /*
    Sticky, but never scrolled inside: an inner scroller hid the last
    fields and the submit button behind an edge nobody could see. A form
    taller than the window simply stops sticking, which is correct.
  */
  position: sticky;
  top: 16px;
  min-width: 0;
  /* No top padding: the card's first heading sits on the same line as the
     page's own, which is what the two columns are read against. */
  padding: 0 20px 20px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
  overflow: hidden;                     /* so the band's corners show */
}

.qw-concierge2col__side > h2:first-child { margin-top: 0; }

/* One column below the split's width, form last, as it reads on a phone. */
@media (max-width: 980px) {
  .qw-concierge2col { grid-template-columns: 1fr; }

  .qw-concierge2col__side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* Elite of Qatar: three clips to a row on a desktop. One 400px hero per
   row is the phone's layout; a monitor has room for the shelf. */
@media (min-width: 900px) {
  .qw-heroes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .qw-heroes .qw-hero { height: 280px; border-radius: 12px; }

  .qw-hero__name { font-size: 18px; }

  .qw-hero__text { inset-inline: 16px; bottom: 16px; }
}


/* Addresses in two halves: what is saved, and how to add one. */
.qw-address2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.qw-address2col__main { min-width: 0; }

.qw-address2col__side {
  position: sticky;
  top: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
}

.qw-address2col__side > h2:first-child { margin-top: 0; }

@media (max-width: 980px) {
  .qw-address2col { grid-template-columns: 1fr; }
  .qw-address2col__side { position: static; }
}


/*
  The completion badge hangs off the avatar's 2 o'clock corner - 52px in
  from its start, 4px down - with the app's own 12/4 padding and 2px white
  ring. It was pinned to the avatar's end, which put it over the head.
*/
.qw-more__badge {
  inset-inline-start: 52px;
  inset-inline-end: auto;
  top: 4px;
  bottom: auto;
  padding: 4px 12px;                    /* symmetric(h: 12, v: 4) */
  border: 2px solid #FFFFFF;
  font-weight: 700;
}


/* The concierge start card: the journey's steps, then its first screen. */
.qw-startcard__title {
  margin: 0 0 16px;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-startsteps {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--brand-text-muted);
  font-size: 14px;                      /* AppTheme.fontBody */
  line-height: 2;
}

.qw-startsteps a { color: var(--brand-link-blue); text-decoration: none; }

.qw-startcard__cta { margin-top: 16px; }

/* The start card's Continue is a button, not a link in a paragraph. */
a.qw-prefsave {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


/* ------------------------------------------------------------------ */
/* The journey's step indicator, from sell_it_for_me_step_indicator.    */
/* ------------------------------------------------------------------ */

.qw-stepper {
  list-style: none;
  display: flex;
  /* Out to the screen's edges, by exactly the padding the page carries.
     This was a flat -20px, which the page has never used: on a phone it
     padded 16 and the blue band hung 4px off each side, so the cart
     scrolled sideways, and on a desktop it padded 24 and the band fell
     4px short of the edge it was reaching for. */
  margin-block: 0 20px;
  margin-inline: calc(-1 * var(--qw-wrap-pad, 24px));
  padding: 16px 8px 20px;
  /* The brand's own blue, the one every filled control uses. */
  background: var(--brand-action-blue);
  /* 48, the one radius every journey header uses. It had been 56 here
     and nothing anywhere else, so no two journeys were rounded alike. */
  border-radius: 0 0 48px 48px;
}

.qw-stepper__step {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  row-gap: 4px;                         /* SizedBox(height: 4) */
  text-align: center;
}

.qw-stepper__line {
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
}

/* The line before a step is done once that step has been reached. */
.qw-stepper__step.is-done .qw-stepper__line,
.qw-stepper__step.is-now .qw-stepper__line--before { background: #FACC15; }

.qw-stepper__step:first-child .qw-stepper__line--before,
.qw-stepper__step:last-child .qw-stepper__line--after { background: transparent; }

.qw-stepper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #60A5FA;                  /* upcoming */
  color: #FFFFFF;
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 700;
}

.qw-stepper__step.is-done .qw-stepper__dot { background: #FACC15; color: #1D4ED8; }
.qw-stepper__step.is-now .qw-stepper__dot { background: #FFFFFF; color: #2563EB; }

.qw-stepper__label {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
}

.qw-stepper__step.is-done .qw-stepper__label,
.qw-stepper__step.is-now .qw-stepper__label { color: #FFFFFF; }

/* ------------------------------------------------------------------ */
/* Choosing a package inside the form.                                  */
/* ------------------------------------------------------------------ */

.qw-pickpackages {
  list-style: none;
  /* Three across, as narrow as the column allows - a package is a price
     and three lines, not a card that needs a row of its own. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
}

.qw-pickpackage {
  display: block;
  height: 100%;
  padding: 10px;                        /* AppTheme.cardPadding */
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
  cursor: pointer;
}

.qw-pickpackage input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0 6px 0 0;
  vertical-align: -2px;
  border: 2px solid var(--brand-facet-border);
  border-radius: 50%;
  cursor: pointer;
}

.qw-pickpackage input:checked {
  border-color: var(--brand-action-blue);
  background:
    radial-gradient(circle, var(--brand-action-blue) 0 3.5px, transparent 4.5px);
}

.qw-pickpackage:has(input:checked) {
  border-color: var(--brand-action-blue);
  box-shadow: inset 0 0 0 1px var(--brand-action-blue);
}

.qw-pickpackage__body { display: block; }

/* The name sits beside the radio; the price goes under it, so a narrow
   card never has to fit both on one line. */
.qw-pickpackage__head { display: block; }

.qw-pickpackage__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-pickpackage__price {
  display: block;
  margin: 2px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-value-blue);
}

.qw-pickpackage__bullet {
  display: block;
  margin-top: 2px;
  font-size: 11px;                      /* AppTheme.fontXs */
  line-height: 1.35;
  color: var(--brand-text-muted);
}


/* A finished step is a way back to it. */
.qw-stepper__back {
  display: contents;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.qw-stepper__back:hover .qw-stepper__dot { outline: 2px solid rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------------ */
/* Checkout, from payment_method_screen's CheckoutBody.                 */
/* ------------------------------------------------------------------ */

.qw-securebanner {
  display: flex;
  align-items: center;
  gap: 8px;                             /* SizedBox(width: 8) */
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ECFDF5;
  color: var(--brand-status-open);
  font-size: 14px;                      /* AppTheme.fontBody */
  font-weight: 600;
}

.qw-checkoutlines {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.qw-checkoutlines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.qw-paymethods { list-style: none; margin: 0; padding: 0; }

.qw-paymethod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--brand-hairline);
  font-size: 14px;
  color: var(--brand-heading-gray);
  cursor: pointer;
}

.qw-paymethod input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid var(--brand-facet-border);
  border-radius: 50%;
  cursor: pointer;
}

.qw-paymethod input:checked {
  border-color: var(--brand-action-blue);
  background:
    radial-gradient(circle, var(--brand-action-blue) 0 4px, transparent 5px);
}

.qw-paymethod svg { flex: none; color: var(--brand-label-gray); }

/* The card's own details, under the methods. */
.qw-carddetails { margin-top: 16px; }

.qw-carddetails__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qw-checkouttotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--brand-hairline);
  font-size: 16px;                      /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-heading-gray);
}


/* Two fields to a row, each still under its own label. */
.qw-fieldgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qw-fieldgrid > .qw-field { min-width: 0; }

@media (max-width: 560px) {
  .qw-fieldgrid { grid-template-columns: 1fr; }
}

/*
  Card details belong to the card, so they appear with it and go away for
  Cash on Delivery. The radios are a sibling of the details, so the sheet
  answers the choice itself - no script, and nothing to get out of step
  with what is actually selected.
*/
.qw-carddetails { display: none; }

.qw-paymethods:has(input[value="card"]:checked) ~ .qw-carddetails { display: block; }


/* ------------------------------------------------------------------ */
/* The app's chevron on a select, and the payment result states.        */
/* ------------------------------------------------------------------ */

select.qw-field__input {
  appearance: none;
  -webkit-appearance: none;
  /* Room for the chevron, which sits 14px in from the edge. */
  padding-inline-end: 40px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

[dir="rtl"] select.qw-field__input { background-position: left 14px center; }

.qw-payresult {
  padding: 8px 0 4px;
  text-align: center;
}

.qw-payresult__logo { margin-bottom: 32px; }

.qw-payresult__title {
  margin: 0;
  font-size: 20px;                      /* AppTheme.fontXl */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-payresult__body {
  margin: 8px 0 24px;                   /* SizedBox(height: 8) then 24 */
  font-size: 14px;                      /* AppTheme.fontBody */
  line-height: 1.5;
  color: var(--brand-text-muted);
}

.qw-payresult__lines { text-align: start; }

/* The lock inside a turning ring, as the app draws it. */
.qw-payspinner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  color: var(--brand-action-blue);
}

.qw-payspinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--brand-hairline);
  border-top-color: var(--brand-action-blue);
  border-radius: 50%;
  animation: qw-spin 900ms linear infinite;
}

@keyframes qw-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .qw-payspinner::before { animation-duration: 3s; }
}

/* Declined: the app's 96px disc in its own red. */
.qw-payresult__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: #FFDAD6;
  color: #BA1A1A;
}

.qw-payresult__help {
  margin-top: 24px;
  font-size: 12px;                      /* AppTheme.fontSm */
  line-height: 1.5;
  color: var(--brand-text-muted);
  text-align: start;
}

.qw-payresult__help strong { display: block; color: var(--brand-heading-gray); }


/* ------------------------------------------------------------------ */
/* The order popup, from order_detail_screen.                           */
/* ------------------------------------------------------------------ */

.qw-orderpop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.qw-orderpop:target { display: flex; }

.qw-orderpop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 1, 48, 0.45);     /* AppTheme.brandChromeNavy, dimmed */
}

.qw-orderpop__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 16px;
  background: var(--brand-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.qw-orderpop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.qw-orderpop__title {
  margin: 0;
  font-size: 18px;                      /* AppTheme.fontLg */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-orderpop__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qw-orderpop__save {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.qw-orderpop__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-surface-tint);
  color: var(--brand-heading-gray);
}

.qw-orderpop__lines {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-orderpop__lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.qw-orderpop__lines li span:last-child {
  color: var(--brand-heading-gray);
  font-weight: 600;
  text-align: end;
}


/*
  The form box keeps one height across the journey. Processing and the two
  outcomes are short, so the card used to halve in size just as the reader
  reached the end of it.
*/
.qw-concierge2col__side { min-height: 620px; }

/* The result states sit in the middle of that height rather than at its top. */
.qw-concierge2col__side:has(.qw-payresult) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 980px) {
  .qw-concierge2col__side { min-height: 0; }
}

/* A story card keeps its width in the scrolling row. */
.qw-stories > .qw-story { flex: 0 0 auto; }

/* What the save did, under the thank you. */
.qw-payresult__saved {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: #16A34A;
}

/* ------------------------------------------------------------------ */
/* A blog post: the article at a readable measure, its related ones     */
/* alongside. blog_post_screen is one column on a phone; the width      */
/* here is what the sidebar is for.                                     */
/* ------------------------------------------------------------------ */

.qw-post {
  display: grid;
  grid-template-columns: minmax(0, 760px) 340px;
  gap: 48px;
  align-items: start;
  /* Centred: an article does not get wider than it reads. */
  max-width: 1180px;
  margin: 8px auto 0;
}

.qw-post__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.qw-post__category {
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #003F9C;                       /* qw.valueBlue */
}

.qw-post__trending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--brand-surface-tint, #EEF2FF);
  font-size: 11px;
  font-weight: 600;
  color: #003F9C;
}

.qw-post__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C3C6D6;
}

.qw-post__title {
  margin: 8px 0 0;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-post__actions {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-post__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;                   /* AppTheme.radiusMd */
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 500;
  color: #003F9C;
  text-decoration: none;
}

.qw-post__action:hover { background: var(--brand-surface-tint, #F3F5F9); }

.qw-post__hero {
  margin: 0 0 20px;
  border-radius: 12px;                  /* AppTheme.cardRadius */
  overflow: hidden;
  background: #2B3A55;
}

.qw-post__hero img {
  display: block;
  width: 100%;
  height: clamp(240px, 30vw, 420px);
  object-fit: cover;
}

.qw-post__lead {
  margin: 0 0 8px;
  font-size: 18px;                      /* AppTheme.fontLg */
  line-height: 1.6;
  color: var(--brand-heading-gray);
}

.qw-post__h2 {
  margin: 28px 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-post__p {
  margin: 0 0 14px;
  font-size: 16px;                      /* AppTheme.fontMd */
  line-height: 1.7;
  /* A section's text keeps its line breaks: an editor writes several
     paragraphs under one heading, and the app draws them as typed. */
  white-space: pre-line;
  color: var(--brand-text-muted);
}

.qw-post__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--brand-bg-subtle, #f6f7f9);
}

.qw-post__authorimg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.qw-post__authorname {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

/* The name links to the writer's own site when one is set: same weight
   and colour, underlined so it reads as a link. */
.qw-post__authorname a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.qw-post__authortitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

/* The writer's profiles: a row of 16px marks under the title, grey until
   hovered, each its own tap target. */
.qw-post__socials {
  display: flex;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.qw-post__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--brand-text-muted);
}

.qw-post__socials a:hover { color: var(--brand-action-blue); background: rgba(37, 99, 235, 0.08); }

.qw-post__side { position: sticky; top: 24px; }

.qw-post__sidetitle {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

/* One to a row in the sidebar, whatever the grid does elsewhere. */
.qw-articles--stack { grid-template-columns: 1fr; margin-top: 0; }

.qw-post__allposts {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #003F9C;
}

/* The related list under the article belongs to narrow screens only. */
.qw-post__relatedfoot { display: none; margin-top: 32px; }

@media (max-width: 1100px) {
  .qw-post { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qw-post__side { display: none; }
  .qw-post__relatedfoot { display: block; }
  .qw-post__title { font-size: 28px; }
}

/* Share, and what Save says - both :target panels, no script. */
.qw-sharepop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.qw-sharepop:target { display: flex; }

.qw-sharepop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 1, 48, 0.45);
}

.qw-sharepop__panel {
  position: relative;
  width: min(420px, 100%);
  padding: 20px;
  border-radius: 16px;
  background: var(--brand-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.qw-sharepop__panel--note { text-align: center; }

.qw-sharepop__note {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--brand-heading-gray);
}

.qw-sharepop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.qw-sharepop__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-sharepop__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-surface-tint, #F3F5F9);
  color: var(--brand-heading-gray);
}

.qw-sharepop__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.qw-sharepop__links a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-heading-gray);
  text-align: center;
  text-decoration: none;
}

.qw-sharepop__links a:hover { background: var(--brand-surface-tint, #F3F5F9); }

/* ------------------------------------------------------------------ */
/* The blog index at desk width: a featured article reads as a card     */
/* with its picture beside it, not as a letterbox strip across 1760px.  */
/* ------------------------------------------------------------------ */

@media (min-width: 1000px) {
  .qw-blogfeature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    align-items: stretch;
    border-radius: 12px;                /* AppTheme.cardRadius */
  }

  .qw-blogfeature__media { height: 100%; }
  .qw-blogfeature__media img { height: 340px; }

  .qw-blogfeature__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
  }

  .qw-blogfeature__title { font-size: 28px; line-height: 1.25; }
}

/* Rows that line up: every card the same height whatever its title. */
.qw-article { align-self: stretch; }

/* ------------------------------------------------------------------ */
/* Article rows: three across, four when there is room for four.       */
/* The 370px minimum dropped a 900px window to one card a row.         */
/* ------------------------------------------------------------------ */

.qw-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 860px) {
  .qw-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
  .qw-articles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .qw-articles { grid-template-columns: minmax(0, 1fr); }
}

/* A narrower card keeps its picture in proportion to it. */
@media (max-width: 1200px) {
  .qw-article__thumb { flex: 0 0 96px; width: 96px; }
}

/* The sidebar's list stays one to a row at every width. */
.qw-articles--stack,
.qw-post__side .qw-articles { grid-template-columns: minmax(0, 1fr); }

/* The carousel between them spans the row rather than sitting in a cell. */
.qw-articles__ad { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ */
/* Filter chips that open. A details element, so the sheet works with   */
/* nothing loaded; every choice inside is a link to the filtered URL.   */
/* ------------------------------------------------------------------ */

.qw-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
  /* An open sheet hangs out of this row; a scrolling row would clip it. */
  overflow: visible;
}

.qw-filterdrop { position: relative; }

.qw-filterdrop > summary.qw-filterchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.qw-filterdrop > summary::-webkit-details-marker { display: none; }

.qw-filterdrop[open] > summary.qw-filterchip,
.qw-filterdrop.is-on > summary.qw-filterchip {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: #FFFFFF;
}

.qw-filterdrop[open] > summary svg { transform: rotate(180deg); }

.qw-filterdrop__sheet {
  position: absolute;
  z-index: 40;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  width: 280px;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

@media (max-width: 560px) {
  /* Across the screen, not hanging off it. The sheet is 280px wide and
     starts at its chip's left edge, and the bar puts three chips to a row
     on a phone - so every chip past the first opened a panel that ran off
     the right edge, the last of them by 160px on a 360px screen, and the
     page scrolled sideways to a width it could not show. Half of Brand's
     options could not be reached at all.

     Fixed rather than absolute because the chip's own wrapper is the
     containing block - it holds the clear button, which has to stay
     anchored to the chip - and that wrapper is only as wide as the chip.
     The cost is that the panel holds its place if the page is scrolled
     while it is open; the alternative was options nobody could tap. */
  .qw-filterdrop__sheet {
    position: fixed;
    inset-inline: 16px;
    top: auto;
    width: auto;
    max-height: 60vh;
  }
}

.qw-filterdrop__title {
  margin: 0 0 8px;
  font-size: 12px;                      /* AppTheme.fontSm */
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-text-muted);
}

.qw-filterdrop__list { margin: 0; padding: 0; list-style: none; }

.qw-filterdrop__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  font-size: 14px;                      /* AppTheme.fontBody */
  color: var(--brand-heading-gray);
  text-decoration: none;
}

.qw-filterdrop__option:hover { background: var(--brand-surface-tint, #F3F5F9); }

.qw-filterdrop__option.is-on { color: var(--brand-action-blue); font-weight: 600; }

.qw-filterdrop__empty {
  margin: 0;
  padding: 6px 10px 2px;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.qw-filterdrop__clear,
.qw-filterclear {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #BA1A1A;
  text-decoration: none;
}

.qw-filterclear { margin-top: 0; }

/* The tile a list is filtered by, and the way back to all of them. */
.qw-tile.is-on {
  border-color: var(--brand-action-blue);
  box-shadow: inset 0 0 0 1px var(--brand-action-blue);
}

.qw-cattabs__active {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

/* ------------------------------------------------------------------ */
/* Photographs on an ad form: the dashed dropzone from                  */
/* photo_upload_section, and the strip of what has been added.          */
/* ------------------------------------------------------------------ */

.qw-photoupload { margin: 20px 0 8px; }

/* The input itself is the label's business; it stays reachable by
   keyboard rather than being display:none. */
.qw-photoupload__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.qw-photoupload__file:focus-visible + .qw-photoupload__add {
  outline: 2px solid var(--brand-action-blue);
  outline-offset: 2px;
}

.qw-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  border: 1.5px dashed var(--brand-hairline);
  border-radius: 12px;                  /* AppTheme.cardRadius */
  background: var(--brand-surface);
  color: var(--brand-action-blue);
  text-align: center;
  cursor: pointer;
}

.qw-dropzone:hover { background: var(--brand-surface-tint, #F3F5F9); }

.qw-dropzone__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-dropzone__hint {
  font-size: 12px;                      /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-photoupload__add {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 16px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.qw-photoupload__error {
  margin: 10px 0 0;
  font-size: 13px;
  color: #BA1A1A;
}

.qw-photoupload__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.qw-photostrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.qw-photostrip__item {
  position: relative;
  width: 120px;
}

.qw-photostrip__media {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;                   /* AppTheme.radiusMd */
  background: #2B3A55;
}

.qw-photostrip__remove {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  cursor: pointer;
}

.qw-photostrip__cover,
.qw-photostrip__make {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 4px 0;
  border: 0;
  border-radius: 4px;
  font-size: 11px;                      /* AppTheme.fontXs */
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.qw-photostrip__cover {
  background: var(--brand-action-blue);
  color: #FFFFFF;
  cursor: default;
}

.qw-photostrip__make {
  background: var(--brand-surface-tint, #F3F5F9);
  color: var(--brand-heading-gray);
}

.qw-photostrip__kind {
  position: absolute;
  bottom: 30px;
  inset-inline-start: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
}

/* My Ads: the card carries its picture, as the app's row does. */
.qw-adrow { position: relative; }

.qw-adrow__thumb {
  position: relative;
  float: inline-start;
  width: 96px;
  height: 72px;
  margin-inline-end: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: #2B3A55;
}

.qw-adrow__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qw-adrow__ribbon {
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.qw-adrow__count {
  position: absolute;
  inset-inline-end: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
}

/* The ad's own gallery: the same strip, at a size worth looking at. */
.qw-photostrip--wide .qw-photostrip__item { width: 200px; }

.qw-photostrip--wide .qw-photostrip__media { width: 200px; height: 150px; }

/* ------------------------------------------------------------------ */
/* The logo, with its wheels turning - QwLogo's own pivots and speeds.  */
/* ------------------------------------------------------------------ */

.qw-logo {
  position: relative;
  aspect-ratio: 3072 / 2048;             /* the artwork's own */
  margin-inline: auto;
}

.qw-logo__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.qw-logo__wheel--q {
  transform-origin: 13.1097% 53.937%;
  animation: qw-logo-spin 500ms linear infinite;
}

.qw-logo__wheel--o {
  transform-origin: 81.9775% 54.2871%;
  animation: qw-logo-spin 417ms linear infinite;
}

@keyframes qw-logo-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .qw-logo__wheel--q,
  .qw-logo__wheel--o { animation: none; }
}

/* The block the two of them sit in, above the footer of every page. */
.qw-poweredblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 16px 24px 24px;
}

.qw-poweredblock .qw-poweredby { color: rgba(255, 255, 255, 0.65); }

/* The mark drawn white, the way the side bar draws it: the maroon
   wordmark on navy is barely there. */
.qw-poweredblock .qw-logo__layer { filter: brightness(0) invert(1); }

/* The artwork carries clear space above the car; pulled up so the mark
   sits close under "Powered By" rather than a band below it. */
.qw-poweredblock .qw-logo { margin: -28px 0 0; }

/* ------------------------------------------------------------------ */
/* An ad form: the app's own sections, each a block of fields.          */
/* ------------------------------------------------------------------ */

.qw-adpage .wrap,
.qw-adform { max-width: 720px; }

.qw-adsection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--brand-hairline);
}

.qw-adsection:first-of-type { border-top: 0; }

.qw-adsection__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.qw-adsection__title {
  margin: 0 0 12px;
  color: var(--brand-heading-gray);
}

.qw-adsection__head .qw-adsection__title { margin-bottom: 0; }

.qw-adcheck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brand-heading-gray);
  cursor: pointer;
}

.qw-adcheck--row { margin-top: 12px; }

.qw-field__input--area {
  height: auto;
  padding-block: 10px;
  line-height: 1.5;
  resize: vertical;
}

/* "Select Suitable Keywords" - plain toggles, as the app draws them. */
.qw-adchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qw-adchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: var(--brand-surface);
  font-size: 13px;
  color: var(--brand-heading-gray);
  cursor: pointer;
}

.qw-adchip:has(input:checked) {
  border-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
  font-weight: 600;
}

.qw-adform__post {
  display: block;
  width: 100%;
  margin-top: 28px;
  border: 0;
  cursor: pointer;
}

/* The phone field inside an ordinary labelled field. */
.qw-field .qw-phonefield {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;                          /* the height every other field is */
  padding: 0 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: var(--brand-surface);
}

.qw-field .qw-phonefield__code {
  font-size: 14px;                       /* AppTheme.fontBody */
  color: var(--brand-text-muted);
  border-inline-end: 1px solid var(--brand-hairline);
  padding-inline-end: 12px;
}

.qw-field .qw-phonefield__input { font-size: 14px; }

/* ------------------------------------------------------------------ */
/* What do you want to sell: taller cards, and the concierge banner.    */
/* ------------------------------------------------------------------ */

.qw-selltiles { gap: 16px; }

.qw-selltile {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--brand-hairline);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.qw-selltile:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.qw-selltile__label { font-size: 17px; font-weight: 600; }

/* The offer for a seller who would rather not do it themselves. */
.qw-sellbanner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding: 28px 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, #06035E 0%, #030130 100%);
  color: #FFFFFF;
}

.qw-sellbanner__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.qw-sellbanner__body {
  margin: 6px 0 0;
  font-size: 14px;                       /* AppTheme.fontBody */
  color: rgba(255, 255, 255, 0.8);
}

.qw-sellbanner__cta {
  flex: 0 0 auto;
  padding: 13px 26px;
  border-radius: 8px;                    /* AppTheme.radiusMd, as Driving Test */
  background: #FFFFFF;
  color: #06035E;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.qw-sellbanner__cta:hover { background: rgba(255, 255, 255, 0.9); }

/* Brand and model reload the page to fill the next list. */
.qw-cascade { display: flex; gap: 8px; }

.qw-cascade__select { flex: 1 1 auto; min-width: 0; }

.qw-cascade__go {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  background: var(--brand-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-action-blue);
  cursor: pointer;
}

/* With a script, the select submits itself and the button is redundant. */
.qw-js .qw-cascade__go { display: none; }

/* ------------------------------------------------------------------ */
/* Customer reviews, as product_reviews_section draws them, and the      */
/* form for writing one.                                                */
/* ------------------------------------------------------------------ */

.qw-reviews { margin-top: 28px; }

.qw-reviewlist { margin: 8px 0 0; padding: 0; list-style: none; }

.qw-review {
  padding: 14px 0;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-review__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;                       /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-review__stars { color: var(--brand-action-blue); letter-spacing: 1px; }

.qw-review__author { font-weight: 600; color: var(--brand-heading-gray); }

.qw-review__date { margin-inline-start: auto; }

.qw-review__title {
  margin: 6px 0 2px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-review__body { margin: 0; color: var(--brand-text-muted); line-height: 1.5; }

.qw-reviewform {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;                   /* AppTheme.cardRadius */
  background: var(--brand-surface);
}

.qw-reviewform__title {
  margin: 0;
  font-size: 16px;                       /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-reviewform__for { margin: 2px 0 12px; color: var(--brand-text-muted); }

.qw-reviewform .qw-prefsave {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 0;
  cursor: pointer;
}

/* The rating: radios drawn as stars. Written 5 to 1 so a sibling
   selector can light every star up to the one chosen. */
.qw-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.qw-stars__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.qw-stars__label {
  font-size: 26px;
  line-height: 1;
  color: var(--brand-hairline);
  cursor: pointer;
}

.qw-stars__radio:checked ~ .qw-stars__label,
.qw-stars__label:hover,
.qw-stars__label:hover ~ .qw-stars__label { color: var(--brand-action-blue); }

.qw-stars__radio:focus-visible + .qw-stars__label { outline: 2px solid var(--brand-action-blue); }

.qw-reviews__signin { margin-top: 16px; }

/* Taking your own review down: plainly available, quietly styled. */
.qw-reviewform__withdraw {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 0;
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: transparent;
  color: #BA1A1A;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.qw-reviewform__withdraw:hover { background: rgba(186, 26, 26, 0.06); }

/* The five marks a car review carries, each its own row of stars. */
.qw-ratecats { margin: 0 0 8px; padding: 0; list-style: none; }

.qw-ratecat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-ratecat__name { font-size: 14px; color: var(--brand-heading-gray); }

.qw-ratecat .qw-stars { margin: 0; }

.qw-ratecat .qw-stars__label { font-size: 22px; }

/* ------------------------------------------------------------------ */
/* My Ads: the heading row, the status menu, the dashboard and the      */
/* analyzer card.                                                       */
/* ------------------------------------------------------------------ */

.qw-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.qw-pagehead h1 { margin: 0; }

/* Update Status: the app's menu, as a details element. */
.qw-statusmenu {
  position: relative;
  /* Back where the app has it: the end of the row the counts sit on. */
  margin-inline-start: auto;
}

.qw-adrow__counts { display: flex; align-items: center; gap: 14px; }

.qw-statusmenu > summary { list-style: none; cursor: pointer; }

.qw-statusmenu > summary::-webkit-details-marker { display: none; }

.qw-statusmenu__sheet {
  position: absolute;
  z-index: 30;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  padding: 6px;
  border-radius: 12px;                   /* AppTheme.cardRadius */
  background: var(--brand-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.qw-statusmenu__item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-heading-gray);
  font: inherit;
  font-size: 14px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.qw-statusmenu__item:hover { background: var(--brand-surface-tint, #F3F5F9); }

.qw-adstate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
}

.qw-adstate__badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-surface-tint, #EEF2FF);
  color: var(--brand-action-blue);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.qw-adstate__badge.is-featured { background: rgba(212, 175, 55, 0.16); color: #8A6D1B; }

.qw-adactions { display: flex; gap: 10px; margin: 16px 0 4px; }

.qw-adactions > a { display: inline-block; }

/* The AI Analyzer, to _AiAnalyzerCard's own numbers: a solid #C5DAFA
   card at radius 12 and no border, the heading Bold 20 in #06025E, and
   the score a plain Regular 40 on white - not the bordered box with a
   progress bar and a coloured grade this was before. */
/* ------------------------------------------------------------------ */
/* The AI Analyzer: the score on the left, what to do about it on the   */
/* right.                                                               */
/* ------------------------------------------------------------------ */

.qw-ai {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  border-radius: 12px;                   /* AppTheme.cardRadius */
  overflow: hidden;                      /* the two panels share the corners */
}

/* The score panel. It sets its own width and then stops growing, so the
   list beside it takes the rest of a wide screen; below 560px both go to
   full width and it sits on top. */
.qw-ai__score {
  flex: 0 1 220px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--brand-chrome-navy);
  color: #FFFFFF;
}

.qw-ai__name {
  margin: 0;
  font-size: 20px;                       /* AppTheme.fontXl */
  font-weight: 700;
}

.qw-ai__label {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* The reason anybody opens this card, at the size that says so. */
.qw-ai__pct {
  margin: 28px 0 0;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

/* Green when the number is good, amber and red as it falls - the word
   and its colour say the same thing, so neither carries it alone. */
.qw-ai__grade {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--qw-grade, #22C55E);
}

.qw-ai__foot {
  margin: auto 0 0;
  padding-top: 24px;
  font-size: 12px;                       /* AppTheme.fontSm */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.qw-ai__actions {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #DFE3F8;
}

.qw-ai__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand-text-muted);
}

.qw-ai__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-chrome-navy);
}

.qw-ai__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One pending action. The text takes the room and the two controls keep
   their own, so a long line wraps rather than pushing them off the row. */
.qw-ai__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFFFFF;
}

.qw-ai__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;                       /* AppTheme.fontBody */
  color: var(--brand-heading-gray);
}

.qw-ai__row.is-critical .qw-ai__text { color: #A31616; }

/* A word, not a box: an outlined button beside a cross made "do this"
   and "no" look like the same kind of thing. */
.qw-ai__do {
  flex: none;
  color: var(--brand-action-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.qw-ai__do:hover { text-decoration: underline; }

.qw-ai__dismiss { flex: none; margin: 0; }

.qw-ai__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-label-gray);
  cursor: pointer;
}

.qw-ai__x:hover {
  background: rgba(3, 1, 48, 0.07);
  color: var(--brand-chrome-navy);
}

.qw-ai__done {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 14px;
  color: var(--brand-text-muted);
}

/* The only filled control on the card. */
.qw-ai__boost {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 2px;
  border-radius: 10px;
  background: var(--brand-chrome-navy);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.qw-ai__boost:hover { background: #0A0752; }

@media (max-width: 560px) {
  /* The score above its actions, not squeezed into a third of a phone. */
  .qw-ai__score { flex-basis: 100%; }
  .qw-ai__pct { margin-top: 16px; font-size: 44px; }
  .qw-ai__foot { padding-top: 14px; }
}

/* Show Dashboard: outlined, full width, 36 high. */
.qw-showdash {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-top: 16px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 4px;
  color: var(--brand-text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* Manage Gallery on the owner's own profile. */
.qw-bizgallery { margin-top: 4px; }

.qw-bizgallery__hero {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
}

.qw-bizgallery__hero img,
.qw-bizgallery__hero video {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #000000;
}

.qw-bizgallery__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.qw-bizgallery__item { position: relative; }

.qw-bizgallery__item img,
.qw-bizgallery__item video {
  display: block;
  width: 120px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  background: #000000;
}

.qw-bizgallery__remove {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* The dashboard under it. */
.qw-addash { margin-top: 28px; }

.qw-addash__title {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-text-muted);
}

.qw-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* InventoryStatCard, which is the tile every dashboard in the app uses:
   white at radius 6 with a soft shadow and no border, the value first at
   16 bold and the label under it at 10. */
.qw-metric {
  padding: 8px 6px;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.qw-metric__value {
  display: block;
  font-size: 16px;                       /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-metric__label {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--brand-text-muted);
}

/* The owner's own profile: the name and the chips under it. */
.qw-bizhead__name { margin: 0 0 8px; font-size: 20px; }

.qw-bizhead__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.qw-bizchip {
  padding: 4px 10px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--brand-text-secondary);
}

/* Show Dashboard opens in place. */
.qw-dash { margin-top: 16px; }

.qw-dash > .qw-showdash { margin-top: 0; cursor: pointer; list-style: none; }

.qw-dash > .qw-showdash::-webkit-details-marker { display: none; }

.qw-dash__periods {
  display: flex;
  gap: 16px;
  margin: 12px 0;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-dash__period {
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  color: var(--brand-text-secondary);
  font-size: 14px;
  text-decoration: none;
}

.qw-dash__period.is-on {
  border-bottom-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
  font-weight: 600;
}

.qw-places { margin: 0; padding: 0; list-style: none; }

.qw-place {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
}

.qw-place__name { flex: 0 0 160px; color: var(--brand-heading-gray); }

.qw-place__bar {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-hairline);
  overflow: hidden;
}

.qw-place__fill { display: block; height: 100%; background: var(--brand-action-blue); }

.qw-place__value { flex: 0 0 48px; text-align: end; color: var(--brand-text-muted); }

/* The sign-in notice on an ad form: a warning, and it looks like one. */
.qw-signinnote {
  border: 1px solid rgba(186, 26, 26, 0.28);
  background: rgba(186, 26, 26, 0.07);
}

/* The two actions are buttons, not banners: they take their own width. */
.qw-adactions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 150px;
  padding: 11px 20px;
  margin: 0;
  border-radius: 8px;                    /* AppTheme.radiusMd */
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* The home page's hero: five panels, one at a time.                    */
/* ------------------------------------------------------------------ */

.qw-hero { margin: 8px 0 24px; }   /* 24 between blocks, like the rest */

/* The carousel is not the photograph pane that shares its class: it is as
   tall as its slides plus the dots under them, it does not crop, and its
   dots sit on the page rather than on the pane's dark ground. Wearing the
   pane's rules, its dots were cut off the bottom of a fixed height and
   left floating over the section below. */
.qw-hero:has(.qw-hero__track) {
  height: auto;
  overflow: visible;
  background: none;
}

.qw-hero__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.qw-hero__track::-webkit-scrollbar { display: none; }

.qw-hero__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  background: #030130;                   /* AppTheme.brandChromeNavy */
  isolation: isolate;
}

.qw-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* The words sit on a wash of the brand's own navy, so they read over
   any photograph rather than only over a dark one. */
.qw-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 1, 48, 0.92) 0%,
          rgba(3, 1, 48, 0.75) 45%, rgba(3, 1, 48, 0.15) 100%);
}

.qw-hero__text {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 44px 40px;
  color: #FFFFFF;
}

.qw-hero__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;                       /* AppTheme.fontSm */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #D4AF37;                        /* AppTheme.eliteGold */
}

.qw-hero__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  color: #FFFFFF;
}

.qw-hero__body {
  margin: 12px 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* The corner, not under the words: the slide's text sits in a column on
   the left and the photograph fills the rest, so a button under the last
   line landed in the middle of the panel with nothing to anchor it. In
   the corner it reads as the slide's own action. */
.qw-hero__cta {
  position: absolute;
  z-index: 1;                            /* above the slide's own scrim */
  inset-inline-end: 40px;
  bottom: 44px;
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: #FFFFFF;
  color: #06035E;                        /* AppTheme.brandActionBlue */
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* Below the text on a narrow screen, where a corner would sit on top of
   the words rather than beside them. */
@media (max-width: 720px) {
  .qw-hero__cta {
    position: static;
    margin-top: 16px;
  }
}

.qw-hero__cta:hover { background: rgba(255, 255, 255, 0.88); }

.qw-hero__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.qw-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-hairline);
}

.qw-hero__dot:hover,
.qw-hero__dot:focus-visible { background: var(--brand-action-blue); }

@media (max-width: 700px) {
  .qw-hero__slide { min-height: 300px; }
  .qw-hero__text { padding: 28px 22px; }
}

/* A photograph on its way: the thumbnail at once, a bar that fills as
   the bytes go, and a pulse while the server stores them. */
.qw-photostrip__item.is-pending .qw-photostrip__media { opacity: 0.55; }

.qw-photostrip__media--blank { display: block; width: 120px; height: 90px; border-radius: 8px; background: #2B3A55; }

.qw-photostrip__progress {
  display: block;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--brand-hairline);
}

.qw-photostrip__progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--brand-action-blue);
  transition: width 0.2s ease-out;
}

.qw-photostrip__item.is-processing .qw-photostrip__progress i {
  width: 100%;
  animation: qw-pulse 1s ease-in-out infinite;
}

.qw-photostrip__item.is-failed .qw-photostrip__progress i { background: #BA1A1A; }

@keyframes qw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* The Filter chip: every facet in one sheet, and a badge for how many
   are set - the app's leading pill and its "Refine your search". */
.qw-filterchip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-inline-start: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
}

.qw-filterdrop__sheet--all { width: min(92vw, 420px); max-height: 70vh; }

.qw-filterall__label {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-text-secondary);
}

.qw-filterall__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qw-filterall__option {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 16px;
  font-size: 13px;
  color: var(--brand-heading-gray);
  text-decoration: none;
  background: var(--brand-surface);
}

.qw-filterall__option.is-on {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: #FFFFFF;
}

/* The tools beside the dropzone, and the dashboard's own tab row. */
.qw-photoupload__tools { display: flex; gap: 8px; margin: 10px 0 0; }

.qw-photoupload__add { text-decoration: none; }

.qw-js .qw-photoupload__submit { display: none; }

.qw-dashtabs {
  display: flex;
  gap: 24px;
  margin: 12px 0 16px;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-dashtab {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-muted);
  text-decoration: none;
}

.qw-dashtab.is-on {
  border-bottom-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
}

/* The back arrow that opens every breadcrumb. */
/* The arrow itself, with no box around it. */
.qw-back {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 6px;
  vertical-align: middle;
  color: var(--brand-text-muted);
  text-decoration: none;
}

.qw-back:hover { color: var(--brand-action-blue); }

/* An ad's counts and its status menu share one row. */
.qw-adrow__counts {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 0;
}

/* The icon each side-bar row opens with, drawn white on the navy. */
.qw-morerow__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.qw-sidenav .qw-morerow__icon {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

.qw-sidenav .qw-morerow > a:hover .qw-morerow__icon { opacity: 1; }

.qw-sidenav .qw-morerow.is-soon .qw-morerow__icon { opacity: 0.4; }

/* --------------------------------------------------- one of my ads: photos */

.qw-adshots {
  position: relative;
  margin: 0 0 20px;
  border-radius: 12px;                   /* AppTheme.cardRadius */
  overflow: hidden;
  background: #F3F4F6;                   /* AppTheme.brandSurfaceTint */
}

.qw-adshots__one,
.qw-adshots__media {
  display: block;
  width: 100%;
  height: 300px;                         /* _HeroCarousel height: 300 */
  object-fit: cover;
}

.qw-adshots__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.qw-adshots__track::-webkit-scrollbar { display: none; }

.qw-adshots__frame {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* How many there are, the way the cards count them. */
.qw-adshots__count {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  padding: 2px 10px;
  border-radius: 999px;                  /* AppTheme.radiusPill */
  background: rgba(3, 1, 48, 0.72);      /* AppTheme.brandChromeNavy */
  color: #FFFFFF;
  font-size: 12px;                       /* AppTheme.fontSm */
}

/* The four numbers under a rule: year, distance, fuel, gearbox. */
.qw-keyspecs {
  display: flex;
  margin: 16px 0 20px;
  padding: 16px 0 0;
  border-top: 1px solid var(--brand-hairline);
  list-style: none;
}

.qw-keyspec {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--brand-text-muted);
  font-size: 14px;                       /* AppTheme.fontBody */
}

.qw-keyspec span {
  color: var(--brand-heading-gray);
  font-weight: 500;
  text-align: center;
}

/* Show / Hide Dashboard. */
.qw-dashopen { margin: 0 0 12px; }

.qw-dashtoggle { margin: 0 0 20px; }

.qw-dashtoggle__button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 4px;                    /* the app's own 4 on this button */
  color: var(--brand-text-secondary);
  font-size: 14px;                       /* AppTheme.fontBody */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.qw-dashtoggle__button::-webkit-details-marker { display: none; }

.qw-dashtoggle__button:hover { border-color: var(--brand-action-blue); }

.qw-dashtoggle[open] .qw-dashtoggle__button { margin-block-end: 12px; }

/* Edit, under the analyzer: outlined in the link blue the app uses. */
.qw-editad {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--brand-link-blue);
  border-radius: 8px;                    /* AppTheme.radiusMd */
  color: var(--brand-link-blue);
  font-weight: 600;
  text-decoration: none;
}

.qw-editad:hover { background: rgba(0, 85, 204, 0.06); }

/* ------------------------------------------------------- the ad is posted */

.qw-posted {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 1, 48, 0.55);      /* AppTheme.brandChromeNavy */
}

.qw-posted__card {
  width: min(420px, 100%);
  padding: 32px 28px 24px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(3, 1, 48, 0.35);
  text-align: center;
  animation: qw-posted-in 260ms ease-out both;
}

@keyframes qw-posted-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .qw-posted__card { animation: none; }
}

.qw-posted__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-block-end: 16px;
  border-radius: 999px;                  /* AppTheme.radiusPill */
  background: rgba(22, 163, 74, 0.12);
  color: #16A34A;
}

.qw-posted__title {
  margin: 0 0 8px;
  font-size: 20px;                       /* AppTheme.fontXl */
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-posted__body {
  margin: 0 0 20px;
  color: var(--brand-text-muted);
  font-size: 14px;                       /* AppTheme.fontBody */
  line-height: 1.5;
}

.qw-posted__actions {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
}

.qw-posted__go,
.qw-posted__more {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;                    /* AppTheme.radiusMd */
  font-weight: 600;
  text-decoration: none;
}

.qw-posted__go {
  background: var(--brand-action-blue);
  color: #FFFFFF;
}

.qw-posted__more {
  border: 1px solid var(--brand-facet-border);
  color: var(--brand-text-secondary);
}

.qw-posted .qw-logo { margin: 0 auto; }

/* ------------------------------------------------------------------ */
/* The five sell kinds, laid out as the services card is: a large icon */
/* beside a heading and the line that says what the vertical is for.   */
/* ------------------------------------------------------------------ */

.qw-selltiles {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.qw-selltile {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 104px;                     /* the services tiles' own floor */
  padding: 16px 18px;
}

.qw-selltile__badge {
  width: 60px;
  height: 60px;
  background: rgba(197, 218, 250, 0.56); /* the services card's tint */
}

.qw-selltile__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.qw-selltile__label { font-size: 16px; }

.qw-selltile__tagline {
  font-size: 12px;                       /* AppTheme.fontSm */
  line-height: 1.45;
  color: #868687;                        /* the services subtitle grey */
}

/* ------------------------------------------------------------------ */
/* The dashboard's controls: the period, the duration it covers, and   */
/* the export - one row, as the app has the picker under its tabs.     */
/* ------------------------------------------------------------------ */

.qw-dashcontrols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

/* Daily / Monthly / Yearly read as the underline tabs they are in the
   app - UnderlineTabRow, equal width - not as pills. */
.qw-periods {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  flex: 1 1 260px;
  min-width: 220px;
  border-bottom: 1px solid var(--brand-hairline);
}

.qw-period {
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 500;                      /* Inter Medium, active or not */
  color: var(--brand-text-muted);
  text-align: center;
  text-decoration: none;
}

.qw-period.is-on {
  border-bottom-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
}

/* Which day, month or year the numbers cover. */
.qw-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  margin: 0;
}

.qw-duration__field {
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font: inherit;
  font-size: 14px;
}

/* The button beside it does what the change listener does; it is only
   hidden once that script has run. */
.qw-js .qw-duration__go { display: none; }

.qw-duration__go,
.qw-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: var(--brand-surface);
  color: var(--brand-action-blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.qw-export:hover,
.qw-duration__go:hover { background: rgba(6, 3, 94, 0.06); }

/* ------------------------------------------------------------------ */
/* Log out, at the foot of the side bar.                               */
/* ------------------------------------------------------------------ */

.qw-signout {
  margin: 4px 12px 24px;
}

.qw-signout__button {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(220, 38, 38, 0.55);
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: transparent;
  color: #F87171;                        /* red, legible on the navy */
  font: inherit;
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.qw-signout__button:hover:not([disabled]) {
  background: rgba(220, 38, 38, 0.12);
  color: #FCA5A5;
}

/* Signed out: still there, plainly unavailable. */
.qw-signout__button[disabled] {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(248, 113, 113, 0.45);
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* The side bar's account head, as the app's More sheet leads with it:  */
/* a gradient band, an avatar hanging off it, the name, View Profile.   */
/* ------------------------------------------------------------------ */

.qw-mehead {
  position: relative;
  margin: 0 0 16px;
  padding: 0 12px 16px;
  text-align: center;
}

.qw-mehead__band {
  height: 72px;
  margin: 0 -12px;
  /* brandNavBarBlue -> brandLinkBlue, the app's own pair. */
  background: linear-gradient(120deg, #06035E 0%, #0055CC 100%);
}

/* 72 in the app, and it overhangs the band by half of itself. */
.qw-mehead__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                      /* a logo fills the circle */
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  background: var(--brand-background, #F5F6FA);
  color: var(--brand-text-muted);
}

/* CompletionBadge: the app's pill, hung off the avatar's 2 o'clock
   corner. Absolute against the header rather than the avatar, because
   the avatar is a 64px circle and the pill is wider than it - "100%
   Complete" more so, and Arabic more again. */
.qw-mehead__badge {
  position: absolute;
  top: 40px;
  inset-inline-start: 50%;
  transform: translateX(6px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  background: var(--brand-action-blue);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #FFFFFF;
  font-size: 10px;                       /* AppTheme.fontXs */
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

[dir="rtl"] .qw-mehead__badge { transform: translateX(-6px); }

.qw-mehead__badge:hover { background: #0a0785; }

.qw-mehead__name {
  margin: 8px 0 10px;
  font-size: 18px;                       /* AppTheme.fontLg */
  font-weight: 700;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 144x36 and fully rounded, as the app draws it. */
.qw-mehead__view {
  display: inline-block;
  min-width: 144px;
  padding: 8px 18px;
  border-radius: 18px;
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 600;
  text-decoration: none;
}

.qw-mehead__view:hover { background: #0a0785; }

/* The mark is brand maroon, which is nearly invisible on the navy bar.
   EVMS solves the same problem by painting the whole logo one flat colour
   (ColorFilter srcIn onPrimary); this is that, in CSS. */
.qw-sidenav .qw-logo__layer {
  filter: brightness(0) invert(1);
}


/* ------------------------------------------------------------------ */
/* Three things that pushed a narrow page sideways.                     */
/* ------------------------------------------------------------------ */

/* The logo is drawn at a fixed width; below about 360px that width is
   wider than the screen it is centred on. */
.qw-logo,
.qw-logo__layer {
  max-width: 100%;
  height: auto;
}

/* The two wheels turn, and a rotated box is wider than the square it came
   from - enough to push a 320px page sideways. Clipping keeps the spin
   inside the mark's own bounds. */
.qw-logo { overflow: clip; }

/* ------------------------------------------------------------------ */
/* The header on a phone: three rows.                                   */
/*                                                                      */
/*   1. the menu, with the bell and the language opposite it            */
/*   2. Post an Ad / My Ads / Chats                                     */
/*   3. the search field, full width                                    */
/*                                                                      */
/* The bell and the language sat on a row of their own under the        */
/* buttons, three rows down from the menu they belong beside, and the   */
/* search field pushed all of it further down still.                    */
/*                                                                      */
/* `display: contents` on the actions is what makes this possible: the  */
/* bell and the language are its children, and they have to become      */
/* items of the header's own row to sit beside the menu while the three */
/* buttons keep a row to themselves. The header's ::before and ::after  */
/* are the two full-width flex items that break the rows - a flex       */
/* container's own pseudo-elements are flex items, which is the only    */
/* way to force a break without wrapping the markup.                    */
/* ------------------------------------------------------------------ */

@media (max-width: 899px) {
  /* No row-gap at all, and the search field carries the one gap that is
     wanted. The menu's row is 40px of tap target around a 22px icon, so
     it already ends 9px below the icon; any row-gap stacks on top of that
     slack and the menu drifts away from the buttons - 4px here read as 17
     between the icon and the button row, against 8 everywhere else. The
     tap target stays 40px; only the space around it goes.

     (A negative margin on the break spacer cannot do this: a flex line's
     cross size does not go below zero.)

     The columns are 8px rather than the 16px the desktop row uses, which
     the buttons inherited once the actions box stopped being their
     parent. */
  /* The bar ends where its last row ends, so the search field's bottom
     edge was the navy's bottom edge. Room underneath it. */
  .header-inner {
    row-gap: 0;
    column-gap: 8px;
    padding-block-end: 10px;
  }

  .qw-headactions { display: contents; }

  /* The menu takes the room, so the bell and the language are pushed to
     the far end of its row. */
  .qw-burger { order: 1; margin-inline-end: auto; }
  .qw-headbell { order: 2; }
  .qw-langpick { order: 3; }

  .header-inner::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .qw-headbtn { order: 5; }
  .header-inner::after { content: ""; order: 6; flex-basis: 100%; height: 0; }
  .qw-headsearch { order: 7; flex-basis: 100%; margin-block-start: 8px; }

  /* The panel now hangs from the header itself, the actions having
     stopped being a box for it to hang from. Held off the edge, which
     the actions row used to do for it. */
  .qw-notifsheet { inset-inline-end: 12px; }
}

@media (max-width: 560px) {
  /* A video card was a fixed 366, wider than a 320 screen. */
  .qw-video { max-width: 100%; }

  /* The header's buttons used to need help wrapping here. They have a
     row of their own now (see the three-row header above), and the
     actions are `display: contents` on a phone, so a rule about how that
     box wraps has nothing left to act on. */
}

/* ------------------------------------------------------------------ */
/* The one-time code: four boxes, as otp_code_field draws them.         */
/* ------------------------------------------------------------------ */

.qw-otp {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.qw-otp__legend {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  color: var(--brand-text-muted);
  font-size: 14px;                       /* AppTheme.fontBody */
  text-align: center;
}

/* 48x56 and radius 8, the app's own measurements. */
.qw-otp__box {
  width: 48px;
  height: 56px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font-size: 20px;                       /* AppTheme.fontXl */
  font-weight: 600;
  text-align: center;
}

.qw-otp__box:focus {
  outline: none;
  border-color: var(--brand-action-blue);
  border-width: 2px;
}

/*
  Which number the code went to.

  It sits inside the 56px the phone screen leaves between its subheadline
  and its field, rather than adding a line of its own - so Continue lands
  at the same height on both screens instead of one line lower.
*/
.qw-auth__sentto {
  margin: -40px 0 18px;
  color: var(--brand-text-muted);
  font-size: 14px;                       /* AppTheme.fontBody */
  text-align: center;
}

/* The four boxes say what they are; a label above them only pushed the
   button down. It stays for a screen reader. */
.qw-otp__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Registration, in the same column as the phone and code screens.      */
/* ------------------------------------------------------------------ */

.qw-authform {
  display: grid;
  gap: 14px;
  text-align: start;
}

/* One field, one line: the hint lives inside it, as QwTextField does. */
.qw-authfield {
  width: 100%;
  height: 56px;                          /* the phone field's own height */
  padding: 0 16px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;                    /* AppTheme.radiusMd */
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font: inherit;
  font-size: 15px;
}

.qw-authfield:focus {
  outline: none;
  border-color: var(--brand-action-blue);
}

.qw-authgroup { display: grid; gap: 4px; }

/* A class that sets display beats the browser's own [hidden] rule, so
   the business category was marked hidden and drawn anyway. This is
   the whole document, not one field: any element given a display by a
   class had the same hole. */
[hidden] { display: none !important; }

.qw-authhint {
  color: var(--brand-text-muted);
  font-size: 12px;                       /* AppTheme.fontSm */
}

/* Individual | Business: one row, two halves, no radio dots. */
.qw-segment {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.qw-segment__legend {
  /* The two halves say what this is; the words are for a screen reader. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qw-segment__option {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-hairline);
  background: var(--brand-surface);
  color: var(--brand-text-secondary);
  font-size: 15px;
  cursor: pointer;
}

/* Rounded at the two outer ends only, so the pair reads as one control. */
.qw-segment__option:first-of-type {
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
}

.qw-segment__option:last-of-type {
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  border-inline-start: 0;
}

.qw-segment__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qw-segment__option:has(input:checked) {
  background: var(--brand-action-blue);
  border-color: var(--brand-action-blue);
  color: #FFFFFF;
  font-weight: 600;
}

/* Keyboard focus has to be visible when the radio itself is not. */
.qw-segment__option:has(input:focus-visible) {
  outline: 2px solid var(--brand-action-blue);
  outline-offset: 2px;
}

/* A rejected value: one red line under the field it belongs to, which is
   what errorText renders in the app. #A31616 is AppTheme.brandStatusClosed,
   the red the app already uses for exactly this. */
.qw-fielderror {
  margin: -8px 0 0;
  color: #A31616;
  font-size: 13px;
  text-align: start;
}

/* The logo turns on these screens too; it is the component, not a flat
   copy of it, so the wheels are the same ones the app spins. */
.qw-auth__logo .qw-logo { margin-inline: auto; }

/* The map under Location. The app draws a 140-tall tile; a real map is
   worth more room than a placeholder was. */
.qw-map {
  display: block;
  width: 100%;
  height: 260px;
  margin: 12px 0;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
}

/* One review, to _BusinessReviewRow's own numbers: a hairline card at
   radius 8, 12 of padding, 12 between one and the next. */
.qw-reviews { margin: 0; padding: 0; list-style: none; }

.qw-review {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  background: var(--brand-surface);
}

.qw-review__head { display: flex; align-items: flex-start; gap: 8px; }

/* 32 across, the app's radius 16, with the writer's initial in it. */
.qw-review__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

.qw-review__who { flex: 1 1 auto; min-width: 0; }

.qw-review__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-review__when {
  display: block;
  font-size: 11px;
  color: var(--brand-text-secondary);
}

.qw-review__stars { flex: 0 0 auto; font-size: 14px; color: #F6B100; }

.qw-review__title {
  margin: 8px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-review__body {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--brand-text-secondary);
}

/* The business's answer: tinted, with a rule down its leading edge. */
.qw-review__reply {
  margin-top: 8px;
  padding: 10px;
  border-inline-start: 3px solid var(--brand-action-blue);
  background: var(--brand-surface-tint, #F2F6FD);
}

.qw-review__replylabel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-heading-gray);
}

.qw-review__replybody { margin: 4px 0 0; font-size: 14px; color: var(--brand-text-secondary); }

.qw-review__replybox { margin-top: 8px; }

.qw-review__replylink {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-action-blue);
  list-style: none;
}

.qw-review__replylink::-webkit-details-marker { display: none; }

/* Report sits in the muted grey the seller app gives it, with the flag;
   "Reported" is the same grey, no longer a control. */
.qw-review__reportlink { color: var(--brand-text-secondary); font-weight: 500; }
.qw-review__reportlink::before { content: "\2691\00a0"; }
.qw-review__reported { margin: 8px 0 0; font-size: 13px; color: var(--brand-label-gray); }

.qw-review__replyfield {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--brand-facet-border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}

/* BusinessChipRow: 44 tall, tinted, radius 8, an 18px icon and one line
   that ellipsizes. Contact Details and Available Services are both built
   from it - the app uses one row for both. */
.qw-chiprows { margin: 8px 0 16px; }

.qw-chiprow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-bottom: 8px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--brand-surface-tint, #F2F6FD);
  color: var(--brand-text-secondary);
  font-size: 14px;
  text-decoration: none;
}

a.qw-chiprow:hover { background: #E7EEFB; }

.qw-chiprow > svg { flex: 0 0 auto; }

.qw-chiprow__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Available Services: rectangular cards along one row, which scrolls
   sideways when a business offers more than the row holds. */
.qw-facilities {
  display: flex;
  gap: 12px;
  margin: 8px 0 20px;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.qw-facilities::-webkit-scrollbar { display: none; }

.qw-facility {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  max-width: 200px;
  padding: 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--brand-action-blue);
}

.qw-facility__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

/* QwEmptyState: centred in 24 of padding, the logo at 120, a 16 gap, the
   title, an 8 gap, the message. */
.qw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  text-align: center;
}

.qw-empty__logo { width: 120px; margin-bottom: 16px; }

.qw-empty__title {
  margin: 0;
  font-size: 16px;                       /* AppTheme.fontMd */
  font-weight: 700;
  color: var(--brand-text-dark, #111827);
}

.qw-empty__message {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--brand-text-secondary);
}

.qw-empty__action {
  margin-top: 20px;
  padding: 0 24px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  background: var(--brand-action-blue);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* The name, where they are and the rating are one block: six between
   each line. It was four and then fourteen, which read as two pieces. */
.wrap.page > h1 + .qw-detail__place { margin-top: 6px; }
.wrap.page > h1 { margin-bottom: 0; }
.qw-detail__place + .qw-detail__rating { margin-top: 6px; }

/* A fixed slot for the count, for the same reason the name above is
   pinned to two lines: a card that reports none should be exactly as
   tall as one that does. */
.qw-business__metric { min-height: 20px; }
.qw-business__head:not(:has(.qw-business__metric))::after {
  content: "";
  display: block;
  height: 20px;
}

/* The shell already puts 4 between its children, so the rows' own
   margins were stacking on top of it and every gap came out at 8. */
.qw-business__shell .qw-shell__content { gap: 4px; }
.qw-business__row,
.qw-business__row + .qw-business__row,
.qw-business__rating { margin-top: 0; }

/* The whole card is one box: the shell held the white background and the
   radius, so the two actions - which are its siblings, not its children -
   hung below the card rather than sitting inside it. */
.qw-business {
  background: var(--brand-surface);
  border-radius: 12px;                   /* AppTheme.cardRadius */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.qw-business > .qw-shell {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* The count is a way into the stock, so it is pressable - but as words
   in the action blue, not a pill with a rule round it. */
.qw-business__metric {
  display: inline-block;
  align-self: flex-start;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--brand-action-blue);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.qw-business__metric:hover { text-decoration: underline; }

/* Two, not four: the count belongs to the name above it. */
.qw-business__head { gap: 2px; }

/* The business card's text on the used-car card's scale, category for
   category: the name reads as a card title, the location as a location,
   the hours and the rating as meta. It ran 18/600 for the name and 16
   for both detail rows, which made the same kinds of line two sizes
   apart between one card and the next.

   name     -> .qw-card__title     16 / w400 / 1.15
   location -> .qw-card__location  14 / 1.15
   hours    -> .qw-card__meta      12 / 1.15
   rating   -> .qw-card__meta      12 / 1.15
*/
.qw-business__name {
  font-size: 16px;                       /* AppTheme.cardTitle, fontMd */
  font-weight: 400;
  line-height: 1.15;
  max-height: none;
}

.qw-business__row {
  font-size: 14px;                       /* AppTheme.fontBody */
  line-height: 1.15;
  color: var(--brand-label-gray);
}

.qw-business__row.is-open,
.qw-business__row + .qw-business__row {
  font-size: 12px;                       /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-business__row.is-open { color: #0F7B3E; }

.qw-business__rating {
  font-size: 12px;                       /* AppTheme.fontSm */
  line-height: 1.15;
  color: var(--brand-text-muted);
}

.qw-business__metric { font-size: 12px; }

/* The rental card is the reference for these three lines, and the
   business card now reads on its scale exactly:
     city   14 / textLabel        (.qw-rental__city)
     hours  14 / open green, closed red
     rating 12 / w400 / #353535   (.qw-rental__rating)
   The rating was carrying the muted grey, which made it the same colour
   as the lines above rather than the darker one the app gives it. */
.qw-business__row,
.qw-business__row + .qw-business__row {
  font-size: 14px;                       /* AppTheme.fontBody */
  line-height: 1.15;
  color: var(--brand-text-muted);        /* QwColors.textLabel */
}

.qw-business__row.is-open { color: #07A22B; }      /* brandStatusOpen */
.qw-business__row.is-closed { color: #A31616; }    /* brandStatusClosed */

.qw-business__rating {
  font-size: 12px;                       /* AppTheme.fontSm */
  font-weight: 400;
  color: #353535;                        /* QwColors.textPrimary */
}

/* The count reads at the name's size - it is the second half of the
   heading, not a footnote to it. */
.qw-business__metric { font-size: 16px; }

/* The count sits behind its own icon, as the location and the rating do,
   and the whole card is no longer one anchor - the image and the name
   carry the link to the profile, the count carries its own to the stock. */
.qw-business__metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qw-business__name { text-decoration: none; }
.qw-business__name:hover { text-decoration: underline; }
.qw-business__imagelink { display: block; }

/* The star is a character where the other two are 14px drawings, so at
   12 it sat visibly smaller than the pin and the clock beside it. */
.qw-business__rating .qw-star { font-size: 14px; line-height: 1; }
.qw-business__rating { gap: 4px; }

/* The whole card opens the business, and the two controls on it keep
   their own targets.

   The card cannot be one anchor - an <a> cannot hold another, so the
   count inside it could never link anywhere. Instead the name's link is
   stretched over the whole card, and the count and the action row are
   lifted above it. Click anywhere: the business. Click the count or View
   Inventory: its stock. */
.qw-business { position: relative; }

.qw-business__name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.qw-business__metric,
.qw-business__actions {
  position: relative;
  z-index: 1;
}

/* The call popup. :target rather than script, like everything else that
   opens on this site, so it works before anything loads: the button
   links to the card's own id, the scrim and the cross link back to "#".
   A tel: link on a desktop goes nowhere useful, and somebody who means
   to ring wants to read the number first. */
.qw-callpop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.qw-callpop:target { display: flex; }

.qw-callpop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 1, 48, 0.5);       /* AppTheme.brandChromeNavy */
}

.qw-callpop__box {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  border-radius: 12px;
  background: var(--brand-surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.qw-callpop__x {
  position: absolute;
  top: 8px;
  inset-inline-end: 12px;
  color: var(--brand-text-muted);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}

.qw-callpop__who {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-callpop__number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;                          /* brandActionButtonHeight */
  margin-top: 8px;
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;
  color: var(--brand-action-blue);
  font-size: 16px;                       /* AppTheme.fontMd */
  font-weight: 600;
  text-decoration: none;
}

.qw-callpop__number:hover { background: rgba(6, 3, 94, 0.06); }

/* Every results card on the used-car landing card's scale, category for
   category. They ran 18/700 for both the title and the price, 12 for the
   location and 11 for the meta - a different type ladder from the cards
   the same search hands back on the landing page, so one listing changed
   size depending on which page you met it on.

   title    -> .qw-card__title     16 / w400 / 1.15
   price    -> .qw-card__price     16 / w700 / 1.15
   location -> .qw-card__location  14 / 1.15
   meta     -> .qw-card__meta      12 / 1.15
   rating   -> .qw-card__meta      12 / w400
*/
.qw-result__title {
  font-size: 16px;                  /* AppTheme.cardTitle, fontMd */
  font-weight: 400;
  line-height: 1.15;
  color: var(--brand-heading-gray);
}

.qw-result__price {
  font-size: 16px;                  /* AppTheme.cardPrice */
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand-heading-gray);
}

.qw-result__location {
  font-size: 14px;                  /* AppTheme.fontBody */
  line-height: 1.15;
  color: var(--brand-label-gray);
}

.qw-result__meta {
  font-size: 12px;                  /* AppTheme.fontSm */
  line-height: 1.15;
  color: var(--brand-text-muted);
}

.qw-result__rating {
  font-size: 12px;                  /* AppTheme.fontSm */
  font-weight: 400;
  color: #353535;                   /* QwColors.textPrimary */
}

.qw-result__rating .qw-star { font-size: 14px; line-height: 1; }

/* The product card: the title's link is stretched over the card so the
   whole thing opens the product, and the add-to-cart form is lifted
   above it so the plus is pressable. The card cannot be one anchor - a
   button cannot live inside one. */
.qw-product { position: relative; }

.qw-product__title { text-decoration: none; color: inherit; }
.qw-product__title:hover { text-decoration: underline; }

.qw-product__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.qw-product__cart {
  position: relative;
  z-index: 1;
  display: contents;
}

.qw-circlebtn--cart {
  border: 1px solid var(--brand-hairline);
  background: var(--brand-surface);
  cursor: pointer;
}

/* Said once, after the basket takes it. */
.qw-cartsaid {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--brand-surface-tint, #F2F6FD);
  font-size: 14px;
  color: var(--brand-heading-gray);
}

/* Every line on the rental and tour cards gets the line-height the used-
   car card's lines have. The gap between rows was already the same 3 on
   both, but not one of these rows declared a line-height, so each
   inherited the page's 1.55 and stood 25 and 22 tall against the used
   car's 18 and 16 - which is what read as wider spacing. */
.qw-rental__title,
.qw-rental__price,
.qw-rental__city,
.qw-rental__meta,
.qw-rental__rating,
.qw-rental__facts,
.qw-tour__title,
.qw-tour__price,
.qw-tour__meta,
.qw-tour__name { line-height: 1.15; }

/* The showrooms line is a link on both cards, and reads as one: the
   landing card's link blue, underlined. */
.qw-newcar__link[href],
.qw-result__location--link {
  color: var(--brand-link-blue);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   One ladder for every landing card, with the used-car card as the
   standard. Measured side by side they ran: price 700 here, 400 on the
   new-car card and 600 on the product one; meta 12 here and 14 on the
   rental card; and a bottom gap of 10, 11, 15 and 10.

     price  16 / w700     meta  12 / w400     padding 10, top and bottom

   The uneven bottom gap was the fixed heights: each card was taller than
   its own content by a different amount, and centring the block split
   that leftover evenly - so the padding came out at 10, 11 and 15. The
   heights come off the vehicle cards; their images are a fixed 128, so
   the rows still line up across a strip while every card ends the same
   10 under its last line.
   --------------------------------------------------------------------- */
.qw-newcar__price,
.qw-product__price { font-weight: 700; }

.qw-rental__meta,
.qw-rental__rating,
.qw-rental__facts,
.qw-tour__meta { font-size: 12px; }      /* AppTheme.fontSm, as .qw-card__meta */

.qw-card,
.qw-newcar,
.qw-rental,
.qw-tour,
.qw-upcoming {
  height: auto;
  min-height: 0;
}

.qw-card__body,
.qw-newcar .qw-shell__content,
.qw-rental .qw-shell__content,
.qw-tour .qw-shell__content,
.qw-upcoming .qw-shell__content {
  justify-content: flex-start;
  padding: 10px;
  gap: 3px;
}

/* ---------------------------------------------------------------------
   The last two cards off the ladder, and one rhythm down a page.

   The service card priced at 20 where every other card prices at 16, and
   both it and the product card put 4 between their lines where the
   vehicle cards put 3. Their titles stay at 14: that is
   AppTheme.cardTitleCompact, which the app gives these two cards and no
   others.

   Down the page the body already ran 24 between blocks and 16 between a
   heading and the cards under it. The top did not: the trail, the browse
   heading and the tab grid each carried their own margins and collapsed
   to 16 and then 12. All of it is 24 and 16 now.
   --------------------------------------------------------------------- */
.qw-service-card__price { font-size: 16px; }   /* AppTheme.cardPrice */

.qw-service-card .qw-shell__content,
.qw-product__shell .qw-shell__content { gap: 3px; }

.breadcrumbs { margin-bottom: 24px; }
/* Twelve under the dots, not twenty-four: the strip, its dots and the
   Driving Tests button beneath them are one block of browsing, and they
   were spaced as if they were three. */
.qw-cattabs { margin: 0 0 12px; }

/* Every section heading on a page, not just the ones that happen to carry
   a class: the browse heading is a bare <h2> and was still on the
   browser's own 32 and 12. Twenty-four above, sixteen down to what it
   heads - the rhythm the rest of the page already keeps. */
.wrap.page > h2,
.qw-browsetitle { margin: 24px 0 16px; }

.wrap.page > .breadcrumbs + h2 { margin-top: 0; }

/* =====================================================================
   The card ladder, written once and applied to every card that has each
   part. Directive, verbatim:

     name / title        16 / w400          car names and business names
     price               16 / w700
     location + distance 14 / w400 / textLabel, its icon 14
     meta                12 / w400
     rating star         13 / valueBlue
     rating text         12 / w700
     hours               14 / 1.15, colour alone marks the status

   Product and service titles are not in the name rule: those two carry
   AppTheme.cardTitleCompact at 14, which is the app's own choice for
   them and not a drift.
   ===================================================================== */

/* Names: every car, every business. */
.qw-card__title,
.qw-newcar__title,
.qw-rental__title,
.qw-tour__title,
.qw-upcoming__title,
.qw-result__title,
.qw-business__name {
  font-size: 16px;                       /* AppTheme.cardTitle, fontMd */
  font-weight: 400;
  line-height: 1.15;
  color: var(--brand-heading-gray);
}

/* Prices: all of them. */
.qw-card__price,
.qw-newcar__price,
.qw-rental__price,
.qw-tour__price,
.qw-product__price,
.qw-service-card__price,
.qw-result__price {
  font-size: 16px;                       /* AppTheme.cardPrice */
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand-heading-gray);
}

/* Where it is, and how far. */
.qw-card__location,
.qw-rental__city,
.qw-result__location,
.qw-service-card__location,
.qw-business__row {
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 400;
  line-height: 1.15;
  color: var(--brand-text-muted);        /* QwColors.textLabel */
}

.qw-card__location svg,
.qw-result__location svg,
.qw-service-card__location svg,
.qw-business__row svg { width: 14px; height: 14px; }

/* The quiet line. */
.qw-card__meta,
.qw-rental__meta,
.qw-rental__facts,
.qw-tour__meta,
.qw-result__meta {
  font-size: 12px;                       /* AppTheme.fontSm */
  font-weight: 400;
  line-height: 1.15;
}

/* The rating: a 13px star in the value blue, then the number in bold 12. */
.qw-card .qw-star,
.qw-newcar .qw-star,
.qw-rental .qw-star,
.qw-tour .qw-star,
.qw-upcoming .qw-star,
.qw-product .qw-star,
.qw-service-card .qw-star,
.qw-business .qw-star,
.qw-result .qw-star {
  font-size: 13px;
  line-height: 1;
  color: var(--brand-button-blue);       /* QwColors.valueBlue */
}

.qw-business__rating,
.qw-product__rating,
.qw-rental__rating,
.qw-result__rating,
.qw-service-card__rating,
.qw-upcoming__rating {
  font-size: 12px;                       /* AppTheme.fontSm */
  font-weight: 700;
  line-height: 1.15;
}

/* Hours. The colour says open or closed; the weight says nothing. */
.qw-business__row.is-open,
.qw-business__row.is-closed,
.qw-service-card__status {
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 400;
  line-height: 1.15;
}

.qw-business__row.is-open,
.qw-service-card__status.is-open { color: #07A22B; }    /* brandStatusOpen */
.qw-business__row.is-closed { color: #A31616; }         /* brandStatusClosed */

/* The new-car card, like the business and product ones: the title's link
   is stretched over the card so the whole thing opens the model, and the
   two link rows sit above it with their own targets. */
.qw-newcar { position: relative; }

.qw-newcar__title { text-decoration: none; }

.qw-newcar__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.qw-newcar__link { position: relative; z-index: 1; }
.qw-newcar__imagelink { display: block; }

/* Three between the lines of every card, said once. It had been set per
   card and drifted to 2, 3 and 4 depending on which card you looked at. */
.qw-card__body,
.qw-newcar .qw-shell__content,
.qw-rental .qw-shell__content,
.qw-tour .qw-shell__content,
.qw-upcoming .qw-shell__content,
.qw-product .qw-shell__content,
.qw-service-card .qw-shell__content,
.qw-business__shell .qw-shell__content,
.qw-result__body { gap: 3px; }

/* The plus reads the same whether it posts to the basket or opens
   sign-in. */
a.qw-circlebtn--cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

/* A name and its badge on one line, the badge on the right - which is
   where every badge on this site sits. */
.qw-titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qw-titlerow > h1 { margin: 0; }

/* The two link lines on a new-car and upcoming card, in the same blue as
   the star beside them - QwColors.valueBlue. They had been the lighter
   link blue, so one card carried two blues for the same weight of
   information. */
.qw-newcar__link,
.qw-upcoming__link,
.qw-newcar__link[href],
.qw-result__location--link { color: var(--brand-button-blue); }

/* The star is filled, in that same blue. */
.qw-star,
.qw-star--filled { color: var(--brand-button-blue); }

/* The listing's four actions on one row, each taking an equal quarter of
   it. Call had a full-width bar of its own with the other three sharing
   a strip beneath, which made one of the four read as the action and the
   rest as an afterthought. */
.qw-actionbar--row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.qw-actionbar--row > a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;                          /* brandActionButtonHeight */
  margin: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Call keeps the filled treatment; the other three keep their outline,
   so the row still says which one is the primary action. */
.qw-actionbar--row .qw-actionbar__link {
  border: 1px solid var(--brand-hairline);
  background: var(--brand-surface);
}

@media (max-width: 560px) {
  /* Four across is too little for a label each on a phone: two and two. */
  .qw-actionbar--row { flex-wrap: wrap; }
  .qw-actionbar--row > a { flex: 1 1 calc(50% - 8px); }
}

/* ------------------------------------------------------------------ */
/* The photo pane on an ad detail page: QwImageGallery, and the two    */
/* controls a mouse needs that a swipe does not.                       */
/* ------------------------------------------------------------------ */

.qw-gallery {
  position: relative;
  margin: 12px 0 20px;
  border-radius: 12px;                   /* AppTheme.cardRadius */
  overflow: hidden;
  background: #2B3A55;
}

/* Focusable, so the arrow keys walk the pane, and invisible, because the
   photographs are the control. */
.qw-gallery__pick {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.qw-gallery__slide { display: none; position: relative; }

/* The whole mechanism: each radio sits immediately before its own slide,
   so one rule shows the checked one and no rule mentions an index. */
.qw-gallery__pick:checked + .qw-gallery__slide { display: block; }

.qw-gallery__pick:focus-visible + .qw-gallery__slide {
  outline: 2px solid var(--brand-button-blue);
  outline-offset: -2px;
}

.qw-gallery__img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

@media (max-width: 640px) {
  .qw-gallery__img { height: 220px; }
}

/* "3/8", bottom start, 16 in - where the app counts them, on the same
   black at half opacity. */
.qw-gallery__count {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  padding: 4px 12px;
  border-radius: 9999px;                 /* AppTheme.radiusPill */
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  font-size: 14px;                       /* AppTheme.fontBody */
  font-weight: 500;
}

.qw-gallery__full {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  text-decoration: none;
}

.qw-gallery__nav {
  position: absolute;
  inset-block-end: 12px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.qw-gallery__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  cursor: pointer;
}

.qw-gallery__full:hover,
.qw-gallery__arrow:hover { background: rgba(0, 0, 0, 0.72); }

/* Full size: the app's photo viewer, which is black, fills the screen and
   closes on a cross. :target, so it opens with nothing loaded. */
.qw-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.qw-lightbox:target { display: flex; }

.qw-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

.qw-lightbox__img {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.qw-lightbox__x {
  position: absolute;
  top: 12px;
  inset-inline-end: 20px;
  color: #FFFFFF;
  font-size: 32px;
  line-height: 1;
  text-decoration: none;
}

.qw-lightbox__count {
  position: absolute;
  top: 22px;
  inset-inline-start: 24px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Report this Ad: a panel over the listing, not a page away from it.   */
/* ------------------------------------------------------------------ */

.qw-reportpop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 85;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.qw-reportpop:target { display: flex; }

/* The booking sheet: the app's bottom sheet, as a panel this page opens.
   Its box is wider than a report form - seven dates have to fit across
   the top of it. */
.qw-booksheet .qw-reportpop__box { max-width: 560px; }

.qw-booksheet__label {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-booksheet__note {
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 13px;
}

/* The showroom this drive is being booked at, once one is chosen. */
.qw-booksheet__chosen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  font-weight: 700;
}

.qw-booksheet__change {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-action-blue);
}

.qw-booksheet__days,
.qw-booksheet__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qw-booksheet__days { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.qw-booksheet__days::-webkit-scrollbar { display: none; }

.qw-daytile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 10px 8px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  color: var(--brand-heading-gray);
  text-decoration: none;
}

.qw-daytile__day { font-size: 12px; color: var(--brand-text-muted); }
.qw-daytile__date { font-size: 13px; font-weight: 700; }

.qw-daytile.is-on {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}

.qw-daytile.is-on .qw-daytile__day { color: rgba(255, 255, 255, 0.85); }

/* One time. The radio is the state; the tile is what it looks like. */
.qw-slottile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qw-slottile {
  position: relative;
  display: inline-flex;
  padding: 8px 14px;
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}

.qw-slottile:has(input:checked) {
  border-color: var(--brand-action-blue);
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}

.qw-booksheet__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.qw-booksheet__cancel,
.qw-booksheet__submit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.qw-booksheet__cancel {
  border: 1px solid var(--brand-hairline);
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
}

.qw-booksheet__submit {
  border: 0;
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}

/* Book a drive sits above Call, in the outline the bar's other
   secondary actions wear. */
.qw-actionbar__call--book {
  margin-bottom: 8px;
  border: 1px solid var(--brand-action-blue);
  background: var(--brand-surface);
  color: var(--brand-action-blue);
}

.qw-reportpop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 1, 48, 0.5);       /* AppTheme.brandChromeNavy */
}

.qw-reportpop__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 12px;
  background: var(--brand-surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.qw-reportpop__x {
  position: absolute;
  top: 8px;
  inset-inline-end: 12px;
  color: var(--brand-text-muted);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}

.qw-reportpop__title {
  margin: 0 0 6px;
  font-size: 16px;                       /* AppTheme.fontMd */
  font-weight: 600;
  color: var(--brand-heading-gray);
}

.qw-reportpop__body {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.qw-reportpop__field {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.qw-reportpop__field > span { display: block; margin-bottom: 4px; }

.qw-reportpop__field select,
.qw-reportpop__field textarea,
.qw-reportpop__field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  background: var(--brand-surface);
  color: var(--brand-heading-gray);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}

.qw-reportpop__row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.qw-reportpop__cancel,
.qw-reportpop__submit {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;                          /* brandActionButtonHeight */
  border: 1px solid var(--brand-action-blue);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.qw-reportpop__cancel {
  background: var(--brand-surface);
  color: var(--brand-action-blue);
}

.qw-reportpop__submit {
  background: var(--brand-action-blue);
  color: var(--brand-surface);
}

/* ------------------------------------------------------------------ */
/* Paid slides say so. A promo banner drawn like the page's own content */
/* is the one thing an ad on a marketplace must not be.                 */
/* ------------------------------------------------------------------ */

.qw-ads__mark {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(243, 244, 246, 0.92); /* AppTheme.brandSurfaceTint */
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #4B5563;
  font-size: 10px;                       /* AppTheme.fontXs */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: none;
}

/* The contact bar's outlines and labels in the Call button's own navy,
   so the row reads as one set of actions. WhatsApp keeps its green,
   which is the one colour on this site nobody owns but WhatsApp. */
.qw-actionbar--row .qw-actionbar__link:not(.qw-actionbar__link--whatsapp) {
  border-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
}

/* WhatsApp is green throughout - its mark, its word and the rule round
   them. Half green, half navy read as a button that had been recoloured
   by mistake. */
.qw-actionbar--row .qw-actionbar__link--whatsapp {
  border-color: #25D366;                 /* AppTheme.whatsappGreen */
  color: #25D366;
}

/* One family, its weights, and nothing else. Form controls do not inherit
   type by default: a select, an input, a textarea and a button each drop
   to the browser's own font, which is how a page that declares one
   typeface ends up showing four. */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
}

/* The full-size photo, over everything - the header is z-index 100, and
   an overlay under the header is not an overlay. */
.qw-lightbox { z-index: 200; }
.qw-reportpop { z-index: 150; }

/* Nothing scrolls behind an open panel. The page kept scrolling under the
   photo viewer, which is how a "full view" ends up showing the footer. */
html:has(.qw-lightbox:target),
body:has(.qw-lightbox:target),
html:has(.qw-reportpop:target),
body:has(.qw-reportpop:target) {
  overflow: hidden;
}

/* Prev and next in the viewer, in the same places the pane keeps them. */
.qw-lightbox__nav {
  position: absolute;
  inset-block-end: 28px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.qw-lightbox__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  text-decoration: none;
}

.qw-lightbox__arrow:hover { background: rgba(255, 255, 255, 0.26); }

/* ------------------------------------------------------------------ */
/* A journey on a page of its own: the blue step band bleeding to the   */
/* card's edges, everything else inside its padding.                    */
/* ------------------------------------------------------------------ */

.qw-journeycard {
  max-width: 720px;
  margin: 0 0 24px;
  padding: 0 20px 20px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
  background: var(--brand-surface);
  overflow: hidden;
}

/* Which of your ads a promotion is for: the app's own row, with a radio. */
.qw-adpick {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.qw-adpick__row {
  display: grid;
  grid-template-columns: auto 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--brand-hairline);
  border-radius: 12px;
  cursor: pointer;
}

.qw-adpick__row:has(input:checked) {
  border-color: var(--brand-action-blue);
  box-shadow: inset 0 0 0 1px var(--brand-action-blue);
}

.qw-adpick__thumb { position: relative; }

.qw-adpick__thumb img {
  display: block;
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

/* The photo count, as the cards count them. */
.qw-adpick__count {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 4px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  font-size: 10px;
}

.qw-adpick__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.qw-adpick__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--brand-heading-gray);
}

.qw-adpick__price {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.qw-adpick__meta {
  font-size: 12px;
  line-height: 1.15;
  color: var(--brand-text-muted);
}

.qw-adpick__already {
  align-self: start;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(6, 3, 94, 0.08);
  color: var(--brand-action-blue);
  font-size: 10px;
  font-weight: 700;
}

.qw-adpick__note {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--brand-text-muted);
}

@media (max-width: 520px) {
  .qw-adpick__row { grid-template-columns: auto 72px minmax(0, 1fr); }
  .qw-adpick__thumb img { width: 72px; height: 54px; }
}

/* The bell in the header, between Chats and the language picker. Icon
   only: the row is already four words wide, and a fifth label pushed the
   language off the end on a laptop. */
.qw-headbell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--brand-surface);
  text-decoration: none;
}

.qw-headbell:hover { background: rgba(255, 255, 255, 0.12); }

/* The row you are on: the bar's colours swapped, white behind navy text,
   square to the bar's own edges. Thirty identical rows on every screen
   left the heading as the only thing saying where you were. */
.qw-morerow.is-here > a {
  background: #FFFFFF;
  color: var(--brand-action-blue);
  border-radius: 0;
  /* Out to the bar's edges: the list is inset 24px, and a white band that
     stops short of the edge reads as a button rather than a tab. The
     padding carries the row's own 16 as well, or the icon steps 16px to
     the left of every other icon in the bar. */
  margin-inline: -24px;
  padding-inline: 40px;
}

.qw-morerow.is-here .qw-morerow__label {
  color: var(--brand-action-blue);
  font-weight: 700;
}

.qw-sidenav .qw-morerow.is-here > a { color: var(--brand-action-blue); }

.qw-morerow.is-here .qw-morerow__chevron,
.qw-sidenav .qw-morerow.is-here .qw-morerow__chevron {
  border-color: var(--brand-action-blue);
  color: var(--brand-action-blue);
}

/* No hover on it. The bar tints a row under the pointer, which on the
   white one read as the selection moving. */
.qw-sidenav .qw-morerow.is-here > a:hover {
  background: #FFFFFF;
  color: var(--brand-action-blue);
}

.qw-sidenav .qw-morerow.is-here > a:hover .qw-morerow__icon { opacity: 1; }

/* The icons are white SVGs on the navy; on the white row they would be
   invisible, so this puts them back to the ink of the text. */
.qw-sidenav .qw-morerow.is-here .qw-morerow__icon {
  filter: brightness(0) saturate(100%) invert(9%) sepia(64%)
          saturate(3894%) hue-rotate(243deg) brightness(93%) contrast(105%);
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* The browse strip's tabs, as UnderlineTabRow draws them: the open one */
/* in the action blue at w600 over a 2px underline, the rest muted at   */
/* w400. Every tab looked the same before, so the strip said which      */
/* tiles you were reading only by which tiles were on screen.           */
/* ------------------------------------------------------------------ */

.qw-cattabs__tab {
  color: var(--brand-text-muted);        /* AppTheme.brandTextMuted */
  font-weight: 400;
  text-decoration: none;
}

.qw-cattabs:has(#cattab-0:checked) .qw-cattabs__tab--0,
.qw-cattabs:has(#cattab-1:checked) .qw-cattabs__tab--1,
.qw-cattabs:has(#cattab-2:checked) .qw-cattabs__tab--2,
.qw-cattabs:has(#cattab-3:checked) .qw-cattabs__tab--3,
.qw-cattabs:has(#cattab-4:checked) .qw-cattabs__tab--4,
.qw-cattabs:has(#cattab-5:checked) .qw-cattabs__tab--5,
.qw-cattabs:has(#cattab-6:checked) .qw-cattabs__tab--6 {
  color: var(--brand-action-blue);       /* UnderlineTabRow.activeColor */
  font-weight: 600;
  border-bottom-color: var(--brand-action-blue);
}

.qw-cattabs__tab:hover { color: var(--brand-action-blue); }

/* The header button for the page being read: the bar's colours the other
   way round - white behind navy text - and square, so it reads as the
   selected tab of the bar rather than as one more outlined button. */
.qw-headbtn.is-here,
.qw-headbell.is-here {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--brand-action-blue);
}

.qw-headbtn.is-here:hover,
.qw-headbell.is-here:hover { background: #FFFFFF; }

/* Log in / Sign up: an outline, not a fill. On the navy bar a filled navy
   button is a rectangle of the same colour as its background, visible
   only by its text. */
.qw-sidenav__signin {
  background: transparent;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.qw-sidenav__signin:hover { background: rgba(255, 255, 255, 0.10); }

/* What the bell is for: the number waiting. */
.qw-headbell { position: relative; }

.qw-headbell__count {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #A31616;                   /* AppTheme.brandStatusClosed */
  color: #FFFFFF;
  font-size: 10px;                       /* AppTheme.fontXs */
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.qw-headbell.is-here .qw-headbell__count { border: 1px solid #FFFFFF; }

/* ------------------------------------------------------------------ */
/* The notification inbox: rows you can open and throw away.           */
/* ------------------------------------------------------------------ */

.qw-notiffilters {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}

/* The row's own body is the button that opens it, so it has to look like
   the text it replaced rather than like a control. */
.qw-notif__open { flex: 1 1 auto; min-width: 0; margin: 0; }

.qw-notif__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.qw-notif__when {
  font-size: 12px;                       /* AppTheme.fontSm */
  color: var(--brand-text-muted);
}

.qw-notif__bin {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--brand-text-muted);
  cursor: pointer;
}

.qw-notif__bin:hover { background: rgba(163, 22, 22, 0.08); color: #A31616; }