Upstage Solar Pro 4 – Shopping

via Upstage · Generated

  • AIMAC Debt 7.33
  • Cost $0.003
  • Total Violations 34
  • HTML Size 80 KB
  • Em Dashes 36

Screenshot

View Upstage Solar Pro 4 Shopping page View Live Page

Accessibility Issues Found

34 Serious

  • color-contrast serious 33 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span>Cart</span>
  • target-size serious 1 instance

    All touch targets must be 24px large, or leave sufficient space

    Example HTML <button class="faq-question">

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NovaCart — Curated Shopping, Redefined</title>
  <style>
    /* ── Reset & Base ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      color: #2d2d2d;
      background: #fafafa;
      line-height: 1.6;
      font-size: 16px;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }
    button { cursor: pointer; font-family: inherit; }

    /* ── Custom Properties ─────────────────────────────────── */
    :root {
      --clr-primary: #1a1a2e;
      --clr-accent:  #e8734a;
      --clr-accent-2:#f2a65a;
      --clr-light:   #f5f1eb;
      --clr-border:  #e0d8cf;
      --clr-white:   #ffffff;
      --clr-text:    #2d2d2d;
      --clr-muted:   #6b6b6b;
      --clr-bg-hero: #1a1a2e;
      --radius-sm:   6px;
      --radius-md:   12px;
      --radius-lg:   20px;
      --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
      --shadow-md:   0 4px 16px rgba(0,0,0,.10);
      --shadow-lg:   0 12px 40px rgba(0,0,0,.14);
      --max-w:       1200px;
      --nav-h:       72px;
    }

    /* ── Utilities ─────────────────────────────────────────── */
    .container { width: 90%; max-width: var(--max-w); margin: 0 auto; }
    .section   { padding: 80px 0; }
    .section-sm{ padding: 56px 0; }
    .section__label {
      display: inline-block;
      font-size: .72rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--clr-accent);
      font-weight: 700;
      margin-bottom: 10px;
    }
    .section__title {
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 800;
      line-height: 1.2;
      color: var(--clr-primary);
      margin-bottom: 16px;
    }
    .section__desc {
      color: var(--clr-muted);
      max-width: 620px;
      font-size: 1.05rem;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 26px;
      border-radius: 50px;
      font-weight: 600;
      font-size: .92rem;
      border: none;
      transition: transform .2s, box-shadow .2s, background .2s;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn--primary { background: var(--clr-accent); color: #fff; box-shadow: var(--shadow-md); }
    .btn--primary:hover { background: #d4633e; }
    .btn--outline {
      background: transparent;
      border: 2px solid var(--clr-border);
      color: var(--clr-primary);
    }
    .btn--outline:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
    .btn--white { background: #fff; color: var(--clr-primary); box-shadow: var(--shadow-sm); }
    .btn--white:hover { background: var(--clr-light); }

    /* ── Header / Nav ─────────────────────────────────────── */
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--clr-border);
    }
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--nav-h);
      gap: 24px;
    }
    .nav__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--clr-primary);
    }
    .nav__logo img { width: 38px; height: 38px; border-radius: 10px; }
    .nav__logo span { color: var(--clr-accent); }
    .nav__list {
      display: flex;
      align-items: center;
      gap: 6px;
      list-style: none;
    }
    .nav__list a {
      padding: 8px 14px;
      border-radius: 50px;
      font-size: .9rem;
      font-weight: 500;
      color: var(--clr-muted);
      transition: background .2s, color .2s;
    }
    .nav__list a:hover { background: var(--clr-light); color: var(--clr-primary); }
    .nav__list a.active { color: var(--clr-accent); background: rgba(232,115,74,.10); }
    .nav__actions { display: flex; align-items: center; gap: 16px; }
    .nav__icon {
      position: relative;
      width: 40px; height: 40px;
      display: grid; place-items: center;
      border-radius: 50%;
      background: var(--clr-light);
      transition: background .2s;
    }
    .nav__icon:hover { background: var(--clr-border); }
    .nav__icon svg { width: 20px; height: 20px; stroke: var(--clr-primary); }
    .nav__cart-badge {
      position: absolute; top: -2px; right: -2px;
      background: var(--clr-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      width: 18px; height: 18px;
      border-radius: 50%;
      display: grid; place-items: center;
    }
    .nav__hamburger { display: none; background: none; border: none; padding: 6px; }
    .nav__hamburger svg { width: 26px; height: 26px; stroke: var(--clr-primary); }

    /* ── Hero ──────────────────────────────────────────────── */
    .hero {
      background: var(--clr-bg-hero);
      color: #fff;
      padding: 100px 0 110px;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(232,115,74,.18), transparent 60%);
      pointer-events: none;
    }
    .hero .container {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 60px;
      align-items: center;
    }
    .hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(232,115,74,.15);
      color: var(--clr-accent-2);
      padding: 6px 14px;
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .hero__eyebrow::before {
      content: ''; width: 8px; height: 8px; border-radius: 50%;
      background: var(--clr-accent);
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .4; transform: scale(.6); }
    }
    .hero__title {
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .hero__title em {
      font-style: normal;
      background: linear-gradient(120deg, var(--clr-accent), var(--clr-accent-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero__desc {
      color: rgba(255,255,255,.75);
      font-size: 1.08rem;
      max-width: 520px;
      margin-bottom: 36px;
    }
    .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero__stats {
      display: flex;
      gap: 36px;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,.15);
    }
    .hero__stat-num {
      font-size: 1.6rem;
      font-weight: 800;
      color: #fff;
    }
    .hero__stat-label {
      font-size: .82rem;
      color: rgba(255,255,255,.55);
      margin-top: 2px;
    }
    .hero__visual {
      position: relative;
    }
    .hero__visual img {
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
    }
    .hero__badges {
      position: absolute;
      top: 20px; right: -10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .hero__badge {
      background: #fff;
      color: var(--clr-primary);
      padding: 8px 14px;
      border-radius: 10px;
      font-size: .78rem;
      font-weight: 600;
      box-shadow: var(--shadow-md);
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .hero__badge span { color: var(--clr-accent); }

    /* ── Gifts / Feature Grid ─────────────────────────────── */
    .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 40px;
    }
    .feature-card {
      background: var(--clr-white);
      border-radius: var(--radius-md);
      padding: 32px 24px;
      border: 1px solid var(--clr-border);
      transition: transform .25s, box-shadow .25s;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .feature-card__icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: var(--clr-light);
      display: grid; place-items: center;
      margin-bottom: 16px;
    }
    .feature-card__icon svg { width: 24px; height: 24px; stroke: var(--clr-accent); }
    .feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .feature-card p  { font-size: .88rem; color: var(--clr-muted); }

    /* ── Section: Gift Guides ─────────────────────────────── */
    .gift-guides {
      background: var(--clr-white);
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
    }
    .gift-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 44px;
    }
    .gift-card {
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--clr-light);
      border: 1px solid var(--clr-border);
      transition: transform .25s, box-shadow .25s;
    }
    .gift-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .gift-card__img {
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
    }
    .gift-card__img img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .4s;
    }
    .gift-card:hover .gift-card__img img { transform: scale(1.04); }
    .gift-card__tag {
      position: absolute;
      top: 14px; left: 14px;
      background: var(--clr-accent);
      color: #fff;
      font-size: .72rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 50px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .gift-card__body { padding: 20px; }
    .gift-card__category {
      font-size: .74rem;
      color: var(--clr-accent);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 6px;
    }
    .gift-card__title { font-size: 1.12rem; font-weight: 700; margin-bottom: 8px; }
    .gift-card__desc { font-size: .88rem; color: var(--clr-muted); margin-bottom: 16px; }
    .gift-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .gift-card__price { font-size: 1.05rem; font-weight: 700; }
    .gift-card__price small { font-size: .78rem; color: var(--clr-muted); font-weight: 400; }

    /* ── Section: Editor Picks ────────────────────────────── */
    .editor-picks { background: var(--clr-light); }
    .editor-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 44px;
    }
    .product-card {
      background: var(--clr-white);
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--clr-border);
      transition: transform .25s, box-shadow .25s;
    }
    .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .product-card__img {
      position: relative;
      aspect-ratio: 1/1;
      overflow: hidden;
      background: #e8e0d8;
    }
    .product-card__img img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .4s;
    }
    .product-card:hover .product-card__img img { transform: scale(1.05); }
    .product-card__quick-view {
      position: absolute;
      bottom: 12px; left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: rgba(26,26,46,.85);
      color: #fff;
      padding: 6px 14px;
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 600;
      opacity: 0;
      transition: opacity .25s, transform .25s;
      white-space: nowrap;
    }
    .product-card:hover .product-card__quick-view {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .product-card__wish {
      position: absolute;
      top: 12px; right: 12px;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: rgba(255,255,255,.9);
      display: grid; place-items: center;
      border: none;
      font-size: 1rem;
      transition: background .2s;
    }
    .product-card__wish:hover { background: var(--clr-accent); color: #fff; }
    .product-card__body { padding: 18px; }
    .product-card__brand {
      font-size: .72rem;
      color: var(--clr-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .product-card__title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
    .product-card__stars { color: #f4b740; font-size: .82rem; margin-bottom: 10px; }
    .product-card__footer { display: flex; align-items: center; justify-content: space-between; }
    .product-card__price { font-weight: 700; font-size: 1.05rem; }
    .product-card__rating {
      font-size: .78rem;
      color: var(--clr-muted);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .product-card__rating span { color: var(--clr-primary); font-weight: 600; }

    /* ── Section: Seasonal Collection ─────────────────────── */
    .seasonal {
      background: var(--clr-primary);
      color: #fff;
    }
    .seasonal .section__label { color: var(--clr-accent-2); }
    .seasonal .section__desc { color: rgba(255,255,255,.6); }
    .seasonal-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px;
    }
    .seasonal-card {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 3/4;
    }
    .seasonal-card img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .5s;
    }
    .seasonal-card:hover img { transform: scale(1.06); }
    .seasonal-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .seasonal-card__tag {
      display: inline-block;
      background: var(--clr-accent);
      color: #fff;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 4px 10px;
      border-radius: 50px;
      width: fit-content;
      margin-bottom: 10px;
    }
    .seasonal-card__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
    .seasonal-card__desc { font-size: .88rem; color: rgba(255,255,255,.7); margin-bottom: 14px; }
    .seasonal-card .btn--white { font-size: .85rem; padding: 10px 22px; }

    /* ── Section: How It Works (Steps) ────────────────────── */
    .how-it-works { background: var(--clr-white); }
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 44px;
    }
    .step-card {
      text-align: center;
      padding: 32px 20px;
      border-radius: var(--radius-md);
      border: 1px solid var(--clr-border);
      background: var(--clr-light);
      position: relative;
    }
    .step-card::after {
      content: '';
      position: absolute;
      right: -12px; top: 10%;
      width: 24px; height: 2px;
      background: var(--clr-border);
    }
    .step-card:last-child::after { display: none; }
    .step-num {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--clr-primary);
      color: #fff;
      font-size: 1.1rem;
      font-weight: 800;
      display: grid; place-items: center;
      margin: 0 auto 16px;
    }
    .step-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .step-card p  { font-size: .86rem; color: var(--clr-muted); }

    /* ── Section: Testimonials ────────────────────────────── */
    .testimonials { background: var(--clr-light); }
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 44px;
    }
    .testimonial-card {
      background: var(--clr-white);
      border-radius: var(--radius-md);
      padding: 30px;
      border: 1px solid var(--clr-border);
      box-shadow: var(--shadow-sm);
    }
    .testimonial-card__stars { color: #f4b740; font-size: .95rem; margin-bottom: 14px; }
    .testimonial-card__quote {
      font-size: .95rem;
      color: var(--clr-text);
      line-height: 1.7;
      margin-bottom: 18px;
      font-style: italic;
    }
    .testimonial-card__author {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .testimonial-card__avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }
    .testimonial-card__name { font-weight: 700; font-size: .92rem; }
    .testimonial-card__role { font-size: .78rem; color: var(--clr-muted); }

    /* ── Section: Inventory Checker (Interactive) ─────────── */
    .checker {
      background: var(--clr-white);
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
    }
    .checker__inner {
      background: linear-gradient(135deg, var(--clr-primary), #252547);
      border-radius: var(--radius-lg);
      padding: 50px;
      color: #fff;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }
    .checker__left h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 800;
      margin-bottom: 12px;
    }
    .checker__left p {
      color: rgba(255,255,255,.68);
      font-size: 1rem;
      margin-bottom: 24px;
    }
    .checker__form { display: flex; flex-direction: column; gap: 14px; }
    .checker__row { display: flex; gap: 10px; }
    .checker__input {
      flex: 1;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.08);
      color: #fff;
      font-size: .92rem;
      font-family: inherit;
      transition: border-color .2s;
    }
    .checker__input::placeholder { color: rgba(255,255,255,.4); }
    .checker__input:focus {
      outline: none;
      border-color: var(--clr-accent);
    }
    .checker__result {
      margin-top: 18px;
      padding: 16px 20px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,.08);
      font-size: .95rem;
      display: none;
    }
    .checker__result.show { display: block; }
    .checker__result.success { border-left: 4px solid #4ade80; }
    .checker__result.low { border-left: 4px solid var(--clr-accent); }
    .checker__result.empty { border-left: 4px solid #f87171; }
    .checker__result strong { color: var(--clr-accent-2); }

    /* ── Sidebar / Recently Viewed ────────────────────────── */
    .sidebar-section { background: var(--clr-white); border-top: 1px solid var(--clr-border); }
    .sidebar-layout {
      display: grid;
      grid-template-columns: 1.4fr .9fr;
      gap: 48px;
      align-items: start;
    }
    .sidebar-card {
      background: var(--clr-light);
      border-radius: var(--radius-md);
      padding: 28px;
      border: 1px solid var(--clr-border);
    }
    .sidebar-card h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sidebar-card h3 svg { width: 18px; height: 18px; stroke: var(--clr-accent); }
    .recent-item {
      display: flex;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--clr-border);
      align-items: center;
    }
    .recent-item:last-child { border-bottom: none; }
    .recent-item img {
      width: 56px; height: 56px;
      border-radius: var(--radius-sm);
      object-fit: cover;
      background: #e8e0d8;
    }
    .recent-item__info { flex: 1; }
    .recent-item__title { font-size: .88rem; font-weight: 600; margin-bottom: 2px; }
    .recent-item__price { font-size: .82rem; color: var(--clr-muted); }
    .recent-item__bounce {
      font-size: .75rem;
      color: var(--clr-accent);
      font-weight: 600;
    }

    /* ── FAQ Accordion ────────────────────────────────────── */
    .faq-section { background: var(--clr-light); }
    .faq-list { max-width: 760px; margin-top: 36px; }
    .faq-item {
      border-bottom: 1px solid var(--clr-border);
    }
    .faq-item:last-child { border-bottom: none; }
    .faq-question {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 4px;
      background: none;
      border: none;
      font-size: 1.02rem;
      font-weight: 600;
      color: var(--clr-primary);
      font-family: inherit;
      text-align: left;
      transition: color .2s;
    }
    .faq-question:hover { color: var(--clr-accent); }
    .faq-question .faq-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--clr-light);
      display: grid; place-items: center;
      flex-shrink: 0;
      transition: transform .3s, background .2s;
    }
    .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--clr-accent); }
    .faq-icon svg { width: 14px; height: 14px; stroke: var(--clr-primary); }
    .faq-item.open .faq-icon svg { stroke: #fff; }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .35s ease;
      padding: 0 4px;
      color: var(--clr-muted);
      font-size: .92rem;
      line-height: 1.7;
    }
    .faq-item.open .faq-answer {
      max-height: 300px;
      padding: 0 4px 20px;
    }

    /* ── Footer ───────────────────────────────────────────── */
    footer {
      background: var(--clr-primary);
      color: rgba(255,255,255,.7);
      padding: 60px 0 30px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .footer-brand h3 {
      font-size: 1.3rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-brand h3 span { color: var(--clr-accent); }
    .footer-brand p { font-size: .9rem; max-width: 300px; }
    .footer-col h4 {
      color: #fff;
      font-size: .85rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 16px;
    }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 8px; }
    .footer-col a {
      font-size: .88rem;
      color: rgba(255,255,255,.6);
      transition: color .2s;
    }
    .footer-col a:hover { color: var(--clr-accent-2); }
    .footer-contact p {
      font-size: .88rem;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-contact svg { width: 16px; height: 16px; stroke: var(--clr-accent-2); flex-shrink: 0; }
    .footer-social {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .footer-social a {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      display: grid; place-items: center;
      transition: background .2s, transform .2s;
    }
    .footer-social a:hover { background: var(--clr-accent); transform: translateY(-2px); }
    .footer-social svg { width: 18px; height: 18px; stroke: rgba(255,255,255,.7); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.1);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: .82rem;
    }
    .footer-bottom-links { display: flex; gap: 20px; }
    .footer-bottom-links a:hover { color: var(--clr-accent-2); }

    /* ── Responsive ───────────────────────────────────────── */
    @media (max-width: 1024px) {
      .hero .container { grid-template-columns: 1fr; }
      .hero__visual { max-width: 420px; margin: 0 auto; }
      .features { grid-template-columns: repeat(2, 1fr); }
      .gift-grid { grid-template-columns: repeat(2, 1fr); }
      .editor-grid { grid-template-columns: repeat(2, 1fr); }
      .seasonal-grid { grid-template-columns: repeat(2, 1fr); }
      .steps-grid { grid-template-columns: repeat(2, 1fr); }
      .step-card:nth-child(2)::after { display: none; }
      .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
      .sidebar-layout { grid-template-columns: 1fr; }
      .checker__inner { grid-template-columns: 1fr; padding: 36px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      :root { --nav-h: 64px; }
      .nav__list { display: none; }
      .nav__hamburger { display: block; }
      .nav__mobile {
        display: none;
        flex-direction: column;
        background: var(--clr-white);
        border-bottom: 1px solid var(--clr-border);
        padding: 16px 24px 24px;
        position: absolute;
        top: var(--nav-h);
        left: 0; right: 0;
        box-shadow: var(--shadow-lg);
        z-index: 99;
      }
      .nav__mobile.open { display: flex; }
      .nav__mobile a {
        padding: 12px 0;
        font-size: 1rem;
        font-weight: 500;
        border-bottom: 1px solid var(--clr-border);
      }
      .hero { padding: 60px 0 70px; }
      .hero__stats { gap: 20px; }
      .features { grid-template-columns: 1fr; }
      .gift-grid { grid-template-columns: 1fr; }
      .editor-grid { grid-template-columns: 1fr; }
      .seasonal-grid { grid-template-columns: 1fr; }
      .steps-grid { grid-template-columns: 1fr; }
      .testimonial-grid { grid-template-columns: 1fr; }
      .checker__row { flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; text-align: center; }
    }

    /* ── Animations on scroll (lightweight) ──────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>

  <!-- ════════════════════════════════════════════════════════════
       HEADER / NAVIGATION
       ════════════════════════════════════════════════════════════ -->
  <header>
    <div class="container nav">
      <a href="#" class="nav__logo">
        <img
          src="https://placehold.co/80x80/1a1a2e/fff?text=NC&font=montserrat&bold"
          alt="NovaCart logo"
          width="38"
          height="38"
        />
        Nova<span>Cart</span>
      </a>

      <ul class="nav__list">
        <li><a href="#new-arrivals" class="active">New Arrivals</a></li>
        <li><a href="#gift-guides">Gift Guides</a></li>
        <li><a href="#editor-picks">Editor Picks</a></li>
        <li><a href="#seasonal">Seasonal</a></li>
        <li><a href="#sale">Sale</a></li>
        <li><a href="#brands">Brands</a></li>
        <li><a href="#cart">Cart</a></li>
        <li><a href="#account">Account</a></li>
      </ul>

      <div class="nav__actions">
        <button class="nav__icon" aria-label="Search">
          <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
          </svg>
        </button>
        <button class="nav__icon" aria-label="Cart">
          <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>
          </svg>
          <span class="nav__cart-badge">3</span>
        </button>
        <button class="nav__hamburger" id="hamburger" aria-label="Menu">
          <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/>
          </svg>
        </button>
      </div>

      <!-- Mobile nav panel -->
      <div class="nav__mobile" id="mobileNav">
        <a href="#new-arrivals">New Arrivals</a>
        <a href="#gift-guides">Gift Guides</a>
        <a href="#editor-picks">Editor Picks</a>
        <a href="#seasonal">Seasonal</a>
        <a href="#sale">Sale</a>
        <a href="#brands">Brands</a>
        <a href="#cart">Cart</a>
        <a href="#account">Account</a>
      </div>
    </div>
  </header>

  <!-- ════════════════════════════════════════════════════════════
       HERO
       ════════════════════════════════════════════════════════════ -->
  <section class="hero">
    <div class="container">
      <div class="hero__content">
        <div class="hero__eyebrow">Curated Shopping, Redefined</div>
        <h1 class="hero__title">
          The things you <em>love</em>,<br>delivered with intention.
        </h1>
        <p class="hero__desc">
          NovaCart brings together the best of independent retail — from emerging
          designers to timeless everyday essentials. Every product is hand-picked,
          quality-checked, and shipped with care. Free shipping on orders over $50,
          and our 30-day price-match guarantee means you never pay more than you should.
        </p>
        <div class="hero__actions">
          <a href="#new-arrivals" class="btn btn--primary">
            Shop New Arrivals
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
          </a>
          <a href="#gift-guides" class="btn btn--white">Explore Gift Guides</a>
        </div>
        <div class="hero__stats">
          <div>
            <div class="hero__stat-num">12,400+</div>
            <div class="hero__stat-label">Curated products</div>
          </div>
          <div>
            <div class="hero__stat-num">4.9 ★</div>
            <div class="hero__stat-label">Average rating</div>
          </div>
          <div>
            <div class="hero__stat-num">200+</div>
            <div class="hero__stat-label">Independent brands</div>
          </div>
        </div>
      </div>
      <div class="hero__visual">
        <img
          src="https://placehold.co/720x900/252547/fff?text=NovaCart+Collection&font=source+sans+pro"
          alt="NovaCart seasonal collection showcase"
          width="720"
          height="900"
        />
        <div class="hero__badges">
          <div class="hero__badge"><span>★</span> Top Pick</div>
          <div class="hero__badge"><span>🚚</span> Free Shipping</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       TRUST / FEATURES ROW
       ════════════════════════════════════════════════════════════ -->
  <section class="section-sm" style="background: var(--clr-white);">
    <div class="container">
      <div class="features">
        <div class="feature-card reveal">
          <div class="feature-card__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="2"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
          </div>
          <h3>Free Shipping</h3>
          <p>On all orders over $50. Delivered in 2–4 business days with tracked, signature-required delivery.</p>
        </div>
        <div class="feature-card reveal">
          <div class="feature-card__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <h3>Price Match Guarantee</h3>
          <p>See it cheaper elsewhere? We'll match the price and refund the difference — no fuss, no forms.</p>
        </div>
        <div class="feature-card reveal">
          <div class="feature-card__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.5 14 8 12 13 14 16 12 21 14"/></svg>
          </div>
          <h3>30-Day Returns</h3>
          <p>Not quite right? Return unworn, unused items within 30 days for a full refund — we cover return shipping.</p>
        </div>
        <div class="feature-card reveal">
          <div class="feature-card__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </div>
          <h3>Expert Curation</h3>
          <p>Every product is vetted by our editorial team for quality, design, and value before it reaches our shelves.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       GIFT GUIDES
       ════════════════════════════════════════════════════════════ -->
  <section class="section gift-guides" id="gift-guides">
    <div class="container">
      <span class="section__label reveal">Curated Collections</span>
      <h2 class="section__title reveal">Gift Guides for Every Occasion</h2>
      <p class="section__desc reveal">
        Stuck on what to buy? Our editors have assembled thoughtful, visually cohesive
        gift guides for birthdays, holidays, housewarmings, and those "just because"
        moments. Each guide is built around a theme — from minimalist home accents to
        bold statement accessories — so you can shop with confidence and skip the guesswork.
      </p>
      <div class="gift-grid">
        <article class="gift-card reveal">
          <div class="gift-card__img">
            <img
              src="https://placehold.co/600x450/e8734a/fff?text=Gifts+for+Him&font=source+sans+pro"
              alt="Gifts for Him collection"
              width="600"
              height="450"
            />
            <span class="gift-card__tag">Bestseller</span>
          </div>
          <div class="gift-card__body">
            <div class="gift-card__category">Gift Guide</div>
            <h3 class="gift-card__title">Thoughtful Gifts for Him</h3>
            <p class="gift-card__desc">
              From handcrafted leather goods to premium grooming essentials — curated
              picks that feel personal and last well beyond the season.
            </p>
            <div class="gift-card__footer">
              <div class="gift-card__price">From $29 <small>& up</small></div>
              <a href="#" class="btn btn--outline" style="padding:6px 16px;font-size:.82rem;">Quick View</a>
            </div>
          </div>
        </article>

        <article class="gift-card reveal">
          <div class="gift-card__img">
            <img
              src="https://placehold.co/600x450/f2a65a/1a1a2e?text=Home+&amp;+Living&font=source+sans+pro"
              alt="Home & Living gift guide"
              width="600"
              height="450"
            />
            <span class="gift-card__tag">New</span>
          </div>
          <div class="gift-card__body">
            <div class="gift-card__category">Gift Guide</div>
            <h3 class="gift-card__title">Home & Living Essentials</h3>
            <p class="gift-card__desc">
              Elevate any space with our hand-selected towels, ceramics, candles, and
              small furniture pieces from emerging makers and established houses alike.
            </p>
            <div class="gift-card__footer">
              <div class="gift-card__price">From $18 <small>& up</small></div>
              <a href="#" class="btn btn--outline" style="padding:6px 16px;font-size:.82rem;">Quick View</a>
            </div>
          </div>
        </article>

        <article class="gift-card reveal">
          <div class="gift-card__img">
            <img
              src="https://placehold.co/600x450/1a1a2e/fff?text=Under+%2450&font=source+sans+pro"
              alt="Under $50 gift guide"
              width="600"
              height="450"
            />
            <span class="gift-card__tag">Budget</span>
          </div>
          <div class="gift-card__body">
            <div class="gift-card__category">Gift Guide</div>
            <h3 class="gift-card__title">Gifts Under $50</h3>
            <p class="gift-card__desc">
              Small but meaningful: books, accessories, skincare, and lifestyle treats
              that punch well above their price point. Perfect for Secret Santa and
              last-minute thoughtful gestures.
            </p>
            <div class="gift-card__footer">
              <div class="gift-card__price">From $12 <small>& up</small></div>
              <a href="#" class="btn btn--outline" style="padding:6px 16px;font-size:.82rem;">Quick View</a>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       EDITOR PICKS — PRODUCT GRID
       ════════════════════════════════════════════════════════════ -->
  <section class="section editor-picks" id="editor-picks">
    <div class="container">
      <span class="section__label reveal">Hand-Picked by Editors</span>
      <h2 class="section__title reveal">Editor Picks — This Week's Standouts</h2>
      <p class="section__desc reveal">
        Each week, our editorial team scours hundreds of new arrivals to surface the
        pieces worth your attention. We test, compare, and recommend — so you can shop
        with a shortlist of genuinely excellent products. All Editor Picks are eligible
        for our price-match guarantee and free returns.
      </p>
      <div class="editor-grid" id="new-arrivals">
        <article class="product-card reveal">
          <div class="product-card__img">
            <img
              src="https://placehold.co/500x500/e0d8cf/1a1a2e?text=Merino+Crewneck&font=source+sans+pro"
              alt="Merino Wool Crewneck Sweater"
              width="500"
              height="500"
            />
            <button class="product-card__wish" aria-label="Add to wishlist">♡</button>
            <span class="product-card__quick-view">Quick View</span>
          </div>
          <div class="product-card__body">
            <div class="product-card__brand">Arden &amp; Co.</div>
            <h3 class="product-card__title">Merino Wool Crewneck Sweater</h3>
            <div class="product-card__stars">★★★★★ <span style="color:var(--clr-muted);font-size:.78rem;margin-left:4px;">(142)</span></div>
            <div class="product-card__footer">
              <span class="product-card__price">$89.00</span>
              <a href="#" class="btn btn--primary" style="padding:6px 14px;font-size:.78rem;">Buy Now</a>
            </div>
          </div>
        </article>

        <article class="product-card reveal">
          <div class="product-card__img">
            <img
              src="https://placehold.co/500x500/f5f1eb/1a1a2e?text=Horizon+Watch&font=source+sans+pro"
              alt="Horizon Minimalist Watch"
              width="500"
              height="500"
            />
            <button class="product-card__wish" aria-label="Add to wishlist">♡</button>
            <span class="product-card__quick-view">Quick View</span>
          </div>
          <div class="product-card__body">
            <div class="product-card__brand">Horizon Watches</div>
            <h3 class="product-card__title">Minimalist Leather Watch</h3>
            <div class="product-card__stars">★★★★☆ <span style="color:var(--clr-muted);font-size:.78rem;margin-left:4px;">(89)</span></div>
            <div class="product-card__footer">
              <span class="product-card__price">$145.00</span>
              <a href="#" class="btn btn--primary" style="padding:6px 14px;font-size:.78rem;">Buy Now</a>
            </div>
          </div>
        </article>

        <article class="product-card reveal">
          <div class="product-card__img">
            <img
              src="https://placehold.co/500x500/e8734a/fff?text=Oak+Satchel&font=source+sans+pro"
              alt="Oak & Hide Satchel Bag"
              width="500"
              height="500"
            />
            <button class="product-card__wish" aria-label="Add to wishlist">♡</button>
            <span class="product-card__quick-view">Quick View</span>
          </div>
          <div class="product-card__body">
            <div class="product-card__brand">Oak &amp; Hide</div>
            <h3 class="product-card__title">Vegetable-Tanned Satchel</h3>
            <div class="product-card__stars">★★★★★ <span style="color:var(--clr-muted);font-size:.78rem;margin-left:4px;">(211)</span></div>
            <div class="product-card__footer">
              <span class="product-card__price">$210.00</span>
              <a href="#" class="btn btn--primary" style="padding:6px 14px;font-size:.78rem;">Buy Now</a>
            </div>
          </div>
        </article>

        <article class="product-card reveal">
          <div class="product-card__img">
            <img
              src="https://placehold.co/500x500/252547/fff?text=Ceramic+Mug&font=source+sans+pro"
              alt="Stoneware Ceramic Mug Set"
              width="500"
              height="500"
            />
            <button class="product-card__wish" aria-label="Add to wishlist">♡</button>
            <span class="product-card__quick-view">Quick View</span>
          </div>
          <div class="product-card__body">
            <div class="product-card__brand">Makers &amp; Kilns</div>
            <h3 class="product-card__title">Stoneware Mug Set — 4 Pack</h3>
            <div class="product-card__stars">★★★★★ <span style="color:var(--clr-muted);font-size:.78rem;margin-left:4px;">(56)</span></div>
            <div class="product-card__footer">
              <span class="product-card__price">$42.00</span>
              <a href="#" class="btn btn--primary" style="padding:6px 14px;font-size:.78rem;">Buy Now</a>
            </div>
          </div>
        </article>
      </div>

      <div style="text-align:center;margin-top:36px;" class="reveal">
        <a href="#" class="btn btn--outline">View All New Arrivals →
        </a>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       SEASONAL COLLECTION
       ════════════════════════════════════════════════════════════ -->
  <section class="section seasonal" id="seasonal">
    <div class="container">
      <span class="section__label reveal">Limited-Time Collection</span>
      <h2 class="section__title reveal">Autumn Layers — The Seasonal Edit</h2>
      <p class="section__desc reveal">
        Our Autumn Layers collection brings together heavyweight knits, rich leathers,
        warm ceramics, and home fragrances that make the colder months feel intentional.
        Each piece is limited in quantity — once it's gone, it's gone until next season.
        Shop the edit and save 15% on orders over $100 with code <strong>AUTUMN15</strong>.
      </p>
      <div class="seasonal-grid">
        <article class="seasonal-card reveal">
          <img
            src="https://placehold.co/600x800/3a2a1a/fff?text=Knit+Collection&font=source+sans+pro"
            alt="Autumn knitwear collection"
            width="600"
            height="800"
          />
          <div class="seasonal-card__overlay">
            <span class="seasonal-card__tag">New Drop</span>
            <h3 class="seasonal-card__title"> Heavyweight Knitwear</h3>
            <p class="seasonal-card__desc">Merino, cashmere blends, and chunky wool — built for layering.</p>
            <a href="#" class="btn btn--white">Shop Knitwear</a>
          </div>
        </article>
        <article class="seasonal-card reveal">
          <img
            src="https://placehold.co/600x800/4a3a2a/fff?text=Leather+Goods&font=source+sans+pro"
            alt="Autumn leather goods"
            width="600"
            height="800"
          />
          <div class="seasonal-card__overlay">
            <span class="seasonal-card__tag">Editor's Pick</span>
            <h3 class="seasonal-card__title">Leather & Hide</h3>
            <p class="seasonal-card__desc">Satchels, belts, gloves — vegetable-tanned and built to last.</p>
            <a href="#" class="btn btn--white">Shop Leather</a>
          </div>
        </article>
        <article class="seasonal-card reveal">
          <img
            src="https://placehold.co/600x800/5a4a3a/fff?text=Home+Accents&font=source+sans+pro"
            alt="Autumn home accents"
            width="600"
            height="800"
          />
          <div class="seasonal-card__overlay">
            <span class="seasonal-card__tag">New</span>
            <h3 class="seasonal-card__title">Home & Atmosphere</h3>
            <p class="seasonal-card__desc">Candles, throws, ceramics, and diffusers for a warmer home.</p>
            <a href="#" class="btn btn--white">Shop Home</a>
          </div>
        </article>
      </div>
      <div style="text-align:center;margin-top:32px;" class="reveal">
        <a href="#" class="btn btn--primary" style="padding:12px 32px;font-size:1rem;">
          Apply Code: AUTUMN15
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </a>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       HOW IT WORKS
       ════════════════════════════════════════════════════════════ -->
  <section class="section how-it-works">
    <div class="container">
      <span class="section__label reveal">Simple & Transparent</span>
      <h2 class="section__title reveal">How NovaCart Works</h2>
      <p class="section__desc reveal">
        Shopping should feel effortless. Here's how we make it that way — from
        discovery to doorstep, every step is designed to be clear, fair, and
        surprisingly pleasant.
      </p>
      <div class="steps-grid">
        <div class="step-card reveal">
          <div class="step-num">1</div>
          <h3>Browse &amp; Discover</h3>
          <p>Explore curated collections, search by category, or let our editors guide you with weekly picks and gift guides.</p>
        </div>
        <div class="step-card reveal">
          <div class="step-num">2</div>
          <h3>Add to Cart</h3>
          <p>Build your bundle with free shipping on orders over $50. Mix and match across brands — no minimums, no hassle.</p>
        </div>
        <div class="step-card reveal">
          <div class="step-num">3</div>
          <h3>Checkout Securely</h3>
          <p>Pay with confidence using Apple Pay, Google Pay, or card. All transactions are encrypted and protected by fraud monitoring.</p>
        </div>
        <div class="step-card reveal">
          <div class="step-num">4</div>
          <h3>Delivered &amp; Tracked</h3>
          <p>Free shipping on orders over $50, delivered in 2–4 days with full tracking. Free returns within 30 days — we cover the cost.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       INTERACTIVE: INVENTORY CHECKER
       ════════════════════════════════════════════════════════════ -->
  <section class="section checker" id="checker">
    <div class="container">
      <div class="checker__inner">
        <div class="checker__left">
          <span class="section__label" style="color:var(--clr-accent-2);">Real-Time Inventory</span>
          <h2 class="reveal">Check live stock before you shop</h2>
          <p class="reveal">
            Wondering if that perfect item is still available in your size or preferred
            color? Use our inventory checker to see real-time stock levels across our
            warehouse and partner stores. No sign-in required — just type a product name
            and get an instant, honest answer.
          </p>
          <div class="reveal" style="margin-top:12px;">
            <p style="color:rgba(255,255,255,.55);font-size:.85rem;">
              Try it: <strong>Merino sweater</strong>, <strong>satchel</strong>, <strong>ceramic mug</strong>
            </p>
          </div>
        </div>
        <div class="checker__right">
          <form class="checker__form reveal" id="inventoryForm">
            <label for="productQuery" style="font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:4px;display:block;">Search a product</label>
            <div class="checker__row">
              <input
                type="text"
                id="productQuery"
                class="checker__input"
                placeholder="e.g. Merino sweater"
                autocomplete="off"
              />
              <button type="submit" class="btn btn--primary" style="white-space:nowrap;">Check</button>
            </div>
            <div class="checker__result" id="checkerResult"></div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       SIDEBAR: RECENTLY VIEWED + RECOMMENDATIONS
       ════════════════════════════════════════════════════════════ -->
  <section class="section-sm sidebar-section" id="account">
    <div class="container">
      <div class="sidebar-layout">
        <div>
          <span class="section__label reveal">Your Activity</span>
          <h2 class="section__title reveal">Recently Viewed</h2>
          <p class="section__desc reveal">
            Items you've browsed recently appear here so you can pick up where you left
            off. Your recently viewed list is saved across sessions — log in to sync
            across devices.
          </p>

          <div class="sidebar-card reveal" style="margin-top:24px;">
            <h3>
              <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              Trending Right Now
            </h3>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;">
              <div class="recent-item" style="border:none;padding:0;">
                <img
                  src="https://placehold.co/120x120/e8734a/fff?text=Crewneck&font=source+sans+pro"
                  alt="Merino Crewneck"
                  width="56"
                  height="56"
                />
                <div class="recent-item__info">
                  <div class="recent-item__title">Merino Crewneck</div>
                  <div class="recent-item__price">$89.00</div>
                </div>
              </div>
              <div class="recent-item" style="border:none;padding:0;">
                <img
                  src="https://placehold.co/120x120/f2a65a/1a1a2e?text=Satchel&font=source+sans+pro"
                  alt="Vegetable-Tanned Satchel"
                  width="56"
                  height="56"
                />
                <div class="recent-item__info">
                  <div class="recent-item__title">Veg-Tanned Satchel</div>
                  <div class="recent-item__price">$210.00</div>
                </div>
              </div>
              <div class="recent-item" style="border:none;padding:0;">
                <img
                  src="https://placehold.co/120x120/252547/fff?text=Watch&font=source+sans+pro"
                  alt="Minimalist Watch"
                  width="56"
                  height="56"
                />
                <div class="recent-item__info">
                  <div class="recent-item__title">Minimalist Watch</div>
                  <div class="recent-item__price">$145.00</div>
                </div>
              </div>
              <div class="recent-item" style="border:none;padding:0;">
                <img
                  src="https://placehold.co/120x120/e0d8cf/1a1a2e?text=Mug+Set&font=source+sans+pro"
                  alt="Stoneware Mug Set"
                  width="56"
                  height="56"
                />
                <div class="recent-item__info">
                  <div class="recent-item__title">Stoneware Mug Set</div>
                  <div class="recent-item__price">$42.00</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="sidebar-card reveal">
          <h3>
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            Recommended for You
          </h3>
          <p style="font-size:.85rem;color:var(--clr-muted);margin-bottom:18px;">
            Based on your browsing history and what's trending this week.
          </p>
          <div class="recent-item">
            <img
              src="https://placehold.co/80x80/e8734a/fff?text=Scarf&font=source+sans+pro"
              alt="Cashmere Blend Scarf"
              width="56"
              height="56"
            />
            <div class="recent-item__info">
              <div class="recent-item__title">Cashmere Blend Scarf</div>
              <div class="recent-item__price">$64.00</div>
            </div>
            <span class="recent-item__bounce">★ Hot</span>
          </div>
          <div class="recent-item">
            <img
              src="https://placehold.co/80x80/f2a65a/1a1a2e?text=Candle&font=source+sans+pro"
              alt="Seasonal Candle"
              width="56"
              height="56"
            />
            <div class="recent-item__info">
              <div class="recent-item__title">Autumn Wood Candle</div>
              <div class="recent-item__price">$28.00</div>
            </div>
          </div>
          <div class="recent-item">
            <img
              src="https://placehold.co/80x80/252547/fff?text=Socks&font=source+sans+pro"
              alt="Merino Wool Socks"
              width="56"
              height="56"
            />
            <div class="recent-item__info">
              <div class="recent-item__title">Merino Wool Socks — 3 Pack</div>
              <div class="recent-item__price">$36.00</div>
            </div>
          </div>
          <div class="recent-item">
            <img
              src="https://placehold.co/80x80/e0d8cf/1a1a2e?text=Journal&font=source+sans+pro"
              alt="Hardcover Journal"
              width="56"
              height="56"
            />
            <div class="recent-item__info">
              <div class="recent-item__title">Hardcover Journal</div>
              <div class="recent-item__price">$22.00</div>
            </div>
          </div>
          <div style="margin-top:18px;">
            <a href="#" class="btn btn--outline" style="width:100%;justify-content:center;">View All Recommendations</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       TESTIMONIALS
       ════════════════════════════════════════════════════════════ -->
  <section class="section testimonials">
    <div class="container">
      <span class="section__label reveal">Real Customer Reviews</span>
      <h2 class="section__title reveal">What Our Shoppers Say</h2>
      <p class="section__desc reveal">
        We read every review and use your feedback to improve every part of the
        NovaCart experience — from product selection to packaging to the checkout flow.
      </p>
      <div class="testimonial-grid">
        <div class="testimonial-card reveal">
          <div class="testimonial-card__stars">★★★★★</div>
          <p class="testimonial-card__quote">
            "The curation is genuinely excellent. I've discovered several small brands
            through NovaCart that I now buy from directly. The packaging is beautiful and
            every item arrived exactly as described."
          </p>
          <div class="testimonial-card__author">
            <img
              class="testimonial-card__avatar"
              src="https://i.pravatar.cc/88?u=sarah"
              alt="Sarah M."
              width="44"
              height="44"
            />
            <div>
              <div class="testimonial-card__name">Sarah Mitchell</div>
              <div class="testimonial-card__role">Loyal shopper since 2023</div>
            </div>
          </div>
        </div>
        <div class="testimonial-card reveal">
          <div class="testimonial-card__stars">★★★★★</div>
          <p class="testimonial-card__quote">
            "I used the gift guide for my partner's birthday and it took the stress out
            of shopping completely. Everything arrived in two days with free shipping, and
            the price-match policy gave me confidence I wasn't overpaying."
          </p>
          <div class="testimonial-card__author">
            <img
              class="testimonial-card__avatar"
              src="https://i.pravatar.cc/88?u=james"
              alt="James K."
              width="44"
              height="44"
            />
            <div>
              <div class="testimonial-card__name">James Kowalski</div>
              <div class="testimonial-card__role">Gift guide regular</div>
            </div>
          </div>
        </div>
        <div class="testimonial-card reveal">
          <div class="testimonial-card__stars">★★★★☆</div>
          <p class="testimonial-card__quote">
            "The inventory checker is a game-changer — I checked stock for a satchel in
            my size before ordering and it saved me a return. Fast checkout, clear
            tracking, and the 30-day return window is genuinely generous."
          </p>
          <div class="testimonial-card__author">
            <img
              class="testimonial-card__avatar"
              src="https://i.pravatar.cc/88?u=priya"
              alt="Priya R."
              width="44"
              height="44"
            />
            <div>
              <div class="testimonial-card__name">Priya Raman</div>
              <div class="testimonial-card__role">First-time buyer, repeat customer</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       FAQ ACCORDION
       ════════════════════════════════════════════════════════════ -->
  <section class="section faq-section">
    <div class="container">
      <span class="section__label reveal">Got Questions?</span>
      <h2 class="section__title reveal">Frequently Asked Questions</h2>
      <p class="section__desc reveal">
        Everything you need to know about shopping with NovaCart — from shipping and
        returns to our price-match policy and how we curate our collections.
      </p>
      <div class="faq-list">
        <div class="faq-item open">
          <button class="faq-question">
            How does free shipping work?
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
          </button>
          <div class="faq-answer">
            We offer free standard shipping on all orders over $50 within the continental
            US. Orders ship in 2–4 business days with full tracking and signature-required
            delivery on packages over $100. Express shipping is available at checkout for
            an additional fee.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question">
            What is the Price Match Guarantee?
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
          </button>
          <div class="faq-answer">
            If you find the same product — identical brand, model, size, and color — sold
            by an authorized retailer at a lower price, we'll match it and refund the
            difference. Submit your claim within 14 days of purchase through your account
            dashboard, and we'll process it within 24 hours.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question">
            How do returns work?
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
          </button>
          <div class="faq-answer">
            Returns are free within 30 days of delivery. Items must be unworn, unused, and
            in original packaging. Initiate a return from your account or contact our support
            team — we'll send a prepaid label. Once we receive the item, your refund is
            processed within 3–5 business days.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question">
            How are products curated?
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
          </button>
          <div class="faq-answer">
            Every product on NovaCart is vetted by our editorial team against criteria for
            craftsmanship, design integrity, material quality, and value. We partner directly
            with makers and brands — no dropshipping, no third-party marketplaces. If a
            product doesn't meet our bar, it doesn't make it onto the shelf.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question">
            Can I track my order in real time?
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
          </button>
          <div class="faq-answer">
            Yes — once your order ships, you'll receive a tracking link via email and in your
            account dashboard. You can see real-time scans, estimated delivery windows, and
            get notified when your package is out for delivery. Signature confirmation is
            required for orders over $100.
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ════════════════════════════════════════════════════════════
       FOOTER
       ════════════════════════════════════════════════════════════ -->
  <footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <h3>Nova<span>Cart</span></h3>
          <p>
            Curated shopping, redefined. We bring together the best of independent retail —
            hand-picked products, fair prices, and a checkout experience that actually feels
            good.
          </p>
          <div class="footer-social">
            <a href="#" aria-label="Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 12.5a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/><path d="M12 17.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
            </a>
            <a href="#" aria-label="X / Twitter">
              <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l16 16M4 20L20 4"/></svg>
            </a>
            <a href="#" aria-label="Pinterest">
              <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.25 2.67 7.88 6.42 9.31-.09-.78-.17-1.99.03-2.84.18-.78 1.22-5.17 1.22-5.17s-.31-.61-.31-1.52c0-1.42.82-2.44 1.85-2.44.87 0 1.29.62 1.29 1.25 0 .88-.56 2.19-.83 3.41-.24 1.02.51 1.85 1.46 1.85 1.73 0 3.08-1.86 3.08-4.58 0-2.26-1.48-3.84-3.47-3.84-2.47 0-3.86 1.64-3.86 3.41 0 .88.34 1.7.74 2.24.08.1.1.19.07.3-.08.32-.26 1.07-.29 1.24-.04.23-.13.27-.35.16-1.36-.71-2.22-2.52-2.22-4.04 0-3.31 2.41-6.35 6.93-6.35 3.6 0 6.47 2.53 6.47 6.1 0 3.6-2.19 6.36-5.12 6.36-1.06 0-2.05-.52-2.4-1.14l-.6 .12c-.27.06-.57.1-.9.1-.52 0-.94-.33-.94-.83 0-.48.37-.77.82-.77.22 0 .44.12.55.31.09.16.13.32.12.52-.01.2-.07.52-.17.82-.08.23-.23.37-.44.44-.06.02-.12.02-.18.02z"/></svg>
            </a>
            <a href="#" aria-label="YouTube">
              <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.72 4.3 12 4.3 12 4.3s-6.72 0-8.54.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.54 2.78 2.78 0 0 0 1.95 1.96C5.28 19.7 12 19.7 12 19.7s6.72 0 8.54-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.54z"/><path d="M9.75 15.04l4.66 2.68a2.6 2.6 0 0 0 1.65.29c1.66-.64 2.88-2.33 2.94-4.08-.5.1-.99.16-1.5.16-1.1 0-2.08-.68-2.32-1.62l-.76-3.36a2.6 2.6 0 0 0-2.58-1.96H9.06a2.6 2.6 0 0 0-2.58 1.96l-.76 3.36c-.24.94-1.22 1.62-2.32 1.62-.5 0-.99-.06-1.5-.16.06 1.75 1.28 3.44 2.94 4.08.31.1.64.15.99.15 1.07 0 2.03-.74 2.3-1.8l4.66-2.68a.65.65 0 0 1 .65-.06z"/></svg>
            </a>
          </div>
        </div>

        <div class="footer-col">
          <h4>Shop</h4>
          <ul>
            <li><a href="#">New Arrivals</a></li>
            <li><a href="#">Gift Guides</a></li>
            <li><a href="#">Editor Picks</a></li>
            <li><a href="#">Seasonal</a></li>
            <li><a href="#">Sale</a></li>
            <li><a href="#">Brands</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Support</h4>
          <ul>
            <li><a href="#">Help Center</a></li>
            <li><a href="#">Shipping &amp; Returns</a></li>
            <li><a href="#">Price Match Guarantee</a></li>
            <li><a href="#">Track Your Order</a></li>
            <li><a href="#">Size Guide</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>

        <div class="footer-col footer-contact">
          <h4>Get in Touch</h4>
          <p>
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            234 Market Street, Suite 400<br>San Francisco, CA 94105
          </p>
          <p>
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            hello@novacart.com
          </p>
          <p>
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.89.7 2.76a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.87.34 1.79.58 2.77.7A2 2 0 0 1 22 16.92z"/></svg>
            +1 (415) 555-0182
          </p>
        </div>
      </div>

      <div class="footer-bottom">
        <div>
          &copy; 2026 NovaCart, Inc. All rights reserved. NovaCart is a registered trademark.
        </div>
        <div class="footer-bottom-links">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms of Service</a>
          <a href="#">Cookie Settings</a>
          <a href="#">Accessibility</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- ════════════════════════════════════════════════════════════
       JAVASCRIPT
       ════════════════════════════════════════════════════════════ -->
  <script>
    (function () {
      'use strict';

      // ── Mobile nav toggle ────────────────────────────────
      var hamburger = document.getElementById('hamburger');
      var mobileNav = document.getElementById('mobileNav');
      if (hamburger && mobileNav) {
        hamburger.addEventListener('click', function () {
          mobileNav.classList.toggle('open');
          hamburger.setAttribute('aria-expanded',
            mobileNav.classList.contains('open') ? 'true' : 'false');
        });
        // Close on link click
        mobileNav.querySelectorAll('a').forEach(function (link) {
          link.addEventListener('click', function () {
            mobileNav.classList.remove('open');
            hamburger.setAttribute('aria-expanded', 'false');
          });
        });
      }

      // ── Active nav link on scroll ────────────────────────
      var sections = document.querySelectorAll('section[id]');
      var navLinks = document.querySelectorAll('.nav__list a');
      function updateActiveLink() {
        var scrollY = window.scrollY + 120;
        var current = '';
        sections.forEach(function (sec) {
          if (sec.offsetTop <= scrollY) {
            current = sec.getAttribute('id');
          }
        });
        navLinks.forEach(function (link) {
          link.classList.remove('active');
          if (link.getAttribute('href') === '#' + current) {
            link.classList.add('active');
          }
        });
      }
      window.addEventListener('scroll', updateActiveLink, { passive: true });
      window.addEventListener('load', updateActiveLink);

      // ── Scroll reveal (IntersectionObserver) ────────────
      var revealEls = document.querySelectorAll('.reveal');
      if (revealEls.length) {
        var observer = new IntersectionObserver(function (entries) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              entry.target.classList.add('visible');
              observer.unobserve(entry.target);
            }
          });
        }, { threshold: 0.12, rootMargin: '0px 0px -30px 0px' });
        revealEls.forEach(function (el) { observer.observe(el); });
        // Immediately show any already in view on load
        revealEls.forEach(function (el) {
          var rect = el.getBoundingClientRect();
          if (rect.top < window.innerHeight - 60) {
            el.classList.add('visible');
            observer.unobserve(el);
          }
        });
      }

      // ── FAQ accordion ───────────────────────────────────
      var faqItems = document.querySelectorAll('.faq-item');
      faqItems.forEach(function (item) {
        var btn = item.querySelector('.faq-question');
        btn.addEventListener('click', function () {
          // Close others (optional — keep it clean)
          faqItems.forEach(function (other) {
            if (other !== item) other.classList.remove('open');
          });
          item.classList.toggle('open');
        });
      });

      // ── Inventory Checker (interactive) ─────────────────
      var form = document.getElementById('inventoryForm');
      var resultBox = document.getElementById('checkerResult');
      var input = document.getElementById('productQuery');

      // Sample inventory data (mock)
      var inventory = {
        'merino sweater':     { stock: 14,  status: 'good' },
        'merino':             { stock: 14,  status: 'good' },
        'sweater':            { stock: 14,  status: 'good' },
        'satchel':            { stock: 3,   status: 'low' },
        'vegetable tanned':   { stock: 3,   status: 'low' },
        'leather satchel':    { stock: 3,   status: 'low' },
        'ceramic mug':        { stock: 8,   status: 'good' },
        'mug set':            { stock: 8,   status: 'good' },
        'stoneware':          { stock: 8,   status: 'good' },
        'watch':              { stock: 0,   status: 'empty' },
        'minimalist watch':   { stock: 0,   status: 'empty' },
        'cashmere scarf':     { stock: 22,  status: 'good' },
        'scarf':              { stock: 22,  status: 'good' },
        'candle':             { stock: 45,  status: 'good' },
        'autumn candle':      { stock: 45,  status: 'good' },
        'socks':              { stock: 60,  status: 'good' },
        'merino socks':       { stock: 60,  status: 'good' },
        'journal':            { stock: 0,   status: 'empty' },
        'hardcover journal':  { stock: 0,   status: 'empty' },
      };

      function normalize(str) {
        return str.trim().toLowerCase().replace(/[^a-z0-9\s]/g, '');
      }

      function findBestMatch(query) {
        var q = normalize(query);
        if (!q) return null;
        // exact match first
        if (inventory[q]) return inventory[q];
        // partial match — look for keys that contain the query or vice versa
        var keys = Object.keys(inventory);
        for (var i = 0; i < keys.length; i++) {
          var k = keys[i];
          if (k.indexOf(q) !== -1 || q.indexOf(k) !== -1) {
            return inventory[k];
          }
        }
        // word-level matching
        var words = q.split(/\s+/);
        var best = null;
        var bestScore = 0;
        for (var j = 0; j < keys.length; j++) {
          var k = keys[j];
          var kWords = k.split(/\s+/);
          var score = 0;
          for (var wi = 0; wi < words.length; wi++) {
            for (var ki = 0; ki < kWords.length; ki++) {
              if (words[wi] === kWords[ki]) score++;
            }
          }
          if (score > bestScore) {
            bestScore = score;
            best = inventory[k];
          }
        }
        return bestScore > 0 ? best : null;
      }

      function formatResult(data, query) {
        var statusText, cssClass;
        if (data.status === 'good') {
          statusText = 'In stock — ' + data.stock + ' units available.';
          cssClass = 'success';
        } else if (data.status === 'low') {
          statusText = 'Low stock — only ' + data.stock + ' units remaining. Order soon!';
          cssClass = 'low';
        } else {
          statusText = 'Currently out of stock. Sign up for restock alerts?';
          cssClass = 'empty';
        }
        return '<strong>"' + query.trim() + '"</strong> — ' + statusText;
      }

      if (form) {
        form.addEventListener('submit', function (e) {
          e.preventDefault();
          var query = input.value.trim();
          if (!query) {
            resultBox.textContent = 'Please enter a product name to check.';
            resultBox.className = 'checker__result show empty';
            return;
          }
          var data = findBestMatch(query);
          if (data) {
            resultBox.innerHTML = formatResult(data, query);
            resultBox.className = 'checker__result show ' + data.status;
          } else {
            resultBox.innerHTML =
              '<strong>"' + query + '"</strong> — We couldn\'t find a match. Try a different product name.';
            resultBox.className = 'checker__result show empty';
          }
        });

        // Allow Enter key to submit (already handled by form submit)
        // Live-clear result on new input
        input.addEventListener('input', function () {
          if (resultBox.classList.contains('show')) {
            resultBox.classList.remove('show');
          }
        });
      }

      // ── Smooth anchor scroll (for any native links) ─────
      document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (e) {
          var target = document.querySelector(anchor.getAttribute('href'));
          if (target) {
            e.preventDefault();
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }
        });
      });

    })();
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:50:24.006Z",
  "url": "https://benchmark.aimac.invalid/cb57e5d529c6d4a7ecbe5802ee0d7bff450c1e7c1a4ae052b307e94fe0242a16.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<button class=\"nav__icon\" aria-label=\"Search\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        </button>",
          "target": [
            "button[aria-label=\"Search\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<button class=\"nav__icon\" aria-label=\"Search\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        </button>",
          "target": [
            "button[aria-label=\"Search\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<button class=\"nav__icon\" aria-label=\"Search\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        </button>",
          "target": [
            "button[aria-label=\"Search\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<button class=\"nav__icon\" aria-label=\"Search\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        </button>",
          "target": [
            "button[aria-label=\"Search\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"nav__icon\" aria-label=\"Search\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        </button>",
          "target": [
            "button[aria-label=\"Search\"]"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input type=\"text\" id=\"productQuery\" class=\"checker__input\" placeholder=\"e.g. Merino sweater\" autocomplete=\"off\">",
          "target": [
            "#productQuery"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<section class=\"section-sm\" style=\"background: var(--clr-white);\">",
          "target": [
            ".section-sm:nth-child(3)"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"nav__icon\" aria-label=\"Search\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        </button>",
          "target": [
            "button[aria-label=\"Search\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"hero__title\">\n          The things you <em>love</em>,<br>delivered with intention.\n        </h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h3>Free Shipping</h3>",
                  "target": [
                    ".feature-card.reveal:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Price Match Guarantee</h3>",
                  "target": [
                    ".feature-card.reveal:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>30-Day Returns</h3>",
                  "target": [
                    ".feature-card.reveal:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Expert Curation</h3>",
                  "target": [
                    ".feature-card.reveal:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section__title reveal\">Gift Guides for Every Occasion</h2>",
                  "target": [
                    "#gift-guides > .container > .section__title"
                  ]
                },
                {
                  "html": "<h3 class=\"gift-card__title\">Thoughtful Gifts for Him</h3>",
                  "target": [
                    ".gift-card:nth-child(1) > .gift-card__body > .gift-card__title"
                  ]
                },
                {
                  "html": "<h3 class=\"gift-card__title\">Home &amp; Living Essentials</h3>",
                  "target": [
                    ".gift-card:nth-child(2) > .gift-card__body > .gift-card__title"
                  ]
                },
                {
                  "html": "<h3 class=\"gift-card__title\">Gifts Under $50</h3>",
                  "target": [
                    ".gift-card:nth-child(3) > .gift-card__body > .gift-card__title"
                  ]
                },
                {
                  "html": "<h2 class=\"section__title reveal\">Editor Picks \u2014 This Week's Standouts</h2>",
                  "target": [
                    "#editor-picks > .container > .section__title"
                  ]
                },
                {
                  "html": "<h3 class=\"product-card__title\">Merino Wool Crewneck Sweater</h3>",
                  "target": [
                    ".product-card:nth-child(1) > .product-card__body > .product-card__title"
                  ]
                },
                {
                  "html": "<h3 class=\"product-card__title\">Minimalist Leather Watch</h3>",
                  "target": [
                    ".product-card:nth-child(2) > .product-card__body > .product-card__title"
                  ]
                },
                {
                  "html": "<h3 class=\"product-card__title\">Vegetable-Tanned Satchel</h3>",
                  "target": [
                    ".product-card:nth-child(3) > .product-card__body > .product-card__title"
                  ]
                },
                {
                  "html": "<h3 class=\"product-card__title\">Stoneware Mug Set \u2014 4 Pack</h3>",
                  "target": [
                    ".product-card:nth-child(4) > .product-card__body > .product-card__title"
                  ]
                },
                {
                  "html": "<h2 class=\"section__title reveal\">Autumn Layers \u2014 The Seasonal Edit</h2>",
                  "target": [
                    "#seasonal > .container > .section__title"
                  ]
                },
                {
                  "html": "<h3 class=\"seasonal-card__title\"> Heavyweight Knitwear</h3>",
                  "target": [
                    ".seasonal-card:nth-child(1) > .seasonal-card__overlay > .seasonal-card__title"
                  ]
                },
                {
                  "html": "<h3 class=\"seasonal-card__title\">Leather &amp; Hide</h3>",
                  "target": [
                    ".seasonal-card:nth-child(2) > .seasonal-card__overlay > .seasonal-card__title"
                  ]
                },
                {
                  "html": "<h3 class=\"seasonal-card__title\">Home &amp; Atmosphere</h3>",
                  "target": [
                    ".seasonal-card:nth-child(3) > .seasonal-card__overlay > .seasonal-card__title"
                  ]
                },
                {
                  "html": "<h2 class=\"section__title reveal\">How NovaCart Works</h2>",
                  "target": [
                    ".how-it-works > .container > .section__title"
                  ]
                },
                {
                  "html": "<h3>Browse &amp; Discover</h3>",
                  "target": [
                    ".step-card.reveal:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Add to Cart</h3>",
                  "target": [
                    ".step-card.reveal:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Checkout Securely</h3>",
                  "target": [
                    ".step-card.reveal:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Delivered &amp; Tracked</h3>",
                  "target": [
                    ".step-card.reveal:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"reveal\">Check live stock before you shop</h2>",
                  "target": [
                    ".checker__left > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section__title reveal\">Recently Viewed</h2>",
                  "target": [
                    ".sidebar-layout > div:nth-child(1) > .section__title"
                  ]
                },
                {
                  "html": "<h3>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><polyline points=\"12 6 12 12 16 14\"></polyline></svg>\n              Trending Right Now\n            </h3>",
                  "target": [
                    ".sidebar-layout > div:nth-child(1) > .sidebar-card.reveal > h3"
                  ]
                },
                {
                  "html": "<h3>",
                  "target": [
                    ".sidebar-layout > .sidebar-card.reveal > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section__title reveal\">What Our Shoppers Say</h2>",
                  "target": [
                    ".testimonials > .container > .section__title"
                  ]
                },
                {
                  "html": "<h2 class=\"section__title reveal\">Frequently Asked Questions</h2>",
                  "target": [
                    ".faq-section > .container > .section__title"
                  ]
                },
                {
                  "html": "<h3>Nova<span>Cart</span></h3>",
                  "target": [
                    ".footer-brand > h3"
                  ]
                },
                {
                  "html": "<h4>Shop</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Support</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Get in Touch</h4>",
                  "target": [
                    ".footer-contact > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1a1a2e",
                "bgColor": "#fefefe",
                "contrastRatio": 16.91,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 16.91"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"nav__logo\">\n        <img src=\"https://placehold.co/80x80/1a1a2e/fff?text=NC&amp;font=montserrat&amp;bold\" alt=\"NovaCart logo\" width=\"38\" height=\"38\">\n        Nova<span>Cart</span>\n      </a>",
          "target": [
            ".nav__logo"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "productQuery",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<input type=\"text\" id=\"productQuery\" class=\"checker__input\" placeholder=\"e.g. Merino sweater\" autocomplete=\"off\">",
          "target": [
            "#productQuery"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"productQuery\" style=\"font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:4px;display:block;\">Search a product</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"productQuery\" class=\"checker__input\" placeholder=\"e.g. Merino sweater\" autocomplete=\"off\">",
          "target": [
            "#productQuery"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/80x80/1a1a2e/fff?text=NC&amp;font=montserrat&amp;bold\" alt=\"NovaCart logo\" width=\"38\" height=\"38\">",
          "target": [
            "img[alt=\"NovaCart logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"productQuery\" style=\"font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:4px;display:block;\">Search a product</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"productQuery\" class=\"checker__input\" placeholder=\"e.g. Merino sweater\" autocomplete=\"off\">",
          "target": [
            "#productQuery"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"nav__logo\">\n        <img src=\"https://placehold.co/80x80/1a1a2e/fff?text=NC&amp;font=montserrat&amp;bold\" alt=\"NovaCart logo\" width=\"38\" height=\"38\">\n        Nova<span>Cart</span>\n      </a>",
          "target": [
            ".nav__logo"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"nav__list\">",
          "target": [
            ".nav__list"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#new-arrivals\" class=\"\">New Arrivals</a></li>",
          "target": [
            ".nav__list > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/80x80/1a1a2e/fff?text=NC&amp;font=montserrat&amp;bold\" alt=\"NovaCart logo\" width=\"38\" height=\"38\">",
          "target": [
            "img[alt=\"NovaCart logo\"]"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 108.9,
                "height": 38
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (108.9px by 38px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"nav__logo\">\n        <img src=\"https://placehold.co/80x80/1a1a2e/fff?text=NC&amp;font=montserrat&amp;bold\" alt=\"NovaCart logo\" width=\"38\" height=\"38\">\n        Nova<span>Cart</span>\n      </a>",
          "target": [
            ".nav__logo"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": "shortTextContent",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"nav__cart-badge\">3</span>",
                  "target": [
                    ".nav__cart-badge"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element content is too short to determine if it is actual text content"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"nav__cart-badge\">3</span>",
          "target": [
            ".nav__cart-badge"
          ],
          "failureSummary": "Fix any of the following:\n  Element content is too short to determine if it is actual text content"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#fefefe",
                "contrastRatio": 2.98,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.98 (foreground color: #e8734a, background color: #fefefe, font size: 15.0pt (20px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Cart</span>",
          "target": [
            ".nav__logo > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.98 (foreground color: #e8734a, background color: #fefefe, font size: 15.0pt (20px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b6b6b",
                "bgColor": "#e4e4e6",
                "contrastRatio": 4.19,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#sale\">Sale</a>",
          "target": [
            "li:nth-child(5) > a[href$=\"#sale\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b6b6b",
                "bgColor": "#e4e4e6",
                "contrastRatio": 4.19,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#brands\">Brands</a>",
          "target": [
            "li:nth-child(6) > a[href$=\"#brands\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b6b6b",
                "bgColor": "#e4e4e6",
                "contrastRatio": 4.19,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#cart\">Cart</a>",
          "target": [
            "li:nth-child(7) > a[href$=\"#cart\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#ffffff",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section gift-guides\" id=\"gift-guides\">",
                  "target": [
                    "#gift-guides"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Curated Collections</span>",
          "target": [
            ".section__label.visible"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"gift-card__tag\">Bestseller</span>",
                  "target": [
                    ".gift-card:nth-child(1) > .gift-card__img > .gift-card__tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"gift-card__tag\">Bestseller</span>",
          "target": [
            ".gift-card:nth-child(1) > .gift-card__img > .gift-card__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "8.9pt (11.84px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"gift-card reveal visible\">",
                  "target": [
                    ".gift-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"gift-card__category\">Gift Guide</div>",
          "target": [
            ".gift-card:nth-child(1) > .gift-card__body > .gift-card__category"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"gift-card__tag\">New</span>",
                  "target": [
                    ".gift-card:nth-child(2) > .gift-card__img > .gift-card__tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"gift-card__tag\">New</span>",
          "target": [
            ".gift-card:nth-child(2) > .gift-card__img > .gift-card__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "8.9pt (11.84px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"gift-card reveal visible\">",
                  "target": [
                    ".gift-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"gift-card__category\">Gift Guide</div>",
          "target": [
            ".gift-card:nth-child(2) > .gift-card__body > .gift-card__category"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"gift-card__tag\">Budget</span>",
                  "target": [
                    ".gift-card:nth-child(3) > .gift-card__img > .gift-card__tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"gift-card__tag\">Budget</span>",
          "target": [
            ".gift-card:nth-child(3) > .gift-card__img > .gift-card__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "8.9pt (11.84px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"gift-card reveal visible\">",
                  "target": [
                    ".gift-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"gift-card__category\">Gift Guide</div>",
          "target": [
            ".gift-card:nth-child(3) > .gift-card__body > .gift-card__category"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.9pt (11.84px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#ffffff",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section gift-guides\" id=\"gift-guides\">",
                  "target": [
                    "#gift-guides"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Curated Collections</span>",
          "target": [
            "#gift-guides > .container > .section__label.visible"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section editor-picks\" id=\"editor-picks\">",
                  "target": [
                    "#editor-picks"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Hand-Picked by Editors</span>",
          "target": [
            "#editor-picks > .container > .section__label.visible"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
                  "target": [
                    ".product-card:nth-child(1) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
          "target": [
            ".product-card:nth-child(1) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
                  "target": [
                    ".product-card:nth-child(2) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
          "target": [
            ".product-card:nth-child(2) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
                  "target": [
                    ".product-card:nth-child(3) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
          "target": [
            ".product-card:nth-child(3) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
                  "target": [
                    ".product-card:nth-child(4) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:6px 14px;font-size:.78rem;\">Buy Now</a>",
          "target": [
            ".product-card:nth-child(4) > .product-card__body > .product-card__footer > .btn--primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#e4d8d7",
                "contrastRatio": 2.16,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#seasonal\" class=\"active\">Seasonal</a>",
                  "target": [
                    ".active"
                  ]
                },
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<section class=\"section seasonal\" id=\"seasonal\">",
                  "target": [
                    "#seasonal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.16 (foreground color: #e8734a, background color: #e4d8d7, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#seasonal\" class=\"active\">Seasonal</a>",
          "target": [
            ".active"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.16 (foreground color: #e8734a, background color: #e4d8d7, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6b6b6b",
                "bgColor": "#e4e4e6",
                "contrastRatio": 4.19,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<section class=\"section seasonal\" id=\"seasonal\">",
                  "target": [
                    "#seasonal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#account\">Account</a>",
          "target": [
            "li:nth-child(8) > a[href$=\"#account\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #6b6b6b, background color: #e4e4e6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"seasonal-card__tag\">New Drop</span>",
                  "target": [
                    ".seasonal-card:nth-child(1) > .seasonal-card__overlay > .seasonal-card__tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"seasonal-card__tag\">New Drop</span>",
          "target": [
            ".seasonal-card:nth-child(1) > .seasonal-card__overlay > .seasonal-card__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"seasonal-card__tag\">Editor's Pick</span>",
                  "target": [
                    ".seasonal-card:nth-child(2) > .seasonal-card__overlay > .seasonal-card__tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"seasonal-card__tag\">Editor's Pick</span>",
          "target": [
            ".seasonal-card:nth-child(2) > .seasonal-card__overlay > .seasonal-card__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"seasonal-card__tag\">New</span>",
                  "target": [
                    ".seasonal-card:nth-child(3) > .seasonal-card__overlay > .seasonal-card__tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"seasonal-card__tag\">New</span>",
          "target": [
            ".seasonal-card:nth-child(3) > .seasonal-card__overlay > .seasonal-card__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:12px 32px;font-size:1rem;\">",
                  "target": [
                    ".visible.reveal:nth-child(5) > .btn--primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:12px 32px;font-size:1rem;\">",
          "target": [
            ".visible.reveal:nth-child(5) > .btn--primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#ffffff",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section how-it-works\">",
                  "target": [
                    ".how-it-works"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Simple &amp; Transparent</span>",
          "target": [
            ".how-it-works > .container > .section__label.visible"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button type=\"submit\" class=\"btn btn--primary\" style=\"white-space:nowrap;\">Check</button>",
                  "target": [
                    "button[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button type=\"submit\" class=\"btn btn--primary\" style=\"white-space:nowrap;\">Check</button>",
          "target": [
            "button[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#ffffff",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section gift-guides\" id=\"gift-guides\">",
                  "target": [
                    "#gift-guides"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Curated Collections</span>",
          "target": [
            "#gift-guides > .container > .section__label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section editor-picks\" id=\"editor-picks\">",
                  "target": [
                    "#editor-picks"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Hand-Picked by Editors</span>",
          "target": [
            "#editor-picks > .container > .section__label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#ffffff",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section how-it-works\">",
                  "target": [
                    ".how-it-works"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Simple &amp; Transparent</span>",
          "target": [
            ".how-it-works > .container > .section__label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#ffffff",
                "contrastRatio": 3,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section-sm sidebar-section\" id=\"account\">",
                  "target": [
                    "#account"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Your Activity</span>",
          "target": [
            ".sidebar-layout > div:nth-child(1) > .section__label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #e8734a, background color: #ffffff, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card reveal visible\">",
                  "target": [
                    ".sidebar-layout > .sidebar-card.visible.reveal"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"recent-item__bounce\">\u2605 Hot</span>",
          "target": [
            ".recent-item__bounce"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section testimonials\">",
                  "target": [
                    ".testimonials"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Real Customer Reviews</span>",
          "target": [
            ".testimonials > .container > .section__label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e8734a",
                "contrastRatio": 3,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:12px 32px;font-size:1rem;\">",
                  "target": [
                    ".reveal.visible:nth-child(5) > .btn--primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn--primary\" style=\"padding:12px 32px;font-size:1rem;\">",
          "target": [
            ".reveal.visible:nth-child(5) > .btn--primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #e8734a, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e8734a",
                "bgColor": "#f5f1eb",
                "contrastRatio": 2.67,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section faq-section\">",
                  "target": [
                    ".faq-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section__label reveal visible\">Got Questions?</span>",
          "target": [
            ".faq-section > .container > .section__label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.67 (foreground color: #e8734a, background color: #f5f1eb, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "target-size",
      "impact": "serious",
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "messageKey": "partiallyObscured",
                "minSize": 24,
                "width": 760,
                "height": 22.9
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"nav__logo\">\n        <img src=\"https://placehold.co/80x80/1a1a2e/fff?text=NC&amp;font=montserrat&amp;bold\" alt=\"NovaCart logo\" width=\"38\" height=\"38\">\n        Nova<span>Cart</span>\n      </a>",
                  "target": [
                    ".nav__logo"
                  ]
                },
                {
                  "html": "<a href=\"#new-arrivals\" class=\"\">New Arrivals</a>",
                  "target": [
                    "li:nth-child(1) > a[href$=\"#new-arrivals\"]"
                  ]
                },
                {
                  "html": "<a href=\"#gift-guides\" class=\"\">Gift Guides</a>",
                  "target": [
                    "li:nth-child(2) > a[href$=\"#gift-guides\"]"
                  ]
                },
                {
                  "html": "<a href=\"#editor-picks\" class=\"\">Editor Picks</a>",
                  "target": [
                    "li:nth-child(3) > a[href$=\"#editor-picks\"]"
                  ]
                },
                {
                  "html": "<a href=\"#seasonal\" class=\"\">Seasonal</a>",
                  "target": [
                    "li:nth-child(4) > a[href$=\"#seasonal\"]"
                  ]
                },
                {
                  "html": "<a href=\"#sale\">Sale</a>",
                  "target": [
                    "li:nth-child(5) > a[href$=\"#sale\"]"
                  ]
                },
                {
                  "html": "<a href=\"#brands\">Brands</a>",
                  "target": [
                    "li:nth-child(6) > a[href$=\"#brands\"]"
                  ]
                },
                {
                  "html": "<a href=\"#cart\">Cart</a>",
                  "target": [
                    "li:nth-child(7) > a[href$=\"#cart\"]"
                  ]
                },
                {
                  "html": "<a href=\"#account\" class=\"active\">Account</a>",
                  "target": [
                    ".active"
                  ]
                },
                {
                  "html": "<button class=\"nav__icon\" aria-label=\"Search\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>\n          </svg>\n        </button>",
                  "target": [
                    "button[aria-label=\"Search\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 760px by 22.9px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 15.8,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"faq-question\">",
                  "target": [
                    ".faq-item:nth-child(4) > .faq-question"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 15.8px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"faq-question\">",
          "target": [
            ".faq-item:nth-child(3) > .faq-question"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 760px by 22.9px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 15.8px instead of at least 24px."
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 7872
      },
      {
        "y": 576,
        "height": 7872
      },
      {
        "y": 1152,
        "height": 7872
      },
      {
        "y": 1728,
        "height": 7872
      },
      {
        "y": 2304,
        "height": 7872
      },
      {
        "y": 2880,
        "height": 7872
      },
      {
        "y": 3456,
        "height": 7872
      },
      {
        "y": 4032,
        "height": 7872
      },
      {
        "y": 4608,
        "height": 7872
      },
      {
        "y": 5184,
        "height": 7872
      },
      {
        "y": 5760,
        "height": 7872
      },
      {
        "y": 6336,
        "height": 7872
      },
      {
        "y": 6912,
        "height": 7872
      },
      {
        "y": 7152,
        "height": 7872
      }
    ],
    "scans": 15,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Shopping" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Shopping"
- Description: Online shopping, e-commerce, deals, retail products, and gift guides.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Shopping" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "New Arrivals", "Cart", "Account".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Shopping" category. Consider themes similar to: "Gift Guides", "Editor Picks", "Seasonal Collections".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "free shipping", "price match", "checkout".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Quick View", "Apply Code", "Buy Now".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Shopping" sector. Ideas similar but not limited to: "inventory checker".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "recently viewed", "recommendations", "popular categories".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.