Anthropic Claude Opus 5.5 – Shopping

via Azure · Generated

  • AIMAC Debt 10.14
  • Cost $0.54
  • Total Violations 28
  • HTML Size 59 KB
  • Em Dashes 15

Screenshot

View Anthropic Claude Opus 5.5 Shopping page View Live Page

Accessibility Issues Found

1 Critical 27 Serious

  • aria-required-children critical 1 instance

    Certain ARIA roles must contain particular children

    Example HTML <div class="filter-chips" role="tablist">
  • color-contrast serious 27 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#editor-picks" class="deal">Flash Deals</a>

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>Parcelle — Thoughtfully Found. Delivered Fast.</title>
<meta name="description" content="Parcelle is a curated online shop for trending products, editor picks, gift guides and daily deals, with free shipping on orders over $50.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#1d1a17;
  --ink-soft:#4a443e;
  --muted:#7b736b;
  --cream:#faf6f0;
  --paper:#ffffff;
  --sand:#efe6d9;
  --line:#e4d9ca;
  --accent:#c4552d;
  --accent-dark:#a3431f;
  --sage:#5f7a63;
  --gold:#d9a441;
  --radius:16px;
  --shadow:0 10px 30px rgba(29,26,23,.08);
  --shadow-lg:0 20px 50px rgba(29,26,23,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.15;font-weight:700}
.container{width:min(1200px,92%);margin-inline:auto}
.eyebrow{display:inline-block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.6rem}
.section{padding:88px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:620px}
.section-head p{color:var(--ink-soft);max-width:520px;margin-top:.8rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.95rem;border:2px solid transparent;transition:.2s ease}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff}
.link-arrow{font-weight:600;color:var(--accent);border-bottom:2px solid currentColor;padding-bottom:2px}

/* Announcement */
.announce{background:var(--ink);color:#f3ebe0;font-size:.85rem;text-align:center;padding:.55rem 1rem}
.announce strong{color:var(--gold)}

/* Header */
header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{width:48px;height:48px;border-radius:12px}
.brand-name{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.brand-tag{font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.search{flex:1;max-width:440px;position:relative}
.search input{width:100%;padding:.75rem 1rem .75rem 2.6rem;border-radius:999px;border:1px solid var(--line);background:var(--cream);font:inherit;font-size:.9rem}
.search svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:18px;color:var(--muted)}
.header-actions{display:flex;gap:.6rem;align-items:center}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:600;font-size:.88rem}
.icon-btn:hover{border-color:var(--ink)}
.badge{background:var(--accent);color:#fff;border-radius:999px;font-size:.7rem;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px;transition:transform .2s}
.badge.bump{transform:scale(1.35)}
nav.primary{border-top:1px solid var(--line)}
nav.primary ul{display:flex;gap:2rem;list-style:none;padding:.8rem 0;overflow-x:auto}
nav.primary a{font-weight:500;font-size:.93rem;color:var(--ink-soft);white-space:nowrap;padding:.2rem 0;border-bottom:2px solid transparent}
nav.primary a:hover,nav.primary a.active{color:var(--ink);border-color:var(--accent)}
nav.primary a.deal{color:var(--accent);font-weight:700}
.menu-toggle{display:none}

/* Hero */
.hero{padding:56px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.3rem);letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p.lead{font-size:1.12rem;color:var(--ink-soft);margin:1.3rem 0 1rem;max-width:540px}
.hero p.sub{color:var(--muted);max-width:520px;margin-bottom:1.8rem}
.promo{display:inline-flex;align-items:center;gap:.8rem;background:var(--paper);border:1px dashed var(--accent);padding:.6rem .8rem .6rem 1rem;border-radius:12px;margin-bottom:1.8rem;font-size:.9rem}
.promo code{font-family:ui-monospace,monospace;font-weight:700;background:var(--sand);padding:.25rem .55rem;border-radius:6px;letter-spacing:.06em}
.promo button{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:.4rem .75rem;font-size:.8rem;font-weight:600}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2.5rem;margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.hero-stats strong{display:block;font-family:'Fraunces',serif;font-size:1.7rem}
.hero-stats span{font-size:.85rem;color:var(--muted)}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1rem;position:relative}
.hero-visual img{border-radius:var(--radius);object-fit:cover;width:100%;height:100%}
.hero-visual .tall{grid-row:span 2}
.float-card{position:absolute;left:-28px;bottom:28px;background:var(--paper);border-radius:14px;padding:.9rem 1rem;box-shadow:var(--shadow-lg);display:flex;gap:.8rem;align-items:center;max-width:250px}
.float-card img{width:44px;height:44px;border-radius:50%}
.float-card small{display:block;color:var(--muted);font-size:.75rem}
.float-card b{font-size:.88rem}

/* Perks */
.perks{background:var(--paper);border-block:1px solid var(--line)}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:2rem 0}
.perk{display:flex;gap:.9rem;align-items:flex-start}
.perk-icon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--sand);display:grid;place-items:center;font-size:1.3rem}
.perk h4{font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700}
.perk p{font-size:.85rem;color:var(--muted)}

/* Products */
.filter-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--paper);padding:.5rem 1rem;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.chip.active,.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.card{background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:.25s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-media img{transform:scale(1.05)}
.tag{position:absolute;top:12px;left:12px;background:var(--paper);font-size:.72rem;font-weight:700;padding:.3rem .6rem;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.tag.sale{background:var(--accent);color:#fff}
.tag.new{background:var(--sage);color:#fff}
.quick{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(29,26,23,.9);color:#fff;border:0;border-radius:10px;padding:.7rem;font-weight:600;font-size:.85rem;opacity:0;transform:translateY(10px);transition:.25s}
.card:hover .quick,.quick:focus{opacity:1;transform:none}
.card-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card-body .brandline{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.card-body h3{font-family:'Inter',sans-serif;font-size:1rem;font-weight:600}
.rating{font-size:.8rem;color:var(--gold)}
.rating span{color:var(--muted)}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.6rem}
.price{font-weight:700;font-size:1.08rem}
.price s{color:var(--muted);font-weight:400;font-size:.88rem;margin-left:.35rem}
.add{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:1.2rem;line-height:1}
.add:hover{background:var(--accent)}
.sku{font-size:.72rem;color:var(--muted);font-family:ui-monospace,monospace}

/* Gift finder */
.finder{background:var(--ink);color:#f5ede2;border-radius:28px;padding:56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;position:relative;overflow:hidden}
.finder::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(196,85,45,.35),transparent 70%);right:-120px;top:-140px;pointer-events:none}
.finder h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:1rem}
.finder p{color:#cfc4b6;margin-bottom:1rem}
.finder .eyebrow{color:var(--gold)}
.finder-form{display:grid;gap:1.1rem;margin-top:1.4rem;position:relative;z-index:1}
.finder-form label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:#b9ad9e;display:block;margin-bottom:.45rem}
.opt-group{display:flex;flex-wrap:wrap;gap:.45rem}
.opt{background:transparent;border:1px solid #4d4640;color:#f5ede2;padding:.5rem .95rem;border-radius:999px;font-size:.86rem;font-weight:500}
.opt:hover{border-color:#a99b8b}
.opt.selected{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700}
.finder-results{position:relative;z-index:1;background:rgba(255,255,255,.04);border:1px solid #3a342f;border-radius:20px;padding:1.5rem;min-height:100%}
.finder-results h3{font-size:1.25rem;margin-bottom:.3rem}
.finder-results .hint{font-size:.88rem;color:#a99b8b;margin-bottom:1.2rem}
.result-list{display:grid;gap:.8rem}
.result{display:flex;gap:1rem;align-items:center;background:var(--paper);color:var(--ink);border-radius:14px;padding:.7rem;animation:fade .35s ease}
.result img{width:72px;height:72px;border-radius:10px;object-fit:cover}
.result div{flex:1}
.result b{display:block;font-size:.95rem}
.result small{color:var(--muted);font-size:.8rem}
.result .add{width:34px;height:34px;font-size:1rem}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.empty{color:#a99b8b;font-size:.92rem;padding:1rem;border:1px dashed #4d4640;border-radius:12px}

/* Gift guides */
.guides-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:260px;gap:1.2rem}
.guide{position:relative;border-radius:var(--radius);overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:1.5rem}
.guide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.guide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(20,16,12,.82));z-index:1}
.guide:hover img{transform:scale(1.06)}
.guide-content{position:relative;z-index:2}
.guide.big{grid-row:span 2}
.guide h3{font-size:1.45rem;margin-bottom:.35rem}
.guide.big h3{font-size:2rem}
.guide p{font-size:.88rem;opacity:.88;max-width:380px;margin-bottom:.7rem}
.guide .count{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--gold)}
.guide .link-arrow{color:#fff}

/* Editor picks + sidebar */
.editor-layout{display:grid;grid-template-columns:1fr 340px;gap:2.5rem;align-items:start}
.pick-feature{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;margin-bottom:1.5rem}
.pick-feature img{width:100%;height:100%;object-fit:cover;min-height:340px}
.pick-feature .txt{padding:2rem}
.pick-feature h3{font-size:1.7rem;margin-bottom:.8rem}
.pick-feature p{color:var(--ink-soft);margin-bottom:.9rem;font-size:.95rem}
.byline{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.byline img{width:40px;height:40px;border-radius:50%;min-height:0}
.byline small{display:block;color:var(--muted);font-size:.78rem}
.byline b{font-size:.9rem}
.picks-list{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.pick-mini{display:flex;gap:1rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem}
.pick-mini img{width:110px;height:110px;border-radius:10px;object-fit:cover;flex:none}
.pick-mini h4{font-family:'Inter',sans-serif;font-size:.98rem;margin-bottom:.3rem}
.pick-mini p{font-size:.84rem;color:var(--ink-soft);margin-bottom:.5rem}
.pick-mini .price{font-size:.95rem}

aside.sidebar{display:grid;gap:1.4rem;position:sticky;top:140px}
.widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.widget h4{font-size:1.15rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}
.flash{background:linear-gradient(135deg,var(--accent),#8e3517);color:#fff;border:0}
.flash p{font-size:.88rem;opacity:.9;margin-bottom:1rem}
.countdown{display:flex;gap:.5rem;margin-bottom:1rem}
.countdown div{flex:1;background:rgba(255,255,255,.14);border-radius:10px;text-align:center;padding:.55rem 0}
.countdown b{display:block;font-family:'Fraunces',serif;font-size:1.5rem}
.countdown small{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;opacity:.8}
.flash .btn{background:#fff;color:var(--accent);width:100%;justify-content:center}
.mini-list{list-style:none;display:grid;gap:.9rem}
.mini-list li{display:flex;gap:.8rem;align-items:center}
.mini-list img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.mini-list b{display:block;font-size:.88rem;font-weight:600}
.mini-list small{color:var(--muted);font-size:.8rem}
.cat-list{list-style:none;display:grid;gap:.2rem}
.cat-list a{display:flex;justify-content:space-between;padding:.55rem .2rem;border-bottom:1px solid var(--sand);font-size:.92rem}
.cat-list a:hover{color:var(--accent)}
.cat-list span{color:var(--muted);font-size:.82rem}

/* Reviews */
.reviews{background:var(--sand)}
.review-summary{display:flex;align-items:center;gap:1.2rem;background:var(--paper);padding:1rem 1.4rem;border-radius:14px}
.review-summary strong{font-family:'Fraunces',serif;font-size:2.4rem}
.review-summary .stars{color:var(--gold);font-size:1.1rem}
.review-summary small{color:var(--muted);display:block}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.review{background:var(--paper);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow)}
.review .stars{color:var(--gold);letter-spacing:.1em}
.review blockquote{color:var(--ink-soft);font-size:.96rem}
.review blockquote strong{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:.4rem}
.reviewer{display:flex;gap:.8rem;align-items:center;margin-top:auto;padding-top:1rem;border-top:1px solid var(--sand)}
.reviewer img{width:44px;height:44px;border-radius:50%}
.reviewer b{display:block;font-size:.92rem}
.reviewer small{color:var(--muted);font-size:.78rem}
.verified{color:var(--sage);font-weight:600}

/* Orders */
.orders-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.orders-copy p{color:var(--ink-soft);margin-bottom:1rem}
.orders-copy ul{list-style:none;display:grid;gap:.7rem;margin-top:1.4rem}
.orders-copy li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.orders-copy li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.track-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:2rem;box-shadow:var(--shadow)}
.track-card h3{font-size:1.5rem;margin-bottom:.4rem}
.track-card > p{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem}
.field input{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--cream)}
.field input:focus{outline:2px solid var(--accent);border-color:transparent}
.track-result{margin-top:1.5rem;display:none}
.track-result.show{display:block;animation:fade .35s}
.timeline{list-style:none;position:relative;margin-top:1rem;padding-left:1.6rem}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding-bottom:1rem;font-size:.9rem}
.timeline li::before{content:"";position:absolute;left:-1.6rem;top:5px;width:16px;height:16px;border-radius:50%;background:var(--line);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.timeline li.done::before{background:var(--sage)}
.timeline li.current::before{background:var(--accent)}
.timeline small{display:block;color:var(--muted);font-size:.78rem}
.form-msg{font-size:.85rem;color:var(--accent);margin-top:.6rem;min-height:1.2em}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem}
.faq-wrap .intro p{color:var(--ink-soft);margin:1rem 0 1.4rem}
details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:.8rem;overflow:hidden}
summary{list-style:none;padding:1.15rem 1.3rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .25s;flex:none}
details[open] summary::after{transform:rotate(45deg)}
details .answer{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:.94rem}
details .answer p+p{margin-top:.6rem}

/* Newsletter */
.newsletter{background:var(--accent);color:#fff;border-radius:28px;padding:56px;display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
.newsletter h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:.8rem}
.newsletter p{opacity:.92}
.newsletter form{display:flex;gap:.6rem;background:#fff;padding:.4rem;border-radius:999px}
.newsletter input{flex:1;border:0;padding:.7rem 1rem;font:inherit;border-radius:999px;outline:none;min-width:0}
.newsletter small{display:block;margin-top:.8rem;opacity:.85;font-size:.8rem}

/* Footer */
footer{background:var(--ink);color:#cfc4b6;padding:72px 0 28px;margin-top:88px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:2rem}
footer h5{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem;font-family:'Inter',sans-serif}
footer ul{list-style:none;display:grid;gap:.55rem;font-size:.92rem}
footer a:hover{color:#fff}
footer .brand-name{color:#fff}
footer .about{font-size:.92rem;margin:1rem 0 1.3rem;max-width:300px}
.socials{display:flex;gap:.5rem}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid #4d4640;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.socials a:hover{background:var(--accent);border-color:var(--accent)}
.contact li{display:flex;gap:.5rem}
.footer-bottom{border-top:1px solid #3a342f;margin-top:3rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.84rem}
.footer-bottom nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.payments{display:flex;gap:.4rem}
.payments span{background:#2c2723;border-radius:6px;padding:.25rem .55rem;font-size:.72rem;font-weight:700;color:#e6dccf}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(20,16,12,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal-back.open{display:flex}
.modal{background:var(--paper);border-radius:22px;max-width:860px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative;animation:fade .3s;max-height:92vh;overflow-y:auto}
.modal img{width:100%;height:100%;object-fit:cover;min-height:380px}
.modal .m-body{padding:2rem;display:flex;flex-direction:column;gap:.8rem}
.modal h3{font-size:1.7rem}
.modal p{color:var(--ink-soft);font-size:.94rem}
.modal-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:var(--paper);box-shadow:var(--shadow);font-size:1.2rem;z-index:2}
.qty{display:flex;align-items:center;gap:.4rem}
.qty button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--cream);font-size:1.1rem}
.qty span{min-width:28px;text-align:center;font-weight:700}
.m-meta{font-size:.82rem;color:var(--muted);display:grid;gap:.2rem}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:12px;box-shadow:var(--shadow-lg);z-index:200;transition:transform .3s;font-size:.92rem}
.toast.show{transform:translate(-50%,0)}

/* Responsive */
@media (max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .editor-layout{grid-template-columns:1fr}
  aside.sidebar{position:static;grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .perks-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hero-grid,.finder,.orders-grid,.faq-wrap,.newsletter,.pick-feature,.modal{grid-template-columns:1fr}
  .search{display:none}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .guides-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .guide.big{grid-column:span 2;grid-row:span 1}
  .review-grid{grid-template-columns:1fr}
  .picks-list{grid-template-columns:1fr}
  aside.sidebar{grid-template-columns:1fr}
  .finder,.newsletter{padding:32px 24px}
  .float-card{left:12px}
  .menu-toggle{display:inline-flex}
  nav.primary{display:none}
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column;gap:.6rem}
  .icon-btn .lbl{display:none}
  .modal img{min-height:240px;max-height:300px}
}
@media (max-width:520px){
  .product-grid{grid-template-columns:1fr}
  .guides-grid{grid-template-columns:1fr}
  .guide.big{grid-column:span 1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-stats{gap:1.4rem}
  .brand-tag{display:none}
  .perks-grid{grid-template-columns:1fr}
}
</style>
</head>
<body>

<div class="announce">🚚 <strong>Free shipping</strong> on orders over $50 · Use promo code <strong>HELLO15</strong> for 15% off your first order</div>

<header class="site">
  <div class="container header-top">
    <a href="#" class="brand" aria-label="Parcelle home">
      <img src="https://placehold.co/96x96/c4552d/ffffff?text=P&font=playfair+display" alt="Parcelle logo">
      <div>
        <div class="brand-name">Parcelle</div>
        <div class="brand-tag">Thoughtfully found. Delivered fast.</div>
      </div>
    </a>
    <label class="search">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input type="search" placeholder="Search products, brands or SKU…" aria-label="Search">
    </label>
    <div class="header-actions">
      <a href="#orders" class="icon-btn">📦 <span class="lbl">Orders</span></a>
      <a href="#cart" class="icon-btn" id="cartBtn">🛍️ <span class="lbl">Cart</span> <span class="badge" id="cartCount">0</span></a>
      <button class="icon-btn menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
    </div>
  </div>
  <nav class="primary" id="primaryNav" aria-label="Primary">
    <div class="container">
      <ul>
        <li><a href="#trending" class="active">Trending Now</a></li>
        <li><a href="#gift-finder">Gift Finder</a></li>
        <li><a href="#gift-guides">Gift Guides</a></li>
        <li><a href="#editor-picks">Editor Picks</a></li>
        <li><a href="#editor-picks" class="deal">Flash Deals</a></li>
        <li><a href="#reviews">Reviews</a></li>
        <li><a href="#orders">Orders</a></li>
        <li><a href="#cart">Cart</a></li>
        <li><a href="#faq">Help</a></li>
      </ul>
    </div>
  </nav>
</header>

<main>
  <!-- HERO -->
  <section class="hero">
    <div class="container hero-grid">
      <div>
        <span class="eyebrow">The Spring Edit · New drops weekly</span>
        <h1>Good things, <em>carefully chosen</em> and at your door by Thursday.</h1>
        <p class="lead">Parcelle is an independent online shop that does the digging for you. Our buyers test thousands of products every season and keep only the ones worth your money — from small-batch homeware to the tech everyone's quietly obsessed with.</p>
        <p class="sub">Every item ships from our own warehouse with tracked delivery, 60-day returns and price-match protection, so you can shop the deal without second-guessing it.</p>
        <div class="promo">
          New here? <code id="promoCode">HELLO15</code>
          <button id="copyPromo" type="button">Copy code</button>
        </div>
        <div class="hero-ctas">
          <a href="#trending" class="btn btn-primary">Shop Trending →</a>
          <a href="#gift-finder" class="btn btn-outline">Find a Gift</a>
        </div>
        <div class="hero-stats">
          <div><strong>4,800+</strong><span>Curated SKUs</span></div>
          <div><strong>4.8★</strong><span>From 32k reviews</span></div>
          <div><strong>2-day</strong><span>Avg. delivery</span></div>
        </div>
      </div>
      <div class="hero-visual">
        <img class="tall" src="https://picsum.photos/id/1062/520/700" alt="Curated lifestyle products arranged on a table">
        <img src="https://picsum.photos/id/225/400/330" alt="Tea set and ceramics">
        <img src="https://picsum.photos/id/26/400/330" alt="Travel accessories flat lay">
        <div class="float-card">
          <img src="https://i.pravatar.cc/88?u=hannah-parcelle" alt="">
          <div><small>Just ordered in Portland</small><b>Linen Throw · Oat</b></div>
        </div>
      </div>
    </div>
  </section>

  <!-- PERKS -->
  <section class="perks" aria-label="Shopping benefits">
    <div class="container perks-grid">
      <div class="perk"><div class="perk-icon">🚚</div><div><h4>Free shipping over $50</h4><p>Tracked, carbon-offset delivery to all 50 states.</p></div></div>
      <div class="perk"><div class="perk-icon">↩️</div><div><h4>60-day free returns</h4><p>Print a label at home or drop off at any partner locker.</p></div></div>
      <div class="perk"><div class="perk-icon">🏷️</div><div><h4>Price-match promise</h4><p>Found it cheaper within 14 days? We refund the difference.</p></div></div>
      <div class="perk"><div class="perk-icon">🎁</div><div><h4>Free gift wrapping</h4><p>Recycled paper, ribbon and a handwritten note on request.</p></div></div>
    </div>
  </section>

  <!-- TRENDING -->
  <section class="section" id="trending">
    <div class="container">
      <div class="section-head">
        <div>
          <span class="eyebrow">Trending Now</span>
          <h2>What everyone's adding to cart this week</h2>
          <p>Ranked by real-time sales, wishlist saves and repeat purchases across the Parcelle community. Prices update daily, and anything tagged "Deal" is at its lowest price in 90 days.</p>
        </div>
        <div class="filter-chips" role="tablist">
          <button class="chip active" data-filter="all">All</button>
          <button class="chip" data-filter="home">Home</button>
          <button class="chip" data-filter="tech">Tech</button>
          <button class="chip" data-filter="beauty">Beauty</button>
          <button class="chip" data-filter="style">Style</button>
        </div>
      </div>
      <div class="product-grid" id="productGrid"></div>
    </div>
  </section>

  <!-- GIFT FINDER -->
  <section class="section" id="gift-finder" style="padding-top:0">
    <div class="container">
      <div class="finder">
        <div>
          <span class="eyebrow">Interactive Gift Finder</span>
          <h2>Three taps to the perfect present.</h2>
          <p>Tell us who you're shopping for, what they're into and how much you'd like to spend. We'll pull the best-reviewed matches from our catalog instantly — no endless scrolling required.</p>
          <p>Every suggestion is in stock, eligible for free gift wrap, and can be shipped directly to the recipient with the price hidden on the packing slip.</p>
          <div class="finder-form">
            <div>
              <label>Who's it for?</label>
              <div class="opt-group" data-group="who">
                <button class="opt selected" data-val="anyone">Anyone</button>
                <button class="opt" data-val="partner">Partner</button>
                <button class="opt" data-val="parent">Parent</button>
                <button class="opt" data-val="friend">Friend</button>
                <button class="opt" data-val="host">Host</button>
              </div>
            </div>
            <div>
              <label>They love…</label>
              <div class="opt-group" data-group="interest">
                <button class="opt selected" data-val="any">Surprise me</button>
                <button class="opt" data-val="cooking">Cooking</button>
                <button class="opt" data-val="wellness">Wellness</button>
                <button class="opt" data-val="gadgets">Gadgets</button>
                <button class="opt" data-val="cozy">Cozy nights</button>
                <button class="opt" data-val="travel">Travel</button>
              </div>
            </div>
            <div>
              <label>Budget</label>
              <div class="opt-group" data-group="budget">
                <button class="opt" data-val="35">Under $35</button>
                <button class="opt" data-val="75">Under $75</button>
                <button class="opt selected" data-val="9999">Any budget</button>
              </div>
            </div>
          </div>
        </div>
        <div class="finder-results">
          <h3 id="finderTitle">Top picks for anyone</h3>
          <p class="hint" id="finderHint">Showing our highest-rated gifts across every category.</p>
          <div class="result-list" id="finderResults"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- GIFT GUIDES -->
  <section class="section" id="gift-guides" style="padding-top:0">
    <div class="container">
      <div class="section-head">
        <div>
          <span class="eyebrow">Gift Guides</span>
          <h2>Edited guides for every person on your list</h2>
          <p>Our editors build each guide from scratch, mixing bestsellers with under-the-radar finds from independent makers. Every guide is refreshed monthly so sold-out items never clutter your shortlist.</p>
        </div>
        <a href="#gift-guides" class="link-arrow">Browse all 24 guides →</a>
      </div>
      <div class="guides-grid">
        <a href="#gift-guides" class="guide big">
          <img src="https://picsum.photos/id/431/800/700" alt="Coffee and breakfast setting">
          <div class="guide-content">
            <span class="count">42 gifts · Updated this week</span>
            <h3>For the Home Cook Who Has Everything</h3>
            <p>Hand-thrown serving bowls, single-origin olive oils and the carbon-steel pan our test kitchen won't stop using. Thoughtful upgrades they'd never buy themselves.</p>
            <span class="link-arrow">Shop the guide</span>
          </div>
        </a>
        <a href="#gift-guides" class="guide">
          <img src="https://picsum.photos/id/1080/500/400" alt="Fresh fruit and wellness products">
          <div class="guide-content"><span class="count">28 gifts</span><h3>Self-Care Under $50</h3><p>Rituals that feel indulgent, priced like a treat.</p></div>
        </a>
        <a href="#gift-guides" class="guide">
          <img src="https://picsum.photos/id/119/500/400" alt="Laptop and desk gadgets">
          <div class="guide-content"><span class="count">36 gifts</span><h3>Desk Setup Upgrades</h3><p>Tech that makes Monday a little kinder.</p></div>
        </a>
        <a href="#gift-guides" class="guide">
          <img src="https://picsum.photos/id/1036/500/400" alt="Mountain landscape for travel">
          <div class="guide-content"><span class="count">31 gifts</span><h3>The Weekend Wanderer</h3><p>Packable, durable and TSA-friendly.</p></div>
        </a>
        <a href="#gift-guides" class="guide">
          <img src="https://picsum.photos/id/292/500/400" alt="Dinner party ingredients">
          <div class="guide-content"><span class="count">19 gifts</span><h3>Host & Hostess Gifts</h3><p>Arrive with something better than wine.</p></div>
        </a>
      </div>
    </div>
  </section>

  <!-- EDITOR PICKS + SIDEBAR -->
  <section class="section" id="editor-picks" style="padding-top:0">
    <div class="container">
      <div class="section-head">
        <div>
          <span class="eyebrow">Editor Picks</span>
          <h2>Tested, lived with, and genuinely recommended</h2>
          <p>Nothing earns a spot here unless one of our editors has used it for at least 30 days. No sponsored placements, no affiliate fluff — just honest notes on what's worth it.</p>
        </div>
      </div>
      <div class="editor-layout">
        <div>
          <article class="pick-feature">
            <img src="https://picsum.photos/id/30/600/700" alt="Ceramic mug on a wooden table">
            <div class="txt">
              <div class="byline">
                <img src="https://i.pravatar.cc/80?u=maya-editor" alt="Maya Okafor">
                <div><b>Maya Okafor</b><small>Home Editor · 6 min read</small></div>
              </div>
              <span class="eyebrow">Pick of the Month</span>
              <h3>The Hearth Stoneware Set changed how I do mornings</h3>
              <p>I've tested over forty dinnerware sets for Parcelle, and this is the one I bought for my own kitchen. The reactive glaze means no two pieces match exactly, yet the set feels cohesive on the table. It's dishwasher- and microwave-safe, and after three months of daily abuse there's not a single chip.</p>
              <p>At $128 for a 12-piece set (SKU HRT-12-OAT), it's roughly half the price of comparable studio pottery. Stock tends to sell through within a week of each restock, so I'd add it to your wishlist for back-in-stock alerts.</p>
              <div style="display:flex;gap:.6rem;flex-wrap:wrap;align-items:center">
                <button class="btn btn-dark" data-quick="p1">Quick View</button>
                <span class="price">$128 <s>$165</s></span>
              </div>
            </div>
          </article>
          <div class="picks-list">
            <div class="pick-mini">
              <img src="https://picsum.photos/id/96/220/220" alt="Wireless earbuds">
              <div>
                <h4>Lumen Air Earbuds</h4>
                <p>"Best-in-class noise cancelling under $100, with a case that actually fits a jeans pocket." — Theo, Tech Editor</p>
                <span class="price">$89</span>
              </div>
            </div>
            <div class="pick-mini">
              <img src="https://picsum.photos/id/64/220/220" alt="Natural skincare">
              <div>
                <h4>Bloom Botanical Face Oil</h4>
                <p>"Fragrance-free, absorbs in seconds, and one bottle lasted me four months." — Priya, Beauty Editor</p>
                <span class="price">$34</span>
              </div>
            </div>
            <div class="pick-mini">
              <img src="https://picsum.photos/id/21/220/220" alt="Leather shoes">
              <div>
                <h4>Fieldwalk Leather Sneaker</h4>
                <p>"Broke in after two wears. Resoleable, so these are a 10-year shoe." — Jonah, Style Editor</p>
                <span class="price">$145</span>
              </div>
            </div>
            <div class="pick-mini">
              <img src="https://picsum.photos/id/312/220/220" alt="Kitchen goods">
              <div>
                <h4>Saltbox Spice Library</h4>
                <p>"Twelve small-batch blends in refillable tins — the gift every host remembers." — Maya, Home Editor</p>
                <span class="price">$58</span>
              </div>
            </div>
          </div>
        </div>

        <aside class="sidebar" aria-label="Deals and categories">
          <div class="widget flash">
            <h4>⚡ Flash Sale</h4>
            <p>Up to 40% off kitchen and bar essentials. Discount applied automatically at checkout — no promo code needed.</p>
            <div class="countdown" id="countdown">
              <div><b id="cdH">00</b><small>Hrs</small></div>
              <div><b id="cdM">00</b><small>Min</small></div>
              <div><b id="cdS">00</b><small>Sec</small></div>
            </div>
            <a href="#trending" class="btn">Shop the Sale</a>
          </div>
          <div class="widget">
            <h4>New Arrivals <a href="#trending" class="link-arrow" style="font-size:.78rem;font-family:Inter">View all</a></h4>
            <ul class="mini-list">
              <li><img src="https://picsum.photos/id/1060/120/120" alt=""><div><b>Pour-Over Coffee Kit</b><small>$46 · Arrived Monday</small></div></li>
              <li><img src="https://picsum.photos/id/160/120/120" alt=""><div><b>Magnetic Phone Stand</b><small>$29 · Arrived Tuesday</small></div></li>
              <li><img src="https://picsum.photos/id/180/120/120" alt=""><div><b>Canvas Weekender Bag</b><small>$118 · Arrived Wednesday</small></div></li>
            </ul>
          </div>
          <div class="widget">
            <h4>Popular Categories</h4>
            <ul class="cat-list">
              <li><a href="#">Home & Kitchen <span>1,240</span></a></li>
              <li><a href="#">Tech & Audio <span>612</span></a></li>
              <li><a href="#">Beauty & Wellness <span>884</span></a></li>
              <li><a href="#">Fashion & Accessories <span>956</span></a></li>
              <li><a href="#">Outdoor & Travel <span>430</span></a></li>
              <li><a href="#">Kids & Baby <span>378</span></a></li>
            </ul>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <!-- REVIEWS -->
  <section class="section reviews" id="reviews">
    <div class="container">
      <div class="section-head">
        <div>
          <span class="eyebrow">Reviews</span>
          <h2>32,000 shoppers can't all be wrong</h2>
          <p>Every review on Parcelle comes from a verified purchase. We publish the critical ones too, and our buyers read every single one when deciding what to restock.</p>
        </div>
        <div class="review-summary">
          <strong>4.8</strong>
          <div><span class="stars">★★★★★</span><small>Based on 32,416 verified reviews</small></div>
        </div>
      </div>
      <div class="review-grid">
        <article class="review">
          <div class="stars">★★★★★</div>
          <blockquote><strong>"Arrived in two days, beautifully wrapped."</strong>I used the gift finder for my mother-in-law at 11pm on a Sunday and had the perfect candle set shipped straight to her by Tuesday. The handwritten note was a lovely touch and the price wasn't shown anywhere on the slip.</blockquote>
          <div class="reviewer"><img src="https://i.pravatar.cc/88?u=rachel-k" alt=""><div><b>Rachel K.</b><small><span class="verified">✓ Verified buyer</span> · Austin, TX</small></div></div>
        </article>
        <article class="review">
          <div class="stars">★★★★★</div>
          <blockquote><strong>"The price-match actually works."</strong>I spotted my headphones $12 cheaper elsewhere a week after ordering. One message to support with the link and the refund hit my card the same afternoon. No arguments, no hoops. That's why I keep coming back.</blockquote>
          <div class="reviewer"><img src="https://i.pravatar.cc/88?u=daniel-m" alt=""><div><b>Daniel M.</b><small><span class="verified">✓ Verified buyer</span> · Chicago, IL</small></div></div>
        </article>
        <article class="review">
          <div class="stars">★★★★☆</div>
          <blockquote><strong>"Curation that saves me hours."</strong>I trust the Editor Picks more than any review site now. Only knocking a star because the stoneware I wanted sold out twice — but the back-in-stock email came through and I finally got my set.</blockquote>
          <div class="reviewer"><img src="https://i.pravatar.cc/88?u=sofia-l" alt=""><div><b>Sofia L.</b><small><span class="verified">✓ Verified buyer</span> · Denver, CO</small></div></div>
        </article>
      </div>
    </div>
  </section>

  <!-- ORDERS -->
  <section class="section" id="orders">
    <div class="container orders-grid">
      <div class="orders-copy">
        <span class="eyebrow">Orders & Delivery</span>
        <h2 style="font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:1rem">Know exactly where your parcel is, every step of the way.</h2>
        <p>Most orders placed before 2pm ET leave our Columbus, Ohio warehouse the same day. You'll get a confirmation email with your order number straight away, followed by live tracking the moment your parcel is scanned by our carrier.</p>
        <p>Need to change an address, add an item or cancel? You can edit any order for up to one hour after checkout from your account. After that, our support team can usually intercept parcels before they leave the building.</p>
        <ul>
          <li>Standard delivery: 2–4 business days, free on orders over $50</li>
          <li>Express delivery: next business day for $9.95</li>
          <li>Ship to multiple addresses in a single checkout</li>
          <li>Hassle-free returns with prepaid labels for 60 days</li>
        </ul>
      </div>
      <div class="track-card">
        <h3>Track Order</h3>
        <p>Enter your order number and the email used at checkout. Try <b>PRC-20481</b> for a demo.</p>
        <form id="trackForm" novalidate>
          <div class="field"><label for="orderNum">Order number</label><input id="orderNum" placeholder="e.g. PRC-20481" required></div>
          <div class="field"><label for="orderEmail">Email address</label><input id="orderEmail" type="email" placeholder="you@example.com" required></div>
          <button class="btn btn-primary" type="submit" style="width:100%;justify-content:center">Track Order</button>
          <div class="form-msg" id="trackMsg" role="status"></div>
        </form>
        <div class="track-result" id="trackResult">
          <b id="trackHeading">Order PRC-20481 · Arriving Thursday</b>
          <ul class="timeline">
            <li class="done">Order confirmed<small>Mon, 9:14 AM · 3 items</small></li>
            <li class="done">Packed & dispatched<small>Mon, 4:02 PM · Columbus, OH</small></li>
            <li class="current">In transit<small>Wed, 7:45 AM · Regional hub</small></li>
            <li>Out for delivery<small>Expected Thursday by 8 PM</small></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="section" id="faq" style="padding-top:0">
    <div class="container faq-wrap">
      <div class="intro">
        <span class="eyebrow">Help Center</span>
        <h2 style="font-size:clamp(1.9rem,3.2vw,2.6rem)">Questions, answered.</h2>
        <p>Can't find what you're looking for? Our customer care team is available seven days a week by live chat, email or phone, with an average response time under four minutes.</p>
        <a href="mailto:care@parcelle.shop" class="btn btn-outline">Contact Support</a>
      </div>
      <div>
        <details open>
          <summary>How does free shipping work?</summary>
          <div class="answer"><p>Any order with a subtotal of $50 or more (after discounts) ships free via tracked standard delivery to anywhere in the contiguous US. Orders under $50 ship for a flat $5.95.</p><p>Alaska, Hawaii and APO/FPO addresses qualify for free shipping at $75 and above.</p></div>
        </details>
        <details>
          <summary>Can I combine a promo code with a sale price?</summary>
          <div class="answer"><p>Yes — one promo code can be applied per order, and it stacks with items already on sale, unless the product page says "Excluded from promotions". Flash Sale discounts are applied automatically and also stack with your code.</p></div>
        </details>
        <details>
          <summary>What's your return policy?</summary>
          <div class="answer"><p>You have 60 days from delivery to return unused items in their original packaging. Start a return from the Orders page, print the prepaid label, and we'll refund your original payment method within 3 business days of receiving it.</p></div>
        </details>
        <details>
          <summary>How does the price-match promise work?</summary>
          <div class="answer"><p>If you find the identical item (same SKU, size and color) for less at a major US retailer within 14 days of your purchase, send us the link and we'll refund the difference. Marketplace third-party sellers and membership-only prices are excluded.</p></div>
        </details>
        <details>
          <summary>Can I send a gift directly to someone else?</summary>
          <div class="answer"><p>Absolutely. Choose "This is a gift" at checkout to add free wrapping and a personal message. Prices are never printed on gift packing slips, and the recipient can exchange the item without you being notified.</p></div>
        </details>
      </div>
    </div>
  </section>

  <!-- NEWSLETTER -->
  <section class="container" id="cart">
    <div class="newsletter">
      <div>
        <h2>Get first dibs on drops & deals.</h2>
        <p>Join 210,000 subscribers who get our Thursday edit: new arrivals, restocks of sold-out favorites, and subscriber-only promo codes. One email a week, never spam, unsubscribe anytime.</p>
      </div>
      <div>
        <form id="newsForm">
          <input type="email" placeholder="Enter your email address" aria-label="Email" required>
          <button class="btn btn-dark" type="submit">Subscribe</button>
        </form>
        <small>Subscribe today and get an extra 10% off your next order. By signing up, you agree to our Privacy Policy.</small>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="container">
    <div class="footer-grid">
      <div>
        <a href="#" class="brand">
          <img src="https://placehold.co/96x96/c4552d/ffffff?text=P&font=playfair+display" alt="Parcelle logo">
          <div class="brand-name">Parcelle</div>
        </a>
        <p class="about">Thoughtfully found. Delivered fast. An independent shop curating the best in home, tech, beauty and style since 2019.</p>
        <div class="socials">
          <a href="#" aria-label="Instagram">IG</a>
          <a href="#" aria-label="TikTok">TT</a>
          <a href="#" aria-label="Pinterest">Pi</a>
          <a href="#" aria-label="Facebook">Fb</a>
          <a href="#" aria-label="YouTube">YT</a>
        </div>
      </div>
      <div>
        <h5>Shop</h5>
        <ul><li><a href="#trending">Trending Now</a></li><li><a href="#gift-guides">Gift Guides</a></li><li><a href="#editor-picks">Editor Picks</a></li><li><a href="#editor-picks">Flash Deals</a></li><li><a href="#">Gift Cards</a></li></ul>
      </div>
      <div>
        <h5>Help</h5>
        <ul><li><a href="#orders">Track Order</a></li><li><a href="#faq">Shipping</a></li><li><a href="#faq">Returns</a></li><li><a href="#faq">Price Match</a></li><li><a href="#reviews">Reviews</a></li></ul>
      </div>
      <div>
        <h5>Company</h5>
        <ul><li><a href="#">About Us</a></li><li><a href="#">Careers</a></li><li><a href="#">Sell With Us</a></li><li><a href="#">Affiliates</a></li><li><a href="#">Press</a></li></ul>
      </div>
      <div>
        <h5>Contact</h5>
        <ul class="contact">
          <li>📍 418 Market Lane, Suite 200<br>Columbus, OH 43215</li>
          <li>📞 <a href="tel:+18005550142">(800) 555-0142</a></li>
          <li>✉️ <a href="mailto:care@parcelle.shop">care@parcelle.shop</a></li>
          <li>🕘 Daily, 8am – 10pm ET</li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© <span id="year">2025</span> Parcelle Retail Co. All rights reserved.</span>
      <nav><a href="#">Privacy Policy</a><a href="#">Terms of Service</a><a href="#">Cookie Settings</a><a href="#">Accessibility</a></nav>
      <div class="payments"><span>VISA</span><span>MC</span><span>AMEX</span><span>PayPal</span><span>Pay</span></div>
    </div>
  </div>
</footer>

<!-- Quick view modal -->
<div class="modal-back" id="modal" role="dialog" aria-modal="true" aria-labelledby="mTitle">
  <div class="modal">
    <button class="modal-close" id="modalClose" aria-label="Close">✕</button>
    <img id="mImg" src="" alt="">
    <div class="m-body">
      <span class="eyebrow" id="mBrand"></span>
      <h3 id="mTitle"></h3>
      <div class="rating" id="mRating"></div>
      <div class="price" id="mPrice" style="font-size:1.4rem"></div>
      <p id="mDesc"></p>
      <div class="m-meta"><span id="mSku"></span><span>✓ In stock · Ships within 24 hours</span><span>✓ Free shipping on orders over $50</span></div>
      <div style="display:flex;gap:.8rem;align-items:center;margin-top:.6rem;flex-wrap:wrap">
        <div class="qty"><button type="button" id="qMinus" aria-label="Decrease">−</button><span id="qVal">1</span><button type="button" id="qPlus" aria-label="Increase">+</button></div>
        <button class="btn btn-primary" id="mAdd">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<div class="toast" id="toast" role="status" aria-live="polite"></div>

<script>
const products = [
  {id:'p1',name:'Hearth Stoneware Set (12pc)',brand:'Hearth Studio',cat:'home',price:128,was:165,rating:4.9,reviews:1284,img:1062,tag:'Deal',who:['parent','partner','host'],int:['cooking','cozy'],sku:'HRT-12-OAT',desc:'Reactive-glaze stoneware with four dinner plates, four side plates and four bowls. Dishwasher, microwave and oven safe up to 450°F.'},
  {id:'p2',name:'Lumen Air ANC Earbuds',brand:'Lumen',cat:'tech',price:89,was:null,rating:4.7,reviews:2210,img:96,tag:'Bestseller',who:['partner','friend'],int:['gadgets','travel'],sku:'LMN-AIR-BLK',desc:'Active noise cancelling, 30-hour battery with case, wireless charging and multipoint pairing across your laptop and phone.'},
  {id:'p3',name:'Bloom Botanical Face Oil',brand:'Bloom Apothecary',cat:'beauty',price:34,was:null,rating:4.8,reviews:946,img:64,tag:'New',who:['friend','parent','partner'],int:['wellness'],sku:'BLM-FO-30',desc:'A lightweight, fragrance-free blend of squalane, rosehip and jojoba. 30ml glass bottle with dropper — lasts around four months.'},
  {id:'p4',name:'Merino Lounge Throw',brand:'Fold & Field',cat:'home',price:72,was:96,rating:4.9,reviews:612,img:1059,tag:'Deal',who:['parent','partner','host'],int:['cozy'],sku:'FLD-THR-OAT',desc:'Ethically sourced merino in a waffle weave, 50 × 70 in. Machine washable on wool cycle and gets softer with every wash.'},
  {id:'p5',name:'Fieldwalk Leather Sneaker',brand:'Fieldwalk',cat:'style',price:145,was:null,rating:4.6,reviews:403,img:21,tag:'',who:['partner','friend'],int:['travel'],sku:'FWK-SNK-WHT',desc:'Full-grain leather upper, cork footbed and a Goodyear-welted sole that can be replaced. Runs true to size.'},
  {id:'p6',name:'Pour-Over Coffee Kit',brand:'Morrow Coffee Co.',cat:'home',price:46,was:null,rating:4.8,reviews:788,img:1060,tag:'New',who:['friend','parent','host'],int:['cooking','cozy'],sku:'MRW-POK-01',desc:'Borosilicate carafe, ceramic dripper, 100 filters and a 250g bag of single-origin beans. Everything for a better cup.'},
  {id:'p7',name:'Magnetic 3-in-1 Charging Stand',brand:'Volta',cat:'tech',price:59,was:79,rating:4.5,reviews:1530,img:160,tag:'Deal',who:['partner','parent','friend'],int:['gadgets'],sku:'VLT-3N1-GRY',desc:'Charge phone, earbuds and watch at once from a weighted aluminium base. Includes a 30W USB-C adapter.'},
  {id:'p8',name:'Canvas Weekender Bag',brand:'Tidewater',cat:'style',price:118,was:null,rating:4.8,reviews:357,img:180,tag:'',who:['partner','friend'],int:['travel'],sku:'TDW-WKD-NVY',desc:'Waxed canvas with leather handles, a padded laptop sleeve and a separate shoe compartment. Fits most overhead bins.'},
  {id:'p9',name:'Saltbox Spice Library',brand:'Saltbox',cat:'home',price:58,was:null,rating:4.9,reviews:291,img:312,tag:'',who:['host','parent','friend'],int:['cooking'],sku:'SLT-LIB-12',desc:'Twelve small-batch spice blends in refillable tins, plus a recipe booklet from our test kitchen.'},
  {id:'p10',name:'Cedar & Fig Soy Candle',brand:'Wick & Wander',cat:'beauty',price:28,was:null,rating:4.7,reviews:1102,img:225,tag:'',who:['host','friend','parent'],int:['cozy','wellness'],sku:'WKW-CDR-8OZ',desc:'Hand-poured soy wax with a cotton wick and a 50-hour burn time. Comes in a reusable amber glass jar.'}
];
const trendingIds=['p1','p2','p3','p4','p5','p6','p7','p8'];

const $=s=>document.querySelector(s);
const stars=r=>'★'.repeat(Math.round(r))+'☆'.repeat(5-Math.round(r));
const imgURL=(p,w,h)=>`https://picsum.photos/id/${p.img}/${w}/${h}`;
let cart=0;

function toast(msg){const t=$('#toast');t.textContent=msg;t.classList.add('show');clearTimeout(t._t);t._t=setTimeout(()=>t.classList.remove('show'),2400)}
function addToCart(id,qty=1){
  const p=products.find(x=>x.id===id);cart+=qty;
  const b=$('#cartCount');b.textContent=cart;b.classList.add('bump');setTimeout(()=>b.classList.remove('bump'),200);
  toast(`Added ${qty} × ${p.name} to your cart`);
}

function renderGrid(filter='all'){
  const grid=$('#productGrid');
  const list=trendingIds.map(id=>products.find(p=>p.id===id)).filter(p=>filter==='all'||p.cat===filter);
  grid.innerHTML=list.map(p=>`
    <article class="card">
      <div class="card-media">
        <img src="${imgURL(p,400,500)}" alt="${p.name}" loading="lazy">
        ${p.tag?`<span class="tag ${p.tag==='Deal'?'sale':p.tag==='New'?'new':''}">${p.tag}</span>`:''}
        <button class="quick" data-quick="${p.id}">Quick View</button>
      </div>
      <div class="card-body">
        <span class="brandline">${p.brand}</span>
        <h3>${p.name}</h3>
        <div class="rating">${stars(p.rating)} <span>${p.rating} (${p.reviews.toLocaleString()})</span></div>
        <span class="sku">SKU ${p.sku}</span>
        <div class="price-row">
          <span class="price">$${p.price}${p.was?`<s>$${p.was}</s>`:''}</span>
          <button class="add" data-add="${p.id}" aria-label="Add ${p.name} to cart">+</button>
        </div>
      </div>
    </article>`).join('');
}
renderGrid();
document.querySelectorAll('.chip').forEach(c=>c.addEventListener('click',()=>{
  document.querySelectorAll('.chip').forEach(x=>x.classList.remove('active'));c.classList.add('active');renderGrid(c.dataset.filter);
}));

/* Gift finder */
const state={who:'anyone',interest:'any',budget:'9999'};
const labels={anyone:'anyone',partner:'your partner',parent:'a parent',friend:'a friend',host:'the host'};
function renderFinder(){
  const max=+state.budget;
  let res=products.filter(p=>(state.who==='anyone'||p.who.includes(state.who))&&(state.interest==='any'||p.int.includes(state.interest))&&p.price<=max)
    .sort((a,b)=>b.rating-a.rating).slice(0,4);
  $('#finderTitle').textContent=`Top picks for ${labels[state.who]}`;
  const parts=[];if(state.interest!=='any')parts.push(`who loves ${$('[data-group=interest] .selected').textContent.toLowerCase()}`);if(max<9999)parts.push(`under $${max}`);
  $('#finderHint').textContent=res.length?`${res.length} highly-rated match${res.length>1?'es':''}${parts.length?' '+parts.join(', '):''}. All eligible for free gift wrap.`:'';
  $('#finderResults').innerHTML=res.length?res.map(p=>`
    <div class="result">
      <img src="${imgURL(p,150,150)}" alt="${p.name}">
      <div><b>${p.name}</b><small>${p.brand} · ★ ${p.rating} · $${p.price}</small></div>
      <button class="btn btn-outline" style="padding:.45rem .8rem;font-size:.8rem" data-quick="${p.id}">Quick View</button>
      <button class="add" data-add="${p.id}" aria-label="Add to cart">+</button>
    </div>`).join(''):`<div class="empty">No exact matches for that combination yet — try widening the budget or choosing "Surprise me". Our editors add new gifts every week.</div>`;
}
document.querySelectorAll('.opt-group').forEach(g=>g.addEventListener('click',e=>{
  const b=e.target.closest('.opt');if(!b)return;
  g.querySelectorAll('.opt').forEach(o=>o.classList.remove('selected'));b.classList.add('selected');
  state[g.dataset.group]=b.dataset.val;renderFinder();
}));
renderFinder();

/* Modal */
let current=null,qty=1;
function openModal(id){
  const p=products.find(x=>x.id===id);current=p;qty=1;$('#qVal').textContent=1;
  $('#mImg').src=imgURL(p,600,700);$('#mImg').alt=p.name;
  $('#mBrand').textContent=p.brand;$('#mTitle').textContent=p.name;
  $('#mRating').innerHTML=`${stars(p.rating)} <span>${p.rating} · ${p.reviews.toLocaleString()} reviews</span>`;
  $('#mPrice').innerHTML=`$${p.price}${p.was?` <s>$${p.was}</s>`:''}`;
  $('#mDesc').textContent=p.desc;$('#mSku').textContent='SKU: '+p.sku;
  $('#modal').classList.add('open');document.body.style.overflow='hidden';
}
function closeModal(){$('#modal').classList.remove('open');document.body.style.overflow=''}
$('#modalClose').onclick=closeModal;
$('#modal').addEventListener('click',e=>{if(e.target.id==='modal')closeModal()});
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal()});
$('#qMinus').onclick=()=>{qty=Math.max(1,qty-1);$('#qVal').textContent=qty};
$('#qPlus').onclick=()=>{qty=Math.min(10,qty+1);$('#qVal').textContent=qty};
$('#mAdd').onclick=()=>{addToCart(current.id,qty);closeModal()};

document.addEventListener('click',e=>{
  const q=e.target.closest('[data-quick]');if(q){openModal(q.dataset.quick);return}
  const a=e.target.closest('[data-add]');if(a)addToCart(a.dataset.add);
});

/* Promo copy */
$('#copyPromo').onclick=()=>{
  const code=$('#promoCode').textContent;
  (navigator.clipboard?navigator.clipboard.writeText(code):Promise.reject()).then(()=>toast(`Promo code ${code} copied — apply it at checkout`)).catch(()=>toast(`Your code: ${code}`));
};

/* Countdown to midnight */
function tick(){
  const now=new Date(),end=new Date(now);end.setHours(23,59,59,999);
  let d=Math.max(0,end-now)/1000;
  const pad=n=>String(Math.floor(n)).padStart(2,'0');
  $('#cdH').textContent=pad(d/3600);$('#cdM').textContent=pad(d%3600/60);$('#cdS').textContent=pad(d%60);
}
tick();setInterval(tick,1000);

/* Track order */
$('#trackForm').addEventListener('submit',e=>{
  e.preventDefault();
  const num=$('#orderNum').value.trim().toUpperCase(),email=$('#orderEmail').value.trim(),msg=$('#trackMsg');
  $('#trackResult').classList.remove('show');
  if(!/^PRC-\d{4,6}$/.test(num)){msg.textContent='Please enter a valid order number (format: PRC-12345).';return}
  if(!/^\S+@\S+\.\S+$/.test(email)){msg.textContent='Please enter the email address used at checkout.';return}
  msg.textContent='';$('#trackHeading').textContent=`Order ${num} · Arriving Thursday`;
  $('#trackResult').classList.add('show');
});

/* Newsletter */
$('#newsForm').addEventListener('submit',e=>{
  e.preventDefault();const i=e.target.querySelector('input');
  if(!i.checkValidity()){toast('Please enter a valid email address');return}
  toast('You\'re subscribed! Check your inbox for 10% off.');i.value='';
});

/* Mobile nav + year */
$('#menuToggle').onclick=()=>$('#primaryNav').classList.toggle('open');
document.querySelectorAll('#primaryNav a').forEach(a=>a.addEventListener('click',()=>$('#primaryNav').classList.remove('open')));
$('#year').textContent=new Date().getFullYear();
</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:51:59.135Z",
  "url": "https://benchmark.aimac.invalid/ada7c179f0087b1389b626c612dada6bc11db96bd638308503bf252d6fa1592e.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-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-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-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": "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": []
    },
    {
      "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": "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": "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": "<a href=\"#\" class=\"brand\" aria-label=\"Parcelle home\">",
          "target": [
            "a[aria-label=\"Parcelle home\"]"
          ]
        }
      ]
    },
    {
      "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": "<a href=\"#\" class=\"brand\" aria-label=\"Parcelle home\">",
          "target": [
            "a[aria-label=\"Parcelle home\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"filter-chips\" role=\"tablist\">",
          "target": [
            ".filter-chips"
          ]
        }
      ]
    },
    {
      "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": "<a href=\"#\" class=\"brand\" aria-label=\"Parcelle home\">",
          "target": [
            "a[aria-label=\"Parcelle home\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"filter-chips\" role=\"tablist\">",
          "target": [
            ".filter-chips"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"filter-chips\" role=\"tablist\">",
          "target": [
            ".filter-chips"
          ]
        }
      ]
    },
    {
      "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": "<a href=\"#\" class=\"brand\" aria-label=\"Parcelle home\">",
          "target": [
            "a[aria-label=\"Parcelle home\"]"
          ]
        }
      ]
    },
    {
      "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": "<a href=\"#\" class=\"brand\" aria-label=\"Parcelle home\">",
          "target": [
            "a[aria-label=\"Parcelle home\"]"
          ]
        }
      ]
    },
    {
      "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\" id=\"gift-finder\" style=\"padding-top:0\">",
          "target": [
            "#gift-finder"
          ]
        }
      ]
    },
    {
      "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": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button id=\"copyPromo\" type=\"button\">Copy code</button>",
          "target": [
            "#copyPromo"
          ]
        }
      ]
    },
    {
      "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>Good things, <em>carefully chosen</em> and at your door by Thursday.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h4>Free shipping over $50</h4>",
                  "target": [
                    ".perk:nth-child(1) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>60-day free returns</h4>",
                  "target": [
                    ".perk:nth-child(2) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Price-match promise</h4>",
                  "target": [
                    ".perk:nth-child(3) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Free gift wrapping</h4>",
                  "target": [
                    ".perk:nth-child(4) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h2>What everyone's adding to cart this week</h2>",
                  "target": [
                    "#trending > .container > .section-head > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>Hearth Stoneware Set (12pc)</h3>",
                  "target": [
                    ".card:nth-child(1) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Lumen Air ANC Earbuds</h3>",
                  "target": [
                    ".card:nth-child(2) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Bloom Botanical Face Oil</h3>",
                  "target": [
                    ".card:nth-child(3) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Merino Lounge Throw</h3>",
                  "target": [
                    ".card:nth-child(4) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Fieldwalk Leather Sneaker</h3>",
                  "target": [
                    ".card:nth-child(5) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Pour-Over Coffee Kit</h3>",
                  "target": [
                    ".card:nth-child(6) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Magnetic 3-in-1 Charging Stand</h3>",
                  "target": [
                    ".card:nth-child(7) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Canvas Weekender Bag</h3>",
                  "target": [
                    ".card:nth-child(8) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h2>Three taps to the perfect present.</h2>",
                  "target": [
                    ".finder > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3 id=\"finderTitle\">Top picks for anyone</h3>",
                  "target": [
                    "#finderTitle"
                  ]
                },
                {
                  "html": "<h2>Edited guides for every person on your list</h2>",
                  "target": [
                    "#gift-guides > .container > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>For the Home Cook Who Has Everything</h3>",
                  "target": [
                    ".big > .guide-content > h3"
                  ]
                },
                {
                  "html": "<h3>Self-Care Under $50</h3>",
                  "target": [
                    ".guide[href$=\"#gift-guides\"]:nth-child(2) > .guide-content > h3"
                  ]
                },
                {
                  "html": "<h3>Desk Setup Upgrades</h3>",
                  "target": [
                    ".guide[href$=\"#gift-guides\"]:nth-child(3) > .guide-content > h3"
                  ]
                },
                {
                  "html": "<h3>The Weekend Wanderer</h3>",
                  "target": [
                    ".guide[href$=\"#gift-guides\"]:nth-child(4) > .guide-content > h3"
                  ]
                },
                {
                  "html": "<h3>Host &amp; Hostess Gifts</h3>",
                  "target": [
                    ".guide[href$=\"#gift-guides\"]:nth-child(5) > .guide-content > h3"
                  ]
                },
                {
                  "html": "<h2>Tested, lived with, and genuinely recommended</h2>",
                  "target": [
                    "#editor-picks > .container > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>The Hearth Stoneware Set changed how I do mornings</h3>",
                  "target": [
                    ".txt > h3"
                  ]
                },
                {
                  "html": "<h4>Lumen Air Earbuds</h4>",
                  "target": [
                    ".pick-mini:nth-child(1) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Bloom Botanical Face Oil</h4>",
                  "target": [
                    ".pick-mini:nth-child(2) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Fieldwalk Leather Sneaker</h4>",
                  "target": [
                    ".pick-mini:nth-child(3) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Saltbox Spice Library</h4>",
                  "target": [
                    ".pick-mini:nth-child(4) > div > h4"
                  ]
                },
                {
                  "html": "<h4>\u26a1 Flash Sale</h4>",
                  "target": [
                    ".flash > h4"
                  ]
                },
                {
                  "html": "<h4>New Arrivals <a href=\"#trending\" class=\"link-arrow\" style=\"font-size:.78rem;font-family:Inter\">View all</a></h4>",
                  "target": [
                    ".widget:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Popular Categories</h4>",
                  "target": [
                    ".widget:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h2>32,000 shoppers can't all be wrong</h2>",
                  "target": [
                    "#reviews > .container > .section-head > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h2 style=\"font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:1rem\">Know exactly where your parcel is, every step of the way.</h2>",
                  "target": [
                    ".orders-copy > h2"
                  ]
                },
                {
                  "html": "<h3>Track Order</h3>",
                  "target": [
                    ".track-card > h3"
                  ]
                },
                {
                  "html": "<h2 style=\"font-size:clamp(1.9rem,3.2vw,2.6rem)\">Questions, answered.</h2>",
                  "target": [
                    ".intro > h2"
                  ]
                },
                {
                  "html": "<h2>Get first dibs on drops &amp; deals.</h2>",
                  "target": [
                    ".newsletter > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h5>Shop</h5>",
                  "target": [
                    "div:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5>Help</h5>",
                  "target": [
                    "div:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5>Company</h5>",
                  "target": [
                    "div:nth-child(4) > h5"
                  ]
                },
                {
                  "html": "<h5>Contact</h5>",
                  "target": [
                    "div:nth-child(5) > h5"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "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": "#f3ebe0",
                "bgColor": "#1d1a17",
                "contrastRatio": 14.65,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.65"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"announce\">\ud83d\ude9a <strong>Free shipping</strong> on orders over $50 \u00b7 Use promo code <strong>HELLO15</strong> for 15% off your first order</div>",
          "target": [
            ".announce"
          ]
        }
      ]
    },
    {
      "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": "orderNum",
              "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 id=\"orderNum\" placeholder=\"e.g. PRC-20481\" required=\"\">",
          "target": [
            "#orderNum"
          ]
        }
      ]
    },
    {
      "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 class=\"search\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><path d=\"m20 20-3.5-3.5\"></path></svg>\n      <input type=\"search\" placeholder=\"Search products, brands or SKU\u2026\" aria-label=\"Search\">\n    </label>",
                  "target": [
                    ".search"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"search\" placeholder=\"Search products, brands or SKU\u2026\" aria-label=\"Search\">",
          "target": [
            "input[type=\"search\"]"
          ]
        }
      ]
    },
    {
      "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/96x96/c4552d/ffffff?text=P&amp;font=playfair+display\" alt=\"Parcelle logo\">",
          "target": [
            "a[aria-label=\"Parcelle home\"] > img[alt=\"Parcelle 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": "implicit-label",
              "data": {
                "implicitLabel": "Search"
              },
              "relatedNodes": [
                {
                  "html": "<label class=\"search\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><path d=\"m20 20-3.5-3.5\"></path></svg>\n      <input type=\"search\" placeholder=\"Search products, brands or SKU\u2026\" aria-label=\"Search\">\n    </label>",
                  "target": [
                    ".search"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an implicit (wrapped) <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            },
            {
              "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=\"search\" placeholder=\"Search products, brands or SKU\u2026\" aria-label=\"Search\">",
          "target": [
            "input[type=\"search\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"widget flash\">",
                  "target": [
                    ".flash"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#trending\" class=\"btn\">Shop the Sale</a>",
          "target": [
            ".flash > .btn[href$=\"#trending\"]"
          ]
        }
      ]
    },
    {
      "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"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "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=\"brand\" aria-label=\"Parcelle home\">",
          "target": [
            "a[aria-label=\"Parcelle home\"]"
          ]
        }
      ]
    },
    {
      "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>",
          "target": [
            ".container > ul"
          ]
        }
      ]
    },
    {
      "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=\"#trending\" class=\"active\">Trending Now</a></li>",
          "target": [
            ".container > ul > 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/96x96/c4552d/ffffff?text=P&amp;font=playfair+display\" alt=\"Parcelle logo\">",
          "target": [
            "a[aria-label=\"Parcelle home\"] > img[alt=\"Parcelle logo\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>How does free shipping work?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "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": 273.5,
                "height": 60.9
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (273.5px by 60.9px, 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=\"brand\" aria-label=\"Parcelle home\">",
          "target": [
            "a[aria-label=\"Parcelle home\"]"
          ]
        }
      ]
    }
  ],
  "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": "#c4552d",
                "contrastRatio": 4.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": "shortTextContent",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"badge\" id=\"cartCount\">0</span>",
                  "target": [
                    "#cartCount"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element content is too short to determine if it is actual text content"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"badge\" id=\"cartCount\">0</span>",
          "target": [
            "#cartCount"
          ],
          "failureSummary": "Fix any of the following:\n  Element content is too short to determine if it is actual text content"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "aria-required-children",
      "impact": "critical",
      "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": [
        {
          "any": [
            {
              "id": "aria-required-children",
              "data": {
                "messageKey": "unallowed",
                "values": "button[tabindex]"
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"chip active\" data-filter=\"all\">All</button>",
                  "target": [
                    "button[data-filter=\"all\"]"
                  ]
                },
                {
                  "html": "<button class=\"chip\" data-filter=\"home\">Home</button>",
                  "target": [
                    "button[data-filter=\"home\"]"
                  ]
                },
                {
                  "html": "<button class=\"chip\" data-filter=\"tech\">Tech</button>",
                  "target": [
                    "button[data-filter=\"tech\"]"
                  ]
                },
                {
                  "html": "<button class=\"chip\" data-filter=\"beauty\">Beauty</button>",
                  "target": [
                    "button[data-filter=\"beauty\"]"
                  ]
                },
                {
                  "html": "<button class=\"chip\" data-filter=\"style\">Style</button>",
                  "target": [
                    "button[data-filter=\"style\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has children which are not allowed: button[tabindex]"
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<div class=\"filter-chips\" role=\"tablist\">",
          "target": [
            ".filter-chips"
          ],
          "failureSummary": "Fix any of the following:\n  Element has children which are not allowed: button[tabindex]"
        }
      ]
    },
    {
      "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": "#c4552d",
                "bgColor": "#ffffff",
                "contrastRatio": 4.48,
                "fontSize": "11.2pt (14.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site\">",
                  "target": [
                    "header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 11.2pt (14.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#editor-picks\" class=\"deal\">Flash Deals</a>",
          "target": [
            ".deal"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 11.2pt (14.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.16,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">The Spring Edit \u00b7 New drops weekly</span>",
          "target": [
            ".hero-grid > div:nth-child(1) > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.32,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"sub\">Every item ships from our own warehouse with tracked delivery, 60-day returns and price-match protection, so you can shop the deal without second-guessing it.</p>",
          "target": [
            ".sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c4552d",
                "contrastRatio": 4.48,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#trending\" class=\"btn btn-primary\">Shop Trending \u2192</a>",
                  "target": [
                    ".btn-primary.btn[href$=\"#trending\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#trending\" class=\"btn btn-primary\">Shop Trending \u2192</a>",
          "target": [
            ".btn-primary.btn[href$=\"#trending\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.32,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Curated SKUs</span>",
          "target": [
            ".hero-stats > div:nth-child(1) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.32,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>From 32k reviews</span>",
          "target": [
            ".hero-stats > div:nth-child(2) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.32,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Avg. delivery</span>",
          "target": [
            ".hero-stats > div:nth-child(3) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.32 (foreground color: #7b736b, background color: #faf6f0, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.16,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Trending Now</span>",
          "target": [
            "#trending > .container > .section-head > div:nth-child(1) > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c4552d",
                "contrastRatio": 4.48,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag sale\">Deal</span>",
                  "target": [
                    ".card:nth-child(1) > .card-media > .sale.tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag sale\">Deal</span>",
          "target": [
            ".card:nth-child(1) > .card-media > .sale.tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c4552d",
                "contrastRatio": 4.48,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag sale\">Deal</span>",
                  "target": [
                    ".card:nth-child(4) > .card-media > .sale.tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag sale\">Deal</span>",
          "target": [
            ".card:nth-child(4) > .card-media > .sale.tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c4552d",
                "contrastRatio": 4.48,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag sale\">Deal</span>",
                  "target": [
                    ".card:nth-child(7) > .card-media > .sale.tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag sale\">Deal</span>",
          "target": [
            ".card:nth-child(7) > .card-media > .sale.tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.16,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Gift Guides</span>",
          "target": [
            "#gift-guides > .container > .section-head > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.16,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#gift-guides\" class=\"link-arrow\">Browse all 24 guides \u2192</a>",
          "target": [
            ".link-arrow[href$=\"#gift-guides\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.16,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Editor Picks</span>",
          "target": [
            "#editor-picks > .container > .section-head > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#ffffff",
                "contrastRatio": 4.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"pick-feature\">",
                  "target": [
                    ".pick-feature"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Pick of the Month</span>",
          "target": [
            ".txt > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fffefe",
                "bgColor": "#faf6f0",
                "contrastRatio": 1.06,
                "fontSize": "10.6pt (14.08px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.06 (foreground color: #fffefe, background color: #faf6f0, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Up to 40% off kitchen and bar essentials. Discount applied automatically at checkout \u2014 no promo code needed.</p>",
          "target": [
            ".flash > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.06 (foreground color: #fffefe, background color: #faf6f0, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fefdfc",
                "bgColor": "#faf6f0",
                "contrastRatio": 1.05,
                "fontSize": "7.9pt (10.56px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.05 (foreground color: #fefdfc, background color: #faf6f0, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Hrs</small>",
          "target": [
            "div:nth-child(1) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.05 (foreground color: #fefdfc, background color: #faf6f0, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fefdfc",
                "bgColor": "#faf6f0",
                "contrastRatio": 1.05,
                "fontSize": "7.9pt (10.56px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.05 (foreground color: #fefdfc, background color: #faf6f0, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Min</small>",
          "target": [
            "#countdown > div:nth-child(2) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.05 (foreground color: #fefdfc, background color: #faf6f0, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fefdfc",
                "bgColor": "#faf6f0",
                "contrastRatio": 1.05,
                "fontSize": "7.9pt (10.56px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.05 (foreground color: #fefdfc, background color: #faf6f0, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Sec</small>",
          "target": [
            "div:nth-child(3) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.05 (foreground color: #fefdfc, background color: #faf6f0, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#ffffff",
                "contrastRatio": 4.48,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#trending\" class=\"btn\">Shop the Sale</a>",
                  "target": [
                    ".flash > .btn[href$=\"#trending\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#trending\" class=\"btn\">Shop the Sale</a>",
          "target": [
            ".flash > .btn[href$=\"#trending\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#ffffff",
                "contrastRatio": 4.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget\">",
                  "target": [
                    ".widget:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#trending\" class=\"link-arrow\" style=\"font-size:.78rem;font-family:Inter\">View all</a>",
          "target": [
            ".link-arrow[href$=\"#trending\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #c4552d, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#efe6d9",
                "contrastRatio": 3.62,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section reviews\" id=\"reviews\">",
                  "target": [
                    "#reviews"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.62 (foreground color: #c4552d, background color: #efe6d9, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Reviews</span>",
          "target": [
            "#reviews > .container > .section-head > div:nth-child(1) > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.62 (foreground color: #c4552d, background color: #efe6d9, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.16,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Orders &amp; Delivery</span>",
          "target": [
            ".orders-copy > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c4552d",
                "contrastRatio": 4.48,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary\" type=\"submit\" style=\"width:100%;justify-content:center\">Track Order</button>",
                  "target": [
                    ".btn-primary.btn[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-primary\" type=\"submit\" style=\"width:100%;justify-content:center\">Track Order</button>",
          "target": [
            ".btn-primary.btn[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.48 (foreground color: #ffffff, background color: #c4552d, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c4552d",
                "bgColor": "#faf6f0",
                "contrastRatio": 4.16,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Help Center</span>",
          "target": [
            ".intro > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #c4552d, background color: #faf6f0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#faf1ee",
                "bgColor": "#c4552d",
                "contrastRatio": 4.03,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"newsletter\">",
                  "target": [
                    ".newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.03 (foreground color: #faf1ee, background color: #c4552d, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Join 210,000 subscribers who get our Thursday edit: new arrivals, restocks of sold-out favorites, and subscriber-only promo codes. One email a week, never spam, unsubscribe anytime.</p>",
          "target": [
            ".newsletter > div:nth-child(1) > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.03 (foreground color: #faf1ee, background color: #c4552d, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f6e6e0",
                "bgColor": "#c4552d",
                "contrastRatio": 3.69,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"newsletter\">",
                  "target": [
                    ".newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.69 (foreground color: #f6e6e0, background color: #c4552d, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Subscribe today and get an extra 10% off your next order. By signing up, you agree to our Privacy Policy.</small>",
          "target": [
            ".newsletter > div:nth-child(2) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.69 (foreground color: #f6e6e0, background color: #c4552d, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 8870
      },
      {
        "y": 576,
        "height": 8870
      },
      {
        "y": 1152,
        "height": 8870
      },
      {
        "y": 1728,
        "height": 8870
      },
      {
        "y": 2304,
        "height": 8870
      },
      {
        "y": 2880,
        "height": 8870
      },
      {
        "y": 3456,
        "height": 8870
      },
      {
        "y": 4032,
        "height": 8870
      },
      {
        "y": 4608,
        "height": 8870
      },
      {
        "y": 5184,
        "height": 8870
      },
      {
        "y": 5760,
        "height": 8870
      },
      {
        "y": 6336,
        "height": 8870
      },
      {
        "y": 6912,
        "height": 8870
      },
      {
        "y": 7488,
        "height": 8870
      },
      {
        "y": 8064,
        "height": 8870
      },
      {
        "y": 8150,
        "height": 8870
      }
    ],
    "scans": 17,
    "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: "Reviews", "Orders", "Cart".
-   **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: "Trending Now", "Gift Guides", "Editor Picks".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "promo code", "free shipping", "SKU".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Subscribe", "Quick View", "Track Order".
-   **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: "gift finder".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "new arrivals", "popular categories", "flash sales".
-   **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.