/* ============================================================
   Deviceland — shop and category archives
   ============================================================

   A TOKEN OVERLAY, same architecture as pdp.css and bag.css and for the same
   reason: Elessi's archive-product.php is 29KB of sidebar, filter and layout
   logic, and its structural CSS stays loaded. Nothing here changes display,
   float or grid on an Elessi container — this file changes colour, type,
   surface, radius and spacing.

   Two notes specific to these pages:

   1. loop-product.css is deliberately still enqueued here. It supplies the
      card's own layout, and the homepage's floor grid is a different component
      that happens to look similar — replacing Elessi's here would mean
      rebuilding the grid, the hover, the badge and the responsive columns for
      no gain.

   2. There is a wp-custom-css block in the database that already normalises
      product card images (aspect-ratio 1/1, white ground, absolute inner
      links). It is left alone and this file does not fight it: everything below
      is colour, border, radius and type, not image geometry.
   ============================================================ */

html body.deviceland-shop.deviceland-arch {
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--sans);
}

/* #main clearance — the reason these pages looked broken.
   ------------------------------------------------------------
   The masthead is position:fixed and out of flow. pdp.css supplies this on a
   product page and bag.css on the cart, and neither loads here — so the archive
   had a fixed header sitting on top of its own first screen of content.
   --head-measured is written by deviceland.js from the island's real height. */
html body.deviceland-shop.deviceland-arch #main {
  padding-top: calc(var(--head-measured, 69px) + 4px);
  padding-bottom: 90px;
}

/* Elessi's page-title band belongs to a WPBakery header this design does not
   use, and the archive head below replaces it. Two titles is worse than none. */
html body.deviceland-shop.deviceland-arch .page-head,
html body.deviceland-shop.deviceland-arch .nasa-page-title,
html body.deviceland-shop.deviceland-arch .woocommerce-products-header,
html body.deviceland-shop.deviceland-arch .nasa-breadcrumb-wrap,
html body.deviceland-shop.deviceland-arch .woocommerce-breadcrumb {
  display: none;
}

/* ------------------------------------------------------------
   Archive head
   ------------------------------------------------------------ */

/* Tightened from 30/26. Measured on the shop page, the band above the first
   row of products ran to roughly 245px of mostly empty cream; the products now
   start about 40px higher without the head losing its own breathing room. */
html body.deviceland-shop .dl-arch-head {
  padding: 18px 0 14px;
}

html body.deviceland-shop .dl-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-crumbs a {
  color: var(--muted-fg);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-crumbs a:hover {
  color: var(--on-paper);
}

html body.deviceland-shop .dl-crumb-sep {
  color: rgba(20, 17, 14, 0.26);
}

html body.deviceland-shop .dl-arch-title {
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--on-paper);
  text-transform: none;
}

/* The count is a fact, so it is set as one: small, muted, no decoration. */
html body.deviceland-shop .dl-arch-count {
  margin: 9px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-arch-intro {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-arch-intro p {
  margin: 0 0 10px;
}

/* ------------------------------------------------------------
   Toolbar: result count, sorting, view switch
   ------------------------------------------------------------ */

html body.deviceland-shop.deviceland-arch .nasa-shop-head,
html body.deviceland-shop.deviceland-arch .nasa-filter-wrap,
html body.deviceland-shop.deviceland-arch .woocommerce-notices-wrapper + .row .nasa-sort-by-action {
  border-color: var(--hair-light);
}

html body.deviceland-shop.deviceland-arch .woocommerce-result-count {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted-fg);
}

/* The ordering select gets the same field as the checkout: 44px, hairline,
   --r-sm, 18px inset. A shop that styles its inputs three ways reads as three
   different shops. */
html body.deviceland-shop.deviceland-arch .woocommerce-ordering select,
html body.deviceland-shop.deviceland-arch select.orderby,
html body.deviceland-shop.deviceland-arch .nasa-ordering select {
  height: auto;
  min-height: 44px;
  padding: 10px 40px 10px 18px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-sm);
  background-color: var(--paper);
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--on-paper);
  text-indent: 0;
}

html body.deviceland-shop.deviceland-arch .woocommerce-ordering select:focus,
html body.deviceland-shop.deviceland-arch select.orderby:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(201, 89, 40, 0.14);
}

/* ------------------------------------------------------------
   Sidebar / filters
   ------------------------------------------------------------ */

html body.deviceland-shop.deviceland-arch .widget-title,
html body.deviceland-shop.deviceland-arch .nasa-widget-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

html body.deviceland-shop.deviceland-arch .widget {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hair-light);
}

html body.deviceland-shop.deviceland-arch .widget a {
  color: var(--on-paper);
  text-decoration: none;
}

html body.deviceland-shop.deviceland-arch .widget a:hover {
  color: var(--ember-deep);
}

html body.deviceland-shop.deviceland-arch .widget ul li {
  font-size: 13.5px;
  line-height: 1.6;
}

html body.deviceland-shop.deviceland-arch .dl-color-family-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
}

html body.deviceland-shop.deviceland-arch .dl-color-family-filter li {
  margin: 0;
}

html body.deviceland-shop.deviceland-arch .dl-color-family-filter a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

html body.deviceland-shop.deviceland-arch .dl-color-family-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(20, 17, 14, 0.12);
  border-radius: 50%;
  background: var(--swatch);
}

html body.deviceland-shop.deviceland-arch .dl-color-family-filter small {
  font-size: 10px;
  color: var(--muted-fg);
}

/* ------------------------------------------------------------
   The product card
   ------------------------------------------------------------
   Same values as the related-products card in pdp.css and the cross-sell card
   in bag.css: 16px padding, a 7%-ink hairline, --r-lg on the card, --r-md on a
   white plate, one -4px hover lift. Four surfaces, one card.
*/

html body.deviceland-shop.deviceland-arch .products .product-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: visible;
  border: 1px solid rgba(20, 17, 14, 0.07);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}

html body.deviceland-shop.deviceland-arch .products .product-item:hover {
  transform: translateY(-4px);
  border-color: var(--hair-light-2);
  box-shadow: var(--sh-2);
}

/* Elessi paints a hover wash via ::after; the border and lift carry that job. */
html body.deviceland-shop.deviceland-arch .products .product-item:after {
  display: none;
}

html body.deviceland-shop.deviceland-arch .products .product-img-wrap {
  position: relative;
  overflow: visible;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: none;
}

html body.deviceland-shop.deviceland-arch .products .product-img,
html body.deviceland-shop.deviceland-arch .products .product-img-wrap img {
  border-radius: var(--r-md);
}

html body.deviceland-shop.deviceland-arch .products .product-info-wrap,
html body.deviceland-shop.deviceland-arch .products .product-item .info {
  padding: 14px 2px 0;
  text-align: left;
}

html body.deviceland-shop.deviceland-arch .products .product-item .product-title,
html body.deviceland-shop.deviceland-arch .products .woocommerce-loop-product__title {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.35;
  text-transform: none;
}

html body.deviceland-shop.deviceland-arch .products .product-item .product-title a,
html body.deviceland-shop.deviceland-arch .products .woocommerce-loop-product__title a {
  color: var(--on-paper);
  text-decoration: none;
}

html body.deviceland-shop.deviceland-arch .products .product-item .product-title a:hover {
  color: var(--ember-deep);
}

/* Price in ink, not the theme accent — the same correction the checkout needed.
   Ember is for links and live state; a price in the accent colour makes a
   catalogue read like a clearance rail. */
html body.deviceland-shop.deviceland-arch .products .product-item .price,
html body.deviceland-shop.deviceland-arch .products .product-item .price .amount,
html body.deviceland-shop.deviceland-arch .products .product-item .price bdi,
html body.deviceland-shop.deviceland-arch .products .price .woocommerce-Price-currencySymbol {
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-paper);
}

html body.deviceland-shop.deviceland-arch .products .product-item del,
html body.deviceland-shop.deviceland-arch .products .product-item del .amount,
html body.deviceland-shop.deviceland-arch .products .product-item del bdi {
  color: var(--muted-fg);
  font-weight: 400;
}

/* ---------- badges ---------- */

html body.deviceland-shop.deviceland-arch .products .product-label span,
html body.deviceland-shop.deviceland-arch .products span.onsale,
html body.deviceland-shop.deviceland-arch .products .nasa-onsale {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: none;
}

/* ---------- add to cart ---------- */

html body.deviceland-shop.deviceland-arch .products .product-item .add-to-cart-grid a,
html body.deviceland-shop.deviceland-arch .products .product-item a.add_to_cart_button,
html body.deviceland-shop.deviceland-arch .products .product-item a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-paper);
}

html body.deviceland-shop.deviceland-arch .products .product-item a.button:hover,
html body.deviceland-shop.deviceland-arch .products .product-item a.add_to_cart_button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* ---------- removed features ---------- */

/* Belt and braces only: the hooks that print these are removed in
   inc/archive.php, so nothing here should have anything to hide. Left in place
   because a theme update that re-registers one of those callbacks would
   otherwise put an unstyled quick-view button back into every card. */
/* Class names taken from the rendered markup, not guessed. The card's wishlist
   control is `btn-wishlist btn-link wishlist-icon btn-nasa-wishlist` — an
   earlier version of this rule hid `.nasa-wishlist`, which appears nowhere in
   the loop, so it matched nothing and the button stayed visible. */
html body.deviceland-shop.deviceland-arch .nasa-group-btns,
html body.deviceland-shop.deviceland-arch .nasa-btns-product-item,
html body.deviceland-shop.deviceland-arch .btn-wishlist,
html body.deviceland-shop.deviceland-arch .btn-nasa-wishlist,
html body.deviceland-shop.deviceland-arch .wishlist-icon,
html body.deviceland-shop.deviceland-arch .nasa-bot-icon-wishlist,
html body.deviceland-shop.deviceland-arch .botbar-wishlist-link,
html body.deviceland-shop.deviceland-arch .nasa-quickview,
html body.deviceland-shop.deviceland-arch .quick-view,
html body.deviceland-shop.deviceland-arch .nasa-wishlist,
html body.deviceland-shop.deviceland-arch .nasa-add-wishlist,
html body.deviceland-shop.deviceland-arch .compare,
html body.deviceland-shop.deviceland-arch .nasa-compare,
html body.deviceland-shop .product-gallery .btn-wishlist,
html body.deviceland-shop .product-gallery .btn-nasa-wishlist,
html body.deviceland-shop .product-gallery .nasa-wishlist-icon,
html body.deviceland-shop .product-gallery .compare,
html body.deviceland-shop .product-gallery .quick-view,
html body.deviceland-shop .nasa-single-btn-wishlist,
html body.deviceland-shop .nasa-single-btn-compare {
  display: none !important;
}

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */

html body.deviceland-shop.deviceland-arch .woocommerce-pagination ul,
html body.deviceland-shop.deviceland-arch .nasa-pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
  padding: 0;
  border: 0;
  list-style: none;
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination li {
  margin: 0;
  border: 0;
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination a.page-numbers,
html body.deviceland-shop.deviceland-arch .woocommerce-pagination span.page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-paper);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination a.page-numbers:hover {
  background: var(--paper-2);
  border-color: var(--hair-light-2);
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination .prev {
  margin-right: 8px;
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination .next {
  margin-left: 8px;
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination .prev svg,
html body.deviceland-shop.deviceland-arch .woocommerce-pagination .next svg {
  width: 18px;
  height: 18px;
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination .dots {
  min-width: 24px;
  padding: 0;
  border-color: transparent;
}

html body.deviceland-shop.deviceland-arch .woocommerce-pagination span.current,
html body.deviceland-shop.deviceland-arch .woocommerce-pagination .current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* ------------------------------------------------------------
   Notices
   ------------------------------------------------------------ */

html body.deviceland-shop.deviceland-arch .woocommerce-message,
html body.deviceland-shop.deviceland-arch .woocommerce-info,
html body.deviceland-shop.deviceland-arch .woocommerce-error {
  margin: 0 0 22px;
  padding: 15px 18px;
  border: 1px solid var(--hair-light);
  border-left: 2px solid var(--hair-light-2);
  border-radius: var(--r-md);
  background: var(--paper-2);
  box-shadow: none;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-paper);
  list-style: none;
}

html body.deviceland-shop.deviceland-arch .woocommerce-message {
  border-left-color: var(--ember);
}

html body.deviceland-shop.deviceland-arch .woocommerce-message::before,
html body.deviceland-shop.deviceland-arch .woocommerce-info::before,
html body.deviceland-shop.deviceland-arch .woocommerce-error::before {
  display: none;
}

/* ------------------------------------------------------------
   Phone
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  html body.deviceland-shop .dl-arch-head {
    padding: 22px 0 18px;
  }

  html body.deviceland-shop.deviceland-arch .products .product-item {
    padding: 12px;
    border-radius: var(--r-md);
  }

  html body.deviceland-shop.deviceland-arch .products .product-info-wrap,
  html body.deviceland-shop.deviceland-arch .products .product-item .info {
    padding: 11px 0 0;
  }
}

/* ------------------------------------------------------------
   Mobile: the sort control
   ------------------------------------------------------------
   Elessi hides its own styled dropdown below 768px and leaves the native
   select as the visible control — but the select inherits a 79px box from the
   desktop bar, so the option list opens as a sliver and every label
   ("Default sorting", "Price: Ascending") is cut off. A native select popup is
   sized from the control, so the control is what has to be wide enough. */

@media (max-width: 767px) {
  html body.deviceland-shop.deviceland-arch .woocommerce-ordering,
  html body.deviceland-shop.deviceland-arch .woocommerce-ordering select.orderby {
    width: auto;
    min-width: 168px;
    max-width: calc(100vw - 48px);
  }

  html body.deviceland-shop.deviceland-arch .woocommerce-ordering select.orderby {
    position: static;
    clip: auto;
    clip-path: none;
    height: auto;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--hair-light);
    border-radius: var(--r-pill);
    background: transparent;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--on-paper);
  }

  html body.deviceland-shop.deviceland-arch .sort-bar {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
}

/* The styled dropdown returns at 768px and up. It is anchored from the left of
   its trigger, which puts its right edge past the viewport on the narrowest
   width where it appears. */
html body.deviceland-shop.deviceland-arch .nasa-ordering .sub-ordering {
  left: auto;
  right: 0;
  max-width: calc(100vw - 32px);
}

/* ------------------------------------------------------------
   Mobile: the sort row
   ------------------------------------------------------------
   Measured at 375px: the "Sort by" label rendered 28px wide and 88px tall —
   three lines of wrapped text sitting to the left of the control, which is
   the awkward left-aligned block in the toolbar. The control's own first
   option already reads "Default sorting", so the label is redundant on a
   phone. Elessi's slider glyph beside it says "filter", which is what the
   Filters button on the left of the same row already says. */
@media (max-width: 767px) {
  html body.deviceland-shop.deviceland-arch .sort-bar .sort-text {
    display: none;
  }

  html body.deviceland-shop.deviceland-arch .sort-bar .nasa-filter-order > svg,
  html body.deviceland-shop.deviceland-arch .sort-bar .woocommerce-ordering > svg {
    display: none;
  }

  html body.deviceland-shop.deviceland-arch .sort-bar,
  html body.deviceland-shop.deviceland-arch .nasa-filter-order {
    align-items: center;
    justify-content: flex-end;
  }
}

/* Ships today.
   ------------------------------------------------------------
   The one piece of availability a shopper gets before opening a product,
   and the only place this storefront beats apple.com: what is physically
   here. Same ember dot as the product page, so the mark means one thing
   across the site.

   Quiet on purpose — it sits under the price, at caption size, and is
   absent entirely on the products that have nothing ready. A badge would
   turn 72 of 139 tiles into shouting. */
html body .dl-loop-ready {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-fg);
}

html body .dl-loop-ready-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
}

/* ------------------------------------------------------------
   The lineup (templates/archive-lineup.php, rules in inc/lineup.php)
   ------------------------------------------------------------
   Measured, not eyeballed: at 1440/1024/820/390px every row of cards
   shares the y of its name, prices and meta rows (fixed heights), the
   title and the index share one left edge, and the index top equals the
   first card's top. */

html body.deviceland-arch .dl-lu-head {
  padding-bottom: 0;
}

html body.deviceland-arch .dl-lu-depth {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted-fg);
}

html body.deviceland-arch .dl-lineup {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  margin-top: 36px;
}

/* The left column: the page's sections with honest counts, then the filters.
   Sticky as one; scrolls inside itself when the filters run long. */
/* scrollbar-gutter + padding: macOS draws an overlay scrollbar on top of
   the content's right edge, which is where the counts sit (owner, Oct 11). */
html body.deviceland-arch .dl-lu-side {
  position: sticky;
  top: calc(var(--head-measured, 69px) + 20px);
  max-height: calc(100vh - var(--head-measured, 69px) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding-right: 14px;
}

/* The category tree: depth by indent, the page you are on in bold, the way
   back up in normal weight, the other branches quieter. */
html body.deviceland-arch .dl-lu-tree a.is-d1 { padding-left: 14px; }
html body.deviceland-arch .dl-lu-tree a.is-d2 { padding-left: 28px; }
html body.deviceland-arch .dl-lu-tree a.is-d3 { padding-left: 42px; }

html body.deviceland-arch .dl-lu-tree a.is-sibling {
  color: var(--muted-fg);
}

html body.deviceland-arch .dl-lu-tree a.is-sibling:hover,
html body.deviceland-arch .dl-lu-tree a.is-child:hover {
  color: var(--on-paper);
}

/* On a broad page, the one line saying where the rest of the filters are. */
html body.deviceland-arch .dl-lu-scope-note {
  margin: 4px 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-fg);
}

html body.deviceland-arch .dl-lu-filters {
  margin-top: 26px;
}

html body.deviceland-arch .dl-lu-filters > summary {
  display: none;
}

html body.deviceland-arch .dl-lu-facet {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  min-width: 0;
}

html body.deviceland-arch .dl-lu-facet legend {
  margin: 0 0 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

html body.deviceland-arch .dl-lu-facet label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  font-size: 14px;
  color: var(--on-paper);
  cursor: pointer;
}

/* A long filter value wraps ("Additional processing time" was cut in the
   200px sidebar; owner, Nov 11). */
html body.deviceland-arch .dl-lu-facet label > span:first-of-type {
  flex: 1;
  min-width: 0;
}

html body.deviceland-arch .dl-lu-facet input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink, #16130f);
  flex: 0 0 auto;
}

html body.deviceland-arch .dl-lu-clear,
html body.deviceland-arch .dl-lu-clear-inline {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-paper);
  text-decoration: underline;
  cursor: pointer;
}

html body.deviceland-arch .dl-lu-result {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted-fg);
}

/* Filtering: cards that do not match go; a section's cards past its first
   six come back, and its "See all" link steps aside. */
html body.deviceland-arch .dl-lineup:not(.is-filtering) .dl-lu-card.is-over,
html body.deviceland-arch .dl-lu-card.is-filtered-out,
html body.deviceland-arch .dl-lineup.is-filtering .dl-lu-seeall {
  display: none;
}

html body.deviceland-arch .dl-lu-index a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border-top: 1px solid var(--hair-light);
  font-size: 14px;
  color: var(--on-paper);
  text-decoration: none;
}

html body.deviceland-arch .dl-lu-index a:last-child {
  border-bottom: 1px solid var(--hair-light);
}

/* A long category name wraps rather than ending "Mice and Keyb..." in the
   200px sidebar (owner, Nov 11); the phone chips below keep one line each. */
html body.deviceland-arch .dl-lu-index a > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

html body.deviceland-arch .dl-lu-index a.is-on {
  font-weight: 600;
}

html body.deviceland-arch .dl-lu-n {
  font-size: 13px;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

/* Sections: one hairline between them, none between cards. */
html body.deviceland-arch .dl-lu-section {
  padding: 22px 0 52px;
  border-top: 1px solid var(--hair-light);
}

html body.deviceland-arch .dl-lu-section:first-child {
  padding-top: 0;
  border-top: 0;
}

/* At least, not exactly, 40px: "Previous generation" wraps to two lines on a
   phone and its second line ran under the cards below (owner, Nov 11). The
   count keeps one line at the right; the heading takes the wrapping. */
html body.deviceland-arch .dl-lu-shead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 12px;
  min-height: 40px;
  margin: 0 0 18px;
}

html body.deviceland-arch .dl-lu-shead h2 {
  min-width: 0;
}

html body.deviceland-arch .dl-lu-shead .dl-lu-count {
  flex: none;
  white-space: nowrap;
}

html body.deviceland-arch .dl-lu-shead h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
  color: var(--on-paper);
  text-transform: none;
}

html body.deviceland-arch .dl-lu-count {
  font-size: 13px;
  color: var(--muted-fg);
}

html body.deviceland-arch .dl-lu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 24px;
}

html body.deviceland-arch .dl-lu-card {
  min-width: 0;
  margin: 0;
}

/* The photo panel: the one surface on the card. */
html body.deviceland-arch .dl-lu-panel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}

html body.deviceland-arch .dl-lu-panel img {
  position: absolute;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  box-shadow: none;
}

html body.deviceland-arch .dl-lu-panel img.dl-lu-trim {
  left: 50%;
  top: 50%;
}

html body.deviceland-arch .dl-lu-panel img.dl-lu-fit {
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto;
  max-width: 74%;
  max-height: 70%;
  margin: auto;
}

/* Hover preview: the second photo crossfades over the first (both fade, so
   two products never show at once). Touch devices keep the first photo. */
html body.deviceland-arch .dl-lu-panel img.dl-lu-alt {
  opacity: 0;
}

@media (hover: hover) {
  html body.deviceland-arch .dl-lu-panel img {
    transition: opacity 0.35s var(--ease, ease);
  }

  /* Only the photo itself previews the second angle (owner, Oct 15): with
     the whole card as the trigger, moving the pointer down to the colour
     dots swapped the photo, and onto a dot swapped it back, so hovering
     the swatches read as changing the image. Dots change it on click only. */
  html body.deviceland-arch .dl-lu-panel.has-alt:hover img.dl-lu-main {
    opacity: 0;
  }

  html body.deviceland-arch .dl-lu-panel.has-alt:hover img.dl-lu-alt {
    opacity: 1;
  }
}

/* Name: two lines reserved so rows align; a one-line name sits on the lower
   line, beside its prices. Never cut (owner, Nov 11: "iPhone 17 Pro Max Silicone
   Cas..." on phones): a longer name takes more lines, and the subgrid below makes
   its whole row of cards follow, so rows still align. */
html body.deviceland-arch .dl-lu-name {
  display: flex;
  align-items: flex-end;
  min-height: 44px;
  margin: 14px 0 0;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
}

html body.deviceland-arch .dl-lu-name a {
  color: var(--on-paper);
  text-decoration: none;
}

html body.deviceland-arch .dl-lu-name span {
  display: block;
}

/* Rows of cards align part by part: see the subgrid block at the end of this file. */

html body.deviceland-arch .dl-lu-prices {
  min-height: 22px;
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--on-paper);
}

/* "Touch display" on the price line's right (deviceland_shows_touch_tag; owner,
   Nov 7). Same 22px row, so the card's height does not change. The price line
   is a size container so a narrow card (phones) drops "display" and keeps the
   glyph and "Touch"; the price itself still ellipsizes if it must. Static: no
   pulse in a grid. */
html body.deviceland-arch .dl-lu-prices:has(.dl-lu-touch) {
  container: dl-lu-prices / inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-overflow: clip;
}

html body.deviceland-arch .dl-lu-price-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body.deviceland-arch .dl-lu-touch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--on-paper);
}

html body.deviceland-arch .dl-lu-touch .dl-touch-glyph {
  width: 18px;
  height: 18px;
  flex: none;
}

@container dl-lu-prices (max-width: 220px) {
  html body.deviceland-arch .dl-lu-touch-more {
    display: none;
  }
}

/* The price wins: on the narrowest cards (320px screens, a 129px line) the
   word goes too, kept for screen readers, and the glyph (titled) stays
   (reviewer, Nov 7: "From $2,8…"). */
@container dl-lu-prices (max-width: 140px) {
  html body.deviceland-arch .dl-lu-touch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

html body.deviceland-arch .dl-lu-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 10px;
  min-height: 22px;
  margin-top: 8px;
}

html body.deviceland-arch .dl-lu-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

html body.deviceland-arch .dl-lu-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

html body.deviceland-arch .dl-lu-dot.is-on {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--paper), 0 0 0 3px var(--on-paper);
}

/* Screen sizes beside the colours: hairline pills, no fill, the same small
   type as the availability line, so they read as options, not buttons. */
html body.deviceland-arch .dl-lu-options {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

html body.deviceland-arch .dl-lu-sizes {
  display: flex;
  align-items: center;
  gap: 4px;
}

html body.deviceland-arch .dl-lu-size {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--hair-light-2, rgba(22, 19, 15, 0.22));
  border-radius: 999px;
  /* A soft stone fill at rest (owner, Oct 15), so they read as chips that
     can be clicked without outweighing the name and price. */
  background: rgba(22, 19, 15, 0.05);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--on-paper);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Ink on hover and focus: the product page's selected look, shown at the
   moment of choosing. At rest no size is chosen, so none is filled. */
html body.deviceland-arch .dl-lu-size:hover,
html body.deviceland-arch .dl-lu-size:focus-visible {
  border-color: var(--on-paper);
  background: var(--on-paper);
  color: var(--paper);
}

html body.deviceland-arch .dl-lu-more {
  font-size: 12px;
  color: var(--muted-fg);
}

/* The status is never cut ("Ready to ship from $1,3..." on a 1280px screen):
   it wraps under the colours when the row is full. */
html body.deviceland-arch .dl-lu-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted-fg);
}

html body.deviceland-arch .dl-lu-state.is-ready {
  color: var(--on-paper);
}

html body.deviceland-arch .dl-lu-seeall {
  display: inline-block;
  margin-top: 26px;
  font-size: 14px;
  color: var(--on-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-light-2);
}

html body.deviceland-arch .dl-lu-empty {
  font-size: 15px;
  color: var(--muted-fg);
}

@media (max-width: 1100px) {
  html body.deviceland-arch .dl-lu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrow cards: dots and status get a line each (fixed heights, so rows still
   align) instead of the status being cut to "Additional processing…". */
@media (max-width: 900px) {
  html body.deviceland-arch .dl-lu-meta {
    display: grid;
    grid-template-rows: minmax(18px, auto) minmax(18px, auto);
    align-items: center;
    min-height: 40px;
    gap: 4px;
  }

  html body.deviceland-arch .dl-lu-dots,
  html body.deviceland-arch .dl-lu-options {
    grid-row: 1;
  }

  html body.deviceland-arch .dl-lu-state {
    grid-row: 2;
    margin-left: 0;
  }
}

/* Tablet and phone: the index becomes one scrolling row under the title. */
@media (max-width: 800px) {
  html body.deviceland-arch .dl-lineup {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 22px;
  }

  html body.deviceland-arch .dl-lu-side {
    position: static;
    max-height: none;
    overflow: visible;
  }

  html body.deviceland-arch .dl-lu-filters {
    margin: -14px 0 24px;
    border-bottom: 1px solid var(--hair-light);
  }

  html body.deviceland-arch .dl-lu-filters > summary {
    display: flex;
    align-items: center;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  html body.deviceland-arch .dl-lu-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    padding-bottom: 16px;
  }

  html body.deviceland-arch .dl-lu-clear,
  html body.deviceland-arch .dl-lu-scope-note {
    grid-column: 1 / -1;
    justify-self: start;
  }

  html body.deviceland-arch .dl-lu-side {
    padding-right: 0;
  }

  /* Wrapping, not a sideways-scrolling strip: the strip's edge cut a chip mid-word
     ("MacB" at 320px, a stray dot at 390px) and nothing said it scrolled (owner, Nov 11). */
  html body.deviceland-arch .dl-lu-index {
    position: static;
    display: flex;
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: 0;
    margin-bottom: 28px;
    border-top: 1px solid var(--hair-light);
    border-bottom: 1px solid var(--hair-light);
  }

  html body.deviceland-arch .dl-lu-index a,
  html body.deviceland-arch .dl-lu-index a:last-child {
    flex: 0 0 auto;
    height: 44px;
    border: 0;
  }

  html body.deviceland-arch .dl-lu-index a > span:first-child {
    white-space: nowrap;
  }

  /* One scrolling row on a phone: the way up, this page and its own
     subcategories; other branches are a tap away in the menu. */
  html body.deviceland-arch .dl-lu-tree a.is-sibling {
    display: none;
  }

  html body.deviceland-arch .dl-lu-tree a[class*="is-d"] {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  html body.deviceland-arch .dl-lu-grid {
    gap: 34px 14px;
  }

  html body.deviceland-arch .dl-lu-name {
    min-height: 38px;
    font-size: 14px;
    line-height: 19px;
  }

  html body.deviceland-arch .dl-lu-prices {
    font-size: 13px;
  }

  html body.deviceland-arch .dl-lu-state {
    font-size: 11.5px;
  }

  html body.deviceland-arch .dl-lu-shead h2 {
    font-size: 28px;
  }
}

/* Rows of cards align part by part: each card spans four rows of the grid (photo,
   name, prices, details) and takes them as its own (subgrid), so a row's names,
   price lines and details lines are each as tall as that row's tallest. The grid's
   row gap would fall between a card's own rows, so it moves to the card's bottom
   margin (which a subgrid adds to its last row) and the grid's negative margin takes
   back the one after the last row: where nothing wraps, every card sits exactly where
   it did with fixed heights (reviewer, Nov 11). Last in the file so the breakpoints
   above cannot put the row gap back. Without subgrid (old browsers) the cards stay
   as before, text in full. */
html body.deviceland-arch .dl-lu-grid {
  --dl-lu-row-gap: 44px;
}

@media (max-width: 560px) {
  html body.deviceland-arch .dl-lu-grid {
    --dl-lu-row-gap: 34px;
  }
}

@supports (grid-template-rows: subgrid) {
  html body.deviceland-arch .dl-lu-grid {
    row-gap: 0;
    margin-bottom: calc(-1 * var(--dl-lu-row-gap));
  }

  html body.deviceland-arch .dl-lu-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: var(--dl-lu-row-gap);
  }
}