/*
 * Automania shop archive design.
 */

.am-shop-page {
  background: #fff;
  color: #000;
  font-family: var(--am-font-body);
}

.am-shop-container {
  margin: 0 auto;
  max-width: 1800px;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
}

/* Figma's "car-category-banner" (node 602:10789) is a 1920x698 dark
   gradient with a red glow on the left, sized against the full 1920px
   reference canvas — every fluid value below is that Figma px value
   scaled as a %-of-1920 vw, same pure-viewport-proportional technique
   used for the homepage's own type scale (see global.css), so this
   banner actually reaches its Figma size at a 1920px viewport instead
   of stalling well below it. */
.am-shop-hero {
  background: radial-gradient(ellipse 17% 38% at 12% 50%, rgba(203, 36, 46, .4), transparent 70%), linear-gradient(90deg, #1a0a00 0%, #0d0d0f 50%, #080808 100%);
  color: #fff;
  padding: 104px 0 0;
  position: relative;
}

/* Figma's 698px banner height already includes its own 105px top
   padding (matching this section's own 104px padding-top) — this
   min-height stands for the space AFTER that padding, so its max is
   698-104=594px, not 698. Using 698 here double-counted the padding
   once as this section's own padding-top and again inside the
   min-height, adding ~104px of dead air above the (bottom-anchored)
   car image and pushing it far below the text — exactly the oversized
   text-to-image gap reported live. */
.am-shop-hero .am-shop-container {
  min-height: clamp(340px, 30.9375vw, 594px);
  position: relative;
}

.am-shop-hero__content {
  margin: 0 auto;
  max-width: 960px;
  position: relative;
  text-align: center;
  z-index: 2;
}

.am-shop-hero__content > p {
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.am-shop-hero h1 {
  color: #fff;
  font-family: var(--am-font-heading);
  font-size: clamp(40px, 4.4271vw, 85px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: clamp(46px, 4.6875vw, 90px);
  margin: 0 0 14px;
}

.am-shop-hero__text,
.am-shop-hero__text p {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

/* Figma's car photo is 1498px wide against the 1920px banner (78vw) and
   overhangs the banner's bottom edge by 223px (11.615vw) — bleeding onto
   the white section below exactly like the homepage hero does. Both
   numbers are expressed as the same vw scale as the banner itself so the
   car never drifts out of proportion with it at any viewport. */
.am-shop-hero__image {
  bottom: clamp(-223px, -11.615vw, -70px);
  display: block;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: clamp(300px, 78vw, 1498px);
  z-index: 1;
}

.am-shop-listing {
  /* Clears the hero image's overhang (see .am-shop-hero__image's "bottom",
     same vw scale, mirrored to a positive clearance) plus breathing room —
     this used to be provided by the now-removed .am-shop-tabs section. */
  padding: calc(32px + clamp(70px, 11.615vw, 223px)) 0 116px;
}

/* While the hero banner image is hidden (archive-product.php adds this
   class — see $show_hero_image there), the two things that only existed
   to make room for it go away with it: the hero's tall image-sized
   min-height, and the listing's top padding that cleared the image's
   overhang past the hero's bottom edge. Scoped to the modifier class so
   restoring the image restores the original spacing with no CSS edit. */
/* Equal padding top and bottom: the base hero's 104px top padding was sized
   for the image layout, which left the text sitting lower than centred in
   the now image-less banner. The doubled class beats the mobile
   ".am-shop-hero { padding-top: 50px }" rule further down. */
.am-shop-hero.am-shop-hero--no-image {
  padding-bottom: 72px;
  padding-top: 72px;
}

.am-shop-hero--no-image .am-shop-container {
  min-height: 0;
}

.am-shop-hero--no-image + .am-shop-listing {
  padding-top: 64px;
}

/* "Collectible Makers / Brands / Scale" buttons (archive-product.php,
   rendered between the hero and the listing when at least one of those
   categories exists). They take over the job the listing's own top padding
   used to do — clearing the hero image's overhang when the image is
   showing — so with the image the nav gets that same clearance and the
   listing only needs a normal gap below it; with the image hidden the nav
   just needs a normal gap under the hero. If the nav isn't rendered the
   rules above keep applying to the listing directly. */
.am-shop-tabs {
  padding: calc(32px + clamp(70px, 11.615vw, 223px)) 0 0;
}

.am-shop-hero--no-image + .am-shop-tabs {
  padding-top: 40px;
}

.am-shop-tabs .am-shop-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Red by default, black on the page you're on (aria-current) — the same
   red/black pair the rest of the theme's buttons use. */
.am-shop-tabs a.am-shop-tabs__link {
  align-items: center;
  background: var(--am-red);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  gap: 10px;
  line-height: 24px;
  min-height: 44px;
  padding: 0 22px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.am-shop-tabs a.am-shop-tabs__link i {
  font-size: 15px;
  line-height: 1;
}

.am-shop-tabs a.am-shop-tabs__link:hover,
.am-shop-tabs a.am-shop-tabs__link:focus {
  background: #a81d25;
  color: #fff;
}

.am-shop-tabs a.am-shop-tabs__link.is-active,
.am-shop-tabs a.am-shop-tabs__link.is-active:hover,
.am-shop-tabs a.am-shop-tabs__link.is-active:focus {
  background: #000;
  color: #fff;
}

.am-shop-tabs + .am-shop-listing {
  padding-top: 32px;
}

@media (max-width: 767px) {
  .am-shop-hero.am-shop-hero--no-image {
    padding-bottom: 48px;
    padding-top: 48px;
  }

  .am-shop-hero--no-image + .am-shop-listing {
    padding-top: 40px;
  }

  .am-shop-hero--no-image + .am-shop-tabs {
    padding-top: 28px;
  }

  .am-shop-tabs a.am-shop-tabs__link {
    font-size: 15px;
    min-height: 40px;
    padding: 0 18px;
  }

  .am-shop-tabs + .am-shop-listing {
    padding-top: 28px;
  }
}

/* Small phones: tighter sizing; with the icons the three no longer fit on
   one row at 375px, so they wrap (the container is flex-wrap). */
@media (max-width: 575px) {
  .am-shop-tabs .am-shop-container {
    gap: 8px;
  }

  .am-shop-tabs a.am-shop-tabs__link {
    font-size: 14px;
    gap: 8px;
    padding: 0 14px;
  }

  .am-shop-tabs a.am-shop-tabs__link i {
    font-size: 13px;
  }
}

.am-shop-layout {
  align-items: start;
  display: grid;
  gap: 54px;
  grid-template-columns: 200px minmax(0, 1fr);
}

.am-shop-sidebar {
  min-width: 0;
}

.am-shop-results {
  min-width: 0;
}

.am-shop-results .content-area,
.am-shop-results .site-main {
  margin: 0;
  padding: 0;
  width: 100%;
}

.am-shop-results .woocommerce-breadcrumb,
.am-shop-results .woocommerce-products-header,
.am-shop-toolbar .woocommerce-result-count,
.am-shop-toolbar .woocommerce-ordering {
  display: none;
}

.am-shop-filter {
  border: 0;
  margin: 0;
  padding: 0;
}

.am-shop-filter__title {
  color: #000;
  font-family: var(--am-font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  margin: 0 0 24px;
}

.am-shop-filter__group {
  border: 0;
  border-top: 1px solid #e8e8e8;
  margin: 0;
  padding: 20px 0 0;
}

.am-shop-filter__group + .am-shop-filter__group {
  margin-top: 30px;
}

.am-shop-filter__group summary {
  align-items: center;
  color: #000;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  font-weight: 600;
  justify-content: space-between;
  line-height: 31px;
  list-style: none;
  text-transform: capitalize;
}

.am-shop-filter__group summary::-webkit-details-marker {
  display: none;
}

.am-shop-filter__group summary:after {
  color: #111;
  content: "\f106";
  font-family: "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
}

.am-shop-filter__group:not([open]) summary:after {
  content: "\f107";
}

.am-shop-filter__options {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.am-shop-filter__option {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 4px 0;
}

/* Without this, the "hidden" attribute the View More/Less toggle
   relies on wouldn't actually hide anything — an author style setting
   display:flex (above) always wins over the browser's own default
   "[hidden] { display: none }", regardless of specificity, since that
   default lives in the user-agent stylesheet rather than an author one. */
.am-shop-filter__option[hidden] {
  display: none;
}

.am-shop-filter__option-group {
  align-items: center;
  display: flex;
  gap: 10px;
}

.am-shop-filter__option span {
  color: rgba(0, 0, 0, .75);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
}

.am-shop-filter__option input {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 4px;
  flex: 0 0 auto;
  height: 22px;
  margin: 0;
  position: relative;
  width: 22px;
}

.am-shop-filter__option input:checked {
  background: #cb242e;
  border: 2px solid #cb242e;
}

.am-shop-filter__option input:checked ~ span {
  color: #000;
}

.am-shop-filter__option input:checked:after {
  color: #fff;
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-size: 11px;
  font-weight: 900;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.am-shop-filter__option em {
  color: rgba(0, 0, 0, .75);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

/* This is a <button> now (an in-page show/hide toggle, no longer a link
   to the term's own archive page), so the usual button resets apply on
   top of the same look the old <a> had. */
.am-shop-filter__view-more {
  align-items: center;
  background: none;
  border: 0;
  color: #cb242e;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  justify-content: flex-end;
  margin-top: 16px;
  padding: 0;
  text-decoration: underline;
  width: 100%;
}

/* Price Range slider — identical component reused across all three shop
   frames in Figma (565:7128 "Shop by scale", 602:10375 "Shop by brand",
   547:1419 "Shop by maker" — same header/field/track/handle numbers in
   all three, double-checked directly). Two overlapping native range
   inputs make up the actual track, since a single <input type="range">
   can't have two handles. Each input's own track is made invisible and
   its hit area limited to its thumb (pointer-events:none on the input,
   pointer-events:auto on the thumb) so dragging one handle never grabs
   the other; the colored fill between them is a separate div positioned
   by JS from the two inputs' current values. */
.am-price-range {
  padding-top: 28px;
  width: 100%;
}

.am-price-range__fields {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.am-price-range__field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.am-price-range__field > span:first-child {
  color: rgba(0, 0, 0, .75);
  font-size: 12px;
  line-height: 23px;
  text-transform: uppercase;
}

.am-price-range__value {
  background: #f5f5f5;
  border-radius: 8px;
  color: #000;
  display: block;
  font-size: 16px;
  padding: 10px 12px;
  white-space: nowrap;
}

.am-price-range__sep {
  color: rgba(0, 0, 0, .75);
  font-size: 16px;
}

.am-price-range__track {
  background: rgba(203, 36, 46, .24);
  border-radius: 2px;
  height: 4px;
  margin: 0 10px;
  position: relative;
}

.am-price-range__active {
  background: #cb242e;
  border-radius: 2px;
  height: 4px;
  position: absolute;
  top: 0;
}

.am-price-range__input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
  left: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: -8px;
  width: 100%;
}

.am-price-range__input::-webkit-slider-runnable-track {
  background: transparent;
}

.am-price-range__input::-moz-range-track {
  background: transparent;
}

.am-price-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #fff;
  border: 2px solid #cb242e;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  pointer-events: auto;
  width: 20px;
}

.am-price-range__input::-moz-range-thumb {
  background: #fff;
  border: 2px solid #cb242e;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  pointer-events: auto;
  width: 20px;
}

.am-shop-results ul.products {
  display: grid;
  gap: 40px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.am-shop-results ul.products:before,
.am-shop-results ul.products:after {
  content: none;
  display: none;
}

/* A THIRD WooCommerce stylesheet (woocommerce-smallscreen.css, easy to
   miss — it's a separate file from both woocommerce.css and
   woocommerce-layout.css, all three ship pagination/grid rules) forces
   every product grid back to a 2-up float layout below ~768px:
   ".woocommerce ul.products[class*='columns-'] li.product { width:48%;
   float:left; clear:both; ... }" — an attribute selector matching ANY
   "columns-N" class WooCommerce puts on ul.products (it always adds
   one), so it applies no matter how many columns are actually
   configured. That's exactly what was rendering every mobile card at
   half width with dead space beside it: confirmed live (this exact rule
   was measured winning — computed li width was precisely 48% of the
   grid's own width). Its specificity (.woocommerce + [attr] + .product
   classes, ul+li elements) beats a plain ".am-shop-results ul.products
   li.product", so this chains one more real ancestor class
   (".am-shop-page") to outrank it regardless of stylesheet load order,
   instead of reaching for !important. */
.am-shop-page .am-shop-results ul.products li.product,
.am-shop-page .am-shop-results ul.products li.am-shop-product-card {
  clear: none;
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

/* height:100% alone only stretches this box to match its taller
   siblings in the grid row — it doesn't stop the leftover height from
   just piling up as dead space after the last line of content, because
   the children were plain block flow. Flex column + the margin-top:auto
   on .am-shop-card__purchase below is what actually pushes price/button
   down to the bottom edge, so the extra height shows up as breathing
   room above the purchase row instead of empty space below it. */
.am-shop-card__inner {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.am-shop-card__wishlist {
  align-items: center;
  background: #fff;
  border-radius: 10px;
  color: var(--am-black);
  display: inline-flex;
  font-size: 23px;
  height: 43px;
  justify-content: center;
  position: absolute;
  right: 18px;
  text-decoration: none;
  top: 18px;
  width: 43px;
  z-index: 3;
}

/* The plain fallback link (function_exists('yith_wcwl_add_to_wishlist')
   false — e.g. before this deploy's wishlist fix has actually gone
   live) renders as a bare <a><i class="fa-regular fa-heart"></i></a>,
   which inherits color from its parent — except Bootstrap's own
   "a { color: #337ab7 }" targets the <a> directly, and a rule that
   directly targets an element always wins over an inherited value
   regardless of specificity. Confirmed live: the icon rendered
   Bootstrap's blue instead of matching the header's plain black heart
   icon. Targeting the <a> directly here (beats Bootstrap's on
   specificity too) fixes it for both this fallback and, defensively,
   any other plain-link case. */
.am-shop-card__wishlist > a {
  color: var(--am-black);
}

/* Restyles YITH's own wishlist button markup (a div/anchor/svg/label
   combo, not a plain <i>) to keep looking like this card's plain
   round heart-icon button instead of YITH's default pill-with-label
   button — the actual add-to-wishlist behavior is unchanged, only the
   appearance. */
.am-shop-card__wishlist .yith-add-to-wishlist-button-block,
.am-shop-card__wishlist .yith-wcwl-add-to-wishlist-button {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.am-shop-card__wishlist .yith-wcwl-add-to-wishlist-button-icon {
  color: var(--am-black);
  height: 20px;
  width: 20px;
}

.am-shop-card__wishlist .yith-wcwl-add-to-wishlist-button__label {
  display: none;
}

.am-shop-card__image {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

/* WooCommerce's own default stylesheet sets ".woocommerce img { height:
   auto; max-width: 100% }" at the same specificity as a plain
   ".am-shop-card__image img" (one class + one element each) — a tie that
   the LATER-loaded stylesheet wins, which used to mean this rule needed
   !important to reliably beat it regardless of enqueue order. Chaining
   the real ancestor classes instead (same approach as the title/price
   rules below) outranks it outright, no !important needed. */
ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__image img {
  display: block;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

/* WooCommerce falls back to its own placeholder graphic (class
   "woocommerce-placeholder") when a product has no featured image —
   this test catalog has plenty of those. A border stops the placeholder
   from blending edge-to-edge into the card's white body. */
.am-shop-card__image img.woocommerce-placeholder {
  border: 1px solid #e8e8e8;
}

/* Subcategory tiles (content-product_cat.php — e.g.
   /product-category/brand/, which lists brand terms rather than
   products). Unlike a real product card, WooCommerce's own subcategory
   hooks render the image and title as direct children of ONE <a>
   (confirmed live: no wrapping .am-shop-card__image/__body divs exist
   here), so this gets its own simpler rules instead of reusing those
   two classes — everything else (grid placement, the white card look)
   still comes from the shared .am-shop-product-card rules above. */
.am-shop-category-card > a {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 10px;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease;
}

.am-shop-category-card > a:hover {
  border-color: var(--am-red);
}

/* object-fit: contain (not cover, unlike a real product photo above) —
   these are brand logos/placeholders, and cropping a logo to fill the
   box looks wrong in a way cropping a product photo doesn't. The gray
   background + padding letterboxes it instead of stretching or cutting
   it off.

   ".am-shop-page" chained on the front is not decorative — WooCommerce's
   own "ul.products li.product a img { height: auto }" (woocommerce.css)
   ties this rule's class+element count (3 classes, 4 elements each) once
   ".am-shop-page" is added, and shop.css loading after woocommerce.css
   is what wins that tie. Confirmed live without it: the image ignored
   height:200px entirely and rendered at ~312px (its own aspect ratio) —
   same class of specificity fight as .am-shop-card__image img above,
   just one class short of it here since there's no .am-shop-card__inner
   wrapper on this element to chain. */
.am-shop-page ul.products li.product.am-shop-category-card > a img {
  background: var(--am-gray-light);
  display: block;
  height: 200px;
  object-fit: contain;
  padding: 24px;
  width: 100%;
}

/* Scale Models archive (1:12, 1:18, 1:24 ...): these tiles are full photos
   (429x411), not logos, so they show whole at that ratio instead of in the
   small padded 200px logo box above. The WooCommerce placeholder (no image
   set yet) keeps the logo-box look. */
body:is(.term-scale-models, .term-scales, .term-scale) .am-shop-page ul.products li.product.am-shop-category-card > a img:not(.woocommerce-placeholder) {
  aspect-ratio: 429 / 411;
  background: #111;
  height: auto;
  object-fit: cover;
  padding: 0;
}

/* Manufacturers / Brands / other archives: a tile showing a "Category Image"
   (class added by automania_category_subcategory_thumbnail() in
   inc/shop-filters.php) is a photo, so it fills the tile edge to edge like the
   scale tiles instead of sitting small in the padded logo box. 430 / 300 is
   the same ratio the homepage Makers cards use. Tiles that use a normal
   WooCommerce thumbnail keep the logo-box look above. */
.am-shop-page ul.products li.product.am-shop-category-card > a img.am-category-photo {
  aspect-ratio: 430 / 300;
  background: #111;
  height: auto;
  object-fit: cover;
  padding: 0;
}

.am-shop-category-card .woocommerce-loop-category__title {
  border-top: 1px solid #efefef;
  color: #111110;
  font-family: var(--am-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin: 0;
  padding: 16px 20px 20px;
}

.am-shop-category-card .woocommerce-loop-category__title .count {
  color: rgba(0, 0, 0, .5);
  font-size: 14px;
  font-weight: 400;
}

.am-shop-card__status {
  background: #363839;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  left: 14px;
  padding: 5px 10px;
  position: absolute;
  top: 14px;
  z-index: 2;
}

.am-shop-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 22px 22px;
}

.am-shop-card__meta {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 0 0 8px;
}

.am-shop-card__meta span {
  color: rgba(0, 0, 0, .75);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
}

.am-shop-card__meta em {
  background: #f3f3f0;
  border-radius: 7px;
  color: rgba(0, 0, 0, .75);
  flex: 0 0 auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  padding: 6px 9px;
  text-transform: uppercase;
}

/* WooCommerce's own default stylesheet targets this exact title via its
   own class (".woocommerce ul.products li.product .woocommerce-loop-
   product__title { font-size: 1em }") at specificity (0,4,2) — 4 classes
   (woocommerce, products, product, woocommerce-loop-product__title) + 2
   elements (ul, li). Rather than fight that with !important, this chains
   the real ancestor classes that are already on every card everywhere
   this component is used (Shop archive, Related Products, homepage New
   Arrivals all render it inside <ul class="products">...<li class="product
   am-shop-product-card">...<div class="am-shop-card__inner">) up to
   (0,5,3), which just wins outright. */
ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__body h2 {
  font-family: var(--am-font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin: 0 0 12px;
}

/* Shop archive / category / tax-product_cat cards only (anything inside
   .am-shop-results) — title reduced to 20px/28px at every width. The
   base rule above is shared with homepage rails and related products,
   which weren't asked to change, so this chains .am-shop-results in
   front of it (one more class, outranks it) instead of editing it. */
.am-shop-results ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__body h2 {
  font-size: 20px;
  line-height: 28px;
}

/* Single product page "Related products / More For Your Collection" cards
   only (section.related.products) — same 20px/28px title as the shop cards
   above, at every width. Scoped to that section so the homepage rails that
   share the base rule keep 24px/32px. */
section.related.products ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__body h2 {
  font-size: 20px;
  line-height: 28px;
}

/* Long titles wrap to a 2nd line and stop there with an ellipsis
   instead of pushing the rest of the card's content down further. */
.am-shop-card__body h2 a {
  color: #000;
  display: -webkit-box;
  overflow: hidden;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.am-shop-card__divider {
  background: #ececec;
  height: 1px;
  margin: 15px 0;
}

.am-shop-card__stock {
  align-items: center;
  color: #007a55;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  justify-content: space-between;
  line-height: 23px;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.am-shop-card__stock-label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.am-shop-card__stock-dot {
  background: #00bc7d;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.am-shop-card__stock.is-out-of-stock {
  color: #cb242e;
}

.am-shop-card__stock.is-out-of-stock .am-shop-card__stock-dot {
  background: #cb242e;
}

/* The "was" price on a sale item sits on the stock row, not next to the
   current price, per Figma (node 602:10403) — split out in
   content-product.php instead of relying on WooCommerce's combined
   get_price_html() del+ins markup for this one case. */
.am-shop-card__was-price {
  color: #cb242e;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-transform: none;
}

.am-shop-card__purchase {
  align-items: end;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: auto;
}

/* Same WooCommerce-default conflict as the card title above
   (".woocommerce ul.products li.product .price { font-size: 0.857em }"),
   beaten the same way with real ancestor classes instead of !important. */
ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .price {
  color: #111110;
  display: block;
  font-family: var(--am-font-body);
  font-size: 28px;
  font-weight: 600;
  line-height: 43px;
  margin: 0 0 3px;
}

/* Shop archive / category / tax-product_cat cards only — price reduced to
   20px/28px at every width, same scoping as the title above. This is
   also why the 1200-1499px clamp() and the 575px override further down
   no longer set a price size: both targeted ".am-shop-card__purchase
   .price" with far fewer classes than the base rule, so they lost to it
   and never applied (confirmed live: the price was a flat 28px/43px at
   1300px, not the intended 24-28px clamp), and a single fixed size makes
   them redundant anyway. */
.am-shop-results ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .price {
  font-size: 20px;
  line-height: 28px;
}

.am-shop-card__purchase .price del {
  color: #cb242e;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.am-shop-card__purchase .price ins {
  text-decoration: none;
}

/* WooCommerce prints the store's "Inclusive of Tax" price-suffix setting
   inside .price automatically — hidden on this card per request. */
.am-shop-card__purchase .price .woocommerce-price-suffix {
  display: none;
}

/* Figma's card (node 602:10403) uses this same 14px/18px size for "View
   Details" regardless of which grid the card sits in — unlike the Add To
   Cart button below, it doesn't get a wider homepage-rail-specific size. */
.am-shop-card__details {
  align-items: center;
  color: #000;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  gap: 4px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}

/* WooCommerce's own default stylesheet styles every .button/input.button
   (this button carries both "add_to_cart_button" and "button") with
   "padding: 0.618em 1em; font-size: 100%" — beaten with real ancestor
   classes instead of !important, same approach as the title/price above. */
ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .add_to_cart_button,
ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .button {
  align-items: center;
  background: #cb242e;
  border: 0;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  line-height: 20px;
  min-height: 48px;
  padding: 0 20px;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Homepage New Arrivals rail only — its cards are always wide enough
   (385px+, confirmed live at every width down to mobile) to match
   .am-button's actual sitewide size (18px/52px/22px padding) instead
   of the smaller size above. Separate rule, not a shared one shrunk
   down for the narrower grids elsewhere. "View Details" doesn't get a
   rail-specific size — Figma uses the same 14px there too. */
.am-product-rail ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .add_to_cart_button,
.am-product-rail ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .button {
  border-radius: 10px;
  font-size: 18px;
  gap: 12px;
  line-height: 28px;
  min-height: 52px;
  padding: 0 22px;
}

.am-shop-card__purchase .add_to_cart_button:before,
.am-shop-card__purchase .button:before {
  content: "+";
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.am-shop-card__purchase .added_to_cart {
  color: #cb242e;
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-top: 8px;
  text-decoration: none;
}

/* Figma's pagination (node 565:7426): 44x44 number pills (16px/regular,
   black/40% inactive), a 20px/semibold black-filled current pill, and
   separate 48px prev/next arrow-icon buttons either side of the row —
   WooCommerce's own woocommerce_pagination() already renders the prev/
   next links as .page-numbers.prev/.next (default WP paginate_links
   'type'=>'list' output), just with plain "«"/"»" text — swapped here
   for Font Awesome chevrons to match the icon buttons in the design.

   WooCommerce's OWN woocommerce.css (a separate file from
   woocommerce-layout.css, easy to miss) ships real styling for this
   exact markup — a bordered pill around the whole list, floated/bordered
   <li>s, and a lavender current-page highlight — using selectors like
   ".woocommerce nav.woocommerce-pagination ul li a, ...li span" that
   chain real elements (nav/ul/li/a) on top of its classes. Plain class
   selectors here (".woocommerce-pagination .page-numbers") lose that
   fight since they carry no element weight at all — confirmed live
   (the lavender "current" bg and the boxed pill border were exactly
   WC's rule winning, not mine). ".am-shop-results" is a real ancestor
   (the pagination renders inside it via woocommerce_after_shop_loop),
   added purely to outrank WC's selectors regardless of stylesheet load
   order, the same fix already used for the title/price/image rules
   above instead of reaching for !important. */
.am-shop-results nav.woocommerce-pagination {
  margin: 50px 0 0;
  text-align: center;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers {
  align-items: center;
  border: 0;
  display: flex;
  gap: 16px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* With end_size/mid_size=3 (pagination.php), a catalog with 100+ pages
   shows up to 8 numbers + an ellipsis + prev/next at once — at 44px
   pills with 16px gaps that's ~550px wide, well past a 375px phone.
   Rather than trim which page numbers WordPress renders, let the row
   scroll horizontally on its own so it never breaks the page layout;
   flex-shrink:0 on each pill keeps them from getting squeezed instead. */
@media (max-width: 767px) {
  .am-shop-results nav.woocommerce-pagination ul.page-numbers {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: none;
  }

  .am-shop-results nav.woocommerce-pagination ul.page-numbers::-webkit-scrollbar {
    display: none;
  }

  .am-shop-results nav.woocommerce-pagination ul.page-numbers li {
    flex-shrink: 0;
  }

  /* On a catalog with 100+ pages (confirmed live: 113), "next" is the
     very last of 9 scrollable items — a shopper on page 1 has to scroll
     all the way past "1 2 3 4 … 111 112 113" just to reach it. Sticking
     prev/next to the scroll container's own edges keeps them reachable
     without scrolling, while the page numbers between them still scroll
     normally. A solid background is needed since sticky positioning
     doesn't clip the numbers scrolling underneath on its own. */
  .am-shop-results nav.woocommerce-pagination ul.page-numbers li:has(> a.page-numbers.prev) {
    background: #fff;
    left: 0;
    position: sticky;
    z-index: 1;
  }

  .am-shop-results nav.woocommerce-pagination ul.page-numbers li:has(> a.page-numbers.next) {
    background: #fff;
    position: sticky;
    right: 0;
    z-index: 1;
  }
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li {
  border: 0;
  display: block;
  float: none;
  margin: 0;
  overflow: visible;
  padding: 0;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
.am-shop-results nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
  align-items: center;
  border-radius: 8px;
  color: rgba(0, 0, 0, .4);
  display: inline-flex;
  font-size: 16px;
  font-weight: 400;
  height: 44px;
  justify-content: center;
  line-height: normal;
  margin: 0;
  min-width: 44px;
  padding: 0;
  text-decoration: none;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus,
.am-shop-results nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
  background: #000;
  color: #fff;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
  font-size: 20px;
  font-weight: 600;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
  color: rgba(0, 0, 0, .4);
  font-size: 20px;
  font-weight: 600;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev,
.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next {
  color: #000;
  font-size: 0;
  height: 48px;
  min-width: 48px;
  width: 48px;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover,
.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover {
  background: transparent;
  color: #000;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev::before,
.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next::before {
  font-family: "Font Awesome 6 Free";
  font-size: 16px;
  font-weight: 900;
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev::before {
  content: "\f104";
}

.am-shop-results nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next::before {
  content: "\f105";
}

.am-shop-social {
  padding: 0 0 82px;
}

.am-shop-social__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 24px;
}

.am-shop-social__head p,
.am-shop-social__head a {
  align-items: center;
  color: #cb242e;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  line-height: 18px;
  margin: 0;
  text-decoration: none;
}

.am-shop-social__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.am-shop-social__grid a,
.am-shop-social__grid img {
  display: block;
  width: 100%;
}

.am-shop-social__grid img {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  object-fit: cover;
}

/* 1200-1499px keeps 3 columns (per explicit request — 1280px should
   stay 3-up). Card content width only grows from ~188px to ~288px
   across that range (roughly +0.335px per 1px of viewport — 3 columns
   splitting the growth three ways), while the price block + a
   full-size button need a constant ~264px — so a single flat shrunk
   size for the whole range (the previous version of this fix) meant
   the button stayed exactly as small at 1230/1300/1400 as it is at
   the tightest point, 1200, even though there's genuinely more room
   the wider you get. Scaling these fluidly instead (pure-viewport-width
   clamps, same technique as the hero heading) means the button actually
   grows back toward full/large-screen size as the viewport widens,
   reaching it once there's enough real room — verified live at 1200px
   (still needs the full shrink, 0 overflow), 1300px and 1400px
   (partially grown, 0 overflow), and 1499px (fully back to normal
   16px/20px-padding size, 0 overflow, confirming natural size already
   fits there). At 1199px and below, the grid drops to 2 columns
   instead (next breakpoint down), which alone gives full-size room
   with no shrinking needed. */
@media (min-width: 1200px) and (max-width: 1499px) {
  .am-shop-results .am-shop-card__purchase {
    gap: clamp(4px, calc(3.344vw - 36.13px), 14px);
  }

  .am-shop-results .am-shop-card__details {
    font-size: clamp(12px, calc(0.669vw + 3.97px), 14px);
    gap: clamp(3px, calc(0.335vw - 1.02px), 4px);
  }

  .am-shop-results ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .add_to_cart_button,
  .am-shop-results ul.products li.product.am-shop-product-card .am-shop-card__inner .am-shop-card__purchase .button {
    font-size: clamp(12px, calc(1.338vw - 4.05px), 16px);
    gap: clamp(4px, calc(1.338vw - 12.05px), 8px);
    min-height: clamp(40px, calc(2.676vw + 7.89px), 48px);
    padding: 0 clamp(6px, calc(4.682vw - 50.18px), 20px);
  }

  .am-shop-results .am-shop-card__purchase .add_to_cart_button:before,
  .am-shop-results .am-shop-card__purchase .button:before {
    font-size: clamp(13px, calc(1.672vw - 7.07px), 18px);
  }
}

@media (max-width: 1199px) {
  .am-shop-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .am-shop-layout {
    gap: 34px;
    grid-template-columns: 200px minmax(0, 1fr);
  }

  /* Cards get plenty of room at 2 columns here, so the Add To Cart
     button/price/View Details go back to their normal full size — no
     override needed, they just aren't touched by the 1200-1499px
     shrink above. */
  .am-shop-results ul.products {
    gap: 34px 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .am-shop-layout {
    grid-template-columns: 1fr;
  }

  /* Stacked mobile/tablet layout shows products first, filters below —
     the sidebar comes first in the markup (it needs to for the products
     query/results to make sense as "filtered by" it), so this is a
     visual-only reorder via CSS grid's own "order" property rather than
     a DOM change. */
  .am-shop-results {
    order: 1;
  }

  .am-shop-sidebar {
    background: #fff;
    border-bottom: 0;
    border-top: 1px solid #ededed;
    order: 2;
    padding-bottom: 22px;
    padding-top: 32px;
  }

  /* The sidebar goes full-width once stacked (~700-900px here), and a
     2-up checkbox grid leaves each item way more room than a short
     "1:12   49" row actually needs — 3-up uses that space instead of
     wasting it. */
  .am-shop-filter__options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* grid-template-columns for ul.products stays 2 here — already set by
     the @media (max-width: 1199px) rule above, no need to repeat it. */
  .am-shop-social__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .am-shop-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* The 104px top padding was sized for the desktop banner; at mobile
     it just reads as dead space above "EXPLORE THE COLLECTION" before
     any real content shows. */
  .am-shop-hero {
    padding-top: 50px;
  }

  /* Stays 2-up down to 400px (see the narrower breakpoint below) —
     there's still enough width for a short "1:12   49" row at typical
     mobile sizes; only the smallest phones need to drop to 1 column. */
  .am-shop-filter__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .am-shop-results ul.products {
    grid-template-columns: 1fr;
  }

  .am-shop-card__body h2 a {
    min-height: 0;
  }

  .am-shop-results nav.woocommerce-pagination {
    margin-top: 52px;
  }

  .am-shop-social {
    padding-bottom: 56px;
  }

  .am-shop-social__grid {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 575px) {
  .am-shop-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .am-shop-card__body {
    padding: 16px;
  }
}

/* The smallest phones (375px and down) don't have room for a 2-up
   Scale/Brand/Sort By checkbox grid without cramming labels like
   "Alfa Romeo" or "Out of Stock" — back to 1 column here. */
@media (max-width: 400px) {
  .am-shop-filter__options {
    grid-template-columns: 1fr;
  }
}