/*
 * Shop — the catalogue sheet: the product grid and its cards, the shop and
 * category toolbars, the chip rails around them, and the product detail page.
 *
 * Everything is scoped under .aq-page.aq-shop so these rules outrank
 * WooCommerce's own woocommerce-general / woocommerce-layout defaults, which
 * still load on this site (the cart, checkout and account pages are styled on
 * top of them by commerce.css). No rule here needs !important.
 *
 * The grid markup is WooCommerce's own content-product.php; the stock flag and
 * the parameter rows inside a card come from the loop hooks in functions.php.
 */

/* Product grid ----------------------------------------------------------- */

.aq-page.aq-shop ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.aq-page.aq-shop ul.products::before,
.aq-page.aq-shop ul.products::after { content: none; display: none; }

.aq-page.aq-shop ul.products li.product {
  position: relative;
  width: auto;
  margin: 0;
  /* The top row belongs to the availability flag (see below), so the product
     photo starts under it and cannot cover it. */
  padding: 46px 14px 14px;
  float: none;
  clear: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.aq-page.aq-shop ul.products li.product:hover {
  border-color: var(--aq-line);
  box-shadow: var(--aq-shadow);
}
.aq-page.aq-shop ul.products li.product a { text-decoration: none; }
/* One frame for every photo, whatever the photo was shot as: a square white
   tile with the part standing in it at its own proportions. Four photos cropped
   to 4/3 on four different backdrops read as four different shops; a square tile
   with an even 10px inset and a hairline border reads as one catalogue. The tile
   is the one size - `contain` is the whole point, so nothing is ever cropped or
   zoomed to reach it. */
.aq-page.aq-shop ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--aq-border-soft);
  border-radius: 8px;
  background: #fff;
}
/* Two lines of room for every title and never a third: a product name is a
   label, not a sentence, and a card that grows a line taller than its neighbours
   takes the whole row's price and button with it. The clamp cuts what does not
   fit; the min-height holds the two lines open for the names that are one short
   word. Both are set in em, so the one change of type size at 760px (14px) takes
   the reserved height with it. */
.aq-page.aq-shop ul.products li.product .woocommerce-loop-product__title,
.aq-page.aq-shop ul.products li.product h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* The photo is a block now, so its baseline gap is gone: the title carries the
     space under the tile itself. */
  margin: 10px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--aq-ink);
  min-height: 2.7em;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
 * The one price row on a card.
 *
 * A card states one price and, when there is an old one, the pair that says so:
 * "From" where the price really is a floor, the struck-through figure, and the
 * figure a buyer pays. They are one line of atoms on one baseline - never a line
 * that breaks inside an amount, never a "From" that drifts away from its number.
 *
 * The row is a flex line for a second reason. WooCommerce (a discounted simple
 * product) and inc/catalogue.php (a discounted variant product) both print a
 * screen-reader sentence beside the pair - "Original price was: ... Current price
 * is: ..." - and no stylesheet in this theme clips .screen-reader-text, so the
 * card printed those two sentences as visible words between the two figures. It
 * is clipped below with the same technique the card's plugin note uses further
 * down this file: absolute, one pixel, clip-path - kept in the text a screen
 * reader reads, out of the row a buyer looks at.
 * ------------------------------------------------------------------------- */

.aq-page.aq-shop ul.products li.product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0;
  /* One line of room whether or not the row carries a struck-through figure, so
     the button at the foot of every card in a row stays on one line. */
  min-height: 1.35em;
  line-height: 1.35;
  font-size: 15px;
  font-weight: 800;
  color: var(--aq-ink);
  font-variant-numeric: tabular-nums;
}
.aq-page.aq-shop ul.products li.product .price .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* An amount is one atom: its currency symbol, its figures and its decimals stay
   together, and the gap above is the only space between the atoms of the row. */
.aq-page.aq-shop ul.products li.product .price del,
.aq-page.aq-shop ul.products li.product .price ins,
.aq-page.aq-shop ul.products li.product .price del bdi,
.aq-page.aq-shop ul.products li.product .price ins bdi { white-space: nowrap; }
.aq-page.aq-shop ul.products li.product .price del {
  color: var(--aq-muted);
  font-weight: 500;
  opacity: 1;
}
.aq-page.aq-shop ul.products li.product .price ins { text-decoration: none; font-weight: 800; }

/* The parameter block reserves the three rows the loop hooks print (see
   aqurov_product_card_specs()), because a card showing two rows beside a card
   showing three puts its price at a different height in the same row. The three
   rows are equal and the block keeps the component's 3px gap between them. Each
   row is one line: a value too long for its column is ellipsised, never wrapped
   into a fourth row that would make the card taller than its neighbours.
   The component (assets/css/components.css) still owns the look - label left,
   value right - and this only hands it the space and the single-line rows.
   minmax(auto, ...) rather than minmax(0, ...): a row is never given less than
   its own line, so a long value cannot bleed into the row under it. 4.35em is
   the three rows of 1.45em plus the 6px of the component's two 3px gaps, written
   as a sum rather than a multiplication because `*` inside calc() is recent, and
   a reserved height that silently disappears on an older browser is exactly the
   misalignment this rule exists to prevent. */
.aq-page.aq-shop ul.products li.product .aq-card-specs {
  grid-template-rows: repeat(3, minmax(auto, 1fr));
  min-height: calc(4.35em + 6px);
  line-height: 1.45;
}
.aq-page.aq-shop ul.products li.product .aq-card-specs li {
  align-items: baseline;
  min-width: 0;
  white-space: nowrap;
}
.aq-page.aq-shop ul.products li.product .aq-card-specs li > span,
.aq-page.aq-shop ul.products li.product .aq-card-specs li > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The label gives way only when the row cannot hold both; the value takes the
   free space, so it keeps reaching the right end of the row as it is ellipsised. */
.aq-page.aq-shop ul.products li.product .aq-card-specs li > span { flex: 0 1 auto; }
.aq-page.aq-shop ul.products li.product .aq-card-specs li > b { flex: 1 1 0; }

/* The store's own "featured" flag is printed by functions.php beside the
   availability flag, and it is styled as a shared component rule next to
   .aq-loop-flag in components.css: the same loop hook prints it in the home and
   landing grids as well, where this file's shield does not reach. */
.aq-page.aq-shop ul.products li.product .star-rating { margin: 0; font-size: 12px; }
.aq-page.aq-shop ul.products li.product .woocommerce-loop-product__link { display: block; }

.aq-page.aq-shop ul.products li.product a.button,
.aq-page.aq-shop ul.products li.product a.added_to_cart,
.aq-page.aq-shop ul.products li.product .button,
.aq-page.aq-shop ul.products li.product .added_to_cart {
  margin: 0;
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aq-blue);
  border-radius: 6px;
  background: var(--aq-blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/*
 * The action WooCommerce prints on a card — the "Add to cart" button, or the
 * "Select options" link of a product with variants — is the first element after
 * the product link, and that is the element pinned to the foot of the card, so
 * every button in a row sits on one line however many parameter rows the product
 * above it carries. The screen-reader note a variable product leaves behind it
 * is taken out of the flow below, so it cannot claim the same free space.
 *
 * The selector names the action twice, once by its position and once as a
 * button, and that is not redundancy: the card's own button rule above
 * (… li.product a.button, weight 0-5-3) declares `margin: 0` and outranks a
 * selector that only describes the position (… + *, weight 0-5-2), so a rule
 * written that way is silently cancelled and the buttons drift apart again.
 * The action is always an `a.button` here — WooCommerce prints the loop action
 * as a link, AJAX or not — but the `.button` case is kept beside it because a
 * plugin that switches to a real submit button should not resurrect the bug.
 */
.aq-page.aq-shop ul.products li.product > .woocommerce-loop-product__link + a.button,
.aq-page.aq-shop ul.products li.product > .woocommerce-LoopProduct-link + a.button,
.aq-page.aq-shop ul.products li.product > .woocommerce-loop-product__link + .button,
.aq-page.aq-shop ul.products li.product > .woocommerce-LoopProduct-link + .button { margin-top: auto; }
.aq-page.aq-shop ul.products li.product > .woocommerce-loop-product__link + a.button ~ *,
.aq-page.aq-shop ul.products li.product > .woocommerce-LoopProduct-link + a.button ~ * { margin-top: 0; }

/* The described-by note the plugin prints under a variable card's action is
   clipped to a pixel but still holds a line of the card, which leaves the action
   a line short of the card's foot: out of the flow it stays in the text a screen
   reader reads and out of the card's layout. */
.aq-page.aq-shop ul.products li.product > .screen-reader-text,
.aq-page.aq-shop ul.products li.product > * > .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.aq-page.aq-shop ul.products li.product a.button:hover,
.aq-page.aq-shop ul.products li.product .button:hover {
  background: var(--aq-blue-dark);
  border-color: var(--aq-blue-dark);
  color: #fff;
}
.aq-page.aq-shop ul.products li.product a.added_to_cart,
.aq-page.aq-shop ul.products li.product .added_to_cart {
  background: #fff;
  color: var(--aq-blue);
}

/* Toolbar and notices ---------------------------------------------------- */

.aq-page.aq-shop .aq-shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius);
  background: #fff;
}
.aq-page.aq-shop .aq-shop-bar .woocommerce-result-count {
  margin: 0;
  font-size: 13px;
  color: var(--aq-muted);
}
.aq-page.aq-shop .aq-shop-bar .woocommerce-ordering { margin: 0; }
.aq-page.aq-shop .aq-shop-bar .woocommerce-ordering select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--aq-line);
  border-radius: 6px;
  background: #fff;
  color: var(--aq-ink);
  font-size: 13.5px;
}
.aq-page.aq-shop .aq-notices:empty { display: none; }
.aq-page.aq-shop .aq-notices .woocommerce-message,
.aq-page.aq-shop .aq-notices .woocommerce-info,
.aq-page.aq-shop .aq-notices .woocommerce-error {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--aq-border);
  border-left: 3px solid var(--aq-blue);
  border-radius: 6px;
  background: var(--aq-alt);
  color: var(--aq-body);
  font-size: 14px;
  list-style: none;
}
.aq-page.aq-shop .aq-notices .woocommerce-error { border-left-color: var(--aq-red); }
.aq-page.aq-shop .aq-notices .woocommerce-message .button,
.aq-page.aq-shop .aq-notices .woocommerce-info .button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--aq-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* Product detail --------------------------------------------------------- */

.aq-page.aq-shop.aq-product .aq-product-main { margin-top: 8px; }

.aq-page.aq-shop.aq-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 36px 44px;
  align-items: start;
  margin: 0;
}
.aq-page.aq-shop.aq-product div.product > .woocommerce-product-gallery,
.aq-page.aq-shop.aq-product div.product > .summary {
  width: auto;
  float: none;
  margin: 0;
}
.aq-page.aq-shop.aq-product div.product > .woocommerce-tabs,
.aq-page.aq-shop.aq-product div.product > .related.products,
.aq-page.aq-shop.aq-product div.product > .up-sells,
.aq-page.aq-shop.aq-product div.product > section { grid-column: 1 / -1; }

.aq-page.aq-shop.aq-product div.product .woocommerce-product-gallery img { border-radius: 6px; }
.aq-page.aq-shop.aq-product div.product .woocommerce-product-gallery .flex-control-thumbs { margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.aq-page.aq-shop.aq-product div.product .woocommerce-product-gallery .flex-control-thumbs li { width: 74px; margin: 0; float: none; }
.aq-page.aq-shop.aq-product div.product .woocommerce-product-gallery .flex-control-thumbs img { border: 1px solid var(--aq-border); border-radius: 4px; }
.aq-page.aq-shop.aq-product div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: var(--aq-blue); }

.aq-page.aq-shop.aq-product div.product .product_title {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--aq-ink);
  overflow-wrap: anywhere;
}
.aq-page.aq-shop.aq-product div.product .summary > .price {
  margin: 0 0 16px;
  font-size: 23px;
  font-weight: 800;
  color: var(--aq-ink);
  font-variant-numeric: tabular-nums;
}
.aq-page.aq-shop.aq-product div.product .summary > .price del { color: var(--aq-muted); font-weight: 500; opacity: 1; margin-right: 8px; }
.aq-page.aq-shop.aq-product div.product .summary > .price ins { text-decoration: none; }
.aq-page.aq-shop.aq-product div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.7;
  color: var(--aq-body);
}
.aq-page.aq-shop.aq-product div.product .woocommerce-product-details__short-description p { margin: 0 0 12px; }
.aq-page.aq-shop.aq-product div.product .woocommerce-product-rating { margin: 0 0 12px; }
.aq-page.aq-shop.aq-product div.product .product_meta {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--aq-border);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--aq-muted);
}
.aq-page.aq-shop.aq-product div.product .product_meta a { color: var(--aq-blue); }

.aq-page.aq-shop.aq-product div.product .stock { font-size: 13px; font-weight: 700; }
.aq-page.aq-shop.aq-product div.product .stock.in-stock { color: var(--aq-green); }
.aq-page.aq-shop.aq-product div.product .stock.out-of-stock { color: var(--aq-muted); }

.aq-page.aq-shop.aq-product div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius);
  background: var(--aq-alt);
}
.aq-page.aq-shop.aq-product div.product form.cart .quantity { margin: 0; }
.aq-page.aq-shop.aq-product div.product form.cart .quantity input.qty {
  width: 84px;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--aq-line);
  border-radius: 6px;
  background: #fff;
  color: var(--aq-ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.aq-page.aq-shop.aq-product div.product form.cart button.single_add_to_cart_button,
.aq-page.aq-shop.aq-product div.product form.cart .single_add_to_cart_button {
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid var(--aq-blue);
  border-radius: 6px;
  background: var(--aq-blue);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
}
.aq-page.aq-shop.aq-product div.product form.cart .single_add_to_cart_button:hover { background: var(--aq-blue-dark); border-color: var(--aq-blue-dark); }
.aq-page.aq-shop.aq-product div.product form.cart .wc-pao-addon,
.aq-page.aq-shop.aq-product div.product form.cart .variations { width: 100%; }

.aq-page.aq-shop.aq-product div.product .variations { margin: 0 0 6px; border-collapse: collapse; font-size: 14px; }
.aq-page.aq-shop.aq-product div.product .variations th,
.aq-page.aq-shop.aq-product div.product .variations td {
  padding: 8px 10px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--aq-border);
  text-align: left;
  vertical-align: middle;
}
.aq-page.aq-shop.aq-product div.product .variations th { font-weight: 600; color: var(--aq-body); width: 34%; }
.aq-page.aq-shop.aq-product div.product .variations select {
  min-height: 42px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--aq-line);
  border-radius: 6px;
  background: #fff;
  color: var(--aq-ink);
  font-size: 14px;
}
.aq-page.aq-shop.aq-product div.product .woocommerce-variation-price { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--aq-ink); }
.aq-page.aq-shop.aq-product div.product .reset_variations { font-size: 12.5px; color: var(--aq-muted); }

/* Product tabs and related products -------------------------------------- */

.aq-page.aq-shop.aq-product div.product .woocommerce-tabs { margin-top: 12px; }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs::before,
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs::after { content: none; display: none; }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--aq-border);
}
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs ul.tabs::before,
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs ul.tabs::after { content: none; display: none; }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: var(--aq-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs ul.tabs li.active a {
  margin-bottom: -1px;
  border-color: var(--aq-border);
  background: #fff;
  color: var(--aq-ink);
}
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .woocommerce-Tabs-panel { margin: 0; padding: 26px 0 0; }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2 { margin: 0 0 14px; font-size: 21px; font-weight: 800; color: var(--aq-ink); }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .woocommerce-Tabs-panel p,
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .woocommerce-Tabs-panel li { font-size: 15px; line-height: 1.75; color: var(--aq-body); }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .shop_attributes { border-collapse: collapse; width: 100%; }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .shop_attributes th,
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .shop_attributes td { border: 1px solid var(--aq-border); padding: 11px 14px; text-align: left; }
.aq-page.aq-shop.aq-product div.product .woocommerce-tabs .shop_attributes th { width: 34%; background: var(--aq-alt); font-weight: 600; color: var(--aq-body); }

.aq-page.aq-shop.aq-product div.product .related.products,
.aq-page.aq-shop.aq-product div.product .up-sells { margin-top: 20px; }
.aq-page.aq-shop.aq-product div.product .related.products > h2,
.aq-page.aq-shop.aq-product div.product .up-sells > h2 { margin: 0 0 18px; font-size: 22px; font-weight: 800; color: var(--aq-ink); }

/* The catalogue hero ----------------------------------------------------- */

/* The hero on this page is a page header, not a landing panel: the field, the
   filters and the products are the page, and every line of prose above them
   pushes the list further down the screen. The vertical rhythm is tightened, the
   lede steps down to the size the list itself is set in, and the heading is left
   at the shared size - the h1 is not what was taking the height. Only the shop is
   reached, so the other pages built on .aq-hero--compact keep their own spacing.
   The padding is stated here rather than in a media block: it has to hold at
   every width, and this selector outranks the shared .aq-hero media rules. */

.aq-page.aq-shop .aq-hero--compact { padding: 26px 0 30px; }
.aq-page.aq-shop .aq-hero--compact .aq-kicker { margin: 0 0 8px; }
.aq-page.aq-shop .aq-hero--compact h1 { margin: 0 0 10px; }
.aq-page.aq-shop .aq-hero--compact .aq-hero-lede { font-size: 15.5px; line-height: 1.55; }

/* The three counts the hero used to print as three cards: they are context for
   the list below, so they read as one caption line under the field and wrap on a
   phone. The line sits on the dark panel, so it takes the muted colour the panel
   gives it (--aq-on-dark-muted) and the numbers take white - an ink-dark number
   on this background is a number nobody reads. */
.aq-page.aq-shop .aq-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--aq-on-dark-muted);
}
.aq-page.aq-shop .aq-hero-meta b {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Rails, fact strip and small parts -------------------------------------- */

/* The family rail under the hero.
   Eight pills of eight different widths read as a ragged sentence; eight pills
   of one width, each holding its label at the left end and its count at the right,
   read as the list of families the catalogue is. Four across on a desktop, two on
   a tablet, one on a phone - the shape of the grid below it.
   The subfamily rail (.aq-rail--sub) is a different set - the children of the
   family being read, sometimes two and sometimes twenty - and keeps wrapping the
   way the component prints it; only the shop's own rails are laid out here, so
   the same .aq-rail on /learn/ and /technical/ is untouched. */
/* The rail now meets the count and ordering toolbar directly: no filter bar sits
   between them any more, so its bottom margin is the only space above the
   toolbar and it is set to the same 20px rhythm the toolbar uses below itself. */
.aq-page.aq-shop .aq-rail { margin: 0 0 20px; }
.aq-page.aq-shop .aq-rail:not(.aq-rail--sub) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.aq-page.aq-shop .aq-rail:not(.aq-rail--sub) > li { display: flex; min-width: 0; }
/* The pill is the width of its column, so the eight of them are one set: the
   label stays at the left end and the count at the right end of every pill in the
   grid, whatever the length of the family name. Both of these are kept off the
   subfamily rail for the same reason the grid is - a full-width pill in a rail
   that wraps along one line would be the whole line. */
.aq-page.aq-shop .aq-rail:not(.aq-rail--sub) .aq-chip {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  justify-content: space-between;
  padding: 0 14px;
}
/* The selected family is filled, because it is the state of the whole list, not
   a hover: the blue fill and the white label are the same pair the filter pills
   and the buttons use. */
.aq-page.aq-shop .aq-rail .aq-chip[aria-current="page"],
.aq-page.aq-shop .aq-rail .aq-chip.is-current {
  border-color: var(--aq-blue);
  background: var(--aq-blue);
  color: #fff;
}
/* A chip is a link with no other cue: the ring is what tells a keyboard which one
   is about to be followed, so it is drawn on every chip, filled or not. */
.aq-page.aq-shop .aq-rail .aq-chip:focus-visible {
  border-color: var(--aq-blue);
  outline: 2px solid var(--aq-blue);
  outline-offset: 2px;
}

.aq-page.aq-shop .aq-rail--sub { margin-top: -6px; }
.aq-page.aq-shop .aq-rail--sub .aq-chip { background: #fff; font-weight: 600; }
.aq-page.aq-shop .aq-shop-search { margin-top: 16px; max-width: 640px; }

.aq-page.aq-shop .aq-facts--strip {
  display: grid;
  /* A cap on the track keeps a short strip (two or three facts) from stretching
     into two half-page slabs of empty panel on a wide screen. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 300px));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.aq-page.aq-shop .aq-facts--strip li {
  padding: 13px 15px;
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius);
  background: var(--aq-alt);
}
.aq-page.aq-shop .aq-facts--strip b { font-size: 15px; overflow-wrap: anywhere; }
.aq-page.aq-shop .aq-facts--strip b a { color: var(--aq-blue); text-decoration: none; }
.aq-page.aq-shop .aq-facts--strip b a:hover { text-decoration: underline; }
.aq-page.aq-shop .aq-facts--strip .aq-badge { font-size: 11.5px; }

/* .aq-subhead and .aq-note are shared primitives: see assets/css/components.css. */

/* Small screens ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .aq-page.aq-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .aq-page.aq-shop.aq-product div.product { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .aq-page.aq-shop.aq-product div.product .product_title { font-size: 26px; }
}

@media (max-width: 760px) {
  .aq-page.aq-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* The top row stays free for the availability flag on a narrow card too. */
  .aq-page.aq-shop ul.products li.product { padding: 46px 12px 12px; gap: 8px; }
  .aq-page.aq-shop ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
  .aq-page.aq-shop.aq-product div.product .product_title { font-size: 23px; }
  .aq-page.aq-shop.aq-product div.product form.cart { padding: 14px; }
  .aq-page.aq-shop.aq-product div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
  .aq-page.aq-shop.aq-product div.product .woocommerce-tabs ul.tabs li a { padding: 10px 12px; font-size: 13.5px; }
}

@media (max-width: 560px) {
  .aq-page.aq-shop ul.products { grid-template-columns: minmax(0, 1fr); }
  .aq-page.aq-shop .aq-shop-bar { flex-direction: column; align-items: stretch; }
  .aq-page.aq-shop .aq-shop-bar .woocommerce-ordering select { width: 100%; }
  .aq-page.aq-shop .aq-facts--strip { grid-template-columns: minmax(0, 1fr); }
  .aq-page.aq-shop.aq-product div.product .woocommerce-product-gallery .flex-control-thumbs li { width: 62px; }
}

/* ---------------------------------------------------------------------------
 * The mobile action bar — printed by assets/js/product-bar.js on a product page.
 *
 * The rule exists because the price and the buy button sit under the gallery: on a
 * narrow screen they are a screen or more below the heading. Everything here
 * styles that bar only; the form it submits is WooCommerce's own markup.
 * ------------------------------------------------------------------------- */
.aq-product-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--color-background, #f6f3ed);
  border-top: 1px solid rgba(23, 33, 43, 0.14);
  box-shadow: 0 -8px 20px rgba(23, 33, 43, 0.1);
}
.aq-product-bar[hidden] { display: none; }
.aq-product-bar:not([hidden]) { display: flex; }

.aq-product-bar__price {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--color-ink, #17212b);
  font-size: 1.0625rem;
  line-height: 1.25;
}
.aq-product-bar__price del { color: #6b7a88; font-size: 0.875em; }
.aq-product-bar__price ins { text-decoration: none; font-weight: 600; }
.aq-product-bar__price .woocommerce-Price-currencySymbol { font-size: 0.9em; }

.aq-product-bar__action {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--color-ink, #17212b);
  border-radius: var(--radius-control, 8px);
  background: var(--color-ink, #17212b);
  color: var(--color-background, #f6f3ed);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.aq-product-bar__action:focus-visible {
  outline: 3px solid var(--color-focus, #b55718);
  outline-offset: 2px;
}
.aq-product-bar__action:hover { background: #0f1720; }

/* A wide screen puts the form beside the gallery, so there is nothing to repeat. */
@media (min-width: 901px) {
  .aq-product-bar:not([hidden]) { display: none; }
}
/* ---------------------------------------------------------------------------
 * The filter bar and the "From" label on a card, printed by inc/catalogue.php.
 *
 * The bar is one more paper strip of the catalogue sheet, so it repeats the
 * .aq-shop-bar's border, radius and 12/14px padding instead of inventing a panel
 * of its own: a buyer reads it as the top row of the same list, not as a form
 * dropped onto the page. The fieldsets keep no browser chrome, because a
 * fieldset's default border and a legend's default box are what make a native
 * form look unlike everything around it.
 * ------------------------------------------------------------------------- */

.aq-page.aq-shop .aq-filterbar {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius);
  background: #fff;
}

/* One row on a desktop: the two groups sit left and the actions push themselves
   to the right end. Groups align on their foot rather than their centre so the
   pills and the taller price inputs share one baseline. */
.aq-page.aq-shop .aq-filterbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  min-width: 0;
}

.aq-page.aq-shop .aq-filterbar-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The legend is the group's label, not a boxed heading: pulled back to the size
   and colour of the toolbar's own secondary text so it reads as a caption. */
.aq-page.aq-shop .aq-filterbar-group legend {
  margin: 0;
  padding: 0;
  color: var(--aq-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aq-page.aq-shop .aq-filterbar-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aq-page.aq-shop .aq-filterbar-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

/* The radio is taken out of sight but kept in the form and in the tab order: it
   is clipped to a pixel, never display:none, so it stays focusable and a screen
   reader still finds the label. The focus ring it cannot draw on itself is drawn
   on the pill beside it, below. */
.aq-page.aq-shop .aq-filterbar-option input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The pill carries the whole look of the choice; the same 13px/600 as the chip
   rail above it, one size shorter and pill-shaped. */
.aq-page.aq-shop .aq-filterbar-option span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--aq-line);
  border-radius: 999px;
  background: #fff;
  color: var(--aq-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

/* Hover is a quiet outline only while the pill is unselected, so a checked pill
   does not lose its fill under the pointer. */
.aq-page.aq-shop .aq-filterbar-option:hover input:not(:checked) + span {
  border-color: var(--aq-blue);
  color: var(--aq-blue);
}
.aq-page.aq-shop .aq-filterbar-option input:checked + span {
  border-color: var(--aq-blue);
  background: var(--aq-blue);
  color: #fff;
}
.aq-page.aq-shop .aq-filterbar-option input:focus-visible + span {
  outline: 2px solid var(--aq-blue);
  outline-offset: 2px;
}

/* The two labels are the fields' accessible names, so they are clipped here the
   same way a card's plugin note is: no stylesheet in this theme carries a global
   .screen-reader-text rule, and an unclipped label would stand in the row beside
   its own input. */
.aq-page.aq-shop .aq-filterbar .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The price inputs are the toolbar's select, at half its width: same height,
   border, radius and 13.5px label, so the two rows read as one control set. */
.aq-page.aq-shop .aq-filterbar-range {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.aq-page.aq-shop .aq-filterbar-range input {
  width: 96px;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--aq-line);
  border-radius: 6px;
  background: #fff;
  color: var(--aq-ink);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.aq-page.aq-shop .aq-filterbar-range input:focus {
  border-color: var(--aq-blue);
  outline: 2px solid var(--aq-blue);
  outline-offset: 1px;
}
.aq-page.aq-shop .aq-filterbar-range-sep {
  flex: 0 0 auto;
  color: var(--aq-muted);
  font-size: 13.5px;
  line-height: 1;
}

/* The actions take the right end of the row. min-width: 0 on the container and
   the controls lets a long label (in any language) wrap inside the strip rather
   than push it past its own border. */
.aq-page.aq-shop .aq-filterbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}
.aq-page.aq-shop .aq-filterbar-actions .aq-btn {
  min-width: 0;
  min-height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
  white-space: normal;
}

/* The "From" of a variable product's lowest price. It sits inside the card's
   existing .price span, so it only lowers its own weight and colour: the amount
   after it keeps the 15px/800 and the tabular figures the .price rule sets. It
   carries no margin of its own - the row's 6px gap is what spaces "From $209.00"
   and "was $175 now $159" - so the two shapes of the row space the same. */
.aq-page.aq-shop ul.products li.product .price .aq-price-from {
  color: var(--aq-muted);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Small screens ---------------------------------------------------------- */

@media (max-width: 760px) {
  .aq-page.aq-shop .aq-filterbar-form { gap: 12px 16px; }
  /* Wrapped onto its own line, the action row has no right end to reach for. */
  .aq-page.aq-shop .aq-filterbar-actions { margin-left: 0; }
}

@media (max-width: 560px) {
  /* One group per line: the bar is taller than a phone's row of controls can
     hold, and a full-width group is what a thumb can aim at. */
  .aq-page.aq-shop .aq-filterbar-form { flex-direction: column; align-items: stretch; }
  .aq-page.aq-shop .aq-filterbar-group { width: 100%; }
  .aq-page.aq-shop .aq-filterbar-range input { flex: 1 1 0; width: auto; min-width: 0; }
  .aq-page.aq-shop .aq-filterbar-actions { width: 100%; }
  .aq-page.aq-shop .aq-filterbar-actions .aq-btn { flex: 1 1 0; }
}

/* ---------------------------------------------------------------------------
 * The count behind a filter choice.
 *
 * The number is what turns "Made to order" from a button that leads to an empty
 * list into an answer: a choice with nothing behind it keeps its zero, loses its
 * pointer and its fill, and stays readable beside the choices that do lead
 * somewhere.
 * ------------------------------------------------------------------------- */
.aq-page.aq-shop .aq-filterbar-count {
  margin-left: 6px;
  font-size: 0.92em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--aq-muted);
}
.aq-page.aq-shop .aq-filterbar-option input:checked + span .aq-filterbar-count { color: rgba(255, 255, 255, 0.82); }
.aq-page.aq-shop .aq-filterbar-option.is-empty { cursor: default; }
.aq-page.aq-shop .aq-filterbar-option.is-empty span {
  border-style: dashed;
  background: var(--aq-alt);
  color: var(--aq-muted);
}

/* ---------------------------------------------------------------------------
 * Small screens for the catalogue hero and the family rail.
 *
 * These sit at the end of the sheet, not with the other media blocks above,
 * because they narrow rules written further down the file: a media block only
 * overrides a selector of the same weight when it comes after it, and both the
 * rail grid and the hero rhythm are written in the rails section.
 * ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Two pills across: a family name and its count still share one line, and the
     rail stays two rows instead of eight. */
  .aq-page.aq-shop .aq-rail:not(.aq-rail--sub) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aq-page.aq-shop .aq-hero--compact { padding: 22px 0 24px; }
}

@media (max-width: 560px) {
  /* One pill per family at full width, so the count reaches the right edge of the
     screen rather than the right edge of a half-width pill. */
  .aq-page.aq-shop .aq-rail:not(.aq-rail--sub) { grid-template-columns: minmax(0, 1fr); }
  .aq-page.aq-shop .aq-hero-meta { gap: 2px 12px; }
}