/* ===========================================================
   PINEAPPLE — PRODUCT GRID, PRODUCT CARD, CATEGORY CARD

   One implementation. The WooCommerce shop loop, a curated
   homepage sections and the standalone review page all render
   .pa-grid and .pa-product-card, so they cannot drift apart.

   Designed at 320–430px first. Product grids remain two columns on
   mobile; the six-category directory is intentionally three compact
   columns so the full directory stays visible without a long stack.

   Deliberately absent: card shadows, gradients, rounded pills,
   hover-only behaviour, and any decorative chrome. The garment
   and the number do the work. A ৳৫০০ item and a ৳১৪৫০ item get
   identical treatment — there is no visual tiering anywhere in
   this file.
   =========================================================== */

/* --- section ------------------------------------------------ */

/* --- Why Pineapple ------------------------------------------ */

.pa-why {
	margin-block-start: var(--pa-space-12);
}

.pa-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--pa-tap-min) * 4), 1fr));
	gap: var(--pa-space-4);
	margin-block-start: var(--pa-space-4);
}

.pa-why__item {
	padding: var(--pa-space-4);
	border: var(--pa-border);
	border-radius: var(--pa-radius);
	background: var(--pa-card-bg);
}

.pa-why__item h3 {
	font-size: var(--pa-text-lg);
	font-weight: var(--pa-weight-semibold);
}

.pa-why__item p {
	margin-block-start: var(--pa-space-2);
	color: var(--pa-text);
	font-size: var(--pa-text-base);
}

.pa-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pa-space-4);
  margin-block-end: var(--pa-space-6);
}

/* Section titles ("ক্যাটাগরি", "বেস্ট সেলার", "নতুন এসেছে") were 28px/600 —
   legible, but not the first thing the eye landed on against a page of
   4:5 product photography. Bumped a full step and to bold, with a short
   orange rule underneath as a section marker: orange is permitted as a
   rule (brand context §5), never as text on this light ground, so the
   heading label itself stays charcoal and only the mark under it takes
   the brand colour. The same treatment on Categories, Best Sellers and
   New Arrivals is what makes each read as "a section" at a glance,
   before the customer has even read the word. */
.pa-section__title {
  display: inline-block;
  padding-block-end: var(--pa-space-2);
  border-block-end: var(--pa-space-1) solid var(--pa-orange);
  font-family: var(--pa-font-heading);
  font-size: var(--pa-text-2xl);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
}

/* Bengali headings need the Bengali body face — Jost has no Bengali at all. */
.pa-section__title:lang(bn) {
  font-family: var(--pa-font-body);
  line-height: var(--pa-leading-body);
}

/* The Shop page places “All products” directly after the category directory,
   outside the normal .pa-section wrapper. Give that standalone heading the
   same section rhythm as Home: one larger step above the new section and one
   heading-to-grid step below it. */
.pa-shop-split {
  margin-block: var(--pa-space-12) var(--pa-space-6);
}

/* The category directory's own H1 ("কেনাকাটা করুন") had no rule of its
   own at all and fell back to the browser default — the weakest heading
   on the page that is supposed to be the strongest. Same treatment as
   the section titles below it, one step larger since it is the page's H1. */
.pa-hero__title {
  display: inline-block;
  margin-block: var(--pa-space-6) var(--pa-space-4);
  padding-block-end: var(--pa-space-2);
  border-block-end: var(--pa-space-1) solid var(--pa-orange);
  font-family: var(--pa-font-heading);
  font-size: var(--pa-text-2xl);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
}

.pa-hero__title:lang(bn) {
  font-family: var(--pa-font-body);
  line-height: var(--pa-leading-body);
}

/* Clearer separation between the directory, Best Sellers and New
   Arrivals so each reads as its own section rather than one long
   scroll. */
.pa-section + .pa-section {
  margin-block-start: var(--pa-space-12);
}

/* Charcoal, not orange: this sits on a light ground. */
/* min-WIDTH as well as min-height. It had only the height, so "See all"
   measured 46x48 in English while "সব দেখুন" cleared 48 in Bengali — the
   same control failing the tap floor in one language and passing in the
   other. A target's size cannot depend on how long the word happens to
   be in the language being read. */
.pa-section__more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pa-tap-min);
  min-height: var(--pa-tap-min);
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text);
  text-decoration: underline;
}

.pa-empty {
  padding-block: var(--pa-space-8);
  font-size: var(--pa-text-base);
  color: var(--pa-text-muted);
}

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

/* Home and WooCommerce archives share geometry; surface colours remain owned
   by their existing rules. Specificity beats WooCommerce's generic .button. */
.pa-product-card__action a,
.pa-product-card__action button,
.woocommerce .pa-product-card__action a,
.woocommerce .pa-product-card__action button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pa-tap-min);
  padding: var(--pa-space-2) var(--pa-space-3);
  border-width: var(--pa-space-1);
  border-style: solid;
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
  text-align: center;
}

.woocommerce-pagination[hidden] { display: none; }
.pa-catalogue-progress {
  padding-block: var(--pa-space-4);
  text-align: center;
}
.pa-catalogue-progress p { min-height: var(--pa-tap-min); }
.pa-catalogue-progress button {
  min-width: var(--pa-tap-min);
  min-height: var(--pa-tap-min);
  padding: var(--pa-space-2) var(--pa-space-3);
  font: inherit;
  color: var(--pa-text);
  background: transparent;
  border: var(--pa-border);
  cursor: pointer;
}
.pa-catalogue-progress button[hidden] { display: none; }

.pa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* locked: two columns on mobile */
  gap: var(--pa-space-6) var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .pa-grid--grid  { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .pa-grid--grid  { grid-template-columns: repeat(4, 1fr); gap: var(--pa-space-8) var(--pa-space-4); }
}

/* --- product card ------------------------------------------- */

/* A restrained token border and paper surface give each product a clear
   reading boundary without a shadow or bevel. The image still leads; the
   containment is intentionally quiet and identical across price tiers. */
.pa-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  margin: 0;
  height: 100%;
  padding: var(--pa-space-2);
  border: var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-card-bg);
}

/* WooCommerce ships a float grid on li.product:
   `.woocommerce ul.products li.product { width: 48%; float: left }`,
   at (0,2,2). The card rule above reads (0,1,0), so it lost — the
   declarations were there, and had no effect. Inside the two-column
   grid the result was a card 48% of its own 173px track: 83px wide,
   on the catalogue, on a phone.

   Specificity is matched here rather than raised with !important, and
   the selector still says nothing more than "this card, in this grid". */
.woocommerce ul.products li.product.pa-product-card,
.woocommerce-page ul.products li.product.pa-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  margin: 0;
  height: 100%;
  width: auto;
  float: none;
  clear: none;
  padding: var(--pa-space-2);
  border: var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-card-bg);
}

.pa-product-card__action,
.woocommerce ul.products li.product .pa-product-card__action {
  margin-top: auto;
  width: 100%;
}

.pa-product-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* The 4:5 box itself is defined once, in base.css — it is the CLS guard
   and belongs in the critical bundle. All this adds is the corner
   radius on card imagery. */
.pa-product-card .pa-product__media,
.pa-category-card .pa-product__media {
  border-radius: var(--pa-radius);
}

.pa-product-card .pa-product__media img,
.pa-category-card .pa-product__media img,
.woocommerce ul.products li.product .pa-product__media img,
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

/* Title. Two lines, always — the box is reserved whether the name runs
   to one line or three, so a long title never pushes its neighbour's
   price out of alignment. 16px is the floor and it is used at the
   floor here only because the price directly beneath carries the
   weight. */
/* The [hidden] rule has to come with this one.

   `display: -webkit-box` is a class-level declaration and beats the
   browser's built-in [hidden] { display: none }, so the language variant
   that is supposed to be hidden stayed on screen and every product showed
   its Bengali AND English name at the same time. Anything that sets
   `display` on an element that can carry [hidden] needs this. */
.pa-product-card__title[hidden] {
  display: none;
}

.pa-product-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--pa-text-sm) * var(--pa-leading-body) * 2);
  margin: 0;
  margin-block-start: var(--pa-space-2);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-regular);
  line-height: var(--pa-leading-body);
  color: var(--pa-text);
}

/* The two-line reservation above only ever held one line, and the
   grid showed it: a one-line garment name measured 51px, a two-line
   name 71px, and the whole row grew by 20px depending on how long the
   name happened to be.

   WooCommerce core styles the loop title element itself —
   `.woocommerce ul.products li.product h3 { padding:.5em 0; margin:0;
   font-size:1em }` — and at (0,3,3) that beats `.pa-product-card__title`
   at (0,1,0). It took the size off the token scale (1em of a 17px
   parent) and added 8.5px of padding top and bottom, so the
   reservation, calculated from the token with no padding in it, came
   out 20px short of the two lines it was reserving. Same cascade
   defect as the card action button further up this file, same fix:
   restate it at a specificity that wins.

   Font size is stated as the token it was already rendering at, so
   this changes the geometry and not the type — 17px is the preferred
   body size and the floor the older half of the audience reads at. */
.pa-product-card__title,
.woocommerce ul.products li.product .pa-product-card__title {
  padding: 0;
  font-size: var(--pa-text-base);
  min-height: calc(var(--pa-text-base) * var(--pa-leading-body) * 2);
}

/* --- price --------------------------------------------------
   Directly under the image, large, Bengali numerals, never on
   hover, never over the garment. Sized for four digits — the
   range reaches ১৫০০ and the block grows to fit the price, not
   the other way round. */

.pa-product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
  color: var(--pa-price);
}

.pa-product-card__price .amount,
.pa-product-card__price bdi {
  white-space: nowrap;
}

/* The price she pays leads; the old price follows it, struck. */
.pa-product-card__price ins {
  order: 1;
  text-decoration: none;
  font-weight: var(--pa-weight-bold);
  color: var(--pa-price);
}

/* The old price is secondary, but it is still a four-digit Bengali
   number the customer reads to judge the saving. It was 16px at
   weight 400 — the lightest weight in the system on the smallest
   informational size — and ১৫০০ at that setting is where the ১
   thins out most. Measured on canvas at real size: at weight 500 the ১ carries only
   HALF the stroke of ৫ (3px against 6px) — relatively thinner than
   at 400. At 600 it reaches 83%. So 600, which the brand context
   permits and the legibility brief asks for exactly this case. It
   stays clearly subordinate to the 21px/700 price she pays through
   size and colour rather than through weight. */
.pa-product-card__price del {
  order: 2;
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text-muted);   /* stone — annotation, 6.34:1 */
  text-decoration: line-through;
}

/* A variable product's price range must not shrink to fit. */
.pa-product-card__price .from,
.pa-product-card__price .woocommerce-Price-currencySymbol {
  font-weight: inherit;
}

/* The price takes the large step this card asks for.

   `.pa-product-card__price` sets --pa-text-lg, but WooCommerce renders
   the figure in its own `.woocommerce-Price-amount` span, and
   components/woocommerce.css gives that class a 17px size. That rule
   is a legibility FLOOR for WooCommerce's block cart and checkout,
   whose defaults ship at 13px — its own comment calls it "a floor, not
   a design". Because it sits on the inner span it beat the size the
   card had set on the outer one, so the floor was working as a ceiling
   on the one surface where the price is what she qualifies herself on
   before she taps: 21px of intent rendering at 17px on every card,
   sale and plain alike.

   `inherit` is what fixes it rather than a restated size, because the
   struck figure then keeps the smaller size its own <del> carries. The
   floor is untouched for every other surface. */
.pa-product-card__price .woocommerce-Price-amount {
  font-size: inherit;
}

/* The unit sits a step down from the number it belongs to — the number
   is what she reads, টাকা only says which number it is. */
.pa-product-card__price .woocommerce-Price-currencySymbol {
  font-size: var(--pa-text-base);
}

/* The struck price drops its unit — the money rule this store already
   runs on (`docs/PROJECT-CONTEXT.md`: "A struck previous price drops
   the unit, which keeps a card price row to one line at 360px so sale
   and plain cards stay the same height"). It was not being applied
   here: both figures carried টাকা, which measures 78px struck and 79px
   current, and 165px with the gap does not fit the 155px a card column
   gives at 390px. The row wrapped, so every sale card stood 34px
   taller than the plain card beside it and the two CTAs in a row
   stopped lining up.

   The unit is dropped from the strike only, never from the price she
   pays, and never from what is announced: the visually-hidden price
   sentences next to it still read "আগের দাম ছিল: ১৫০০ টাকা।" in full. */
.pa-product-card__price del .woocommerce-Price-currencySymbol {
  display: none;
}

/* WooCommerce joins the figure to its unit with a non-breaking space,
   and that space is a real character: hiding the unit above left it
   behind, still holding 5px open at the end of the struck figure. A
   non-breaking space is the one kind of white space that never
   collapses on its own, so it has to be taken back explicitly, and
   word-spacing is what reaches it — there is no other separator inside
   a four-digit price for this to touch. Those 5px are what put the row
   back on one line at 360px, where the two figures and their gap have
   140px to fit into. */
.pa-product-card__price del .woocommerce-Price-amount {
  word-spacing: -0.3em;
}

/* --- flags --------------------------------------------------- */

/* Charcoal on butter — 10.26:1. A rectangle. No rotation, no ribbon
   tail, no starburst, no pill. */
.pa-flag {
  position: absolute;
  inset-block-start: var(--pa-space-2);
  inset-inline-start: var(--pa-space-2);
  z-index: 1;
  padding: var(--pa-space-1) var(--pa-space-2);
  border-radius: var(--pa-radius);
  background: var(--pa-butter);
  color: var(--pa-charcoal);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
  white-space: nowrap;
}

/* Out of stock. A solid band across the foot of the image — warm white
   on charcoal, 11.98:1. It has to be readable at arm's length in
   daylight, because the alternative is choosing a size and only then
   finding out. */
/* May read "আর ৩টি বাকি" — a Bengali numeral doing urgent work. */
.pa-stock-band {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  padding: var(--pa-space-2) var(--pa-space-3);
  background: var(--pa-charcoal);
  color: var(--pa-text-invert);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
  text-align: center;
}

/* --- action -------------------------------------------------- */

/* Secondary product-card action ("Select size" / Add to cart) —
   Owner revised brand context, September 2026:
   Rest: mint background, charcoal text.
   Hover & Pressed: butter background, charcoal text.
   Centred mathematically via flex. */
.pa-product-card__action a,
.pa-product-card__action button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pa-tap-min);
  padding: var(--pa-space-2) var(--pa-space-3);
  border: var(--pa-space-1) solid var(--pa-charcoal);
  border-radius: var(--pa-radius);
  background: var(--pa-mint);
  color: var(--pa-charcoal);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0;
  transition: transform 90ms ease-out, background-color 90ms ease-out,
              color 90ms ease-out, border-color 90ms ease-out;
}

.woocommerce .pa-product-card__action a,
.woocommerce .pa-product-card__action button,
.woocommerce ul.products li.product .pa-product-card__action a,
.woocommerce ul.products li.product .pa-product-card__action button,
.woocommerce ul.products li.product .pa-product-card__action a.button,
.woocommerce ul.products li.product .pa-product-card__action button.button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: var(--pa-tap-min) !important;
  padding: var(--pa-space-2) var(--pa-space-3) !important;
  border: var(--pa-space-1) solid var(--pa-charcoal) !important;
  border-radius: var(--pa-radius) !important;
  background: var(--pa-mint) !important;
  color: var(--pa-charcoal) !important;
  font-family: var(--pa-font-body) !important;
  font-size: var(--pa-text-sm) !important;
  font-weight: var(--pa-weight-semibold) !important;
  line-height: var(--pa-leading-tight) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (hover: hover) {
  .pa-product-card__action a:hover,
  .pa-product-card__action button:hover {
    background: var(--pa-butter);
    color: var(--pa-charcoal);
    border-color: var(--pa-charcoal);
    transform: translateY(-1px);
  }

  .woocommerce .pa-product-card__action a:hover,
  .woocommerce .pa-product-card__action button:hover,
  .woocommerce ul.products li.product .pa-product-card__action a:hover,
  .woocommerce ul.products li.product .pa-product-card__action button:hover,
  .woocommerce ul.products li.product .pa-product-card__action a.button:hover,
  .woocommerce ul.products li.product .pa-product-card__action button.button:hover {
    background: var(--pa-butter) !important;
    color: var(--pa-charcoal) !important;
    border-color: var(--pa-charcoal) !important;
    transform: translateY(-1px);
  }
}

.pa-product-card__action a:active,
.pa-product-card__action button:active,
.woocommerce .pa-product-card__action a:active,
.woocommerce .pa-product-card__action button:active,
.woocommerce ul.products li.product .pa-product-card__action a:active,
.woocommerce ul.products li.product .pa-product-card__action button:active,
.woocommerce ul.products li.product .pa-product-card__action a.button:active,
.woocommerce ul.products li.product .pa-product-card__action button.button:active {
  background: var(--pa-butter) !important;
  color: var(--pa-charcoal) !important;
  border-color: var(--pa-charcoal) !important;
  transform: translateY(1px) scale(0.985);
}

.pa-product-card__action a:focus-visible,
.pa-product-card__action button:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-charcoal);
  outline-offset: var(--pa-space-1);
}

/* Out of stock: still tappable — it goes to the product page, where she
   can see the other sizes — but visibly not the buy button. Charcoal on
   mint, 7.85:1. */
/* Out of stock: still tappable — it routes to the product page — but
   it is not a product action she can complete, so it drops the butter
   and falls back to a quiet outline. */
.pa-product-card--oos .pa-product-card__action a,
.pa-product-card--oos .pa-product-card__action button {
  background: none;
  color: var(--pa-text-muted);
}

/* WooCommerce's own "added" tick, kept out of the way of the label. */
.pa-product-card__action .added_to_cart {
  margin-block-start: var(--pa-space-2);
  background: none;
  color: var(--pa-text);
}

/* --- category card ------------------------------------------- */

/* The name sits in a solid charcoal band over the foot of the image
   rather than in free text on top of it. Photography is not controlled
   at this level, so a solid block is the only way to guarantee 11.98:1
   over any picture — the same mechanism the price block uses. */
.pa-category-card {
  position: relative;
  margin: 0;
  list-style: none;
}

.pa-category-card__link {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* BELOW the photograph, never over it.

   This block used to be absolutely positioned across the bottom of the
   image. Text over a photograph is unreadable in bright daylight on a
   phone — which is exactly where this customer is — and the crop that
   happens to sit behind the words changes with every product. The block
   now sits underneath, so the words always have a ground of their own
   and the photograph is never covered. */
.pa-category-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pa-space-1);
  padding: var(--pa-space-3);
  background: var(--pa-charcoal);
  color: var(--pa-text-invert);   /* 11.98:1 */
}

/* Name and count each get their own line. Left aligned, both of them.
   min-height reserves room for two lines whether the name needs them or
   not — "কামিজ সেট ও কো-অর্ড" wraps, "বটম ওয়্যার" doesn't, and without
   this the card holding the shorter name is visibly shorter than its
   neighbour in the same grid row. Two lines at the leading Bengali text
   actually renders at (1.6) is the widest reservation either language needs. */
.pa-category-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--pa-text-base) * var(--pa-leading-body) * 2);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-body);
  text-align: start;
  overflow-wrap: anywhere;
}

/* 17px at 600, not the 14px annotation size.

   A compact Bengali numeral is a small, dense glyph and this reader is
   often presbyopic and outdoors. It is information she uses to choose,
   not a footnote. Mint on charcoal measures 7.85:1. */
.pa-category-card__count {
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
  letter-spacing: normal;
  text-align: start;
  color: var(--pa-mint);
}

.pa-category-card__count[hidden],
.pa-category-card__name[hidden] {
  display: none;
}

/* The category directory has exactly six merchandise categories.

   Three compact columns at every supported width divide six evenly with zero
   orphan cards. Product grids still remain two columns on mobile and expand
   independently at tablet/desktop breakpoints. */
@media (max-width: 599px) {
  .pa-grid--categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--pa-space-2);
    row-gap: var(--pa-space-4);
  }

  .pa-category-card,
  .pa-category-card__link,
  .pa-category-card__body {
    min-width: 0;
  }

  .pa-category-card__body {
    gap: var(--pa-space-1);
    padding: var(--pa-space-2);
  }
}

@media (min-width: 600px) {
  .pa-grid--categories { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .pa-grid--categories { grid-template-columns: repeat(3, 1fr); }
}

/* --- focus ---------------------------------------------------
   Visible focus on the whole card, not just the text inside it.
   Nothing here depends on hover. */

.pa-product-card__link:focus-visible,
.pa-category-card__link:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-charcoal);
  outline-offset: var(--pa-space-1);
}