/* Hassock Wood homepage restorative overrides.
   Kept separate from site.css so later homepage fixes cannot roll back shared site styling. */

/* Requested darker accent on the homepage light-red copy. */
.home-door-retail-hero h1 span:not(.hero-white-line){color:#d31820!important}
.performance-home .eyebrow{color:#d31820!important}
.performance-home .eyebrow::before{background:#d31820!important}
.performance-home-link strong{color:#d31820!important}

/* Restore the approved compact factory gallery on phones. */
@media (max-width:600px){
  .factory-home{padding:42px 0!important}
  .factory-home-grid{grid-template-columns:1fr!important;gap:30px!important}
  .factory-home-gallery{width:100%!important;max-width:none!important;min-width:0!important;overflow:hidden!important}

  .factory-gallery-stage{
    position:relative!important;
    width:100%!important;
    aspect-ratio:16/10!important;
    height:auto!important;
    min-height:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:0 12px 28px rgba(20,20,20,.10)!important;
  }
  .factory-gallery-stage>img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .factory-gallery-stage .factory-badge{display:none!important}

  .factory-gallery-controls{
    position:absolute!important;
    top:auto!important;
    right:10px!important;
    bottom:10px!important;
    left:auto!important;
    display:flex!important;
    align-items:center!important;
    padding:5px!important;
    gap:5px!important;
    border-radius:999px!important;
    background:rgba(17,17,17,.82)!important;
    color:#fff!important;
    z-index:4!important;
  }
  .factory-gallery-controls button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    padding:0!important;
    font-size:1.25rem!important;
  }
  .factory-gallery-controls span{min-width:44px!important;font-size:.7rem!important}

  .factory-gallery-thumbs{
    display:flex!important;
    grid-template-columns:none!important;
    grid-auto-flow:unset!important;
    grid-auto-columns:unset!important;
    width:100%!important;
    gap:8px!important;
    margin-top:9px!important;
    padding:2px 2px 5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .factory-gallery-thumbs::-webkit-scrollbar{display:none!important}
  .factory-gallery-thumb{
    display:block!important;
    flex:0 0 78px!important;
    width:78px!important;
    min-width:78px!important;
    height:58px!important;
    min-height:58px!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    border-radius:8px!important;
    overflow:hidden!important;
    scroll-snap-align:start!important;
    opacity:.68!important;
    box-shadow:none!important;
  }
  .factory-gallery-thumb.is-active{opacity:1!important;box-shadow:0 0 0 2px #d31820!important}
  .factory-gallery-thumb img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
  }
  .factory-gallery-caption{margin-top:5px!important;font-size:.76rem!important;line-height:1.3!important}
}


/* Mobile only: place the factory gallery at the end of the manufacturing section. */
@media (max-width:600px){
  .factory-home-grid{
    display:flex!important;
    flex-direction:column!important;
  }
  .factory-home-grid > .factory-home-gallery{
    order:2!important;
  }
  .factory-home-grid > div:not(.factory-home-gallery){
    order:1!important;
  }
}


/* Homepage paired carousel headings + separation */
.home-shop-promos-head{
  margin-bottom:16px!important;
}

.home-shop-promos-head > div:first-child{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}

.home-shop-promos-head > div:first-child > small{
  color:#d31820!important;
  font-size:.78rem!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
}

.home-shop-promos-head > div:first-child > strong{
  display:block!important;
  color:#10233f!important;
  font-size:1.42rem!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
}

/* The Non-Fire carousel now follows the Fire carousel directly.
   Give the pair a clear visual break without changing the cards. */
.home-fire-promos + .home-shop-promos{
  position:relative!important;
  margin-top:28px!important;
  padding-top:34px!important;
  border-top:3px solid #10233f!important;
}

@media (max-width:700px){
  .home-shop-promos-head{
    margin-bottom:13px!important;
  }

  .home-shop-promos-head > div:first-child{
    gap:4px!important;
  }

  .home-shop-promos-head > div:first-child > small{
    font-size:.7rem!important;
    letter-spacing:.11em!important;
  }

  .home-shop-promos-head > div:first-child > strong{
    font-size:1.2rem!important;
    line-height:1.1!important;
  }

  .home-fire-promos + .home-shop-promos{
    margin-top:20px!important;
    padding-top:25px!important;
    border-top-width:2px!important;
  }
}


/* Carousel section headers: tabbed navy bars */
.home-fire-promos + .home-shop-promos{
  border-top:0!important;
  margin-top:30px!important;
  padding-top:0!important;
}

.home-shop-promos-head{
  min-height:52px!important;
  margin-bottom:14px!important;
  padding:8px 10px 8px 16px!important;
  background:#10233f!important;
  border:1px solid rgba(16,35,63,.18)!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  box-shadow:none!important;
}

.home-shop-promos-head > div:first-child{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  gap:0!important;
}

.home-shop-promos-head > div:first-child > small,
.home-shop-promos-head > div:first-child > strong{
  display:none!important;
}

.home-shop-promos-head > div:first-child::before{
  display:block;
  color:#fff!important;
  font-size:1.08rem!important;
  line-height:1.15!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  white-space:nowrap;
}

.home-fire-promos .home-shop-promos-head > div:first-child::before{
  content:"FIRE DOOR COLLECTION";
}

section[aria-label="Featured non-fire door collections"] .home-shop-promos-head > div:first-child::before{
  content:"MADE TO MEASURE DOOR COLLECTION";
}

.home-shop-promos-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex:0 0 auto!important;
}

.home-shop-promos-actions .home-shop-arrow{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:#fff!important;
  color:#10233f!important;
  box-shadow:none!important;
}

.home-shop-promos-actions a{
  color:#fff!important;
  font-size:.82rem!important;
  line-height:1!important;
  font-weight:800!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
  white-space:nowrap!important;
  margin-left:4px!important;
}

@media (max-width:700px){
  .home-fire-promos + .home-shop-promos{
    margin-top:22px!important;
  }

  .home-shop-promos-head{
    min-height:48px!important;
    padding:7px 8px 7px 12px!important;
    border-radius:10px!important;
    gap:8px!important;
  }

  .home-shop-promos-head > div:first-child::before{
    font-size:.9rem!important;
  }

  .home-shop-promos-actions{
    gap:5px!important;
  }

  .home-shop-promos-actions .home-shop-arrow{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
  }

  .home-shop-promos-actions a{
    font-size:.68rem!important;
    margin-left:2px!important;
  }
}

@media (max-width:480px){
  .home-shop-promos-head{
    align-items:center!important;
  }

  .home-shop-promos-head > div:first-child::before{
    font-size:.82rem!important;
    white-space:normal!important;
  }

  .home-shop-promos-actions a{
    max-width:86px!important;
    white-space:normal!important;
    text-align:right!important;
    line-height:1.15!important;
  }
}


/* Refine carousel tab bars to match the site's slimmer info-strip proportions. */
.home-shop-promos-head{
  min-height:38px!important;
  padding:5px 8px 5px 12px!important;
  border-radius:9px!important;
  margin-bottom:12px!important;
}

.home-shop-promos-head > div:first-child::before{
  font-size:.84rem!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:0!important;
}

.home-shop-promos-actions{
  gap:5px!important;
}

.home-shop-promos-actions .home-shop-arrow{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  font-size:.8rem!important;
}

.home-shop-promos-actions a{
  font-size:.67rem!important;
  line-height:1!important;
  margin-left:3px!important;
}

@media (max-width:700px){
  .home-shop-promos-head{
    min-height:36px!important;
    padding:4px 6px 4px 10px!important;
    border-radius:8px!important;
    margin-bottom:10px!important;
  }

  .home-shop-promos-head > div:first-child::before{
    font-size:.76rem!important;
  }

  .home-shop-promos-actions .home-shop-arrow{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    font-size:.75rem!important;
  }

  .home-shop-promos-actions a{
    font-size:.62rem!important;
  }
}


/* Remove the redundant route-choice section from the homepage. */
.home-route-section{
  display:none!important;
}

/* Rebrand the former black performance section to the Hassock Wood navy palette. */
.performance-home{
  background:#10233f!important;
  color:#fff!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
}

.performance-home .section-head h2{
  color:#fff!important;
}

.performance-home .section-head p{
  color:rgba(255,255,255,.74)!important;
}

.performance-home .eyebrow{
  color:#d31820!important;
}

.performance-home .eyebrow::before{
  background:#d31820!important;
}

.performance-home-grid{
  gap:14px!important;
}

.performance-home-link{
  background:#172d4a!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.12)!important;
  color:#fff!important;
}

.performance-home-link:hover{
  background:#1b3557!important;
  border-color:rgba(255,255,255,.25)!important;
  transform:translateY(-2px)!important;
}

.performance-home-link strong{
  color:#d31820!important;
}

.performance-home-link span{
  color:rgba(255,255,255,.78)!important;
}

@media (max-width:700px){
  .performance-home{
    padding-top:52px!important;
    padding-bottom:52px!important;
  }

  .performance-home-grid{
    gap:10px!important;
  }

  .performance-home-link{
    background:#172d4a!important;
  }
}


/* Homepage factory section: replace the old multi-image gallery with one static factory image. */
.factory-home-gallery .factory-gallery-controls,
.factory-home-gallery .factory-gallery-thumbs,
.factory-home-gallery .factory-gallery-caption,
.factory-home-gallery .factory-badge{
  display:none!important;
}

.factory-home-gallery .factory-gallery-stage{
  position:relative!important;
  overflow:hidden!important;
  border-radius:18px!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  height:auto!important;
  background:#ece9e4!important;
}

.factory-home-gallery .factory-gallery-stage > img[data-factory-gallery-main]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:18px!important;
}

@media(max-width:700px){
  .factory-home-gallery .factory-gallery-stage{
    aspect-ratio:16/9!important;
    border-radius:14px!important;
  }

  .factory-home-gallery .factory-gallery-stage > img[data-factory-gallery-main]{
    aspect-ratio:16/9!important;
    object-position:center center!important;
    border-radius:14px!important;
  }
}