.product__price.price{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .2px;
}
.product__price .price__final{
  color: #EB391B; /* discount color */
}
.product__price .price__was{
  color: #9CA3AF;                /* grey */
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 600;
  opacity: .9;
  white-space: nowrap;
}
.product__price.price--discounted { gap: 10px; }




/* Font token for reuse */
:root{
  --font-archivo: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Adjust the container selector below to match your section wrapper.
   Common ones you've used are: #drops, .section--drops, or .latest-drops */
.section--drops .product__desc,
.section--drops .product__price,
.section--drops .price__final,
.section--drops .price__was{
  font-family: var(--font-archivo);
}

/* Optional: weights/spacing for a cleaner look */
.section--drops .product__price{ 
  font-weight: 800; 
  letter-spacing: .01em; 
}

.section--drops .product__desc{
  font-weight: 400; 
  line-height: 1.5; 
}