/* vop-r55-approved
   Approved previews: desktop still is half the row and matches product-grid height;
   Home Decor and Hardware flip to the right. Mobile still is full width, then 2x2.
   Mobile hero copy stays left-aligned under the image, with a short gap before collections.
   No new type size. Palette A only. Unpublished theme 4825. */
.template-home .vop-hero .f-slide__subtitle,
.template-home .vop-hero .f-slide__title,
.template-home .vop-hero .f-slide__description,
.template-home .vop-hero .f-slide__button,
.template-home .vop-hero .f-slide__content {
  opacity: 1 !important;
  visibility: visible !important;
}
@media (min-width: 1024px) {
  .template-home .vop-tone-grid .f-mixed-layout__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 0.5fr) !important;
    grid-template-areas:
      "still p1 p2"
      "still p3 p4" !important;
    gap: 18px 16px !important;
    align-items: stretch !important;
  }
  .template-home .vop-tone-flip .f-mixed-layout__inner {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "p1 p2 still"
      "p3 p4 still" !important;
  }
  .template-home .vop-tone-grid .vop-tone-still {
    position: relative !important;
    grid-area: still !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 100% !important;
  }
  .template-home .vop-tone-flip .vop-tone-still {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
  }
  .template-home .vop-tone-grid .m\:column:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  .template-home .vop-tone-grid .m\:column:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
  .template-home .vop-tone-grid .m\:column:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; }
  .template-home .vop-tone-grid .m\:column:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
  .template-home .vop-tone-flip .m\:column:nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; }
  .template-home .vop-tone-flip .m\:column:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; }
  .template-home .vop-tone-flip .m\:column:nth-child(4) { grid-column: 1 !important; grid-row: 2 !important; }
  .template-home .vop-tone-flip .m\:column:nth-child(5) { grid-column: 2 !important; grid-row: 2 !important; }
  .template-home .vop-tone-grid .vop-tone-still__link {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
  }
}
@media (max-width: 1023px) {
  .template-home .vop-tone-grid .f-mixed-layout__inner,
  .template-home .vop-tone-flip .f-mixed-layout__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "still still"
      "p1 p2"
      "p3 p4" !important;
    gap: 20px 12px !important;
  }
  .template-home .vop-tone-grid .vop-tone-still,
  .template-home .vop-tone-flip .vop-tone-still {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  .template-home .vop-tone-grid .vop-tone-still__link,
  .template-home .vop-tone-flip .vop-tone-still__link {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}
@media (max-width: 767px) {
  .template-home .vop-hero {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .template-home .vop-hero .f-slide__wrapper {
    position: static !important;
    height: auto !important;
    padding: 20px 20px 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .template-home .vop-hero .f-slide__content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .template-home .vop-hero .f-slide__subtitle,
  .template-home .vop-hero .f-slide__title,
  .template-home .vop-hero .f-slide__description,
  .template-home .vop-hero .f-slide__button {
    text-align: left !important;
  }
  .template-home .vop-hero .f-slide__subtitle {
    color: #6E5642 !important;
    margin: 0 0 10px !important;
  }
  .template-home .vop-hero .f-slide__title {
    max-width: 8.2em !important;
    color: #3C332C !important;
    margin: 0 !important;
  }
  .template-home .vop-hero .f-richtext__button,
  .template-home .vop-hero .f-slide__button {
    justify-content: flex-start !important;
    margin-top: 18px !important;
  }
  .template-home .vop-category-index .f-collection-list__container {
    margin-top: 0 !important;
    padding-top: 28px !important;
  }
}