.dc-featured-banner, .dc-featured-banner *{ box-sizing:border-box; }
.dc-featured-banner{ font-family:'Bricolage Grotesque','Inter',sans-serif; }
.dc-featured-banner a{ color:inherit; text-decoration:none; }
.dc-featured-banner .container{ max-width:1280px; margin:0 auto; padding:0 40px; }
.dc-featured-banner .shop-featured{ padding:40px 0 0; }
.dc-featured-banner .featured-card-wrap{ position:relative; }
.dc-featured-banner .featured-card{ display:flex; background:#FFFEFB; border-radius:20px; overflow:hidden; height:auto; }

/* Slider (2+ tags resolved to real products) — every slide stacks on top
   of the others and crossfades; a single-slide banner (manual mode, or
   dynamic mode with only one matching product) never loads this at all
   since .has-slider is only added when there's more than one slide. */
.dc-featured-banner.has-slider .featured-track{ position:relative; height:auto; }
.dc-featured-banner.has-slider .featured-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .45s ease; pointer-events:none; }
.dc-featured-banner.has-slider .featured-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

/* The fixed card height (Style → Card → "Card Height") is a DESKTOP-ONLY
   thing — it only exists so the photo column and the text column can line
   up side-by-side at a specific height. Below 981px the card always
   stacks (photo on top, text below — see the max-width:980px block below),
   so forcing that same fixed height there too used to clip the bottom of
   the card: the description, price and "Add to Cart" button could render
   partly or fully outside the card's own box and disappear from view, and
   a tall/square product photo would get squeezed into too short a space.
   The Elementor control itself only ever sets the --dc-banner-height
   custom property (see class-dc-featured-banner-widget.php); it's READ
   only inside this desktop-only media query (placed after the rules
   above on purpose, so it wins the cascade at these widths), so the
   control has no effect at all below 981px no matter what it's set to —
   the card is always auto-height there instead. */
@media (min-width:981px){
  .dc-featured-banner .featured-card{ height:var(--dc-banner-height,440px); }
  .dc-featured-banner.has-slider .featured-track{ height:var(--dc-banner-height,440px); }
}

.dc-featured-banner .featured-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; background:#FFFEFB; color:#0F0F0F;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.12); transition: background .2s ease;
}
.dc-featured-banner .featured-nav:hover{ background:#F2EDE4; }
.dc-featured-banner .featured-nav--prev{ left:16px; }
.dc-featured-banner .featured-nav--next{ right:16px; }
.dc-featured-banner .featured-dots{ position:absolute; z-index:2; left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:8px; }
.dc-featured-banner .featured-dot{ width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.5); transition: background .2s ease, transform .2s ease; }
.dc-featured-banner .featured-dot.is-active{ background:#C99E43; transform:scale(1.25); }
.dc-featured-banner .featured-media{ flex:0 0 51.5%; height:100%; }
.dc-featured-banner .featured-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.dc-featured-banner .featured-content{ flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:56px 60px; }
.dc-featured-banner .featured-eyebrow{ color:#C99E43; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px; }
.dc-featured-banner .featured-content h2{ font-size:36px; font-weight:500; margin:0 0 16px; line-height:1.2; color:#0F0F0F; }
.dc-featured-banner .featured-desc{ color:rgba(43,43,43,.6); font-size:16px; line-height:1.5; max-width:480px; margin:0; }
.dc-featured-banner .featured-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:30px; gap:20px; flex-wrap:wrap; }
.dc-featured-banner .featured-price{ font-family:'Playfair Display',Georgia,serif; font-size:32px; font-weight:500; letter-spacing:.01em; margin:0; color:#0F0F0F; }
.dc-featured-banner .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; font-size:16px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; transition: all .2s ease; cursor:pointer; }
.dc-featured-banner .btn-gold{ background:#C99E43; color:#FFFEFB; border-radius:0; }
.dc-featured-banner .btn-gold:hover{ background:#B08A38; }

@media (max-width:980px){
  .dc-featured-banner .container{ padding:0 24px; }
  .dc-featured-banner .featured-card{ flex-direction:column; height:auto; }
  .dc-featured-banner .featured-media{ flex-basis:auto; height:300px; }
  .dc-featured-banner .featured-content{ padding:36px; }
  .dc-featured-banner .featured-content h2{ font-size:28px; }

  /* Below this width, absolute-stacked crossfade slides make the card's
     own auto height collapse to 0 (every slide is out of flow). Switch to
     a simple show/hide swap instead, sized by whichever slide is active. */
  .dc-featured-banner.has-slider .featured-track{ height:auto; }
  .dc-featured-banner.has-slider .featured-slide{ position:static; inset:auto; opacity:1; visibility:visible; display:none; transition:none; }
  .dc-featured-banner.has-slider .featured-slide.is-active{ display:flex; }
}
@media (max-width:720px){
  .dc-featured-banner .shop-featured{ padding-top:24px; }
  .dc-featured-banner .featured-card{ border-radius:10px; }
  .dc-featured-banner .featured-media{ height:220px; }
  .dc-featured-banner .featured-content{ padding:24px; }
  .dc-featured-banner .featured-content h2{ font-size:22px; }
  .dc-featured-banner .featured-bottom{ flex-direction:column; align-items:flex-start; gap:16px; }
  .dc-featured-banner .featured-price{ font-size:26px; }
}