/* ══════════════════════════════════════════════════════════════════════════
   VF CATALOG — the shared product-catalogue component.
   Extracted from Areas/Customer/Views/Home/Index.cshtml on 28 Jul 2026 so the
   Products grid and the USA Drops grid are literally the same component and
   cannot drift apart again. Consumed by both views via <link>.

   Every colour is a token. .vf-scope alone paints the ValoraFi default;
   .vf-scope[data-theme="…"] maps onto the --sf-* palette that storefront.css
   already defines for its ten storefront themes, so a themed business sees the
   catalogue in their own colours with no second stylesheet.

   NOTE the media query below is plain CSS, not Razor — no @@ escaping here.
   ══════════════════════════════════════════════════════════════════════════ */
    /* Scope + palette — TWO states, deliberately not a var() fallback.
       _MallShell already carries data-theme="blush" on the body element for the
       calendar modal and login overlay, so --sf-* is ALWAYS defined and a
       fallback would never fire; the grid would silently render pink.
         · .vf-scope alone            → the ValoraFi default, stated outright
         · .vf-scope[data-theme=…]    → storefront.css defines --sf-* on this
                                        element, and we map straight off it */
    .vf-scope {
        --vf-deep: #12304c;
        --vf-accent: #8a6a1e;   /* 5.10:1 on white — the old #b08d3f was 3.13:1 and failed AA */
        --vf-soft: #f3ebd8;
        --vf-line: #eae7e1;
        --vf-ink: #14181d;
        --vf-muted: #767d86;
        --vf-star: #c4a052;     /* stars are a LIGHTER amber so the solid gold
                                   appears exactly once per card: the buy button */
    }
    .vf-scope[data-theme] {
        --vf-deep: var(--sf-deep);
        --vf-accent: var(--sf-accent);
        --vf-soft: var(--sf-soft);
        --vf-line: var(--sf-line);
        --vf-ink: var(--sf-ink);
        --vf-muted: var(--sf-muted);
    }

    /* ── toolbar: one row, not three ── */
    .vf-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
    .vf-toolbar #filterForm { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
    .vf-toolbar #searchForm { display:flex; align-items:center; gap:8px; margin:0; flex:1 1 240px; }

    /* Sort + the two dropdowns as one unit. On desktop it behaves exactly as the
       three loose children did — same gap, same order — so the wide layout is
       unchanged. The mobile block below is where it earns its keep. */
    .vf-filterrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

    .vf-seg { display:inline-flex; border:1px solid var(--vf-line); border-radius:9px; background:#fff; overflow:hidden; }
    .vf-seg button { border:0; background:transparent; padding:7px 15px; font-size:12.5px; font-weight:600; color:var(--vf-muted); cursor:pointer; transition:background .15s,color .15s; }
    .vf-seg button:hover { color:var(--vf-deep); }
    .vf-seg button.active { background:var(--vf-soft); color:var(--vf-deep); }

    .vf-drop .dropdown-toggle { padding:7px 13px; border-radius:9px; font-size:12.5px; font-weight:600; border:1px solid var(--vf-line); background:#fff; color:var(--vf-ink); }
    .vf-drop .dropdown-toggle:hover, .vf-drop .dropdown-toggle:focus { border-color:var(--vf-accent); color:var(--vf-deep); box-shadow:none; }
    .vf-drop .dropdown-menu { background:#fff; border:1px solid var(--vf-line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px; min-width:190px; }
    .vf-drop .dropdown-item { color:var(--vf-ink); border-radius:6px; font-size:13px; padding:7px 12px; }
    .vf-drop .dropdown-item:hover, .vf-drop .dropdown-item.active { background:var(--vf-soft); color:var(--vf-deep); }

    .vf-search { flex:1; min-width:150px; background:#fff !important; border:1px solid var(--vf-line) !important; border-radius:9px !important; color:var(--vf-ink) !important; font-size:13px; padding:7px 14px !important; }
    .vf-search::placeholder { color:var(--vf-muted); opacity:.85; }
    .vf-search:focus { border-color:var(--vf-accent) !important; box-shadow:0 0 0 3px rgba(176,141,63,.14) !important; outline:none; }
    .vf-search-btn { padding:7px 16px; border-radius:9px; background:var(--vf-deep); border:none; color:#fff; font-weight:600; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; }
    .vf-search-btn:hover { filter:brightness(1.12); color:#fff; }
    .vf-clear-btn { padding:7px 13px; border-radius:9px; border:1px solid var(--vf-line); background:#fff; color:var(--vf-muted); font-size:12.5px; text-decoration:none; display:inline-flex; align-items:center; }
    .vf-clear-btn:hover { border-color:var(--vf-muted); color:var(--vf-ink); }

    .vf-count { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--vf-muted); margin-bottom:12px; }
    .vf-count-sub { opacity:.75; }

    /* NAMED vf-showmore, NOT vf-more. The docked bottom bar's "More" cell is a
       <details class="vf-more"> in AppShellIcons, so the original name landed a
       white background, a border and min-width:230px on it — but only on Products
       and USA Drops, the two pages that load this stylesheet. That is why the
       Mall's footer looked correct and these two did not. Do not reuse vf-more. */
    .vf-showmore-wrap { display:flex; justify-content:center; padding:22px 0 8px; }
    .vf-showmore {
        display:inline-flex; align-items:center; justify-content:center; gap:8px;
        min-width:230px; padding:11px 26px; border-radius:9px; background:#fff;
        border:1px solid var(--vf-line); color:var(--vf-deep);
        font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer;
        transition:border-color .15s, background .15s;
    }
    .vf-showmore:hover { border-color:var(--vf-deep); color:var(--vf-deep); }
    .vf-showmore.is-busy { opacity:.6; pointer-events:none; }

    /* ── the card ── */
    .vf-card { height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--vf-line); border-radius:11px; overflow:hidden; transition:box-shadow .16s, border-color .16s; }
    .vf-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.09); border-color:var(--vf-accent); }

    /* Square WHITE pad. Stays white in every palette — tinting the pad to
       the theme makes cosmetics photography look dirty, and the white is
       exactly what unifies eight different product shots. */
    /* 4:5 PORTRAIT, 4px pad — not square, not 12px. Product photography arrives
       with whitespace already baked around the object; a square frame then
       letterboxes a tall bottle on both sides and the padding adds a third
       margin. Three margins stacked put the product at ~40% of the tile width.
       Bottles, tubes and jars are all taller than they are wide, so a portrait
       frame stops fighting the subject: ~40% more product area, same card. */
    .vf-tilewrap { position:relative; border-bottom:1px solid var(--vf-line); }
    .vf-tile { display:block; aspect-ratio:4/5; background:#fff; padding:4px; }
    .vf-img { width:100%; height:100%; object-fit:contain; display:block; }

    .vf-badge { position:absolute; top:9px; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:5px; }
    .vf-badge-l { left:9px; }
    .vf-badge-r { right:9px; background:#1a7a50; color:#fff; }

    /* ── CD-47 · AGOTADO ────────────────────────────────────────────────────
       Values lifted verbatim from Property/Storefront.cshtml (.vf-product-card
       --oos) so the two surfaces are the SAME treatment rather than two
       lookalikes that drift apart on the next change. If one moves, move both.

       grayscale + 50% opacity, not display:none: the product stays visible and
       legible, which is honest and keeps the grid from looking thin. The card
       body is left at full contrast deliberately — greying the name and brand
       as well makes the row read as broken rendering rather than as a state. */
    .vf-badge-oos { background:#6b7280; color:#fff; }

    .vf-card--oos .vf-img { filter:grayscale(100%); opacity:.5; }
    .vf-card--oos .vf-price { color:#9ca3af; }

    /* Matches .vf-btn-c's box so the row keeps its geometry — an Agotado card
       must not be a different height from the one beside it. */
    .vf-btn-c--disabled {
        background:#e5e7eb; color:#6b7280; border-color:#e5e7eb;
        cursor:not-allowed; pointer-events:none;
    }

    .vf-meta { padding:12px 12px 6px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
    .vf-brand { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--vf-muted); }
    .vf-name { font-size:13.5px; font-weight:600; line-height:1.32; color:var(--vf-ink); text-decoration:none;
               display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.64em; }
    .vf-name:hover { color:var(--vf-deep); text-decoration:underline; text-underline-offset:2px; }
    .vf-stars { font-size:.72rem; line-height:1; display:flex; align-items:center; justify-content:center; gap:2px; color:var(--vf-star); }
    .vf-stars.is-empty { color:#dcd8d0; }
    .vf-stars .vf-rc { font-size:.66rem; color:var(--vf-muted); margin-left:3px; }
    .vf-price { font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--vf-deep); font-variant-numeric:tabular-nums; line-height:1.2; margin-top:2px; }
    .vf-was { font-size:11.5px; color:var(--vf-muted); text-decoration:line-through; text-decoration-color:#b4453c; }

    /* ── actions: Details takes the width, two fixed squares follow ── */
    .vf-acts { display:flex; gap:6px; padding:8px 12px 12px; margin-top:auto; }
    .vf-btn-d { flex:1; background:var(--vf-deep); color:#fff; border-radius:8px; padding:8px 4px; text-align:center; font-size:12.5px; font-weight:600; letter-spacing:.02em; text-decoration:none; display:flex; align-items:center; justify-content:center; }
    .vf-btn-d:hover { color:#fff; filter:brightness(1.14); }
    /* text-decoration:none because this is now an <a> (it opens the Información
       popup and keeps /p/{id}/info as its real href) — without it the icon
       carries an underline that the button version never had. */
    .vf-btn-i { width:36px; flex:0 0 36px; border:1px solid var(--vf-line); border-radius:8px; background:#fff; color:var(--vf-muted); display:flex; align-items:center; justify-content:center; font-size:15px; padding:0; cursor:pointer; text-decoration:none; }
    .vf-btn-i:hover { color:var(--vf-deep); text-decoration:none; }
    .vf-btn-i:hover, .vf-btn-i[aria-expanded="true"] { border-color:var(--vf-deep); color:var(--vf-deep); }
    .vf-btn-c { width:36px; flex:0 0 36px; border-radius:8px; background:var(--vf-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:400; line-height:1; text-decoration:none; }
    .vf-btn-c:hover { color:#fff; filter:brightness(1.1); }


    .vf-empty { border:1px dashed var(--vf-line); border-radius:11px; background:#fff; padding:26px; text-align:center; color:var(--vf-muted); }


    @media (max-width: 700px) {
        .vf-meta { padding:10px 10px 5px; }
        .vf-name { font-size:12px; }
        .vf-price { font-size:16.5px; }
        .vf-acts { padding:6px 10px 10px; gap:5px; }
        .vf-btn-d { font-size:11px; padding:8px 2px; }
        .vf-btn-i, .vf-btn-c { width:31px; flex:0 0 31px; }
        .vf-btn-c { font-size:17px; }

        /* TWO ROWS, matching the mockup — not one long scroller that runs off the
           screen. Search gets its own full-width row because it is the control
           people reach for when they already know what they want; the filters sit
           under it in a single scrolling chip row.

           The previous single-row version put search, its button, Clear, the sort
           segment and both dropdowns on one line. Everything past "Popular" fell
           off the right edge with no visible cue that more existed, which is what
           "the options are not completely showing" was. */
        .vf-toolbar {
            display: grid; grid-template-columns: 1fr; gap: 8px;
            margin-bottom: 10px;
        }

        /* ROW 2 — search, full width, BELOW the filters. The label on the button
           goes; the magnifier carries it, which buys ~60px for the field itself.

           order:1 (was -1). Filters first, search under them. */
        .vf-toolbar #searchForm { order: 1; display: flex; gap: 6px; width: 100%; }
        .vf-search { flex: 1 1 auto; min-width: 0; border-radius: 999px !important; padding: 8px 15px !important; }
        .vf-search-btn, .vf-clear-btn { border-radius: 999px; padding: 8px 14px; white-space: nowrap; flex: 0 0 auto; }
        .vf-search-btn { font-size: 0; gap: 0; }
        .vf-search-btn i { font-size: 14px; }

        /* ROW 1 — the filters, WRAPPING. Every control stays on screen.

           Was a horizontal scroller: nowrap + overflow-x:auto + a right-edge
           fade mask that was meant to say "there is more this way". It didn't
           read as a scroller — it read as Categories falling off the page,
           because at 390px the four controls overrun by only a few pixels, so
           the fade landed mid-word instead of clearly mid-row.

           Wrapping costs at most one extra line and nothing is ever hidden.
           The mask and the overflow/scrollbar rules go with it — a fade on a
           wrapped row would dim the last chip on every line for no reason. */
        .vf-toolbar #filterForm {
            order: 0;
            display: flex; flex-wrap: wrap; gap: 5px; width: 100%;

            /*  🔴 min-width:0 IS WHAT MAKES THE NOWRAP ROW SHRINK.
                .vf-toolbar is a GRID here, and a grid item defaults to
                min-width:auto — it refuses to go narrower than its content.
                So the nowrap filter row's intrinsic width became the floor and
                CATEGORÍAS ran off the right edge instead of the dropdowns
                giving way. Products has one fewer control and happened to fit,
                which is why only USA Drops showed it. */
            min-width: 0;
        }

        /*  ONE ROW: Latest · Popular · Brands · Categories.

            At 7px/14px and 12.5px type the four pills came to ~372px against
            ~358px of content, so Categories wrapped alone onto a second line —
            over by about fifteen pixels, not by a control.

            9px side padding (−40), 11.5px type (−17) and a 5px gap (−4) take
            the row to roughly 310px, which clears a 360px phone with headroom
            rather than sitting on the boundary. Nothing is truncated; the pills
            are just tighter.

            flex-wrap:wrap stays deliberately. It is now a fallback that should
            never fire on a real handset, but if a longer translation or a
            larger accessibility font pushes past the line, the row wraps
            instead of running off the edge — which is the failure mode we
            already fixed once. (The 5px gap is set on #filterForm above.) */
        .vf-seg, .vf-drop .dropdown-toggle { border-radius: 999px; white-space: nowrap; }
        .vf-seg { flex: 0 0 auto; }
        .vf-seg button, .vf-seg a { padding: 7px 9px; font-size: 11.5px; }
        .vf-drop .dropdown-toggle { padding: 7px 9px; font-size: 11.5px; }

        /*  🔴 ONE LINE, STRUCTURALLY — NOT BY ARITHMETIC.

            Recientes · Populares · MARCAS · CATEGORÍAS share a nowrap row on
            both Products and USA Drops.

            The previous version sized the pills to fit and lost twice: at
            9px/11.5px the four came to ~372px against ~358px of content, so
            CATEGORÍAS wrapped alone onto a second line. Tightening the numbers
            only moves the boundary — a longer translation, a bigger
            accessibility font or a longer brand label on the button puts it
            back. flex-wrap:nowrap cannot wrap regardless of what the text does.

            The SEGMENT keeps its natural width (it is two fixed words and must
            stay tappable). The DROPDOWNS absorb the pressure: they share the
            remaining space, and their labels ellipsis rather than push the row
            over. min-width:0 is what permits that — without it a flex item
            refuses to shrink below its content and the row overflows instead. */
        .vf-filterrow {
            display: flex; align-items: center; gap: 4px;
            flex-wrap: nowrap; width: 100%; min-width: 0;
        }
        .vf-filterrow .vf-seg { flex: 0 0 auto; }
        .vf-filterrow .vf-drop { flex: 1 1 auto; min-width: 0; }
        .vf-filterrow .vf-drop .dropdown-toggle {
            width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        /*  USA DROPS ROW 1 — six pills: Recientes · Populares · All · Beauty ·
            Fitness · Clothing.

            These are all fixed words in a nowrap row, so unlike the dropdowns
            there is nothing here that can ellipsis to absorb pressure. They
            have to be sized to fit: 11px type and 7px side padding put the six
            at roughly 331px, which clears a 360px handset.

            overflow-x:auto is the safety valve, not the plan. At these sizes it
            should never engage; if a longer translation pushes past the line
            the row scrolls sideways rather than clipping "Clothing" against
            the card edge — which is the failure that just happened when the
            row could not shrink. */
        .vf-filterrow--pills { overflow-x: auto; scrollbar-width: none; }
        .vf-filterrow--pills::-webkit-scrollbar { display: none; }

        /*  FILL THE ROW. Sized to fit, the six pills came to ~331px and left
            ~85px of dead space on the right while MARCAS/CATEGORÍAS below ran
            edge to edge — the two rows read as misaligned rather than as a set.

            Growth is weighted by PILL COUNT, not split evenly: flex-grow 2 for
            the two sort pills and 4 for the four type pills. An even split
            would hand each segment half the slack, making Recientes/Populares
            noticeably fatter than Beauty/Fitness. Weighting keeps every pill
            close to the same width, so the row reads as six of one thing.

            The anchors and buttons grow too — without that the segments would
            widen while their contents stayed pinned left inside them. */
        .vf-filterrow--pills .vf-seg { flex: 2 1 auto; }
        .vf-filterrow--pills .vf-seg--type { flex: 4 1 auto; }
        .vf-filterrow--pills .vf-seg button,
        .vf-filterrow--pills .vf-seg a {
            flex: 1 1 auto; text-align: center;
            padding: 7px 6px; font-size: 11px; letter-spacing: -0.01em;
        }

        /*  ROW 2 — the two dropdowns split the line evenly. Used by BOTH grids
            now; Products was still asking for a single row and its CATEGORÍAS
            ran off the right edge of a 375px phone. */
        .vf-filterrow--drops { margin-top: 5px; }
        .vf-filterrow--drops .vf-drop { flex: 1 1 50%; }

        /*  🔴 SIZE THE BUTTON, NOT ONLY ITS BOX. flex:1 1 50% sizes the .vf-drop
            wrapper, and that part always worked — measured at 112px on Products
            and 157px on USA Drops. The <button> inside is not a flex item of
            that row, so it kept its own CONTENT width (140px, 168px) and hung
            out of the wrapper: on Products that was 14px past the viewport and
            a horizontal scrollbar, on USA Drops at 345px the two labels
            overlapped and CATEGORÍAS crossed the gutter.

            width:100% ties the button to the box; min-width:0 is what lets it
            go under its content width at all, and without it the width has
            nothing to shrink against. Together with the text-overflow:ellipsis
            already declared above, a long label now truncates instead of
            pushing the row over — which is the point of the whole two-row
            arrangement: no arithmetic against translated labels. */
        .vf-filterrow--drops .vf-drop .dropdown-toggle { width: 100%; min-width: 0; }

        /*  USA Drops' type filter gets the next row to itself — four more pills
            on the line above would shrink all eight below a tappable size.
            Full width so it never shares with anything. */
        /*  Natural width — never stretched. An earlier version filled the line
            with flex:1 1 auto and spaced four short words across the whole
            screen, which read as a broken nav bar rather than a filter. */
        .vf-seg--type { flex: 0 0 auto; display: inline-flex; }

        .vf-count { margin-bottom: 8px; }

        /* TOUCH FEEDBACK. :hover never fires on a phone, so the gold ring that
           tells a desktop user "this card is live" simply did not exist here.
           :active covers the press, :focus-within covers the moment after a tap
           lands on the card's link. */
        .vf-card:active, .vf-card:focus-within {
            border-color: var(--vf-accent);
            box-shadow: 0 0 0 2px rgba(138,106,30,.16);
        }
        .vf-btn-d:active, .vf-btn-c:active, .vf-btn-i:active { transform: scale(.97); }
    }

/* ── USA DROPS additions ────────────────────────────────────────────────────
   The type filter is a segment of LINKS (each is its own URL, unlike the sort
   segment which posts a form), so the same look has to apply to <a> as well as
   <button>. Everything else on that page is the shared component above. */
.vf-seg a {
    padding: 7px 15px; font-size: 12.5px; font-weight: 600; color: var(--vf-muted);
    text-decoration: none; display: inline-flex; align-items: center;
}
.vf-seg a:hover { color: var(--vf-deep); }
.vf-seg a.active { background: var(--vf-soft); color: var(--vf-deep); }

/* A preorder is a promise, not a purchase, so the card has to say two things a
   normal product card never does: that it ships from the USA, and roughly when.
   Chip on the tile, ship line under the price — same geometry, two extra rows. */
.vf-drop-chip {
    position: absolute; top: 9px; left: 9px; z-index: 2;
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 5px; background: var(--vf-deep); color: #fff;
}
.vf-ship {
    font-size: 11px; color: var(--vf-muted); margin-top: 1px;
    display: flex; align-items: center; gap: 4px;
}
.vf-ship i { font-size: 10px; opacity: .8; }

/* ══════════════════════════════════════════════════════════════════════════
   RECOMMEND-A-PRODUCT CTA — "we don't have it, tell us".

   Rendered by _RecommendProductCta on USA DROPS ONLY — it is commented out on
   Products, where an open-ended Colombian catalogue would turn the invitation
   into an unworkable queue (the reasoning is in Home/Index.cshtml). It sits
   above the empty/count branch, so it is present whether the grid is full or a
   search found nothing.

   The styles stay here, not in the view, because this is part of the shared
   catalogue component and Products may want it back.

   🔴 NAVY, NOT GOLD, AND THAT IS A RULE THIS FILE ALREADY SET. The token block
   at the top states it outright: the solid gold appears exactly ONCE per card —
   the buy button. A gold CTA sitting above the grid would compete with every
   add-to-cart on the page and blunt the one thing gold is reserved to mean.
   --vf-deep is the same navy as Detalles and Buscar: the system's "act" colour.

   The band itself is --vf-soft, the pale gold wash, so the strip separates from
   the white grid without introducing a colour. Both tokens re-map under
   .vf-scope[data-theme], so a themed storefront gets this in ITS palette free.
   ══════════════════════════════════════════════════════════════════════════ */
.vf-reccta {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px 16px;
    margin: 0 0 12px; padding: 11px 15px;
    background: var(--vf-soft);
    border: 1px solid var(--vf-line);
    border-radius: 12px;
}
.vf-reccta-msg {
    display: flex; align-items: center; gap: 9px;
    min-width: 0; font-size: 13px; line-height: 1.35; color: var(--vf-ink);
}
.vf-reccta-ic { flex: none; font-size: 1rem; color: var(--vf-accent); }
.vf-reccta-msg strong { color: var(--vf-deep); font-weight: 700; }
.vf-reccta-body { color: var(--vf-muted); }

.vf-reccta-btn {
    flex: none;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 10px;
    background: var(--vf-deep); color: #fff; text-decoration: none;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.vf-reccta-btn:hover, .vf-reccta-btn:focus-visible {
    color: #fff; filter: brightness(1.12);
    transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18, 48, 76, .22);
}
.vf-reccta-btn i { font-size: 11px; }

/*  WEB-MOBILE — the same 700px breakpoint the rest of this file uses.

    The explanatory sentence goes and the question carries it alone: on a phone
    this band is competing with the first row of products for the fold, and the
    second sentence is the part that can be inferred from the button. The button
    then takes the full width, which is both the easiest tap target and the
    cheapest way to keep the band to two tidy lines instead of three ragged ones. */
@media (max-width: 700px) {
    .vf-reccta { padding: 10px 12px; gap: 9px; }
    .vf-reccta-body { display: none; }
    .vf-reccta-btn { width: 100%; justify-content: center; padding: 10px 16px; }
}