/*
 * Footer redesign (components/layout/Footer.tsx) — newsletter band, dark
 * 4-column link grid, bottom bar. Scoped under .sw-footer / .sw-footer-bottom.
 *
 * footer1.css (loaded in the root <head>) and footer3.css (loaded by the
 * homepage itself, further down in the DOM — see HOME3_STYLESHEETS in
 * app/(storefront)/page.tsx) both carry their own colors/backgrounds for
 * these same elements at selector depths up to 5 classes deep
 * (`.footer-container .footer-mid .newsletter .news-letter .email input`),
 * which beats this file's selectors on specificity regardless of <link>
 * order. `!important` on just the visual properties being fought over
 * (background/color/border/radius) is the pragmatic fix rather than trying
 * to out-specify five-class-deep vendor rules everywhere.
 */

/* Newsletter band (footer-mid) — light, pill input + button, social icons
   right. Inherits the sitewide --sw-primary (theme.css, logo navy). */
.sw-footer .footer-mid {
  background: #f7f7f8 !important;
  padding: 48px 0;
}
.sw-footer .newsletter .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.sw-footer .news-letter-text {
  flex: 0 0 auto;
  max-width: 420px;
}
.sw-footer .news-letter {
  /* flex-shrink so the form (not the title or the icons) is the part that
     gives up width first. At typical desktop container widths the title
     (~420px) + form (~460px) + icons (~290px) add up to more than the
     container, and flex-wrap: wrap used to drop .share-icon onto a hidden
     second line that read as "the newsletter title/form vanished". A
     min-width keeps the input usable instead of shrinking to nothing. */
  flex: 1 1 200px;
  /* The input + button inside have their own intrinsic minimum content
     widths (a text input's UA-default minimum plus the button's padded
     "Subscribe" label) that add up to ~290px — below that the pill's
     overflow: hidden clips the button label instead of the form shrinking
     further, so the floor has to be at least that wide. */
  min-width: 300px;
}

/* Below this, the three columns can't all fit on one line even with the
   form fully shrunk — switch to the stacked mobile layout instead of
   letting .share-icon wrap onto a line of its own. */
@media (min-width: 1200px) {
  .sw-footer .newsletter .row {
    flex-wrap: nowrap;
  }
}
.sw-footer h3.modtitle3 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a !important;
  margin: 0 0 6px;
  text-align: left;
  white-space: nowrap;
}
.sw-footer-newsletter-subtitle {
  font-size: 13.5px;
  color: #888;
  margin: 0;
}
.sw-footer .news-letter form.email {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 460px;
  width: 100%;
  margin-left: auto;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e2e2;
  overflow: hidden;
}
.sw-footer .news-letter .subcribe {
  /* Never let the button be the thing that gives up space — it holds a
     fixed "Subscribe" label, so shrinking it just clips the text against
     the pill's overflow: hidden edge. */
  flex-shrink: 0;
}
.sw-footer .news-letter input.form-control {
  flex: 1;
  /* A text input's automatic flex min-width is its intrinsic ~192px
     default size, not its actual content — without this override it
     refuses to shrink past that, pushing the button (see .subcribe above)
     out of the pill and getting it clipped instead. */
  min-width: 0;
  height: 52px !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 22px !important;
  font-size: 14px;
}
.sw-footer .news-letter input.form-control:focus {
  outline: none;
}
.sw-footer .news-letter .subcribe .btn {
  height: 52px !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0 30px !important;
  margin: -1px -1px -1px 0;
  background: var(--sw-primary) !important;
  border-color: var(--sw-primary) !important;
  color: #fff !important;
  font-weight: 600;
  text-transform: none !important;
}
.sw-footer .news-letter .subcribe .btn:hover {
  background: var(--sw-primary-hover) !important;
  border-color: var(--sw-primary-hover) !important;
}
.sw-footer .share-icon {
  flex: 0 0 auto;
}
.sw-footer .share-icon ul {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sw-footer .share-icon li a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #555 !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.15s ease;
}
.sw-footer .share-icon li a:hover {
  color: var(--sw-primary) !important;
  transform: translateY(-2px);
}
.sw-footer .share-icon li.facebook a {
  color: #fff !important;
  background: var(--sw-primary) !important;
}
.sw-footer .share-icon li.facebook a:hover {
  background: var(--sw-primary-hover) !important;
  color: #fff !important;
}

/* Dark link grid (footer-top) */
.sw-footer .footer-top {
  background: #171717 !important;
  color: #b8b8b8;
  padding: 56px 0 40px;
}
.sw-footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
}
/* Bootstrap's `.row::before/::after { content: ""; display: table }` clearfix
   hack generates real boxes — under `display: grid` those become actual
   anonymous grid items (an empty one before the first real child, one after
   the last), shifting every real item one track to the right and pushing
   the last one onto a second row. Killing the generated content stops them
   from being boxes at all. */
.sw-footer-grid::before,
.sw-footer-grid::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 900px) {
  .sw-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .sw-footer-grid {
    grid-template-columns: 1fr;
  }
}
/* footer3.css/footer1.css give these a float-based `width: 20%/40%` (of
   their *old* float layout's containing block) — under the grid above that
   percentage resolves against the grid track instead, shrinking each block
   down to a sliver in the corner of its cell. They should just fill the cell. */
.sw-footer-grid > div {
  width: 100% !important;
  float: none !important;
}
/* Same float/width leak one level deeper: footer3.css's `.collapsed-block
   { width: 40%; float: left }` still applies to the address block nested
   inside .sw-footer-brand (the rule above only covers direct children of
   the grid, not this grandchild) — floating it left inside a narrow grid
   column left just enough width beside it for the logo link (still
   `display: inline` by default) to flow up next to the address text
   instead of stacking above it. */
.sw-footer-brand .collapsed-block {
  float: none !important;
  width: 100% !important;
}
.sw-footer-brand .sw-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sw-footer-brand .sw-footer-logo img {
  height: 84px;
  width: auto;
}
.sw-footer-brand-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.sw-footer-tagline {
  font-size: 13.5px;
  color: #999;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 260px;
}
.sw-footer .footer-top .modtitle {
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  text-transform: none !important;
  margin-bottom: 16px;
}
.sw-footer .footer-top ul.menu,
.sw-footer .footer-top ul.contact-address {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sw-footer .footer-top ul.menu li,
.sw-footer .footer-top ul.contact-address li {
  margin-bottom: 10px;
  font-size: 14px;
}
.sw-footer .footer-top ul.menu a {
  color: #b8b8b8 !important;
}
.sw-footer .footer-top ul.menu a:hover {
  color: #fff !important;
}
.sw-footer .footer-top ul.contact-address,
.sw-footer .footer-top ul.contact-address li,
.sw-footer .footer-top ul.contact-address p {
  color: #b8b8b8 !important;
}
.sw-footer .footer-top ul.contact-address a {
  color: #b8b8b8 !important;
  border-bottom: 1px solid var(--sw-primary-light);
  padding-bottom: 1px;
}
.sw-footer .footer-top ul.contact-address a:hover {
  color: #fff !important;
}
.sw-footer .footer-top ul.contact-address .fa {
  color: var(--sw-primary-light) !important;
  margin-right: 8px;
  width: 14px;
}

/* Bottom bar */
.sw-footer-bottom.footer-bottom-block {
  background: #171717 !important;
  border-top: 1px solid #2a2a2a;
  padding: 18px 0;
}
.sw-footer-bottom .footer-bottom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.sw-footer-bottom .text-footer-bot p {
  margin: 0;
  color: #888 !important;
  font-size: 13px;
}
.sw-footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.sw-footer-payments {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Payment card tiles (components/layout/PaymentCardIcons.tsx). Rest state is
   a muted tile that sits quietly on the dark footer; hover colours are
   sampled from the brand card artwork. */
.sw-pay-card {
  line-height: 0;
  transition: transform 0.15s ease;
}
.sw-pay-card svg {
  display: block;
  width: 40px;
  height: 28px;
}
.sw-pay-card .sw-pay-bg,
.sw-pay-card .sw-pay-fg,
.sw-pay-card [class^="sw-pay-mc-"] {
  transition: fill 0.15s ease;
}
.sw-pay-card .sw-pay-bg {
  fill: #2b2b2b;
}
.sw-pay-card .sw-pay-fg {
  fill: #7a7a7a;
}
.sw-pay-card .sw-pay-mc-left {
  fill: #6b6b6b;
}
.sw-pay-card .sw-pay-mc-right {
  fill: #8a8a8a;
}
.sw-pay-card .sw-pay-mc-overlap {
  fill: #7a7a7a;
}
.sw-pay-card:hover {
  transform: translateY(-2px);
}
.sw-pay-card:hover .sw-pay-fg {
  fill: #fff;
}

.sw-pay-visa .sw-pay-stop-a { stop-color: #365acb; }
.sw-pay-visa .sw-pay-stop-b { stop-color: #194aa7; }
.sw-pay-visa:hover .sw-pay-bg { fill: url(#sw-pay-grad-visa); }

.sw-pay-diners:hover .sw-pay-bg { fill: #2182ca; }

.sw-pay-amex .sw-pay-stop-a { stop-color: #1a99d9; }
.sw-pay-amex .sw-pay-stop-b { stop-color: #0286c2; }
.sw-pay-amex:hover .sw-pay-bg { fill: url(#sw-pay-grad-amex); }

.sw-pay-discover .sw-pay-stop-a { stop-color: #fcb132; }
.sw-pay-discover .sw-pay-stop-b { stop-color: #ffa301; }
.sw-pay-discover:hover .sw-pay-bg { fill: url(#sw-pay-grad-discover); }

.sw-pay-mastercard .sw-pay-stop-a { stop-color: #233949; }
.sw-pay-mastercard .sw-pay-stop-b { stop-color: #343a4a; }
.sw-pay-mastercard:hover .sw-pay-bg { fill: url(#sw-pay-grad-mastercard); }
.sw-pay-mastercard:hover .sw-pay-mc-left { fill: #ed0002; }
.sw-pay-mastercard:hover .sw-pay-mc-right { fill: #f8a301; }
.sw-pay-mastercard:hover .sw-pay-mc-overlap { fill: #ff5b0c; }