/* Store info pages: About (UI-04), and later Contact, Shipping and Returns, Search and Page not found.
   Look A's tokens, the header, the review marks and the site footer come from style.css.
   Desktop only for now (D-42): the narrow-window rules at the end only keep the grids from breaking. */

/* Shared by the store info pages */
.store-page .crumbs { display: flex; gap: 8px; padding-top: 28px; font-size: 13px; color: var(--muted); }
.store-page .crumbs a { color: var(--muted); text-decoration: none; }
.store-page .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.store-page .section { padding-top: 112px; }
.store-page .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.store-page .section h2, .store-page .closing h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }

/* Closing band: the same Forest band as the home page */
.store-page .closing {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px;
  max-width: 1216px; margin: 112px auto 0; padding: 64px 72px; overflow: hidden;
  background: var(--accent); color: #fff; border-radius: var(--radius-l);
}
.store-page .closing p { margin-top: 12px; font-size: 18px; color: rgba(255, 255, 255, 0.86); }
.store-page .closing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.store-page .closing-hat { width: 360px; margin: -48px -24px -72px 0; }
.store-page .btn-light { background: #fff; color: var(--ink); border: 0; }
.store-page .btn-light:hover { background: #F3F5F4; }
.store-page .btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.store-page .btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }

/* About (UI-04) */

/* 1. Intro (not .intro, which the designer pages use): the brand line, big, with the plain-words summary beside it */
.about .intro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; padding-top: 20px; }
.about .intro-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about .about-intro h1 { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.about .intro-lede { padding-bottom: 6px; font-size: 20px; line-height: 1.5; color: var(--muted); }

/* 2. Photos: one wide, two stacked */
.about .photos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 260px 260px; gap: 20px; margin-top: 48px; }
.about .photos img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-l); }
.about .photo-main { grid-row: span 2; object-position: 50% 62%; }
.about .photos img[src*="stitching"] { object-position: 50% 58%; }

/* 3. At a glance */
.about .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.about .fact { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.about .fact-value { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.about .fact-label { max-width: 20em; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* 4. Our story */
.about .story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.about .story-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about .story-body { display: flex; flex-direction: column; gap: 22px; max-width: 40em; }
.about .story-body p { font-size: 18px; line-height: 1.65; }
.about .story-body .story-lead { font-size: 26px; font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; }

/* 5. What we make: one large tile and three smaller ones, products on the stage grey */
.about .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 340px 340px; gap: 20px; }
.about .tile { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--stage); color: var(--ink); text-decoration: none; }
.about .tile-hat { grid-column: 1 / 7; grid-row: 1 / 3; }
.about .tile-balls { grid-column: 7 / 10; }
.about .tile-apparel { grid-column: 10 / 13; }
.about .tile-acc { grid-column: 7 / 13; }
.about .tile-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 28px 28px 0; }
.about .tile-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.about .tile-note { max-width: 26em; font-size: 15px; line-height: 1.45; color: var(--muted); }
.about .tile:hover .tile-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.about .tile-media { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.about .tile-hat .tile-media img { width: 108%; max-width: none; margin-top: -40px; }
.about .tile-balls .tile-media svg { width: 78%; margin-top: -8px; }
/* The polo is cropped to its body (x 300-720, centred on y 760 of the photo), filling the tile below the words */
.about .tile-apparel .tile-media { margin-top: 20px; overflow: hidden; }
.about .tile-apparel .tile-media img { position: absolute; left: -71.4%; top: 50%; width: 228%; max-width: none; transform: translateY(-52.8%); }
/* The accessory renders are square with room around each piece, so they overlap a little */
.about .tile-acc .tile-media { justify-content: center; align-items: center; padding: 0 8px; }
.about .tile-acc .tile-media img { width: 31%; min-width: 0; margin: 0 -4.5%; }
.about .tile-acc .acc-tumbler { width: 37%; margin-top: -4%; }
.about .tile-acc .acc-markers { width: 31%; margin-right: -1%; }
.about .tile-acc .acc-tees { margin-left: -1%; }

/* 6. How we work */
.about .values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.about .value { padding-top: 24px; border-top: 1px solid var(--line); }
.about .value-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.about .value h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.about .value p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* 7. A note from the owner */
.about .note-card { margin: 0; padding: 64px 80px 60px; border-radius: var(--radius-l); background: var(--stage); }
.about .note-top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.about .note .note-top h2 { font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--accent); }
.about .note-card blockquote { max-width: 28em; margin: 20px 0 0; font-size: 34px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.about .note-card figcaption { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.about .avatar { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-dark); font-size: 21px; font-weight: 700; }
.about .signed { display: flex; flex-direction: column; }
.about .signed-name { font-size: 16px; font-weight: 700; }
.about .signed-role { font-size: 14px; color: var(--muted); }

/* Contact (UI-05), "Editorial split" (chosen by the owner; refined in the D-72 design pass).
   The photo carries the page's headline, the one bold moment; the form sits open beside it; a Forest band holds
   the other ways to reach us; then the questions, with their topics on the left. Everything but the photo stays quiet.
   Type scale (px): 72 headline, 48 section, 36 form heading, 30 contact details, 21 questions, 18 body and fields,
   16 options and notes, 14 labels and hints. Labels are sentence case. */
.contact h1, .contact h2 { text-wrap: balance; }
.contact .contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

/* 1. The photo and the headline. The column is as tall as the form; the picture stays in view while the form scrolls */
.contact .contact-photo { position: relative; color: #fff; }
.contact .contact-photo-inner { position: sticky; top: 64px; height: min(calc(100svh - 64px), 100%); min-height: 640px; overflow: hidden; }   /* flush under the header's hairline once scrolled (64px, D-106) */
.contact .contact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.contact .contact-photo-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 26, 19, 0.86) 0%, rgba(10, 26, 19, 0.52) 30%, rgba(10, 26, 19, 0) 56%); }
.contact .contact-photo-copy { position: absolute; left: 64px; right: 64px; bottom: 60px; z-index: 1; }
.contact .contact-photo h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.045em; line-height: 0.96; }
.contact .contact-photo-copy p { max-width: 30em; margin-top: 22px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }

/* 2. The form, open on the page */
.contact .contact-side { padding: 0 max(32px, calc((100vw - 1280px) / 2 + 32px)) 80px 72px; }
.contact .contact-side-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0 36px; }
.contact .contact-side-head h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.contact form { display: flex; flex-direction: column; gap: 28px; scroll-margin-top: 96px; }
.contact .topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact .topics legend { margin-bottom: 12px; padding: 0; }
/* Topics: a two-column list of options, each with a round marker */
.contact .topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contact .topic { position: relative; cursor: pointer; }
.contact .topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.contact .topic span { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border: 1px solid var(--field-line); border-radius: var(--radius-s); font-size: 16px; font-weight: 600; }
.contact .topic span::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid var(--control-line); border-radius: 50%; }
.contact .topic:hover span { border-color: var(--control-line); }
.contact .topic input:checked + span { padding: 0 15px; border: 2px solid var(--accent); background: var(--accent-soft); }
.contact .topic input:checked + span::before { border: 5px solid var(--accent); }
.contact .topic input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent); outline-offset: 2px; }
/* Fields: a single line under each answer. input[type] ties style.css's .look-a .field input[type="text"] and wins by coming later */
.contact .field { gap: 6px; }
.contact .field-pair { gap: 32px; }
.contact .optional { font-weight: 400; color: var(--muted); }
.contact .field input[type] { width: 100%; height: 48px; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--control-line); border-radius: 0; background: transparent; font: inherit; font-size: 18px; color: var(--ink); }
.contact .field input[type]:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1.5px 0 var(--accent); }
.contact .field textarea { display: block; width: 100%; min-height: 136px; margin-top: 6px; padding: 14px 16px; border: 1.5px solid var(--control-line); border-radius: var(--radius-m); background: transparent; font: inherit; font-size: 18px; line-height: 1.5; color: var(--ink); resize: vertical; }
.contact .field textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--focus) 22%, transparent); outline-offset: 0; }
.contact .field input::placeholder, .contact .field textarea::placeholder { color: #627770; opacity: 1; }  /* 4.7:1 on white: lighter than typed text, still readable */
.contact .field input[type][aria-invalid="true"], .contact .field textarea[aria-invalid="true"],
.contact .field input[type][aria-invalid="true"]:focus, .contact .field textarea[aria-invalid="true"]:focus { border-color: #A3261B; outline-color: rgba(163, 38, 27, 0.22); }
.contact .field input[type][aria-invalid="true"]:focus { box-shadow: 0 1.5px 0 #A3261B; }
.contact .field .field-error { margin-top: 2px; }
.contact .order-field { max-width: 240px; }
.contact .with-prefix { position: relative; }
.contact .with-prefix span { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; }
.contact .field .with-prefix input[type="text"] { padding-left: 20px; }
/* An optional file, named once chosen; nothing is uploaded */
.contact .attach { display: flex; }
.contact .attach-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent); font-size: 16px; font-weight: 600; cursor: pointer; }
.contact .attach-btn span:first-of-type { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact .attach-btn:hover span:first-of-type { text-decoration-thickness: 2px; }
.contact .attach input:focus-visible + .attach-btn { outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent); outline-offset: 2px; }
.contact .attach-file { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; }
.contact .attach-file[hidden] { display: none; }
.contact .attach-file .text-btn { min-height: 36px; }
.contact .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact .form-foot .btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 32px; font-size: 17px; }
.contact .form-foot .hint { font-size: 14px; }
/* Sent: the on-page confirmation */
.contact .sent { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 48px; }
.contact .sent[hidden] { display: none; }
.contact .sent-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; border-radius: 50%; background: var(--accent); color: var(--on-dark); }
.contact .sent h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.contact .sent h2:focus { outline: none; }
.contact .sent-lede { font-size: 18px; color: var(--muted); }
.contact .sent-lede strong { color: var(--ink); font-weight: 600; }
.contact .sent-summary { width: 100%; margin: 10px 0 6px; padding: 6px 24px; border-radius: var(--radius-m); background: var(--stage); }
.contact .sent-summary div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact .sent-summary div:last-child { border-bottom: 0; }
.contact .sent-summary div[hidden] { display: none; }
.contact .sent-summary dt { font-size: 14px; font-weight: 600; color: var(--muted); }
.contact .sent-summary dd { margin: 0; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.contact .sent-message { white-space: pre-wrap; }
.contact .sent-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }

/* 3. The Forest band: three ways to reach us, side by side between thin rules (not a sequence, so not numbered).
   Each detail is itself the link. */
.contact .ways-band { padding: 104px 0 112px; background: var(--accent); color: #fff; }
.contact .ways-band h2 { margin-bottom: 48px; font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.contact .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.contact .way { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 40px 8px 0; }
.contact .way + .way { padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, 0.24); }
.contact .way-label { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.84); }
.contact .way-value { margin-top: 10px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-decoration-thickness: 1.5px; text-underline-offset: 8px; }
.contact .way-value:hover { text-decoration-color: #fff; }
.contact .way-value:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.75); outline-offset: 6px; border-radius: 4px; }
.contact .way-note { margin-top: 16px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }

/* 4. Questions, answered: topics down the left, the questions as large rows on the right */
.contact .contact-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; padding-top: 112px; }
.contact .contact-faq-head { position: sticky; top: 96px; }
.contact .contact-faq-head h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.contact .contact-faq-head > p { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.contact .faq-tabs { display: flex; flex-direction: column; margin-top: 36px; border-left: 2px solid var(--line); }
.contact .faq-tabs [role="tab"] { margin-left: -2px; padding: 12px 20px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 18px; font-weight: 600; text-align: left; cursor: pointer; }
.contact .faq-tabs [role="tab"]:hover { color: var(--ink); }
.contact .faq-tabs [aria-selected="true"] { border-left-color: var(--accent); color: var(--ink); }
.contact .faq-panel { border-top: 1px solid var(--line); }
.contact .faq-panel[hidden] { display: none; }
.contact .faq-item { border-bottom: 1px solid var(--line); }
.contact .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; list-style: none; cursor: pointer; font-size: 21px; font-weight: 600; letter-spacing: -0.012em; }
.contact .faq-item summary::-webkit-details-marker { display: none; }
.contact .faq-btn { position: relative; flex-shrink: 0; width: 40px; height: 40px; border: 1.5px solid var(--control-line); border-radius: 50%; color: var(--accent); transition: transform 0.25s, background 0.2s; }
.contact .faq-btn::before, .contact .faq-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; }
.contact .faq-btn::after { transform: rotate(90deg); }
.contact .faq-item[open] .faq-btn { transform: rotate(45deg); border-color: var(--accent); background: var(--accent); color: #fff; }
.contact .faq-item p { max-width: 38em; padding: 0 72px 28px 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .contact .faq-btn { transition: none; } }

/* Shipping and Returns (UI-06), designed with the frontend-design plugin (D-72).
   A buyer comes to answer one question fast, so the page is the four questions, each answered where it's asked.
   The one bold moment is the journey from order to door on a Forest band; everything else is plain rows.
   Type scale (px): 60 title, 48 band question, 36 questions, 30 durations, 24 answers, 18 body, 16 notes, 14 labels. */
.shipping h1, .shipping h2 { text-wrap: balance; }
.shipping .ship-intro { padding-bottom: 64px; }
.shipping .ship-intro-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 28px; }
.shipping .ship-intro-top .crumbs { padding-top: 0; }
.shipping .ship-intro h1 { max-width: 12em; margin-top: 28px; font-size: 60px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.shipping .ship-lede { max-width: 34em; margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--muted); }
/* The four questions, as a way straight to each answer */
.shipping .ship-jump { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.shipping .ship-jump a { font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--control-line); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.shipping .ship-jump a:hover { text-decoration-color: var(--ink); }
.shipping [id] { scroll-margin-top: 88px; }   /* 24px under the scrolled header (64px, D-106) */

/* 1. The journey band: Received, In production, Shipped, On its way, Delivered.
   The line is solid while Honors makes the order and dashed while the carrier has it. */
.shipping .journey-band { padding: 96px 0 88px; background: var(--accent); color: #fff; }
.shipping .journey-band h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.shipping .journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 72px 0 0; padding: 0 8px; list-style: none; }
.shipping .leg { grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 24px 28px; text-align: center; border-bottom: 3px solid #fff; }
.shipping .leg-make { grid-column: 1 / 3; }
.shipping .leg-transit { grid-column: 3 / 5; border-bottom-style: dashed; border-bottom-color: rgba(255, 255, 255, 0.7); }
.shipping .leg-name { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.84); }
.shipping .leg-time { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.shipping .stop { position: relative; grid-row: 2; display: flex; flex-direction: column; gap: 4px; padding-top: 30px; }
.shipping .stop::before { content: ""; position: absolute; top: -10.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--accent); }
.shipping .stop-start { grid-column: 1 / 2; align-items: flex-start; }
.shipping .stop-start::before { left: -9px; }
.shipping .stop-mid { grid-column: 2 / 4; align-items: center; text-align: center; }
.shipping .stop-mid::before { left: calc(50% - 9px); }
.shipping .stop-end { grid-column: 4 / 5; align-items: flex-end; text-align: right; }
.shipping .stop-end::before { right: -9px; }
.shipping .stop-name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.shipping .stop-note { font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.shipping .journey-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.shipping .journey-foot p { max-width: 32em; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.shipping .journey-foot strong { color: #fff; }
.shipping .journey-foot a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* 2 to 4. Each remaining question with its answer beside it */
.shipping .qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding: 88px 0; }
.shipping .qa + .qa { border-top: 1px solid var(--line); }
.shipping .qa:last-child { padding-bottom: 24px; }
.shipping .qa h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.shipping .qa-answer { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.shipping .qa-body > p:not(.qa-answer) { max-width: 36em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.shipping .qa-body a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.shipping .qa-body .review-note { margin-top: 20px; }
/* Shipping costs: a real table (options by cost and time) */
.shipping .rates { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 18px; }
.shipping .rates caption { padding-bottom: 14px; text-align: left; font-size: 16px; color: var(--muted); }
.shipping .rates th, .shipping .rates td { padding: 18px 20px; text-align: left; vertical-align: top; }
.shipping .rates thead th { padding-top: 0; padding-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.shipping .rates tbody tr { border-bottom: 1px solid var(--line); }
.shipping .rates tbody th { font-weight: 700; }
.shipping .rates th:first-child, .shipping .rates td:first-child { width: 30%; padding-left: 0; }
.shipping .rates-note { margin-top: 16px; font-size: 16px; color: var(--muted); }
/* Returns: the rule first, then two plain notes */
.shipping .returns-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 36px 0 0; }
.shipping .returns-notes div { padding-top: 18px; border-top: 1px solid var(--line); }
.shipping .returns-notes dt { font-size: 16px; font-weight: 700; }
.shipping .returns-notes dd { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* Search results (UI-07), designed with the frontend-design plugin (D-72).
   The search field is the page's headline: the query in large type on a single line, results updating as you type.
   The tiles and "Looking for something else?" are Shop all's own (shop.js and shop.css, unchanged; the body also
   carries .shop). Type: 60 query, 18 count, the approved tile type, 16 suggestions. */
.search .search-form { position: relative; margin-top: 56px; }
.search .search-input { display: block; width: 100%; height: 88px; padding: 0 72px 6px 0; border: 0; border-bottom: 2px solid var(--control-line); border-radius: 0; background: transparent; font: inherit; font-size: 60px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); -webkit-appearance: none; appearance: none; }
.search .search-input::placeholder { color: #627770; opacity: 1; }
.search .search-input::-webkit-search-cancel-button { display: none; }
.search .search-input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.search .search-clear { position: absolute; right: 0; bottom: 20px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.search .search-clear:hover { background: var(--fill); color: var(--ink); }
.search .search-count { margin-top: 20px; font-size: 18px; color: var(--muted); }
.search .grid { margin-top: 40px; }
/* No match: words to try instead, then the ask block below turns the miss into a question for us */
.search .search-none { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.search .search-none[hidden] { display: none; }
.search .search-none p { font-size: 16px; font-weight: 600; }
.search .search-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.search .search-suggest a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1px solid var(--field-line); border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; }
.search .search-suggest a:hover { border-color: var(--control-line); }
/* With no match, asking us is the next step: the block moves up and its button leads */
.search.no-match .grid { display: none; }
.search.no-match .ask { margin-top: 48px; }
.search.no-match .ask .btn-secondary { border-color: var(--accent); background: var(--accent); color: var(--on-dark); }
.search.no-match .ask .btn-secondary:hover { filter: brightness(1.12); }

/* Page not found (UI-08), designed with the frontend-design plugin (D-72).
   Plain words, then the ways forward: the store's own search field (the Search page's style, one step smaller,
   the one bold element) and the range, pictured as on the home page. Left-aligned like every store page.
   Type: 60 headline, 36 search field, 30 range heading, 20 lede, 18 names, 16 last line. */
.not-found h1 { max-width: 14em; margin-top: 72px; font-size: 60px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.not-found .nf-lede { max-width: 34em; margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--muted); }
.not-found .nf-search { display: flex; align-items: flex-end; gap: 24px; max-width: 880px; margin-top: 44px; }
.not-found .nf-search input[type] { flex: 1; min-width: 0; height: 64px; padding: 0 2px 4px; border: 0; border-bottom: 2px solid var(--control-line); border-radius: 0; background: transparent; font: inherit; font-size: 36px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); -webkit-appearance: none; appearance: none; }
.not-found .nf-search input::placeholder { color: #627770; opacity: 1; }
.not-found .nf-search input::-webkit-search-cancel-button { display: none; }
.not-found .nf-search input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.not-found .nf-search .btn { flex-shrink: 0; height: 52px; padding: 0 30px; margin-bottom: 6px; }
/* The range, as on the home page */
.not-found .nf-range { margin-top: 104px; }
.not-found .nf-range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.not-found .nf-range-head h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; }
.not-found .nf-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.not-found .nf-cat { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
.not-found .nf-cat-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-m); background: var(--stage); }
.not-found .nf-cat-img .nf-hat { width: 92%; max-width: none; }
.not-found .nf-cat-img svg { width: 62%; }
.not-found .nf-cat-img .nf-photo { width: 100%; height: 100%; object-fit: cover; }
.not-found .nf-cat-name { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.not-found .nf-cat:hover .nf-cat-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.not-found .nf-more { margin-top: 56px; font-size: 16px; color: var(--muted); }
.not-found .nf-more a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Review bar: at the bottom edge on the contact, shipping, search and not-found pages, clear of their first screen's words (base.css lifts it 96px for the
   designers' bottom bar); the page links, then the contact form's review views */
body.contact .review-switch, body.shipping .review-switch, body.search .review-switch, body.not-found .review-switch { bottom: 12px; }
.store-page .review-switch .review-sep { width: 1px; margin: 6px 6px; background: rgba(255, 255, 255, 0.28); }
body.store-page .review-switch a[aria-current="true"] { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 1100px) {
  .contact .contact-split, .contact .contact-faq { grid-template-columns: minmax(0, 1fr); }
  .contact .contact-photo-inner { position: relative; top: 0; }
  .contact .ways { grid-template-columns: minmax(0, 1fr); }
  .shipping .qa, .shipping .journey-foot, .shipping .returns-notes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .not-found .nf-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about .intro-grid, .about .story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about .facts, .about .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-page .closing-hat { display: none; }
}