/**
 * IndyDTF Homepage — mockup-only styles.
 *
 * Every class here is homepage-specific. Shared design-system classes
 * (.indy-button, .indy-card, .indy-grid, .indy-eyebrow/h1-h4/body/small,
 * .indy-form/.indy-field-*, .indy-product-card, .indy-dropzone, etc.) are
 * reused verbatim from indydtf-root.css / indydtf-design-system.css /
 * indydtf-components.css / indydtf-commerce.css and are not redefined here.
 *
 * @package Astra Child
 */

.indy-homepage-page {
  overflow-x: hidden;
}

[data-homepage-animate] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--indy-homepage-delay, 0ms);
  will-change: opacity, transform;
}

[data-homepage-animate="fade-left"] {
  transform: translate3d(34px, 0, 0);
}

[data-homepage-animate="fade-right"] {
  transform: translate3d(-34px, 0, 0);
}

[data-homepage-animate].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.indy-homepage-page .indy-homepage-cta-arrow {
  width: 24px;
  height: 14px;
  margin-left: var(--indy-space-2);
  transform: none;
}

.indy-homepage-page .indy-homepage-cta-arrow svg {
  display: block;
  width: 24px;
  height: 14px;
  overflow: visible;
}

.indy-homepage-page .indy-homepage-cta-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.page-template-template-homepage .site-content > .ast-container,
.site-content > .ast-container:has(> #primary.indy-homepage-page) {
  display: block;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}

.page-template-template-homepage #primary,
#primary.indy-homepage-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-template-template-homepage.ast-plain-container.ast-no-sidebar #primary {
  margin-top: 0;
  margin-bottom: 0;
}

.page-template-template-homepage .site-content,
.site-content:has(#primary.indy-homepage-page) {
  padding-top: 0;
  overflow: visible;
}

/* Keep a section eyebrow + heading on one line at mobile widths, used by
   sections whose heading is short enough to fit comfortably (How It Works,
   Shop by Category). */
@media (max-width: 767px) {
  .indy-homepage-section-head--nowrap .indy-eyebrow,
  .indy-homepage-section-head--nowrap .indy-h2 {
    white-space: nowrap;
  }

  .indy-homepage-section-head--nowrap .indy-h2 {
    max-width: none;
    font-size: 1.4rem;
  }
}

/* ===== Opening Notice ===== */

.indy-homepage-opening-notice {
  position: relative;
  padding: 18px 0;
  background: #071735;
  color: #FFFFFF;
}

.indy-homepage-opening-notice__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--indy-radius-sm);
  box-shadow: 0 18px 48px rgba(7, 23, 53, 0.28);
}

@media (max-width: 767px) {
  .indy-homepage-opening-notice {
    padding: 10px 0;
  }
}

/* ===== Hero ===== */

.indy-homepage-hero {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 560px;
  align-items: stretch;
}

.indy-homepage-hero__media {
  position: relative;
  grid-area: 1 / 1;
  z-index: 0;
  min-height: inherit;
}

.indy-homepage-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.indy-homepage-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.indy-homepage-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--indy-space-5, 1.5rem);
  max-width: 620px;
  padding: var(--indy-space-16, 5rem) 0;
  color: #FFFFFF;
}

.indy-homepage-hero__content .indy-h1 {
  max-width: none;
  color: #FFFFFF;
}

.indy-homepage-hero__content .indy-body {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.86);
}

.indy-homepage-hero .indy-container-wide {
  grid-area: 1 / 1;
  align-self: center;
  position: relative;
  z-index: 1;
}

.indy-homepage-hero-roll-promo {
  position: absolute;
  right: clamp(93px, 7vw, 131px);
  top: 50%;
  z-index: 2;
  display: grid;
  width: min(360px, 25vw);
  min-width: 300px;
  gap: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7, 30, 70, 0.9), rgba(15, 45, 104, 0.72)),
    rgba(7, 30, 70, 0.74);
  box-shadow: 0 22px 48px rgba(3, 16, 41, 0.32);
  color: #FFFFFF;
  padding: 1rem;
  text-decoration: none;
  transform: translate(-35px, -38%);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.indy-homepage-hero-roll-promo:hover,
.indy-homepage-hero-roll-promo:focus-visible {
  border-color: rgba(155, 212, 255, 0.72);
  box-shadow: 0 28px 60px rgba(3, 16, 41, 0.42);
  color: #FFFFFF;
  transform: translate(-35px, -40%);
}

.indy-homepage-hero-roll-promo__signal,
.indy-homepage-hero-roll-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.indy-homepage-hero-roll-promo__signal {
  color: #9BD4FF;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.indy-homepage-hero-roll-promo__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.58);
  animation: indyHeroPromoPulse 1.8s ease-out infinite;
}

.indy-homepage-hero-roll-promo__title {
  color: #FFFFFF;
  font-size: clamp(1.2rem, 1.8vw, 1.58rem);
  font-weight: 900;
  line-height: 1.05;
}

.indy-homepage-hero-roll-promo__copy {
  max-width: 270px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.28;
}

.indy-homepage-hero-roll-promo__motion {
  position: relative;
  display: block;
  overflow: hidden;
  height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(7, 30, 70, 0.08) 0 22px, rgba(7, 30, 70, 0.16) 22px 23px),
    #FFFFFF;
}

.indy-homepage-hero-roll-promo__motion::before,
.indy-homepage-hero-roll-promo__motion::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 42px;
  content: "";
  pointer-events: none;
}

.indy-homepage-hero-roll-promo__motion::before {
  left: 0;
  background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0));
}

.indy-homepage-hero-roll-promo__motion::after {
  right: 0;
  background: linear-gradient(270deg, #FFFFFF, rgba(255, 255, 255, 0));
}

.indy-homepage-hero-roll-promo__track {
  position: absolute;
  inset: 0;
  animation: indyHeroPromoRoll 5.8s linear infinite;
}

.indy-homepage-hero-roll-promo__art {
  position: absolute;
  display: block;
  border-radius: 7px;
  box-shadow: 0 7px 14px rgba(7, 30, 70, 0.14);
}

.indy-homepage-hero-roll-promo__art--one {
  top: 14px;
  left: -2px;
  width: 74px;
  height: 38px;
  background: linear-gradient(135deg, #00AEEF, #173F8A);
}

.indy-homepage-hero-roll-promo__art--two {
  top: 22px;
  left: 92px;
  width: 54px;
  height: 42px;
  background: linear-gradient(135deg, #9BD4FF, #0B8FEF);
}

.indy-homepage-hero-roll-promo__art--three {
  top: 10px;
  left: 168px;
  width: 72px;
  height: 52px;
  background: linear-gradient(135deg, #E8F5FF, #0B8FEF);
}

.indy-homepage-hero-roll-promo__art--four {
  top: 18px;
  left: 264px;
  width: 92px;
  height: 36px;
  background: linear-gradient(135deg, #173F8A, #00AEEF);
}

.indy-homepage-hero-roll-promo__cta {
  width: fit-content;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 850;
}

.indy-homepage-hero-roll-promo__cta .indy-homepage-cta-arrow {
  margin-left: 0;
}

@keyframes indyHeroPromoPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.58);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 230, 118, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
  }
}

@keyframes indyHeroPromoRoll {
  0% {
    transform: translateX(-28px);
  }

  100% {
    transform: translateX(38px);
  }
}

.indy-homepage-trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--indy-space-4);
  margin-top: var(--indy-space-2);
}

.indy-homepage-trust-item {
  display: flex;
  align-items: center;
  gap: var(--indy-space-2);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.2;
}

.indy-homepage-trust-item__icon {
  display: inline-flex;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74) 56%, rgba(233, 238, 247, 0.7)),
    #FFFFFF;
  box-shadow: 0 8px 18px rgba(3, 16, 41, 0.22), inset 0 0 0 1px rgba(15, 45, 104, 0.08);
}

.indy-homepage-trust-item__icon::before {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-image: var(--indy-trust-icon-image);
  mask-image: var(--indy-trust-icon-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  content: "";
}

/* Trust-row icons are tinted to the refreshed IndyDTF blue-led palette. */
.indy-homepage-trust-item__icon--cyan {
  color: #00AEEF;
}

.indy-homepage-trust-item__icon--magenta {
  color: var(--color-primary);
}

.indy-homepage-trust-item__icon--yellow {
  color: var(--color-primary);
}

.indy-homepage-trust-item__icon--black {
  color: var(--color-primary-dark);
}

@media (max-width: 1023px) {
  .indy-homepage-hero {
    min-height: 620px;
  }

  .indy-homepage-hero-roll-promo {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    margin-top: var(--indy-space-4);
    transform: none;
  }

  .indy-homepage-hero-roll-promo:hover,
  .indy-homepage-hero-roll-promo:focus-visible {
    transform: translateY(-2px);
  }
}

@media (max-width: 767px) {
  .indy-homepage-hero {
    min-height: 560px;
  }

  .indy-homepage-hero .indy-container-wide {
    align-self: end;
  }

  .indy-homepage-hero__media img {
    object-position: center;
  }

  .indy-homepage-hero__content {
    max-width: 100%;
    padding: var(--indy-space-5, 1.5rem) var(--indy-space-4, 1rem) var(--indy-space-7, 2rem);
  }

  .indy-homepage-trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .indy-homepage-hero-roll-promo {
    gap: 0.55rem;
    padding: 0.82rem;
  }

  .indy-homepage-hero-roll-promo__title {
    font-size: 1.16rem;
  }

  .indy-homepage-hero-roll-promo__copy {
    max-width: none;
    font-size: 0.8rem;
  }

  .indy-homepage-hero-roll-promo__motion {
    height: 58px;
  }

  .indy-homepage-hero-roll-promo__signal {
    font-size: 0.68rem;
  }

  .indy-homepage-hero-roll-promo__cta {
    font-size: 0.82rem;
  }

  .indy-homepage-hero-roll-promo__dot,
  .indy-homepage-hero-roll-promo__track {
    animation: none;
  }
}

/* ===== How It Works ===== */

.indy-homepage-coupon-banner {
  position: relative;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
}

.indy-homepage-coupon-banner__inner {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: var(--indy-space-7);
  border: 1px solid rgba(13, 31, 73, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 11% 18%, rgba(155, 212, 255, 0.18) 0 15%, transparent 16%),
    radial-gradient(circle at 85% 24%, rgba(98, 194, 255, 0.14) 0 18%, transparent 19%),
    linear-gradient(135deg, #101D44 0%, #182D66 56%, #0E1838 100%);
  box-shadow: 0 26px 60px rgba(5, 25, 58, 0.16);
  color: #FFFFFF;
  padding: clamp(2rem, 4vw, 4.25rem);
}

.indy-homepage-coupon-banner__copy {
  display: grid;
  gap: var(--indy-space-5);
  max-width: 720px;
  z-index: 1;
}

.indy-homepage-coupon-banner__copy .indy-h2,
.indy-homepage-coupon-banner__copy .indy-body {
  color: #FFFFFF;
}

.indy-homepage-coupon-banner__copy .indy-body {
  max-width: 600px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.indy-homepage-coupon-banner__eyebrow {
  width: fit-content;
  margin: 0;
  border: 1px solid rgba(155, 212, 255, 0.34);
  border-radius: 6px;
  background: rgba(155, 212, 255, 0.14);
  color: #B9E2FF;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1;
  padding: 0.5rem 0.74rem;
  text-transform: uppercase;
}

.indy-homepage-coupon-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--indy-space-3);
}

.indy-homepage-coupon-banner__code-card {
  position: relative;
  display: grid;
  min-width: 156px;
  min-height: 70px;
  align-items: center;
  gap: 0.14rem;
  border: 1px dashed rgba(16, 29, 68, 0.24);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(2, 12, 35, 0.18);
  color: #101D44;
  padding: 0.7rem 1.05rem;
}

.indy-homepage-coupon-banner__code-card::before,
.indy-homepage-coupon-banner__code-card::after {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #17295D;
  content: "";
  transform: translateY(-50%);
}

.indy-homepage-coupon-banner__code-card::before {
  left: -8px;
}

.indy-homepage-coupon-banner__code-card::after {
  right: -8px;
}

.indy-homepage-coupon-banner__code-card span {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.indy-homepage-coupon-banner__code-card strong {
  color: #101D44;
  font-size: clamp(1.18rem, 2.1vw, 1.65rem);
  font-weight: 900;
  line-height: 1;
}

.indy-homepage-coupon-banner__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 24px 42px rgba(2, 12, 35, 0.28);
  transform: rotate(1.4deg);
}

.indy-homepage-coupon-banner__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.indy-homepage-coupon-banner__notch {
  position: absolute;
  left: calc(62% - 13px);
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #FFFFFF;
}

.indy-homepage-coupon-banner__notch--top {
  top: -13px;
}

.indy-homepage-coupon-banner__notch--bottom {
  bottom: -13px;
}

@media (max-width: 767px) {
  .indy-homepage-coupon-banner__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--indy-space-5);
    padding: var(--indy-space-5);
  }

  .indy-homepage-coupon-banner__media {
    order: -1;
    border-width: 6px;
    transform: none;
  }

  .indy-homepage-coupon-banner__notch {
    display: none;
  }

  .indy-homepage-coupon-banner__actions {
    align-items: stretch;
  }

  .indy-homepage-coupon-banner__actions .indy-button {
    justify-content: center;
  }
}

.indy-homepage-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--indy-space-6);
}

.indy-homepage-step {
  display: grid;
  justify-items: center;
  gap: var(--indy-space-3);
  text-align: center;
}

.indy-homepage-step__badge {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font: 800 1.05rem/1 var(--indy-font-sans);
}

.indy-homepage-step__label {
  display: grid;
  gap: 2px;
}

@media (max-width: 767px) {
  .indy-homepage-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Shop by Category ===== */

.indy-homepage-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--indy-space-4);
}

.indy-homepage-models-links {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.42rem;
  width: fit-content;
  flex-wrap: wrap;
}

.indy-homepage-models-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  min-height: 34px;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(15, 45, 104, 0.14);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(5, 25, 58, 0.08);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.indy-homepage-models-link:hover,
.indy-homepage-models-link:focus-visible {
  border-color: rgba(0, 174, 239, 0.34);
  box-shadow: 0 12px 24px rgba(5, 25, 58, 0.13);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.indy-homepage-models-link svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}

.indy-homepage-models-link--facebook svg path {
  /* Center the visible glyph within the shared icon's 24px viewBox. */
  transform: translate(-0.45px, -1.3px);
}

.indy-homepage-models-tagline {
  margin: 0.5rem 0 0;
  color: rgba(15, 31, 73, 0.72);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
  max-width: 520px;
}

.indy-homepage-category-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--indy-color-border);
  border-radius: var(--indy-radius-md);
  box-shadow: var(--indy-shadow-sm);
  text-decoration: none;
  transform: translateZ(0);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.indy-homepage-category-card:hover,
.indy-homepage-category-card:focus-visible {
  box-shadow: 0 18px 38px rgba(5, 25, 58, 0.18);
  transform: translateY(-4px);
}

.indy-homepage-category-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.indy-homepage-category-card:hover .indy-homepage-category-card__image,
.indy-homepage-category-card:focus-visible .indy-homepage-category-card__image {
  transform: scale(1.045);
}

.indy-homepage-category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 45, 104, 0) 42%, rgba(15, 45, 104, 0.85) 100%);
}

.indy-homepage-category-card__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: var(--indy-space-3);
  color: #FFFFFF;
}

.indy-homepage-category-card__name {
  font-size: 0.92rem;
  font-weight: 800;
}

.indy-homepage-category-card__link {
  color: var(--color-secondary);
  font-size: 0.76rem;
  font-weight: 750;
}

@media (max-width: 1023px) {
  .indy-homepage-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .indy-section__head:has(> .indy-homepage-models-links) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .indy-homepage-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .indy-homepage-models-link {
    justify-self: start;
    min-height: 32px;
    padding-inline: 0.62rem;
    font-size: 0.74rem;
  }

  .indy-homepage-models-tagline {
    max-width: none;
    margin-top: 0.46rem;
    font-size: 0.78rem;
  }

  .indy-homepage-models-links {
    justify-content: flex-start;
  }

  .indy-homepage-category-card--bulk-orders {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }
}

/* ===== Gang Sheet + Studio Preview ===== */

.indy-homepage-gang-sheet-preview .indy-grid--2,
.indy-homepage-studio-preview .indy-grid--2 {
  align-items: center;
}

.indy-homepage-gang-sheet-preview__copy,
.indy-homepage-studio-preview__copy {
  align-content: center;
  align-self: center;
  gap: var(--indy-space-5);
}

.indy-homepage-gang-sheet-preview__copy .indy-body,
.indy-homepage-studio-preview__copy .indy-body {
  max-width: 720px;
}

.indy-homepage-gang-sheet-preview__image,
.indy-homepage-studio-preview__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--indy-radius-lg);
  box-shadow: var(--indy-shadow-lg);
  transition:
    box-shadow 240ms ease,
    transform 240ms ease;
}

.indy-homepage-gang-sheet-preview__image:hover,
.indy-homepage-studio-preview__image:hover {
  box-shadow: 0 28px 60px rgba(5, 25, 58, 0.16);
  transform: translateY(-4px);
}

.indy-homepage-gang-sheet-preview__image {
  max-height: 560px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .indy-homepage-gang-sheet-preview__image {
    max-height: 460px;
  }
}

/* ===== Weekend Rolling Gang Sheet ===== */

.indy-homepage-weekend-roll {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
}

.indy-homepage-weekend-roll__panel {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 360px;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
  align-items: center;
  gap: var(--indy-space-8);
  border: 1px solid rgba(7, 30, 70, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7, 30, 70, 0.98), rgba(15, 45, 104, 0.94)),
    var(--color-primary-dark);
  box-shadow: 0 24px 60px rgba(5, 25, 58, 0.16);
  color: #FFFFFF;
  isolation: isolate;
  padding: var(--indy-space-8);
}

.indy-homepage-weekend-roll__panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.08) 12% 12.4%, transparent 12.4% 24%),
    linear-gradient(135deg, rgba(11, 143, 239, 0.16), transparent 34%, rgba(155, 212, 255, 0.14) 72%, rgba(232, 245, 255, 0.16));
  background-size: 180px 100%, 100% 100%;
  content: "";
  opacity: 0.88;
}

.indy-homepage-weekend-roll__copy {
  display: grid;
  gap: var(--indy-space-4);
  max-width: 610px;
}

.indy-homepage-weekend-roll__copy .indy-h2,
.indy-homepage-weekend-roll__copy .indy-body {
  color: #FFFFFF;
}

.indy-homepage-weekend-roll__copy .indy-body {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.82);
}

.indy-homepage-weekend-roll__eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--radius-pill);
  background: rgba(232, 245, 255, 0.16);
  color: #B9E2FF;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  padding: 0.48rem 0.72rem;
  text-transform: uppercase;
}

.indy-homepage-weekend-roll__list {
  display: grid;
  gap: var(--indy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.indy-homepage-weekend-roll__list li {
  display: flex;
  align-items: center;
  gap: var(--indy-space-2);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 750;
}

.indy-homepage-weekend-roll__list .indy-icon-glyph {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #00AEEF;
}

.indy-homepage-weekend-roll__list .indy-icon-glyph svg {
  width: 18px;
  height: 18px;
}

.indy-homepage-weekend-roll__list .indy-icon-glyph path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.indy-homepage-weekend-roll__note {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
  font-weight: 800;
}

.indy-homepage-weekend-roll__visual {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 260px;
}

.indy-homepage-weekend-roll__ruler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--indy-space-2);
  margin: 0 0 var(--indy-space-3);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
}

.indy-homepage-weekend-roll__ruler span {
  position: relative;
  padding-top: 12px;
}

.indy-homepage-weekend-roll__ruler span::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 9px;
  background: rgba(255, 255, 255, 0.42);
  content: "";
}

.indy-homepage-weekend-roll__sheet {
  position: relative;
  overflow: hidden;
  min-height: 182px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(7, 30, 70, 0.05) 0 24px, rgba(7, 30, 70, 0.1) 24px 25px),
    #FFFFFF;
  box-shadow: 0 22px 46px rgba(3, 16, 41, 0.28);
}

.indy-homepage-weekend-roll__sheet::before,
.indy-homepage-weekend-roll__sheet::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 62px;
  content: "";
  pointer-events: none;
}

.indy-homepage-weekend-roll__sheet::before {
  left: 0;
  background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0));
}

.indy-homepage-weekend-roll__sheet::after {
  right: 0;
  background: linear-gradient(270deg, #FFFFFF, rgba(255, 255, 255, 0));
}

.indy-homepage-weekend-roll__art {
  position: absolute;
  display: block;
  border-radius: 8px;
  animation: indyWeekendRollDrift 8s linear infinite;
  box-shadow: 0 10px 20px rgba(7, 30, 70, 0.14);
}

.indy-homepage-weekend-roll__art--one {
  top: 22px;
  left: 22px;
  width: 104px;
  height: 64px;
  background: linear-gradient(135deg, #00AEEF, #173F8A);
}

.indy-homepage-weekend-roll__art--two {
  top: 98px;
  left: 72px;
  width: 78px;
  height: 56px;
  background: linear-gradient(135deg, #9BD4FF, #0B8FEF);
  animation-delay: -1.4s;
}

.indy-homepage-weekend-roll__art--three {
  top: 32px;
  left: 174px;
  width: 88px;
  height: 104px;
  background: linear-gradient(135deg, #E8F5FF, #0B8FEF);
  animation-delay: -2.2s;
}

.indy-homepage-weekend-roll__art--four {
  top: 28px;
  left: 304px;
  width: 132px;
  height: 58px;
  background: linear-gradient(135deg, #FFFFFF, #DCE6F7);
  animation-delay: -3s;
}

.indy-homepage-weekend-roll__art--five {
  top: 104px;
  left: 354px;
  width: 94px;
  height: 50px;
  background: linear-gradient(135deg, #173F8A, #00AEEF);
  animation-delay: -4.1s;
}

.indy-homepage-weekend-roll__price {
  position: absolute;
  right: var(--indy-space-4);
  bottom: var(--indy-space-4);
  z-index: 3;
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(7, 30, 70, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 28px rgba(7, 30, 70, 0.16);
  color: var(--color-primary-dark);
  padding: 0.72rem 0.9rem;
}

.indy-homepage-weekend-roll__price span {
  color: var(--color-secondary);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.indy-homepage-weekend-roll__price strong {
  font-size: 0.92rem;
  line-height: 1.1;
}

@keyframes indyWeekendRollDrift {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(34px);
  }
}

@media (max-width: 1023px) {
  .indy-homepage-weekend-roll__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .indy-homepage-weekend-roll__copy {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .indy-homepage-weekend-roll__panel {
    gap: var(--indy-space-6);
    padding: var(--indy-space-5);
  }

  .indy-homepage-weekend-roll__visual {
    min-height: 230px;
  }

  .indy-homepage-weekend-roll__sheet {
    min-height: 164px;
  }

  .indy-homepage-weekend-roll__price {
    position: relative;
    right: auto;
    bottom: auto;
    width: fit-content;
    margin-top: var(--indy-space-3);
  }
}

/* ===== Featured Products ===== */

.indy-homepage-featured-products .indy-section__head {
  display: block;
}

.indy-homepage-featured-products .indy-section__copy {
  max-width: 720px;
}

.indy-homepage-featured-products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--indy-space-6);
  margin-bottom: var(--indy-space-8);
}

.indy-homepage-featured-products__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--indy-space-2);
  border-radius: var(--radius-pill);
  background: rgba(11, 143, 239, 0.12);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.7rem;
  text-transform: uppercase;
}

.indy-homepage-featured-products__link {
  display: inline-flex;
  align-items: center;
  gap: var(--indy-space-2);
  border: 1px solid rgba(7, 30, 70, 0.14);
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  color: var(--color-primary-dark);
  font-weight: 800;
  padding: 0.75rem 1rem;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(5, 25, 58, 0.08);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
  white-space: nowrap;
}

.indy-homepage-featured-products__link:hover {
  border-color: rgba(11, 143, 239, 0.32);
  box-shadow: 0 18px 36px rgba(5, 25, 58, 0.12);
  transform: translateY(-2px);
}

.indy-homepage-featured-products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--indy-space-5);
}

.indy-homepage-featured-card {
  --featured-card-curve: 1.4rem;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(7, 30, 70, 0.13);
  border-radius: var(--featured-card-curve);
  background: #E9EEF7;
  box-shadow: 0 18px 42px rgba(5, 25, 58, 0.08);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.indy-homepage-featured-card:hover {
  border-color: rgba(11, 143, 239, 0.24);
  box-shadow: 0 28px 58px rgba(5, 25, 58, 0.13);
  transform: translateY(-4px);
}

.indy-homepage-featured-card__top {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 52px;
  isolation: isolate;
  background: #E9EEF7;
}

.indy-homepage-featured-card__price {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--indy-space-2);
  min-width: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  padding: 0.72rem 1rem;
}

.indy-homepage-featured-card__price::after {
  content: none;
}

.indy-homepage-featured-card__price strong {
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 900;
}

.indy-homepage-featured-card__price .woocommerce-Price-amount {
  color: inherit;
}

.indy-homepage-featured-card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0.34rem;
  border-top-right-radius: var(--featured-card-curve);
  border-bottom-left-radius: 2.1rem;
  background: #FFFFFF;
  margin-left: 0;
  padding: 0.38rem 0.7rem 0.5rem 0.82rem;
}

.indy-homepage-featured-card__actions::before {
  content: none;
}

.indy-homepage-featured-card__action--favorite,
.indy-homepage-featured-card__action--favorite .tinv-wraper,
.indy-homepage-featured-card__action--favorite .tinvwl-after-add-to-cart,
.indy-homepage-featured-card__action--favorite .tinv-wishlist {
  display: inline-grid !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.indy-homepage-featured-card__action,
.indy-homepage-featured-card__action a,
.indy-homepage-featured-card__action .tinvwl_add_to_wishlist_button {
  box-sizing: border-box !important;
  display: inline-grid !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  place-items: center;
  border: 3px solid #9BD4FF;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: none !important;
  color: var(--color-primary-dark);
  line-height: 1;
  margin: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  position: static !important;
  vertical-align: top !important;
  text-decoration: none;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.indy-homepage-featured-card__action--cart {
  background: #9BD4FF;
}

.indy-homepage-featured-card__action--favorite {
  border: 0;
  background: transparent;
}

.indy-homepage-featured-card__action--favorite .tinvwl_add_to_wishlist_button,
.indy-homepage-featured-card__action--favorite a {
  font-size: 0 !important;
  overflow: hidden !important;
  text-indent: 0 !important;
}

.indy-homepage-featured-card__action svg,
.indy-homepage-featured-card__action--favorite svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

/* Icon-only design: hide every text/tooltip span inside the button (the
   card only ever shows the heart icon). Do NOT list tinvwl-product-in-list
   here -- ti-woocommerce-wishlist/assets/js/public.js adds that class
   directly onto the <a> button itself once a product is actually saved, so
   ".indy-homepage-featured-card__action--favorite .tinvwl-product-in-list"
   was unintentionally matching (and hiding) the whole button in that state.
   That was the root cause of the "all-white circle, no heart" bug after
   clicking -- the button wasn't losing its icon, it was being hidden. */
.indy-homepage-featured-card__action--favorite .tinvwl_add_to_wishlist_button span,
.indy-homepage-featured-card__action--favorite a span,
.indy-homepage-featured-card__action--favorite .tinvwl-tooltip,
.indy-homepage-featured-card__action--favorite .tinvwl_already_on_wishlist-text {
  display: none !important;
}

/* !important on content/width/height/background/mask: the wishlist plugin
   ships its own icon-font ::before rule for this same element
   (.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart:before
   in ti-woocommerce-wishlist/assets/css/public.css) with a forced
   !important font-family, and can win the content declaration on load
   order/specificity alone -- !important here guarantees our own SVG heart
   renders instead, regardless of that plugin CSS. */
.indy-homepage-featured-card__action--favorite .tinvwl_add_to_wishlist_button::before,
.indy-homepage-featured-card__action--favorite a::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background: currentColor !important;
  transform: none !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20.8 8.7c0 5.3-8.8 10.2-8.8 10.2S3.2 14 3.2 8.7a4.4 4.4 0 0 1 7.7-2.9L12 7l1.1-1.2a4.4 4.4 0 0 1 7.7 2.9Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.indy-homepage-featured-card__action:hover,
.indy-homepage-featured-card__action a:hover,
.indy-homepage-featured-card__action .tinvwl_add_to_wishlist_button:hover {
  border-color: #9BD4FF;
  background: var(--color-primary-dark);
  color: #FFFFFF;
  box-shadow: none !important;
  transform: none;
}

/* Driven by both our own optimistic click class (indydtf-wishlist-is-active,
   toggled immediately on click by indydtf-header-search.js) and the
   wishlist plugin's own synced state class (tinvwl-product-in-list, set by
   ti-woocommerce-wishlist/assets/js/public.js), so the button looks right
   whether it was just clicked or the product was already saved on page
   load. !important guards against the plugin's own default styling for
   this same state. */
.indy-homepage-featured-card__action--favorite .tinvwl_add_to_wishlist_button.indydtf-wishlist-is-active,
.indy-homepage-featured-card__action--favorite .tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.indy-homepage-featured-card__action--favorite a.indydtf-wishlist-is-active,
.indy-homepage-featured-card__action--favorite a.tinvwl-product-in-list {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

/* !important below: the wishlist plugin's own icon-font ::before rule for
   this exact state (.tinv-wishlist .tinvwl_add_to_wishlist_button
   .tinvwl-icon-heart.tinvwl-product-in-list:before in
   ti-woocommerce-wishlist/assets/css/public.css) has higher selector
   specificity than this rule and a forced !important font-family, so
   without !important here the plugin's own icon glyph can win the cascade
   and render blank (nothing guarantees its icon font is loaded on this
   page) -- leaving a bare circle with no visible heart. This is the second
   half of the "all-white circle after clicking" fix (see the display:none
   comment above for the first half). */
.indy-homepage-featured-card__action--favorite .tinvwl_add_to_wishlist_button.indydtf-wishlist-is-active::before,
.indy-homepage-featured-card__action--favorite .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before,
.indy-homepage-featured-card__action--favorite a.indydtf-wishlist-is-active::before,
.indy-homepage-featured-card__action--favorite a.tinvwl-product-in-list::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background: currentColor !important;
  transform: none !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 21.1 10.55 19.78C5.4 15.1 2 12.02 2 8.25 2 5.17 4.42 2.75 7.5 2.75c1.74 0 3.41.81 4.5 2.08a5.93 5.93 0 0 1 4.5-2.08c3.08 0 5.5 2.42 5.5 5.5 0 3.77-3.4 6.85-8.55 11.54L12 21.1Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.indy-homepage-featured-card__media {
  display: grid;
  min-height: 235px;
  place-items: center;
  margin: 0 var(--indy-space-3);
  border: 7px solid #E9EEF7;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 56%, rgba(233, 238, 247, 0.72)),
    #FFFFFF;
  overflow: hidden;
  padding: calc(var(--indy-space-4) - 2px);
}

.indy-homepage-featured-card__image {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: contain;
  transition: transform 260ms ease;
}

.indy-homepage-featured-card:hover .indy-homepage-featured-card__image {
  transform: scale(1.035);
}

.indy-homepage-featured-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--indy-space-4);
}

.indy-homepage-featured-card__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 850;
  line-height: 1.2;
}

.indy-homepage-featured-card__title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: inherit;
  text-decoration: none;
}

.indy-homepage-featured-card__button {
  display: none;
}

/* .indy-grid--4 is a shared design-system class; scope this override to
   the homepage only so nothing else on the site is affected. */
@media (max-width: 1023px) {
  .indy-homepage-featured-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .indy-homepage-page .indy-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .indy-homepage-featured-products__head {
    display: grid;
    gap: var(--indy-space-4);
  }

  .indy-homepage-featured-products .indy-section__head,
  .indy-homepage-featured-products .indy-section__copy,
  .indy-homepage-featured-products .indy-body {
    width: 100%;
    max-width: none;
  }

  .indy-homepage-featured-products .indy-h2 {
    max-width: none;
  }

  .indy-homepage-featured-products__link {
    justify-content: center;
    width: 100%;
  }

  .indy-homepage-featured-products__grid {
    gap: var(--indy-space-4);
  }

  .indy-homepage-featured-card {
    --featured-card-curve: 1rem;
  }

  .indy-homepage-featured-card__top {
    min-height: 46px;
  }

  .indy-homepage-featured-card__price {
    gap: 0.25rem;
    padding: 0.58rem 0.7rem;
  }

  .indy-homepage-featured-card__price span {
    display: none;
  }

  .indy-homepage-featured-card__price strong {
    font-size: 0.92rem;
  }

  .indy-homepage-featured-card__actions {
    gap: 0.25rem;
    padding: 0.42rem 0.5rem;
  }

  .indy-homepage-featured-card__action--favorite,
  .indy-homepage-featured-card__action--favorite .tinv-wraper,
  .indy-homepage-featured-card__action--favorite .tinvwl-after-add-to-cart,
  .indy-homepage-featured-card__action--favorite .tinv-wishlist,
  .indy-homepage-featured-card__action,
  .indy-homepage-featured-card__action a,
  .indy-homepage-featured-card__action .tinvwl_add_to_wishlist_button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-width: 2px;
  }

  .indy-homepage-featured-card__media {
    min-height: 170px;
    margin-inline: var(--indy-space-2);
    padding: var(--indy-space-3);
  }

  .indy-homepage-featured-card__image {
    height: 150px;
  }

  .indy-homepage-featured-card__body {
    gap: var(--indy-space-2);
    padding: var(--indy-space-3);
  }

  .indy-homepage-featured-card__button {
    display: none;
  }
}

@media (max-width: 420px) {
  .indy-homepage-featured-card__title {
    font-size: 0.95rem;
  }

}

/* ===== Bulk Orders Banner ===== */

.indy-homepage-bulk-banner {
  background: var(--color-primary-dark);
}

.indy-homepage-bulk-banner__inner {
  display: grid;
  min-height: 420px;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.indy-homepage-bulk-banner__copy {
  display: grid;
  align-content: center;
  gap: var(--indy-space-4);
  padding: var(--indy-space-12) var(--indy-space-8);
  color: #FFFFFF;
}

.indy-homepage-bulk-banner__copy .indy-h2 {
  color: #FFFFFF;
}

.indy-homepage-bulk-banner__copy .indy-body {
  max-width: none;
  color: rgba(255, 255, 255, 0.82);
}

.indy-homepage-bulk-banner__list {
  display: grid;
  gap: var(--indy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.indy-homepage-bulk-banner__list li {
  display: flex;
  align-items: center;
  gap: var(--indy-space-2);
  font-weight: 700;
}

.indy-homepage-bulk-banner__list .indy-icon-glyph {
  flex-shrink: 0;
  color: var(--color-secondary);
}

.indy-homepage-bulk-banner__list .indy-icon-glyph svg {
  width: 1em;
  height: 1em;
}

.indy-homepage-bulk-banner__list .indy-icon-glyph path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.indy-homepage-bulk-banner__media {
  position: relative;
  overflow: hidden;
}

.indy-homepage-bulk-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.indy-homepage-bulk-banner:hover .indy-homepage-bulk-banner__media img {
  transform: scale(1.025);
}

@media (min-width: 1024px) {
  .indy-homepage-bulk-banner__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(420px, 44vw) minmax(0, 1fr);
  }

  .indy-homepage-bulk-banner__copy {
    padding-left: max(var(--indy-space-8), calc((100vw - var(--site-wide-width)) / 2 + var(--indy-space-8)));
  }
}

@media (max-width: 1023px) {
  .indy-homepage-bulk-banner__inner {
    grid-template-columns: minmax(0, 1fr);
    /* Desktop lays copy/media out side by side (a single grid row), so this
       row-gap is invisible there; below 1024px the two stack into separate
       rows and previously had zero space between them -- the feature badge
       list sat flush against the image. */
    row-gap: var(--indy-space-8);
  }

  .indy-homepage-bulk-banner__media {
    min-height: 280px;
  }
}

@media (max-width: 767px) {
  .indy-homepage-bulk-banner__copy {
    padding: var(--indy-space-8) var(--indy-space-5);
  }

  .indy-homepage-bulk-banner__inner {
    row-gap: var(--indy-space-6);
  }
}

/* ===== Popular Brands ===== */

.indy-homepage-brand-strip {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.indy-homepage-brand-strip__head {
  margin-bottom: var(--indy-space-6);
  color: #FFFFFF;
  text-align: center;
}

.indy-homepage-brand-strip__head .indy-h3 {
  color: #FFFFFF;
}

.indy-homepage-brand-strip__head .indy-small {
  color: rgba(255, 255, 255, 0.72);
}

.indy-homepage-brand-strip__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--indy-space-5) var(--indy-space-6);
}

.indy-homepage-brand-strip__logo {
  display: flex;
  min-width: 116px;
  height: 60px;
  align-items: center;
  justify-content: center;
  padding: var(--indy-space-2) var(--indy-space-4);
  border-radius: var(--indy-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-primary-dark);
  box-shadow: 0 12px 24px rgba(3, 16, 41, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.indy-homepage-brand-strip__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 30px;
  filter: brightness(0) invert(1);
  opacity: 0.94;
  object-fit: contain;
}

.indy-homepage-brand-strip__logo:hover,
.indy-homepage-brand-strip__logo:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 34px rgba(3, 14, 32, 0.24);
  outline: none;
  transform: translateY(-3px);
}

.indy-homepage-brand-strip__logo:active {
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .indy-homepage-brand-strip__grid {
    gap: var(--indy-space-3) var(--indy-space-4);
  }

  .indy-homepage-brand-strip__logo {
    min-width: 96px;
    height: 52px;
  }

  .indy-homepage-brand-strip__logo img {
    max-height: 24px;
  }
}

/* ===== Google Reviews ===== */

.indy-homepage-google-reviews {
  background:
    radial-gradient(circle at 12% 8%, rgba(76, 141, 245, 0.14), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
}

.indy-homepage-google-reviews__panel {
  display: grid;
  gap: var(--indy-space-6);
  padding: var(--indy-space-6);
  border: 1px solid rgba(111, 132, 162, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 52px rgba(10, 26, 52, 0.08);
}

.indy-homepage-google-reviews__intro {
  min-width: 0;
}

.indy-homepage-google-reviews__intro .indy-h2 {
  max-width: 780px;
  margin-top: var(--indy-space-2);
}

.indy-homepage-google-reviews__intro .indy-body {
  max-width: 720px;
  margin-top: var(--indy-space-3);
}

.indy-homepage-google-reviews__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--indy-space-3);
  margin-top: var(--indy-space-5);
}

.indy-homepage-google-reviews__secondary,
.indy-homepage-google-review-card__link {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
}

.indy-homepage-google-reviews__secondary:hover,
.indy-homepage-google-reviews__secondary:focus-visible,
.indy-homepage-google-review-card__link:hover,
.indy-homepage-google-review-card__link:focus-visible {
  text-decoration: underline;
}

.indy-homepage-google-reviews__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--indy-space-4);
  min-width: 0;
}

.indy-homepage-google-reviews__rating-card,
.indy-homepage-google-reviews__qr,
.indy-homepage-google-review-card {
  border: 1px solid rgba(111, 132, 162, 0.2);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(10, 26, 52, 0.07);
}

.indy-homepage-google-reviews__rating-card {
  display: grid;
  gap: var(--indy-space-2);
  align-content: center;
  min-height: 190px;
  padding: var(--indy-space-5);
}

.indy-homepage-google-reviews__google-mark {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #34a853 48%, #fbbc05 68%, #ea4335);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 850;
}

.indy-homepage-google-reviews__rating-card strong {
  color: var(--indy-color-ink);
  font-size: clamp(1.55rem, 4vw, 2.45rem);
  line-height: 1;
}

.indy-homepage-google-reviews__stars,
.indy-homepage-google-review-card__stars {
  color: #f5a400;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.indy-homepage-google-reviews__rating-card small {
  color: var(--indy-color-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.indy-homepage-google-reviews__qr {
  display: grid;
  justify-items: center;
  gap: var(--indy-space-3);
  padding: var(--indy-space-4);
  color: var(--indy-color-ink);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.indy-homepage-google-reviews__qr img {
  display: block;
  width: min(168px, 100%);
  height: auto;
  border-radius: 6px;
}

.indy-homepage-google-reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--indy-space-4);
  margin-top: var(--indy-space-5);
}

.indy-homepage-google-review-card {
  display: grid;
  gap: var(--indy-space-3);
  min-width: 0;
  padding: var(--indy-space-5);
}

.indy-homepage-google-review-card__head {
  display: flex;
  align-items: center;
  gap: var(--indy-space-3);
  min-width: 0;
}

.indy-homepage-google-review-card__head img,
.indy-homepage-google-review-card__head > span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f1ff;
  color: var(--color-primary);
  font-weight: 850;
  object-fit: cover;
}

.indy-homepage-google-review-card__head div {
  min-width: 0;
}

.indy-homepage-google-review-card__head strong,
.indy-homepage-google-review-card__head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indy-homepage-google-review-card__head strong {
  color: var(--indy-color-ink);
  font-size: 0.96rem;
}

.indy-homepage-google-review-card__head small {
  color: var(--indy-color-muted);
  font-size: 0.82rem;
}

.indy-homepage-google-review-card__stars,
.indy-homepage-google-review-card__text {
  margin: 0;
}

.indy-homepage-google-review-card__text {
  color: var(--indy-color-muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

.indy-homepage-google-reviews__setup-note {
  margin: var(--indy-space-4) 0 0;
  padding: var(--indy-space-3) var(--indy-space-4);
  border: 1px dashed rgba(36, 91, 171, 0.42);
  border-radius: 8px;
  background: rgba(232, 241, 255, 0.68);
  color: var(--indy-color-muted);
  font-size: 0.9rem;
}

@media (min-width: 544px) {
  .indy-homepage-google-reviews__summary {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 0.55fr);
  }

  .indy-homepage-google-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 922px) {
  .indy-homepage-google-reviews__panel {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    align-items: center;
    padding: var(--indy-space-8);
  }

  .indy-homepage-google-reviews__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 543px) {
  .indy-homepage-google-reviews__panel {
    padding: var(--indy-space-5);
  }

  .indy-homepage-google-reviews__actions,
  .indy-homepage-google-reviews__actions .indy-button,
  .indy-homepage-google-reviews__secondary {
    width: 100%;
  }

  .indy-homepage-google-reviews__actions .indy-button {
    justify-content: center;
  }
}

/* ===== Bulk Quote Form ===== */

.indy-homepage-bulk-quote-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--indy-space-2);
  line-height: 1.2;
}

.indy-homepage-bulk-quote-badge__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  line-height: 0;
  vertical-align: middle;
}

.indy-homepage-bulk-quote-badge__icon svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.indy-homepage-bulk-quote-badge__icon path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.indy-homepage-bulk-quote-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--indy-radius-lg);
  box-shadow: var(--indy-shadow-md);
  transition: transform 260ms ease;
}

.indy-homepage-bulk-quote-media:hover {
  transform: translateY(-4px);
}

/* Base spacing between the badge row (Bulk discounts / Fast turnaround /
   Artwork support) and the photo below it. This is the only place that
   spacing was missing: previously there was no margin here at all outside
   the max-width:767px block further down, so on desktop/tablet the badge
   row sat flush against .indy-homepage-bulk-quote-media. The 767px rule
   below still wins on mobile (same selector, declared later in the
   cascade) and is left as-is. */
.indy-homepage-bulk-quote-copy > .indy-row {
  margin-bottom: var(--indy-space-8);
}

/* Desktop only: let the copy column stretch to match the form card's
   height (grid rows already stretch children by default), then let the
   photo grow to fill whatever space is left under the heading/copy/badges,
   instead of rendering at its full natural (often much taller) size. */
@media (min-width: 768px) {
  .indy-homepage-bulk-quote-copy {
    display: flex;
    flex-direction: column;
  }

  .indy-homepage-bulk-quote-media {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.indy-homepage-upload-box {
  position: relative;
  display: grid;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.indy-homepage-upload-box.is-dragover {
  border-color: var(--color-primary);
  background: rgba(23, 63, 138, 0.08);
}

.indy-homepage-upload-box.has-file {
  border-style: solid;
  border-color: var(--indy-color-success);
  background: rgba(22, 138, 74, 0.06);
}

.indy-homepage-upload-box__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.indy-homepage-upload-box__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--indy-space-2);
  margin-top: var(--indy-space-2);
}

.indy-homepage-upload-box__chip {
  border-radius: var(--indy-radius-pill);
  background: var(--indy-color-subtle);
  padding: 2px 10px;
  color: var(--color-primary-dark);
  font-size: 0.72rem;
  font-weight: 800;
}

.indy-homepage-upload-box__filename {
  margin-top: var(--indy-space-2);
  color: var(--indy-color-success);
  font-size: 0.84rem;
  font-weight: 750;
}

.indy-homepage-bulk-quote-status {
  border: 1px solid var(--indy-color-border);
  border-radius: var(--indy-radius-sm);
  padding: var(--indy-space-3) var(--indy-space-4);
  font-size: var(--indy-text-sm);
  font-weight: 700;
}

.indy-homepage-bulk-quote-status[data-status="pending"] {
  background: var(--indy-color-surface-muted);
  color: var(--indy-color-text-muted);
}

.indy-homepage-bulk-quote-status[data-status="success"] {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

.indy-homepage-bulk-quote-status[data-status="error"] {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b42318;
}

@media (max-width: 767px) {
  .indy-homepage-bulk-quote-copy > .indy-row {
    margin-bottom: var(--indy-space-4);
  }

  .indy-homepage-bulk-quote-media {
    max-height: 320px;
    object-fit: cover;
  }
}

/* The old inline quick-quote form fields/upload dropzone that used to fill
   the right column (.indy-homepage-upload-box*, .indy-homepage-bulk-quote-
   status*, above) are no longer rendered on the homepage - the markup was
   replaced with the Bulk Order Portal CTA panel below. Those rules are left
   in place (harmless, unused) rather than removed, since inc/indydtf-bulk-
   quote.php - the handler they supported - is intentionally kept for now. */

/* ===== Bulk Order Portal CTA panel ===== */

.indy-homepage-bulk-portal {
  display: flex;
}

.indy-homepage-bulk-portal .indy-card__body {
  gap: var(--indy-space-5);
}

.indy-homepage-bulk-portal__intro .indy-h3 {
  margin-top: var(--indy-space-2);
}

.indy-homepage-bulk-portal__intro .indy-body {
  margin-top: var(--indy-space-2);
}

.indy-homepage-bulk-portal__steps {
  display: grid;
  gap: var(--indy-space-3);
  margin: 0;
  padding: var(--indy-space-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--indy-color-border);
}

.indy-homepage-bulk-portal__step {
  display: flex;
  align-items: center;
  gap: var(--indy-space-3);
}

.indy-homepage-bulk-portal__step-badge {
  display: inline-flex;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font: 800 0.82rem/1 var(--indy-font-sans);
}

.indy-homepage-bulk-portal__step-text {
  color: var(--indy-color-ink);
  font-size: 0.92rem;
  font-weight: 650;
}

.indy-homepage-bulk-portal__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--indy-space-3) var(--indy-space-4);
  margin: 0;
  padding: var(--indy-space-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--indy-color-border);
}

.indy-homepage-bulk-portal__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--indy-space-2);
  color: var(--indy-color-muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.indy-homepage-bulk-portal__features .indy-icon-glyph {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
}

.indy-homepage-bulk-portal__features .indy-icon-glyph svg {
  display: block;
  width: 16px;
  height: 16px;
}

.indy-homepage-bulk-portal__features .indy-icon-glyph path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.indy-homepage-bulk-portal__actions {
  display: grid;
  gap: var(--indy-space-3);
  justify-items: center;
  padding: var(--indy-space-5) 0 0;
  border-top: 1px solid var(--indy-color-border);
}

.indy-homepage-bulk-portal__cta {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
}

.indy-homepage-bulk-portal__secondary {
  color: var(--color-primary);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.indy-homepage-bulk-portal__secondary:hover,
.indy-homepage-bulk-portal__secondary:focus-visible {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .indy-homepage-bulk-portal__features {
    grid-template-columns: minmax(0, 1fr);
  }
}

.indy-homepage-page .indy-product-card {
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.indy-homepage-page .indy-product-card:hover {
  border-color: rgba(15, 45, 104, 0.24);
  box-shadow: 0 18px 36px rgba(5, 25, 58, 0.14);
  transform: translateY(-4px);
}

.indy-homepage-page .indy-product-card__image {
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.indy-homepage-page .indy-product-card:hover .indy-product-card__image {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .indy-homepage-page *,
  .indy-homepage-page *::before,
  .indy-homepage-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-homepage-animate] {
    opacity: 1;
    transform: none;
  }
}