/*
================================================

Space Vanta Theme 1.0

Module:
Footer v2 ("floating plate") + follow dock

Version:
FOOTER-V2-VISUAL-002 (test build)

Colour source:
SV-v0.1 colour codes, read from the existing --svd-* tokens
(sv-ui/dna.css) with the SV-v0.1 hex as fallback.

  SV-P50   page          --svd-paper
  SV-G950  deep plate    --svd-g950
  SV-G900  standard plate / deep card
  SV-G800  soft plate / standard card
  SV-G700  soft card / under-plate
  SV-G50   main text     --svd-g50
  SV-G200  body text     --svd-g200
  SV-G300  muted text    --svd-g300   (never on the card)
  SV-G400  control edge  --svd-g400
  SV-B300  edge light    --svd-edge   (graphics only, never text)
  SV-B400  seam bright   --svd-seam-hi
  SV-B600  primary btn   #1F55D6      (no token yet)

Tones (section setting "Plate tone", data-tone on .svf):
  soft (default)  plate G800
  standard        plate G900
  deep            plate G950 (first test version)

Rules kept:
- Blue is only: seam line, focus ring, one primary button
- Text pairs >= 4.5:1 in all three tones
- Hover = brighter text + blue underline (blue never used as text colour
  on the dark plate)
- Font: inherits the theme font (var(--sv-font-sans))

Breakpoints:
  >= 1100px  three columns
  768-1099   brand + contact on top, nav under
  < 768      single column, nav = accordion

================================================
*/


/*
---------------------------------
Tokens
---------------------------------
*/

.svf {
    --svf-page: var(--svd-paper, #fbf7f0);

    --svf-text: var(--svd-g50, #fffbfa);
    --svf-text-2: var(--svd-g200, #dbd9da);
    --svf-text-3: var(--svd-g300, #c1bdbe);
    --svf-ctrl: var(--svd-g400, #aeb1b9);
    --svf-edge: var(--svd-edge, #7dadde);
    --svf-seam: var(--svd-seam-hi, #4d8dff);
    --svf-btn: #1f55d6;
    --svf-btn-hi: #16419f;

    /* soft (default) */
    --svf-plate: var(--svd-g800, #3f4553);
    --svf-card: var(--svd-g700, #525864);
    --svf-under: var(--svd-g700, #525864);
    --svf-line: var(--svd-g700, #525864);
    --svf-chip: var(--svd-g800, #3f4553);
    --svf-deco: var(--svd-g600, #616570);
    --svf-shadow: 0 22px 48px rgba(63, 69, 83, .20);
    --svf-shadow-card: 0 10px 24px rgba(31, 35, 43, .22);
}

.svf[data-tone="standard"] {
    --svf-plate: var(--svd-g900, #313540);
    --svf-card: var(--svd-g800, #3f4553);
    --svf-under: var(--svd-g800, #3f4553);
    --svf-line: var(--svd-g800, #3f4553);
    --svf-chip: var(--svd-g700, #525864);
    --svf-deco: var(--svd-g700, #525864);
    --svf-shadow: 0 24px 52px rgba(49, 53, 64, .22);
    --svf-shadow-card: 0 12px 26px rgba(31, 35, 43, .24);
}

.svf[data-tone="deep"] {
    --svf-plate: var(--svd-g950, #1f232b);
    --svf-card: var(--svd-g900, #313540);
    --svf-under: var(--svd-g800, #3f4553);
    --svf-line: var(--svd-g800, #3f4553);
    --svf-chip: var(--svd-g800, #3f4553);
    --svf-deco: var(--svd-g700, #525864);
    --svf-shadow: 0 24px 56px rgba(31, 35, 43, .22);
    --svf-shadow-card: 0 12px 28px rgba(0, 0, 0, .25);
}


/*
---------------------------------
Root / stage
---------------------------------
*/

.svf {
    position: relative;

    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
    padding: 56px 24px 36px;

    box-sizing: border-box;

    background: var(--svf-page);

    font-family: var(--sv-font-sans, inherit);
    font-size: 15px;
    line-height: 1.5;

    color: var(--svf-text);

    overflow-x: clip;
}

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

.svf__stage {
    position: relative;

    width: 100%;
    max-width: 1440px;
    min-width: 0;

    margin: 0 auto;
}

/* the lower, offset plate (layering DNA) */
.svf__stage::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: 48px;
    right: 48px;
    bottom: -12px;

    height: 40px;

    border-radius: 0 0 28px 28px;

    background: var(--svf-under);

    pointer-events: none;
}


/*
---------------------------------
Plate
---------------------------------
*/

.svf__plate {
    position: relative;
    z-index: 1;

    padding: 64px 64px 28px;

    border-radius: 28px;

    background: var(--svf-plate);

    box-shadow: var(--svf-shadow);
}

/* the broken seam line on the top edge (fragment DNA, used once) */
.svf__plate::before {
    content: "";

    position: absolute;

    top: -1px;

    /* inset by the corner radius so the line never overhangs the curve */
    left: 28px;
    right: 28px;

    height: 6px;

    pointer-events: none;

    background:
        linear-gradient(var(--svf-edge), var(--svf-edge)) 28px 0 / 168px 2px no-repeat,
        linear-gradient(var(--svf-seam), var(--svf-seam)) 208px 4px / 44px 2px no-repeat,
        linear-gradient(rgba(125, 173, 222, .55), rgba(125, 173, 222, .55)) 264px 0 / 420px 2px no-repeat,
        linear-gradient(var(--svf-edge), var(--svf-edge)) 696px 4px / 28px 2px no-repeat,
        linear-gradient(rgba(125, 173, 222, .3), rgba(125, 173, 222, .3)) 736px 0 / 540px 2px no-repeat;
}


/*
---------------------------------
Top grid
---------------------------------
*/

.svf__top {
    display: grid;

    grid-template-columns: 300px minmax(0, 1fr) 340px;
    grid-template-areas: "brand nav contact";

    column-gap: 64px;
    row-gap: 48px;

    align-items: start;

    min-width: 0;
}

.svf__brand {
    grid-area: brand;
    min-width: 0;
}

.svf__contact {
    grid-area: contact;
    min-width: 0;
}

.svf__navs {
    grid-area: nav;

    display: grid;

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

    gap: 40px;

    align-items: start;

    min-width: 0;
}


/*
---------------------------------
Brand
---------------------------------
*/

.svf-brand__name {
    font-size: 28px;
    font-weight: 700;

    letter-spacing: .01em;
    line-height: 1.2;

    color: var(--svf-text);

    overflow-wrap: anywhere;
}

.svf-brand__tagline {
    max-width: 260px;

    margin: 14px 0 0;

    font-size: 15px;
    line-height: 1.6;

    color: var(--svf-text-2);
}


/*
---------------------------------
Navigation
---------------------------------
*/

.svf-nav {
    min-width: 0;
}

.svf-nav__col {
    display: block;
}

.svf-nav__summary {
    display: flex;

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

    margin: 0 0 18px;

    list-style: none;

    pointer-events: none;
}

.svf-nav__summary::-webkit-details-marker {
    display: none;
}

.svf-nav__summary::marker {
    display: none;
}

.svf-nav__title {
    font-size: 12px;
    font-weight: 600;

    letter-spacing: .12em;
    line-height: 1.3;

    text-transform: uppercase;

    color: var(--svf-text-3);

    overflow-wrap: anywhere;
}

.svf-nav__sign {
    display: none;
}

.svf-nav__list,
.svf-nav__sub {
    margin: 0;
    padding: 0;

    list-style: none;
}

.svf-nav__list {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.svf-nav__sub {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 10px;
    padding-left: 14px;

    border-left: 1px solid var(--svf-line);
}

.svf-nav__sub[hidden] {
    display: none;
}

.svf-nav__sub .svf-nav__link,
.svf-nav__sub .svf-nav__label {
    font-size: 14px;

    color: var(--svf-text-3);
}

.svf-nav__row {
    display: flex;

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

    gap: 8px;
}

.svf-nav__link,
.svf-nav__label {
    display: inline-block;

    max-width: 100%;

    font-size: 15px;
    line-height: 1.4;

    color: var(--svf-text-2);

    text-decoration: none;

    overflow-wrap: anywhere;
}

.svf-nav__link {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;

    transition: color .2s ease, text-decoration-color .2s ease;
}

.svf-nav__link:hover {
    color: var(--svf-text);

    text-decoration-color: var(--svf-edge);
}

/* sub-group toggle (all sizes) */

.svf-nav__toggle {
    flex: none;

    display: inline-flex;

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

    width: 28px;
    height: 28px;

    /* does not make the row taller than a plain link */
    margin: -4px 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: var(--svf-text-3);

    cursor: pointer;
}

.svf-nav__toggle::before {
    content: "";

    width: 7px;
    height: 7px;

    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;

    transform: translateY(-2px) rotate(45deg);

    transition: transform .2s ease;
}

.svf-nav__toggle[aria-expanded="true"]::before {
    transform: translateY(2px) rotate(225deg);
}

.svf-nav__toggle:hover {
    color: var(--svf-text);
}

/* accordion mode (set by footer-v2.js: mobile, or "Desktop columns: collapsed") */

.svf-nav[data-mode="accordion"] {
    border-top: 1px solid var(--svf-line);
}

.svf-nav[data-mode="accordion"] .svf-nav__summary {
    min-height: 56px;

    margin: 0;

    cursor: pointer;

    pointer-events: auto;
}

.svf-nav[data-mode="accordion"] .svf-nav__title {
    font-size: 16px;
    font-weight: 600;

    letter-spacing: 0;

    text-transform: none;

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

.svf-nav[data-mode="accordion"] .svf-nav__sign {
    display: block;

    width: 24px;

    font-size: 22px;
    line-height: 1;

    text-align: center;

    color: var(--svf-text-3);
}

.svf-nav[data-mode="accordion"] .svf-nav__sign::before {
    content: "+";
}

.svf-nav[data-mode="accordion"] .svf-nav__col[open] .svf-nav__sign::before {
    content: "\2212";
}

.svf-nav[data-mode="accordion"] .svf-nav__list {
    gap: 0;

    padding-bottom: 8px;
}


/*
---------------------------------
Contact card
---------------------------------
*/

.svf-contact__card {
    padding: 24px;

    border: 1px solid var(--svf-line);
    border-radius: 20px;

    background: var(--svf-card);

    box-shadow: var(--svf-shadow-card);
}

.svf-contact__title {
    margin: 0;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;

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

.svf-contact__text {
    margin: 8px 0 20px;

    font-size: 14px;
    line-height: 1.55;

    color: var(--svf-text-2);
}

.svf-contact__actions {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.svf-contact__note {
    margin: 12px 0 0;

    font-size: 13px;
    line-height: 1.5;

    color: var(--svf-text-2);
}

.svf-contact__social {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.svf-contact__actions:not(:empty)~.svf-contact__social:not(:empty),
.svf-contact__note~.svf-contact__social:not(:empty) {
    margin-top: 16px;
}

.svf-btn {
    display: flex;

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

    min-height: 48px;

    padding: 0 20px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

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

.svf-btn--primary {
    background: var(--svf-btn);

    color: #fff;
}

.svf-btn--primary:hover {
    background: var(--svf-btn-hi);
}

.svf-btn--ghost {
    border-color: var(--svf-ctrl);

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

.svf-btn--ghost:hover {
    border-color: var(--svf-edge);
}

.svf-chip {
    display: inline-flex;

    align-items: center;

    min-height: 36px;

    padding: 0 14px;

    border: 1px solid transparent;
    border-radius: 999px;

    background: var(--svf-chip);

    font-size: 13px;
    font-weight: 500;

    color: var(--svf-text-2);

    text-decoration: none;

    transition: color .2s ease, border-color .2s ease;
}

.svf-chip:hover {
    border-color: var(--svf-edge);

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


/*
---------------------------------
Payments row (+ language / currency mount)
---------------------------------
*/

.svf__mid {
    margin-top: 56px;
    padding-top: 28px;

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

.svf__mid:empty {
    display: none;
}

.svf-pay {
    display: flex;

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

    flex-wrap: wrap;

    gap: 16px 32px;
}

.svf-pay__group {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px 16px;
}

.svf-pay__label {
    font-size: 13px;

    color: var(--svf-text-3);
}

.svf-pay__list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.svf-pay__item {
    display: inline-flex;

    align-items: center;

    height: 28px;

    padding: 0 12px;

    border: 1px solid var(--svf-deco);
    border-radius: 8px;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .04em;

    color: var(--svf-text-2);
}

/* the Shopline app draws its selectors in here; empty = hidden */

.svf-locale {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-left: auto;

    font-size: 13px;

    color: var(--svf-text-2);
}

.svf-locale:empty {
    display: none;
}


/*
---------------------------------
Legal row
---------------------------------
*/

.svf__bottom {
    margin-top: 28px;
    padding-top: 24px;

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

.svf-legal {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 48px;
}

.svf-legal__entity {
    flex: 1 1 auto;

    max-width: 760px;
    min-width: 0;

    font-size: 13px;
    line-height: 1.65;

    color: var(--svf-text-3);
}

.svf-legal__entity p {
    margin: 0;

    overflow-wrap: anywhere;
}

.svf-legal__entity p+p {
    margin-top: 6px;
}

.svf-legal__copy {
    font-weight: 600;

    color: var(--svf-text-2);
}

.svf-legal__line strong {
    font-weight: 600;

    color: var(--svf-text-2);
}

.svf-legal__links {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px 24px;

    max-width: 440px;

    margin: 0;
    padding: 0;

    list-style: none;

    font-size: 13px;
    line-height: 1.5;

    text-align: right;
}

.svf-legal__links a,
.svf-legal__links span {
    color: var(--svf-text-2);

    text-decoration: none;
}

.svf-legal__links a {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;

    transition: color .2s ease, text-decoration-color .2s ease;
}

.svf-legal__links a:hover {
    color: var(--svf-text);

    text-decoration-color: var(--svf-edge);
}


/*
---------------------------------
Focus
---------------------------------
*/

.svf a:focus-visible,
.svf button:focus-visible,
.svf summary:focus-visible {
    outline: 2px solid var(--svf-edge);
    outline-offset: 3px;

    border-radius: 6px;
}


/*
---------------------------------
Follow dock
(the footer's "following" form; counterpart of the follow header.
 footer-v2.js lifts it to <body>, so it carries its own tokens.)
---------------------------------
*/

.svf-dock {
    --svfd-paper: #fbf7f0;
    --svfd-ink: #252321;
    --svfd-line: rgba(120, 104, 84, .22);
    --svfd-hover: rgba(120, 104, 84, .10);
    --svfd-blue: #1f55d6;
    --svfd-seam: #4d8dff;

    position: fixed;
    z-index: 850; /* below the header (900), below the Find / drawer layers (10000) */

    right: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;

    gap: 4px;

    padding: 6px;

    border: 1px solid var(--svfd-line);
    border-radius: 999px;

    background: var(--svfd-paper);

    box-shadow:
        0 2px 4px rgba(70, 48, 24, .06),
        0 12px 28px -10px rgba(70, 48, 24, .18);

    font-family: var(--sv-font, "Inter", "Manrope", "Noto Sans SC", "Noto Sans TC", -apple-system, "Segoe UI", sans-serif);
    font-size: 14px;
    line-height: 1.2;

    color: var(--svfd-ink);

    opacity: 0;
    visibility: hidden;

    transform: translateY(24px);

    transition:
        transform .38s cubic-bezier(.2, .7, .2, 1),
        opacity .25s ease,
        visibility 0s linear .38s;
}

.svf-dock *,
.svf-dock *::before,
.svf-dock *::after {
    box-sizing: border-box;
}

/* the broken seam, once, on the dock edge */
.svf-dock::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 26px;

    width: 36px;
    height: 2px;

    background: var(--svfd-seam);

    pointer-events: none;
}

.svf-dock.is-visible {
    opacity: 1;
    visibility: visible;

    transform: none;

    transition-delay: 0s;
}

.svf-dock__btn,
.svf-dock__top {
    display: inline-flex;

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

    gap: 8px;

    height: 44px;

    margin: 0;

    border: 0;
    border-radius: 999px;

    background: transparent;

    font: inherit;
    font-weight: 600;

    color: var(--svfd-ink);

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition: background-color .2s ease, color .2s ease;
}

.svf-dock__btn {
    padding: 0 16px;
}

.svf-dock__top {
    width: 44px;

    padding: 0;
}

.svf-dock__btn:hover,
.svf-dock__top:hover {
    background: var(--svfd-hover);

    color: var(--svfd-blue);
}

.svf-dock svg {
    flex: none;

    width: 18px;
    height: 18px;
}

.svf-dock__sep {
    width: 1px;
    height: 22px;

    margin: 0 2px;

    background: var(--svfd-line);
}

.svf-dock a:focus-visible,
.svf-dock button:focus-visible {
    outline: 2px solid #2f6bff;
    outline-offset: 2px;
}


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

@media (max-width: 1099px) {

    .svf__plate {
        padding: 56px 40px 28px;
    }

    .svf__top {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas:
            "brand contact"
            "nav nav";

        column-gap: 40px;
    }

}


/*
---------------------------------
Mobile (native layout)
---------------------------------
*/

@media (max-width: 767px) {

    .svf {
        padding: 40px 12px 28px;
    }

    .svf__stage::after {
        left: 28px;
        right: 28px;
        bottom: -10px;

        height: 32px;

        border-radius: 0 0 24px 24px;
    }

    .svf__plate {
        padding: 40px 20px 24px;

        border-radius: 24px;
    }

    .svf__plate::before {
        left: 24px;
        right: 24px;

        background:
            linear-gradient(var(--svf-edge), var(--svf-edge)) 4px 0 / 96px 2px no-repeat,
            linear-gradient(var(--svf-seam), var(--svf-seam)) 110px 4px / 28px 2px no-repeat,
            linear-gradient(rgba(125, 173, 222, .5), rgba(125, 173, 222, .5)) 148px 0 / 120px 2px no-repeat;
    }

    .svf__top {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "contact"
            "nav";

        row-gap: 28px;
    }

    .svf-brand__name {
        font-size: 26px;
    }

    .svf-brand__tagline {
        max-width: none;

        margin-top: 10px;

        line-height: 1.55;
    }

    .svf-contact__card {
        padding: 20px;
    }

    .svf-contact__title {
        font-size: 17px;
    }

    .svf-contact__text {
        margin: 6px 0 16px;

        line-height: 1.5;
    }

    .svf-contact__actions:not(:empty)~.svf-contact__social:not(:empty),
    .svf-contact__note~.svf-contact__social:not(:empty) {
        margin-top: 14px;
    }

    .svf-chip {
        min-height: 44px;

        padding: 0 16px;
    }

    /* navigation: one column per row */

    .svf__navs {
        grid-auto-flow: row;
        grid-auto-columns: auto;

        gap: 0;

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

    .svf-nav__item>.svf-nav__row>.svf-nav__link,
    .svf-nav__item>.svf-nav__row>.svf-nav__label,
    .svf-nav__item>.svf-nav__link,
    .svf-nav__item>.svf-nav__label {
        display: block;

        padding: 12px 0;
    }

    .svf-nav__toggle {
        width: 44px;
        height: 44px;

        margin: 0;
    }

    .svf-nav__list {
        gap: 0;
    }

    .svf-nav__sub {
        gap: 0;

        margin-top: 0;
        margin-bottom: 4px;
    }

    .svf-nav__sub .svf-nav__item>.svf-nav__row>.svf-nav__link,
    .svf-nav__sub .svf-nav__item>.svf-nav__row>.svf-nav__label,
    .svf-nav__sub .svf-nav__item>.svf-nav__link,
    .svf-nav__sub .svf-nav__item>.svf-nav__label {
        padding: 10px 0;
    }

    .svf__mid {
        margin-top: 28px;
        padding-top: 0;

        border-top: 0;
    }

    .svf-pay {
        flex-direction: column;

        align-items: flex-start;

        gap: 16px;
    }

    .svf-pay__group {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

    .svf-locale {
        margin-left: 0;
    }

    .svf__bottom {
        margin-top: 28px;
        padding-top: 20px;
    }

    .svf-legal {
        flex-direction: column;

        gap: 12px;
    }

    .svf-legal__entity {
        font-size: 12.5px;
    }

    .svf-legal__entity p+p {
        margin-top: 8px;
    }

    .svf-legal__links {
        flex-direction: row;
        justify-content: flex-start;

        max-width: none;

        gap: 0 20px;

        text-align: left;
    }

    .svf-legal__links a,
    .svf-legal__links span {
        display: block;

        padding: 11px 0;
    }

}


/* follow dock on phones: the island mirrors the header island, at the bottom */

@media (max-width: 749px) {

    .svf-dock {
        left: 10px;
        right: 10px;

        bottom: calc(10px + env(safe-area-inset-bottom, 0px));

        justify-content: space-between;

        transform: translateY(calc(100% + 24px));
    }

    .svf-dock__btn {
        flex: 1 1 0;

        padding: 0 8px;

        font-size: 14px;
    }

    .svf-dock::before {
        left: 22px;
    }

}

@media (max-width: 360px) {

    .svf-dock__btn {
        font-size: 13px;
    }

    .svf-dock svg {
        display: none;
    }

}


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

    .svf a,
    .svf-btn,
    .svf-nav__toggle::before,
    .svf-dock,
    .svf-dock__btn,
    .svf-dock__top {
        transition: none;
    }

}