/* ================================================================
   FLIRTYFLUFFERS — LÁBLÉC
   ----------------------------------------------------------------
   Amit lecserél:
     styles.css   .footer { margin-left:200px; border-top-left-radius:100px }
                  .footer-upper { padding:100px 70px 40px 0; align-items:center }
                  .footer-block .title { background:#d6d6d6; font-size:20px }
     blackshop.css .bs_footer_subscribe_box { margin-left:-140px; padding:50px 30px }
                  .footer-block.follow-us { background:#d6d6d6 }
                  .footer-block.follow-us ul.networks { columns:2 }
     Cypher       .footer, .bs_footer_subscribe_box, .footer-block.follow-us
                  és a .networks li színezése

   A szabályok html-lel kezdődnek, mert a Cypher fájl utoljára töltődik;
   így a specificitásunk mindenhol nagyobb marad.
   ================================================================ */

html .footer {
  --ff-ink: #121212;
  --ff-paper: #FBFAF8;
  --ff-magenta: #FF12BE;
  --ff-cyan: #78DEFF;
  --ff-line: rgba(251, 250, 248, 0.14);
  --ff-dim: rgba(251, 250, 248, 0.72);

  background-color: var(--ff-ink);
  color: var(--ff-dim);
  margin-left: 0;
  border-top-left-radius: 0;
  border-radius: 0;
  text-align: left;
}

/* ================================================================
   1. FELSŐ RÉSZ — egy középre zárt sáv, nem kilógó dobozok
   ================================================================ */

html .footer .footer-upper {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 52px 40px;
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;
  box-sizing: border-box;
}

/* ================================================================
   2. MÁRKAOSZLOP — hírlevél
   ================================================================ */

html .footer .bs_footer_subscribe_box {
  flex: 1 1 260px;
  min-width: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}

html .footer .bs_footer_subscribe_box .bs_footer_logo {
  margin-bottom: 18px;
}

html .footer .bs_footer_subscribe_box .bs_footer_logo a {
  width: auto;
  display: inline-block;
}

html .footer .bs_footer_subscribe_box .bs_footer_logo a img {
  max-height: 58px;
  max-width: 100%;
}

html .footer .bs_newsletter_title {
  margin-bottom: 12px;
}

html .footer .bs_newsletter_title h3 {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ff-paper);
}

/* Az input és a gomb egy sorban — e nélkül a gomb az input alá esik */
html .footer .newsletter-email {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  max-width: 360px;
}

/* Ha a leiratkozás-választó vagy a captcha is be van kapcsolva,
   azok ne szoruljanak be az input melletti sorba */
html .footer .newsletter-email .options,
html .footer .newsletter-email .captcha-box {
  flex: 1 1 100%;
  margin-top: 4px;
}

html .footer .bs_newsletter input[type="text"],
html .footer .bs_newsletter input[type="email"],
html .footer .newsletter-email input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(251, 250, 248, 0.3);
  border-radius: 3px;
  color: var(--ff-paper);
  padding: 12px 13px;
  min-height: 44px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

html .footer .bs_newsletter input::placeholder {
  color: rgba(251, 250, 248, 0.45);
}

html .footer .bs_newsletter-subscribe-button,
html .footer .newsletter-subscribe-button {
  background: var(--ff-magenta);
  /* Fekete szöveg a magentán: 5,43:1. Fehérrel 3,45:1 lenne. */
  color: var(--ff-ink);
  border: none;
  border-radius: 3px;
  height: auto;
  min-height: 44px;
  padding: 12px 18px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

html .footer .bs_newsletter-subscribe-button:hover {
  background: var(--ff-paper);
  color: var(--ff-ink);
}

html .footer .newsletter-validation,
html .footer .newsletter-result {
  font-size: 13px;
  color: var(--ff-cyan);
}

/* ================================================================
   3. LINKOSZLOPOK
   ================================================================ */

html .footer .bs_footer_link {
  flex: 2 1 560px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 0;
  width: auto;
}

html .footer .bs_footer_link .footer-block {
  flex: 1 1 150px;
  min-width: 0;
  text-align: left;
  margin: 0;
}

html .footer .bs_footer_link .footer-block:last-child {
  display: block;
  margin-right: 0;
}

html .footer .footer-block .title {
  background: transparent;
  padding: 0;
  margin: 0 0 14px 0;
  cursor: default;
}

html .footer .footer-block .title strong {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-cyan);
}

html .footer .bs_footer_link .footer-block .list {
  color: var(--ff-dim);
  margin: 0;
  padding: 0;
  list-style: none;
}

html .footer .bs_footer_link .footer-block .list li {
  margin: 0 0 10px 0;
  padding: 0;
  background: none;
}

html .footer .bs_footer_link .footer-block .list li a {
  color: var(--ff-dim);
  font-size: 14px;
  line-height: 1.5;
  transform: none;
  display: inline-block;
  transition: color 0.2s ease;
}

html .footer .bs_footer_link .footer-block .list li a:hover {
  color: var(--ff-magenta);
  transform: none;
  text-decoration: underline;
}

/* A dekorációs papírrepülők kiszedve a nézetből; ez csak biztosíték,
   ha valahol mégis maradna egy. */
html .footer .linearicons-flip-vertical {
  display: none;
}

/* ================================================================
   4. KÖVESS MINKET — a cián doboz és a színes négyzetek helyett
   ================================================================ */

html .footer .footer-block.follow-us {
  background: transparent;
  padding: 0;
}

html .footer .footer-block.follow-us .social .title {
  margin-bottom: 14px;
}

html .footer .footer-block.follow-us .title strong {
  color: var(--ff-cyan);
}

html .footer .footer-block.follow-us ul.networks {
  columns: auto;
  column-count: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html .footer .footer-block.follow-us .networks li {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

html .footer .footer-block.follow-us .networks li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(251, 250, 248, 0.3);
  border-radius: 3px;
  color: var(--ff-paper);
  /* Ha a régi, ikonfontos SocialButtons nézet fut, a glyph így is
     látszik — font-size: 0 esetén üres doboz maradt. */
  font-size: 18px;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}

html .footer .footer-block.follow-us .networks li a:hover {
  border-color: var(--ff-magenta);
  color: var(--ff-magenta);
}

html .footer .footer-block.follow-us .networks li a svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ================================================================
   5. ALSÓ SÁV
   ================================================================ */

html .footer .footer-lower {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 40px;
  border-top: 1px solid var(--ff-line);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(251, 250, 248, 0.5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  box-sizing: border-box;
  overflow: visible;
}

html .footer .footer-lower a,
html .footer .footer-powered-by,
html .footer .footer-powered-by a,
html .footer .footer-info,
html .footer .footer-disclaimer,
html .footer .footer-tax-shipping,
html .footer .footer-tax-shipping a {
  color: rgba(251, 250, 248, 0.5);
  font-size: 12px;
  font-weight: 400;
}

html .footer .footer-lower a:hover,
html .footer .footer-tax-shipping a:hover {
  color: var(--ff-magenta);
}

html .footer .footer-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: flex-end;
  text-align: right;
}

/* ================================================================
   6. SZŰKEBB KÉPERNYŐK
   A Cypher egy 1024px-es media queryben magentára festi a linkeket
   és ciánra a rovatcímek hátterét — itt írjuk felül.
   ================================================================ */

@media only screen and (max-width: 1024px) {
  html .footer .footer-upper {
    padding: 40px 24px;
    gap: 32px;
  }
  html .footer .footer-block .title {
    background-color: transparent;
  }
  html .footer .footer-block .title strong {
    color: var(--ff-cyan);
  }
  html .footer .bs_footer_link .footer-block .list,
  html .footer .bs_footer_link .footer-block .list li a {
    color: var(--ff-dim);
  }
  html .footer .bs_footer_link .footer-block .list li a:hover {
    color: var(--ff-magenta);
  }
  html .footer .footer-lower {
    padding: 16px 24px;
    justify-content: flex-start;
  }
  html .footer .footer-info {
    justify-content: flex-start;
    text-align: left;
  }
}

@media only screen and (max-width: 640px) {
  html .footer .bs_footer_link {
    gap: 24px;
  }
  html .footer .bs_footer_link .footer-block {
    flex-basis: 100%;
  }
}