/* Draft page 4301 only. Restore the approved prototype where global WP styles bleed in. */
body.velvet-home-page {
  letter-spacing: normal;
}

body.velvet-home-page .hero__title {
  font-family: var(--serif);
  font-size: clamp(62px, 5vw, 72px);
  font-weight: 400;
  line-height: .98;
  color: var(--burgundy);
}

body.velvet-home-page .button {
  letter-spacing: normal;
  text-transform: none;
}

body.velvet-home-page .hero__actions .button {
  white-space: nowrap;
  background: #5b0d2a !important;
  color: #fffaf5 !important;
}

body.velvet-home-page .hero__actions .button:is(:hover, :focus-visible) {
  background: #470b21 !important;
  color: #fffaf5 !important;
}

body.velvet-home-page .hero__actions .button:focus-visible {
  outline: 3px solid #5b0d2a !important;
  outline-offset: 4px;
}

/* The WooCommerce image and its action are one link; make the action legible. */
body.velvet-home-page .product-card__image .product-card__action {
  background: #5b0d2a !important;
  color: #fffaf5 !important;
}

body.velvet-home-page .product-card__image:is(:hover, :focus-visible) .product-card__action {
  background: #470b21 !important;
  color: #fffaf5 !important;
}

body.velvet-home-page .product-card__image:focus-visible {
  outline: 3px solid #5b0d2a !important;
  outline-offset: 4px;
}

body.velvet-home-page .text-link:is(:hover, :focus-visible) {
  color: var(--burgundy);
}

/* Product photographs alone need their full silhouette inside the approved card frame. */
body.velvet-home-page :is(.new-showcase, .essentials-showcase) .product-card__image img.attachment-woocommerce_single {
  object-fit: contain;
  background: var(--ivory);
}

/* Avanam's utility controls belong to the existing site, not this isolated draft. */
body.velvet-home-page .base-color-palette-switcher,
body.velvet-home-page #bt-scroll-up,
body.velvet-home-page #bt-scroll-up-reader {
  display: none !important;
}

@media (max-width: 1100px) {
  body.velvet-home-page .hero__title { font-size: 60px; }
}

@media (max-width: 1024px) {
  body.velvet-home-page .hero__title { font-size: 56px; }
}

@media (min-width: 768px) and (max-width: 900px) {
  body.velvet-home-page .hero__title { font-size: 44px; }
}

@media (min-width: 1440px) {
  body.velvet-home-page .hero__title { font-size: clamp(64px, 4vw, 68px); }
}

@media (max-width: 767px) {
  body.velvet-home-page .hero__title {
    font-size: clamp(43px, 11.5vw, 53px);
    line-height: 1.02;
  }
}

@media (max-width: 359px) {
  body.velvet-home-page .hero__title { font-size: 41px; }
}