Add viator-collector plugin (Hop On Hop Off front-end reskin)

Consolidate the plugin into the TourWebsite repository (its separate nested git repo has been removed). Includes the full new-design reskin: scoped design stylesheet, SVG icon sprite, rebuilt listing/single/section templates, and homepage hero/FAQ/testimonials shortcodes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J4hNL1PSHxXbu94SCenpKj
2026-09-12 21:11:20 +03:30
parent 99e5413fee
commit 7ada8860f8
42 changed files with 9019 additions and 0 deletions
--- a/viator-collector/docs/superpowers/plans/2026-09-11-new-front-reskin.md
+++ b/viator-collector/docs/superpowers/plans/2026-09-11-new-front-reskin.md
@@ -0,0 +1,131 @@
+# New Front Re-skin — Implementation Plan
+
+> **For agentic workers:** Use superpowers:executing-plans to implement task-by-task. This is a WordPress/PHP visual re-skin: tasks verify by rendering markup / inspecting output, not by pytest.
+
+**Goal:** Replace the `viator-collector` plugin's entire front-end look with the "Hop On Hop Off" design from `../new front/`, keeping all WordPress data/query logic.
+
+**Architecture:** Port the mockup's markup into the plugin's PHP templates/shortcodes; port `new front/css/style.css` scoped under `#vc-app`; port the SVG icon sprite and the needed `main.js` interactions; ship decorative assets. Drop Lucide + noUiSlider + old CSS.
+
+**Tech Stack:** PHP (WordPress), CSS (token-based), vanilla JS, Node (build-time CSS scoper only).
+
+**Spec:** `docs/superpowers/specs/2026-09-11-new-front-reskin-design.md`
+
+## Global Constraints
+
+- All plugin output wrapped in `#vc-app`; every ported CSS rule prefixed `#vc-app` (except `:root`, `@keyframes` steps, `@font-face`).
+- No change to CPT/taxonomy/meta keys, importer, cron, API, or filter/query logic.
+- Server-side filtering/sort/pagination retained (GET params).
+- Site header/nav/footer remain theme-owned (not rendered by plugin).
+- Real tour data fills all content; only decorative images ship with plugin.
+- Text domain `viator-collector`; escape all output.
+
+---
+
+## Phase 1 — Foundation assets
+
+### Task 1: CSS scoper + scoped stylesheet
+**Files:** Create `build/scope-css.js`, `assets/css/vc-design.css` (generated); source `../new front/css/style.css`.
+- [ ] Write `build/scope-css.js`: brace-aware parser; prefix each selector with `#vc-app ` except `:root`, keyframe steps, `@font-face` descriptors; map `html`/`body`/`*` leading tokens to `#vc-app` scope; leave `@media`/`@supports` wrappers, recurse into them; keep `@keyframes` names/steps intact.
+- [ ] Run it to generate `assets/css/vc-design.css`.
+- [ ] Verify: no rule leaks (grep that every non-`:root`/non-keyframe selector line contains `#vc-app`); `:root` tokens present; keyframes intact.
+- [ ] Commit.
+
+### Task 2: Icon sprite + helpers
+**Files:** Create `assets/icons/sprite.svg`, add helpers to `includes/helpers.php`.
+- [ ] Extract the `<symbol id="i-…">` set from `new front/index.html` into `assets/icons/sprite.svg`, plus a `<defs><path id="ringPathScroll" …></defs>`.
+- [ ] `vc_print_icon_sprite()` — prints the sprite once (static guard).
+- [ ] `vc_icon($name, $extra_class='')` — returns `<svg class="icon …"><use href="#i-$name"></svg>`.
+- [ ] `vc_ring_badge($label, $url, $variant='card')` — returns the ring-badge anchor markup.
+- [ ] Verify: helpers return expected strings; sprite has all icons referenced by templates.
+- [ ] Commit.
+
+### Task 3: Decorative assets
+**Files:** Create `assets/img/` (copy bus-iso.png, bus-open-top.png, tower.png, ellipse-17.png, ellipse-17-2.png, hero.png, hero2.png, hero3.jpg from `../new front/assets`).
+- [ ] Copy the decorative images.
+- [ ] Add `vc_asset_url($rel)` helper (returns `VC_PLUGIN_URL . 'assets/' . $rel`) if not present.
+- [ ] Commit.
+
+### Task 4: JS interactions
+**Files:** Create `assets/js/vc-design.js`; trim `assets/js/vc-frontend.js`.
+- [ ] Port from `main.js`: card rails, FAQ accordion, testimonials marquee (ring-badge spin is CSS). Omit header/nav/sticky and the client-side listing filter.
+- [ ] In `vc-frontend.js`, remove noUiSlider init; keep auto-submit + mobile filter drawer behaviors used by the listing.
+- [ ] Verify: no reference to removed globals; file loads without error.
+- [ ] Commit.
+
+### Task 5: Enqueue swap
+**Files:** Modify `includes/class-vc-display.php::enqueue_assets`.
+- [ ] Remove Lucide, noUiSlider (css+js), `vc-listing.css`, `vc-single.css`, `viator-collector.css` enqueues.
+- [ ] Add Plus Jakarta Sans (Google Fonts), `vc-design.css`, `vc-design.js`. Print sprite via `wp_footer`/inline on our pages.
+- [ ] Keep gating (single/archive/shortcode). Bump `VC_VERSION`.
+- [ ] Verify: on a tour page only new assets load; Lucide/noUiSlider absent.
+- [ ] Commit.
+
+## Phase 2 — Tour card (shared)
+
+### Task 6: `card-tour.php` → dcard
+**Files:** Modify `templates/card-tour.php`.
+- [ ] Rewrite to emit `article.dcard` (variants: `dcard--wide` for listing `li.titem`, plain `dcard` for homepage `li` rail). Slots: `.dcard__img` (`vc_tour_image_html`), `.rating` (`_vc_rating` + `vc_icon('star')`), `.dcard__title` (permalinked), `.dcard__meta` (Start at → `vc_money`, Duration → `vc_duration_human`), `vc_ring_badge('BOOK NOW', permalink)`, badge via `vc_card_badge`, `.titem__desc` (excerpt) for listing variant.
+- [ ] Accept `$variant` arg; default `wide`.
+- [ ] Verify: renders both variants with real data; icons resolve.
+- [ ] Commit.
+
+## Phase 3 — Listing / archive
+
+### Task 7: `listing.php` hero + filter bar
+**Files:** Modify `templates/listing.php`.
+- [ ] Replace hero + sidebar with `section.hero.hero--archive` + `form.filters` (GET). Map controls to existing params: search→`vc_q`, `dest[]`, `cat[]`, price `<select>`→`price`, duration `<select>`→`dur[]` (half/full/multi), `filters__bar` checks→`freecancel`/`bestdeal`/`sellout`, sort control→`sort`, Apply submit.
+- [ ] Verify: submitting each control updates results via server query; active-filter chips still work (restyled).
+- [ ] Commit.
+
+### Task 8: `listing.php` grid + results + pager
+**Files:** Modify `templates/listing.php`.
+- [ ] Render `ul.tgrid` of `card-tour.php` (`wide`); `.results` with server count; custom `.pager`/`.pager__num` from `$vc_query->max_num_pages` preserving query string; styled empty state.
+- [ ] Verify: pagination navigates server pages; count correct; URLs shareable.
+- [ ] Commit.
+
+## Phase 4 — Single tour
+
+### Task 9: `single-viator_tour.php` hero + head + facts
+**Files:** Modify `templates/single-viator_tour.php`.
+- [ ] `section.hero-tour` (primary image, kicker, destination word, `tower.png` figure), breadcrumb, `.tour-head` + `.tmeta` (rating/location/supplier), `ul.facts` (duration/max/free-cancel/category) via `vc_icon`.
+- [ ] Verify: renders with real meta; missing fields omitted cleanly.
+- [ ] Commit.
+
+### Task 10: `single-viator_tour.php` body blocks
+**Files:** Modify `templates/single-viator_tour.php`.
+- [ ] `tour__block`s: Overview (`the_content`), Gallery (`.gallery` from gallery URLs), includes/excludes (`.ilist` + `.tick`), Good to know, Cancellation Policy (`.policy` + `.statcard--yes/--no`), Reviews.
+- [ ] Verify: each block appears only when data present; matches mockup.
+- [ ] Commit.
+
+### Task 11: `single-viator_tour.php` booking aside + mobile bar
+**Files:** Modify `templates/single-viator_tour.php`.
+- [ ] `aside.tour__aside > .bookcard`: From/price, Check Availability → `_vc_booking_url`, `statcard--teal` free-cancel + `statcard--yes` reserve-now. Restyle mobile book bar.
+- [ ] Verify: CTA links to booking URL; price from meta.
+- [ ] Commit.
+
+## Phase 5 — Homepage sections
+
+### Task 12: Re-skin data shortcodes to rails
+**Files:** Modify `includes/class-vc-display.php` (render_section) or `class-vc-sections.php`; `templates/card-destination.php`, `card-attraction.php`, `card-activity.php`.
+- [ ] `viator_top_destinations`/`viator_top_tours` → `section.section` + `.sec-head` (title, lead, See-all, `.rail-nav` prev/next) + `ul.rail` of `.dcard`s. Attractions/activities → feature/activity section styling.
+- [ ] Verify: rails scroll via `vc-design.js`; real terms/tours render.
+- [ ] Commit.
+
+### Task 13: New static-chrome shortcodes
+**Files:** Modify `includes/class-vc-display.php` (register) + create `templates/section-hero.php`, `section-faq.php`, `section-testimonials.php`.
+- [ ] `viator_hero` → `section.hero` + `form.booking` (Location from `viator_destination` terms, Date, Seats) submitting to listing archive with filter params.
+- [ ] `viator_faq` → `section.faq` accordion; content via shortcode inner content / `atts` (Q/A pairs).
+- [ ] `viator_testimonials` → `section.testimonials` marquee; items via inner content / `atts`.
+- [ ] Register in `SHORTCODES` + enqueue gating.
+- [ ] Verify: shortcodes render on a Page; booking form routes to filtered listing.
+- [ ] Commit.
+
+## Phase 6 — Verify & finish
+
+### Task 14: Full-page verification
+- [ ] With a theme (Astra) active, load listing, single, and a homepage-shortcode Page; confirm visual match to mockup within content area; no style bleed outside `#vc-app`; no console errors; Lucide/noUiSlider not loaded; server filtering/pagination work.
+- [ ] Update `SHORTCODES.md`; bump version; final commit.
+
+## Self-review notes
+- Spec coverage: scoping (T1), icons/ring-badge (T2), assets (T3), JS (T4), enqueue (T5), card (T6), listing (T7–8), single (T9–11), homepage data+chrome (T12–13), acceptance (T14) — all mapped.
+- Duration mismatch handled in T7 (plugin buckets). FAQ/testimonials content source resolved in T13 (inner content/atts). Footer back-to-top badge dropped (theme-owned) per spec default.
--- a/viator-collector/docs/superpowers/specs/2026-09-11-new-front-reskin-design.md
+++ b/viator-collector/docs/superpowers/specs/2026-09-11-new-front-reskin-design.md
@@ -0,0 +1,299 @@
+# Viator Collector — "Hop On Hop Off" Front-End Re-skin
+
+**Date:** 2026-09-11
+**Status:** Design — pending approval
+**Author:** Amir Bagheri (with Claude)
+
+## 1. Goal
+
+Replace the entire visual front-end of the `viator-collector` WordPress
+plugin with the new "Hop On Hop Off" design that currently exists as a
+static mockup in `../new front/`, **without changing any of the plugin's
+data model, query logic, or WordPress plumbing**. Every dynamic value
+keeps coming from the `viator_tour` post type, its meta, and its
+taxonomies exactly as today; only markup, CSS, icons, JS interactions,
+and decorative assets change.
+
+## 2. Decisions (locked)
+
+| Question | Decision |
+|---|---|
+| Surfaces to re-skin | All three: listing/archive, single tour, homepage sections |
+| Header / nav / footer | **Content only** — the WordPress theme (e.g. Astra) keeps providing site header/nav/footer. The plugin re-skins only its content area. |
+| Listing filter behavior | **Keep server-side** (WP_Query + GET params + server pagination). Only the look changes. No switch to `main.js` client-side filtering. |
+| Homepage static chrome | **Include it** — plugin also ships hero/booking, FAQ, and testimonials as shortcodes so the full `index.html` look is achievable. |
+| Old CSS/JS | **Replace** — retire `vc-listing.css`, `vc-single.css`, `viator-collector.css`, `vc-sections.css`, and the Lucide dependency. |
+
+## 3. Source of truth
+
+The three canonical mockup pages are:
+
+- `new front/index.html` — homepage (hero+booking, destinations rail, feature/bus section, most-liked tours rail, about, testimonials marquee, articles, FAQ)
+- `new front/tours.html` — listing/archive (hero with horizontal filter bar, tour grid, results count, pager)
+- `new front/tour.html` — single tour (hero-tour banner, facts, overview, gallery, includes/excludes, good-to-know, cancellation policy, reviews, booking aside)
+
+Driven by `new front/css/style.css` (~3096 lines, token-based) and
+`new front/js/main.js` (~419 lines).
+
+**Ignored:** `new front/tourdetailsinfo.html` and
+`new front/tourdetailscontent.html` are raw Figma/React export scraps
+(absolute-positioned, Tailwind classNames). They are not part of the
+design system and will not be used except as visual reference for the
+booking aside (already fully expressed in `tour.html`).
+
+## 4. Architecture
+
+### 4.1 Scoping strategy (critical)
+
+Because the plugin renders inside a WordPress theme, the new design's
+generic class names (`.container`, `.section`, `.hero`, `.btn`,
+`.rating`, `.meta`, `.dcard`, `.footer`, `.site-header`…) and its global
+resets (`*`, `html`, `body`, `ul`, `a`, `button`) **must not leak** into
+or fight the theme.
+
+Approach:
+
+- Every plugin surface is wrapped in the existing `#vc-app` scope
+  (already used by `shortcode_listing` and `single-viator_tour.php`).
+  Homepage section shortcodes get wrapped in `#vc-app` too.
+- The ported stylesheet is transformed so **every rule is prefixed with
+  `#vc-app`** (e.g. `.dcard` → `#vc-app .dcard`). The `:root { --… }`
+  token block stays global (harmless custom properties).
+- Global resets on `*`/`html`/`body` are dropped or converted to scoped
+  equivalents (`#vc-app`, `#vc-app *`). `scroll-behavior`,
+  `overflow-x:hidden` on `html`/`body` are dropped (theme's concern).
+- Header/nav/footer CSS (`.site-header`, `.nav`, `.burger`, `.footer`,
+  `.skip-link`) from the mockup is **not** ported — the theme owns those.
+  Exception: the `.footer` "back to top" ring-badge is a reusable widget
+  we may keep for section use; TBD, default = drop.
+
+### 4.2 Asset organization
+
+New plugin asset layout:
+
+```
+viator-collector/assets/
+  css/
+    vc-design.css        # ported + scoped style.css (single stylesheet)
+  js/
+    vc-frontend.js       # existing server-side filter behaviors (kept, trimmed)
+    vc-design.js         # ported interactions: rails, accordion, marquee, ring-badge
+  img/
+    (decorative design assets copied from new front/assets: bus-iso.png,
+     bus-open-top.png, tower.png, ellipse-17.png, ellipse-17-2.png,
+     hero.png, hero2.png, hero3.jpg)
+  icons/
+    sprite.svg           # the <symbol> icon set + #ringPathScroll path def
+```
+
+- **Decorative** images (bus, tower, ellipses, hero backdrops) ship with
+  the plugin — they are chrome, not tour data.
+- **Demo tour images** (`city-*.png`, `liked-*.png`, `tour-*.png`) are
+  NOT shipped; those slots are filled by real tour data
+  (`_vc_primary_image_url`, gallery URLs) via `vc_tour_image_html()`.
+
+### 4.3 Icons
+
+The mockup uses an inline SVG sprite: a hidden `<svg class="sprite">`
+holding `<symbol id="i-…">` defs, referenced by
+`<svg class="icon"><use href="#i-…"></svg>`. It also defines
+`#ringPathScroll` (the circular text path for the "BOOK NOW" badge).
+
+- Ship the sprite as `assets/icons/sprite.svg` and print it once per
+  plugin page via a small helper (`vc_print_icon_sprite()`), guarded so
+  it prints at most once.
+- Add a helper `vc_icon( $name )` returning
+  `<svg class="icon"><use href="#i-$name"></svg>`.
+- Replace all current `<i data-lucide="…">` usages with `vc_icon()`.
+  Lucide enqueue is removed.
+
+Icon name mapping (Lucide → sprite):
+
+| Lucide | Sprite |
+|---|---|
+| map-pin | i-location |
+| clock | i-duration |
+| users / user | i-person / i-user |
+| shield-check | i-shield-check |
+| calendar-check | i-calendar |
+| rotate-ccw | i-duration (or reuse) |
+| clipboard-list | i-grid |
+| images | i-grid |
+| star (rating) | i-star |
+
+(Exact per-call mapping finalized during implementation; any missing
+glyph is added to the sprite.)
+
+### 4.4 JavaScript
+
+`vc-design.js` (new) ports from `main.js` only what our content uses:
+
+- **Card rails** — `.rail` horizontal scroll with `[data-rail-prev/next]`
+  buttons (used by homepage destination/tour rails).
+- **FAQ accordion** — `[data-accordion]` / `.acc__q`.
+- **Testimonials marquee** — `[data-marquee]` duplicate-for-loop.
+- **Ring-badge** — the rotating "BOOK NOW" SVG textPath (needs
+  `#ringPathScroll` in the sprite; animation is CSS).
+- Hero booking/availability form `preventDefault` demo handlers become
+  real submits to the tour's booking URL / listing action (no console
+  stubs).
+
+**Explicitly NOT ported:** `main.js` client-side listing filter/sort/
+pager (server-side stays), and header/nav/burger/sticky-header (theme's).
+
+`vc-frontend.js` is kept for the server-side listing behaviors it already
+provides (auto-submit selects/checks, filter drawer on mobile). The
+noUiSlider price slider is **removed** — the new design uses a Price
+Range `<select>`, which the existing `get_filter_state()` already parses.
+
+### 4.5 Enqueue changes (`class-vc-display.php::enqueue_assets`)
+
+- Remove: Lucide, noUiSlider (css+js), `vc-listing.css`, `vc-single.css`,
+  `viator-collector.css`.
+- Add: Google Fonts "Plus Jakarta Sans"; `vc-design.css`; `vc-design.js`.
+- Keep: `vc-frontend.js` (trimmed).
+- Gating logic (single vs archive vs shortcode page) stays as-is.
+
+## 5. Surface-by-surface mapping
+
+### 5.1 Listing / archive — `templates/listing.php` + `templates/card-tour.php`
+
+Target markup: `new front/tours.html`.
+
+- **Hero** → `section.hero.hero--archive` with eyebrow pill, `h1`, and the
+  horizontal **filter bar** `form.filters` (submits GET to the same
+  action as today). Replaces the old sidebar + noUiSlider layout.
+  - Search input → `vc_q`
+  - Destination `<select>` → `dest[]` (single value)
+  - Category `<select>` → `cat[]`
+  - Price Range `<select>` → `price` (values like `0-50`, `50-150`,
+    `150-1000`; already parsed by `get_filter_state()`)
+  - Duration `<select>` → `dur[]` buckets (`half`/`full`/`multi`, labeled
+    Half Day / Full Day / Multi-Day — adapted from the mockup's day
+    options to the plugin's real buckets)
+  - "Apply Filters" submit button
+  - Checkbox row (`filters__bar`): Free Cancellation → `freecancel`,
+    Best Deal → `bestdeal`, Likely to Sell Out → `sellout`
+  - A sort control (styled to the design) → `sort`
+- **Results head** → `.results` with `#resultCount` ("Showing X–Y of Z
+  tours", server values) and a "Clear filters" link when filters active.
+- **Grid** → `ul.tgrid` of `li.titem > article.dcard.dcard--wide` cards
+  (see 5.2). Active-filter chips retained, restyled.
+- **Pager** → custom server-rendered pager matching `.pager` /
+  `.pager__num` design (replaces `paginate_links` default markup and the
+  JS pager). Preserves current query string.
+- Empty state → styled "no tours" message.
+
+### 5.2 Tour card — `templates/card-tour.php`
+
+Target: the `.dcard--wide` card in `tours.html` (and the rail `.dcard`
+in `index.html` for homepage rails — one template, optional modifier).
+
+Fields → design slots:
+
+| Design slot | Data source |
+|---|---|
+| `.dcard__img` | `vc_tour_image_html()` (real image) |
+| `.rating` pill (`<b>4.0</b>/5` + star) | `_vc_rating` |
+| `.dcard__title` | `get_the_title()` |
+| meta "Start at" `$xx` | `_vc_price_from` + `_vc_currency` via `vc_money()` |
+| meta "Duration" | `_vc_duration_text` / `vc_duration_human()` |
+| ring "BOOK NOW" badge link | permalink |
+| `.titem__desc` (listing only) | excerpt |
+| card badge (Best Deal / Sell-out) | `vc_card_badge()` |
+| destination line (if kept) | `viator_destination` term |
+
+The card must render correctly both as a listing `li.titem` and as a
+homepage rail `li.dcard`; a `$variant` arg selects wrapper/markup.
+
+### 5.3 Single tour — `templates/single-viator_tour.php`
+
+Target: `new front/tour.html`.
+
+- **Hero-tour banner** → `section.hero-tour` with `hero-tour__photo`
+  (primary image), `hero-tour__kicker` ("Welcome to"), `hero-tour__word`
+  (destination/title), decorative `hero-tour__figure` (`tower.png`,
+  decorative asset). Breadcrumb retained.
+- **Layout** → `.container.tour__layout` = `.tour__main` + `aside.tour__aside`.
+- **Head** → `.tour-head__title` + `.tmeta` (rating, location, supplier).
+- **Facts** → `ul.facts` of `li.fact` (Duration, Max Travelers, Free
+  Cancellation, Category) from `_vc_duration_minutes`,
+  `_vc_max_travelers`, `_vc_free_cancellation`, `viator_tag`.
+- **Overview** → `section.tour__block` with `the_content()`.
+- **Gallery** → `.gallery` (hero + thumbs) from `_vc_gallery_image_urls`.
+- **Includes / Excludes** → `.lists` of `.ilist` with `.tick--yes/--no`
+  from `_vc_inclusions` / `_vc_exclusions`.
+- **Good to know** → `tour__block` from `_vc_additional_info`.
+- **Cancellation policy** → `.policy` of `.statcard--yes/--no` refund
+  tiers from `_vc_cancellation_policy`.
+- **Reviews** → restyled summary from `_vc_rating` / `_vc_review_count`.
+- **Booking aside** → `.bookcard`: From/price (`_vc_price_from`),
+  "Check Availability" → `_vc_booking_url`, `statcard--teal` Free
+  Cancellation + `statcard--yes` Reserve-now cards.
+- **Mobile book bar** retained, restyled.
+
+### 5.4 Homepage sections — `class-vc-sections.php` / `class-vc-display.php` shortcodes
+
+Existing data shortcodes are re-skinned; new static-chrome shortcodes are
+added.
+
+Re-skinned (data-driven):
+
+- `viator_top_destinations` → "Where you wanna go?" section: `sec-head`
+  (title + lead + See-all + `rail-nav` prev/next) over a
+  `ul.rail.rail--dest` of `.dcard`s. (`card-destination.php`)
+- `viator_top_tours` → "Most Liked Tours" rail (same rail pattern,
+  `card-tour.php` in `dcard` variant).
+- `viator_top_attractions` → the feature / "bus-tours" section styling.
+- `viator_browse_activities` → activity section styling.
+
+New (static chrome, per decision — full `index.html` look):
+
+- `viator_hero` → the homepage hero + booking form
+  (`section.hero` + `form.booking` with Location/Date/Seats). Location
+  select is populated from `viator_destination` terms; submit routes to
+  the listing archive with the chosen filters (real behavior, not a
+  console stub).
+- `viator_faq` → `section.faq` accordion (`[data-accordion]`). Content
+  supplied via shortcode attributes / inner content or a simple options
+  list (final content source TBD in plan).
+- `viator_testimonials` → `section.testimonials` marquee
+  (`[data-marquee]`). Content via shortcode attributes/inner content.
+
+The About and Articles sections from `index.html` are ordinary editorial
+content; they are **not** plugin shortcodes (the user builds them with
+the theme/builder). Noted here to bound scope.
+
+## 6. Out of scope
+
+- Site header, primary nav, burger menu, sticky header, site footer
+  (theme-owned).
+- Any change to importing, cron, API, CPT/taxonomy registration, meta
+  keys, or query/filter logic.
+- Client-side filtering/sorting/pagination (server-side retained).
+- About / Articles homepage sections as plugin features.
+
+## 7. Risks & mitigations
+
+- **Style leakage / theme conflicts** → strict `#vc-app` scoping; drop
+  global resets; no header/footer CSS. Verify against Astra.
+- **Generic class collisions** (`.container`, `.btn`, `.hero`) → all
+  scoped under `#vc-app`; test with theme active.
+- **Duration option mismatch** (mockup "1/3/7 days" vs plugin
+  half/full/multi buckets) → use the plugin's real buckets with mockup
+  styling.
+- **Icon coverage** → any glyph used by a template but missing from the
+  sprite is added to `sprite.svg`.
+- **Ring-badge dependency** → ensure `#ringPathScroll` path def is in the
+  sprite so the rotating badge renders.
+
+## 8. Acceptance criteria
+
+- Listing, single, and homepage sections visually match the mockup within
+  the plugin's content area, with the theme's header/footer around them.
+- All dynamic values render from real tour data; no demo images/text ship
+  as content.
+- Server-side filtering, sorting, and pagination work via GET params as
+  before; shareable URLs preserved.
+- No new console errors; Lucide and noUiSlider no longer loaded.
+- No style bleed into the theme outside `#vc-app` (verified with Astra).