/* Core theme — adaptive footer. All visual roles inherit Global Design. */

/* These defaults are also declared in assets/core-dna.css, which layout.php
   loads AFTER every section stylesheet — so core-dna wins at equal specificity
   and is the value that actually paints. They are repeated here so the section
   still renders correctly on its own, and CoreFooterAdaptiveTest fails the
   build if the two ever disagree. Change both, or change neither. */
.storly-footer {
  --ftr-bg: var(--core-primary);
  --ftr-text: color-mix(in srgb, var(--core-on-primary) 76%, transparent);
  --ftr-heading: var(--core-on-primary);
  --ftr-link: color-mix(in srgb, var(--core-on-primary) 90%, transparent);
  --ftr-link-hover: var(--core-secondary);
  --ftr-border: color-mix(in srgb, var(--core-on-primary) 18%, transparent);

  display: block;
  padding-block: var(--ftr-pad-top, clamp(40px, 4.5vw, 64px))
    var(--ftr-pad-bottom, clamp(22px, 2.5vw, 30px));
  overflow: clip;
  background: var(--ftr-bg);
  color: var(--ftr-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
}

.storly-footer[data-surface="page"],
.storly-footer[data-surface="surface"] {
  --ftr-text: var(--core-muted);
  --ftr-heading: var(--core-text);
  --ftr-link: color-mix(in srgb, var(--core-text) 86%, transparent);
  --ftr-border: var(--core-border);
}

.storly-footer *,
.storly-footer *::before,
.storly-footer *::after { box-sizing: border-box; }

.storly-footer__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--core-track-inset, clamp(18px, 3vw, 32px));
}

.storly-footer[data-container="narrow"] .storly-footer__inner { max-width: var(--core-track-narrow, 1040px); }
.storly-footer[data-container="default"] .storly-footer__inner { max-width: var(--core-track-default, 1360px); }
.storly-footer[data-container="wide"] .storly-footer__inner { max-width: var(--core-track-wide, 1520px); }
.storly-footer[data-container="full"] .storly-footer__inner { max-width: var(--core-track-full, none); }

/* Top composition -------------------------------------------------------- */

.storly-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.storly-footer__brand {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--ftr-brand-region, 380px));
  max-width: 100%;
  min-width: 0;
  padding-block-end: 28px;
}

.storly-footer[data-brand-size="compact"] { --ftr-brand-region: 280px; }
.storly-footer[data-brand-size="balanced"] { --ftr-brand-region: 380px; }
.storly-footer[data-brand-size="wide"] { --ftr-brand-region: 520px; }

/* With one brand identity and nothing under it — no description, no socials —
   the block is a single small mark. Reserving the editorial region for it left
   a wide empty column beside a tight rail, and a small square logo made that
   worst of all. Only the untouched default is narrowed: Compact and Wide are
   deliberate merchant choices and stay exactly as asked. script.js recomputes
   the density live, so typing a description widens the region immediately. */
.storly-footer[data-brand-size="balanced"][data-brand-density="compact"] {
  --ftr-brand-region: 280px;
}

/* Alignment belongs to the allocated brand region. Logo images have explicit
   auto margins as well as text alignment, so Center moves the visual artwork —
   not just the description beneath a left-anchored mark. */
.storly-footer[data-brand-align="left"] .storly-footer__brand { align-items: flex-start; justify-self: start; text-align: left; }
.storly-footer[data-brand-align="center"] .storly-footer__brand { align-items: center; justify-self: center; text-align: center; }
.storly-footer[data-brand-align="right"] .storly-footer__brand { align-items: flex-end; justify-self: end; text-align: right; }

/* The single resolved mark's host. It holds one <img> or the wordmark, never
   both visibly and never neither — so it has no intrinsic size of its own and
   cannot reserve space for a mark that is not there. */
.storly-footer__primary-mark {
  width: 100%;
  min-width: 0;
}

.storly-footer__logo {
  display: block;
  width: auto;
  max-width: min(100%, var(--ftr-logo-width, 150px));
  max-height: var(--ftr-logo-height, 56px);
  object-fit: contain;
}

.storly-footer[data-brand-align="left"] .storly-footer__logo,
.storly-footer[data-brand-align="left"] .storly-footer__wordmark { margin-inline: 0 auto; }
.storly-footer[data-brand-align="center"] .storly-footer__logo,
.storly-footer[data-brand-align="center"] .storly-footer__wordmark { margin-inline: auto; }
.storly-footer[data-brand-align="right"] .storly-footer__logo,
.storly-footer[data-brand-align="right"] .storly-footer__wordmark { margin-inline: auto 0; }

/* The one resolved logo — Footer Override or canonical Branding logo — follows
   the same rendering control. Painting it in a single ink guarantees contrast
   on the footer surface; Original colours remains one Inspector control away. */
.storly-footer[data-logo-render="ink"] .storly-footer__logo {
  filter: brightness(0) invert(1);
}

.storly-footer[data-logo-render="ink"][data-surface="page"] .storly-footer__logo,
.storly-footer[data-logo-render="ink"][data-surface="surface"] .storly-footer__logo {
  filter: brightness(0);
}

/* script.js promotes this when the mark fails to decode. */
.storly-footer__wordmark[hidden] { display: none; }

.storly-footer__wordmark {
  width: fit-content;
  max-width: 100%;
  margin-block: 0;
  color: var(--ftr-heading);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.storly-footer__tagline {
  width: min(100%, var(--ftr-description-max, 360px));
  max-width: 100%;
  margin-block: 0;
  color: var(--ftr-text);
  font-size: 13.5px;
  line-height: 1.68;
}

.storly-footer[data-brand-description-align="left"] .storly-footer__tagline {
  margin-inline: 0 auto;
  text-align: left;
}
.storly-footer[data-brand-description-align="center"] .storly-footer__tagline {
  margin-inline: auto;
  text-align: center;
}
.storly-footer[data-brand-description-align="right"] .storly-footer__tagline {
  margin-inline: auto 0;
  text-align: right;
}

.storly-footer__primary-mark + .storly-footer__tagline {
  margin-block-start: var(--ftr-logo-gap, 14px);
}

.storly-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.storly-footer[data-brand-align="left"] .storly-footer__social { justify-content: flex-start; }
.storly-footer[data-brand-align="center"] .storly-footer__social { justify-content: center; }
.storly-footer[data-brand-align="right"] .storly-footer__social { justify-content: flex-end; }

/* With no description, the social row is immediately below the single resolved
   logo and therefore follows the logo-gap control. */
.storly-footer__primary-mark + .storly-footer__social {
  margin-block-start: var(--ftr-logo-gap, 14px);
}

.storly-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ftr-border);
  border-radius: 50%;
  color: var(--ftr-link);
  transition: color var(--dur-fast, .16s) var(--ease),
    border-color var(--dur-fast, .16s) var(--ease),
    transform var(--dur-fast, .16s) var(--ease);
}

.storly-footer__social a:hover {
  color: var(--ftr-link-hover);
  border-color: color-mix(in srgb, var(--ftr-link-hover) 60%, transparent);
  transform: translateY(-1px);
}

.storly-footer__social svg { width: 16px; height: 16px; }

/* Intrinsic navigation rail -------------------------------------------- */

.storly-footer__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.storly-footer__col {
  min-width: 0;
  border-top: 1px solid var(--ftr-border);
}

.storly-footer__col-title { margin: 0; font-size: 12px; }

.storly-footer__links,
.storly-footer__contact {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 0 22px;
  list-style: none;
  font-size: 13.5px;
}

.storly-footer__links a,
.storly-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ftr-link);
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast, .16s) var(--ease);
}

.storly-footer__links a:hover,
.storly-footer__contact a:hover { color: var(--ftr-link-hover); }

.storly-footer__contact li {
  display: grid;
  gap: 0;
  min-width: 0;
}

.storly-footer__contact li > span:last-child { overflow-wrap: anywhere; }

.storly-footer__contact-label {
  color: var(--ftr-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .7;
}

@media (max-width: 767px) {
  .storly-footer__social a { width: 48px; height: 48px; }
  .storly-footer__links a,
  .storly-footer__contact a { min-height: 44px; }
}

/* Bottom composition ----------------------------------------------------- */

.storly-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 26px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ftr-border);
  font-size: 12px;
}

.storly-footer__meta {
  display: flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 16px;
  min-width: 0;
}

.storly-footer__copy,
.storly-footer__powered { margin: 0; color: var(--ftr-link); }

.storly-footer__powered { font-size: 12px; opacity: .72; }

.storly-footer__powered a,
.storly-footer__policies a {
  color: var(--ftr-link);
  text-decoration: none;
  transition: color var(--dur-fast, .16s) var(--ease);
}

.storly-footer__powered a:hover,
.storly-footer__policies a:hover { color: var(--ftr-link-hover); }

.storly-footer__policies,
.storly-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.storly-footer__policies {
  flex: 0 1 auto;
  gap: 8px 18px;
}

.storly-footer__payments {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 6px;
}

.storly-footer__payments li { color: var(--ftr-link); }

/* Card and wallet marks carry their real brand colours, so they need a light
   ground to read against — the same reason a physical acceptance decal is
   printed on white. One tile size gives the row a single optical height while
   each mark keeps its own aspect inside a shared 48x30 viewBox, so nothing is
   stretched and nothing is recoloured into an unrecognisable glyph. */
.storly-footer__payments .is-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ftr-payment-tile-w, 42px);
  height: var(--ftr-payment-tile-h, 26px);
  padding: 3px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: var(--core-card-radius, 5px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* Cash on delivery is not a card network and has no logo to reproduce, so it
   stays a word mark in the footer's own ink. */
.storly-footer__payments .is-text {
  display: inline-flex;
  align-items: center;
  min-height: var(--ftr-payment-tile-h, 26px);
  margin-inline-start: 4px;
}

.storly-footer__payment-mark {
  display: block;
  width: 100%;
  height: 100%;
  /* Preserve each brand's aspect ratio inside the shared tile. */
  object-fit: contain;
}

.storly-footer__payment-text {
  color: var(--ftr-link);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Word-mark-only payments join the copyright line and hand the right edge to
   the policy links, so the bottom bar keeps two real anchors instead of one
   stray fragment floating in the corner. */
.storly-footer[data-payments="text"] .storly-footer__meta { flex: 0 1 auto; }
.storly-footer[data-payments="text"] .storly-footer__payments {
  order: 1;
  justify-content: flex-start;
}
.storly-footer[data-payments="text"] .storly-footer__payments .is-text { margin-inline-start: 0; }
.storly-footer[data-payments="text"] .storly-footer__policies {
  order: 2;
  margin-inline-start: auto;
}

/* Visibility remains attribute-driven for same-frame Builder updates. */
.storly-footer[data-show-brand="0"] .storly-footer__brand,
.storly-footer[data-has-brand="0"] .storly-footer__brand,
.storly-footer[data-show-social="0"] .storly-footer__social,
.storly-footer[data-show-payments="0"] .storly-footer__payments,
.storly-footer[data-show-policies="0"] .storly-footer__policies { display: none; }
.storly-footer[data-show-nav="0"] .storly-footer__col[data-col="nav"],
.storly-footer[data-show-categories="0"] .storly-footer__col[data-col="categories"],
.storly-footer[data-show-contact="0"] .storly-footer__col[data-col="contact"] { display: none; }
.storly-footer[data-active-rail="0"] .storly-footer__rail { display: none; }
.storly-footer[data-active-rail="0"][data-show-brand="0"] .storly-footer__top { display: none; }

/* An empty region must cost nothing. The brand block only pays for the gap
   under it while a rail actually follows it, and the bottom bar drops its rule
   and its offset when there is no top composition to divide it from — whether
   that emptiness came from the merchant's data (data-has-top) or from an
   Inspector toggle the preview applied without a re-render. */
.storly-footer[data-active-rail="0"] .storly-footer__brand { padding-block-end: 0; }
.storly-footer[data-has-top="0"] .storly-footer__bottom,
.storly-footer[data-active-rail="0"][data-show-brand="0"] .storly-footer__bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.storly-footer :is(a, button):focus-visible {
  outline: 2px solid var(--core-focus, var(--ftr-link-hover));
  outline-offset: 3px;
  border-radius: 3px;
}

/* Tablet ---------------------------------------------------------------- */

@media (min-width: 768px) {
  .storly-footer__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 36px;
  }

  .storly-footer__col { border-top: 0; }
  .storly-footer__links,
  .storly-footer__contact { gap: 7px; padding-bottom: 0; }
}

/* Desktop --------------------------------------------------------------- */

@media (min-width: 1025px) {
  /* Brand anchors the left edge, navigation anchors the right. Stretching the
     rail across the whole remaining track pushed three short link columns
     ~390px apart and read as an accident; grouping them against the right edge
     keeps the gutters tight and gives the composition two intentional ends. */
  .storly-footer__top {
    grid-template-columns: minmax(0, var(--ftr-brand-region, 380px)) minmax(0, 1fr);
    align-items: start;
    gap: clamp(48px, 5vw, 72px);
  }

  .storly-footer[data-show-brand="0"] .storly-footer__top,
  .storly-footer[data-active-rail="0"] .storly-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .storly-footer__brand { padding-block-end: 0; }

  /* The rail is an explicit grid of as many equal columns as there are live
     groups, so it always fills its track. The previous flex rail sized columns
     to their content and left the remainder of the footer empty on the right,
     and wrapped raggedly once the groups outgrew one row. data-active-rail is
     recomputed live, so an Inspector toggle recomposes the grid immediately. */
  .storly-footer__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 30px clamp(34px, 3.4vw, 56px);
  }

  .storly-footer__col {
    flex: 0 1 auto;
    min-width: 124px;
    max-width: 216px;
  }

  .storly-footer__col--contact { min-width: 168px; max-width: 232px; }
  .storly-footer__bottom { margin-top: 36px; padding-top: 20px; }

  /* Five or six groups cannot sit beside the brand without spilling into a
     ragged second row that leaves the right half of the footer empty. Past
     that density the brand takes a full-width row of its own and the rail
     gets the whole track as even columns — a composition, not an overflow.
     data-active-rail is recomputed live, so an Inspector toggle that removes
     a group returns the footer to the beside-the-brand layout immediately. */
  .storly-footer[data-active-rail="5"] .storly-footer__top,
  .storly-footer[data-active-rail="6"] .storly-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .storly-footer[data-active-rail="5"] .storly-footer__brand,
  .storly-footer[data-active-rail="6"] .storly-footer__brand {
    padding-block-end: clamp(34px, 3.4vw, 48px);
  }

  .storly-footer[data-active-rail="5"] .storly-footer__rail,
  .storly-footer[data-active-rail="6"] .storly-footer__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px clamp(28px, 2.6vw, 44px);
  }

  .storly-footer[data-active-rail="5"] .storly-footer__col,
  .storly-footer[data-active-rail="6"] .storly-footer__col,
  .storly-footer[data-active-rail="5"] .storly-footer__col--contact,
  .storly-footer[data-active-rail="6"] .storly-footer__col--contact {
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 1280px) {
  .storly-footer[data-active-rail="5"] .storly-footer__rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .storly-footer[data-active-rail="6"] .storly-footer__rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .storly-footer { padding-block-start: var(--ftr-pad-top, 36px); }
  .storly-footer__brand { padding-block-end: 24px; }

  .storly-footer[data-brand-mobile-align="left"] .storly-footer__brand { align-items: flex-start; justify-self: start; text-align: left; }
  .storly-footer[data-brand-mobile-align="center"] .storly-footer__brand { align-items: center; justify-self: center; text-align: center; }
  .storly-footer[data-brand-mobile-align="right"] .storly-footer__brand { align-items: flex-end; justify-self: end; text-align: right; }

  .storly-footer[data-brand-mobile-align="left"] :is(.storly-footer__logo, .storly-footer__wordmark) { margin-inline: 0 auto; }
  .storly-footer[data-brand-mobile-align="center"] :is(.storly-footer__logo, .storly-footer__wordmark) { margin-inline: auto; }
  .storly-footer[data-brand-mobile-align="right"] :is(.storly-footer__logo, .storly-footer__wordmark) { margin-inline: auto 0; }

  .storly-footer[data-brand-mobile-align="left"] .storly-footer__social { justify-content: flex-start; }
  .storly-footer[data-brand-mobile-align="center"] .storly-footer__social { justify-content: center; }
  .storly-footer[data-brand-mobile-align="right"] .storly-footer__social { justify-content: flex-end; }

  /* "Follow brand" follows the effective mobile alignment, not merely the
     desktop value from which it inherited. An explicit description alignment
     still wins and is intentionally left untouched here. */
  .storly-footer[data-brand-description-align-requested="follow"][data-brand-mobile-align="left"] .storly-footer__tagline {
    margin-inline: 0 auto;
    text-align: left;
  }
  .storly-footer[data-brand-description-align-requested="follow"][data-brand-mobile-align="center"] .storly-footer__tagline {
    margin-inline: auto;
    text-align: center;
  }
  .storly-footer[data-brand-description-align-requested="follow"][data-brand-mobile-align="right"] .storly-footer__tagline {
    margin-inline: auto 0;
    text-align: right;
  }

  .storly-footer__bottom {
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
  }
  .storly-footer__meta,
  .storly-footer__policies,
  .storly-footer__payments {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .storly-footer__meta { display: grid; gap: 3px; }
  .storly-footer__policies { gap: 8px 16px; }
  /* The marks wrap onto as many rows as the viewport needs; the row never
     scrolls sideways and never forces the page to. */
  .storly-footer__payments { margin-top: 2px; row-gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {  .storly-footer__social a,
  .storly-footer__links a,
  .storly-footer__contact a,
  .storly-footer__powered a,
  .storly-footer__policies a { transition: none; }
}

/* ------------------------------------------------ footer as a composition --
   The footer could already be recoloured and repadded. What it could not do was
   change shape - which is why five niches produced five identical layouts in
   different hex values.

   Everything below is driven by persisted settings the Builder exposes. No
   niche selectors: a merchant on any store reaches all of it. */

.storly-footer__rail { gap: var(--ftr-column-gap, 40px); }
.storly-footer__links { gap: var(--ftr-link-gap, 10px); }
.storly-footer__links a { font-size: var(--ftr-link-size, 13px); }
.storly-footer__col-title {
  font-size: var(--ftr-head-size, 12px);
  letter-spacing: var(--ftr-head-tracking, .08em);
}
.storly-footer[data-head-caps="1"] .storly-footer__col-title { text-transform: uppercase; }
.storly-footer[data-head-caps="0"] .storly-footer__col-title { text-transform: none; letter-spacing: 0; }
.storly-footer__brand { gap: var(--ftr-brand-gap, 16px); }

/* Dividers. "rule" spans the container and reads as an engineered separation;
   "line" sits above the bottom bar only. */
.storly-footer[data-divider="none"] .storly-footer__bottom { border-top: 0; }
.storly-footer[data-divider="rule"] .storly-footer__top {
  padding-block-end: var(--ftr-column-gap, 40px);
  border-block-end: 1px solid var(--ftr-border, rgba(255, 255, 255, .12));
}

@media (min-width: 1025px) {
  /* Brand beside the columns, with the brand column's share a real setting. */
  .storly-footer[data-footer-layout="columns"] .storly-footer__top {
    grid-template-columns: minmax(0, var(--ftr-brand-col, 32%)) minmax(0, 1fr);
    gap: var(--ftr-column-gap, 40px);
  }
  /* Brand above the columns: a wider, quieter reading order. */
  .storly-footer[data-footer-layout="stacked"] .storly-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--ftr-column-gap, 40px) * 0.9);
  }
  .storly-footer[data-footer-layout="stacked"] .storly-footer__brand { max-width: 520px; }
  /* Centred: brand centred over centred columns. */
  .storly-footer[data-footer-layout="centered"] .storly-footer__top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .storly-footer[data-footer-layout="centered"] .storly-footer__rail { justify-items: center; }
  .storly-footer[data-footer-layout="centered"] .storly-footer__col { text-align: center; }
  .storly-footer[data-footer-layout="centered"] .storly-footer__links { align-items: center; }
  /* Compact: one tight row, for a store that wants the page to end quickly. */
  .storly-footer[data-footer-layout="compact"] .storly-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .storly-footer[data-footer-layout="compact"] .storly-footer__brand { max-width: none; }
}

/* Bottom bar composition. */
.storly-footer[data-bottom-bar="stacked"] .storly-footer__bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.storly-footer[data-bottom-bar="centered"] .storly-footer__bottom {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* ------------------------------------------------------- mobile behaviour --
   A footer that simply stacks its desktop columns is the last thing a visitor
   sees on a phone. Tap targets come first. */
@media (max-width: 767px) {
  .storly-footer__links a { min-height: 40px; display: inline-flex; align-items: center; }
  .storly-footer[data-footer-layout="centered"] .storly-footer__brand,
  .storly-footer[data-footer-layout="centered"] .storly-footer__col { text-align: start; }
  .storly-footer[data-bottom-bar="inline"] .storly-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* === STORLY_CORE_FOOTER_PREMIUM_V1_START === */




/* ============================================================
   ROOT
   ============================================================ */

.section.storly-footer {
    position: relative;

    isolation: isolate;

    padding-block:
        var(
            --ftr-pad-top,
            clamp(64px, 7vw, 108px)
        )
        var(
            --ftr-pad-bottom,
            clamp(28px, 3.6vw, 48px)
        );

    overflow: clip;

    background:
        var(--ftr-bg);

    color:
        var(--ftr-text);

    font-size: 14px;

    line-height: 1.55;

    text-rendering: optimizeLegibility;
}


/*
 * One restrained top edge gives the page a deliberate ending.
 */
.section.storly-footer::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    pointer-events: none;

    background:
        var(--ftr-border);

    opacity: .55;
}


/* ============================================================
   CONTAINER
   ============================================================ */

.section.storly-footer
.storly-footer__inner {
    position: relative;

    width: 100%;

    margin-inline: auto;

    padding-inline:
        var(
            --core-track-inset,
            clamp(20px, 3vw, 38px)
        );
}


/* ============================================================
   TOP COMPOSITION
   ============================================================ */

.section.storly-footer
.storly-footer__top {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0,1fr);

    align-items: start;

    min-width: 0;
}


/* ============================================================
   BRAND BLOCK
   ============================================================ */

.section.storly-footer
.storly-footer__brand {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    width:
        min(
            100%,
            var(--ftr-brand-region, 420px)
        );

    max-width: 100%;

    padding-block-end:
        clamp(30px, 4vw, 48px);
}


/*
 * The mark gets real visual presence without forcing a fake
 * identity when the merchant only has a wordmark.
 */
.section.storly-footer
.storly-footer__primary-mark {
    width: 100%;

    min-width: 0;
}


.section.storly-footer
.storly-footer__logo {
    display: block;

    width: auto;

    max-width:
        min(
            100%,
            var(--ftr-logo-width, 168px)
        );

    max-height:
        var(--ftr-logo-height, 64px);

    object-fit: contain;
}


.section.storly-footer
.storly-footer__wordmark {
    width: fit-content;

    max-width: 100%;

    margin: 0;

    color:
        var(--ftr-heading);

    font-family:
        var(--font-display);

    font-size:
        clamp(28px, 2.8vw, 42px);

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.045em;
}


/* ============================================================
   BRAND DESCRIPTION
   ============================================================ */

.section.storly-footer
.storly-footer__tagline {
    width:
        min(
            100%,
            var(--ftr-description-max, 410px)
        );

    max-width: 100%;

    margin: 0;

    color:
        var(--ftr-text);

    font-size: 14px;

    line-height: 1.75;
}


.section.storly-footer
.storly-footer__primary-mark
+ .storly-footer__tagline {
    margin-block-start:
        var(--ftr-logo-gap, 20px);
}


/* ============================================================
   SOCIALS
   ============================================================ */

.section.storly-footer
.storly-footer__social {
    display: flex;
    flex-wrap: wrap;

    width: 100%;

    gap: 8px;

    margin:
        22px 0 0;

    padding: 0;

    list-style: none;
}


.section.storly-footer
.storly-footer__primary-mark
+ .storly-footer__social {
    margin-block-start:
        var(--ftr-logo-gap, 20px);
}


.section.storly-footer
.storly-footer__social a {
    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    border:
        1px solid
        var(--ftr-border);

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--ftr-heading) 4%,
            transparent
        );

    color:
        var(--ftr-link);

    text-decoration: none;

    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}


.section.storly-footer
.storly-footer__social a:hover {
    border-color:
        color-mix(
            in srgb,
            var(--ftr-link-hover) 42%,
            var(--ftr-border)
        );

    background:
        color-mix(
            in srgb,
            var(--ftr-link-hover) 8%,
            transparent
        );

    color:
        var(--ftr-link-hover);

    transform:
        translateY(-2px);
}


.section.storly-footer
.storly-footer__social svg {
    width: 16px;
    height: 16px;
}


/* ============================================================
   NAVIGATION RAIL
   ============================================================ */

.section.storly-footer
.storly-footer__rail {
    min-width: 0;

    gap:
        var(--ftr-column-gap, 44px);
}


.section.storly-footer
.storly-footer__col {
    min-width: 0;
}


/* ============================================================
   COLUMN HEADINGS
   ============================================================ */

.section.storly-footer
.storly-footer__col-title {
    margin: 0;

    color:
        var(--ftr-heading);

    font-size:
        var(--ftr-head-size, 11px);

    line-height: 1.2;

    letter-spacing:
        var(--ftr-head-tracking, .075em);
}


/* ============================================================
   LINKS / CONTACT
   ============================================================ */

.section.storly-footer
.storly-footer__links,
.section.storly-footer
.storly-footer__contact {
    display: grid;

    gap:
        var(--ftr-link-gap, 10px);

    margin: 0;

    padding: 0;

    list-style: none;
}


.section.storly-footer
.storly-footer__links a,
.section.storly-footer
.storly-footer__contact a {
    position: relative;

    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    color:
        var(--ftr-link);

    font-size:
        var(--ftr-link-size, 13px);

    font-weight: 450;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color .16s ease,
        opacity .16s ease;
}


.section.storly-footer
.storly-footer__links a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -2px;
    left: 0;

    height: 1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform .18s ease;
}


.section.storly-footer
.storly-footer__links a:hover,
.section.storly-footer
.storly-footer__contact a:hover {
    color:
        var(--ftr-link-hover);
}


.section.storly-footer
.storly-footer__links a:hover::after {
    transform:
        scaleX(1);
}


/* ============================================================
   CONTACT
   ============================================================ */

.section.storly-footer
.storly-footer__contact li {
    display: grid;

    gap: 3px;
}


.section.storly-footer
.storly-footer__contact-label {
    color:
        var(--ftr-text);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: .09em;

    text-transform: uppercase;

    opacity: .58;
}


.section.storly-footer
.storly-footer__contact li
> span:last-child {
    overflow-wrap: anywhere;

    color:
        var(--ftr-link);
}


/* ============================================================
   DESKTOP COMPOSITION
   ============================================================ */

@media (min-width: 1025px) {

    /*
     * Default: strong editorial brand on one side,
     * functional navigation on the other.
     */
    .section.storly-footer[data-footer-layout="columns"]
    .storly-footer__top {
        grid-template-columns:
            minmax(
                250px,
                var(--ftr-brand-col, 32%)
            )
            minmax(0,1fr);

        gap:
            clamp(
                56px,
                6vw,
                96px
            );
    }


    .section.storly-footer[data-footer-layout="columns"]
    .storly-footer__brand {
        padding-block-end: 0;

        padding-inline-end:
            clamp(22px, 2.5vw, 40px);

        border-inline-end:
            1px solid
            var(--ftr-border);
    }


    /*
     * Existing alignment controls still own the content inside
     * the brand region.
     */
    .section.storly-footer
    .storly-footer__brand {
        padding-block-end: 0;
    }


    /* One group */
    .section.storly-footer[data-active-rail="1"]
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            minmax(160px, 1fr);
    }


    /* Two groups */
    .section.storly-footer[data-active-rail="2"]
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(130px,1fr)
            );
    }


    /* Three groups */
    .section.storly-footer[data-active-rail="3"]
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(118px,1fr)
            );
    }


    /* Four groups */
    .section.storly-footer[data-active-rail="4"]
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            repeat(
                4,
                minmax(110px,1fr)
            );
    }


    /* Dense footers get a clean grid rather than a ragged wrap. */
    .section.storly-footer[data-active-rail="5"]
    .storly-footer__rail,
    .section.storly-footer[data-active-rail="6"]
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );

        row-gap:
            clamp(34px, 4vw, 52px);
    }


    .section.storly-footer
    .storly-footer__col,
    .section.storly-footer
    .storly-footer__col--contact {
        min-width: 0;

        max-width: none;

        border-top: 0;
    }


    /*
     * STACKED
     */
    .section.storly-footer[data-footer-layout="stacked"]
    .storly-footer__top {
        grid-template-columns:
            minmax(0,1fr);

        gap:
            clamp(42px, 5vw, 72px);
    }


    .section.storly-footer[data-footer-layout="stacked"]
    .storly-footer__brand {
        width:
            min(
                100%,
                620px
            );

        max-width: 620px;
    }


    /*
     * CENTERED
     */
    .section.storly-footer[data-footer-layout="centered"]
    .storly-footer__top {
        grid-template-columns:
            minmax(0,1fr);

        justify-items: center;

        gap:
            clamp(44px, 5vw, 72px);

        text-align: center;
    }


    .section.storly-footer[data-footer-layout="centered"]
    .storly-footer__brand {
        width:
            min(
                100%,
                620px
            );

        max-width: 620px;
    }


    .section.storly-footer[data-footer-layout="centered"]
    .storly-footer__rail {
        width: 100%;
    }


    .section.storly-footer[data-footer-layout="centered"]
    .storly-footer__col {
        text-align: center;
    }


    .section.storly-footer[data-footer-layout="centered"]
    .storly-footer__links,
    .section.storly-footer[data-footer-layout="centered"]
    .storly-footer__contact {
        justify-items: center;
    }


    /*
     * COMPACT
     */
    .section.storly-footer[data-footer-layout="compact"]
    .storly-footer__top {
        grid-template-columns:
            minmax(0,1fr);

        gap: 30px;
    }


    .section.storly-footer[data-footer-layout="compact"]
    .storly-footer__brand {
        width: 100%;

        max-width: none;

        padding-block-end: 24px;

        border-bottom:
            1px solid
            var(--ftr-border);
    }

}


@media (min-width: 1360px) {

    .section.storly-footer[data-active-rail="5"]
    .storly-footer__rail {
        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            );
    }


    .section.storly-footer[data-active-rail="6"]
    .storly-footer__rail {
        grid-template-columns:
            repeat(
                6,
                minmax(0,1fr)
            );
    }

}


/* ============================================================
   BOTTOM BAR
   ============================================================ */

.section.storly-footer
.storly-footer__bottom {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        auto;

    align-items: center;

    gap:
        16px 28px;

    margin-top:
        clamp(46px, 5vw, 72px);

    padding-top: 22px;

    border-top:
        1px solid
        var(--ftr-border);

    font-size: 12px;
}


.section.storly-footer
.storly-footer__meta {
    min-width: 0;

    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 6px 14px;
}


.section.storly-footer
.storly-footer__copy,
.section.storly-footer
.storly-footer__powered {
    margin: 0;

    color:
        var(--ftr-text);
}


.section.storly-footer
.storly-footer__powered {
    opacity: .65;
}


.section.storly-footer
.storly-footer__powered a {
    color:
        var(--ftr-link);

    text-decoration: none;
}


.section.storly-footer
.storly-footer__policies {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 7px 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.section.storly-footer
.storly-footer__policies a {
    color:
        var(--ftr-text);

    font-size: 12px;

    text-decoration: none;

    transition:
        color .16s ease;
}


.section.storly-footer
.storly-footer__policies a:hover {
    color:
        var(--ftr-link-hover);
}


/* ============================================================
   PAYMENT METHODS
   ============================================================ */

.section.storly-footer
.storly-footer__payments {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.section.storly-footer
.storly-footer__payments li {
    color:
        var(--ftr-link);
}


.section.storly-footer
.storly-footer__payments
.is-mark {
    width:
        var(--ftr-payment-tile-w, 46px);

    height:
        var(--ftr-payment-tile-h, 30px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 5px;

    border:
        1px solid
        rgba(0,0,0,.09);

    border-radius: 6px;

    background: #fff;

    box-shadow:
        0 1px 2px
        rgba(0,0,0,.05);
}


.section.storly-footer
.storly-footer__payment-mark {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.section.storly-footer
.storly-footer__payments
.is-text {
    min-height: 30px;

    display: inline-flex;
    align-items: center;

    padding:
        0 10px;

    border:
        1px solid
        var(--ftr-border);

    border-radius: 6px;

    background:
        color-mix(
            in srgb,
            var(--ftr-heading) 4%,
            transparent
        );
}


.section.storly-footer
.storly-footer__payment-text {
    color:
        var(--ftr-link);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .01em;
}


/* ============================================================
   DIVIDER VARIANTS
   ============================================================ */

.section.storly-footer[data-divider="none"]
.storly-footer__bottom {
    border-top: 0;
}


.section.storly-footer[data-divider="rule"]
.storly-footer__top {
    padding-block-end:
        var(--ftr-column-gap, 44px);

    border-block-end:
        1px solid
        var(--ftr-border);
}


/* ============================================================
   BOTTOM BAR VARIANTS
   ============================================================ */

.section.storly-footer[data-bottom-bar="stacked"]
.storly-footer__bottom {
    grid-template-columns:
        minmax(0,1fr);

    align-items: start;

    justify-items: start;
}


.section.storly-footer[data-bottom-bar="centered"]
.storly-footer__bottom {
    grid-template-columns:
        minmax(0,1fr);

    justify-items: center;

    text-align: center;
}


.section.storly-footer[data-bottom-bar="centered"]
.storly-footer__meta {
    justify-content: center;
}


.section.storly-footer[data-bottom-bar="centered"]
.storly-footer__payments {
    justify-content: center;
}


/* ============================================================
   NO-TOP STATE
   ============================================================ */

.section.storly-footer[data-has-top="0"]
.storly-footer__bottom,
.section.storly-footer[data-active-rail="0"][data-show-brand="0"]
.storly-footer__bottom {
    margin-top: 0;

    padding-top: 0;

    border-top: 0;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

    .section.storly-footer
    .storly-footer__brand {
        width:
            min(
                100%,
                560px
            );

        padding-block-end:
            clamp(34px, 5vw, 48px);
    }


    .section.storly-footer
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            36px
            clamp(30px, 5vw, 52px);
    }


    .section.storly-footer
    .storly-footer__col {
        border-top: 0;
    }


    .section.storly-footer
    .storly-footer__bottom {
        grid-template-columns:
            minmax(0,1fr)
            auto;

        align-items: start;
    }


    .section.storly-footer
    .storly-footer__payments {
        grid-column: 1 / -1;

        justify-content: flex-start;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .section.storly-footer {
        padding-block:
            var(
                --ftr-pad-top,
                44px
            )
            var(
                --ftr-pad-bottom,
                26px
            );
    }


    .section.storly-footer
    .storly-footer__inner {
        padding-inline:
            clamp(18px, 5vw, 24px);
    }


    .section.storly-footer
    .storly-footer__brand {
        width: 100%;

        padding-block-end: 28px;
    }


    .section.storly-footer
    .storly-footer__wordmark {
        font-size:
            clamp(28px, 9vw, 38px);
    }


    .section.storly-footer
    .storly-footer__tagline {
        font-size: 13.5px;

        line-height: 1.7;
    }


    .section.storly-footer
    .storly-footer__social {
        margin-top: 20px;
    }


    .section.storly-footer
    .storly-footer__social a {
        width: 44px;
        height: 44px;

        border-radius: 11px;

        transform: none;
    }


    
    .section.storly-footer
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            minmax(0,1fr);

        gap: 0;

        border-bottom:
            1px solid
            var(--ftr-border);
    }


    .section.storly-footer
    .storly-footer__col {
        border-top:
            1px solid
            var(--ftr-border);
    }


    .section.storly-footer
    .storly-footer__links,
    .section.storly-footer
    .storly-footer__contact {
        gap: 5px;

        padding-bottom: 18px;
    }


    .section.storly-footer
    .storly-footer__links a,
    .section.storly-footer
    .storly-footer__contact a {
        min-height: 42px;

        font-size:
            max(
                13px,
                var(--ftr-link-size, 13px)
            );
    }


    .section.storly-footer
    .storly-footer__bottom {
        grid-template-columns:
            minmax(0,1fr);

        align-items: start;

        gap: 15px;

        margin-top: 28px;

        padding-top: 20px;
    }


    .section.storly-footer
    .storly-footer__meta {
        display: grid;

        gap: 3px;
    }


    .section.storly-footer
    .storly-footer__policies {
        justify-content: flex-start;

        gap: 8px 16px;
    }


    .section.storly-footer
    .storly-footer__payments {
        justify-content: flex-start;

        margin-top: 2px;
    }

}


/* ============================================================
   VISIBILITY — KEEP BUILDER LIVE STATE AUTHORITATIVE
   ============================================================ */

.section.storly-footer[data-show-brand="0"]
.storly-footer__brand,
.section.storly-footer[data-has-brand="0"]
.storly-footer__brand,
.section.storly-footer[data-show-social="0"]
.storly-footer__social,
.section.storly-footer[data-show-payments="0"]
.storly-footer__payments,
.section.storly-footer[data-show-policies="0"]
.storly-footer__policies {
    display: none;
}


.section.storly-footer[data-show-nav="0"]
.storly-footer__col[data-col="nav"],
.section.storly-footer[data-show-categories="0"]
.storly-footer__col[data-col="categories"],
.section.storly-footer[data-show-contact="0"]
.storly-footer__col[data-col="contact"] {
    display: none;
}


.section.storly-footer[data-active-rail="0"]
.storly-footer__rail {
    display: none;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.section.storly-footer
:is(a,button):focus-visible {
    outline:
        2px solid
        var(
            --core-focus,
            var(--ftr-link-hover)
        );

    outline-offset: 4px;

    border-radius: 5px;
}


@media (prefers-reduced-motion: reduce) {

    .section.storly-footer *,
    .section.storly-footer *::before,
    .section.storly-footer *::after {
        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}

/* === STORLY_CORE_FOOTER_PREMIUM_V1_END === */


/* === STORLY_CORE_FOOTER_STATIC_FINAL_V1_START === */

/* ============================================================
   STATIC FOOTER NAVIGATION
   All navigation groups remain visible at every viewport.
   ============================================================ */

.section.storly-footer
.storly-footer__col-title {
    margin:
        0 0 17px;

    color:
        var(--ftr-heading);

    font-size:
        var(--ftr-head-size, 11px);

    font-weight: 700;

    line-height: 1.25;

    letter-spacing:
        var(--ftr-head-tracking, .075em);

    opacity: .76;
}


.section.storly-footer
.storly-footer__col-title > span {
    display: block;
}


.section.storly-footer[data-head-caps="1"]
.storly-footer__col-title {
    text-transform:
        uppercase;
}


.section.storly-footer[data-head-caps="0"]
.storly-footer__col-title {
    letter-spacing: 0;

    text-transform: none;
}


.section.storly-footer
.storly-footer__links,
.section.storly-footer
.storly-footer__contact {
    display:
        grid !important;
}


@media (max-width: 767px) {

    .section.storly-footer
    .storly-footer__rail {
        display: grid;

        grid-template-columns:
            minmax(0,1fr);

        gap: 0;
    }


    .section.storly-footer
    .storly-footer__col {
        padding-block:
            22px;

        border-top:
            1px solid
            var(--ftr-border);
    }


    .section.storly-footer
    .storly-footer__col:last-child {
        border-bottom:
            1px solid
            var(--ftr-border);
    }


    .section.storly-footer
    .storly-footer__col-title {
        margin-bottom:
            12px;
    }


    .section.storly-footer
    .storly-footer__links,
    .section.storly-footer
    .storly-footer__contact {
        padding-bottom: 0;
    }


    .section.storly-footer
    .storly-footer__links a,
    .section.storly-footer
    .storly-footer__contact a {
        min-height:
            38px;

        display:
            inline-flex;

        align-items:
            center;
    }

}


@media (prefers-reduced-motion: reduce) {

    .section.storly-footer
    .storly-footer__social a,

    .section.storly-footer
    .storly-footer__links a,

    .section.storly-footer
    .storly-footer__contact a,

    .section.storly-footer
    .storly-footer__powered a,

    .section.storly-footer
    .storly-footer__policies a {
        transition:
            none !important;
    }

}

/* === STORLY_CORE_FOOTER_STATIC_FINAL_V1_END === */

/* "© 2026 Store Name" mixes a neutral symbol, digits and (usually) Latin text.
   In an Arabic storefront the bidi algorithm reorders that into
   "Store Name 2026 ©"; isolating the line keeps it in the order it was
   written, whichever way the page runs. */
.storly-footer__copy { unicode-bidi: isolate; }

/* =========================================================================
   Footer — accents, contact glyphs, assurances.

   Layered on the block above so every --ft-* control a merchant sets still
   wins. The accent colour is the theme's own, so a merchant changing their
   palette changes these too; nothing here hardcodes a brand colour.
   ========================================================================= */

/* The palette's accent is chosen against the page, which is usually light; the
   footer may be dark. Mixing it toward the footer's own ink keeps the hue and
   guarantees it stays visible whichever surface the merchant picked. */
.storly-footer { --ft-accent-ink: color-mix(in srgb, var(--accent, currentColor) 55%, currentColor); }

/* A short rule under each column heading, in the theme's accent. */
.storly-footer__col-title > span { position: relative; display: inline-block; padding-block-end: 10px; }
.storly-footer__col-title > span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 26px;
  height: 2px;
  background: var(--ft-accent-ink, currentColor);
  opacity: .95;
}

/* Links carry a chevron that leans in on hover. */
.storly-footer__links li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.storly-footer__links li a::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
  transition: transform .18s ease, opacity .18s ease;
}
[dir="rtl"] .storly-footer__links li a::before { transform: rotate(-135deg); }
.storly-footer__links li a:hover::before { opacity: .9; }

/* The brand kicker: a short line set between two hairlines. */
.storly-footer__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ft-accent-ink, currentColor);
  font-size: .8125rem;
  letter-spacing: .04em;
}
.storly-footer__kicker::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

/* Social marks and contact glyphs share one round badge. */
.storly-footer__social li a,
.storly-footer__contact-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 9%, transparent);
  place-items: center;
  transition: background-color .18s ease, color .18s ease;
}
.storly-footer__social li a:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.storly-footer__social li a svg { width: 17px; height: 17px; }
.storly-footer__contact-icon { color: var(--ft-accent-ink, currentColor); }
.storly-footer__contact-icon svg { width: 17px; height: 17px; }

.storly-footer__contact li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
}
.storly-footer__contact-icon { grid-row: span 2; }
.storly-footer__contact li:not(:has(.storly-footer__contact-label)) .storly-footer__contact-icon { grid-row: auto; }

/* Assurances: one row of promises the merchant wrote, above the bottom bar. */
.storly-footer__assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin: clamp(26px, 3.4vw, 44px) 0 0;
  padding: clamp(22px, 3vw, 34px) 0 0;
  padding-block-end: clamp(4px, 1vw, 10px);
  border-block-start: 1px solid var(--ft-border, currentColor);
  border-color: color-mix(in srgb, currentColor 16%, transparent);
  list-style: none;
}
.storly-footer__assurances li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.storly-footer__assurance-icon { display: grid; width: 38px; height: 38px; flex: none; color: var(--ft-accent-ink, currentColor); place-items: center; }
.storly-footer__assurance-icon svg { width: 25px; height: 25px; }
.storly-footer__assurance-text { display: grid; gap: 2px; min-width: 0; }
.storly-footer__assurance-text strong { font-size: .9375rem; font-weight: 600; }
.storly-footer__assurance-text span { font-size: .8125rem; opacity: .72; }

/* The caption beside the payment marks. */
.storly-footer__payments-title { margin: 0; font-size: .8125rem; opacity: .78; }

/* ── WhatsApp chat button ─────────────────────────────────────────────────
   Fixed in the corner of every page when the merchant turns it on. Below the
   header drawer and its overlay, above the page. */
.storly-wa-button {
  position: fixed;
  z-index: 200;
  /* Physical sides: the setting reads Right / Left in every language. */
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 8px 24px rgba(12, 14, 18, .18);
  color: #fff;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.storly-wa-button[data-side="start"] { right: auto; left: 20px; }
.storly-wa-button:hover { box-shadow: 0 12px 28px rgba(12, 14, 18, .24); transform: translateY(-2px); }
.storly-wa-button:focus-visible { outline: 3px solid #25d366; outline-offset: 3px; }
.storly-wa-button svg { width: 30px; height: 30px; }

@media (max-width: 767px) {
  .storly-wa-button { width: 52px; height: 52px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .storly-wa-button[data-side="start"] { right: auto; left: 16px; }
  .storly-wa-button svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) { .storly-wa-button { transition: none; } }
@media print { .storly-wa-button { display: none; } }