/* ==========================================================================
   Notting Hill Vape — Latest Vape Products carousel
   NHV-06 - Latest Products

   Depends on the design tokens in ../nhv.css. No colour, font or spacing
   literal below — add a token there first.
   ========================================================================== */

/* Genuinely full-bleed: unlike the category tiles, the CARDS are meant to span the
   viewport here too, so the section itself takes the 50%/50vw pull and no
   pseudo-element is needed. 12px inline padding matches the live site, where the
   heading starts 12px from the viewport edge. */
.nhv-latest {
  position: relative;
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  /* No bottom margin — the Featured block's heading panel sits directly beneath. */
  margin-bottom: 0;
  padding: var(--nhv-section-pad) 12px;
  background: var(--nhv-navy-deep);
}

.nhv-latest-inner {
  position: relative;
}

/* --- Heading -------------------------------------------------------------
   No panel styling here: this block uses the site-wide standard,
   .nhv-block-head / .nhv-block-title in nhv.css. Only block-specific tweaks
   would belong in this file, and there are none. */

/* --- Carousel shell ------------------------------------------------------ */

/* opencart.css puts a white 4px border, a radius and a shadow on every
   .swiper-viewport and loads after this file, so the compound selector wins on
   specificity rather than source order. */
.nhv-latest-viewport.swiper-viewport {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  position: relative;
}

/* Fixed slide width with slidesPerView:'auto' — the carousel shows however many
   fit, so it degrades gracefully at any container width instead of squashing. */
/* No fixed width here on purpose. Swiper computes the slide width from
   slidesPerView (6 on desktop, stepping down at the breakpoints in the template),
   so the number on screen stays six whatever the display width. A px width here
   would fight that and reintroduce the count drifting with the viewport. */
.nhv-latest .swiper-slide.nhv-latest-item {
  height: auto;
}

/* --- Card ---------------------------------------------------------------- */

.nhv-latest-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--nhv-navy);
  border-radius: var(--nhv-radius);
  overflow: hidden;
}

.nhv-latest-image { display: block; line-height: 0; background: var(--nhv-white); }
/* Square box reserved so a missing or slow image cannot drag this card's price out
   of line with its neighbours — see the same guard on .product-thumb in nhv.css. */
.nhv-latest-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 300ms ease;
}
.nhv-latest-card:hover .nhv-latest-image img { transform: scale(1.04); }

.nhv-latest-body {
  flex: 1 1 auto;
  padding: 12px 12px 6px;
  text-align: center;
}

/* The price must land at the same height on every card. Product names run to one,
   two or three lines, which was pushing it around. Clamping to exactly two lines
   AND reserving two lines' height fixes the position for both short and long names.
   line-height 1.35 x 2 = 2.7em. */
.nhv-latest-name {
  margin: 0 0 6px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nhv-latest-name a { color: var(--nhv-cream); text-decoration: none; }
.nhv-latest-name a:hover,
.nhv-latest-name a:focus { color: var(--nhv-copper-text); text-decoration: none; }

.nhv-latest-price {
  margin: 0;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-base);
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-cream-bright);
}
.nhv-latest-price-new { color: var(--nhv-gold); }
.nhv-latest-price-old {
  margin-left: 6px;
  font-size: var(--nhv-fs-small);
  color: var(--nhv-copper-text);
  text-decoration: line-through;
}

/* --- Actions ------------------------------------------------------------- */

.nhv-latest-actions {
  display: flex;
  gap: 1px;
  padding: 10px 12px 12px;
}

.nhv-latest-cart,
.nhv-latest-icon {
  border: 0;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-micro);
  font-weight: var(--nhv-fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--nhv-copper);
  color: var(--nhv-cream-bright);
  border-radius: var(--nhv-radius);
  transition: background var(--nhv-transition);
  cursor: pointer;
}
/* At the 183px card the actions row has 159px inside its padding. Two 32px icon
   buttons left the cart button 93px, which wrapped "ADD TO CART" onto a second
   line and doubled the button height. 28px icons give it 101px, and nowrap keeps
   the label on one line. */
.nhv-latest-cart {
  flex: 1 1 auto;
  padding: 8px 4px;
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nhv-latest-cart i { margin-right: 3px; }
.nhv-latest-icon { flex: 0 0 auto; width: 28px; padding: 8px 0; background: var(--nhv-navy-light); }

.nhv-latest-cart:hover  { background: var(--nhv-copper-muted); }
.nhv-latest-icon:hover  { background: var(--nhv-copper); }

.nhv-latest-cart:focus-visible,
.nhv-latest-icon:focus-visible,
.nhv-latest-name a:focus-visible,
.nhv-latest-image:focus-visible {
  outline: 2px solid var(--nhv-copper);
  outline-offset: 2px;
}

/* --- Arrows --------------------------------------------------------------
   Core hides these off-canvas above 768px and draws near-black FontAwesome
   glyphs; both are overridden, as on the other carousels. */
.nhv-latest .swiper-button-next,
.nhv-latest .swiper-button-prev {
  width: 34px;
  height: 100%;
  top: 0;
  margin-top: 0;
  background-color: var(--nhv-navy-veil);
  background-image: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--nhv-transition);
}
.nhv-latest .swiper-button-next::before,
.nhv-latest .swiper-button-prev::before {
  color: var(--nhv-cream);
  font-size: 24px;
  width: auto;
  height: auto;
  line-height: 1;
  text-shadow: none;
}
.nhv-latest-viewport.swiper-viewport .swiper-button-prev { opacity: 1; left: 0; }
.nhv-latest-viewport.swiper-viewport .swiper-button-next { opacity: 1; right: 0; }
.nhv-latest .swiper-button-next:hover,
.nhv-latest .swiper-button-prev:hover { background-color: var(--nhv-copper); }

@media (max-width: 767px) {
  .nhv-latest .swiper-button-next,
  .nhv-latest .swiper-button-prev { width: 26px; }
  .nhv-latest-cart span { display: none; }
}

/* The image zoom is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  .nhv-latest-image img { transition: none; }
  .nhv-latest-card:hover .nhv-latest-image img { transform: none; }
}