/* One quiet, consistent card for the collection, home edit and related scents. */
.athar-product-grid,
.athar-related-grid { align-items: stretch !important; }

.athar-product-grid > article,
.athar-related-grid > article { min-width: 0; }

.athar-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  color: #382c2c;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(109, 20, 35, 0.08);
}

.athar-card-visual {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(109, 20, 35, 0.045);
  border-radius: 3px;
  background: #f4f0e9;
  transition: background 300ms ease, border-color 300ms ease;
}

.athar-card-image {
  position: absolute;
  inset: 11%;
  display: grid;
  place-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mix-blend-mode: multiply;
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
}

.athar-card-monogram {
  color: #b9a27c;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
}

/* This landscape source includes wide margins around the bottle. */
.athar-card-image[style*="diorHommeIntense2011.png"] { background-size: auto 100%; }

.athar-card-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 18px 2px 0;
}

.athar-card-brand {
  min-height: 2.8em;
  color: #817469;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Override the page heading scale and automatic single-line title fitting. */
.athar-product-card .athar-card-title {
  min-height: 2.5em;
  margin: 5px 0 0;
  color: #542630;
  font-size: 23px !important;
  font-weight: 500;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.athar-card-notes {
  margin: 9px 0 18px;
  color: #81786f;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.athar-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-block: 12px 4px;
  border-top: 1px solid rgba(109, 20, 35, 0.13);
}

.athar-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #76665b;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.athar-card-star { color: #a58549; font-size: 11px; }
.athar-card-action { display: inline-flex; color: #8b6b32; }
.athar-card-action svg { transition: transform 300ms ease; }
.athar-card-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.athar-featured-rail { align-items: stretch; gap: 24px !important; padding-block: 5px; }
.athar-featured-rail > :is(.athar-product-card, .athar-card-skeleton) {
  flex: 0 0 clamp(200px, 18vw, 248px);
  height: auto;
  scroll-snap-align: start;
}

.athar-product-card:focus-visible {
  outline: 2px solid #a58549;
  outline-offset: 3px;
}
.athar-product-card:focus-visible .athar-card-visual { border-color: #b9a27c; }
html[dir="rtl"] .athar-card-brand { font-size: 16px; letter-spacing: normal; }
html[dir="rtl"] .athar-card-notes { font-size: 19px; }
html[dir="rtl"] .athar-card-action svg { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
  .athar-product-card:hover .athar-card-visual { background: #eee8df; border-color: rgba(165, 133, 73, 0.2); }
  .athar-product-card:hover .athar-card-image { transform: scale(1.035); }
  .athar-product-card:hover .athar-card-action svg { transform: translateX(3px); }
  html[dir="rtl"] .athar-product-card:hover .athar-card-action svg { transform: translateX(-3px) scaleX(-1); }
}

@media (max-width: 767px) {
  .athar-card-visual { border-radius: 2px; }
  .athar-card-image { inset: 10%; }
  .athar-card-details { padding-top: 14px; }
  .athar-card-brand { font-size: 11px; letter-spacing: 0.07em; }
  .athar-product-card .athar-card-title { font-size: 20px !important; }
  .athar-card-notes { margin-block: 8px 14px; font-size: 15px; }
  .athar-card-footer { padding-top: 10px; }
  .athar-card-rating { font-size: 14px; gap: 5px; }
  .athar-card-monogram { font-size: 44px; }
  .athar-featured-rail { gap: 14px !important; }
  .athar-featured-rail > :is(.athar-product-card, .athar-card-skeleton) {
    flex-basis: calc((100vw - 2 * var(--athar-gutter) - 14px) / 2);
  }
  html[dir="rtl"] .athar-card-brand { font-size: 13px; }
  html[dir="rtl"] .athar-card-notes { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .athar-card-visual, .athar-card-image, .athar-card-action svg { transition: none; }
}