/* ==========================================================================
   Barari Gold — the product card
   FE-08 · one card for every surface
   --------------------------------------------------------------------------
   Design source: _handoff/barari-gold-website.html — the `.pcard`, `.stock`,
   `.mini`, `.flag` and `.grid` rules at :106-116, and the grid the mockup
   builds from them at :528-536.

   Markup: resources/themes/default/web-views/partials/_product-card.blade.php.
   Served verbatim from public/assets/barari/. No build step. Linked in
   layouts/front-end/app.blade.php after shell.css.

   RTL — follows the FE-38 convention at the head of barari.css: logical
   properties throughout. Nothing positional needs a pair: the flag corner uses
   border-end-end-radius, the layouts are flex and grid, and the only shadow is
   symmetrical on x. One non-geometric pair is needed for the flag's tracking,
   at the foot of this file.

   The grid class lives here rather than in a screen's file because the card
   and the 1px rule between cards are one design object. FE-06 and FE-09 apply
   .barari-cardgrid to their own containers; this task does not restructure any
   surface markup.
   ========================================================================== */

/* The hairline between cards is painted by the cards, not by the grid.
   Colouring the grid's own background and letting it show through a 1px gap is
   the shorter way to write this and it is what the mockup does, but the mockup
   always has a full last row. A real catalogue does not: three bars in a
   four-column grid leaves an empty cell, and that cell would render as a grey
   band the width of a card. A 1px ring on each card paints only where a card
   is — neighbouring rings meet exactly inside the 1px gap, and the outermost
   ones draw the frame the grid used to draw itself. FE-09 found this. */
.barari-cardgrid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
}

.barari-cardgrid > .barari-card { box-shadow:0 0 0 1px var(--barari-rule); }

@media (max-width:1100px) { .barari-cardgrid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px)  { .barari-cardgrid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px)  { .barari-cardgrid { grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.barari-card {
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--barari-surface);
  font-family:var(--barari-font-body);
  color:var(--barari-ink);
  padding-block:var(--barari-space-6) var(--barari-space-5);
  padding-inline:var(--barari-space-5);
}

.barari-card__flag {
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  background:var(--barari-cedar);
  color:var(--barari-ivory);
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding-block:5px;
  padding-inline:10px;
  border-end-end-radius:3px;
}

.barari-card__stage {
  display:grid;
  place-items:center;
  height:150px;
  margin-block-end:var(--barari-space-4);
  text-decoration:none;
}

.barari-card__stage img {
  max-height:150px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  border-radius:var(--barari-radius);
}

.barari-card__body { display:flex; flex-direction:column; flex:1 1 auto; }

.barari-card__name {
  font-size:var(--barari-text-ui);
  font-weight:500;
  line-height:1.35;
  margin:0;
}

.barari-card__name a {
  color:inherit;
  text-decoration:none;
}

.barari-card__name a:hover,
.barari-card__name a:focus-visible { text-decoration:underline; }

.barari-card__meta {
  font-size:var(--barari-text-meta);
  line-height:1.5;
  color:var(--barari-ink-52);
  margin:var(--barari-space-1) 0 0;
}

.barari-card__meta-sep { padding-inline:2px; }

.barari-card__price {
  font-family:var(--barari-serif);
  font-size:24px;
  line-height:1;
  margin:var(--barari-space-3) 0 0;
}

.barari-card__price-was {
  font-family:var(--barari-font-body);
  font-size:var(--barari-text-meta);
  color:var(--barari-ink-52);
  margin-inline-end:var(--barari-space-2);
}

.barari-card__prem {
  font-size:var(--barari-text-fine);
  color:var(--barari-ink-52);
  margin:var(--barari-space-1) 0 0;
}

.barari-card__foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--barari-space-3);
  flex-wrap:wrap;
  margin-block-start:auto;
  padding-block-start:var(--barari-space-3);
  border-block-start:1px solid var(--barari-rule);
}

.barari-card__stock {
  font-size:var(--barari-text-fine);
  color:var(--barari-cedar);
}

.barari-card__stock--out { color:var(--barari-alarm); }

/* The mockup's `.stock.low` at :117. The threshold is not here and not in the
   partial either: it is the admin's existing `stock_limit` business setting,
   read in _product-card.blade.php. */
.barari-card__stock--low { color:var(--barari-caution); }

.barari-card__actions {
  display:flex;
  align-items:center;
  gap:var(--barari-space-3);
}

.barari-card__quick {
  font-size:var(--barari-text-fine);
  color:var(--barari-ink-60);
  text-decoration:none;
  border-block-end:1px solid var(--barari-rule);
  padding-block-end:1px;
}

.barari-card__quick:hover,
.barari-card__quick:focus-visible {
  color:var(--barari-brown);
  border-block-end-color:var(--barari-brown);
}

.barari-card__cta {
  font-size:var(--barari-text-meta);
  font-weight:500;
  color:var(--barari-brown);
  background:transparent;
  border:1px solid var(--barari-brown);
  border-radius:var(--barari-radius-sharp);
  padding-block:7px;
  padding-inline:14px;
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--barari-duration) var(--barari-ease),
             color var(--barari-duration) var(--barari-ease);
}

.barari-card__cta:hover,
.barari-card__cta:focus-visible {
  background:var(--barari-brown);
  color:var(--barari-ivory);
}

.barari-card a:focus-visible {
  outline:2px solid var(--barari-bronze);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   Row layout — image beside the text
   The narrow carousels that used _product-card-1 and _product-card-2. Same
   content, same hooks, different arrangement.
   -------------------------------------------------------------------------- */

.barari-card--row {
  flex-direction:row;
  align-items:flex-start;
  gap:var(--barari-space-4);
  padding-block:var(--barari-space-4);
  border:1px solid var(--barari-rule);
  border-radius:var(--barari-radius-card);
}

.barari-card--row .barari-card__stage {
  height:110px;
  width:110px;
  flex:0 0 110px;
  margin-block-end:0;
}

.barari-card--row .barari-card__stage img { max-height:110px; }

.barari-card--row .barari-card__price { font-size:19px; margin-block-start:var(--barari-space-2); }

.barari-card--row .barari-card__foot {
  margin-block-start:var(--barari-space-3);
  padding-block-start:var(--barari-space-2);
}

@media (max-width:520px) {
  .barari-card--row { gap:var(--barari-space-3); }
  .barari-card--row .barari-card__stage { height:84px; width:84px; flex:0 0 84px; }
  .barari-card--row .barari-card__stage img { max-height:84px; }
}

/* --------------------------------------------------------------------------
   RTL — the paired rule this file needs
   --------------------------------------------------------------------------
   The card's geometry is written in logical properties and needs no pairs.
   The flag's tracking does: letter-spacing breaks Arabic, a joined script, so
   a tracked flag reads as a row of isolated letters. Same pair, same reason,
   as error.css:227 and rate.css.
   -------------------------------------------------------------------------- */

[dir="rtl"] .barari-card__flag {
  letter-spacing:0;
}