/*
 * Shop archive components.
 *
 * Deliberately separate from product.css: every list item on this page carries
 * the `product` class, and product.css:2 sets `.product p { margin-bottom: 1em }`,
 * which would apply here and outrank the utilities on those paragraphs.
 *
 * Mobile-first throughout. 72% of g80.com visitors and 67% of the people who
 * reach this page are on a phone, so the single-column layout is the base case
 * and the wide layouts are the exceptions.
 *
 * Aspect ratio is handled here rather than by changing
 * woocommerce_thumbnail_cropping, which is uncropped site-wide and would
 * require regenerating production media to change.
 */

/* Tokens are the product page's, not new ones. css/product.css already
   establishes this brand's card language (8px radius, #eee hairline, #fafafa
   fill, a 0.3s shadow on hover, red uppercase eyebrows, and a 2px red rule
   under section headings). The shop page had quietly invented a parallel set
   at 6px/#e5e5e5/no-hover, which is most of why it read as generic. */
.g80-shop {
  --g80-red: #9f0712;
  --g80-ink: #1a1a1a;
  --g80-body: #555;
  --g80-muted: #666;
  --g80-line: #ccc;
  --g80-line-soft: #eee;
  --g80-card: #fafafa;
  --g80-radius: 8px;
  --g80-lift: 0 4px 20px rgba(0, 0, 0, 0.08);
  --g80-ease: 0.3s ease;
  --g80-panel: linear-gradient(to bottom, #d4d4d4, #f5f5f5);
}

/* Prices and the 01/02/03 indices are figures meant to be compared down a
   column, so they get tabular figures and stop jittering between cards. */
.g80-shop-hero__price,
.g80-shop-component__price,
.g80-shop-compare__price,
.g80-shop-spare__price,
.g80-shop-panel__number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- Page header ------------------------------------------------------- */

.g80-shop__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--g80-line);
}

.g80-shop__title {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--g80-ink);
  margin: 0;
  text-transform: capitalize;
}

.g80-shop__intro {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
  margin: 0;
  max-width: 60ch;
}

@media (min-width: 768px) {
  .g80-shop__header {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .g80-shop__title {
    font-size: 2.75rem;
    flex: 1;
  }

  .g80-shop__intro {
    max-width: 420px;
    padding-top: 0;
  }
}

/* --- Shared bits ------------------------------------------------------- */

.g80-shop-button {
  display: inline-block;
  background: var(--g80-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 13px 26px;
  border-radius: var(--g80-radius);
  text-decoration: none;
  border: 0;
  transition:
    background-color var(--g80-ease),
    transform 0.15s ease;
}

.g80-shop-button:hover,
.g80-shop-button:focus {
  color: #fff;
  background: #7d050e;
}

.g80-shop-button:active {
  transform: translateY(1px);
}

.g80-shop-band {
  margin-top: 40px;
}

.g80-shop-band__head {
  margin-bottom: 22px;
}

/* The 2px red rule is the product page's h3 treatment. inline-block keeps it
   the width of the words, which is what makes it read as a mark rather than a
   divider. */
.g80-shop-band__title {
  display: inline-block;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g80-ink);
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--g80-red);
}

.g80-shop-band__sub {
  font-size: 0.875rem;
  color: var(--g80-muted);
  margin: 10px 0 0;
}

@media (min-width: 768px) {
  .g80-shop-band {
    margin-top: 72px;
  }

  .g80-shop-band__title {
    font-size: 1.625rem;
  }
}

/* --- The gradient panel ------------------------------------------------ */

.g80-shop-panel {
  border: 1px solid var(--g80-line);
  border-radius: var(--g80-radius);
  background: var(--g80-panel);
  overflow: hidden;
}

/* 4:3, not square. These products are landscape, and a square stage
   manufactures empty grey: measured, a 1:1 panel left 217 of its 443px to
   background. The cutouts are trimmed to their alpha bounding box, so 90%
   of a correctly-proportioned frame is generous rather than tight. */
.g80-shop-panel__art {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
}

/* No blend mode. These are transparent cutouts, so the panel shows through on
   its own. `multiply` was here to hide the catalog photos' baked-in backdrops,
   and it made things worse: it multiplied each photo's own backdrop onto the
   panel by a different amount, so the black-cornered hardware set darkened its
   tile to near-black while the near-white patch left its tile untouched. */
.g80-shop-panel__art img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Solid, not a 35%-white wash over the gradient. The wash left the bar and
   the art bleeding into each other, which is what made the tile look soft. */
.g80-shop-panel__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--g80-line);
  background: #fff;
}

.g80-shop-panel__number {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--g80-red);
}

.g80-shop-panel__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--g80-ink);
}

/* --- Hero: the Build Kit ----------------------------------------------- */

.g80-shop-hero {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--g80-line);
  border-radius: var(--g80-radius);
  background: var(--g80-panel);
  overflow: hidden;
}

/* Contained, not cropped. The cutout is trimmed tight to the product, so
   cover ate the jig at both ends; there is no spare margin to crop into. */
.g80-shop-hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.g80-shop-hero__art a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.g80-shop-hero__art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}

.g80-shop-hero__body {
  padding: 24px 20px;
  background: #fff;
}

.g80-shop-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g80-red);
  margin: 0 0 10px;
}

.g80-shop-hero__title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.1;
}

.g80-shop-hero__title a,
.g80-shop-component__title,
.g80-shop-compare__title,
.g80-shop-spare__title {
  color: var(--g80-ink);
  text-decoration: none;
}

.g80-shop-hero__title a:hover,
.g80-shop-component__title:hover,
.g80-shop-compare__title:hover,
.g80-shop-spare__title:hover,
.g80-shop-component:hover .g80-shop-component__title,
.g80-shop-compare__item:hover .g80-shop-compare__title,
.g80-shop-spare:hover .g80-shop-spare__title {
  color: var(--g80-red);
}

.g80-shop-hero__price {
  color: var(--g80-red);
  font-weight: 700;
  font-size: 1.375rem;
  margin-bottom: 12px;
}

.g80-shop-hero__copy {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--g80-body);
  margin: 0 0 18px;
}

/* The flag-and-bold-text lockup the product page uses under every price
   (custom_text_under_price). A grey outlined pill was the weakest mark on the
   page and this is an asset the brand already owns. */
.g80-shop-hero__origin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--g80-ink);
  line-height: 1;
}

.g80-shop-hero__origin img {
  height: 18px;
  width: auto;
  aspect-ratio: 1.9 / 1;
  object-fit: cover;
}

@media (min-width: 900px) {
  .g80-shop-hero {
    flex-direction: row;
  }

  .g80-shop-hero__art {
    flex: 6;
    padding: 32px 40px;
  }

  .g80-shop-hero__art img {
    max-height: 300px;
  }

  .g80-shop-hero__body {
    flex: 4;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .g80-shop-hero__title {
    font-size: 2rem;
  }

  .g80-shop-hero__chips,
  .g80-shop-button {
    align-self: flex-start;
  }
}

/* --- Components -------------------------------------------------------- */

.g80-shop-components,
.g80-shop-compare,
.g80-shop-spares {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* On a phone the components read as rows: a small piece of art next to the
   name and price, so all three fit in one screen instead of three. The
   gradient panel returns at tablet width where it has room to be looked at. */
.g80-shop-components {
  display: grid;
  gap: 10px;
}

.g80-shop-component {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid var(--g80-line-soft);
  border-radius: var(--g80-radius);
  padding: 10px;
  transition:
    box-shadow var(--g80-ease),
    transform var(--g80-ease);
}

.g80-shop-component:hover {
  box-shadow: var(--g80-lift);
}

/* The art is the thing worth looking at, so it is what responds. Scoped to
   the panel so the caption bar underneath stays put. */
.g80-shop-component .g80-shop-panel__art img {
  transition: transform var(--g80-ease);
}

.g80-shop-component:hover .g80-shop-panel__art img {
  transform: scale(1.04);
}

.g80-shop-component__link {
  display: block;
}

.g80-shop-component .g80-shop-panel__art {
  padding: 8%;
}

.g80-shop-component .g80-shop-panel__caption {
  display: none;
}

.g80-shop-component__meta {
  min-width: 0;
}

.g80-shop-component__title {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color var(--g80-ease);
}

.g80-shop-component__price {
  color: var(--g80-red);
  font-weight: 700;
  font-size: 1rem;
  margin: 4px 0 0;
}

@media (min-width: 700px) {
  .g80-shop-components {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .g80-shop-component {
    display: block;
    border: 0;
    padding: 0;
  }

  .g80-shop-component:hover {
    box-shadow: none;
    transform: translateY(-2px);
  }

  .g80-shop-component:hover .g80-shop-panel {
    box-shadow: var(--g80-lift);
  }

  .g80-shop-component .g80-shop-panel__art {
    padding: 12%;
  }

  .g80-shop-component .g80-shop-panel__caption {
    display: flex;
  }

  .g80-shop-component__meta {
    margin-top: 14px;
  }
}

/* --- Comparison bands -------------------------------------------------- */

.g80-shop-compare {
  display: grid;
  gap: 12px;
}

.g80-shop-compare__item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background: var(--g80-card);
  border: 1px solid var(--g80-line-soft);
  border-radius: var(--g80-radius);
  padding: 20px;
  transition: box-shadow var(--g80-ease);
}

.g80-shop-compare__item:hover {
  box-shadow: var(--g80-lift);
}

/* The heading asks a question; this answers it before the prose does. Same
   uppercase red eyebrow the product page uses above each kit component. */
.g80-shop-compare__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g80-red);
  margin: 0 0 6px;
}

/* White tile, product sitting on it. The images are transparent cutouts, so
   contain over white shows the product and nothing else. */
.g80-shop-compare__thumb,
.g80-shop-spare__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--g80-line-soft);
  border-radius: 4px;
  padding: 8px;
}

.g80-shop-compare__thumb img,
.g80-shop-spare__thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.g80-shop-compare__body {
  min-width: 0;
}

.g80-shop-compare__title {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color var(--g80-ease);
}

.g80-shop-compare__price {
  color: var(--g80-ink);
  font-weight: 700;
  font-size: 1rem;
  margin: 4px 0 10px;
}

.g80-shop-compare__note {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--g80-body);
  margin: 0;
}

@media (min-width: 800px) {
  .g80-shop-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* --- Spares ------------------------------------------------------------ */

.g80-shop-spares {
  display: grid;
  gap: 12px;
}

/* Top the thumbnail rather than centring it. Centred, it tracks a body whose
   height depends on how many lines the title wraps to, so two cards side by
   side with titles of different lengths sit their art on different baselines. */
.g80-shop-spare {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  background: var(--g80-card);
  border: 1px solid var(--g80-line-soft);
  border-radius: var(--g80-radius);
  padding: 16px;
  transition: box-shadow var(--g80-ease);
}

.g80-shop-spare:hover {
  box-shadow: var(--g80-lift);
}

.g80-shop-spare__body {
  min-width: 0;
}

.g80-shop-spare__title {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color var(--g80-ease);
}

.g80-shop-spare__price {
  color: var(--g80-red);
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 3px 0 0;
}

@media (min-width: 700px) {
  .g80-shop-spares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* --- Magazines --------------------------------------------------------- */

/* The same card as a spare, laid out five across so the whole line is read as
   one comparison of capacities. The spares card puts its thumbnail beside the
   body, which at a fifth of the row leaves under 60px of body at the 1024px
   container, so this variant stacks the card instead. Everything else, the
   fill, hairline, radius, hover lift and type scale, is the spares card
   untouched.

   These rules follow the spares grid above rather than preceding it: the
   variant class carries the same specificity as the class it narrows, so
   source order is what decides the column count. */
.g80-shop-spares--five .g80-shop-spare {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

/* Fixed portrait frame rather than an aspect ratio. Stacked, the thumbnail
   would otherwise be as wide as the card, and any ratio ties its height to the
   column width, which made these cards three times the height of a spare with
   a magazine adrift in the middle of each. A frame the shape of the product
   fills, centred over the copy, keeps the band the weight of the two beneath
   it. */
.g80-shop-spares--five .g80-shop-spare__thumb {
  aspect-ratio: auto;
  width: 96px;
  height: 104px;
  margin: 0 auto;
}

.g80-shop-spares--five {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
  .g80-shop-spares--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .g80-shop-spares--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --- WPLoyalty ---------------------------------------------------------- */

/* WPLoyalty prints "Purchase & earn 5 points!" after every loop add-to-cart
   button, styled entirely inline, which is why the reset needs !important.
   On a shop page it lands under the two cheapest items in the catalog and
   offers 5 points against the $224.99 kit the page is built to sell, so it
   reads as a discount on the wrong thing. The plugin is production-only, so
   this rule has no local effect. */
.g80-shop .wlr-product-message {
  display: none !important;
}

/* --- Trust strip ------------------------------------------------------- */

/* No rule above it. The section already ends on the last band's card edge, and
   a full-width hairline plus four red ticks was two dividers doing one job. */
.g80-shop-trust {
  display: grid;
  gap: 28px;
  margin-top: 64px;
}

.g80-shop-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.g80-shop-trust__text {
  min-width: 0;
}

/* The product page's icon lockup at strip scale: a red glyph in a red-tinted
   disc. Masked rather than a background image, because the vendored Remix
   files carry their own fill and CSS cannot recolour a background. */
.g80-shop-trust__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #fef2f2;
  position: relative;
  margin-top: 1px;
}

.g80-shop-trust__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background-color: var(--g80-red);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.g80-shop-trust__icon--made::before {
  -webkit-mask-image: url("../images/icons/trust-made.svg");
  mask-image: url("../images/icons/trust-made.svg");
}

.g80-shop-trust__icon--legal::before {
  -webkit-mask-image: url("../images/icons/trust-legal.svg");
  mask-image: url("../images/icons/trust-legal.svg");
}

.g80-shop-trust__icon--platform::before {
  -webkit-mask-image: url("../images/icons/why-kit-compatibility.svg");
  mask-image: url("../images/icons/why-kit-compatibility.svg");
}

.g80-shop-trust__icon--shipping::before {
  -webkit-mask-image: url("../images/icons/why-kit-shipment.svg");
  mask-image: url("../images/icons/why-kit-shipment.svg");
}

.g80-shop-trust__text strong {
  display: block;
  color: var(--g80-ink);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.g80-shop-trust__text p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--g80-muted);
  margin: 4px 0 0;
}

.g80-shop-trust__details {
  margin-top: 8px;
}

.g80-shop-trust__details summary {
  font-size: 0.8125rem;
  color: var(--g80-red);
  cursor: pointer;
  font-weight: 600;
}

.g80-shop-trust__details ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--g80-card);
  border-left: 2px solid var(--g80-red);
  border-radius: 0 6px 6px 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--g80-body);
}

.g80-shop-trust__details li span {
  color: #888;
  font-size: 0.6875rem;
}

@media (min-width: 700px) {
  .g80-shop-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }
}

@media (min-width: 1000px) {
  .g80-shop-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 80px;
    gap: 32px;
  }
}

/* --- Motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .g80-shop *,
  .g80-shop *::before,
  .g80-shop *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .g80-shop-component:hover,
  .g80-shop-component:hover .g80-shop-panel__art img,
  .g80-shop-button:active {
    transform: none;
  }
}