/* Home page only */

.home-hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: stretch;
  margin-top: 8px;
}

@media (max-width: 900px){
  .home-hero{ grid-template-columns: 1fr; }
}

.home-hero__content{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  overflow:hidden;
  position:relative;
}

.home-hero__content:before{
  content:"";
  position:absolute;
  inset:-80px -60px auto auto;
  width: 220px;
  height: 220px;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,107,79,.25), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(199,164,107,.25), transparent 55%);
  transform: rotate(12deg);
  pointer-events:none;
}

.home-kicker{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,79,.18);
  background: rgba(47,107,79,.08);
  color: rgba(31,42,36,.92);
  font-weight: 800;
  font-size: .86rem;
  margin-bottom: 12px;
}

.home-title{
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: .2px;
}

.home-subtitle{
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 70ch;
}

.home-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.home-points{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 520px){
  .home-points{ grid-template-columns: 1fr; }
}

.home-point{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.65);
}
.home-point strong{
  display:block;
  font-size: .95rem;
  margin-bottom: 4px;
}
.home-point span{
  color: var(--muted);
  font-size: .9rem;
}

/* Right hero media */
.home-hero__media{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}

.home-hero__mediaInner{
  position:relative;
  height: 100%;
  min-height: 360px;
  background:
    radial-gradient(circle at 20% 0%, rgba(47,107,79,.18), transparent 60%),
    radial-gradient(circle at 100% 30%, rgba(199,164,107,.18), transparent 60%),
    rgba(255,255,255,.55);
  display:grid;
  place-items:center;
}

.home-hero__badge{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  color: rgba(31,42,36,.90);
}

.home-hero__placeholder{
  text-align:center;
  padding: 18px;
  max-width: 44ch;
}
.home-hero__placeholderTitle{
  font-weight: 900;
  letter-spacing:.2px;
}
.home-hero__placeholderText{
  color: var(--muted);
  font-size: .92rem;
  margin-top: 6px;
}

/* Section heads */
.home-section{ margin-top: 22px; }

.home-section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin: 26px 0 12px;
}

.home-h2{
  margin:0;
  font-size: 1.25rem;
  letter-spacing: .2px;
}
.home-h2sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size:.95rem;
}

/* Category cards */
.home-cats{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.home-catCard{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-catCard:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(47,107,79,.18);
}

.home-catCard__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}
.home-catCard__title{
  margin: 0;
  font-size: 1.05rem;
  letter-spacing:.15px;
}
.home-catCard__meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: .92rem;
}

.home-pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 850;
  border: 1px solid rgba(199,164,107,.35);
  background: rgba(199,164,107,.18);
  color: rgba(31,42,36,.90);
  white-space: nowrap;
}

/* Featured product tweaks */
.home-badge{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 850;
  border: 1px solid rgba(199,164,107,.35);
  background: rgba(199,164,107,.18);
  color: rgba(31,42,36,.90);
  white-space: nowrap;
}

/* Featured product tweaks */
.home-badge{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  color: rgba(31,42,36,.90);
}

.home-imgFallback{
  height: 200px;
  display:grid;
  place-items:center;
  color: rgba(31,42,36,.45);
}

.home-mutedSmall{
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.home-priceRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 6px;
}

.home-stock{
  font-size: .9rem;
  color: var(--muted);
}
.home-stock--in{
  color: rgba(47,107,79,.95);
  font-weight: 800;
}
.home-stock--out{
  color: rgba(180,35,24,.95);
  font-weight: 800;
}

.home-cardActions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  margin-top: 12px;
}
.home-hero__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 420px;           /* ← control size here */
  border-radius: 18px;
  overflow: hidden;
}

.home-hero__mediaInner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* <- key change */
  object-position: center;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), rgba(0,0,0,.55));
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.20),
    rgba(0,0,0,0.45)
  );
}

.home-hero__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__video { display: none; }
  .home-hero__media {
    background: url("/static/store/images/hero-poster.jpg") center/cover no-repeat;
  }
}
@media (max-width: 768px) {
  .home-hero__media {
    height: 280px;
  }
}