/* Section: arrivals — horizontal product carousel with sale badges
   and a quick-add icon. Structure:
     .arrivals
       .arrivals__head    ← title
       .arrivals__rail    ← scroll track + floating arrows
         .arrivals__arrows (absolute, left)
         .arrivals__track  (scroll-snap x-overflow)
           .product-card */

.arrivals {
  background: var(--color-cream);
  padding-block: clamp(var(--sp-7), 8vw, var(--sp-9));
}

.arrivals__head {
  padding-inline: clamp(var(--sp-4), 3vw, var(--sp-6));
  margin-bottom: var(--sp-6);
}
.arrivals__title {
  font-family: var(--font-display);
  color: var(--color-navy);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.arrivals__sub {
  color: var(--text-muted);
  font-size: var(--fs-body-lg);
  margin-top: var(--sp-3);
  max-width: 62ch;
}

/* ——— Rail (holds arrows + scrollable track) ——— */
.arrivals__rail {
  position: relative;
}

.arrivals__arrows {
  position: absolute;
  left: clamp(var(--sp-3), 2vw, var(--sp-5));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.arrivals__arrow {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-navy);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.arrivals__arrow:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
.arrivals__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.arrivals__arrow svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ——— Track ——— */
.arrivals__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--sp-4) * 3) / 4);  /* 4 cards */
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding-inline: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding-block: var(--sp-2);
  scrollbar-width: none;          /* Firefox */
}
.arrivals__track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

@media (max-width: 1200px) {
  .arrivals__track { grid-auto-columns: calc((100% - var(--sp-4) * 2) / 3); }
}
@media (max-width: 840px) {
  .arrivals__track { grid-auto-columns: calc((100% - var(--sp-4)) / 2); }
  .arrivals__arrows { display: none; }
}
@media (max-width: 540px) {
  .arrivals__track { grid-auto-columns: 78%; }
}

/* ——— Product card ——— */
.product-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* overlay link: sits over the whole image area so any click navigates;
   badge + quick-add sit above it with higher z-index */
.product-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
  color: inherit;
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img {
  transform: scale(1.03);
}

.product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  z-index: 3;
  pointer-events: none;
}

.product-card__quick-add {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 8px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  z-index: 4;
}
.product-card:hover .product-card__quick-add,
.product-card:focus-within .product-card__quick-add {
  opacity: 1;
  transform: translate(-50%, 0);
}
.product-card__quick-add:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
/* ——— Wishlist heart — top-right of every product card ——— */
.product-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  color: var(--color-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* Touch devices: expand tap target to 44px (Apple HIG / WCAG 2.5.5). */
@media (hover: none) {
  .product-card__wishlist { width: 44px; height: 44px; }
}
.product-card__wishlist svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: fill var(--dur-fast) var(--ease-out);
}
.product-card__wishlist:hover {
  background: var(--color-white);
  color: var(--color-red);
  transform: scale(1.08);
}
.product-card__wishlist[aria-pressed="true"] {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.product-card__wishlist[aria-pressed="true"] svg { fill: currentColor; }

.product-card__quick-add--added {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
  background: #2f7d3a;
  color: var(--color-white);
  border-color: #2f7d3a;
  animation: quickAddPulse 450ms var(--ease-out);
}
@keyframes quickAddPulse {
  0%   { transform: translate(-50%, 0) scale(0.85); }
  60%  { transform: translate(-50%, 0) scale(1.08); }
  100% { transform: translate(-50%, 0) scale(1); }
}
.product-card__quick-add svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* show quick-add always on touch devices (no hover) */
@media (hover: none) {
  .product-card__quick-add { opacity: 1; transform: translate(-50%, 0); }
}

/* ——— Title + price strip ——— */
.product-card__body {
  padding: var(--sp-4) 2px 0;
}
.product-card__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  color: var(--color-navy);
  margin: 0 0 4px;
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.product-card__title a {
  color: inherit;
  text-decoration: none;
}
.product-card__title a:hover { color: var(--color-red); }
.product-card__price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.product-card__price-now {
  font-weight: var(--fw-semibold);
}
.product-card__price-was {
  text-decoration: line-through;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  font-size: 0.88rem;
}