/* Ported pixel-for-pixel from design-files/Footer.dc.html. */
.site-footer {
  font-family: var(--font-sans);
  background: var(--color-charcoal-primary);
}

.footer-newsletter {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 36px 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-newsletter__label { display: flex; align-items: center; gap: 16px; color: var(--color-beige-light); }
.footer-newsletter__label .title { font-family: var(--font-serif); font-size: 16px; }
.footer-newsletter__label .sub { font-size: 12.5px; color: var(--color-text-grey-dim); margin-top: 2px; }

.footer-newsletter form { display: flex; gap: 0; flex: 1; max-width: 420px; min-width: 260px; width: 100%; }
/* Real bug: no mobile treatment existed for this section at all -- at
   320-375px, the unreduced 48px side padding plus the form's own
   min-width:260px added up to more than the viewport itself, causing a
   genuine ~45px horizontal page overflow (confirmed via a real
   scrollWidth/clientWidth check, not just visual guessing). */
@media (max-width: 639px) {
  .footer-newsletter { padding: 28px 20px; flex-direction: column; align-items: stretch; }
  .footer-newsletter form { min-width: 0; max-width: none; }
  /* flex items default to min-width:auto (their own content's intrinsic
     width), not 0 -- the input's placeholder text and the button's
     nowrap "SUBSCRIBE" label were both refusing to shrink past that,
     which is what let the button overflow even after the form itself
     could shrink. */
  .footer-newsletter input { min-width: 0; }
  .footer-newsletter button { padding: 0 16px; font-size: 11.5px; }
}
.footer-newsletter input {
  flex: 1;
  background: var(--color-charcoal-secondary);
  border: 1px solid rgba(255, 255, 255, .12);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 0 16px;
  color: var(--color-beige-light);
  font-size: 13px;
  height: 46px;
  outline: none;
}
.footer-newsletter button {
  background: var(--color-gold-accent);
  color: var(--color-charcoal-primary);
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 0 24px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
}
.footer-newsletter button:hover { background: var(--color-gold-hover); }

.footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 32px;
  padding: 52px 48px 40px;
}
@media (max-width: 979px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; padding: 40px 20px; } }

.footer-brand .logo { font-family: var(--font-serif); font-size: 24px; color: var(--color-beige-light); margin-bottom: 14px; }
.footer-brand .logo .accent { color: var(--color-gold-accent); }
.footer-brand .logo .wordmark { font-size: 10px; letter-spacing: .3em; color: var(--color-brown-leather); font-family: var(--font-sans); vertical-align: middle; }
.footer-brand__logo { height: 44px; width: auto; display: block; margin-bottom: 14px; border-radius: 6px; }
.footer-brand p { color: var(--color-text-grey-dim); font-size: 13px; line-height: 1.7; max-width: 260px; margin: 0 0 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-grey);
  font-size: 11px; font-weight: 700;
}
.footer-social a:hover { border-color: var(--color-gold-accent); color: var(--color-gold-accent); }

.footer-col-title {
  color: var(--color-beige-light);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
/* <summary> ships its own default disclosure triangle + list styling --
   removed everywhere so desktop is pixel-identical to before; a custom
   +/- indicator is added back mobile-only, where the section is
   actually collapsible. */
.footer-col > summary { cursor: default; list-style: none; }
.footer-col > summary::-webkit-details-marker,
.footer-col > summary::marker { display: none; content: ""; }
/* Widened from max-width:639px to 979px -- footer.html's own collapse
   script uses 980px as its cutoff (matching every other mobile-vs-
   desktop decision on this site: nav drawer, shop filter, AI assistant),
   so a narrower CSS breakpoint here meant a real tablet width like
   768px got sections closed by JS but with none of the collapsible
   styling (pointer cursor, +/- indicator) -- functionally collapsible
   but with no visual affordance telling anyone that. */
@media (max-width: 979px) {
  .footer-col { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .footer-col:last-of-type { border-bottom: none; }
  .footer-col > summary {
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 2px;
    min-height: 44px;
    margin-bottom: 0;
  }
  .footer-col > summary::after {
    content: "+";
    color: var(--color-text-grey-dim);
    font-size: 16px;
    font-weight: 400;
    flex-shrink: 0;
  }
  .footer-col[open] > summary::after { content: "\2212"; }
  .footer-col .footer-links { padding-bottom: 16px; }
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a, .footer-links span { color: var(--color-text-grey-dim); font-size: 13.5px; }
.footer-links a:hover { color: var(--color-gold-accent); }

.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-bottom .copyright { color: #7a7a7a; font-size: 12px; }
.footer-payments { display: flex; gap: 8px; }
.footer-payments span {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 10.5px;
  color: var(--color-text-grey);
  font-weight: 700;
}
.footer-legal-links { display: flex; gap: 20px; }
.footer-legal-links a { color: #7a7a7a; font-size: 12px; }
.footer-legal-links a:hover { color: var(--color-gold-accent); }