/* ==========================================================================
   "New arrivals" section — driven by ArrivalsUI.

   Scoped to .arrivals-sec so the product grid elsewhere is untouched.

   Guidance applied:
   - The card surfaces the decision facts without a tap: name, collection,
     price, and the old price struck through.
   - Badges are triggers, not decoration — one per card, and never allowed to
     sit on top of the image edge where it collides with the corner radius.
   - Badges overlapping content on small screens is a known conversion killer,
     so the badge shrinks and re-anchors on mobile instead of staying put.
   ========================================================================== */

.arrivals-sec,
.a-scope {
  --a-cols: 4;
  --a-gap: 28px;
  --a-radius: 6px;
  --a-ratio: 3 / 4;
}

.a-grid {
  display: grid;
  grid-template-columns: repeat(var(--a-cols), minmax(0, 1fr));
  gap: var(--a-gap);
}

/* ---------------- card ---------------- */
.a-card {
  display: block;
  cursor: pointer;
  background: transparent;
}

.a-media {
  position: relative;
  display: block;
  aspect-ratio: var(--a-ratio);
  border-radius: var(--a-radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--wine, #6d2b4a), var(--plum, #2e1a24));
}
.a-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2, .6, .2, 1);
  will-change: transform;
}

/* ── shimmer placeholder ───────────────────────────────────────────────────
   A Flutter-style skeleton sweeps behind every card image until the photo has
   actually loaded, so a slow connection never shows an empty coloured box. The
   ::before is the moving highlight; JS adds .is-loaded the moment the <img>
   fires load (or immediately for a cached image / a card with no photo). */
.a-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, #ece4e0 25%, #f7f1ec 45%, #ece4e0 65%);
  background-size: 200% 100%;
  animation: a-shimmer 1.25s linear infinite;
}
.a-media.is-loaded::before {
  opacity: 0;
  animation: none;
  transition: opacity .45s ease;
  pointer-events: none;
}
/* Only the MAIN photo fades in; the hover second image keeps its own timing. */
.a-media img.a-img-main { position: relative; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.a-media.is-loaded img.a-img-main { opacity: 1; }
@keyframes a-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .a-media::before { animation: none; }
  .a-media img.a-img-main { transition: none; }
}

[data-a-hover="zoom"] .a-card:hover .a-media img { transform: scale(1.07); }
[data-a-hover="lift"] .a-card { transition: transform .3s ease; }
[data-a-hover="lift"] .a-card:hover { transform: translateY(-6px); }

/* ---------------- badge ---------------- */
.a-badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  background: var(--gold, #c9a24b);
  color: var(--plum, #2e1a24);
  box-shadow: 0 4px 12px rgba(46, 26, 36, .22);
}
.a-badge.sale { background: var(--wine, #6d2b4a); color: #fff; }

/* ---------------- quick view ---------------- */
.a-quick {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 14px;
  text-align: center;
  background: linear-gradient(transparent, rgba(46, 26, 36, .85));
  color: #fff;
  font-size: .82rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 2;
}
.a-card:hover .a-quick,
.a-card:focus-within .a-quick { opacity: 1; transform: none; }

/* ---------------- body ---------------- */
.a-body { padding: 14px 2px 0; }
.a-name {
  font-family: var(--serif, serif);
  color: var(--plum, #2e1a24);
  font-size: 1.02rem;
  line-height: 1.4;
}
html[dir="rtl"] .a-name { font-family: var(--ar, sans-serif); font-weight: 600; }
.a-cat { font-size: .78rem; color: var(--muted, #8a7b82); margin-top: 3px; }
.a-price { margin-top: 7px; color: var(--wine, #6d2b4a); font-weight: 600; }
.a-price .old {
  color: var(--muted, #8a7b82);
  text-decoration: line-through;
  font-weight: 400;
  margin-inline-start: 9px;
  font-size: .88em;
}

/* ---------------- filters ---------------- */
.a-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 34px;
}
.a-chip {
  border: 1px solid var(--line, #e7ded9);
  background: transparent;
  color: var(--plum, #2e1a24);
  font-family: inherit;
  font-size: .84rem;
  padding: 9px 20px;
  border-radius: 40px;
  cursor: pointer;
  transition: .25s;
  min-height: 40px;
}
.a-chip:hover { border-color: var(--gold, #c9a24b); }
.a-chip.active { background: var(--plum, #2e1a24); color: var(--gold-soft, #e3c98a); border-color: var(--plum, #2e1a24); }
.a-card[hidden] { display: none; }

/* ---------------- footer CTA ---------------- */
.a-more { text-align: center; margin-top: 46px; }
.a-more p { color: var(--muted, #8a7b82); margin-bottom: 18px; font-size: .92rem; }
.a-more .as-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--wine, #6d2b4a);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap .25s ease;
}
.a-more .as-link:hover { gap: 15px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1024px) {
  .a-grid { grid-template-columns: repeat(var(--a-cols-t, 3), minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .a-grid {
    grid-template-columns: repeat(var(--a-cols-m, 2), minmax(0, 1fr));
    gap: max(12px, calc(var(--a-gap) * .5));
  }

  /* A badge that overlaps the image edge or the price is a known conversion
     killer on small screens — shrink it and pull it in. */
  .a-badge {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 4px 9px;
    font-size: .62rem;
  }

  /* No hover on touch, so the quick-view overlay would never appear. */
  .a-quick { display: none; }

  .a-name { font-size: .92rem; }
  .a-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .a-chip { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .a-media img, .a-quick, .a-card { transition: none !important; }
  .a-card:hover .a-media img { transform: none; }
}

/* --------------------------------------------------------------------------
   The filter row scrolls sideways on phones. A native scrollbar under a row
   of pills looks like a defect, and it is redundant: the pills are visibly
   cut off at the edge, which already signals "there is more".
   -------------------------------------------------------------------------- */
.a-filters {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
.a-filters::-webkit-scrollbar { width: 0; height: 0; display: none; }

@media (max-width: 860px) {
  /* Bleed to the screen edge so the cut-off pill reads as intentional, and
     keep a little end padding so the last chip is never flush. */
  .a-filters {
    margin-inline: calc(var(--d-gutter, 20px) * -1);
    padding-inline: var(--d-gutter, 20px);
    scroll-padding-inline: var(--d-gutter, 20px);
  }
  .a-filters::after { content: ""; flex: 0 0 4px; }
}

/* ==========================================================================
   CARD DESIGNS  [data-a-card]

   Fashion cards let the photograph do the selling — imagery usually owns
   70–80% of the tile. The variants below differ in where the type sits and
   how loud it is; there is no universal winner, so the choice is the admin's.

   Every variant keeps the same facts available (name, collection, price):
   changing the design must never quietly remove information.
   ========================================================================== */

/* ---------- 1. classic — type in a strip under the image (default) ---------- */
/* nothing extra: this is the base card above */

/* ---------- 2. overlay — type laid over the photograph ---------- */
[data-a-card="overlay"] .a-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 42%, rgba(46, 26, 36, .88));
  z-index: 1;
}
[data-a-card="overlay"] .a-card { position: relative; }
[data-a-card="overlay"] .a-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 18px;
  color: #fff;
}
[data-a-card="overlay"] .a-name { color: #fff; }
[data-a-card="overlay"] .a-cat { color: rgba(255, 255, 255, .72); }
[data-a-card="overlay"] .a-price { color: var(--gold-soft, #e3c98a); }
[data-a-card="overlay"] .a-price .old { color: rgba(255, 255, 255, .55); }
/* the quick-view strip would sit on top of the caption — drop it here */
[data-a-card="overlay"] .a-quick { display: none; }

/* ---------- 3. minimal — photo, name, price. nothing else ---------- */
[data-a-card="minimal"] .a-cat { display: none; }
[data-a-card="minimal"] .a-body { padding-top: 12px; }
[data-a-card="minimal"] .a-name {
  font-size: .94rem;
  font-weight: 400;
  letter-spacing: .01em;
}
html[dir="rtl"] [data-a-card="minimal"] .a-name { font-weight: 500; }
[data-a-card="minimal"] .a-price {
  margin-top: 4px;
  font-weight: 400;
  color: var(--muted, #8a7b82);
  font-size: .88rem;
}
[data-a-card="minimal"] .a-media { border-radius: 0; }

/* ---------- 4. editorial — serif, collection as an eyebrow above ---------- */
/* Serif type reads as considered and timeless — the reason fashion houses
   keep returning to it. */
[data-a-card="editorial"] .a-body {
  padding-top: 18px;
  text-align: center;
}
[data-a-card="editorial"] .a-cat {
  order: -1;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold, #c9a24b);
  margin: 0 0 8px;
}
html[dir="rtl"] [data-a-card="editorial"] .a-cat {
  letter-spacing: .1em;
  text-transform: none;
}
[data-a-card="editorial"] .a-body { display: flex; flex-direction: column; }
[data-a-card="editorial"] .a-name {
  font-size: 1.16rem;
  line-height: 1.35;
}
[data-a-card="editorial"] .a-price {
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: .04em;
}
[data-a-card="editorial"] .a-media { border-radius: 0; }

/* ---------- 5. compact — image beside the type ---------- */
[data-a-card="compact"] .a-card {
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
[data-a-card="compact"] .a-media { aspect-ratio: 1 / 1; }
[data-a-card="compact"] .a-body { padding: 0; }
[data-a-card="compact"] .a-name { font-size: .92rem; }
[data-a-card="compact"] .a-quick { display: none; }
[data-a-card="compact"] .a-badge {
  inset-block-start: 6px;
  inset-inline-start: 6px;
  padding: 3px 7px;
  font-size: .56rem;
}
/* A row-shaped card in a 4-up grid becomes unreadable — cap the columns. */
[data-a-card="compact"] .a-grid {
  grid-template-columns: repeat(min(var(--a-cols), 3), minmax(0, 1fr));
}

/* ---------- text alignment (all variants) ---------- */
[data-a-align="center"] .a-body { text-align: center; }
[data-a-align="end"] .a-body { text-align: end; }

@media (max-width: 860px) {
  [data-a-card="compact"] .a-grid { grid-template-columns: 1fr; }
  [data-a-card="compact"] .a-card { grid-template-columns: minmax(0, 84px) minmax(0, 1fr); }
  [data-a-card="overlay"] .a-body { padding: 14px 12px; }
  [data-a-card="editorial"] .a-name { font-size: 1rem; }
}

/* ==========================================================================
   HOVER: swap to the second photograph.

   A proven apparel pattern — the back of the dress, or the gown on a body —
   revealed on hover. The second image is stacked over the first and cross-
   fades in; badges and the quick-view strip keep their higher z-index so they
   are never hidden behind it.
   ========================================================================== */
.a-media .a-img-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transition: opacity .5s ease;
}
[data-a-hover="second"] .a-card:hover .a-img-2 { opacity: 1; }
[data-a-hover="second"] .a-card:hover .a-img-main { transform: scale(1.03); }

/* No hover on touch — never leave a phone visitor stuck on the second frame. */
@media (hover: none) {
  .a-media .a-img-2 { display: none; }
}

/* ==========================================================================
   CARD SHADOW  [data-a-shadow]
   Lifts the image tile off the page. "soft" is a quiet depth cue; "bold" is a
   pronounced float for a more boutique, product-forward feel.
   ========================================================================== */
[data-a-shadow="soft"] .a-media { box-shadow: 0 10px 26px -14px rgba(46, 26, 36, .40); }
[data-a-shadow="bold"] .a-media { box-shadow: 0 18px 42px -18px rgba(46, 26, 36, .55); }

@media (prefers-reduced-motion: reduce) {
  .a-media .a-img-2 { transition: none; }
  [data-a-hover="second"] .a-card:hover .a-img-main { transform: none; }
}