/*
 * File: /assets/css/tbs.css
 * Module: Trust Seals & Badges plugin pages (/plugins/trust-badges/ and
 *         /plugins/trust-badges/wordpress/)
 *
 * Prefix tbs-. Built on the product system in cwvm.css (tokens, buttons,
 * plan cards, tiles, shots, platforms, FAQ, the reveal and the WordPress
 * hero story), which loads first. Every badge is real SVG from
 * inc/badge-art.php. Motion is transform and opacity only; script-only states
 * sit behind html.cwvm-js with the cwvm.css failsafe, and
 * prefers-reduced-motion gets the finished picture (the English page).
 *
 * Sections:
 *   1. Hero picture: a product page that switches language
 *   2. Real numbers: why shoppers leave, and the badge that answers it
 *   3. Tile pictures
 *   4. The badges: one in every style
 *   5. WordPress page: hero float and test results
 *   6. Motion
 *   7. Narrow screens
 */

/* ==========================================================================
   1. HERO PICTURE
   ========================================================================== */

.tbs {
    --tbs-atc: #0F172A;
    --tbs-atc-ink: #FFFFFF;
    --tbs-photo-a: #FDE68A;
    --tbs-photo-b: #F59E0B;
}
html[data-theme="dark"] .tbs {
    --tbs-atc: #F1F5F9;
    --tbs-atc-ink: #0F172A;
    --tbs-photo-a: #FCD34D;
    --tbs-photo-b: #D97706;
}

/* Section headings run the full width on these pages: the first line
   fills the column and only the rest wraps (cwvm.css caps .cwvm-h2 at 22em
   and balances the lines, which split long headings in half). */
.tbs .cwvm-h2 { max-width: none; text-wrap: pretty; }
/* The WordPress page's headline is a full sentence, so it runs a size down
   to stay at four or five lines beside the plugin screenshot. */
.tbs.cwvm-is-wp .cwvm-h1 { font-size: clamp(2.2rem, 1.2rem + 2.7vw, 3.35rem); }

/* The example store stays a light page in both themes, the way a real
   store looks: dark badges (hexagon, medallion) would vanish on a dark card. */
html[data-theme="dark"] .tbs-store {
    --cwvm-ink: #0F172A;
    --cwvm-ink-2: #1E293B;
    --cwvm-body: #475569;
    --cwvm-line: #E2E8F0;
    --cwvm-line-soft: rgba(15, 23, 42, 0.08);
    --cwvm-card: #FFFFFF;
    --cwvm-tile: #F8FAFC;
    --cwvm-em: #047857;
    --cwvm-em-wash: #ECFDF5;
    --tbs-atc: #0F172A;
    --tbs-atc-ink: #FFFFFF;
    border-color: #334155;
    color-scheme: light;
}
html[data-theme="dark"] .tbs-store .cwvm-example { background-color: #EEF2FF; color: #3730A3; }

.tbs-art { padding: 0.75rem 0 0; }
.tbs-store { position: relative; margin: 0 1rem 5.25rem; padding: 1rem 1.1rem 1.75rem; border: 1px solid var(--cwvm-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow-lift); }
.tbs-store-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin-bottom: 0.9rem; }
.tbs-store-site { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; overflow: hidden; color: var(--cwvm-ink); font-size: 0.86rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.tbs-store-site svg { flex: none; color: var(--cwvm-em); }

/* The language switcher: the store's own language menu. Hover or focus
   previews a language, a click or a tap keeps it, leaving the menu goes back
   to the kept one (English unless a code was clicked). Shown only where the
   script runs; without it the English page is the whole picture. The colors
   come from the store's light tokens in both themes, and every state
   declares color and background (GeneratePress paints button:hover). */
.tbs-switch { display: none; gap: 2px; margin-inline-start: auto; padding: 3px; border: 1px solid var(--cwvm-line); border-radius: 999px; background-color: var(--cwvm-tile); }
.cwvm-js .tbs-switch { display: inline-flex; }
.tbs .tbs-switch-b,
.tbs .tbs-switch-b:visited { -webkit-appearance: none; appearance: none; display: grid; place-items: center; min-width: 2rem; height: 1.6rem; margin: 0; padding: 0 0.3rem; border: 0; border-radius: 999px; background-color: transparent; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; cursor: pointer; transition: background-color 0.2s var(--cwvm-ease), color 0.2s var(--cwvm-ease), box-shadow 0.2s var(--cwvm-ease), transform 0.15s var(--cwvm-ease); }
.tbs .tbs-switch-b:hover,
.tbs .tbs-switch-b:focus { background-color: var(--cwvm-em-wash); color: var(--cwvm-em); }
.tbs .tbs-switch-b:focus-visible { outline: 2px solid var(--cwvm-em); outline-offset: 2px; }
.tbs .tbs-switch-b:active { background-color: var(--cwvm-em-wash); color: var(--cwvm-em); transform: scale(0.94); }
.tbs .tbs-switch-b[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--cwvm-em); }
.tbs .tbs-switch-b.is-on,
.tbs .tbs-switch-b.is-on:hover,
.tbs .tbs-switch-b.is-on:focus,
.tbs .tbs-switch-b.is-on:active { background-color: #047857; color: #FFFFFF; box-shadow: 0 4px 10px -6px rgba(4, 120, 87, 0.8); }

.tbs-store-body { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 1rem; align-items: center; }
.tbs-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg, var(--tbs-photo-a), var(--tbs-photo-b)); }
.tbs-photo > svg { width: 80%; height: auto; }
.tbs-photo .cwvm-example { position: absolute; top: 8px; left: 8px; box-shadow: 0 4px 10px -6px rgba(15, 23, 42, 0.45); }
.tbs-buy { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }

/* Stacked layers: every language sits in the same grid cell, so a switch
   never changes the size of anything (no layout shift). The server marks the
   English layer is-on; the script moves is-on. */
.tbs-stack { display: grid; }
.tbs-stack > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.28s var(--cwvm-ease), visibility 0s linear 0.28s; }
.tbs-stack > .is-on { opacity: 1; visibility: visible; transition: opacity 0.28s var(--cwvm-ease), visibility 0s; }

.tbs-pname { color: var(--cwvm-ink); font-size: clamp(1rem, 0.75rem + 2.2cqi, 1.3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.tbs-pname b { font-weight: 800; }
.tbs-stars { display: flex; align-items: center; gap: 2px; color: #F59E0B; }
.tbs-stars svg { fill: currentColor; }
.tbs-stars small { margin-inline-start: 0.45rem; color: var(--cwvm-body); font-size: 0.74rem; font-weight: 600; }
.tbs-stars em { font-style: normal; white-space: nowrap; }
.tbs-price { color: var(--cwvm-ink); font-size: 1.2rem; font-weight: 800; }
.tbs-atc { place-items: center; min-height: 44px; margin-top: 0.2rem; padding: 0 0.6rem; border-radius: 12px; background-color: var(--tbs-atc); color: var(--tbs-atc-ink); font-size: 0.9rem; font-weight: 800; text-align: center; }
.tbs-atc > * { display: grid; place-items: center; min-height: 44px; }

.tbs-row { margin-top: 1rem; }
.tbs-row-l { display: flex; justify-content: center; gap: clamp(0.4rem, 2.5cqi, 1.1rem); }
.tbs-badge { display: block; flex: 0 1 112px; min-width: 0; line-height: 0; filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.2)); }
.tbs-badge svg { display: block; width: 100%; height: auto; }

.tbs-seen { right: 0; bottom: 0; width: 12.5rem; }
.tbs-seen-big { display: block; margin: 0.15rem 0 0.4rem; color: var(--cwvm-ink); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tbs-seen-bar { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 999px; background-color: var(--cwvm-tile); box-shadow: inset 0 0 0 1px var(--cwvm-line-soft); }
.tbs-seen-bar i { position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(90deg, #059669, #10B981); transform: scaleX(0.61); transform-origin: left center; transition: transform 1.1s var(--cwvm-ease); }
.tbs-seen-sub { display: block; margin-top: 0.4rem; color: var(--cwvm-body); font-size: 0.74rem; font-weight: 600; }

.tbs-lang { left: 0; bottom: 0; width: 12rem; }
.tbs-lang-name { margin: 0.2rem 0 0.15rem; color: var(--cwvm-ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.tbs-lang-sub { display: block; color: var(--cwvm-good-ink); font-size: 0.74rem; font-weight: 700; }

/* ==========================================================================
   2. REAL NUMBERS
   ========================================================================== */

.tbs-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
@media (min-width: 980px) { .tbs-why { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; } }
.tbs-reasons { margin: 0; padding: 1.4rem 1.4rem 1.25rem; border: 1px solid var(--cwvm-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.tbs-reason-list { display: grid; gap: 0.7rem; }
.tbs-reason { display: grid; grid-template-columns: 68px minmax(0, 1fr) 3.4rem; grid-template-areas: "badge name v" "badge track track"; align-items: center; column-gap: 0.9rem; row-gap: 0.4rem; }
.tbs-reason-badge { grid-area: badge; display: block; line-height: 0; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.16)); }
.tbs-reason-badge svg { display: block; width: 68px; height: 68px; }
.tbs-reason-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; color: var(--cwvm-ink-2); font-size: 0.93rem; font-weight: 700; line-height: 1.3; }
.tbs-reason-name small { color: var(--cwvm-em); font-size: 0.76rem; font-weight: 700; }
.tbs-reason-track { grid-area: track; position: relative; height: 12px; overflow: hidden; border-radius: 999px; background-color: var(--cwvm-tile); box-shadow: inset 0 0 0 1px var(--cwvm-line-soft); }
.tbs-reason-track i { position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(90deg, #059669, #10B981); transform: scaleX(var(--v)); transform-origin: left center; transition: transform 1.1s var(--cwvm-ease); }
.tbs-reason-v { grid-area: v; color: var(--cwvm-ink); font-size: 1.15rem; font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.cwvm-js .cwvm.is-ready .tbs-why:not(.is-in) .tbs-reason-track i { transform: scaleX(0); }
.tbs-reason:nth-child(2) .tbs-reason-track i { transition-delay: 0.08s; }
.tbs-reason:nth-child(3) .tbs-reason-track i { transition-delay: 0.16s; }
.tbs-reason:nth-child(4) .tbs-reason-track i { transition-delay: 0.24s; }

/* ==========================================================================
   3. TILE PICTURES
   ========================================================================== */

.tbs-tart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem; }
.tbs-mini-atc { display: grid; place-items: center; width: min(13rem, 90%); height: 26px; border-radius: 8px; background-color: var(--tbs-atc); color: var(--tbs-atc-ink); font-size: 0.7rem; font-weight: 800; }
.tbs-mini-row { display: flex; gap: 0.35rem; line-height: 0; filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.16)); }
.tbs-mini-row svg { display: block; }
.tbs-mini-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.tbs-mini-tags i { padding: 0.12rem 0.45rem; border: 1px solid var(--cwvm-em-line); border-radius: 999px; background-color: var(--cwvm-em-wash); color: var(--cwvm-em); font-size: 0.62rem; font-style: normal; font-weight: 800; white-space: nowrap; }

.tbs-tart.is-lang { position: relative; }
.tbs-mini-badge { line-height: 0; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.22)); }
.tbs-mini-badge svg { display: block; }
.tbs-mini-langs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--cwvm-line); border-radius: 999px; background-color: var(--cwvm-card); }
.tbs-mini-langs i { display: grid; place-items: center; min-width: 1.8rem; height: 1.25rem; border-radius: 999px; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.6rem; font-style: normal; font-weight: 700; }
.tbs-mini-langs i.is-on { background-color: var(--cwvm-em); color: #FFFFFF; }
html[data-theme="dark"] .tbs-mini-langs i.is-on { background-color: #047857; }
.tbs-tart-pro { position: absolute; top: 10px; right: 10px; }

.tbs-tart.is-seen { flex-direction: row; align-items: flex-end; gap: 1rem; padding-bottom: 1rem; }
.tbs-mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 84px; }
.tbs-mini-bars i { position: relative; width: 14px; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background-color: rgba(16, 185, 129, 0.28); }
.tbs-mini-bars i::after { content: ""; position: absolute; right: 3px; bottom: 0; left: 3px; height: calc(var(--s) / var(--h) * 100%); border-radius: 2px 2px 1px 1px; background-color: #047857; }
html[data-theme="dark"] .tbs-mini-bars i::after { background-color: #34D399; }
.tbs-mini-seen { color: var(--cwvm-body); font-size: 0.78rem; font-weight: 700; }
.tbs-mini-seen b { display: block; color: var(--cwvm-ink); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

.tbs-tart.is-block { padding: 1rem; }
.tbs-mini-block { display: grid; gap: 0.55rem; width: 100%; max-width: 14rem; padding: 0.7rem; border: 2px solid #3858E9; border-radius: 4px; background-color: var(--cwvm-card); }
.tbs-mini-block-bar { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--cwvm-ink); font-size: 0.72rem; font-weight: 800; }
.tbs-mini-block-bar svg { color: var(--cwvm-em); }
.tbs-mini-block-pick { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.4rem 0.5rem; border: 1px solid var(--cwvm-line); border-radius: 4px; color: var(--cwvm-body); font-size: 0.64rem; font-weight: 600; }
.tbs-mini-block-pick b { color: var(--cwvm-ink); font-size: 0.78rem; font-weight: 800; }

/* ==========================================================================
   4. THE BADGES
   ========================================================================== */

.tbs-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 0.85rem; margin-top: 2rem !important; }
@media (min-width: 1000px) { .tbs-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tbs-g { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1rem 0.75rem 0.9rem; border: 1px solid var(--cwvm-line); border-radius: 18px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); text-align: center; }
.tbs-g.is-wide { grid-column: span 2; }
.tbs-g-art { display: grid; place-items: center; width: 100%; height: 112px; line-height: 0; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.16)); }
.tbs-g-art svg { display: block; max-width: 100%; height: auto; }
/* Dark badges keep a light plate in dark mode, as they would on a store page. */
html[data-theme="dark"] .tbs-g-art { border-radius: 14px; background-color: #F1F5F9; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); filter: none; }
html[data-theme="dark"] .tbs-mini-badge { padding: 0.35rem; border-radius: 12px; background-color: #F1F5F9; filter: none; }
.tbs-g-name { margin-top: 0.3rem; color: var(--cwvm-ink); font-size: 0.9rem; font-weight: 800; }
.tbs-g-flag { padding: 0.1rem 0.5rem; border: 1px solid var(--cwvm-em-line); border-radius: 999px; background-color: var(--cwvm-em-wash); color: var(--cwvm-em); font-family: var(--cwvm-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tbs-g-flag.is-pro { border-color: var(--cwvm-pro-line); background-color: var(--cwvm-pro-wash); color: var(--cwvm-pro); }
html[data-theme="dark"] .tbs-g-flag.is-pro { border-color: rgba(96, 165, 250, 0.4); background-color: rgba(37, 99, 235, 0.16); color: #93C5FD; }

/* ==========================================================================
   5. WORDPRESS PAGE
   ========================================================================== */

/* The hero's WordPress variant: the WordPress mark in the store bar and,
   instead of the badge language, the plugin card connected in one click
   with the WordPress and WooCommerce logos in their brand colors. */
.tbs-art.is-wp .tbs-store-site .ch-plat-logo { color: var(--brand); }
.tbs-lang.is-plug { width: 13.75rem; }
.tbs-plug-ok { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0 0.45rem; color: var(--cwvm-good-ink); font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
@media (max-width: 560px) { .tbs-plug-ok { white-space: normal; } }
.tbs-plug-ok svg { flex: none; }
.tbs-plug-logos { display: flex; align-items: center; gap: 0.6rem; line-height: 0; }
.tbs-plug-logos .ch-plat-logo { display: block; color: var(--brand); }
html[data-theme="dark"] .tbs-plug-logos .ch-plat-logo.is-wordpress { color: #7DB7D6; }
html[data-theme="dark"] .tbs-plug-logos .ch-plat-logo.is-woocommerce { color: #C99BC2; }

/* The free badge gallery, as on the plugin's connect screen: the eight free
   badges in either free style, recolored by a brand swatch. Both styles are
   in the page, stacked in one grid cell, so a switch moves nothing; the
   color is the drawing classes' custom properties on the stage. The stage is
   a light page in both themes (the badges' dark rings need it); the controls
   show only where the script runs, and every button state declares color and
   background (GeneratePress paints button:hover). */
.tbs-free { padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--cwvm-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.tbs-free > .cwvm-h2 { margin-bottom: 0.7rem; font-size: clamp(1.45rem, 1rem + 1.5vw, 2.05rem); }
.tbs-free-head { display: grid; gap: 1.1rem; margin: 0 0 1.25rem; }
.tbs-free-head .cwvm-sub { max-width: 52em; margin: 0; }
.tbs-free-ctrl { display: none; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; }
.cwvm-js .tbs-free-ctrl { display: flex; }
.tbs-free-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--cwvm-line); border-radius: 999px; background-color: var(--cwvm-tile); }
.tbs .tbs-free-seg-b,
.tbs .tbs-free-seg-b:visited { -webkit-appearance: none; appearance: none; min-height: 36px; margin: 0; padding: 0 0.95rem; border: 0; border-radius: 999px; background-color: transparent; color: var(--cwvm-ink); font-family: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background-color 0.2s var(--cwvm-ease), color 0.2s var(--cwvm-ease), transform 0.15s var(--cwvm-ease); }
.tbs .tbs-free-seg-b:hover,
.tbs .tbs-free-seg-b:focus { outline: none; background-color: var(--cwvm-em-wash); color: var(--cwvm-em); box-shadow: none; }
.tbs .tbs-free-seg-b:focus-visible { outline: 2px solid var(--cwvm-em); outline-offset: 2px; }
.tbs .tbs-free-seg-b:active { background-color: var(--cwvm-em-wash); color: var(--cwvm-em); transform: scale(0.97); }
.tbs .tbs-free-seg-b[aria-pressed="true"],
.tbs .tbs-free-seg-b[aria-pressed="true"]:hover,
.tbs .tbs-free-seg-b[aria-pressed="true"]:focus,
.tbs .tbs-free-seg-b[aria-pressed="true"]:active { background-color: #047857; color: #FFFFFF; box-shadow: 0 4px 10px -6px rgba(4, 120, 87, 0.8); }
.tbs-free-sw-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tbs .tbs-free-sw,
.tbs .tbs-free-sw:visited { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 2px solid var(--cwvm-card); border-radius: 50%; background-color: var(--sw); color: var(--tbsf-o, #FFFFFF); cursor: pointer; box-shadow: 0 0 0 1px var(--cwvm-line), 0 4px 10px -6px rgba(15, 23, 42, 0.5); transition: transform 0.15s var(--cwvm-ease), box-shadow 0.15s var(--cwvm-ease); }
.tbs .tbs-free-sw svg { opacity: 0; transition: opacity 0.15s ease; }
.tbs .tbs-free-sw:hover,
.tbs .tbs-free-sw:focus { outline: none; background-color: var(--sw); color: var(--tbsf-o, #FFFFFF); transform: scale(1.1); }
.tbs .tbs-free-sw:focus-visible { outline: 2px solid var(--cwvm-em); outline-offset: 3px; }
.tbs .tbs-free-sw:active { background-color: var(--sw); color: var(--tbsf-o, #FFFFFF); transform: scale(0.94); }
.tbs .tbs-free-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--cwvm-ink), 0 4px 10px -6px rgba(15, 23, 42, 0.5); }
.tbs .tbs-free-sw[aria-pressed="true"] svg { opacity: 1; }

.tbs-free-stage { display: grid; padding: clamp(1rem, 2.6vw, 1.75rem); border: 1px solid #E2E8F0; border-radius: 16px; background-color: #F8FAFC; background-image: radial-gradient(120% 90% at 50% 0%, rgba(16, 185, 129, 0.07), transparent 62%); }
.tbs-free-grid { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.6rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--cwvm-ease), visibility 0s linear 0.3s; }
.tbs-free-grid.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s var(--cwvm-ease), visibility 0s; }
@media (min-width: 900px) { .tbs-free-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tbs-free-item { display: grid; place-items: center; min-width: 0; margin: 0; }
.tbs-free-item svg { display: block; width: 100%; max-width: 128px; height: auto; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.12)); }
.tbs-free-stage.is-swapped .tbs-free-grid.is-on .tbs-free-item { animation: tbsFreePop 0.4s var(--cwvm-ease-pop) calc(var(--n, 0) * 40ms) backwards; }
@keyframes tbsFreePop { from { opacity: 0; transform: scale(0.4); } }
.tbs-free-chips { justify-content: center; margin: 1.25rem 0 0; }

/* The drawing classes of the free badges (inc/badge-art-free.php). */
.tbsf-art.is-seal { font-family: "Avenir Next Condensed", "Bahnschrift Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
.tbsf-art.is-line { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
.tbsf-art .tbsf-fp { fill: var(--tbsf-p, #10B981); transition: fill 0.3s ease; }
.tbsf-art .tbsf-fpd { fill: var(--tbsf-pd, #0C8D62); transition: fill 0.3s ease; }
.tbsf-art .tbsf-fpdd { fill: var(--tbsf-pdd, #096B4B); transition: fill 0.3s ease; }
.tbsf-art .tbsf-fo { fill: var(--tbsf-o, #0F172A); transition: fill 0.3s ease; }
.tbsf-art .tbsf-sp { stroke: var(--tbsf-p, #10B981); transition: stroke 0.3s ease; }
.tbsf-art .tbsf-fi { fill: #0F172A; }
.tbsf-art .tbsf-si { stroke: #0F172A; }
@media (prefers-reduced-motion: reduce) {
    .tbs-free-stage.is-swapped .tbs-free-grid.is-on .tbs-free-item { animation: none; }
}

.tbs-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
@media (min-width: 980px) { .tbs-proof { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; } }
.tbs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tbs-stat { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 1.5rem 1rem 1.3rem; border: 1px solid var(--cwvm-line); border-radius: 22px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); text-align: center; }
.tbs-stat:nth-child(2) { transition-delay: 0.08s; }
.tbs-stat:nth-child(3) { transition-delay: 0.16s; }
.tbs-stat-v { color: var(--cwvm-ink); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbs-stat-p { color: var(--cwvm-ink-2); font-size: 0.93rem; line-height: 1.45; }
.tbs-stat-p strong { color: var(--cwvm-ink); }
.tbs-stat-tag { padding: 0.22rem 0.65rem; border-radius: 999px; background-color: var(--cwvm-good-bg); color: var(--cwvm-good-ink); font-size: 0.76rem; font-weight: 800; }

/* ==========================================================================
   6. MOTION
   ========================================================================== */

/* The story (cwvm.js, data-cwvm-story="tbs"): the badges land under Add to
   cart and the seen card and the language card arrive; the page stays
   English. A language from the switcher brings its badges in one by one. */
.tbs-badge { transition: opacity 0.45s var(--cwvm-ease), transform 0.6s var(--cwvm-ease-pop); }
.cwvm-js .tbs-art.is-armed:not(.is-play) .tbs-row-l[data-tbs-l="en"] .tbs-badge { opacity: 0; transform: translateY(12px) scale(0.86); }
.tbs-art.is-play .tbs-badge { transition-delay: calc(0.25s + var(--n, 0) * 0.15s); }
.cwvm-js .tbs-art.is-armed:not(.is-play) .tbs-seen-bar i { transform: scaleX(0); }
.tbs-art.is-play .tbs-seen-bar i { transition-delay: 1.15s; }
.cwvm-js .tbs-art.is-armed:not(.is-play) .tbs-seen,
.cwvm-js .tbs-art.is-armed:not(.is-play) .tbs-lang { opacity: 0; transform: translateY(14px) scale(0.97); }
.tbs-art.is-play .tbs-seen { transition-delay: 0.9s; }
.tbs-art.is-play .tbs-lang { transition-delay: 1.3s; }
@keyframes tbsSwap { from { opacity: 0; transform: translateY(6px) scale(0.92); } }
.tbs-art.is-swapping .tbs-row-l.is-on .tbs-badge { animation: tbsSwap 0.42s var(--cwvm-ease-pop) backwards; animation-delay: calc(var(--n, 0) * 45ms); }

@media (prefers-reduced-motion: reduce) {
    .tbs *, .tbs *::before, .tbs *::after { transition: none !important; animation: none !important; }
    .cwvm-js .tbs-art .tbs-badge, .cwvm-js .tbs-art .tbs-seen, .cwvm-js .tbs-art .tbs-lang { opacity: 1 !important; transform: none !important; }
    .cwvm-js .tbs-art .tbs-seen-bar i { transform: scaleX(0.61) !important; }
    .cwvm-js .cwvm.is-ready .tbs-why:not(.is-in) .tbs-reason-track i { transform: scaleX(var(--v)); }
}

/* ==========================================================================
   7. NARROW SCREENS
   ========================================================================== */

@container (max-width: 520px) {
    .tbs-art { padding: 0; }
    .tbs-store { margin: 0; padding: 0.85rem; }
    .tbs-switch { margin-inline-start: 0; }
    .tbs-store-body { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 0.75rem; }
    .tbs-seen, .tbs-lang { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; }
    .tbs-seen-big { font-size: 1.4rem; }
}
/* One column (under 1040 px): the picture keeps a store page's width. */
@media (max-width: 1039px) {
    .tbs-art { width: 100%; max-width: 680px; margin-inline: auto; }
}
@media (max-width: 560px) {
    .tbs .tbs-switch-b, .tbs .tbs-switch-b:visited { min-width: 1.75rem; height: 1.75rem; padding: 0 0.2rem; font-size: 0.62rem; }
}
/* A container cannot restyle itself, so the hero picture's own flex row
   (the store, then the two cards side by side) follows the viewport. */
@media (max-width: 560px) {
    .tbs-art { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; }
    .tbs-store { flex: 1 1 100%; }
    .tbs-seen, .tbs-lang { flex: 1 1 0; min-width: 0; }
    .tbs-lang { order: 2; }
}
@media (max-width: 899px) {
    .tbs-stats { grid-template-columns: minmax(0, 1fr); }
    .tbs-stat { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; }
}
@media (max-width: 600px) {
    .tbs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .tbs-g.is-wide { grid-column: 1 / -1; }
    .tbs-g-art { height: 96px; }
    .tbs-reasons { padding: 1.1rem; }
    .tbs-reason { grid-template-columns: 56px minmax(0, 1fr) 3rem; column-gap: 0.7rem; }
    .tbs-reason-badge svg { width: 56px; height: 56px; }
}