/* Sub-component stylesheets are not auto-bundled into a section's CSS, so
   they are imported here. Edit the sub-component's own styles.css — never
   paste a copy into this file (copies drift and silently win or lose). */
/* Imported from: ../../sub-components/FooterSitemapColumn/styles.css */
/* Footer link column — accordion on phones, static list from 768px up.
   All colours read --ft-* custom properties declared on .footer-section
   (src/components/Footer/styles.css), so there is no dark/light rule here. */

.cc_i1v7oqhf_LDCVhFz5eW .footer-column {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--ft-hairline);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__heading {
  margin: 0;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ft-heading);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__toggle:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
}

/* The static twin of the heading — see the note in index.tsx. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-column__static {
  display: none;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__title {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ft-heading);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__chevron {
  flex: none;
  font-size: 0.75rem;
  color: var(--ft-icon);
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column[data-open="true"] .footer-column__chevron {
  transform: rotate(180deg);
}

/* ─── Panel ─────────────────────────────────────────────
 * Collapsed with a 0fr grid track rather than max-height, so no magic pixel
 * number has to be kept in sync with the link count. `visibility` rides along
 * so the links leave the tab order while closed — clipping alone would keep
 * them focusable. It flips instantly on open and only after the slide on
 * close, hence the two separate `visibility 0s` delays.
 */

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  overflow: hidden;
  transition: grid-template-rows 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 260ms;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column[data-open="true"] .footer-column__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 0s;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__list {
  /* Both required for the 0fr track to actually collapse. NOTE: no padding
     here — `min-height: 0` lets the box shrink to zero height but padding is
     still part of that box, so a padded list floors the 0fr track at the
     padding height and the panel never fully closes. The trailing gap lives on
     the last item instead, where the list's own overflow clips it. */
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__item {
  margin: 0;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__item:last-child {
  padding-bottom: 0.75rem;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__link {
  display: block;
  padding: 0.4375rem 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ft-body);
  text-decoration: none;
  transition: color 200ms ease;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__link:hover {
  color: var(--ft-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-column__link:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
}

/* ─── Desktop ───────────────────────────────────────── */

@media (min-width: 768px) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-column {
    border-bottom: 0;
  }

  /* Removed from the a11y tree AND the tab order — not just from the mouse. */
  .cc_i1v7oqhf_LDCVhFz5eW .footer-column__toggle {
    display: none;
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-column__static {
    display: block;
    margin-bottom: 0.875rem;
  }

  /* Matches the mobile open rule's own values, so no !important is needed to
     beat `.footer-column[data-open="true"] .footer-column__panel`. */
  .cc_i1v7oqhf_LDCVhFz5eW .footer-column__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: none;
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-column__item:last-child {
    padding-bottom: 0;
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-column__link {
    padding: 0.25rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-column__chevron, .cc_i1v7oqhf_LDCVhFz5eW .footer-column__panel, .cc_i1v7oqhf_LDCVhFz5eW .footer-column[data-open="true"] .footer-column__panel, .cc_i1v7oqhf_LDCVhFz5eW .footer-column__link {
    transition: none;
  }
}

/* End import: ../../sub-components/FooterSitemapColumn/styles.css */
/* Imported from: ../../sub-components/FooterContactBlock/styles.css */
/* Footer contact block. All colours read --ft-* custom properties declared on
   .footer-section (src/components/Footer/styles.css). */

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact {
  display: flex;
  flex-direction: column;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__title {
  margin: 0 0 0.875rem;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ft-heading);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  /* Icons size from font-size, so this sets both the text size and the 16px
     glyph — never width/height props. */
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ft-body);
}

/* The tel:/mailto: rows get a 44px touch target; the plain text rows only
   need rhythm. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__row--action {
  min-height: 2.75rem;
  align-items: center;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__row + .footer-contact__row {
  margin-top: 0.5rem;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__icon {
  flex: none;
  /* 1rem = the 16px glyph the design calls for, independent of the row's
     13px text. */
  font-size: 1rem;
  margin-top: 0.125rem;
  color: var(--ft-icon);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__row--action .footer-contact__icon {
  margin-top: 0;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__text {
  flex: 1 1 auto;
  font-family: var(--font-body);
  text-wrap: pretty;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__link {
  flex: 1 1 auto;
  font-family: var(--font-body);
  color: var(--ft-body);
  text-decoration: none;
  transition: color 200ms ease;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__link:hover {
  color: var(--ft-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-contact__link:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Responsive ────────────────────────────────────────
 * On tablets the block sits full width under the sitemap columns, so the rows
 * pair up instead of running as one lonely tall stack. The desktop rail puts
 * it back to a single column (see Footer/styles.css).
 */

@media (min-width: 768px) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-contact__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem var(--space-md);
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-contact__row + .footer-contact__row {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-contact__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-contact__link {
    transition: none;
  }
}

/* End import: ../../sub-components/FooterContactBlock/styles.css */
/* Imported from: ../../sub-components/FooterNewsletter/styles.css */
/* Footer newsletter panel. Every colour reads a --ft-* custom property
   declared on .footer-section (see src/components/Footer/styles.css), so the
   dark/light flip needs no rules here. */

/* Deliberately unboxed: no panel background, border or radius. A filled card
   was the single heaviest element in the footer, and the brief is minimal —
   this block earns its place through spacing and type, not a container. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-news {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__title {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ft-heading);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ft-muted);
  text-wrap: pretty;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__live {
  margin-top: 0.25rem;
}

/* ─── Form ──────────────────────────────────────────── */

/* One underlined line holds both the field and the action — a boxed input plus
   a solid pill was two containers where none is needed. The rule under the row
   is the only chrome. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-news__form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  border-bottom: 1px solid var(--ft-hairline-2);
  transition: border-color 200ms ease;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__form:focus-within {
  border-bottom-color: var(--ft-accent);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  /* 1rem, not --text-body (14px): anything under 16px makes iOS Safari zoom
     the page on focus. */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ft-heading);
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__input::placeholder {
  color: var(--ft-muted);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__input:focus-visible {
  outline: none;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__form--error {
  border-bottom-color: var(--ft-error);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ft-accent);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__submit:hover:not(:disabled) {
  color: var(--ft-heading);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__submit:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__submit:disabled {
  color: var(--ft-muted);
  cursor: not-allowed;
}

/* ─── Messages ──────────────────────────────────────── */

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__error {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ft-error);
  text-wrap: pretty;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-news__success {
  margin: 0;
  padding: 0.6875rem 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ft-heading);
  text-wrap: pretty;
}

/* ─── Responsive ────────────────────────────────────── */

@media (min-width: 768px) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-news {
    gap: 0.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-news__form, .cc_i1v7oqhf_LDCVhFz5eW .footer-news__submit {
    transition: none;
  }
}

/* End import: ../../sub-components/FooterNewsletter/styles.css */
/* Imported from: ../../sub-components/FooterBottomBar/styles.css */
/* Footer bottom band. All colours read --ft-* custom properties declared on
   .footer-section (src/components/Footer/styles.css). */

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ft-muted);
}

/* ─── Legal links ───────────────────────────────────── */

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem 0.5rem;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__legal-link {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ft-muted);
  text-decoration: none;
  transition: color 200ms ease;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__legal-link:hover {
  color: var(--ft-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__legal-link:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__legal-sep {
  color: var(--ft-hairline-2);
  user-select: none;
}

/* ─── Payment marks ─────────────────────────────────────
 * Full opacity but desaturated: five brand-coloured chips were the loudest
 * thing in the footer, and grayscale keeps them legible as a trust signal
 * without the rainbow. The old `opacity: .65` is gone — it composited the white
 * cards to a muddy grey, and its hover-to-1 was feedback for an interaction
 * that does not exist on a non-interactive <li>.
 */

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__pay {
  display: inline-flex;
  align-items: center;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__pay-svg {
  display: block;
  height: 1.375rem;
  width: auto;
  filter: var(--ft-pay-filter);
}

/* ─── Responsive ────────────────────────────────────── */

@media (min-width: 768px) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    text-align: left;
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__copyright {
    flex: 1 1 auto;
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__legal {
    flex: 0 0 auto;
    justify-content: center;
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__payments {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-bottom__legal-link {
    transition: none;
  }
}

/* End import: ../../sub-components/FooterBottomBar/styles.css */

/* ─────────────────────────────────────────────────────────────────────────
 * Colour strategy
 *
 * The footer declares its whole palette as --ft-* custom properties on the
 * root element and every rule — here AND in the four sub-components — reads
 * them. Flipping dark/light is then one ten-line block, and the sub-components
 * inherit it without this file naming a single one of their classes.
 *
 * The previous approach did the opposite: a --on-dark modifier plus long
 * descendant selector lists written here, kept in sync by hand. It had already
 * drifted (the contact icons and the payment cards were never covered). Custom
 * properties inherit through the DOM independently of the cascade, so this
 * version gets the same order-independence with nothing to remember.
 *
 * Merchant colours arrive as VARIABLES (see index.tsx), not as inline paint.
 * That matters: the old bottom-bar colour was an inline `background` on the
 * wrapper and no class rule could ever beat it.
 * ───────────────────────────────────────────────────────────────────────── */

.cc_i1v7oqhf_LDCVhFz5eW .footer-section {
  /* Ink — this is --color-text-primary, i.e. the theme's own ink, which is
     why the slab reads as designed rather than as a dark box. */
  --ft-bg: #17150f;
  /* Defaults to the ground: the minimal footer is ONE flat surface, divided by
     hairlines rather than stacked bands. It stays a variable so the
     bottomBarBackgroundColor prop still works for a merchant who does want a
     distinct band. */
  --ft-bg-sunk: var(--ft-bg);

  --ft-heading: #ffffff;
  --ft-body: rgba(255, 255, 255, 0.74);
  --ft-muted: rgba(255, 255, 255, 0.52);
  --ft-icon: rgba(255, 255, 255, 0.46);

  --ft-hairline: rgba(255, 255, 255, 0.09);
  --ft-hairline-2: rgba(255, 255, 255, 0.18);

  /* NOT --color-accent: #B4552D measures 3.71:1 on this ground and fails AA.
     #D98E63 is 6.90:1 and is already the theme's dark-surface terracotta
     (StatsBand, FactoryShowcase). */
  --ft-accent: #d98e63;
  --ft-error: #f08c82;

  /* The card SVGs are white tiles with dark brand marks. Inverting on ink makes
     the tile melt into the ground and leaves only a light monochrome mark —
     five brand-coloured chips were the loudest thing in the footer. On a light
     ground the tile is already right, so it only desaturates. */
  --ft-pay-filter: grayscale(1) invert(1);

  width: 100%;
  background-color: var(--ft-bg);
  color: var(--ft-body);
  font-family: var(--font-body);
  font-size: var(--text-small);
  /* Invisible against the ink slab; the on-light variant turns it into a real
     separator, for the case where footer and page share a background. */
  border-top: 1px solid transparent;
}

/* A merchant-set light background would swallow the white headings, so the
   whole ladder flips to the page tokens. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-section--on-light {
  --ft-heading: var(--color-text-primary);
  --ft-body: var(--color-text-secondary);
  --ft-muted: var(--color-text-muted);
  --ft-icon: var(--color-text-muted);

  --ft-hairline: var(--color-border);
  --ft-hairline-2: var(--color-border-strong);

  --ft-accent: var(--color-accent);
  --ft-error: var(--color-error);
  --ft-pay-filter: grayscale(1);

  border-top-color: var(--color-border);
}

/* Shared by the footer tree — FooterNewsletter's input label and
   FooterBottomBar's card names both use it. Defined once here because all
   four sub-component stylesheets land in this bundle. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Shell ─────────────────────────────────────────── */

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__container {
  max-width: var(--kombos-max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 3rem);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__main {
  padding: var(--space-lg) 0 var(--space-md);
}

/* ─── Row 1: masthead ───────────────────────────────── */

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__masthead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Whitespace, not a rule, separates the masthead from the sitemap row.
     .footer-section__container has no gap of its own, so this padding is what
     keeps the newsletter line off the first accordion row on phones. */
  padding-bottom: var(--space-lg);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__logo-img {
  display: block;
  max-width: 9.375rem;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__logo-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--ft-heading);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__tagline {
  margin: 0;
  max-width: 34ch;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--ft-body);
  text-wrap: pretty;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: -0.625rem; /* optically align the first glyph with the text above */
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px — the touch-target minimum. Icons size from font-size, never from
     width/height props. */
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.25rem;
  color: var(--ft-icon);
  border-radius: var(--radius-pill);
  transition: color 200ms ease;
}

/* Colour alone on hover — a ring around the glyph is chrome the minimal
   footer does not need. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-section__social-link:hover {
  color: var(--ft-heading);
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__social-link:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
}

/* ─── Row 2: sitemap + contact ──────────────────────── */

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Mobile: a stack of accordion rows, each drawing its own bottom rule. */
.cc_i1v7oqhf_LDCVhFz5eW .footer-section__columns {
  display: flex;
  flex-direction: column;
}

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__columns:empty {
  display: none;
}

/* ─── Bottom band ───────────────────────────────────── */

.cc_i1v7oqhf_LDCVhFz5eW .footer-section__bottom {
  padding: 1.25rem 0;
  background-color: var(--ft-bg-sunk);
  border-top: 1px solid var(--ft-hairline);
}

/* ─── Tablet ────────────────────────────────────────── */

@media (min-width: 768px) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-section__main {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  .cc_i1v7oqhf_LDCVhFz5eW .footer-section__masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
  }

  /* Always two tracks here, whatever the column count: at 768px four equal
     tracks would be ~166px and wrap labels like "3 Kapaklı Dolaplar". Three
     columns become 2+1, four become 2x2. */
  .cc_i1v7oqhf_LDCVhFz5eW .footer-section__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

/* ─── Desktop ───────────────────────────────────────────
 * The old layout was a single 5-track grid (2.4fr repeat(3,1fr) 2.4fr) with
 * `display: contents` promoting the column wrapper's children into it. That
 * hardcoded exactly three sitemap columns while the config exposes four and
 * empty ones get filtered out — both directions broke it. Splitting the row in
 * two removes the coupling: the track count is now just --ft-cols.
 *
 * Padding also drops from 6rem/6rem to 4rem/1.5rem. Twelve rem of air around
 * ten rem of content is what produced the void under the columns; the bottom
 * band already supplies the visual close.
 */

@media (min-width: 1024px) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-section__main {
    padding: var(--space-xl) 0 var(--space-md);
  }

  /* Newsletter above, contact below, in ONE continuous right rail — so both
     rows must use the same second track and the same gap, or the two blocks
     line up on their right edges only and the rail reads as a misalignment. */
  .cc_i1v7oqhf_LDCVhFz5eW .footer-section__masthead, .cc_i1v7oqhf_LDCVhFz5eW .footer-section__nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  /* Capped tracks, packed left — NOT 1fr. With 1fr and only two filled columns
     (the store's current state) each track stretched to ~450px at 1440 and left
     a 480px hole between two short link lists. 13rem is the widest any label
     needs, and the tracks still shrink below it when four columns have to fit a
     1024 viewport. */
  .cc_i1v7oqhf_LDCVhFz5eW .footer-section__columns {
    grid-template-columns: repeat(var(--ft-cols, 3), minmax(0, 13rem));
    justify-content: start;
    gap: clamp(1.25rem, 3vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_i1v7oqhf_LDCVhFz5eW .footer-section__social-link {
    transition: none;
  }
}