/* =============================================================
   335D — FEATURED VENDORS SWAG + PHONE QUOTE REBALANCE
   Presentation only. Uses existing two-key artwork; no new imagery.
   ============================================================= */

/* Let the phone quote card fill the center-column gap again instead of being
   forced into the very short 334D landscape strip. */
@media(max-width:650px){
  body.home-300d .d300-center-column{
    grid-template-rows:auto auto minmax(0,1fr)!important;
  }
  body.home-300d .d312-inspiration-card{
    min-height:150px!important;
    height:100%!important;
    aspect-ratio:4/5!important;
    align-self:stretch!important;
  }
  body.home-300d .d312-inspiration-card blockquote{
    width:92%!important;
    padding:7px 5px!important;
    font-size:.66rem!important;
    line-height:1.16!important;
  }
}
@media(max-width:390px){
  body.home-300d .d312-inspiration-card blockquote{
    font-size:.62rem!important;
    line-height:1.14!important;
  }
}

/* Featured Vendors: the real flyer art gets the prime space. */
body.home-300d #featured-vendors.d335-featured{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  padding:9px 10px!important;
  background:
    radial-gradient(circle at 20% 35%,rgba(101,72,103,.18),transparent 34%),
    radial-gradient(circle at 82% 62%,rgba(86,112,100,.16),transparent 36%),
    linear-gradient(145deg,rgba(16,14,20,.985),rgba(24,27,29,.975))!important;
  box-shadow:
    inset 0 0 34px rgba(117,81,109,.08),
    inset 0 0 54px rgba(76,104,91,.06),
    0 10px 28px rgba(0,0,0,.16)!important;
}

/* Three faint TWO-key groups = six ornate keys, all from the existing asset. */
body.home-300d #featured-vendors.d335-featured::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    url('two-key-divider-312d.webp'),
    url('two-key-divider-312d.webp'),
    url('two-key-divider-312d.webp');
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:82px auto,68px auto,92px auto;
  background-position:6% 18%,50% 91%,94% 30%;
  opacity:.065;
  filter:saturate(.72) contrast(.92);
}
body.home-300d #featured-vendors.d335-featured::after{
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(189,145,105,.10);
  border-radius:11px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.42);
}
body.home-300d #featured-vendors.d335-featured>*{
  position:relative;
  z-index:1;
}
body.home-300d #featured-vendors .d335-feature-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
body.home-300d #featured-vendors .d335-feature-center{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  gap:9px!important;
  text-align:center!important;
}
body.home-300d #featured-vendors .d300-random-heading{
  margin:0!important;
  width:100%!important;
}
body.home-300d #featured-vendors .d300-random-heading h2{
  margin:0!important;
  font-size:1.12rem!important;
  line-height:1!important;
}
body.home-300d #featured-vendors .d302-spotlight-wink{
  display:block!important;
  margin-top:5px!important;
  font-size:.52rem!important;
  line-height:1.15!important;
}
body.home-300d #featured-vendors .d300-random-slot{
  min-height:230px!important;
  height:100%!important;
  padding:6px 7px!important;
  gap:3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  background:rgba(13,12,16,.68)!important;
  box-shadow:inset 0 0 22px rgba(96,67,92,.06)!important;
}
body.home-300d #featured-vendors .d300-random-art{
  width:min(96%,184px)!important;
  max-height:218px!important;
  margin:0 auto 2px!important;
  flex:1 1 auto!important;
}
body.home-300d #featured-vendors .d300-random-label{
  font-size:.45rem!important;
  margin:0!important;
}
body.home-300d #featured-vendors .d300-random-slot>strong{
  font-size:.84rem!important;
  line-height:1.03!important;
}
body.home-300d #featured-vendors .d300-random-slot>small{
  font-size:.52rem!important;
  line-height:1.04!important;
  margin:0!important;
}
body.home-300d #featured-vendors .d304-key-divider.d312-key-divider{
  width:66px!important;
  height:90px!important;
  margin:0!important;
}
body.home-300d #featured-vendors .d304-key-divider.d312-key-divider img{
  height:86px!important;
  max-width:64px!important;
}

@media(max-width:850px){
  body.home-300d #featured-vendors .d335-feature-grid{
    grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr)!important;
    gap:5px!important;
  }
  body.home-300d #featured-vendors .d300-random-slot{min-height:188px!important;padding:5px!important}
  body.home-300d #featured-vendors .d300-random-art{width:min(97%,126px)!important;max-height:160px!important}
  body.home-300d #featured-vendors .d300-random-heading h2{font-size:.78rem!important}
  body.home-300d #featured-vendors .d302-spotlight-wink{font-size:.35rem!important}
}

@media(max-width:650px){
  body.home-300d #featured-vendors.d335-featured{
    padding:5px!important;
  }
  /* Keep phone decorative treatment quiet: one faint key group + glow. */
  body.home-300d #featured-vendors.d335-featured::before{
    background-image:url('two-key-divider-312d.webp');
    background-size:56px auto;
    background-position:50% 85%;
    opacity:.04;
  }
  body.home-300d #featured-vendors .d335-feature-grid{
    grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)!important;
    gap:4px!important;
  }
  body.home-300d #featured-vendors .d335-feature-center{gap:5px!important}
  body.home-300d #featured-vendors .d300-random-heading h2{
    font-size:.62rem!important;
    line-height:1!important;
  }
  body.home-300d #featured-vendors .d302-spotlight-wink{
    margin-top:3px!important;
    font-size:.27rem!important;
    line-height:1.08!important;
  }
  body.home-300d #featured-vendors .d300-random-slot{
    min-height:176px!important;
    padding:4px 3px!important;
    gap:1px!important;
    border-radius:7px!important;
  }
  body.home-300d #featured-vendors .d300-random-art{
    width:min(98%,106px)!important;
    max-height:148px!important;
    margin:1px auto!important;
  }
  body.home-300d #featured-vendors .d300-random-label{font-size:.28rem!important}
  body.home-300d #featured-vendors .d300-random-slot>strong{font-size:.52rem!important;line-height:1.02!important}
  body.home-300d #featured-vendors .d300-random-slot>small{font-size:.28rem!important;line-height:1.02!important}
  body.home-300d #featured-vendors .d304-key-divider.d312-key-divider{width:44px!important;height:61px!important}
  body.home-300d #featured-vendors .d304-key-divider.d312-key-divider img{height:58px!important;max-width:42px!important}
}