/* Mylarlabs child theme styles. Started from the approved homepage preview (2026-09-18).
   Issue #7 (2026-10-09): font sizes, weights and families live ONLY in the "Type scale" block at the end
   of this file, as --type-* tokens from tokens.css. Do not add font sizes to the layered rules above it.
   T0 consolidation: expanded from the minified original, late overrides merged into their
   rules and media blocks, effective values unchanged. Tokens: ../shared/tokens.css,
   fonts: ../shared/fonts.css. Verified pixel-identical at 320/390/768/1440 (see README). */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; } /* width/height attributes reserve ratio; CSS sets displayed size */
#menu-toggle:focus:not(:focus-visible),
.header nav a:focus:not(:focus-visible),
.button:focus:not(:focus-visible),
.catalog-filter:focus:not(:focus-visible),
.quantity-step:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}
h1, h2, h3, p { margin: 0; }
h1, h2 { line-height: 1.05; }
h2 em { font-style: normal; color: var(--accent-heading); }
h3 { line-height: 1.15; }
p { line-height: 1.4; }
.wrap { max-width: var(--container); padding: 0 var(--gutter); margin: auto; }

/* ---------- Preview bar and header ---------- */
.preview-bar {
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  letter-spacing: 1px;
  padding: 6px 10px;
}
.header { border-bottom: 3px solid; }
.header-inner {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.brand-mark { width: 66px; height: 66px; object-fit: contain; }
.brand-name { width: 227px; }
.header nav { display: flex; gap: 30px; align-items: center; }
.header nav a:hover, footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-contact, footer button { border: 0; padding: 0; background: transparent; color: inherit; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 40px;
  padding: 10px 22px;
  line-height: 1.2;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.button:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--ink); }
.primary { background: var(--action); color: white; }
.secondary { background: var(--paper); color: var(--ink); }
.quote-button { white-space: nowrap; }
.quote-button svg { width: 29px; height: 32px; color: var(--ink); }
.menu-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 550px;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 20px;
  overflow: clip;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  letter-spacing: -2px;
  transform: rotate(-2deg);
  paint-order: stroke fill;
  -webkit-text-stroke: 14px var(--title-stroke);
  color: var(--paper);
  filter: drop-shadow(0 5px 0 var(--title-stroke));
  line-height: 1.05;
  margin: 18px 0 32px;
}
.hero h1 span { display: block; white-space: nowrap; }
.hero h1 span + span { color: var(--accent-hero); }
.hero-copy > p { line-height: 1.45; }
.hero-actions { display: flex; gap: 10px; margin-top: 20px; position: relative; z-index: 3; }
.hero-actions .button { padding: 12px 17px; white-space: nowrap; }
.hero-rays { position: absolute; width: 58px; top: -35px; left: -15px; transform: rotate(-20deg); }
.brand-note {
  display: flex;
  align-items: center;
  gap: 15px;
  transform: rotate(-8deg);
  width: max-content;
  margin: 24px 0 0 20px;
}
.hero-art { position: relative; height: 510px; isolation: isolate; }
.halftone {
  position: absolute;
  inset: 10% 0 3%;
  background-image: radial-gradient(#30282044 .7px, transparent .8px);
  background-size: 5px 5px;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.paint {
  position: absolute;
  display: block;
  left: -14%;
  top: 8%;
  width: 128%;
  height: 92%;
  transform: rotate(-27deg);
  z-index: -1;
  background: var(--paint);
  -webkit-mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
  mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
}
.hero-bag {
  position: absolute;
  width: 59%;
  max-width: none;
  height: auto;
  top: 10%;
  filter: drop-shadow(5px 12px 7px #18181835);
}
.bag-one { left: -10%; transform: rotate(-10deg); z-index: 1; }
.bag-two { left: 13%; top: 8%; transform: rotate(4deg); z-index: 2; }
.bag-three { left: 36%; top: 17%; transform: rotate(14deg); z-index: 3; }
.burst {
  position: absolute;
  z-index: 4;
  right: -4px;
  top: 0;
  display: grid;
  place-content: center;
  text-align: center;
  width: 132px;
  height: 132px;
  padding: 12px;
  box-sizing: border-box;
  background: var(--ink);
  color: white;
  transform: rotate(10deg);
  clip-path: polygon(50% 0, 59% 13%, 73% 4%, 77% 20%, 93% 17%, 90% 34%, 100% 43%, 87% 52%, 98% 67%, 81% 69%, 82% 87%, 64% 83%, 56% 100%, 45% 87%, 30% 97%, 26% 80%, 9% 84%, 14% 64%, 0 57%, 13% 44%, 1% 30%, 20% 28%, 19% 10%, 37% 17%);
}
.sparkle { position: absolute; width: 55px; left: 4%; top: 0; }
.crown { position: absolute; right: 0; bottom: 15%; width: 60px; transform: rotate(15deg); }
.art-note { position: absolute; bottom: 3%; left: 0; transform: rotate(-14deg); z-index: 4; }
.arrow { position: absolute; bottom: -1%; left: 20%; width: 90px; transform: rotate(175deg); }

/* ---------- Benefits ---------- */
.benefits { border: 2px solid; border-radius: 15px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 0; }
.benefits > div { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; }
.benefits > div + div { border-left: 1px solid var(--line-soft); }
.benefits svg { width: 64px; height: 64px; flex-shrink: 0; }
.benefits strong { display: block; margin-bottom: 3px; }
.benefits span { display: block; line-height: 1.4; }

/* ---------- Sections ---------- */
.section { margin-top: 38px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.section-heading > p { max-width: 300px; }
.rays { display: inline-block; color: var(--accent-hero); margin-left: 4px; transform: rotate(10deg); }
.demo-note { color: var(--muted); margin: -6px 0 14px; }
.product-grid, .custom-grid, .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Product cards */
.product-card {
  background: white;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44% 56%;
  padding: 12px;
  align-items: center;
}
.product-card > .product-open { display: block; border: 0; background: none; padding: 0; min-width: 0; color: inherit; text-decoration: none; }
.product-card > .product-open img { width: 100%; aspect-ratio: 1 / 1.2; object-fit: contain; }
.product-body { padding: 8px; }
.product-title { color: inherit; text-decoration: none; }
.product-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-body p { margin: 4px 0; }
.product-card .product-description { color: var(--ink-soft); }
.product-sku { color: var(--ink-soft); }
.product-body label { display: block; }
.product-body input {
  width: 95px;
  padding: 6px 10px;
  border: 1px solid #999;
  border-radius: 8px;
  min-height: 44px;
  background: white;
  color: var(--ink);
}
.product-body .button { width: 100%; margin-top: 10px; padding: 9px 8px; border-color: transparent; }
.quantity-error { color: var(--error); }

/* ---------- Stock catalog ---------- */
.catalog-page { padding: 52px 0 20px; }
.catalog-header { max-width: 760px; }
.eyebrow { color: var(--action); letter-spacing: 1px; text-transform: uppercase; }
.catalog-header h1 { margin: 8px 0 14px; }
.catalog-header h1 em { color: var(--accent-heading); font-style: normal; }
.catalog-header > p:not(.demo-note) { max-width: 650px; }
.catalog-controls { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, .55fr) auto auto; gap: 12px; align-items: end; margin: 30px 0 14px; padding: 18px; border: 2px solid; border-radius: 14px; background: #fff; }
.catalog-controls label { display: block; margin-bottom: 5px; }
.catalog-controls input, .catalog-controls select { width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid #999; border-radius: 8px; background: white; color: var(--ink); }
.catalog-controls .button { min-height: 46px; white-space: nowrap; }
.catalog-result-summary { color: var(--ink-soft); margin: 15px 0; }
.catalog-grid .product-card { display: block; }
.catalog-grid .product-card > .product-open { width: 100%; }
.catalog-grid .product-card > .product-open img { aspect-ratio: 1 / 1; }
.catalog-grid .product-body { padding: 13px 8px 8px; }
.catalog-grid .product-body .product-description { min-height: 2.8em; }
.catalog-empty { margin: 30px 0 80px; padding: 42px 28px; border: 2px dashed; border-radius: 16px; text-align: center; }
.catalog-empty h2 { margin-bottom: 12px; }
.catalog-empty p { margin-bottom: 20px; }
.catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 28px 0 10px; }
.catalog-pagination ol { display: flex; gap: 8px; padding: 0; margin: 0; list-style: none; }
.catalog-pagination a:not(.button), .catalog-pagination [aria-current="page"] { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 5px 10px; border: 2px solid; border-radius: 50%; }
.catalog-pagination a:not(.button):hover, .catalog-pagination [aria-current="page"] { background: var(--ink); color: var(--paper); }

/* ---------- Product detail ---------- */
.product-detail-page { padding: 34px 0 30px; }
.product-detail { padding-top: 4px; }
.back-link { display: inline-block; margin-bottom: 22px; text-decoration: underline; text-underline-offset: 4px; }
.product-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.product-detail-media { padding: 18px; border: 2px solid; border-radius: 18px; background: white; }
.product-detail-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.product-detail-copy { padding-top: 8px; }
.product-detail-copy h1 { margin: 7px 0 10px; }
.product-detail-sku { color: var(--ink-soft); }
.product-specs { display: grid; gap: 10px; margin: 28px 0; }
.product-specs > div { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.product-specs dd { margin: 0; text-align: right; }
.product-detail-copy > .product-description { margin: 26px 0; }
.product-detail-copy > .product-description h2 { margin-bottom: 10px; }
.product-detail-copy > .product-description p + p { margin-top: 12px; }
.product-detail-quote { display: grid; grid-template-columns: auto 120px; gap: 6px 12px; align-items: center; margin-top: 28px; padding: 20px; border: 2px solid; border-radius: 14px; background: #fff; }
.product-detail-quote input { width: 120px; min-height: 46px; padding: 8px 10px; border: 1px solid #999; border-radius: 8px; background: white; color: var(--ink); }
.product-detail-quote .quantity-error { grid-column: 1 / -1; margin: 0; }
.product-detail-quote .button { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
.product-shipping-note { margin-top: 14px; color: var(--ink-soft); }

/* ---------- Shared information pages ---------- */
.information-page { padding: 52px 0 34px; }
.information-layout { max-width: 900px; margin: 0 auto; }
.information-header { max-width: 800px; }
.information-header h1 { margin: 8px 0 16px; }
.information-lede { max-width: 700px; line-height: 1.45; }
.information-content {
  margin-top: 30px;
  padding: 30px clamp(18px, 4vw, 52px) 36px;
  border: 2px solid;
  border-radius: 18px;
  background: #fff;
  overflow-wrap: anywhere;
}
.information-content h2 { margin: 30px 0 12px; }
.information-content h2:first-child { margin-top: 0; }
.information-content h3 { margin: 24px 0 8px; }
.information-content p { max-width: 70ch; }
.information-content p + p { margin-top: 16px; }
.information-content ul, .information-content ol { max-width: 70ch; margin: 14px 0 0; padding-left: 1.35em; }
.information-content li + li { margin-top: 8px; }
.information-content a { text-decoration: underline; text-underline-offset: 3px; }
.information-content code { padding: 1px 4px; border-radius: 4px; background: #f0ece2; }
.information-placeholder {
  margin: 0;
  padding: 16px 18px;
  border-left: 6px solid var(--action);
  background: #fff0e5;
}
.information-actions {
  margin-top: 28px;
  padding: 26px clamp(18px, 4vw, 38px) 30px;
  border: 2px solid;
  border-radius: 18px;
  background: #fff;
}
.information-actions h2 { margin-bottom: 10px; }
.information-actions p { max-width: 70ch; }
.information-action-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.information-action-links .button { flex: 0 1 auto; }
.information-related {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.information-related ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.information-related a { text-decoration: underline; text-underline-offset: 3px; }
.information-related a[aria-current="page"] { color: var(--action); }

/* ---------- Single post (technical packaging articles, issue #26) ---------- */
.single-post-page { padding: 44px 0 36px; }
.single-post-layout { max-width: 820px; margin: 0 auto; }
.single-post .entry-header { padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.single-post .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; color: var(--ink-soft); }
.single-post .entry-meta a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.single-post .entry-meta a:hover { color: var(--ink); }
.single-post .entry-title { margin: 0; text-wrap: balance; }
.single-post .entry-thumbnail { margin: 24px 0 0; }
.single-post .entry-thumbnail img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 14px; }
.single-post .entry-content { margin-top: 28px; line-height: 1.75; overflow-wrap: anywhere; }
.single-post .entry-content > :first-child { margin-top: 0; }
.single-post .entry-content p { margin: 0 0 1.5rem; line-height: 1.75; }
.single-post .entry-content h2 { margin: 2.5rem 0 1rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line-soft); }
.single-post .entry-content h3 { margin: 1.85rem 0 0.75rem; }
.single-post .entry-content ul, .single-post .entry-content ol { margin: 0 0 1.5rem; padding-left: 1.75rem; }
.single-post .entry-content li { margin-bottom: 0.5rem; line-height: 1.7; }
.single-post .entry-content li > ul, .single-post .entry-content li > ol { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.single-post .entry-content a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.single-post .entry-content a:hover { color: var(--ink); }
.single-post .entry-content blockquote { margin: 1.5rem 0; padding: 14px 18px; border-left: 4px solid var(--action); border-radius: 0 12px 12px 0; background: #fff; }
.single-post .entry-content code { padding: 2px 5px; border-radius: 4px; background: #f0ece2; }
.single-post .entry-content pre { margin: 0 0 1.5rem; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; overflow-x: auto; }
.single-post .entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.75rem 0;
  border-collapse: collapse;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.single-post .entry-content th,
.single-post .entry-content td {
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.single-post .entry-content thead th { background: #f2ede1; color: var(--ink); }
.single-post .entry-content tbody tr:nth-child(even) td { background: #faf6ec; }
.single-post .entry-footer { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.single-post .tags-links { display: flex; flex-wrap: wrap; gap: 8px; }
.single-post .tag-pill { display: inline-block; padding: 5px 12px; border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; }
.single-post .tag-pill:hover { background: var(--ink); color: #fff; }
.single-post .post-navigation { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.single-post .post-navigation .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.single-post .post-navigation .nav-previous,
.single-post .post-navigation .nav-next { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.single-post .post-nav-label { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.single-post .post-navigation a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.single-post .post-navigation a:hover { color: var(--red-text); }

.tag-archive-page { padding: 44px 0 36px; }
.tag-archive-layout { max-width: 820px; margin: 0 auto; }
.tag-archive-header { padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.tag-archive-page .archive-title { margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.tag-description { margin: 12px 0 0; }
.tag-card-list { display: grid; gap: 14px; margin-top: 22px; }
.tag-card { display: grid; gap: 6px; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.tag-card-title { margin: 0; overflow-wrap: anywhere; }
.tag-card-title a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tag-card-title a:hover { color: var(--red-text); }
.tag-card-date { color: var(--ink-soft); }
.tag-card-excerpt { margin: 0; }
.tag-empty { margin: 22px 0 0; }
.tag-pagination { margin-top: 22px; }
.tag-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pagination a,
.tag-pagination span { display: inline-block; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; }

/* Custom examples */
.custom-card { background: white; border: 1px solid #b9b9b5; border-radius: 10px; text-align: center; padding: 12px 16px 20px; }
.custom-card img { width: 100%; aspect-ratio: 1.1; object-fit: contain; }
.custom-card p { margin: 7px 0 13px; }
.custom-card .button { width: 100%; border-color: transparent; }
.hand-note { transform: rotate(-6deg); color: var(--action); padding-right: 40px; }
.custom-inquiry-panel { margin-top: 34px; padding: 28px clamp(18px, 4vw, 52px) 34px; border: 2px solid; border-radius: 18px; background: #fff; scroll-margin-top: 30px; }
.custom-inquiry-panel .section-heading { display: block; margin-bottom: 20px; }
.custom-inquiry-panel .section-heading p { max-width: 690px; margin-top: 10px; }
.custom-inquiry-form { display: grid; gap: 16px; max-width: 760px; }
.custom-inquiry-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
.custom-inquiry-form .inquiry-field input, .custom-inquiry-form .inquiry-field textarea { background: var(--paper); }
.custom-inquiry-form .inquiry-field input[aria-invalid="true"], .custom-inquiry-form .inquiry-field textarea[aria-invalid="true"] { border-color: var(--error); outline: 2px solid #ffb4a6; }
.custom-inquiry-privacy { color: var(--ink-soft); }
.custom-inquiry-no-script { color: var(--error); }
.custom-inquiry-status { padding: 10px 12px; border-radius: 8px; }
.custom-inquiry-status[data-state="error"] { color: var(--error); background: #ffe7e1; }
.custom-inquiry-status[data-state="success"] { color: var(--ink); background: #e5f3dc; }
.custom-inquiry-submit { width: 100%; }
.custom-inquiry-submit:disabled { cursor: wait; opacity: .7; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { border: 2px solid; border-radius: 12px; padding: 22px; display: grid; grid-template-columns: 66px 1fr; gap: 15px; align-items: center; }
.step-number {
  display: grid;
  place-content: center;
  background: var(--action);
  border-radius: 50%;
  color: white;
  width: 62px;
  height: 62px;
}
.steps svg { width: 75px; height: 75px; justify-self: center; }
.steps li > div { grid-column: 1 / -1; text-align: center; }
.steps p { margin-top: 9px; }

/* FAQ */
.faq h2 { margin-bottom: 20px; }
.faq-body { display: grid; grid-template-columns: 24% 1fr; align-items: center; gap: 32px; }
.mascot { width: 100%; height: 260px; object-fit: contain; }
.questions { display: grid; gap: 9px; }
details { border: 2px solid; border-radius: 10px; padding: 12px 16px; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary:after { content: '+'; }
details[open] summary:after { content: '−'; }
details p { margin-top: 9px; }

/* ---------- Footer ---------- */
footer { border-top: 3px solid; margin-top: 36px; padding: 22px 0 28px; }
.footer-inner { display: flex; align-items: center; gap: 38px; }
.footer-tag { text-align: center; margin-top: 3px; }
.footer-content { border-left: 1px solid; padding-left: 35px; flex: 1; }
.footer-content > p { margin-bottom: 12px; }
footer nav { display: flex; flex-wrap: wrap; gap: 22px; }

/* ---------- Utilities, dialog, toast ---------- */
.skip { position: fixed; top: -80px; left: 10px; padding: 15px; background: white; z-index: 30; }
.skip:focus { top: 10px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
dialog {
  width: min(570px, calc(100% - 32px));
  max-height: 85dvh;
  border: 3px solid;
  border-radius: 18px;
  padding: 30px;
  background: var(--paper);
  color: var(--ink);
}
dialog::backdrop { background: #0009; }
dialog h2 { padding-right: 48px; margin-bottom: 18px; }
dialog p { margin: 12px 0; }
.dialog-close, .dialog-close:hover, .dialog-close:focus { position: absolute; right: 10px; top: 8px; border: 0; background: none; color: var(--ink); padding: 0; line-height: 1; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.dialog-product { height: 260px; width: 100%; object-fit: contain; }
.quote-list > p { margin: 12px 0; }
.quote-items { display: grid; gap: 4px; }
.quote-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "thumb details controls";
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #bbb;
  padding: 14px 0;
}
.quote-row-thumbnail {
  grid-area: thumb;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #faf8f5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quote-row-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.quote-thumbnail-placeholder {
  width: 44px;
  height: 44px;
}
.quote-row-details {
  grid-area: details;
  min-width: 0;
}
.quote-row button { border: 1px solid; border-radius: 8px; background: white; padding: 8px; }
.quote-row-controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: auto 110px;
  align-items: center;
  gap: 6px 10px;
  min-width: 150px;
}
.quote-list-quantity { width: 110px; min-height: 44px; padding: 6px 10px; border: 1px solid #999; border-radius: 8px; background: white; color: var(--ink); }
.quote-list-error { grid-column: 1 / -1; margin: 0; }
.quote-sku { color: var(--ink-soft); margin-top: 2px; }
.quote-item-warning, .quote-storage-warning { color: var(--error); }
.quote-remove {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 44px;
  padding: 7px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quote-browse { margin-top: 8px; }
.quote-row input:disabled, .quote-row button:disabled { cursor: not-allowed; opacity: .6; }
.stock-inquiry-form { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--ink); }
.stock-inquiry-form > p { margin: 0; }
.inquiry-notice { color: var(--ink-soft); }
.inquiry-field { display: grid; gap: 5px; }
.inquiry-field input, .inquiry-field textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #999; border-radius: 8px; background: white; color: var(--ink); }
.inquiry-field textarea { min-height: 90px; resize: vertical; }
.inquiry-field-error { margin: 0; }
.inquiry-status { margin: 0; }
.inquiry-status-error, .inquiry-status-success { padding: 10px 12px; border-radius: 8px; }
.inquiry-status-error { color: var(--error); background: #ffe7e1; }
.inquiry-status-success { color: var(--ink); background: #e5f3dc; }
.inquiry-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  border-radius: 12px;
  padding: 12px 20px;
  z-index: 20;
  width: max-content;
  max-width: calc(100% - 32px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}
.toast-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.toast-text {
  line-height: 1.4;
  color: #fff;
}
.toast-action {
  background: var(--action);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.toast-action[hidden] {
  display: none !important;
}
.toast-action:hover {
  background: var(--action-hover);
}
.toast-action:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

.floating-contact {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--action);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sticker-shadow);
  text-decoration: none;
  border: var(--rule) solid var(--ink);
  box-sizing: border-box;
  transform: rotate(-8deg);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.floating-contact:hover {
  background: var(--action-hover);
  transform: rotate(0deg) translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.floating-contact:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.floating-contact[hidden] {
  display: none !important;
}

body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Custom process steps (inside the collapsible custom inquiry panel) */
.custom-steps {
  list-style: none;
  counter-reset: custom-step;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.custom-steps li {
  counter-increment: custom-step;
  position: relative;
  padding: 14px 14px 14px 52px;
  border: var(--rule) solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  line-height: 1.4;
  color: var(--ink-soft);
}
.custom-steps li::before {
  content: counter(custom-step);
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  place-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--action);
  color: white;
}
.custom-steps strong { display: block; color: var(--ink); margin-bottom: 2px; }
@media (max-width: 900px) {
  .custom-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .custom-steps { grid-template-columns: 1fr; gap: 8px; }
}

/* Artwork guidelines details */
.artwork-guidelines {
  margin-bottom: 24px;
  background: #fff;
}
.artwork-guidelines .guidelines-body {
  padding: 14px 18px 18px;
  line-height: 1.5;
  color: var(--ink);
}
.artwork-guidelines .guidelines-body ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}
.artwork-guidelines .guidelines-body li {
  margin-bottom: 8px;
}

/* Contact channels card */
.contact-channels-card {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 28px clamp(18px, 4vw, 38px) 32px;
  margin: 28px 0;
  box-shadow: 4px 4px 0 var(--ink);
}
.contact-channels-card h2 {
  color: var(--ink);
  margin: 0 0 20px 0;
}
.contact-channels-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.contact-channel-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contact-channel-item:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.channel-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--action);
  color: white;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.channel-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.channel-label {
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.channel-value {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
  word-break: break-all;
}
.channel-value:hover {
  color: var(--action);
  text-decoration: underline;
}
.channel-value:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Desktop (>=1101px) ---------- */
@media (min-width: 1101px) {
  .hero-art { margin-right: 18px; }
}

/* ---------- Tablet and up (>=761px) ---------- */
@media (min-width: 761px) {
  .steps li { grid-template-rows: 75px 1fr; align-items: start; }
  .step-number { align-self: center; }
}

/* ---------- <=1100px ---------- */
@media (max-width: 1100px) {
  .header nav { gap: 18px; }
  .brand-mark { width: 50px; height: 50px; }
  .brand-name { width: 180px; }
  .header-inner { gap: 15px; }
  .quote-button { padding: 10px 14px; }
  .hero { min-height: 480px; }
  .hero h1 { -webkit-text-stroke-width: 11px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-art { height: 450px; }
  .hero-actions .button { min-width: 255px; }
  .brand-note { margin-top: 12px; }
  .hero-bag { top: 18%; }
  .bag-two { top: 15%; }
  .bag-three { top: 24%; }
  .product-card { display: block; }
  .product-card > .product-open { width: 100%; }
  .product-card > .product-open img { height: 235px; aspect-ratio: auto; }
  .benefits > div { gap: 12px; }
  .benefits svg { width: 48px; }
  .burst { width: 112px; height: 112px; padding: 10px; }
}

@media (max-width: 768px) {
  #toast {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Mobile (<=760px) ---------- */
@media (max-width: 760px) {
  .preview-bar { letter-spacing: .3px; }
  .header-inner { min-height: 70px; gap: 10px; position: relative; }
  .header .brand-name { display: none; }
  .header .brand-mark { width: 56px; height: 56px; }
  .quote-button { margin-left: auto; min-height: 44px; padding: 7px 13px; gap: 6px; }
  .quote-button svg { width: 23px; height: 27px; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    padding: 7px 9px;
    order: 3;
  }
  .menu-toggle span { height: 3px; width: 26px; background: var(--ink); border-radius: 3px; }
  .header nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;
    background: var(--paper);
    padding: 18px 24px;
    border-bottom: 3px solid;
    box-shadow: 0 10px 15px #0002;
    align-items: stretch;
  }
  .header nav.is-open { display: flex; flex-direction: column; }
  .header nav a, .nav-contact { text-align: left; padding: 10px; }

  .hero { display: block; padding-top: 32px; padding-bottom: 16px; min-height: 0; }
  .hero h1 { letter-spacing: -1px; -webkit-text-stroke-width: 9px; line-height: 1.08; margin: 0 0 24px; max-width: 600px; }
  .hero-rays { width: 36px; top: -24px; left: -7px; }
  .hero-actions { gap: 10px; margin-top: 17px; align-items: flex-start; }
  .hero-actions .button { min-width: 0; padding: 12px 18px; }
  .brand-note { position: absolute; bottom: -60px; left: 0; margin: 0; gap: 8px; }
  .hero-art { height: 350px; margin-top: 10px; margin-left: 5%; width: 95%; }
  .hero-bag { width: 62%; top: 16%; }
  .bag-one { left: -10%; top: 21%; }
  .bag-two { left: 14%; top: 14%; }
  .bag-three { left: 38%; top: 25%; }
  .burst { right: 0; top: 0; width: 84px; height: 84px; padding: 8px; }
  .sparkle { width: 32px; left: 55%; top: -20px; }
  .crown { width: 38px; bottom: 13%; right: -5px; }
  .art-note { left: -5%; bottom: 0; }
  .arrow { width: 60px; left: 22%; bottom: -2%; }
  .paint { width: 93%; height: 100%; top: 7%; left: 2%; }

  .benefits { padding: 13px 0; gap: 0; }
  .benefits > div { display: flex; flex-direction: column; text-align: center; gap: 8px; padding: 0 7px; }
  .benefits svg { width: 36px; height: 36px; }
  .benefits strong { line-height: 1.15; min-height: 32px; }
  .benefits span { line-height: 1.4; }
  .benefits br { display: none; }

  .section { margin-top: 30px; }
  .section-heading { display: block; margin-bottom: 15px; }
  .section-heading > p { max-width: none; margin-top: 12px; }
  .section-heading > p br { display: none; }
  .rays { display: none; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card { padding: 7px; border-radius: 12px; }
  .product-card > .product-open img { height: auto; aspect-ratio: 1 / 1.1; }
  .product-body { padding: 6px; }
  .product-body .button { padding: 9px 4px; gap: 4px; min-height: 44px; }
  .product-body input { width: 100%; min-height: 44px; }

  .catalog-page { padding-top: 32px; }
  .catalog-controls { grid-template-columns: 1fr 1fr; padding: 14px; }
  .catalog-controls .button { width: 100%; padding-left: 10px; padding-right: 10px; }
  .catalog-grid .product-body { padding: 7px 5px 5px; }
  .catalog-grid .product-body .product-description { min-height: 0; }
  .catalog-pagination { gap: 8px; }
  .catalog-pagination .button { padding-left: 12px; padding-right: 12px; }
  .product-detail-page { padding-top: 24px; }
  .product-detail-layout { display: block; }
  .product-detail-copy { padding-top: 28px; }
  .product-detail-quote { grid-template-columns: 1fr; }
  .product-detail-quote input { width: 100%; }
  .product-specs > div { grid-template-columns: 1fr; gap: 3px; }
  .product-specs dd { text-align: left; }

  .information-page { padding-top: 32px; }
  .information-content { margin-top: 22px; padding: 22px 18px 26px; }
  .information-action-links { display: grid; grid-template-columns: 1fr; }
  .information-action-links .button { width: 100%; }
  .information-related { display: block; }
  .information-related ul { margin-top: 10px; gap: 8px 16px; }

  .single-post-page { padding: 24px 0 28px; }
  .single-post-page > .wrap { padding: 0 22px; }
  .single-post .entry-header { padding-bottom: 16px; }
  .single-post .entry-content { margin-top: 20px; }
  .single-post .entry-content h2 { margin: 2rem 0 0.85rem; }
  .single-post .entry-content h3 { margin: 1.5rem 0 0.65rem; }
  .single-post .entry-content ul, .single-post .entry-content ol { padding-left: 1.35rem; }
  .single-post .entry-content th, .single-post .entry-content td { min-width: 135px; padding: 9px 11px; }
  .single-post .post-navigation .nav-links { grid-template-columns: 1fr; gap: 10px; }

  .tag-archive-page { padding: 24px 0 28px; }
  .tag-archive-page > .wrap { padding: 0 22px; }
  .tag-archive-header { padding-bottom: 16px; }
  .tag-card { padding: 14px 16px; }

  .custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .custom-card { padding: 8px 10px 14px; }
  .custom-card:first-child { grid-column: 1 / -1; }
  .custom-card:first-child img { height: 290px; aspect-ratio: auto; }
  .custom-card .button { padding: 10px 8px; gap: 5px; min-height: 52px; }
  .custom-card img { aspect-ratio: 1; }
  .hand-note { display: none; }

  .steps { grid-template-columns: 1fr; gap: 12px; }
  .steps li { display: grid; grid-template-columns: 40px 46px 1fr; gap: 12px; padding: 16px 12px; }
  .step-number { width: 40px; height: 40px; }
  .steps svg { width: 46px; height: 46px; }
  .steps li > div { grid-column: auto; text-align: left; }
  .steps p { margin-top: 5px; }

  .faq-body { display: block; }
  .mascot { display: none; }
  .questions { gap: 10px; }
  details { padding: 12px; }

  .footer-inner { display: block; }
  .footer-inner .brand { justify-content: center; }
  .footer-inner .brand-mark { width: 54px; height: 54px; }
  .footer-inner .brand-name { width: 210px; }
  .footer-content { border-left: 0; border-top: 1px solid var(--line-soft); padding: 18px 0 0; margin-top: 18px; text-align: center; }
  .footer-content nav { justify-content: center; gap: 16px; }
  dialog {
    width: min(570px, calc(100% - 24px));
    padding: 20px 16px;
  }
  #toast {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    padding: 12px 14px;
  }
  .toast-content {
    justify-content: space-between;
    gap: 10px;
  }
  .toast-action {
    min-height: 44px;
    padding: 8px 12px;
  }
  .quote-row {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "thumb details"
      "controls controls";
    gap: 10px 12px;
    align-items: start;
  }
  .quote-row-thumbnail {
    grid-area: thumb;
    width: 56px;
    height: 56px;
  }
  .quote-thumbnail-placeholder {
    width: 38px;
    height: 38px;
  }
  .quote-row-details {
    grid-area: details;
    min-width: 0;
  }
  .quote-row-controls {
    grid-area: controls;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    width: 100%;
    margin-top: 4px;
  }
  .quote-list-quantity { width: 100%; }
  .quote-remove {
    min-height: 44px;
  }
}

/* ---------- Large phones (500–760px) ---------- */
@media (min-width: 500px) and (max-width: 760px) {
  .hero-art { height: 480px; }
}

/* ---------- Narrow phones (<=360px) ---------- */
@media (max-width: 360px) {
  .header-inner { gap: 6px; }
  .header .brand-mark { width: 48px; height: 48px; }
  .quote-button { padding: 6px 10px; gap: 4px; }
  .hero h1 { -webkit-text-stroke-width: 7px; }
  .hero-art { height: 290px; margin-left: 0; width: 100%; }
  .paint { width: 88%; left: 2%; }
  .bag-three { left: 34%; }
  .burst { width: 70px; height: 70px; padding: 6px; } /* original top:-28px was overridden by the later 760px block (top:0) */
  .steps li { grid-template-columns: 35px 1fr; }
  .steps svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

/* ==========================================================================
   Art direction (issue #2, 2026-10-08)
   Brings the site to the mockups in Photos/ (see docs/design-spec.md): bright decorative red
   (--paint), hand-lettered notes (--hand, Caveat Brush), brush-swipe decorations, rebuilt header,
   custom teaser, footer and floating contact. Kept as one block after the T0 rules so the
   change is reviewable; breakpoints mirror the ones above (1100 / 760 / 360).
   Any red that carries white text stays --action.
   ========================================================================== */

/* ---------- Header ---------- */
.header { border-bottom: var(--rule) solid var(--ink); background: var(--paper); }
.header nav a.nav-item { position: relative; padding: 6px 0; }
.header nav a.nav-item:hover { text-decoration: none; }
.header nav a.nav-item::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -3px;
  height: 4px;
  border-radius: 4px;
  background: var(--paint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.header nav a.nav-item:hover::after,
.header nav a.nav-item.is-current::after { transform: scaleX(1); }
.nav-quote, .header nav .nav-icon { display: none; }
.quote-button { border-color: var(--ink); }

/* ---------- Hero ---------- */
.hero h1 { filter: drop-shadow(0 6px 0 var(--title-stroke)); }
.hero h1 { position: relative; width: max-content; max-width: 100%; }
.hero-rays-end { position: absolute; right: -0.55em; bottom: -0.3em; width: 0.55em; transform: rotate(160deg); }
.hero h1 + p { position: relative; }
.brand-note {
  gap: 12px;
  margin: 22px 0 0 26px;
  transform: rotate(-7deg);
}
.brand-note > span {
  padding-bottom: 12px;
  background: url('assets/decorations/underline-swoosh.svg') right bottom / 82% 11px no-repeat;
}
.smile { width: 54px; height: 54px; }
.burst {
  width: 146px;
  height: 146px;
  padding: 18px;
  letter-spacing: .3px;
  transform: rotate(12deg);
}
.sparkle { width: 50px; left: 10%; top: -1%; }
.crown { right: 1%; bottom: 31%; width: 56px; transform: rotate(10deg); }
.art-note { bottom: 1%; left: -2%; }
.art-note-custom { left: auto; right: -2%; bottom: 7%; transform: rotate(-9deg); text-align: left; }
.arrow-custom { left: auto; right: 15%; bottom: -3%; width: 64px; transform: scaleX(-1) rotate(160deg); }
.hero-bag { filter: drop-shadow(6px 14px 10px #18181840); }

/* ---------- Benefits ---------- */
.benefits { border: var(--rule) solid var(--ink); border-radius: 16px; }

/* ---------- Section headings: red marker rays ---------- */
.rays {
  display: inline-block;
  width: 44px;
  height: 44px;
  margin-left: 2px;
  vertical-align: top;
  background: var(--paint);
  -webkit-mask: url('assets/decorations/heading-rays.svg') center / contain no-repeat;
  mask: url('assets/decorations/heading-rays.svg') center / contain no-repeat;
  transform: none;
}

/* ---------- Product cards (homepage featured + /shop/) ---------- */
.product-card { border-radius: 16px; box-shadow: 0 2px 0 #18181810; }
.product-body .button { gap: 8px; }
.add-quote-icon { width: 21px; height: 24px; flex-shrink: 0; color: var(--ink); }
#stock .product-grid .product-body label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#stock .product-grid .product-meta { margin-bottom: 10px; }

/* ---------- Custom teaser ---------- */
.custom-teaser { position: relative; }
.custom-teaser .section-heading { display: block; }
.custom-teaser .section-heading > p { max-width: 620px; margin-top: 10px; }
.custom-sticker {
  position: absolute;
  top: -18px;
  right: 18px;
  display: grid;
  place-content: center;
  width: var(--sticker);         /* size: --sticker, set once per breakpoint in the Issue #7 follow-up block */
  height: var(--sticker);
  padding: 20px;
  background: var(--paint);
  color: var(--ink);
  text-align: center;
  transform: rotate(9deg);
  clip-path: polygon(50% 0, 59% 13%, 73% 4%, 77% 20%, 93% 17%, 90% 34%, 100% 43%, 87% 52%, 98% 67%, 81% 69%, 82% 87%, 64% 83%, 56% 100%, 45% 87%, 30% 97%, 26% 80%, 9% 84%, 14% 64%, 0 57%, 13% 44%, 1% 30%, 20% 28%, 19% 10%, 37% 17%);
}
.custom-grid { gap: 18px; }
.custom-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 18px 20px 24px;
  box-shadow: 0 2px 0 #18181810;
}
.custom-art { position: relative; isolation: isolate; width: 100%; }
.custom-art > img:not(.custom-sparkle) {
  position: relative;
  width: 86%;
  margin: 0 auto;
  aspect-ratio: 1.1;
  object-fit: contain;
  filter: drop-shadow(5px 10px 8px #18181833);
}
.custom-paint {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 20%;
  height: 62%;
  z-index: -1;
  background: var(--paint);
  -webkit-mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
  mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
  transform: rotate(-14deg);
}
.custom-art .custom-sparkle { position: absolute; width: 30px; height: auto; aspect-ratio: 1; left: 4%; top: 12%; }
.custom-art::after {
  content: '';
  position: absolute;
  right: 5%;
  bottom: 20%;
  width: 24px;
  height: 24px;
  background: url('assets/decorations/sparkle-ink.svg') center / contain no-repeat;
}
.custom-card h3 { margin-top: 8px; }
.custom-card p { color: var(--ink); }
.custom-card .button { width: auto; min-width: 230px; padding: 10px 24px; margin-top: auto; }
.custom-teaser-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 18px;
}
.custom-teaser-actions p { color: var(--ink-soft); }
.custom-inquiry-toggle[hidden] { display: none; }
.custom-inquiry-toggle[aria-expanded="true"] .when-collapsed,
.custom-inquiry-toggle[aria-expanded="false"] .when-expanded { display: none; }
.custom-inquiry-panel { margin-top: 20px; border-width: var(--rule); }

/* ---------- How it works ---------- */
.steps li { border-width: var(--rule); border-radius: 16px; }
.hand-note {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 14px 30px 14px 26px;
  margin-right: 20px;
  color: var(--ink);
  text-align: center;
  transform: rotate(-5deg);
}
.hand-note::before {
  content: '';
  position: absolute;
  inset: -4px -10px;
  z-index: -1;
  background: var(--paint);
  -webkit-mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
  mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
}

/* ---------- FAQ: chevrons like the mockups ---------- */
details { border-width: var(--rule); border-radius: 12px; background: transparent; }
summary:after,
details[open] summary:after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin: 0 6px 4px 0;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
details[open] summary:after { margin-bottom: -4px; transform: rotate(-135deg); }

/* ---------- Footer ---------- */
footer { border-top: 3px solid var(--ink); margin-top: 48px; padding: 30px 0 34px; }
.footer-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.footer-brand { padding-right: 40px; border-right: var(--rule) solid var(--ink); }
.footer-tag {
  width: max-content;
  margin: 8px 0 0 54px;
  padding-bottom: 10px;
  text-align: left;
  background: url('assets/decorations/underline-swoosh.svg') left bottom / 100% 9px no-repeat;
  transform: rotate(-3deg);
}
.footer-content { border-left: 0; padding-left: 0; }
footer nav { gap: 10px 26px; }
.footer-contact { display: grid; gap: 12px; justify-items: start; }
.footer-email { display: inline-flex; align-items: center; gap: 10px; }
.footer-email svg { width: 24px; height: 24px; }
.footer-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--rule) solid var(--ink);
  border-radius: 50%;
  background: #fff;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover { background: var(--ink); color: var(--paper); transform: rotate(-8deg); text-decoration: none; }
.footer-social svg { width: 21px; height: 21px; }
.footer-note { display: none; }

/* ---------- Floating contact ---------- */
.floating-contact svg { width: 24px; height: 24px; }

/* ---------- <=1100px ---------- */
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: auto minmax(0, 1fr); }
  .footer-contact { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 20px; }
  .burst { width: 124px; height: 124px; padding: 14px; }
}

/* ---------- Small tablets (761-900px): keep the header on one line ---------- */
@media (min-width: 761px) and (max-width: 900px) {
  .header .brand-name { width: 130px; }
  .header nav { gap: 14px; }
  .header nav a { white-space: nowrap; }
  .quote-button { padding: 8px 12px; }
}

/* ---------- Mobile (<=760px) ---------- */
@media (max-width: 760px) {
  /* Header: full logo, menu, quote pill (mockup order) */
  .header .brand-name { display: block; width: 104px; }
  .header .brand-mark { width: 38px; height: 38px; }
  .brand { gap: 3px; }
  .menu-toggle { order: 2; margin-left: auto; }
  .quote-button { order: 3; margin-left: 0; padding: 6px 12px; gap: 5px; }
  .quote-button svg { width: 19px; height: 22px; }
  .menu-toggle span { transition: transform .18s ease, opacity .18s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Navigation sheet (Eight state components: Navigation Open) */
  .header nav { gap: 0; padding: 4px 18px 10px; border-bottom: var(--rule) solid var(--ink); box-shadow: 0 14px 20px #0000001f; }
  .header nav a.nav-item,
  .nav-quote {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 6px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: var(--ink);
    text-align: left;
  }
  .nav-quote { border-bottom: 0; }
  .header nav a.nav-item::after { display: none; }
  .header nav .nav-icon { display: block; order: -1; flex-shrink: 0; width: 24px; height: 24px; }
  .header nav a.nav-item.is-current { color: var(--action); }
  .nav-quote svg { width: 24px; height: 27px; color: var(--ink); flex-shrink: 0; }

  /* Hero */
  .hero-copy { padding-top: 4px; }
  .brand-note { top: -18px; right: -6px; bottom: auto; left: auto; flex-direction: row-reverse; margin: 0; gap: 6px; transform: rotate(-9deg); }
  .brand-note > span { padding-bottom: 9px; background-size: 90% 8px; }
  .hero h1 { margin-top: 44px; }
  .hero-art { height: 390px; }
  .hero-bag { width: 66%; }
  .bag-one { left: -12%; }
  .bag-two { left: 13%; }
  .bag-three { left: 38%; }
  .smile { width: 38px; height: 38px; }
  .burst { width: 96px; height: 96px; padding: 10px; }
  .sparkle { width: 30px; left: 30%; top: 2%; }
  .art-note-custom { display: none; }
  .arrow-custom { display: none; }
  .crown { bottom: 16%; }
  .paint { left: -10%; width: 120%; top: 20%; height: 70%; }

  /* Headings: keep the rays on mobile too (mockup) */
  .rays { display: inline-block; width: 26px; height: 26px; }
  .section-heading h2, .faq h2 { position: relative; }
  .section-heading h2 .rays, .faq h2 .rays { position: absolute; margin: -8px 0 0 2px; }

  /* Featured cards (2-up like the mobile mockup) */
  #stock .product-grid .product-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 42% 58%; align-items: center; }
  #stock .product-grid .product-card:last-child:nth-child(odd) > .product-open img { aspect-ratio: 1; }

  /* Custom teaser */
  .custom-sticker { top: -12px; right: 0; padding: 12px; }
  .custom-card { padding: 10px 10px 14px; }
  .custom-card:first-child img { height: auto; }
  .custom-art > img:not(.custom-sparkle) { width: 92%; aspect-ratio: 1; }
  .custom-card:first-child .custom-art > img:not(.custom-sparkle) { height: 260px; aspect-ratio: auto; }
  .custom-card .button { min-width: 0; width: 100%; padding: 10px 8px; }
  .custom-art .custom-sparkle { width: 22px; }
  .custom-art::after { width: 18px; height: 18px; }
  .custom-teaser-actions { display: grid; }
  .custom-teaser-actions .button { width: 100%; }

  /* How it works: show the hand note on a brush swipe, as in the mockup */
  #how .section-heading { position: relative; }
  .hand-note { display: block; position: absolute; right: 0; top: -6px; padding: 8px 14px; margin: 0; }

  /* Footer: brand + links, then contact row */
  footer { padding-top: 24px; }
  .footer-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 16px; align-items: start; }
  .footer-inner .brand { justify-content: flex-start; }
  .footer-inner .brand-mark { width: 40px; height: 40px; }
  .footer-inner .brand-name { width: 120px; }
  .footer-brand { padding-right: 12px; border-right: 0; }
  .footer-tag { margin: 8px 0 0 4px; }
  .footer-content { border-top: 0; border-left: 1px solid var(--line-soft); margin-top: 0; padding: 0 0 0 16px; text-align: left; }
  .footer-content > p { display: none; }
  .footer-content nav { flex-direction: column; justify-content: flex-start; gap: 10px; }
  .footer-contact { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: 1fr auto; align-items: center; gap: 14px 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
  .footer-email { grid-column: 1 / -1; }
  .footer-social { gap: 8px; }
  .footer-social a { width: 42px; height: 42px; }
  .footer-note { display: flex; align-items: center; gap: 10px; transform: rotate(-4deg); }
  .footer-note img { width: 40px; height: 40px; }
}

/* ---------- Narrow phones (<=360px) ---------- */
@media (max-width: 360px) {
  .header .brand-name { display: none; }
  .section-heading h2 .rays, .faq h2 .rays { position: static; width: 20px; height: 20px; margin: 0; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-content { border-left: 0; padding-left: 0; }
  .footer-contact { grid-template-columns: 1fr; }
  .footer-social { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .header nav a.nav-item::after, .menu-toggle span, .footer-social a, summary:after { transition: none; }
}

/* ==========================================================================
   Revision 2 (owner review of PR #4, 2026-10-08): impact first.
   Bigger type scale, tighter rhythm, curved SVG display headlines (mylarlabs_art_heading()),
   bright red buttons with large bold white labels, single ML mark in a balanced header.
   ========================================================================== */

/* ---------- Buttons: bright red, large bold white text ----------
   White on #fc432c is 3.51:1, so it is only allowed as WCAG "large text": every primary label is
   at least --action-text (19px) bold. !important keeps older, more specific size rules
   (product cards, hero, toast) from ever shrinking a red button label below that. */
.button.primary, .toast-action {
  background: var(--action);
  color: #fff;
  border-color: var(--ink);
}
.button.primary:hover, .toast-action:hover { background: var(--action-hover); }
.button.primary svg, .quote-button svg, .add-quote-icon { color: currentColor; }
.custom-steps li::before { color: var(--ink); background: var(--paint); }   /* small numerals: ink on red (5.05:1) */
.eyebrow, .information-related a[aria-current="page"], .channel-value:hover { color: var(--red-text); }

/* ---------- Header: single ML mark, centred navigation, Quote List on the right ---------- */
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 84px;
}
.brand { justify-self: start; gap: 0; }
/* The mark's artwork fills 84% x 54% of its square file; negative margins trim the empty band so the
   visible "ML" is ~64px tall, i.e. most of the header height. */
.header .brand-mark { width: 118px; height: 118px; margin: -27px -10px; max-width: none; }
.header nav { justify-self: center; gap: 36px; }
.quote-button { justify-self: end; min-height: 54px; padding: 10px 24px; gap: 10px; }
.quote-button svg { width: 24px; height: 28px; }

/* ---------- Art headings (curved SVG lettering) ---------- */
.art-heading { --ah-size: clamp(40px, 5.6vw, 82px); margin: 0; line-height: 0; letter-spacing: 0; }
.art-heading-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.art-heading-art {
  display: block;
  width: calc(var(--ah-vbw) * var(--ah-size) / 100);
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.art-heading-art--stacked { display: none; }
.ah-face, .ah-shadow { paint-order: stroke fill; stroke-linejoin: round; stroke-linecap: round; }
.art-heading-art--solid .ah-face { stroke-width: 7; }
.art-heading-art--solid .ah-ink { fill: var(--ink); stroke: var(--ink); }
.art-heading-art--solid .ah-paint { fill: var(--paint); stroke: var(--paint); }
.art-heading-art--solid .ah-paper { fill: #fff; stroke: var(--title-stroke); }
.art-heading-art--outline .ah-face tspan { stroke: var(--title-stroke); stroke-width: 20; }
.art-heading-art--outline .ah-paper { fill: #fff; }
.art-heading-art--outline .ah-paint { fill: var(--paint); }
.art-heading-art--outline .ah-ink { fill: var(--ink); }
.ah-shadow { fill: var(--title-stroke); stroke: var(--title-stroke); stroke-width: 20; }
.ah-rays path { fill: none; stroke-linecap: round; }
.ah-rays--paint path { stroke: var(--paint); stroke-width: 7.5; }
.ah-rays--ink path { stroke: var(--ink); stroke-width: 6.5; }

/* ---------- Hero ---------- */
.hero { grid-template-columns: 47% 53%; min-height: 0; padding-top: 14px; padding-bottom: 6px; }
.hero-copy { margin-right: -56px; }
.hero .art-heading { --ah-size: 104px; width: auto; -webkit-text-stroke: 0; letter-spacing: -0.01em; transform: none; margin: -10px 0 -26px -20px; filter: none; } /* Revision 3: arc + tilt live in the SVG (bend/peak/tilt) */
.hero .art-heading-art { width: calc(var(--ah-vbw) * var(--ah-size) / 100); }
.hero-copy > p { line-height: 1.35; }
.hero-actions { gap: 14px; margin-top: 22px; }
.hero-actions .button { min-height: 60px; padding: 14px 28px; }
.brand-note { margin-top: 18px; }
.hero-art { height: 560px; }
.hero-bag { width: 62%; top: 8%; }
.bag-two { top: 6%; }
.bag-three { top: 15%; }
.burst { width: 160px; height: 160px; }

/* ---------- Benefits ---------- */
.benefits { padding: 18px 0; margin-top: 8px; }

/* ---------- Sections ---------- */
.section { margin-top: 44px; }
.section-heading { margin-bottom: 16px; align-items: center; }

/* Featured stock */
#stock .product-grid { gap: 18px; }
.product-body .button { min-height: 52px; }
.stock-lead {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 8px 30px;
  margin: 34px auto 6px;
  text-align: center;
}
.stock-lead-text > span { display: block; }
.stock-lead-text > .stock-lead-title { margin-top: 6px; }
.stock-lead-arrow { width: 118px; height: auto; transform: rotate(8deg); }
.button.primary.stock-lead-button { min-height: 66px; padding: 16px 34px; box-shadow: var(--sticker-shadow); }

/* Custom teaser */
.custom-teaser .section-heading { display: flex; justify-content: flex-start; gap: 34px; }
.hand-note-plain { padding: 0; margin: 0; color: var(--ink); transform: rotate(-6deg); text-align: left; }
.hand-note-plain::before { display: none; }
.custom-sticker { top: -26px; }
.custom-card { padding: 14px 18px 20px; }
.custom-art > img:not(.custom-sparkle) { width: 78%; aspect-ratio: 1.25; }
.custom-card h3 { margin-top: 4px; }
.custom-card p { margin: 4px 0 14px; }
.custom-card .button { min-height: 54px; }
.custom-teaser-actions { justify-content: center; gap: 28px; margin-top: 30px; }
.custom-teaser-actions:has(.custom-inquiry-toggle[hidden]) { display: none; }
.button.primary.custom-inquiry-toggle { min-height: 76px; padding: 18px 50px; gap: 14px; box-shadow: var(--sticker-shadow); }
.custom-inquiry-toggle .toggle-icon { width: 28px; height: 32px; flex-shrink: 0; }
.quote-note {
  position: relative;
  padding-right: 92px;
  text-align: right;
  transform: rotate(-7deg);
}
.quote-note::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 84px;
  height: 50px;
  background: url('assets/decorations/lead-arrow.svg') center / contain no-repeat;
  transform: translateY(-30%) rotate(12deg);
}
.custom-inquiry-disclaimer { margin: -4px 0 0; color: var(--ink-soft); text-align: center; }

/* How it works */
.steps { gap: 18px; }
.steps li { padding: 20px 22px; }
#how .section-heading { justify-content: flex-start; gap: 40px; }

/* FAQ */
.faq .art-heading { margin-bottom: 18px; }

/* ---------- <=1100px ---------- */
@media (max-width: 1100px) {
  .header .brand-mark { width: 100px; height: 100px; margin: -23px -8px; }
  .header nav { gap: 20px; }
  .quote-button { padding: 8px 16px; }
  .hero { grid-template-columns: 50% 50%; }
  .hero-copy { margin-right: -24px; }
  .hero-art { height: 470px; }
  .custom-teaser .section-heading { flex-wrap: wrap; gap: 8px 24px; }
}

/* ---------- Small tablets (761-900px) ---------- */
@media (min-width: 761px) and (max-width: 900px) {
  .benefits > div { gap: 10px; padding: 0 12px; }
  .benefits br { display: none; }
  .header-inner { gap: 12px; }
  .header nav { gap: 12px; }
  .quote-button { padding: 8px 12px; }
  .quote-button svg { display: none; }
  .stock-lead { grid-template-columns: auto auto; }
  .stock-lead-arrow { display: none; }
}

/* ---------- Mobile (<=760px) ---------- */
@media (max-width: 760px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 66px; gap: 8px; }
  .header .brand-mark { width: 84px; height: 84px; margin: -19px -7px; }
  .header .brand-name { display: none; }
  .header nav { justify-self: stretch; gap: 0; } /* full-width sheet, rows without gaps (desktop centres the nav in its grid column) */
  .menu-toggle { grid-column: 3; grid-row: 1; justify-self: end; width: 44px; margin: 0 8px 0 0; padding: 7px 9px; }
  .quote-button { grid-column: 4; grid-row: 1; min-height: 46px; padding: 6px 14px; gap: 6px; }
  .quote-button svg { width: 18px; height: 22px; }

  .art-heading { --ah-size: 46px; }
  .art-heading.has-stacked .art-heading-art--wide { display: none; }
  .art-heading.has-stacked .art-heading-art--stacked { display: block; }

  .hero { padding-top: 6px; padding-bottom: 0; }
  .hero-copy { margin-right: 0; }
  .hero .art-heading { --ah-size: 64px; margin: 36px -12px -6px -14px; }
  .hero .art-heading-art { max-width: calc(100% + 26px); }
  .brand-note { top: -2px; right: 0; }
  .hero-copy > p { line-height: 1.35; }
  .hero-actions { margin-top: 14px; gap: 10px; }
  .hero-actions .button { min-height: 52px; padding: 10px 20px; }
  .hero-art { height: 330px; margin-top: -40px; margin-left: 4%; width: 96%; }
  .hero-bag { width: 60%; top: 18%; }
  .bag-one { left: -4%; top: 22%; }
  .bag-two { left: 19%; top: 15%; }
  .bag-three { left: 41%; top: 25%; }
  .burst { width: 98px; height: 98px; top: -6px; }
  .sparkle { left: 40%; top: 0; }
  .art-note { left: -4%; bottom: 2%; }
  .paint { left: -6%; width: 116%; top: 22%; height: 72%; }

  .benefits { margin-top: 2px; padding: 12px 0; }
  .benefits strong { min-height: 0; }

  .section { margin-top: 30px; }
  .section-heading { margin-bottom: 12px; }

  /* Featured: compact 2-up; labels stay >= 19px bold, so the clipboard icon gives way */
  #stock .product-grid { gap: 10px; }
  .product-body .button { min-height: 48px; padding: 8px 6px; }
  .product-grid .add-quote-icon { display: none; }
  #stock .product-grid .product-card { padding: 6px 6px 8px; }
  #stock .product-grid .product-card > .product-open img { height: 118px; aspect-ratio: auto; }
  #stock .product-grid .product-body { padding: 4px 4px 0; }
  #stock .product-grid .product-meta { margin-bottom: 6px; }
  #stock .product-grid .product-body .button { margin-top: 6px; }
  .stock-lead { grid-template-columns: 1fr; gap: 4px; margin-top: 22px; }
  .stock-lead-arrow { width: 74px; justify-self: center; transform: rotate(80deg); margin: 2px 0 -2px 60px; }
  .stock-lead-button { justify-self: center; min-height: 56px; padding: 12px 26px; }

  /* Custom teaser: compact rows (image | title + CTA) */
  .custom-teaser .section-heading { display: block; }
  .custom-teaser .hand-note-plain { display: none; }
  .custom-sticker { top: -14px; padding: 12px; }
  .custom-grid { grid-template-columns: 1fr; gap: 10px; }
  .custom-card,
  .custom-card:first-child { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; padding: 6px 12px 12px 6px; text-align: left; }
  .custom-art { grid-row: 1; grid-column: 1; }
  .custom-art > img:not(.custom-sparkle),
  .custom-card:first-child .custom-art > img:not(.custom-sparkle) { width: 100%; height: auto; aspect-ratio: 1; }
  .custom-card h3 { grid-row: 1; grid-column: 2; margin: 0; }
  .custom-card p { display: none; }
  .custom-card .button,
  .custom-card:first-child .button { grid-row: 2; grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 50px; padding: 8px 12px; line-height: 1.15; margin: 0 0 0 6px; }
  .custom-art .custom-sparkle { width: 20px; }
  .custom-teaser-actions { display: grid; justify-items: center; gap: 10px; margin-top: 22px; }
  .button.primary.custom-inquiry-toggle { width: 100%; min-height: 66px; padding: 14px 18px; }
  .quote-note { padding-right: 70px; }
  .quote-note::after { width: 62px; height: 38px; transform: translateY(-10%) rotate(40deg); }

  .steps { gap: 10px; }
  .steps li { padding: 12px; }
  #how { margin-top: 50px; }
  #how .section-heading { display: block; position: relative; }
  #how .hand-note { position: absolute; right: 8px; top: -34px; padding: 6px 12px; margin: 0; }

}

/* ---------- Narrow phones (<=360px) ---------- */
@media (max-width: 360px) {
  .header .brand-mark { width: 72px; height: 72px; margin: -16px -6px; }
  .quote-button { padding: 6px 10px; }
  .quote-button svg { display: none; }
  .header-inner { gap: 8px; }
  .hero .art-heading { margin-top: 34px; }
  .hero-art { margin-top: -6px; }
  .burst { top: 0; width: 84px; height: 84px; padding: 8px; }
  #stock .product-grid { grid-template-columns: 1fr; }
  #stock .product-grid .product-card { display: grid; grid-template-columns: 40% 60%; align-items: center; }
  .art-heading { --ah-size: 40px; }
}

/* ==========================================================================
   Revision 3 (owner review of PR #4 revision 2): a fuller, punchier footer.
   The body no longer reserves 72px under the footer for the floating contact
   button; home.js tucks that button away while the footer is on screen
   (the footer carries the same Contact link and the email), so the site ends
   on the footer instead of a blank strip.
   ========================================================================== */
body { padding-bottom: 0; }
.floating-contact.is-tucked { opacity: 0; visibility: hidden; transform: rotate(-8deg) translateY(12px); }

footer { margin-top: 40px; padding: 26px 0 28px; }
.footer-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px 44px; }
.footer-brand { padding-right: 44px; }
/* Logo lockup: the two SVGs carry transparent margins (mark: 8% sides / 23% top+bottom,
   wordmark: 9% sides / 10% top+bottom), trimmed with negative margins so ML + Mylarlabs read as one. */
.footer-inner .brand { gap: 0; }
.footer-inner .brand-mark { width: 116px; height: 116px; margin: -27px 0 -27px -10px; }
.footer-inner .brand-name { width: 316px; margin-left: -20px; }
.footer-tag { margin: 4px 0 0 64px; padding-bottom: 12px; background-size: 100% 11px; }
.footer-content > p { margin-bottom: 12px; }
footer nav { gap: 10px 28px; }
.footer-contact { gap: 16px; }
.footer-email { gap: 12px; }
.footer-email svg { width: 30px; height: 30px; }
.footer-social { gap: 12px; }
.footer-social a { width: 56px; height: 56px; box-shadow: 3px 3px 0 var(--ink); }
.footer-social svg { width: 27px; height: 27px; }

@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: auto minmax(0, 1fr); }
  .footer-inner .brand-mark { width: 100px; height: 100px; margin: -23px 0 -23px -8px; }
  .footer-inner .brand-name { width: 272px; margin-left: -25px; }
  .footer-tag { margin-left: 54px; }
  .footer-contact { grid-auto-flow: column; justify-content: start; align-items: center; gap: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
}

/* Phones: brand row, a two-column link grid, then email / socials / note. */
@media (max-width: 760px) {
  footer { margin-top: 32px; padding: 22px 0 22px; }
  .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; }
  .footer-brand { grid-column: 1 / -1; padding: 0; border: 0; }
  .footer-inner .brand-mark { width: 92px; height: 92px; margin: -21px 0 -21px -8px; }
  .footer-inner .brand-name { width: 252px; margin-left: -23px; }
  .footer-tag { margin: 6px 0 0 48px; padding-bottom: 11px; }
  .footer-content { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--line-soft); margin-top: 16px; padding: 14px 0 0; }
  .footer-content nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
  .footer-contact { display: contents; }
  .footer-email { grid-column: 1 / -1; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .footer-email svg { width: 28px; height: 28px; }
  .footer-social { grid-column: 1; margin-top: 14px; gap: 10px; }
  .footer-social a { width: 50px; height: 50px; }
  .footer-social svg { width: 24px; height: 24px; }
  .footer-note { grid-column: 2; margin: 14px 0 0; display: flex; align-items: center; gap: 8px; transform: rotate(-4deg); }
  .footer-note img { width: 46px; height: 46px; }
}

@media (max-width: 360px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-inner .brand-mark { width: 80px; height: 80px; margin: -18px 0 -18px -7px; }
  .footer-inner .brand-name { width: 218px; margin-left: -20px; }
  .footer-tag { margin-left: 40px; }
  .footer-content nav { gap: 8px 10px; }
  .footer-social { gap: 8px; }
  .footer-social a { width: 46px; height: 46px; }
  .footer-note img { width: 38px; height: 38px; }
}

@media (max-width: 340px) {
  .footer-social a { width: 44px; height: 44px; }
  .footer-note img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-contact.is-tucked { transform: rotate(-8deg); }
}

/* ==========================================================================
   Issue #5: Stock Designs (/shop/) visual restoration, plus the shared product
   card (homepage featured + catalog): black border, −/+ quantity stepper.
   ========================================================================== */

/* ---------- Shared product card ---------- */
.product-card { border: 2px solid var(--ink); border-radius: 14px; box-shadow: none; background: #fff; }
.product-card[hidden] { display: none !important; }
.product-body .product-meta { display: grid; gap: 2px; }
.product-card .quantity-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.quantity-stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  width: 100%;
  max-width: 220px;
  height: 46px;
  margin: 10px 0 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.quantity-stepper:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.quantity-step {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.quantity-step:first-child { border-right: 2px solid var(--ink); }
.quantity-step:last-child { border-left: 2px solid var(--ink); }
.quantity-step:hover { background: var(--ink); color: #fff; }
.quantity-step:focus-visible { outline: none; background: var(--ink); color: #fff; }
.product-body .quantity-stepper input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.quantity-stepper input::-webkit-inner-spin-button,
.quantity-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-stepper input:focus { outline: none; }
.quantity-stepper:has(input[aria-invalid="true"]) { border-color: var(--error); }

/* ---------- Catalog page ---------- */
.catalog-page { padding: 14px 0 0; }
.catalog-breadcrumb { display: flex; gap: 8px; color: var(--ink-soft); margin-bottom: 10px; }
.catalog-breadcrumb a { color: var(--ink); }
.catalog-breadcrumb [aria-current] { color: var(--ink); }
.catalog-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; max-width: none; }
.catalog-header .art-heading { --ah-size: clamp(54px, 6.4vw, 92px); margin: 0 0 6px -6px; }
/* Lowercase Lilita clogs under the 7-unit chunky stroke (the i-dot merges). Issue #5 used 2.5, which read
   lighter than the hero; issue #7 settles on 4: heavier, with the i-dot and the e counter still open. */
.catalog-page .art-heading-art--solid .ah-face { stroke-width: 4; }
.catalog-intro { line-height: 1.4; margin: 0; }
.catalog-intro span { display: block; }
.catalog-header .demo-note { margin: 8px 0 0; color: var(--muted); }

/* Header stickers (mockup): hand notes around a red brush swipe with the smiley. */
.catalog-stickers { position: relative; width: 430px; height: 200px; margin-right: 8px; }
.catalog-sticker-note { position: absolute; color: var(--ink); text-align: center; }
.catalog-sticker-left { left: 0; top: 20px; transform: rotate(-12deg); }
.catalog-sticker-right { right: 0; top: 0; transform: rotate(-8deg); }
.catalog-sticker-paint { position: absolute; left: 150px; top: 18px; width: 150px; height: 160px; display: grid; place-items: center; }
.catalog-sticker-paint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paint);
  -webkit-mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
  mask: url('assets/decorations/brush-swipe.svg') center / 100% 100% no-repeat;
  transform: rotate(-58deg) scale(1.5, 1.25);
}
.catalog-sticker-paint img { position: relative; width: 84px; height: 84px; background: #fff; border-radius: 50%; }
.catalog-sticker-arrow { position: absolute; right: 18px; top: 108px; width: 96px; height: auto; transform: scaleX(-1) rotate(-14deg); }

/* Controls: pill search, style buttons, live count */
.catalog-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 22px 0 18px; padding: 0; border: 0; border-radius: 0; background: none; }
.catalog-search { position: relative; flex: 0 1 380px; min-width: 0; }
.catalog-search-label, .catalog-search-submit {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.catalog-search-submit:focus { left: auto; right: 6px; top: 6px; width: auto; height: auto; padding: 8px 14px; clip: auto; clip-path: none; border-radius: 999px; background: var(--ink); color: #fff; }
.catalog-search-icon { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.catalog-controls .catalog-search input {
  width: 100%;
  min-height: 50px;
  padding: 8px 18px 8px 48px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}
.catalog-controls .catalog-search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.catalog-filter {
  display: inline-grid;
  place-items: center;
  min-height: 46px;
  padding: 6px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink); /* >= 18.66px bold: the active button is white on #fc432c (3.51:1, AA large text) */
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.catalog-filter:hover { background: var(--paper); text-decoration: none; box-shadow: 2px 2px 0 var(--ink); }
.catalog-filter[aria-current="true"] { background: var(--action); color: #fff; }
.catalog-filter:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.catalog-controls .catalog-result-summary { margin: 0 0 0 auto; color: var(--ink); }

/* Grid: auto-fill with a ~280px minimum card width, implemented with container queries so an
   incomplete last row can be centred (flex), which CSS grid auto-fill cannot do. Column counts
   follow floor((width + gap) / (280px + gap)) for the 24px gap. */
.catalog-grid {
  --gap: 24px;
  container: catalog-grid / inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.catalog-grid[hidden] { display: none; }
.catalog-grid > .product-card {
  --cols: 1;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}
@container catalog-grid (min-width: 584px) { .catalog-grid > .product-card { --cols: 2; } }
@container catalog-grid (min-width: 888px) { .catalog-grid > .product-card { --cols: 3; } }
@container catalog-grid (min-width: 1192px) { .catalog-grid > .product-card { --cols: 4; } }
@container catalog-grid (min-width: 1496px) { .catalog-grid > .product-card { --cols: 5; } }
.catalog-grid .product-card > .product-open img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: contain; }
.catalog-grid .product-body { display: flex; flex-direction: column; flex: 1; padding: 8px 0 0; }
.catalog-grid .product-body .product-meta { margin: 4px 0 0; }
.catalog-grid .quantity-stepper { align-self: center; margin-top: auto; }
.catalog-grid .product-meta + .quantity-label + .quantity-stepper { margin-top: 12px; }
.catalog-grid .product-body .button { margin-top: 12px; }

.catalog-empty { margin: 10px 0 30px; }

/* "Have something else in mind?" band */
.catalog-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin: 40px 0 0;
  padding: 26px 0 4px;
  border-top: 2px solid var(--ink);
}
.catalog-cta .art-heading { --ah-size: clamp(40px, 4.4vw, 62px); }
.catalog-cta p { margin: 0; padding-left: 32px; border-left: var(--rule) solid var(--ink); line-height: 1.4; max-width: 460px; }
.catalog-cta .button.primary.catalog-cta-button { min-height: 58px; padding: 10px 28px; gap: 12px; box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; }
.catalog-page + footer { margin-top: 32px; }

/* Homepage featured cards share the component: keep their horizontal layout. */
#stock .product-grid .quantity-stepper { max-width: 200px; }

/* Homepage featured cards are horizontal above 1100px; just above that the body column is too narrow
   for icon + 19px label (the label wrapped at 1101–1130px on main too), so the icon gives way. */
@media (min-width: 1101px) and (max-width: 1180px) {
  #stock .product-grid .add-quote-icon { display: none; }
}

@media (max-width: 1100px) {
  .catalog-stickers { width: 330px; height: 170px; transform: scale(.85); transform-origin: right center; margin-right: 0; }
  .catalog-sticker-paint { left: 92px; }
  .catalog-cta { grid-template-columns: auto minmax(0, 1fr); }
  .catalog-cta .catalog-cta-button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  .catalog-page { padding-top: 10px; }
  .catalog-breadcrumb { margin-bottom: 4px; }
  .catalog-header { display: block; position: relative; }
  .catalog-header .art-heading { --ah-size: 46px; margin: 0 0 6px -4px; }
  .catalog-stickers { display: none; }
  .catalog-controls { gap: 10px; margin: 16px 0 14px; }
  .catalog-search { flex: 1 1 100%; }
  .catalog-controls .catalog-search input { min-height: 48px; }
  .catalog-filters { gap: 6px; flex: 1 1 100%; flex-wrap: nowrap; }
  .catalog-filter { flex: 1 1 auto; min-height: 44px; padding: 6px 8px; }
  /* The mockup shows no count on phones: keep the live status for assistive tech only. */
  .catalog-controls .catalog-result-summary {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Two columns on phones (cards narrower than the 280px desktop minimum), one at <=360px. */
  .catalog-grid { --gap: 12px; }
  .catalog-grid > .product-card { --cols: 2; padding: 8px 8px 10px; border-radius: 12px; }
  .catalog-grid .quantity-stepper { grid-template-columns: 36px minmax(0, 1fr) 36px; min-height: 44px; max-width: none; }
  .catalog-grid .product-body .button { min-height: 48px; padding: 8px 6px; margin-top: 8px; }
  .catalog-grid .product-meta + .quantity-label + .quantity-stepper { margin-top: 8px; }

  .catalog-cta { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; padding-top: 18px; }
  .catalog-cta .art-heading { --ah-size: 44px; }
  .catalog-cta p { padding-left: 0; border-left: 0; max-width: none; }
  .catalog-cta .catalog-cta-button { grid-column: auto; justify-self: stretch; }
  #stock .product-grid .quantity-stepper { grid-template-columns: 36px minmax(0, 1fr) 36px; min-height: 44px; max-width: none; }
}

@media (max-width: 360px) {
  .catalog-grid > .product-card { --cols: 1; }
  .catalog-header .art-heading { --ah-size: 40px; }
  .catalog-cta .art-heading { --ah-size: 38px; }
  .catalog-cta .button.primary.catalog-cta-button { white-space: normal; padding: 10px 14px; }
  .catalog-filter { padding: 6px 4px; }
  .catalog-filters { flex-wrap: wrap; }
}

/* ==========================================================================
   Type scale (issue #7, 2026-10-09)
   The single place that sets font family, size and weight. Sizes are --type-* tokens (tokens.css),
   which switch to their phone values at <=760px there, so these rules need no media queries.
   Roles: display / h2 / h3 / title / body-lg / body / small / label / button / hand (docs/design-spec.md §11).
   Weights: Barlow 500 body, 600 meta, 700 labels and buttons, 800 titles; Lilita One and Caveat Brush 400.
   Nothing may request a face fonts.css does not host: tests/browser/type-guard.js checks it.
   ========================================================================== */

/* Moved here from the layered rules above (same order, so the cascade is unchanged). */
button, input, select, textarea { font: inherit; }                 /* form controls take the page font */
.catalog-controls input, .catalog-controls select { font: inherit; }
.inquiry-field input, .inquiry-field textarea { font: inherit; }
h1, h2 { font-family: var(--display); }
.contact-channels-card h2 { font-family: var(--display); }
.ah-face, .ah-shadow { font-family: var(--display); }              /* curved art-heading SVG text */

/* Body: Barlow 500 in ink; everything not listed below inherits it. */
body { font-family: var(--body); font-size: var(--type-body); font-weight: 500; line-height: 1.45; color: var(--ink); }

/* Headings: never Storefront's 300 / #131315. Only Lilita display headings are tracked tighter. */
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: 0; }
h1 { font-family: var(--display); font-size: var(--type-display); font-weight: 400; line-height: 1.05; letter-spacing: -1px; }

/* h2: Lilita 400, no tracking */
h2,
.custom-inquiry-panel .section-heading h3,
.step-number {
  font-family: var(--display);
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.05;
}
.cookie-banner-title {
  font-family: var(--display);
  font-size: var(--type-title);
  font-weight: 400;
  line-height: 1.15;
}
.step-number { line-height: 1; }

/* h3: Barlow 800 */
h3,
.single-post .entry-content h2,
.benefits strong,
summary {
  font-family: var(--body);
  font-size: var(--type-h3);
  font-weight: 800;
  line-height: 1.15;
}
.single-post .entry-title,
.tag-archive-page .archive-title {
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: 0;
}

/* title: product cards (homepage featured and /shop/ share one rule) and Quote List rows */
.product-body h2,
.product-body h3,
.single-post .entry-content h3,
.tag-card-title,
.tag-card-title a,
.product-title,
.quote-row h3 {
  font-family: var(--body);
  font-size: var(--type-title);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

/* body-lg: Barlow 500. The homepage stock lead is body copy (a spec sentence since PR #10), not a display
   line; its "Start with 100 bags per design." line is the h3 role. */
.hero-copy > p,
.catalog-intro,
.information-lede,
.stock-lead-text > span:first-child {
  font-size: var(--type-body-lg);
  line-height: 1.35;
  text-wrap: pretty;
}
.stock-lead-text > .stock-lead-title { font-size: var(--type-h3); font-weight: 800; line-height: 1.15; }

/* small: Barlow 500 (meta 600) in --ink-soft (the demo note alone keeps --muted) */
.demo-note,
.product-meta,
.catalog-breadcrumb,
.product-card .product-description,
.product-sku,
.product-detail-sku,
.product-shipping-note,
.quantity-error,
.quote-sku,
.quote-item-warning,
.quote-storage-warning,
.inquiry-notice,
.custom-inquiry-privacy,
.custom-inquiry-disclaimer,
.custom-teaser-actions p,
.custom-steps li,
.artwork-guidelines .guidelines-body,
.information-related,
.single-post .entry-meta,
.tag-card-date,
.single-post .entry-header .posted-on,
.single-post .entry-header .post-author,
.single-post .tags-links,
.single-post .post-nav-label,
.eyebrow,
.channel-label,
.cookie-banner-text {
  font-size: var(--type-small);
  line-height: 1.4;
}
.product-meta { color: var(--ink-soft); }
.product-meta, .catalog-breadcrumb, .cookie-banner-text a, .single-post .entry-meta, .single-post .tag-pill, .tag-card-date { font-weight: 600; }
.catalog-breadcrumb [aria-current], .eyebrow, .channel-label, .single-post .post-nav-label, .single-post .entry-content th { font-weight: 700; }

/* label: Barlow 700 */
.header nav,
.nav-contact,
footer nav,
footer button,
.footer-email,
.back-link,
.catalog-result-summary,
.product-body .quantity-stepper input,
.product-specs dt,
.channel-value,
.information-related > span,
.single-post .post-navigation .nav-links a,
.custom-steps strong,
.catalog-pagination a:not(.button),
.tag-pagination a,
.tag-pagination span,
.catalog-search-submit {
  font-family: var(--body);
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.2;
}
.quote-summary, .inquiry-status, .information-placeholder, .custom-inquiry-no-script, .information-related a[aria-current="page"] { font-weight: 700; }

/* Form labels and the small white Remove button: 16px Barlow 700 */
.inquiry-field label,
.catalog-controls label,
.quote-row-controls label,
.product-detail-quote label,
.product-body label,
.quote-remove {
  font-size: var(--type-label-form);
  font-weight: 700;
  line-height: 1.3;
}

/* button: Barlow 700, every button the same size (primary and secondary); white on --action is
   always >= --action-text (19px) bold, WCAG AA large text. Hero and lead CTAs step up to 22px. */
.button,
.toast-action,
.catalog-filter {
  font-family: var(--body);
  font-size: var(--type-button);
  font-weight: 700;
}
.hero-actions .button,
.stock-lead-button,
.catalog-cta-button {
  font-size: var(--type-button-lg);
}
.custom-inquiry-toggle { font-size: var(--type-button-xl); }

/* hand: Caveat Brush 400 sticker notes */
.burst,
.custom-sticker,
.catalog-sticker-note.catalog-sticker-right {
  font-family: var(--hand);
  font-size: var(--type-hand);
  font-weight: 400;
  line-height: .95;
}
.brand-note,
.art-note,
.hand-note,
.quote-note,
.footer-tag,
.footer-note,
.catalog-sticker-note {
  font-family: var(--hand);
  font-size: var(--type-hand-lg);
  font-weight: 400;
  line-height: .95;
}
@media (max-width: 760px) {
  #how .hand-note { font-size: var(--type-hand); }                  /* phones: the How It Works note sits above the heading, sticker-sized */
}

/* Glyph-sized exceptions (not text roles) */
.preview-bar { font-size: 12px; }                                  /* local preview bar only; removed in production (issue #1) */
.dialog-close { font-size: 32px; font-weight: 500; line-height: 1; } /* × close glyph in a 44px target */
.quantity-step { font-size: var(--type-h3); font-weight: 700; line-height: 1; }
.custom-steps li::before { font-family: var(--display); font-size: var(--type-label); font-weight: 400; line-height: 1; }
.rays { font-size: 0; }                                            /* decorative mask span: no glyph box */
.quote-row .quote-list-quantity { font-weight: 600; }              /* Quote List quantity field (layout rule below) */
/* Articles entry: B layout from the approved issue #49 study. */
.articles-header p { font-size: var(--type-body-lg); }
.article-card-title { font-family: var(--body); font-size: var(--type-h3); font-weight: 800; line-height: 1.2; letter-spacing: 0; }
.article-card-title a { font: inherit; }
.article-copy time, .article-tags a { font-family: var(--body); font-size: var(--type-small); font-weight: 500; }
.article-pagination a, .article-pagination span, .all-articles-link { font-family: var(--body); font-size: var(--type-label); font-weight: 700; line-height: 1.2; }

/* ---------- End of Type scale: no font-size, font-weight or font-family (or font shorthand) anywhere outside this block; ThemeTest enforces it ---------- */

/* Storefront's input[type=number] rule (grey #43454b text on a #f2f2f2 fill with an inset shadow) outranked
   .quote-list-quantity and left the Quote List quantity field grey. Match the other form fields. */
.quote-row .quote-list-quantity { color: var(--ink); background: #fff; border: 1px solid #999; box-shadow: none; }

/* One theme arrow icon (mylarlabs_icon_arrow()) instead of the →/←/↑ characters, which no theme font
   contains (they rendered in a system font). currentColor, 1em, stroke weight matched to bold labels. */
.icon-arrow {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.125em;
}
.icon-arrow--left { transform: scaleX(-1); }
.icon-arrow--up { transform: rotate(-90deg); }
.back-link .icon-arrow { margin-right: 6px; }

/* Benefits on phones: one row per benefit (icon | title + text) at the body size. The words are
   separated by a real space in the markup, so hiding the desktop line breaks no longer joins them. */
@media (max-width: 760px) {
  .benefits { grid-template-columns: 1fr; padding: 2px 16px; }
  .benefits > div { flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; padding: 12px 0; }
  .benefits > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .benefits svg { width: 44px; height: 44px; }
  .benefits strong { min-height: 0; margin-bottom: 2px; }
}

/* Hand notes on phones are >= 19px (they were 15-16px), so the stickers that hold them grow a little. */
@media (max-width: 760px) {
  .hero-art { margin-top: -6px; }
  .burst { width: 124px; height: 124px; padding: 16px; top: -4px; }
  .custom-sticker { padding: 14px; }
}
@media (max-width: 360px) {
  .burst { width: 112px; height: 112px; padding: 12px; }
  .custom-sticker { padding: 12px; }
}

/* ==========================================================================
   Cookie consent banner (issue #19 / PR #20). Layout only; the title and text sizes live in the Type scale
   block, the buttons take the shared --type-button size from .button.
   - Desktop (>= 1101px): one compact row along the bottom edge, copy left, buttons right (Accept All last),
     kept clear of the floating contact button and low enough to leave the hero CTAs uncovered at 1440x900.
   - 761-1100px: copy above, buttons right-aligned below.
   - <= 760px: full-width sheet; the two buttons share the row half and half; stacked only at <= 340px.
   While the banner is open, #toast stacks above it (home.js sets --cookie-banner-clearance) so add-to-quote
   feedback is never covered.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: var(--gutter);
  right: calc(96px + env(safe-area-inset-right, 0px)); /* 16px + 56px floating contact + 24px air */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  max-width: 1120px;
  box-sizing: border-box;
  padding: 16px 22px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--ink);
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 28px;
}
.cookie-banner-copy { display: grid; gap: 4px; min-width: 0; }
.cookie-banner-title { margin: 0; color: var(--ink); }
.cookie-banner-text { margin: 0; color: var(--ink); }
.cookie-banner-text a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-text a:hover { color: var(--ink); }
.cookie-banner-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* both buttons as wide as the wider label */
  justify-self: end; /* shrink to the buttons, right-aligned, in both the row and the stacked layout */
  gap: 12px;
}
/* Same shape for both choices; they differ only in colour. */
.cookie-banner-btn {
  min-height: 48px;
  padding: 10px 22px;
  border: 2px solid var(--ink);
  border-radius: 40px;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.cookie-banner-btn-accept { background: var(--action); color: #fff; }
.cookie-banner-btn-necessary { background: var(--paper); color: var(--ink); }
/* Hover: both lift with a deeper shadow. Colours are restated because Storefront's button:hover sets white text. */
.cookie-banner-btn:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); }
.cookie-banner-btn-accept:hover, .cookie-banner-btn-accept:focus { background: var(--action); color: #fff; }
.cookie-banner-btn-necessary:hover, .cookie-banner-btn-necessary:focus { background: var(--paper); color: var(--ink); }
.cookie-banner-btn:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--ink); }

/* Footer / privacy-page trigger is a real link (works without JavaScript); keep its text readable on hover. */
.cookie-preferences-link, .cookie-preferences-link:hover, .cookie-preferences-link:focus { color: inherit; }
.information-content .cookie-preferences-link { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.information-content .cookie-preferences-link:hover { color: var(--ink); }

/* Focus target after a first-visit choice (home.js moves focus to #main with tabindex -1). */
main[tabindex="-1"]:focus { outline: none; }

body.has-cookie-banner #toast {
  bottom: var(--cookie-banner-clearance, 24px);
  z-index: 26;
}

@media (max-width: 1100px) {
  .cookie-banner-inner { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 760px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .cookie-banner-inner { gap: 10px; }
  .cookie-banner-copy { gap: 2px; }
  .cookie-banner-actions { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; gap: 8px; }
  .cookie-banner-btn { width: 100%; min-height: 44px; padding: 8px 4px; }
  /* The sheet spans the bottom edge, so the floating contact button steps aside while it is open. */
  body.has-cookie-banner .floating-contact { display: none !important; }
}

@media (max-width: 340px) {
  .cookie-banner-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Issue #7 follow-up (2026-10-21): layout and spacing after the type-scale and copy changes.
   PR #8 raised the type scale and PR #10 lengthened the copy, but the spacing stayed at the
   small-type values of the approved preview, so blocks read cramped and some stickers collided.
   Layout only: no font sizes, weights or families here (those stay in the Type scale block above).
   ========================================================================== */
.nowrap { white-space: nowrap; }

/* ---------- Hero: the copy column never runs under the bags ---------- */
.hero {
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  column-gap: 28px;
  padding-top: 34px;
  padding-bottom: 36px;
}
.hero-copy { margin-right: 0; }
.hero-copy > p { max-width: 17em; margin-top: 8px; text-wrap: balance; } /* 17em: five even lines (min/max 0.84) at 900-1440px; the 4-line optimum for this copy is 0.80 with a short last line; never under the bags */
.hero-actions { margin-top: 30px; }
.brand-note { margin-top: 26px; }
/* Hero hand notes: each note and its arrow sit in one absolutely placed flex box (.art-callout), so the arrow is
   laid out next to the note's real box and moves with it when the copy gets longer or shorter. Only the
   callout's corner is positioned; nothing is offset by the current text width. */
.art-callout { position: absolute; z-index: 4; display: flex; align-items: flex-start; pointer-events: none; }
.art-callout > .art-note, .hero-art .art-callout > .arrow { position: static; flex: none; }
/* "100-BAG MOQ / BUILT FOR BUDS": arrow to the right, pointing up at the bags, never over BUDS. */
.art-callout-moq { left: 8%; bottom: 2%; gap: 18px; } /* 8%: >= 12px clear of the hero buttons, which run into the art column */
.hero-art .art-callout-moq > .arrow { width: 64px; transform: rotate(200deg); }
/* "CUSTOM PACKAGING AVAILABLE": arrow at the lower left of the note. */
.art-callout-custom { right: -2%; bottom: calc(7% - 26px); flex-direction: row-reverse; align-items: flex-end; gap: 0; }
.art-callout-custom > .art-note-custom { margin-bottom: 34px; transform: rotate(-9deg); }
.hero-art .art-callout-custom > .arrow-custom { width: 58px; }

/* ---------- Section rhythm ---------- */
.benefits { margin-top: 28px; padding: 26px 0; }
.benefits strong { margin-bottom: 6px; }
.section { margin-top: 84px; }
.section-heading { margin-bottom: 30px; }
#stock .product-grid, .custom-grid, .steps { gap: 24px; }
.stock-lead { margin: 56px auto 0; gap: 12px 40px; }
.stock-lead-text { max-width: 640px; }
.stock-lead-text > span:first-child { text-wrap: balance; }
.stock-lead-text > .stock-lead-title { margin-top: 14px; }
.custom-card { padding: 20px 22px 26px; }
.custom-card p { margin: 8px 0 20px; }
.custom-teaser-actions { margin-top: 48px; }
.custom-inquiry-panel { margin-top: 32px; }
.steps li { padding: 28px 26px; }
.steps p { margin-top: 8px; }
.questions { gap: 14px; }
.questions details { padding: 16px 20px; }
.questions details p { margin-top: 12px; }
.faq .art-heading { margin-bottom: 30px; }
footer { margin-top: 96px; padding: 40px 0 44px; }

/* YOUR VISION / OUR BAGS sticker: --sticker is the single source for its size and for the room the heading
   reserves beside it (sticker + --sticker-gap); breakpoints below only change these two variables. 160px from
   desktop down to 761px, 118px on phones, 108px at <= 360px. The curved heading scales down (max-width: 100%)
   when its copy is longer. */
.custom-teaser { --sticker: 160px; --sticker-gap: 20px; }
.custom-teaser .section-heading { padding-right: calc(var(--sticker) + var(--sticker-gap)); }

/* Information pages: a paragraph after a list or the placeholder notice had no gap at all. */
.information-content > :is(ul, ol, .information-placeholder) + * { margin-top: 20px; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
  .hero-copy { margin-right: 0; }
  .section { margin-top: 72px; }
  /* The art column is too narrow for two hand notes with arrows (layout-guard caught the CUSTOM note touching the
     purple bag and the two arrows colliding at 901-1100px); keep one, as on phones. */
  .art-callout-custom { display: none; }
  /* 3 custom cards in a narrower row: the button fills its card instead of keeping min-width 230px and spilling out
     (layout-guard: buttons 7px apart at 768px). */
  .custom-card { padding-left: 14px; padding-right: 14px; }
  .custom-card .button { min-width: 0; width: 100%; padding-left: 12px; padding-right: 12px; gap: 6px; text-wrap: balance; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .stock-lead { gap: 12px 28px; }
  /* narrowest three-card row: room for a two-line "Explore Custom / Packaging" button */
  #custom .custom-grid { gap: 14px; }
  #custom .custom-card { padding-left: 10px; padding-right: 10px; }
  #custom .custom-card .button { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Articles entry (issue #49): selected B layout ---------- */
.articles-page { padding: 60px 0 48px; }
.articles-page > .wrap { max-width: 1240px; }
.articles-header { display: flex; justify-content: space-between; align-items: center; gap: 48px; margin-bottom: 52px; }
.articles-header h1 { position: relative; flex-shrink: 0; margin: 0; padding-bottom: 16px; }
.articles-header h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 112px; height: 7px; border-radius: 50%; background: var(--paint); transform: rotate(-3deg); }
.articles-header p { max-width: 29em; margin: 0; line-height: 1.5; text-wrap: pretty; }
.article-list { display: grid; gap: 28px; padding-top: 28px; border-top: 2px solid var(--ink); }
.article-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: 36px; border-bottom: 1px solid var(--card-border); padding-bottom: 28px; align-items: start; }
.article-cover { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--ink); border-radius: 12px; background: #e9e5d9; }
.article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-cover .article-placeholder { object-fit: contain; padding: 14%; background: linear-gradient(135deg, #f6f2e7, #e8e1d0); }
.article-copy { min-width: 0; }
.article-copy time { display: block; color: var(--ink-soft); margin-bottom: 10px; }
.article-card-title { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.article-card-title a { color: var(--ink); text-decoration: none; }
.article-card-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.article-excerpt { line-height: 1.5; margin: 14px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; color: var(--ink-soft); }
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.article-tags a { display: inline-block; padding: 5px 10px; border: 1px solid var(--card-border); border-radius: 5px; color: var(--ink); text-decoration: none; line-height: 1.3; overflow-wrap: anywhere; }
.article-tags a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.article-pagination { margin-top: 52px; }
.article-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.article-pagination a, .article-pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 6px; color: var(--ink); text-decoration: none; }
.article-pagination [aria-current], .article-pagination a:hover { background: var(--ink); color: var(--paper); }
.article-pagination .dots { border-color: transparent; }
.articles-empty { min-height: 300px; display: grid; place-content: center; text-align: center; border-block: 1px solid var(--card-border); }
.all-articles-link { display: inline-block; margin-bottom: 24px; color: var(--red-text); text-decoration: underline; text-underline-offset: 4px; }
.all-articles-link:hover { color: var(--ink); }

/* Five navigation links retain room for the logo and Quote List. */
@media (min-width: 1001px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; }
  .header nav { gap: clamp(14px, 2vw, 30px); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .header-inner { grid-template-columns: auto 1fr; padding-top: 8px; padding-bottom: 12px; gap: 8px; }
  .header .brand { grid-column: 1; grid-row: 1; }
  .header .quote-button { grid-column: 2; grid-row: 1; }
  .header nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; gap: 28px; padding: 10px 0 0; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .articles-page { padding-top: 32px; }
  .articles-page > .wrap { padding-inline: 22px; }
  .articles-header { display: block; margin-bottom: 30px; }
  .articles-header h1 { display: inline-block; }
  .articles-header h1::after { height: 5px; width: 74px; }
  .articles-header p { margin-top: 20px; }
  .article-list { padding-top: 22px; }
  .article-card { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .article-cover { aspect-ratio: 2 / 1; }
  .article-cover .article-placeholder { padding: 8%; }

  /* Header: logo left, Quote List, then the menu button at the far right (platform convention). */
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; }
  .quote-button { grid-column: 3; grid-row: 1; }
  .menu-toggle { grid-column: 4; grid-row: 1; justify-self: end; margin: 0; }

  .hero { display: block; padding-top: 10px; padding-bottom: 60px; }
  /* GOOD BAGS note: in the flow above the heading (was absolutely placed and touched CRAFT MYLAR), so a longer
     note pushes the heading down instead of covering it. */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy > .brand-note { order: -1; position: relative; inset: auto; align-self: flex-end; margin: 0; } /* ~28px ink gap to the heading at 320-414px */
  .hero .art-heading { margin-top: 0; }
  .hero-copy > p { max-width: 18em; margin-top: 12px; } /* 18em: measured the most even 5-line wrap at 360-414px */
  .hero-actions { margin-top: 24px; gap: 14px; }
  /* Room under the bags for the hand note, so it no longer runs into the benefits box. */
  /* Phones: the art keeps its proportions (it was a fixed 330px tall box with bags sized by width, so at 600-760px
     the bags outgrew it, were cut off and covered the MOQ note). */
  .hero-art { margin-top: 18px; height: auto; aspect-ratio: 1 / 0.97; width: min(96%, 440px); }
  .art-callout-moq { left: -3%; bottom: -26px; gap: 20px; } /* px, not %: the hang below the art (and the room hero padding-bottom keeps for it) stays the same at every phone width */
  .art-callout-custom { display: none; }
  .hero-art .art-callout-moq > .arrow { width: 48px; transform: rotate(205deg); }

  .benefits { margin-top: 0; padding: 4px 18px; }
  .benefits > div { padding: 16px 0; }
  .section { margin-top: 60px; }
  .section-heading { margin-bottom: 22px; }
  #stock .product-grid { gap: 14px; }
  .stock-lead { margin-top: 40px; gap: 0; }
  .stock-lead-text > .stock-lead-title { margin-top: 16px; }
  /* Arrow between "Start with 100 bags per design" and the button: its own row with air on both sides. */
  .stock-lead-arrow { width: 64px; margin: 22px 0 18px; transform: rotate(80deg); }
  .custom-grid { gap: 14px; }
  .custom-card, .custom-card:first-child { row-gap: 10px; padding: 10px 14px 16px; }
  .custom-card .button, .custom-card:first-child .button { margin: 0; } /* centred in the card (was nudged 6px right) */
  .questions details { padding: 14px 16px; }
  .custom-teaser-actions { margin-top: 36px; gap: 26px; } /* the rotated TELL US note keeps >= 12px off the Get a Quote button */
  .steps { gap: 14px; }
  .steps li { padding: 18px 14px; }
  /* How it works: the hand note sits above the heading; give it its own space below the Get a Quote button. */
  #how { margin-top: 60px; }
  /* SIMPLE STEPS note: in the flow above the heading (was absolutely placed over "Works"), so longer copy pushes
     the heading down instead of touching it. */
  #how .section-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  #how .hand-note { order: -1; position: relative; inset: auto; align-self: flex-end; margin: 0 4px 10px 0; }
  .custom-teaser { --sticker: 118px; --sticker-gap: 16px; } /* YOUR VISION sticker (see --sticker above) */
  .questions { gap: 12px; }
  .faq .art-heading { margin-bottom: 22px; }

  /* /shop/: the breadcrumb and the big heading were touching. */
  .catalog-page { padding-top: 20px; }
  .catalog-breadcrumb { margin-bottom: 12px; }

  /* Footer ("Small batch, big ideas"): socials on one row, the note on its own row below. */
  footer { margin-top: 72px; padding: 32px 0 40px; }
  .footer-tag { margin-top: 10px; }
  .footer-content { margin-top: 22px; padding-top: 20px; }
  .footer-content nav { row-gap: 14px; }
  .footer-email { margin-top: 22px; padding-top: 20px; }
  .footer-social { grid-column: 1 / -1; margin-top: 20px; gap: 14px; }
  .footer-note { grid-column: 1 / -1; justify-self: start; margin: 26px 0 0 4px; gap: 12px; }

}

@media (max-width: 360px) {
  .custom-teaser { --sticker: 108px; }
  .hero { padding-bottom: 56px; }
  .footer-social { gap: 10px; }
}

/* Page gutter (owner review 3, 2026-10-21): --gutter in tokens.css (72px at 1440, 40px at 761-1100px, 32px at 390
   easing to 24px at 360) is the only gutter; every .wrap uses it (header, hero, sections, footer, /shop/, pages). */