/* =============================================================================
   FOOTER REDESIGN — the storefront's footer, BOTH widths
   (Phase 1b Step 8 = desktop, Step 9 = mobile + the consolidation)

   References:
     · Docs/Redesign/Approved/footer/Daric Footer Desktop (standalone).html
     · Docs/Redesign/Approved/footer/Daric Footer Mobile (standalone).html
   Both are Claude Design canvas pages: 100% inline styles, no classes, no @media,
   and two canvas-only pseudo-attributes (style-hover / style-focus) which have no
   meaning in a browser. Everything below is those inline styles re-expressed as
   real CSS, with every colour routed through a --brand-* token.

   ONE TREE, TWO PRESENTATIONS. There is no longer a separate mobile footer. Step 9
   deleted the MobileFooter branch of the Footer ViewComponent (and the
   Constant.FooterType discriminator with it), so SECTIONS 1-5 below describe the
   markup at EVERY width and SECTION 6 re-lays that same markup out below 992px.
   Anything you add to SECTIONS 1-5 lands on phones too — check it there.

   WHY A SEPARATE SHEET, not header-merge.css
   header-merge.css is 6,500 lines and named for the header. The footer shares its
   conventions — numbered sections, every override naming the shop.css rule it
   beats — but not its file.

   LOAD ORDER IS A CONTRACT. Views/Shared/Partials/_FooterStyles.cshtml must be
   included AFTER ~/css/shop.css. SECTION 1 exists to outrank shop.css selectors
   that a single class cannot beat. Views/Shared/Components/Footer/Default.cshtml
   asserts (in Development) that the partial has run.

   SCOPE. Every rule is scoped to `.footer-site` — now the ONLY footer wrapper the
   layouts emit. `.footer-mobile-site` no longer exists in any markup; the shop.css
   rules that targeted it (5918-6122) simply stop matching.

   SECTIONS
     1  shop.css NEUTRALIZERS
     2  LAYER 1 — the newsletter bar
     3  LAYER 2 — brand, contact cards, link columns
     4  LAYER 3 — the trust bar
     5  LAYER 4 — the copyright bar
     6  MOBILE — everything inside @media (max-width: 991px)
   ============================================================================= */


/* =============================================================================
   SECTION 1 — shop.css NEUTRALIZERS

   The redesigned markup drops the legacy class names (container-manual,
   share-shop, footer-links-split, description-footer-site, footer-link-download,
   connect-contacts …), so the ~480 lines of footer CSS in shop.css mostly stop
   matching on their own. Only what follows still lands, and has to be undone.
   ============================================================================= */

/* shop.css:3574-3582 paints the wrapper grey with a 3px top border and a 15px
   top margin. The redesign draws its own slab, so the wrapper carries no chrome
   of its own. The margin becomes breathing room ABOVE the slab (the reference is
   a floating card, not a full-bleed band).

   PHASE 1e — THE BACKGROUND IS NOW THE PAGE FRAME'S CLOSING BAND. This was
   `background: none`, which was right while the footer floated on the page. The
   footer is now the LAST block inside .page-frame (header-merge.css SECTION 9),
   and the frame reference gives that block its own slightly warmer ground so the
   bottom of the panel reads as closed rather than as the slab trailing off.
   --brand-footer-from is the reference's #F8F4EC exactly, and it is also the
   slab's own top gradient stop, so the band and the card share an edge colour.

   THIS RULE HAS TO LIVE HERE, not in header-merge.css SECTION 9 with the rest of
   the frame: _Layout.cshtml renders _FooterStyles AFTER _HeaderStyles, so this
   file wins every equal-specificity tie against header-merge.css. The same
   declaration in SECTION 9 was silently overridden by the `background: none`
   this replaces.

   The slab itself is untouched — same 1440 cap, same 22px corners, same gilded
   edge and shadow. The panel's own bottom corners come from its `overflow: clip`,
   so the footer needs no radius of its own. */
.footer-site {
    background-color: var(--brand-footer-from);
    border-top: 0;
    margin-top: 28px;
    padding: 0 15px 24px;
}

/* shop.css:3576-3578 — `.footer-site .container-manual section` draws a 1px
   #b0bec5 line under every <section>. The new markup has no .container-manual,
   but a defensive reset costs nothing and documents the intent. */
.footer-site section {
    border-bottom: 0;
}

/* The SocialLinks ViewComponent's markup still cannot change — it emits
   `.row-manual-fixed.share-row > a > i.fa`, and while Step 9 removed the mobile
   footer that shared it, the icon class is a free-text Font-Awesome string admins
   type into the admin panel and store in the database (SocialLinkIcon), so
   replacing the <i> with an inline SVG would need a data migration. shop.css:
   3659-3680 paints those anchors with the legacy purple `--main-color` (#30205C),
   7px radius, 23px glyph. The design wants 40x40 white tiles with a neutral
   hairline that turns gold on hover. Overridden here, not in shop.css.

   The FA4 <i> keeps working exactly as before — only the chrome around it moves. */
.footer-site .share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* shop.css:3659-3663 sets THREE things on this row that fight the new layout:
       `padding-right: 50px` pushed the icons 50px off the column's right edge, and
       `direction: ltr` + `text-align: left` made the flex row lay out from the LEFT
       — so the icons sat at the far side of the brand column, out of line with the
       "ما را دنبال کنید" heading directly above them.

       The direction reset is the load-bearing one: the row is a flex container, so
       `direction` decides which end the first icon starts from, and the document is
       rtl everywhere else. It is easy to miss because the icons still LOOK like a
       tidy row — just the wrong one. */
    padding: 0;
    margin: 0;
    direction: rtl;
    text-align: right;
}

.footer-site .share-row a {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-md);
    color: var(--brand-text-muted);
    font-size: 18px;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.footer-site .share-row a:hover,
.footer-site .share-row a:focus-visible {
    background-color: var(--brand-surface-2);
    border-color: var(--brand-primary);
    color: var(--brand-primary-deep);
    transform: translateY(-2px);
}

/* shop.css sets `.share-row a i` colour via the anchor; make the glyph inherit so
   the hover above carries. */
.footer-site .share-row a > i {
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

/* Preflight is disabled, so the ONLY [hidden] rule in play comes from the UA
   stylesheet — and ANY author rule beats a UA rule regardless of specificity.
   The read-more link is display:flex and ships hidden until footer.js measures
   the description, so without this it would never be hidden at all.
   (Same trap as the search panel's .search-cta — gotchas log, 2026-08-30.)
   Kept LAST in this section so it wins against the display rules below. */
.footer-site [hidden] {
    display: none !important;
}


/* =============================================================================
   THE SLAB

   One rounded, bordered, floating card holding all four layers, with the 3px
   gilded edge along its top. `overflow: hidden` is what clips the layer
   gradients to the 22px corners.
   ============================================================================= */

.footer-slab {
    max-width: 1440px;
    margin: 0 auto;
    border: 1px solid var(--brand-primary-rule);
    border-radius: var(--radius-brand-footer);
    overflow: hidden;
    background: linear-gradient(180deg, var(--brand-footer-from), var(--brand-footer-to));
    box-shadow: var(--brand-shadow-footer);
    color: var(--brand-text);
    font-size: 13px;
}

/* The gilded top edge. Seven stops: transparent → pale → gold → sheen → gold →
   pale → transparent, so the light reads as travelling across a metal lip. The
   two transparent ends are `transparent` rather than the reference's
   rgba(217,169,62,0) — same rendered result, and it does not hardcode the gold. */
.footer-gild {
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--brand-primary) 55%, #FFFFFF) 12%,
        var(--brand-primary) 38%,
        var(--brand-primary-sheen) 50%,
        var(--brand-primary) 62%,
        color-mix(in oklab, var(--brand-primary) 55%, #FFFFFF) 88%,
        transparent);
}

/* Shared heading rule: the small gold hairline under each column title. Fades to
   the LEFT because the document is dir="rtl" and the fade must run away from the
   text's start edge. `to left` is correct here and must not be "flipped" to
   `to right` — the reference is RTL too. */
.footer-rule {
    display: block;
    height: 1px;
    background: linear-gradient(to left, var(--brand-primary-rule-strong), transparent);
}

/* Links inside the slab. shop.css gives footer anchors #81858b; the design runs
   muted → gold-deep on hover for navigation, and the reverse for accent links. */
.footer-slab a {
    color: inherit;
    text-decoration: none;
}


/* =============================================================================
   SECTION 2 — LAYER 1, THE NEWSLETTER BAR
   ============================================================================= */

.footer-news {
    position: relative;
    padding: 34px var(--footer-gutter);
    border-bottom: 1px solid var(--brand-primary-rule);
    background:
        radial-gradient(720px 220px at 88% 0%, var(--brand-primary-glow-strong), transparent 72%),
        linear-gradient(115deg, var(--brand-surface-cream), var(--brand-primary-band));
}

.footer-news-row {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.footer-news-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 420px;
    min-width: 0;
}

.footer-news-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--brand-text);
}

.footer-news-badge {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-brand-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--brand-surface-gilt), var(--brand-primary-tint));
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-primary-deep);
}

.footer-news-sub {
    max-width: 520px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
    color: var(--brand-text-muted);
    text-wrap: pretty;
}

.footer-news-form {
    flex: 0 1 560px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-news-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The field is a <label> wrapping the icon and the input, so the whole box is a
   click target and :focus-within gives it the ring the reference draws with the
   canvas-only style-focus attribute. */
.footer-news-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-rule);
    border-radius: var(--radius-brand-lg);
    box-shadow: var(--brand-shadow-inset);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.footer-news-field:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-tint);
}

.footer-news-field > svg {
    flex: none;
    color: var(--brand-text-soft);
}

/* Preflight is off, so the input keeps its UA border and background unless told
   otherwise — every one of these is load-bearing, not decoration. */
.footer-news-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--brand-text);
}

.footer-news-field input::placeholder {
    color: var(--brand-text-soft);
}

.footer-news-submit {
    flex: none;
    height: 52px;
    padding: 0 30px;
    border-radius: var(--radius-brand-lg);
    border: 1px solid var(--brand-primary-frame-strong);
    background: linear-gradient(145deg, var(--brand-primary-sun), var(--brand-primary) 46%, var(--brand-primary-sheen));
    color: var(--brand-primary-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--brand-shadow-cta-gold);
    transition: transform .18s ease, opacity .18s ease;
}

.footer-news-submit:hover:not(:disabled) {
    transform: translateY(-2px);
}

.footer-news-submit:disabled {
    cursor: default;
    opacity: .65;
    transform: none;
}

.footer-news-note {
    padding-inline-start: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

/* The result line. One element, three states, so a second message can never be
   left on screen underneath the first. */
.footer-news-status {
    padding-inline-start: 4px;
    font-size: 12px;
    font-weight: 600;
}

.footer-news-status.is-ok {
    color: var(--brand-success);
}

.footer-news-status.is-error {
    color: var(--brand-danger);
}


/* =============================================================================
   SECTION 3 — LAYER 2, BRAND / CONTACT / LINK COLUMNS
   ============================================================================= */

.footer-body {
    background:
        radial-gradient(1100px 300px at 82% -6%, var(--brand-primary-glow), transparent 70%),
        repeating-linear-gradient(135deg, var(--brand-primary-thread) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, var(--brand-footer-body-from), var(--brand-footer-body-to));
}

/* Reference proportions: brand column vs the contact-card grid. */
.footer-top {
    display: grid;
    grid-template-columns: 1.05fr 2fr;
    gap: 52px;
    align-items: start;
    padding: 46px var(--footer-gutter) 34px;
}

/* ---------- the brand column ---------- */

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.footer-brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The reference draws a 46px gold tile holding the single glyph "د". This tenant
   has a real uploaded logo (Setting.Logo), so the tile becomes its frame when a
   logo exists and falls back to the first letter of the shop name when it does
   not — see the view. Same box either way. */
.footer-brand-mark {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-brand-lg);
    background: var(--brand-primary);
    color: var(--brand-primary-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 23px;
    font-weight: 800;
    box-shadow: var(--brand-shadow-gold-chip);
}

/* BUG FIX (Step 9). The solid gold fill above is right for the reference, which
   puts a single DARK glyph on it. It is wrong for an uploaded logo: a tenant's
   logo is typically the brand colour on transparent, so it disappears into the
   tile — this tenant's 1280x1280 gold mark rendered as an empty gold square, which
   reads as a missing image rather than a contrast fault. With a logo the tile
   becomes a white frame with the same gold hairline the rest of the footer uses;
   the gold fill stays for the glyph fallback. The class is set server-side in
   Footer/Default.cshtml rather than with :has(), so it does not depend on selector
   support. */
.footer-brand-mark.has-logo {
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-rule);
    padding: 3px;
    box-shadow: var(--brand-shadow-footer-card);
}

.footer-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* shop.css:22-27 sets `img[alt] { display: flex }`. Harmless inside an
       object-fit box, but block is what this needs. */
    display: block;
}

.footer-brand-names {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.footer-brand-name {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--brand-text);
}

.footer-brand-tag {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--brand-text-soft);
}

.footer-desc-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
}

/* The 3-line clamp. The reference applies this imperatively from JS on every
   mount and resize; here it is declared in CSS (so it is correct before any
   script runs) and footer.js only MEASURES it to decide whether the read-more
   link is needed. */
.footer-desc {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 2.1;
    color: var(--brand-text-muted);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Accent link: gold at rest, ink on hover — the inverse of the nav links below.
   Used by "بیشتر بخوانید" and the contact cards' call-to-action. */
.footer-accent-link {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-primary-deep);
    transition: color .2s ease;
}

.footer-accent-link:hover,
.footer-accent-link:focus-visible {
    color: var(--brand-text);
}

.footer-accent-link > svg {
    flex: none;
}

/* ---------- the social block ---------- */

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-primary-veil);
}

.footer-social-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text-soft);
}

/* ---------- the contact cards ---------- */

.footer-contact {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

/* When a card is omitted (no address, no email …) the remaining ones share the
   width evenly rather than leaving a hole. Set from the view. */
.footer-contact[data-cards="2"] {
    grid-template-columns: 1.2fr 1fr;
}

.footer-contact[data-cards="1"] {
    grid-template-columns: 1fr;
}

.footer-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    min-width: 0;
    border-radius: var(--radius-brand-card);
    background: linear-gradient(160deg, var(--brand-surface-2), var(--brand-surface-warm));
    border: 1px solid var(--brand-primary-rule);
    box-shadow: var(--brand-shadow-footer-card);
}

/* The address card is taller-content and gets the reference's extra 2px bottom. */
.footer-card.is-address {
    padding-bottom: 22px;
}

.footer-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-card-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-brand-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--brand-surface-gilt), var(--brand-primary-band));
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-primary-deep);
}

.footer-card-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text-soft);
}

.footer-card-body {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.95;
    color: var(--brand-text);
    text-wrap: pretty;
}

/* Pinned to the bottom so cards of different content lengths still line their
   last row up — the reference's margin-top:auto. */
.footer-card-foot {
    margin-top: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.footer-card-phone {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--brand-text);
    width: max-content;
    transition: color .2s ease;
}

/* Latin/numeric runs inside an RTL block. `unicode-bidi: isolate` with dir="ltr"
   on the element is what stops an email address or a phone number being
   re-ordered by the bidi algorithm. */
.footer-card-email {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-text);
    unicode-bidi: isolate;
    width: max-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.footer-card-phone:hover,
.footer-card-phone:focus-visible,
.footer-card-email:hover,
.footer-card-email:focus-visible {
    color: var(--brand-primary-deep);
}

/* ---------- the divider between the two grids ---------- */

.footer-divide {
    height: 1px;
    margin: 0 var(--footer-gutter);
    background: linear-gradient(90deg,
        transparent,
        var(--brand-primary-rule-strong) 22%,
        var(--brand-primary-rule-strong) 78%,
        transparent);
}

/* ---------- the link columns ---------- */

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.55fr;
    gap: 52px;
    padding: 38px var(--footer-gutter) 46px;
}

/* With no app configured the download column is not rendered at all, so the
   three link columns share the row. Set from the view. */
.footer-links[data-cols="3"] {
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.footer-col-head {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-col-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-text);
}

/*  ---- the accordion affordances, INERT at this width -------------------------

    Below 992px the three link columns become the mobile design's collapsible
    sections, so the markup carries a disclosure <button> and a panel wrapper at
    BOTH widths (one tree — there is no second branch to put them in). Here they
    have to disappear completely into the desktop column that shipped in Step 8.

    Preflight is disabled, so a <button> keeps its UA border, background, padding,
    centred text and font — every reset below is load-bearing, not tidiness.       */

.footer-col-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    /* Not `cursor: pointer` and not disabled: the button is a real, focusable
       control on mobile and simply has nothing to do here. `default` is what stops
       it advertising an interaction that does not exist at this width. */
    cursor: default;
}

/* MARKED EXCEPTION — the chevron is the one footer element whose DEFAULT is
   hidden, because it exists only for the mobile disclosure. Same shape as the
   three mobile-only controls at the top of header-merge.css SECTION 8. */
.footer-col-chevron {
    display: none;
}

/* `display: contents` and not `display: block`: the <ul> must stay a DIRECT flex
   item of .footer-col so the column's 18px gap still applies between the heading
   and the first link. A block wrapper would absorb the gap and shift every link
   column — the exact desktop regression this step has to avoid. SECTION 6 turns
   it back into a real box, which is what makes the max-height transition possible. */
.footer-col-panel {
    display: contents;
}

/* shop.css's `.footer-list ul` tree is gone with the old markup, but Preflight is
   disabled so a bare <ul> still carries UA list-style and padding. */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav li {
    list-style: none;
}

/* Navigation link: muted at rest, gold on hover — the inverse of
   .footer-accent-link. width:max-content keeps the hover target on the text
   rather than the full column width. */
.footer-nav a {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-text-muted);
    transition: color .2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--brand-primary-deep);
}

/* ---------- the app download column ---------- */

.footer-app-blurb {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.9;
    color: var(--brand-text-muted);
    text-wrap: pretty;
}

.footer-app-panel {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--radius-brand-card);
    background: linear-gradient(155deg, var(--brand-surface-2), var(--brand-primary-band));
    border: 1px solid var(--brand-primary-rule);
    box-shadow: var(--brand-shadow-inset-hi);
}

.footer-app-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.footer-app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border-radius: var(--radius-brand-md);
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    transition: border-color .2s ease;
}

.footer-app-btn:hover,
.footer-app-btn:focus-visible {
    border-color: var(--brand-primary);
    color: var(--brand-text);
}

.footer-app-btn > svg {
    flex: none;
    color: var(--brand-primary-deep);
}

.footer-app-btn-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.footer-app-btn-kicker {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.footer-app-btn-store {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-text);
    unicode-bidi: isolate;
}

.footer-app-qr {
    flex: none;
    width: 102px;
    height: 102px;
    border-radius: var(--radius-brand-md);
    border: 1px solid var(--brand-primary-rule);
    overflow: hidden;
    background: repeating-linear-gradient(135deg,
        var(--brand-hatch-warm-a),
        var(--brand-hatch-warm-a) 7px,
        var(--brand-surface-cream) 7px,
        var(--brand-surface-cream) 14px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-app-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* =============================================================================
   SECTION 4 — LAYER 3, THE TRUST BAR

   Two labelled panels: official licences and payment gateways. Both are fed from
   the StoreLicenses slice (DB), split by the StoreLicenseKind added with this
   step. A panel with no badges is not rendered; with neither, the whole layer is
   not rendered and LAYER 2 meets the copyright bar directly — which is exactly
   what the reference's own notes specify.
   ============================================================================= */

.footer-trust {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px var(--footer-gutter);
    background: linear-gradient(180deg, var(--brand-footer-trust-from), var(--brand-footer-trust-to));
    border-top: 1px solid var(--brand-primary-rule);
    border-bottom: 1px solid var(--brand-primary-rule);
}

.footer-trust-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 22px;
    align-items: stretch;
}

/* One group present → it takes the full width instead of leaving a gap. */
.footer-trust-grid[data-panels="1"] {
    grid-template-columns: 1fr;
}

.footer-trust-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 20px;
    border-radius: var(--radius-brand-card);
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
}

.footer-trust-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text-soft);
}

/* The little gold dash before each panel label. */
.footer-trust-label::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--brand-primary-rule-strong);
}

/* The reference hardcodes repeat(4,1fr) and repeat(3,1fr), but the badge count is
   admin-controlled and cannot be assumed.

   auto-FIT, not auto-fill. Both create as many tracks as fit; auto-fill KEEPS the
   empty ones, so four badges in a 700px panel sat in the first four of six tracks
   and bunched against one edge with a gap beside them. auto-fit collapses the
   empty tracks and the filled ones share the row — which is what the reference's
   fixed repeat() looks like, at whatever count the admin has configured. */
.footer-trust-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 14px;
}

.footer-trust-tile {
    height: 60px;
    border-radius: var(--radius-brand);
    border: 1px solid var(--brand-border);
    background: var(--brand-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    overflow: hidden;
    transition: border-color .2s ease;
}

.footer-trust-tile:hover {
    border-color: var(--brand-primary);
}

/* The payment group's tiles sit on the warm fill the reference gives them. */
.footer-trust-panel.is-payment .footer-trust-tile {
    background: var(--brand-surface-pay);
}

/* The badge image itself. Fixed frame, contained image — an admin uploading a
   tall or a very wide badge cannot break the row. */
.footer-trust-tile img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Beats shop.css:22-27 `img[alt] { display: flex }`. */
    display: block;
}


/* =============================================================================
   SECTION 5 — LAYER 4, THE COPYRIGHT BAR
   ============================================================================= */

.footer-legal {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    min-height: 64px;
    padding: 12px var(--footer-gutter);
    background: linear-gradient(180deg, var(--brand-footer-bar-from), var(--brand-footer-bar-to));
    box-shadow: var(--brand-shadow-bar-hi);
}

.footer-legal-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.footer-legal-sep {
    width: 1px;
    height: 18px;
    background: var(--brand-border);
}

.footer-credit {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

/* The gold dot before the attribution. */
.footer-credit::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary);
}

.footer-credit a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-primary-deep);
    border-bottom: 1px solid var(--brand-primary-edge);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--brand-text);
    border-color: var(--brand-text);
}


/* =============================================================================
   SECTION 6 — MOBILE

   Reference: Docs/Redesign/Approved/footer/Daric Footer Mobile (standalone).html.
   Like every other approved file in this redesign it is a fixed 390px phone frame
   built from inline styles and contains NO @media rule of its own, so there was no
   breakpoint logic to port — the numbers below are its measurements, re-expressed
   as one media block at the 991/992px line the rest of the storefront already uses
   (shop.css:131-141, header-merge.css SECTION 8).

   EVERYTHING IN THIS SECTION IS INSIDE @media (max-width: 991px). The single
   deliberate exception is `.footer-col-chevron { display: none }` in SECTION 3,
   which has to be the DEFAULT because the chevron exists only for this width.

   THIS IS THE WHOLE MOBILE FOOTER. There is no mobile markup: Step 9 deleted the
   MobileFooter branch and the Constant.FooterType discriminator, so the same DOM
   the desktop renders is re-laid-out here. If something has to differ between the
   two widths, it differs in this block — never by rendering a second tree, and
   never by deleting nodes from JavaScript (the load-time width-based pruning in
   shop.js went in Step 1 and must not come back).

   SUBSECTIONS
     6.0  the shell and its bottom clearance
     6.1  LAYER 1 — the newsletter, stacked
     6.2  LAYER 2a — brand, description, contact rows, social  (re-ordered)
     6.3  LAYER 2b — the link columns become accordions; the app block
     6.4  LAYER 3 — the trust panels, stacked
     6.5  LAYER 4 — the copyright bar, centred
   ============================================================================= */

@media only screen and (max-width: 991px) {

    /* ---------------------------------------------------------------------
       6.0 — THE SHELL

       Re-pointing --footer-gutter is the single highest-leverage line in this
       section: all six layers write `padding: … var(--footer-gutter)` and all
       six are descendants of .footer-site, so one redeclaration re-gutters the
       whole footer from 56px to the reference's 20px.

       BOTTOM CLEARANCE. `.menu-bottom-site` is a FIXED bar at the bottom of the
       viewport on mobile, which is why shop.css:5919-5926 gave the old
       .footer-mobile-site a 63px bottom padding. That element is gone, so the
       clearance moves here — plus env(safe-area-inset-bottom) on top, the same
       convention Step 7 applied to every bottom-anchored mobile surface.
       --------------------------------------------------------------------- */

    .footer-site {
        --footer-gutter: var(--footer-gutter-sm);
        margin-top: 20px;
        padding: 0 12px calc(83px + env(safe-area-inset-bottom));
    }

    /* The cart page floats a full-width CTA over the bottom bar. shop.js used to
       write `padding-bottom: 130px` INLINE onto .footer-mobile-site, at every
       viewport width because the width guard around it was dropped in Step 1. It
       now adds this class instead, so the clearance is a stylesheet's job and
       applies only where the CTA actually exists. */
    .footer-site.has-cart-cta {
        padding-bottom: calc(150px + env(safe-area-inset-bottom));
    }

    .footer-slab {
        border-radius: var(--radius-brand-footer-sm);
    }


    /* ---------------------------------------------------------------------
       6.1 — LAYER 1, THE NEWSLETTER

       Stacked: headline, then field, then submit, then the note.

       EVERY `flex` RESET BELOW IS LOAD-BEARING. .footer-news-row is a ROW on
       desktop, and its children carry flex-basis values (.footer-news-copy
       `1 1 420px`, .footer-news-form `0 1 560px`, .footer-news-field `1`). Turning
       the container into a column re-points those bases at the HEIGHT axis, and
       the boxes collapse to a ratio of the available height instead of taking
       their own — the same trap the mini-cart CTAs hit in Step 7 (gotchas log,
       2026-08-31). Reset flex whenever you re-axis a flex container.
       --------------------------------------------------------------------- */

    .footer-news {
        padding: 24px var(--footer-gutter);
    }

    .footer-news-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .footer-news-copy {
        flex: none;
        gap: 0;
    }

    .footer-news-title {
        gap: 9px;
        font-size: 15.5px;
        line-height: 1.6;
        text-wrap: pretty;
    }

    .footer-news-badge {
        width: 30px;
        height: 30px;
        border-radius: var(--radius-brand);
        background: var(--brand-surface-cream);
    }

    /* The reference drops the second line entirely at this width. Three wrapped
       lines of secondary copy above the field is what pushes the fold down on a
       390px screen, and the headline already carries the promise. */
    .footer-news-sub {
        display: none;
    }

    .footer-news-form {
        flex: none;
        min-width: 0;
        gap: 9px;
    }

    .footer-news-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

    .footer-news-field {
        flex: none;
        height: 48px;
        gap: 9px;
        padding: 0 14px;
        border-radius: var(--radius-brand-tile);
    }

    .footer-news-field input {
        font-size: 13px;
    }

    .footer-news-submit {
        width: 100%;
        height: 48px;
        padding: 0;
        border-radius: var(--radius-brand-tile);
        font-size: 13.5px;
    }

    /* The 4px optical indent exists to line these two up with the field's inner
       text on desktop. At this width the field's padding is 14px and the copy
       above it starts at the gutter, so the indent only makes them look wrong. */
    .footer-news-note,
    .footer-news-status {
        padding-inline-start: 0;
    }

    .footer-news-note {
        font-size: 11px;
    }


    /* ---------------------------------------------------------------------
       6.2 — LAYER 2a: BRAND, DESCRIPTION, CONTACT, SOCIAL

       The reference's order is lockup → description → contact rows → social.
       The markup's order is lockup → description → social (all three inside
       .footer-brand) → contact (its sibling), because that is what the desktop
       two-column grid needs.

       `display: contents` on .footer-brand dissolves the wrapper so all four
       become siblings of one flex column, and `order` seats them. Re-parenting
       with `order` rather than moving nodes is the Step 7 rule — nothing a script
       can observe changes, and there is still exactly one copy of each element.
       .footer-brand has no background, border or padding of its own, which is
       what makes dissolving it safe.
       --------------------------------------------------------------------- */

    .footer-top {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 24px var(--footer-gutter);
    }

    .footer-brand {
        display: contents;
    }

    .footer-brand-lockup {
        order: 1;
        gap: 11px;
    }

    .footer-desc-wrap {
        order: 2;
        max-width: none;
    }

    .footer-social {
        order: 4;
    }

    .footer-brand-mark {
        width: 42px;
        height: 42px;
        border-radius: var(--radius-brand-tile);
        font-size: 21px;
    }

    .footer-brand-name {
        font-size: 19px;
    }

    .footer-brand-tag {
        font-size: 11px;
    }

    .footer-desc {
        font-size: 12.5px;
        line-height: 2;
    }

    .footer-accent-link {
        font-size: 12px;
    }

    /* ---- the contact cards become the reference's compact rows ----
       Three stacked lines (label / value / footnote) is the right shape in a
       340px-wide desktop card and the wrong one in a 350px-wide phone column —
       it is three rows of ~90px where the design draws three of 48. The label and
       the footnote are VISUALLY hidden rather than removed: a bare phone number
       announced with no context is a worse screen-reader result than the desktop
       card, and there is only one tree to hide them from. */

    .footer-contact {
        order: 3;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-card {
        position: relative;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 0 14px;
        border-radius: var(--radius-brand-md);
        background: var(--brand-surface-2);
        border-color: var(--brand-border);
        box-shadow: none;
    }

    /* The address is the one card whose value really is two lines, so the
       reference gives it vertical padding and top-aligns the pin. */
    .footer-card.is-address {
        align-items: flex-start;
        min-height: 0;
        padding: 12px 14px;
    }

    .footer-card-head {
        flex: none;
        gap: 0;
    }

    .footer-card.is-address .footer-card-head {
        margin-top: 2px;
    }

    /* The 30px gilded tile flattens to the reference's bare stroked glyph. */
    .footer-card-icon {
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .footer-card-body {
        font-size: 12.5px;
        line-height: 1.85;
    }

    .footer-card-phone {
        font-size: 13.5px;
    }

    .footer-card-email {
        font-size: 12.5px;
    }

    /* ---- the social row ----
       The reference has no heading and no divider above the chips at this width —
       the row reads as a row of buttons on its own. The label stays for
       assistive tech. */

    .footer-social {
        position: relative;
        gap: 0;
        padding-top: 0;
        border-top: 0;
    }

    .footer-site .share-row {
        gap: 9px;
    }

    .footer-site .share-row a {
        width: 46px;
        height: 46px;
        border-radius: var(--radius-brand-tile);
        font-size: 19px;
    }

    /* Visually hidden, not display:none — every one of these labels a control or a
       value that would otherwise be announced bare. Absolutely positioned inside a
       `position: relative` parent (set above) so it cannot escape its own card. */
    .footer-card-label,
    .footer-card-foot,
    .footer-social-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        white-space: nowrap;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }


    /* ---------------------------------------------------------------------
       6.3 — LAYER 2b: THE LINK COLUMNS BECOME ACCORDIONS

       Full-bleed rows, so .footer-links loses its padding and each section
       supplies the gutter itself — that is what lets the hairlines run edge to
       edge the way the reference draws them.

       The panels are OPEN in the markup and stay open if footer.js never runs;
       the transition is gated on `.footer-cols-js` so a scripted collapse
       animates while the unscripted default cannot animate from nothing.
       --------------------------------------------------------------------- */

    /* The gilded divider belongs to the two-grid desktop layout. Here the
       accordion group's own top hairline does that job. */
    .footer-divide {
        display: none;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        border-top: 1px solid var(--brand-border);
    }

    .footer-col {
        gap: 0;
        border-bottom: 1px solid var(--brand-border);
    }

    .footer-col-head {
        display: block;
    }

    /* The column-title hairline is a desktop device; the reference separates the
       sections with the full-width borders above instead. */
    .footer-rule {
        display: none;
    }

    .footer-col-title {
        font-size: 13.5px;
    }

    .footer-col-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 54px;
        padding: 0 var(--footer-gutter);
        cursor: pointer;
    }

    /* The gold dash the reference puts before every section title. A pseudo-
       element and not markup: it is decoration that exists at one width only. */
    .footer-col-toggle::before,
    .footer-col.is-app .footer-col-title::before {
        content: "";
        flex: none;
        width: 12px;
        height: 2px;
        border-radius: 2px;
        background: var(--brand-primary);
    }

    .footer-col-chevron {
        display: flex;
        flex: none;
        margin-inline-start: auto;
        color: var(--brand-text-soft);
        transition: transform .25s ease;
    }

    /* Down when collapsed, flipped up when open — driven off the SAME attribute
       assistive tech reads, so the two can never disagree. */
    .footer-col-toggle[aria-expanded="true"] .footer-col-chevron {
        transform: rotate(180deg);
    }

    .footer-col-panel {
        display: block;
        overflow: hidden;
    }

    .footer-cols-js .footer-col-panel {
        transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
    }

    .footer-nav {
        gap: 14px;
        padding: 2px calc(var(--footer-gutter) + 12px) 20px;
    }

    /* ---- the app block ----
       Not an accordion: the reference keeps it open as its own block below the
       three collapsible sections. */

    .footer-col.is-app {
        gap: 12px;
        padding: 22px var(--footer-gutter);
    }

    .footer-col.is-app .footer-col-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13.5px;
    }

    /* The reference's mobile app block has no blurb — just the heading and the
       two buttons. */
    .footer-app-blurb {
        display: none;
    }

    /*  The reference has no panel around the buttons at this width — just the two
        of them across the block. `display: block` and not merely stripping the
        chrome: on desktop this is a flex ROW whose only child is
        .footer-app-buttons, and leaving it a row means that child is a flex ITEM.
        It was then content-sized (the buttons came out 77px instead of filling
        the column), because a `flex: none` reset on the child — added to keep the
        desktop `flex: 1` from re-pointing its basis at the new main axis — also
        stops it growing. Making the parent a block removes the conflict outright
        instead of balancing two flex declarations against each other. */
    .footer-app-panel {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .footer-app-buttons {
        flex-direction: row;
        gap: 10px;
    }

    .footer-app-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        gap: 8px;
        height: 48px;
        padding: 0 10px;
    }

    /* Two words stacked inside a half-width button wrap badly; the reference
       shows the store name alone. */
    .footer-app-btn-kicker {
        display: none;
    }

    .footer-app-btn-store {
        font-size: 12px;
    }


    /* ---------------------------------------------------------------------
       6.4 — LAYER 3, THE TRUST PANELS

       The panels stack; the tiles stay a 3-across grid. auto-fit still does the
       counting (the badge count is admin-controlled — gotchas log, 2026-08-31),
       only the track minimum shrinks so three fit across a ~318px panel.
       --------------------------------------------------------------------- */

    .footer-trust {
        gap: 12px;
        padding: 20px var(--footer-gutter);
    }

    .footer-trust-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .footer-trust-panel {
        gap: 12px;
        padding: 16px;
        border-radius: var(--radius-brand-lg);
    }

    .footer-trust-label {
        gap: 8px;
        font-size: 11px;
    }

    .footer-trust-label::before {
        width: 12px;
    }

    .footer-trust-tiles {
        grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
        gap: 10px;
    }

    .footer-trust-tile {
        height: 52px;
        padding: 5px;
        border-radius: var(--radius-brand-inner);
    }

    /* The reference draws the payment marks on a shorter tile than the licences. */
    .footer-trust-panel.is-payment .footer-trust-tile {
        height: 44px;
    }


    /* ---------------------------------------------------------------------
       6.5 — LAYER 4, THE COPYRIGHT BAR
       --------------------------------------------------------------------- */

    .footer-legal {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 0;
        padding: 18px var(--footer-gutter) 22px;
        text-align: center;
        /* Flat here, gradient on desktop — the reference's own --foot-deep. */
        background: var(--brand-footer-bar-deep);
    }

    /* A vertical rule between two stacked, centred lines is meaningless. */
    .footer-legal-sep {
        display: none;
    }

    .footer-legal-text {
        font-size: 11.5px;
        line-height: 1.8;
    }

    .footer-credit {
        font-size: 11.5px;
    }

    .footer-credit a {
        font-size: 12px;
    }
}