@tokenoftrust/storefront-runner 0.1.0

package/tenants/bigdvapor/content/themes/bigd-navy.json

@@ -0,0 +1,109 @@
+{
+  "id": "bigd-navy",
+  "role": "current",
+  "name": "Big D Vapor — Navy",
+  "description": "Faithful T0 clone of bigdvapor.com's Shopify theme: royal navy (#0030a0) on white with a red sale accent. Poppins display over Inter body. Token values mirror themes/bigd-navy.css so this guide re-skins the standard commerce + chrome components in-brand.",
+  "source": "bigdvapor.com (Shopify) reconstruction",
+  "stylesheet": "/tenants/bigdvapor/themes/bigd-navy.css",
+  "concept": { "id": "bigd-navy", "version": "1.0.0", "baseline": "1.0.0" },
+  "status": "approved",
+  "claimsPolicy": "Ratings, testimonials, badges, and guarantees in this guide are PLACEHOLDER / needs-review — never ship fabricated proof for Big D Vapor.",
+  "storyboard": {
+    "status": "draft",
+    "summary": "bigd-navy: royal navy (#0030a0) on white, red sale accent — a faithful clone of bigdvapor.com's Shopify theme. The home page defines the brand system + chrome; the subpages define editorial-split and contact-conversion patterns. This is the contract every remaining bigdvapor page follows.",
+    "inspirationPages": [
+      {
+        "slug": "/",
+        "role": "brand-system-and-chrome",
+        "captures": [
+          "brand arrival: navy full-color wordmark on white",
+          "chrome: FDA warning bar + red scrolling shipping marquee + utility nav",
+          "sticky header: logo + search + account + cart-count; mega-nav with NEW badge and carets",
+          "two-up hero, 3 promo cards, icon category tiles",
+          "footer: columns + newsletter + payment badges + compliance line"
+        ]
+      },
+      {
+        "slug": "/pages/about-us",
+        "role": "editorial-split",
+        "captures": [
+          "page-hero image overlay heading",
+          "alternating story/mission/service split sections (copy + real photo)",
+          "trusted-brands + find-your-favorite category sections"
+        ]
+      },
+      {
+        "slug": "/pages/contact-us",
+        "role": "contact-conversion",
+        "captures": [
+          "page hero + intro",
+          "contact-info blocks (call / email / Dallas TX)",
+          "contact form (name / email / phone / comment)"
+        ]
+      }
+    ]
+  },
+  "preview": {
+    "componentVars": {
+      "--color-bg": "#ffffff",
+      "--color-surface": "#f4f7fc",
+      "--color-text": "#14181f",
+      "--color-muted": "#5a6472",
+      "--color-primary": "#0030a0",
+      "--color-primary-contrast": "#ffffff",
+      "--color-accent": "#0030a0",
+      "--color-border": "#e2e8f2",
+      "--color-success": "#1f8a4c",
+      "--color-sale": "#d81f2a",
+      "--radius-sm": "6px",
+      "--radius-md": "10px",
+      "--radius-lg": "16px",
+      "--radius-full": "999px",
+      "--shadow-sm": "0 1px 2px rgba(16,26,64,.06), 0 1px 3px rgba(16,26,64,.08)",
+      "--shadow-md": "0 6px 18px rgba(16,26,64,.10)",
+      "--shadow-lg": "0 18px 48px rgba(16,26,64,.16)",
+      "--container-max": "1240px",
+      "--font-display": "\"Poppins\", system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+      "--font-body": "\"Inter\", system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+      "--font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+    }
+  },
+  "tokens": {
+    "color": [
+      { "name": "navy", "var": "--navy", "value": "#0030a0", "role": "Primary brand · buttons, sticky header, focus outline" },
+      { "name": "navy-dark", "var": "--navy-dark", "value": "#002478", "role": "Navy hover / pressed on primary" },
+      { "name": "navy-ink", "var": "--navy-ink", "value": "#001a5c", "role": "Deep navy · footer & dark sections background" },
+      { "name": "ink", "var": "--ink", "value": "#14181f", "role": "Body text · headings" },
+      { "name": "muted", "var": "--muted", "value": "#5a6472", "role": "Secondary text · muted" },
+      { "name": "sale", "var": "--sale", "value": "#d81f2a", "role": "Sale / clearance price accent" },
+      { "name": "ok", "var": "--ok", "value": "#1f8a4c", "role": "In-stock / availability accent (mkt.css)" },
+      { "name": "bg", "var": "--bg", "value": "#ffffff", "role": "Page background (white)" },
+      { "name": "surface", "var": "--surface", "value": "#f4f7fc", "role": "Raised surface / section tint" },
+      { "name": "surface-2", "var": "--surface-2", "value": "#eaf0fb", "role": "Deeper surface / hover fill" },
+      { "name": "border", "var": "--border", "value": "#e2e8f2", "role": "Hairline border / dividers" }
+    ],
+    "type": {
+      "sans": "\"Inter\", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+      "display": "\"Poppins\", var(--font-body)",
+      "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      "scale": [
+        { "name": "h1", "value": "clamp(2rem, 4.6vw, 3.15rem)", "weight": 700 },
+        { "name": "h2", "value": "clamp(1.6rem, 3.2vw, 2.35rem)", "weight": 700 },
+        { "name": "h3", "value": "1.2rem", "weight": 700 },
+        { "name": "body", "value": "1rem (16px min)", "weight": 400 },
+        { "name": "small", "value": "0.875rem (14px floor)", "weight": 400 }
+      ]
+    },
+    "space": [
+      { "name": "s1", "value": "8px" }, { "name": "s2", "value": "16px" }, { "name": "s3", "value": "24px" },
+      { "name": "s4", "value": "40px" }, { "name": "s5", "value": "64px" }, { "name": "s6", "value": "96px" }
+    ],
+    "shape": [
+      { "name": "radius-sm", "var": "--radius-sm", "value": "6px" },
+      { "name": "radius", "var": "--radius", "value": "10px" },
+      { "name": "radius-lg", "var": "--radius-lg", "value": "16px" },
+      { "name": "shadow", "var": "--shadow-md", "value": "0 6px 18px rgba(16,26,64,.10)" },
+      { "name": "tap-target", "var": "--tap", "value": "44px" }
+    ]
+  }
+}

package/tenants/bigdvapor/public/img/tiles/disposables.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 294 294" height="294" width="294">
+<mask height="294" width="294" y="0" x="0" maskUnits="userSpaceOnUse" style="mask-type:alpha" id="mask0_217_297">
+<rect fill="#D9D9D9" height="294" width="294"></rect>
+</mask>
+<g mask="url(#mask0_217_297)">
+</g>
+<g clip-path="url(#clip0_217_297)">
+<path fill="#E0E0E0" d="M175.684 90.332H106.789C98.1385 90.332 91.1316 97.376 91.1316 106.073V213.11C91.1316 221.807 98.1385 228.851 106.789 228.851H175.684C184.335 228.851 191.342 221.807 191.342 213.11V106.073C191.342 97.376 184.335 90.332 175.684 90.332Z"></path>
+<path fill="#F5F5F5" d="M175.684 90.332C184.335 90.332 191.342 97.376 191.342 106.073V191.073H122.447C115.519 191.073 109.921 185.445 109.921 178.48V90.332H175.684Z"></path>
+<path fill="#161AC4" d="M191.342 115.52H91.1316V203.668H191.342V115.52Z"></path>
+<path fill="#367AFF" d="M109.921 178.482V115.52H191.342V191.075H122.447C115.519 191.075 109.921 185.448 109.921 178.482Z"></path>
+<path fill="#E0E0E0" d="M175.684 65.1484H150.632L149.457 90.3336H175.684V65.1484Z"></path>
+<path fill="#E0E0E0" d="M191.342 172.184H197.605C201.05 172.184 203.868 175.017 203.868 178.48V191.072C203.868 194.535 201.05 197.369 197.605 197.369H191.342V172.184Z"></path>
+<path fill="#F41C35" d="M128.711 134.406L138.105 150.147H122.447L150.632 184.777L144.368 162.74H160.026L144.368 134.406H128.711Z"></path>
+<path fill="black" d="M175.684 62C177.407 62 178.816 63.4167 178.816 65.1481V87.4606C187.858 88.9954 194.474 96.8657 194.474 106.074V169.037H197.605C202.812 169.037 207 173.248 207 178.481V191.074C207 196.308 202.812 200.519 197.605 200.519H194.474V213.111C194.474 223.539 186.058 232 175.684 232H106.789C96.4161 232 88 223.539 88 213.111V106.074C88 95.6458 96.4161 87.1852 106.789 87.1852H147.5V65.1481C147.5 63.4167 148.909 62 150.632 62M147.5 87.1852V68.2963H153.763V87.1852H147.5ZM153.763 68.2963V87.1852H160.026V68.2963H153.763ZM166.289 68.2963V87.1852H172.553V68.2963H166.289ZM175.684 93.4815H106.789C99.8609 93.4815 94.2632 99.1088 94.2632 106.074V112.37H188.211V106.074C188.211 99.1088 182.613 93.4815 175.684 93.4815ZM94.2632 118.667V200.519H188.211V118.667H94.2632ZM197.605 194.222C199.328 194.222 200.737 192.806 200.737 191.074V178.481C200.737 176.75 199.328 175.333 197.605 175.333H194.474V194.222H197.605ZM106.789 225.704H175.684C182.613 225.704 188.211 220.076 188.211 213.111V206.815H94.2632V213.111C94.2632 220.076 99.8609 225.704 106.789 225.704Z"></path>
+<path fill="black" d="M162.727 164.353C162.179 165.297 161.122 165.887 160.026 165.887H148.518L153.646 183.911C154.115 185.563 153.137 187.334 151.493 187.806C150.279 188.161 148.988 187.728 148.205 186.783L120.02 152.154C118.924 150.816 119.12 148.809 120.451 147.707C120.999 147.235 121.704 146.999 122.447 146.999H132.586L126.049 136.019C125.148 134.524 125.657 132.596 127.106 131.691C127.575 131.415 128.163 131.258 128.711 131.258H144.368C145.504 131.258 146.561 131.887 147.109 132.871L162.766 161.205C163.315 162.188 163.275 163.369 162.727 164.353ZM142.529 137.554H134.23L140.767 148.533C141.667 150.029 141.159 151.957 139.71 152.862C139.24 153.137 138.653 153.295 138.105 153.295H129.063L143.468 171.003L141.354 163.605C140.885 161.952 141.824 160.181 143.507 159.709C143.781 159.631 144.055 159.591 144.368 159.591H154.703L142.529 137.554Z"></path>
+</g>
+<defs>
+<clipPath id="clip0_217_297">
+<rect transform="matrix(-1 0 0 1 207 62)" fill="white" height="170" width="119"></rect>
+</clipPath>
+</defs>
+</svg>

package/tenants/bigdvapor/public/pages/home.css

@@ -0,0 +1,118 @@
+/* ============================================================================
+   Big D Vapor — home page (pixel clone of www.bigdvapor.com, above-the-fold).
+   Section order + chrome mirror the live Shopify theme. Shared base in
+   themes/bigd-navy.css + pages/mkt.css. See playbook/site-migration/page-port.md §3.
+   ========================================================================== */
+
+/* --- Hero: TWO-UP (banner + promo tile), no overlay text ------------------ */
+.hero2 { padding-block: clamp(16px, 2vw, 24px); }
+.hero2 .container { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
+.hero2 a { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
+.hero2 img { width: 100%; height: clamp(260px, 34vw, 420px); object-fit: cover; }
+.hero2 .promo-tile { background: linear-gradient(135deg, #0b1020, var(--navy-ink)); }
+
+/* --- 3 promo cards -------------------------------------------------------- */
+.promos { padding-block: clamp(12px, 2vw, 20px); }
+.promos .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.promo-card {
+  position: relative; min-height: 240px; border-radius: var(--radius-lg); overflow: hidden;
+  display: flex; flex-direction: column; justify-content: flex-start; padding: 28px; color: #fff;
+}
+.promo-card--blue { background: linear-gradient(160deg, #1466ff, var(--navy)); }
+.promo-card--red { background: linear-gradient(160deg, #ff3b46, var(--sale)); }
+.promo-card--img { background: #10131c; padding: 0; }
+.promo-card--img img { width: 100%; height: 100%; object-fit: cover; }
+.promo-card h3 { color: #fff; font-size: 1.7rem; }
+.promo-card p { color: rgba(255,255,255,.88); margin-top: 4px; font-weight: 500; }
+.promo-card .link { margin-top: 14px; font-family: var(--font-display); font-weight: 700; color: #fff; }
+.promo-card .link::after { content: " ›"; }
+
+/* --- Categories (icon cards, light-blue) ---------------------------------- */
+.cats { padding-block: clamp(2rem, 4vw, 3.5rem); }
+.cats h2 { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
+.cats .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 20px); }
+.cat-icon-card {
+  display: flex; flex-direction: column; align-items: center; gap: 16px;
+  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
+  padding: 26px 16px; text-align: center; transition: transform .14s, box-shadow .14s;
+}
+.cat-icon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
+.cat-icon-card .ico {
+  width: 92px; height: 92px; border-radius: 18px; background: var(--surface-2);
+  display: grid; place-items: center;
+}
+.cat-icon-card .ico svg { width: 52px; height: 52px; stroke: var(--navy); fill: none; stroke-width: 1.6; }
+.cat-icon-card span { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
+
+/* --- Responsive ----------------------------------------------------------- */
+@media (max-width: 900px) {
+  .hero2 .container { grid-template-columns: 1fr; }
+  .hero2 .promo-tile { display: none; }
+  .promos .container { grid-template-columns: 1fr; }
+  .cats .grid { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 560px) {
+  .cats .grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* --- Footer newsletter ---------------------------------------------------- */
+.footer-news { display: flex; gap: 8px; margin-top: 12px; max-width: 320px; }
+.footer-news input { flex: 1; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; border-radius: 999px; padding: 10px 16px; font-size: .9rem; }
+.footer-news input::placeholder { color: #a9b8e6; }
+.footer-news button { background: #fff; color: var(--navy-ink); border: 0; border-radius: 999px; width: 42px; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
+.footer-col > p { color: #a9b8e6; font-size: .88rem; margin-top: 4px; }
+
+/* --- Payment badges ------------------------------------------------------- */
+.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.pay-badges span { background: #fff; color: var(--navy-ink); font-size: .62rem; font-weight: 800; letter-spacing: .03em; padding: 6px 9px; border-radius: 5px; }
+
+/* --- Product carousel (real catalog snapshot) ----------------------------- */
+.shelf .sec-head { margin-bottom: 1.25rem; }
+.pcarousel {
+  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
+  gap: clamp(12px, 1.6vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory;
+  padding-bottom: 12px; scrollbar-width: thin;
+}
+.pcard { scroll-snap-align: start; }
+.pcard a { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .14s, box-shadow .14s, border-color .14s; }
+.pcard a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--surface-2); }
+.pcard__media { aspect-ratio: 1/1; background: var(--surface); display: grid; place-items: center; }
+.pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
+.pcard__vendor { font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px 0; }
+.pcard__title { font-family: var(--font-body); font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--ink); padding: 2px 14px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.pcard__price { font-family: var(--font-display); font-weight: 700; color: var(--navy); padding: 6px 14px 14px; }
+.pcard__was { color: var(--muted); font-weight: 500; text-decoration: line-through; margin-right: 4px; }
+
+/* --- Staff's Pick spotlight ----------------------------------------------- */
+.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
+.spotlight:hover { box-shadow: var(--shadow-md); }
+.spotlight__media { aspect-ratio: 4/3; background: var(--surface); display: grid; place-items: center; }
+.spotlight__media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
+.spotlight__body { padding: clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px) 0; }
+.spotlight__body h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 4px 0 10px; }
+.spotlight__price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--navy); margin-bottom: 1.2rem; }
+
+/* --- Shop by Brands grid -------------------------------------------------- */
+.brandgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 16px); }
+.brandtile { display: grid; place-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); min-height: 96px; padding: 14px; transition: transform .14s, box-shadow .14s, border-color .14s; }
+.brandtile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--surface-2); }
+.brandtile img { max-height: 56px; max-width: 100%; object-fit: contain; }
+
+/* --- Blog cards ----------------------------------------------------------- */
+.bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
+.blogcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .14s, box-shadow .14s; }
+.blogcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
+.blogcard__media { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
+.blogcard h3 { font-size: 1.02rem; line-height: 1.35; padding: 16px 18px 0; color: var(--ink); }
+.blogcard .link-more { padding: 10px 18px 18px; }
+
+.center { text-align: center; }
+
+@media (max-width: 900px) {
+  .spotlight { grid-template-columns: 1fr; }
+  .spotlight__media { aspect-ratio: 16/10; }
+  .spotlight__body { padding: 0 24px 28px; }
+  .brandgrid { grid-template-columns: repeat(4, 1fr); }
+  .bloggrid { grid-template-columns: 1fr; }
+}
+@media (max-width: 560px) { .brandgrid { grid-template-columns: repeat(3, 1fr); } }

package/tenants/bigdvapor/public/pages/mkt.css

@@ -0,0 +1,185 @@
+/* ============================================================================
+   Big D Vapor — shared marketing component layer (mkt.css)
+   Reused across home + all marketing pages: layout, buttons, header/nav,
+   footer, section headers, tile + category grids, compliance strip.
+   Depends on tokens from themes/bigd-navy.css.
+   ========================================================================== */
+
+/* --- Layout --------------------------------------------------------------- */
+.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
+.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
+.section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
+.section--surface { background: var(--surface); }
+
+/* --- Buttons -------------------------------------------------------------- */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
+  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
+  padding: .8em 1.6em; border-radius: 999px; border: 2px solid transparent;
+  transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
+}
+.btn:hover { transform: translateY(-1px); }
+.btn-primary { background: var(--navy); color: #fff; }
+.btn-primary:hover { background: var(--navy-dark); box-shadow: var(--shadow-md); }
+.btn-line { border-color: #fff; color: #fff; }
+.btn-line:hover { background: #fff; color: var(--navy); }
+.btn-ghost { border-color: var(--border); color: var(--navy); background: #fff; }
+.btn-ghost:hover { border-color: var(--navy); }
+
+/* --- Announcement bar ----------------------------------------------------- */
+.announce {
+  background: var(--navy); color: #fff; text-align: center;
+  font-size: .85rem; font-weight: 600; letter-spacing: .01em; padding: 9px 16px;
+}
+
+/* --- Top utility bar (shared chrome: FDA warning + marquee + utility nav) -- */
+.topbar-warning {
+  background: #fff; border-bottom: 1px solid var(--border);
+  text-align: center; padding: 10px 16px;
+}
+.topbar-warning p { color: var(--ink); font-weight: 700; font-size: .82rem; letter-spacing: .01em; }
+
+.announce-marquee { background: var(--sale); color: #fff; overflow: hidden; }
+.announce-marquee__track {
+  display: flex; gap: 3rem; white-space: nowrap; width: max-content;
+  padding: 8px 0; font-size: .82rem; font-weight: 600;
+  animation: bdv-marquee 22s linear infinite;
+}
+.announce-marquee__track span { padding-inline: 1.5rem; }
+@keyframes bdv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+@media (prefers-reduced-motion: reduce) {
+  .announce-marquee__track { animation: none; justify-content: center; width: 100%; }
+}
+
+.utility-nav { border-bottom: 1px solid var(--border); background: #fff; }
+.utility-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px; }
+.utility-nav ul { display: flex; gap: 20px; }
+.utility-nav a { font-size: .82rem; font-weight: 600; color: var(--ink); }
+.utility-nav a:hover { color: var(--navy); }
+.utility-nav__right { display: flex; align-items: center; gap: 16px; }
+.utility-nav__right .sel { font-size: .8rem; color: var(--muted); }
+.utility-nav__right .social { display: flex; gap: 12px; }
+.utility-nav__right .social a svg { width: 16px; height: 16px; fill: var(--ink); }
+
+/* --- Header / nav --------------------------------------------------------- */
+.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--border); }
+.header-row { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 32px); padding-block: 14px; }
+.brand img { height: 46px; width: auto; }
+.primary-nav { flex: 1; }
+.primary-nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
+.primary-nav a { font-weight: 600; font-size: .92rem; color: var(--ink); padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
+.primary-nav a:hover { color: var(--navy); border-color: var(--navy); }
+.primary-nav a.is-flag { color: var(--sale); }
+.header-actions { display: flex; align-items: center; gap: 16px; }
+.header-actions a { display: inline-flex; color: var(--ink); }
+.header-actions a:hover { color: var(--navy); }
+.header-actions svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; }
+.hamburger span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; }
+
+/* header search pill + account/cart badge (shared chrome) */
+.site-header .header-row { gap: clamp(12px, 3vw, 40px); }
+.header-search { flex: 1; max-width: 560px; position: relative; }
+.header-search input {
+  width: 100%; border: 1px solid var(--border); border-radius: 999px;
+  padding: 11px 46px 11px 18px; font-size: .9rem; background: #fff; color: var(--ink);
+}
+.header-search input::placeholder { color: var(--muted); }
+.header-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; }
+.header-search svg { width: 20px; height: 20px; stroke: var(--navy); fill: none; stroke-width: 2; }
+.header-actions .cart { position: relative; }
+.header-actions .cart .count {
+  position: absolute; top: -6px; right: -8px; background: var(--navy); color: #fff;
+  font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px;
+  display: grid; place-items: center; padding: 0 4px;
+}
+
+/* primary nav: NEW badge + dropdown carets + second-row nav bar (shared chrome) */
+.primary-nav a .new-badge {
+  display: inline-block; background: var(--sale); color: #fff; font-size: .58rem; font-weight: 800;
+  letter-spacing: .06em; padding: 2px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
+}
+.primary-nav a .caret { font-size: .7em; margin-left: 4px; opacity: .7; }
+.primary-nav-bar { border-top: 1px solid var(--border); background: #fff; }
+.primary-nav-bar .container { padding-block: 4px; }
+.primary-nav-bar .primary-nav > ul { gap: clamp(10px, 1.4vw, 20px); }
+.primary-nav-bar .primary-nav a { padding-block: 10px; }
+
+/* --- Section headers ------------------------------------------------------ */
+.sec-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
+.sec-head .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: .55rem; }
+.sec-head p { margin-top: .7rem; font-size: 1.02rem; }
+.sec-head--between { display: flex; align-items: baseline; justify-content: space-between; text-align: left; max-width: none; gap: 16px; }
+.link-more { font-family: var(--font-display); font-weight: 600; color: var(--navy); white-space: nowrap; }
+.link-more:hover { text-decoration: underline; }
+
+/* --- Brand / category tile grid ------------------------------------------- */
+.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
+.tile {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
+  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
+  padding: 26px 18px; min-height: 148px; text-align: center; transition: transform .14s, box-shadow .14s, border-color .14s;
+}
+.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--surface-2); }
+.tile img { max-height: 66px; width: auto; object-fit: contain; }
+.tile span { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); }
+
+/* --- Category cards (shop by category) ------------------------------------ */
+.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
+.cat-card {
+  position: relative; display: flex; align-items: flex-end; overflow: hidden;
+  min-height: 190px; border-radius: var(--radius-lg); color: #fff;
+  background: linear-gradient(135deg, var(--navy), var(--navy-ink));
+  padding: 22px; transition: transform .14s, box-shadow .14s;
+}
+.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
+.cat-card::after { content: "→"; position: absolute; top: 20px; right: 22px; font-size: 1.3rem; opacity: .85; }
+.cat-card h3 { color: #fff; font-size: 1.35rem; }
+.cat-card p { color: rgba(255, 255, 255, .82); margin-top: 4px; font-size: .9rem; }
+
+/* --- Compliance strip (source-copied legal text; not fabricated) ---------- */
+.compliance-strip { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.compliance-strip .container { padding-block: 14px; }
+.compliance-strip p { color: var(--navy-ink); font-size: .82rem; font-weight: 600; text-align: center; letter-spacing: .01em; }
+
+/* --- Footer --------------------------------------------------------------- */
+.site-footer { background: var(--navy-ink); color: #dbe4fb; padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
+.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
+.footer-brand img { height: 40px; filter: brightness(0) invert(1); opacity: .95; }
+.footer-brand p { color: #a9b8e6; margin-top: 14px; font-size: .9rem; max-width: 34ch; }
+.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
+.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
+.footer-col a { color: #c3cff0; font-size: .92rem; }
+.footer-col a:hover { color: #fff; text-decoration: underline; }
+.footer-warning { margin-top: 34px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); }
+.footer-warning strong { color: #fff; }
+.footer-warning p { color: #c3cff0; font-size: .82rem; }
+.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
+.footer-bottom p, .footer-bottom a { color: #93a4d6; font-size: .82rem; }
+
+/* --- Reveal-on-scroll ----------------------------------------------------- */
+.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
+.reveal.in { opacity: 1; transform: none; }
+
+/* --- Responsive ----------------------------------------------------------- */
+@media (max-width: 900px) {
+  .header-search { order: 3; flex-basis: 100%; max-width: none; }
+  .utility-nav ul { gap: 12px; }
+}
+@media (max-width: 1000px) {
+  .tile-grid { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 860px) {
+  .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); background: #fff; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .25s ease; padding: 80px 24px 24px; overflow-y: auto; }
+  .primary-nav.open { transform: none; }
+  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
+  .primary-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--border); }
+  .hamburger { display: flex; }
+  .cat-grid { grid-template-columns: 1fr 1fr; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 560px) {
+  .tile-grid { grid-template-columns: repeat(2, 1fr); }
+  .cat-grid { grid-template-columns: 1fr; }
+  .footer-grid { grid-template-columns: 1fr; }
+}