/* Transitional support for the current homepage markup. Remove as image markup is migrated in later phases. */
.news-image.image-one {
 background: center / cover url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=800&q=80');
 
}

.news-image.image-two {
 background: center / cover url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=800&q=80');
 
}

body.menu-is-open {
 overflow: hidden;

}

/* Homepage Hero accent — the emphasized line uses Source Sans 3 italic.
   Scoped to this heading only via the #home id so no other <em> on this page
   or sitewide is affected. font-family is set explicitly so the rule remains
   self-contained if --font-display changes in the future. */
#home h1 em{
font-family:var(--font-sans);
font-style:italic;
font-weight:600
}

/* Homepage Hero — full-bleed stock photo composition. Scoped to .hero-photo
   (index.html only) so the shared split-column .hero rules in layout.css/
   pages.css remain untouched for any future reuse. */
.hero-photo{
display:flex
}
.hero-photo .hero-visual{
position:absolute;
inset:0;
margin-left:0;
clip-path:none
}
.hero-photo .hero-image{
filter:none;
object-position:72% center
}
.hero-photo .hero-scrim{
position:absolute;
inset:0;
background:linear-gradient(100deg,rgba(9,28,28,.92) 0%,rgba(9,28,28,.82) 40%,rgba(9,28,28,.48) 62%,rgba(9,28,28,.18) 82%),radial-gradient(ellipse at 0% 50%,rgba(9,28,28,.35),rgba(9,28,28,0) 70%)
}
.hero-photo .image-tag{
left:auto;
right:4.5vw;
bottom:80px
}
@media(max-width:780px){
.hero-photo .hero-visual{
height:auto;
margin-left:0
}
.hero-photo .hero-scrim{
background:linear-gradient(180deg,rgba(15,47,47,.5) 0%,rgba(15,47,47,.82) 60%,rgba(15,47,47,.94) 100%)
}
.hero-photo .image-tag{
left:6vw;
right:6vw;
bottom:20px
}
}

/* Homepage — category photo cards. Reuses .product-card as its base (layout,
   radius, hover pattern) and adds only the essential rules for a top image +
   body, per docs/ARCHITECTURE.md component-reuse guidance. */
.category-photo-card{
padding:0;
justify-content:flex-start;
background:#fff;
border:1px solid var(--color-teal)
}
.category-photo-card-media{
position:relative;
height:170px;
overflow:hidden
}
.category-photo-card-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform var(--transition)
}
.category-photo-card:hover .category-photo-card-media img,
.category-photo-card:focus-visible .category-photo-card-media img{
transform:scale(1.05)
}
.category-photo-card-body{
position:relative;
flex:1;
padding:22px 22px 50px
}
.category-photo-card-body h3{
font-size:20px
}
.category-photo-card:hover,
.category-photo-card:focus-visible{
border-color:var(--color-teal-dark)
}
.category-photo-card .card-arrow{
color:var(--color-primary)
}