/* ============================================================================
   W2SLCARD_V1 — ShopLink card polish (constructor).  [rev6 — theme-aware]
   - DARK theme  -> card dark #323232 (address-block tone). This beats w2dark's
     `html.w2-dark .w2-sitefooter{cream}` (0,2,1) because the card element is
     <footer class="w2-sitefooter w2sf-shoplink ...">; our (0,3,1) wins.
   - LIGHT theme -> card stays its native white .w2sf-light (no override).
   - SIZE synced on BOTH themes (unscoped): drop the +6px side margin (a touch
     wider on web) + gentle mobile bleed so the gutter matches the footer bubble.
   - black swatch gold outline + gold Back pill (unchanged).
   The card recolor is done here in CSS (not by editing w2sitefooter.js) so the
   native light/dark card variants stay intact.
   ========================================================================== */

/* --- DARK theme only: card -> #323232 --- */
html.w2-dark .w2-sitefooter.w2sf-shoplink{
  background:#323232 !important;
  color:#e8e8ea !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.28) !important;
}
/* LIGHT theme: .w2sf-shoplink.w2sf-light keeps its native #ffffff — intentionally
   NOT overridden here. */

/* --- SIZE: IDENTICAL on both themes. w2theme.js toggles `html.w2-dark`; light
   theme = html without it. No theme scoping here + explicit .w2sf-light coverage
   + `html ` prefix (0,2,1 / 0,3,1) so it beats the native .w2sf-shoplink margin
   (0,1,0) in BOTH themes. This is the fix: rev5's size rule was html.w2-dark-only,
   so light theme kept the narrower native margin. --- */
html .w2-sitefooter.w2sf-shoplink,
html .w2-sitefooter.w2sf-shoplink.w2sf-light{
  margin-left:-16px !important;
  margin-right:-16px !important;
}
@media (max-width:560px){
  html .w2-sitefooter.w2sf-shoplink,
  html .w2-sitefooter.w2sf-shoplink.w2sf-light{
    margin-left:-16px !important;
    margin-right:-16px !important;
  }
}

/* --- black swatch gold outline when unselected --- */
.clr-row > .clr:nth-child(2):not(.sel){
  box-shadow:0 0 0 1.5px var(--gold,#d4aa27) !important;
}

/* --- Back/exit pill -> constructor gold --- */
.w2-foot-back{
  background:linear-gradient(180deg,#e3bd4e 0%,#d4aa27 56%,#b58e18 100%) !important;
  box-shadow:0 2px 0 rgba(150,110,20,.55),
             0 8px 18px rgba(212,170,39,.30),
             inset 0 1px 0 rgba(255,255,255,.5) !important;
}