/** Shopify CDN: Minification failed

Line 712:40 Unexpected "*"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:p7-404 (INDEX:0) */
.p7-404 {
    padding: 72px 0 96px;
    text-align: center;
    color: var(--text);
  }
  .p7-404__code {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: clamp(96px, 24vw, 180px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.02em;
  }
  .p7-404__title {
    margin: 18px 0 0;
    font-family: var(--font-display, inherit);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.92;
    font-size: clamp(22px, 5vw, 32px);
  }
  .p7-404__body {
    margin: 14px auto 0;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
  }
  .p7-404__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
  }
  .p7-404__cta {
    display: inline-block;
    padding: 14px 34px;
    background: var(--btn, #0d0d0d);
    color: var(--btn-fg, #ffffff);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 2px;
  }
  .p7-404__cta:hover {
    background: var(--btn-hover, #2a2a2a);
  }
  .p7-404__home {
    font-size: 13px;
  }
/* END_SECTION:p7-404 */

/* START_SECTION:p7-article (INDEX:1) */
.p7-article {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 0 80px;
    color: var(--text);
  }
  .p7-article__back {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
  }
  .p7-article__back:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .p7-article__title {
    margin: 0 0 10px;
    font-family: var(--font-display, inherit);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.01em;
    font-size: clamp(28px, 7vw, 52px);
  }
  .p7-article__meta {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .p7-article__hero {
    margin: 24px 0 28px;
    background: var(--surface);
  }
  .p7-article__hero img {
    width: 100%;
    height: auto;
  }
  .p7-article__head + .p7-rte {
    margin-top: 24px;
  }

  /* Comments */
  .p7-article__comments {
    margin-top: 56px;
    border-top: 1px solid var(--hairline);
    padding-top: 28px;
  }
  .p7-article__comments-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
  }
  .p7-article__comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .p7-article__comment {
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .p7-article__comment-meta {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .p7-article__comment-body {
    font-size: 14px;
    line-height: 1.6;
  }
  .p7-article__comment-body p {
    margin: 0 0 10px;
  }
  .p7-article__comment-body p:last-child {
    margin-bottom: 0;
  }

  /* Comment form */
  .p7-article__form {
    margin-top: 32px;
  }
  .p7-article__form-title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
  }
  .p7-article__form-ok {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--ok-bg, #e8f5ec);
    color: var(--ok-fg, #1c6b39);
    font-size: 13px;
  }
  .p7-article__form-err {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--err-bg, #fdeaea);
    color: var(--err-fg, #b32020);
    font-size: 13px;
  }
  .p7-article__form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 640px) {
    .p7-article__form-row {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .p7-article__field {
    margin-bottom: 14px;
  }
  .p7-article__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .p7-article__field input,
  .p7-article__field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
  }
  .p7-article__field input:focus,
  .p7-article__field textarea:focus {
    outline: 0;
    border-color: var(--text);
  }
  .p7-article__field textarea {
    resize: vertical;
    min-height: 120px;
  }
  .p7-article__form-note {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--text-faint);
  }
/* END_SECTION:p7-article */

/* START_SECTION:p7-blog (INDEX:2) */
.p7-blog {
    padding: 24px 0 80px;
    color: var(--text);
  }
  .p7-blog__head {
    padding: 10px 0 22px;
  }
  .p7-blog__title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.01em;
    font-size: clamp(30px, 8vw, 60px);
  }
  .p7-blog__empty {
    margin: 0;
    padding: 40px 0 16px;
    font-size: 14px;
    color: var(--text-muted);
  }
  .p7-blog__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px 16px;
  }
  @media (min-width: 640px) {
    .p7-blog__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .p7-blog__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .p7-blog__card {
    display: block;
    color: var(--text);
    text-decoration: none;
  }
  .p7-blog__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--surface);
    margin-bottom: 12px;
  }
  .p7-blog__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .p7-blog__card:hover .p7-blog__img {
    transform: scale(1.04);
  }
  /* Intentionally empty placeholder — explicit display so no :empty rule can
     collapse it. */
  .p7-blog__noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--surface);
  }
  .p7-blog__meta {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .p7-blog__card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
  }
  .p7-blog__card:hover .p7-blog__card-title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .p7-blog__excerpt {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
  }
  .p7-blog__card:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .p7-blog__img {
      transition: none;
    }
    .p7-blog__card:hover .p7-blog__img {
      transform: none;
    }
  }
/* END_SECTION:p7-blog */

/* START_SECTION:p7-cart (INDEX:3) */
.p7-cart-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px 0 96px;
    color: var(--fg);
    font-family: var(--font-body);
  }
  .p7-cart-page__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
  }
  .p7-cart-page__header h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-heading-weight);
    font-size: clamp(30px, 6vw, 60px);
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .p7-cart-page__header p,
  .p7-cart-page__note,
  .p7-cart-page__variant {
    margin: 0;
    color: var(--dim);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .p7-cart-page__empty {
    display: grid;
    min-height: 320px;
    place-items: center;
    gap: 18px;
    text-align: center;
  }
  .p7-cart-page__empty p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
  }
  /* Checkout and the empty-state link are the solid pill (.p7-cta, defined
     once in p7-base.css) — this block only sizes them. Update cart is the
     quiet secondary. */
  .p7-cart-page__link,
  .p7-cart-page__checkout,
  .p7-cart-page__update {
    min-height: 48px;
    padding: 13px 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
  }
  .p7-cart-page__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
  }
  .p7-cart-page__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .p7-cart-page__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 36px;
    align-items: start;
    margin-top: 28px;
  }
  .p7-cart-page__items {
    border-top: 1px solid var(--line);
  }
  .p7-cart-page__item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 92px 120px;
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  .p7-cart-page__media {
    display: block;
    aspect-ratio: 1;
    /* Product shot field — rides --shot-bg (p7-base.css). */
    background: var(--shot-bg, #e8e8e8);
  }
  .p7-cart-page__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p7-cart-page__info {
    display: grid;
    gap: 8px;
  }
  .p7-cart-page__title {
    color: var(--fg);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
  }
  .p7-cart-page__title:hover,
  .p7-cart-page__remove:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .p7-cart-page__remove {
    width: fit-content;
    color: var(--dim);
    font-size: 12px;
    text-transform: uppercase;
  }
  .p7-cart-page__qty {
    display: grid;
    gap: 6px;
  }
  .p7-cart-page__qty label {
    color: var(--dim);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .p7-cart-page__qty input {
    width: 74px;
    height: 42px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .p7-cart-page__price {
    display: grid;
    justify-items: end;
    gap: 4px;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .p7-cart-page__price s {
    color: var(--faint);
    font-weight: 500;
  }
  /* Discounted line: sale price in accent, same as the card and PDP. */
  .p7-cart-page__price s ~ span {
    color: var(--accent);
  }
  .p7-cart-page__summary {
    position: sticky;
    top: calc(var(--marquee-h) + var(--header-h) + 20px);
    display: grid;
    gap: 16px;
    border-top: 1px solid var(--fg);
    padding-top: 18px;
  }
  .p7-cart-page__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
  .p7-cart-page__actions {
    display: grid;
    gap: 10px;
  }
  .p7-cart-page__update {
    border: 1px solid var(--line-2);
    border-radius: var(--cta-radius, 999px);
    background: transparent;
    color: var(--fg);
  }
  .p7-cart-page__update:hover {
    border-color: var(--fg);
  }
  .p7-cart-page__checkout:hover,
  .p7-cart-page__link:hover {
    filter: brightness(0.96);
  }
  @media (max-width: 860px) {
    .p7-cart-page {
      width: min(100% - 24px, 640px);
      padding-top: 28px;
    }
    .p7-cart-page__form {
      grid-template-columns: 1fr;
      gap: 26px;
    }
    .p7-cart-page__summary {
      position: static;
    }
    .p7-cart-page__item {
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 14px;
    }
    .p7-cart-page__qty,
    .p7-cart-page__price {
      grid-column: 2;
      justify-items: start;
    }
  }
/* END_SECTION:p7-cart */

/* START_SECTION:p7-collection-tiles (INDEX:4) */
.p7-tiles {
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px 14px 12px;
    background: var(--bg);
    color: var(--text);
  }
  .p7-tiles-heading {
    margin: 0 0 14px;
    font-family: var(--font-display, sans-serif);
    font-weight: 400;
    font-size: clamp(22px, 5vw, 32px);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .p7-tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--hairline);
  }
  .p7-tiles-item { margin: 0; }
  .p7-tiles-tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--surface);
  }
  .p7-tiles-media {
    aspect-ratio: 1 / 1;
    background: var(--surface);
  }
  .p7-tiles-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p7-tiles-img--placeholder {
    color: var(--text-faint);
    fill: currentColor;
  }
  .p7-tiles-link {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .p7-tiles-link:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: -2px;
  }
  .p7-tiles-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .p7-tiles-tile--linked .p7-tiles-img {
    transition: transform 0.35s ease;
  }
  .p7-tiles-tile--linked:hover .p7-tiles-img,
  .p7-tiles-tile--linked:focus-within .p7-tiles-img {
    transform: scale(1.03);
  }
  .p7-tiles-label {
    position: absolute;
    inset: auto 0 0 0;
    padding: 48px 12px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    color: var(--ink-inverse);
    font-family: var(--font-display, sans-serif);
    font-weight: 400;
    font-size: clamp(18px, 4.5vw, 26px);
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  @media (min-width: 768px) {
    .p7-tiles { padding: 44px 20px 16px; }
    .p7-tiles-heading { margin-bottom: 16px; }
    .p7-tiles-grid { grid-template-columns: repeat(4, 1fr); }
    .p7-tiles-label { font-size: clamp(16px, 1.8vw, 26px); padding: 56px 14px 12px; }
  }

  @media (min-width: 1200px) {
    .p7-tiles { padding: 52px 24px 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .p7-tiles-tile--linked .p7-tiles-img { transition: none; }
    .p7-tiles-tile--linked:hover .p7-tiles-img,
    .p7-tiles-tile--linked:focus-within .p7-tiles-img { transform: none; }
  }
/* END_SECTION:p7-collection-tiles */

/* START_SECTION:p7-contact (INDEX:6) */
.p7-contact-section {
    max-width: 640px;
    margin: 0 auto;
    padding: 36px 18px 72px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body, sans-serif);
  }

  /* Header */
  .p7-contact-head {
    margin: 0 0 28px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--hairline);
  }
  .p7-contact-eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .p7-contact-title {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-weight: 400;
    font-size: clamp(34px, 9vw, 56px);
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .p7-contact-intro {
    margin: 14px 0 0;
    max-width: 60ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
  }
  .p7-contact-intro p { margin: 0 0 8px; }
  .p7-contact-intro p:last-child { margin-bottom: 0; }
  .p7-contact-intro a,
  .p7-contact-info-value a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Status notes — keep --ok-*/--err-* semantics */
  .p7-contact__ok,
  .p7-contact__err {
    margin: 0 0 18px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
  }
  .p7-contact__ok { background: var(--ok-bg); color: var(--ok-fg); }
  .p7-contact__err { background: var(--err-bg); color: var(--err-fg); }
  .p7-contact__ok p,
  .p7-contact__err p { margin: 0; }
  .p7-contact__err a { color: var(--err-fg); }

  /* Form */
  .p7-contact-row--2 { display: grid; grid-template-columns: 1fr; gap: 0; }
  .p7-contact-field { margin: 0 0 16px; }
  .p7-contact-label {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .p7-contact-req { color: var(--text-muted); }
  .p7-contact-input,
  .p7-contact-textarea {
    width: 100%;
    padding: 12px;
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    appearance: none;
  }
  .p7-contact-textarea { resize: vertical; min-height: 140px; }
  .p7-contact-input:focus-visible,
  .p7-contact-textarea:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 1px;
  }
  .p7-contact-actions { margin-top: 22px; }
  .p7-contact-submit {
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    border: none;
    border-radius: 0;
    background: var(--btn);
    color: var(--btn-fg);
    font-family: var(--font-body, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .p7-contact-submit:hover { background: var(--btn-hover); }
  .p7-contact-submit:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  /* Info panel */
  .p7-contact-info {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
  }
  .p7-contact-info-heading {
    margin: 0 0 18px;
    font-family: var(--font-display, sans-serif);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .p7-contact-info-group { margin: 0 0 16px; }
  .p7-contact-info-label {
    display: block;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .p7-contact-info-value { font-size: 14px; line-height: 1.6; }
  .p7-contact-info-value p { margin: 0 0 6px; }
  .p7-contact-info-value p:last-child { margin-bottom: 0; }

  @media (min-width: 768px) {
    .p7-contact-section { padding: 56px 24px 96px; }
    .p7-contact-section--split { max-width: 1080px; }
    .p7-contact-section--split .p7-contact-body {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 0 48px;
      align-items: start;
    }
    .p7-contact-section--split .p7-contact-info {
      margin-top: 0;
      padding-top: 0;
      padding-left: 40px;
      border-top: none;
      border-left: 1px solid var(--hairline);
    }
    .p7-contact-row--2 { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  }

  @media (min-width: 1200px) {
    .p7-contact-section--split { max-width: 1160px; }
    .p7-contact-section--split .p7-contact-body { gap: 0 72px; }
  }
/* END_SECTION:p7-contact */

/* START_SECTION:p7-customer-account (INDEX:7) */
.p7-acct__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 36px;
    align-items: start;
  }
  .p7-acct__details {
    border-top: 1px solid var(--text);
    padding-top: 18px;
    display: grid;
    gap: 10px;
    justify-items: start;
  }
  .p7-acct__line {
    margin: 0;
    font-size: 14px;
  }
  .p7-acct__address {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
  }
  .p7-acct__address p {
    margin: 0;
  }
  .p7-acct__addresses-link {
    margin-top: 8px;
  }
  @media (max-width: 860px) {
    .p7-acct__grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }
/* END_SECTION:p7-customer-account */

/* START_SECTION:p7-customer-addresses (INDEX:9) */
.p7-addr__new {
    margin-top: 0;
  }
  .p7-addr__empty {
    margin-top: 26px;
  }
  .p7-addr__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
  }
  .p7-addr__card {
    border: 1px solid var(--hairline);
    padding: 18px;
    display: grid;
    gap: 12px;
    align-content: start;
  }
  .p7-addr__badge {
    margin: 0;
    width: fit-content;
    background: var(--text);
    color: var(--bg);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
  }
  .p7-addr__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }
  .p7-addr__edit {
    margin-top: 0;
  }
  .p7-addr__delete {
    display: grid;
  }
  /* format_address may collapse in odd data states; keep the card's own
     display explicit rather than relying on any vendor default. */
  .p7-addr__body {
    display: block;
  }
  /* The province field is toggled via the hidden attribute; our .p7-cust__field
     display:grid would silently beat the UA's [hidden] rule, so make it explicit. */
  .p7-addr__province[hidden] {
    display: none;
  }
/* END_SECTION:p7-customer-addresses */

/* START_SECTION:p7-customer-order (INDEX:11) */
.p7-customer-order .p7-cust__sub {
    margin-top: -14px;
  }
  .p7-order__cancelled {
    margin-top: 16px;
  }
  .p7-order__items {
    margin-top: 24px;
  }
  .p7-order__items s {
    color: var(--text-muted);
    margin-right: 6px;
  }
  .p7-order__totals {
    display: grid;
    gap: 8px;
    justify-self: end;
    margin: 18px 0 0 auto;
    width: min(360px, 100%);
    font-size: 14px;
  }
  .p7-order__trow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .p7-order__trow--total {
    border-top: 1px solid var(--text);
    padding-top: 10px;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .p7-order__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 40px;
  }
  .p7-order__address {
    border-top: 1px solid var(--hairline);
    padding-top: 16px;
    font-size: 14px;
    line-height: 1.5;
  }
  .p7-order__address p {
    margin: 0 0 8px;
  }
/* END_SECTION:p7-customer-order */

/* START_SECTION:p7-header (INDEX:16) */
/* Glass bar (owner 2026-08-05): 80% of the page background with the content
     behind it blurred, so the header reads as a layer over the page rather
     than a solid slab. saturate() compensates for the wash-out a plain blur
     gives — without it the colour under the bar goes flat and grey.

     The fallback is the deliberate part: browsers without backdrop-filter
     (and anyone with "reduce transparency" on) get the FULL-opacity --bg via
     @supports not, because 80% with no blur behind it leaves nav text sitting
     on whatever photography scrolls under, which is unreadable rather than
     merely less pretty. */
  .p7-hd {
    position: static;
    z-index: var(--p7-layer-header, 40);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(24px) saturate(1.55);
    -webkit-backdrop-filter: blur(24px) saturate(1.55);
    border-bottom: 1px solid var(--hairline);
    transition: transform 0.3s ease, box-shadow 0.2s ease;
    will-change: transform;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .p7-hd { background: var(--bg); }
  }
  .shopify-section:has(> .p7-hd) {
    position: sticky;
    top: 0;
    z-index: var(--p7-layer-header, 40);
  }
  .p7-hd.is-stuck { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); }
  html.p7-nav-up .p7-hd { transform: translateY(-100%); }

  /* The bar itself stays full-bleed (the glass has to span the viewport), but
     its CONTENTS share the page container — same 1440px cap as .p7-clx, same
     gutter token as the homepage rail. Without this the inner row ran the full
     viewport width, so on any screen wider than 1440 the logo sat out at the
     window edge while the page content was centred well inside it. Now the
     logo lines up with the left edge of the grid below it. */
  .p7-hd__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    max-width: 1440px;
    margin-inline: auto;
    min-height: var(--header-h);
    padding: 0.4rem var(--p7-home-gutter, 16px);
  }
  .p7-hd__logo { display: flex; align-items: center; justify-self: start; min-width: 0; }
  .p7-hd__logo img { display: block; }

  /* Scheme-swapped wordmark. The dark-scheme copy is its own white PNG rather
     than a filter: invert() of the light one, because the source art is an
     opaque JPG that would invert to a black box. Selector pairing mirrors
     .p7-pdp__tech-logo: the OS query only applies while the shopper has not
     forced light, so the manual toggle still wins. Both rules out-specify
     `.p7-hd__logo img` above. */
  .p7-hd__logo .p7-hd__logo-img--dark { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .p7-hd__logo .p7-hd__logo-img--light { display: none; }
    :root:not([data-theme='light']) .p7-hd__logo .p7-hd__logo-img--dark { display: block; }
  }
  :root[data-theme='dark'] .p7-hd__logo .p7-hd__logo-img--light { display: none; }
  :root[data-theme='dark'] .p7-hd__logo .p7-hd__logo-img--dark { display: block; }

  /* Tightened 2026-08-05: 0.82rem/0.18em at up to 2.5rem gaps spread six items
     plus the scheme toggle across most of the bar. Smaller type, tighter
     tracking and roughly half the gap pull the nav back into a group.
     The search panel below keeps its own type scale — this is nav only. */
  .p7-hd__nav { display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem); justify-self: center; }
  .p7-hd__nav a {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    padding: 0.45rem 0.4rem;
    border-bottom: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
  }
  .p7-hd__nav a:hover { border-bottom-color: var(--text); }
  .p7-hd__nav a.p7-nav__sale-link {
    color: var(--p7-nav-sale-color, #8f1812);
    font-weight: 800;
  }
  .p7-hd__nav a.p7-nav__sale-link:hover {
    border-bottom-color: var(--p7-nav-sale-color, #8f1812);
  }
  .p7-hd__nav a.is-active {
    border-bottom-color: transparent;
    background: var(--p7-nav-active-bg, var(--text));
    color: var(--p7-nav-active-fg, var(--bg));
  }
  /* Dark scheme: REVERSE the pair (owner 2026-08-05). The saved settings are a
     near-black chip with white text — correct on a white header, but on the dark
     header it paints black-on-black and the active item reads as a hole rather
     than a highlight. Swapping the two settings gives a light chip with dark
     text and needs no second pair of settings to keep in sync.

     :not(.p7-nav__sale-link) is load-bearing: these selectors carry a higher
     class count than the sale-link rule below, so without it an active Sale
     link would lose its red and take the swapped colours instead. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .p7-hd__nav a.is-active:not(.p7-nav__sale-link) {
      background: var(--p7-nav-active-fg, var(--fg));
      color: var(--p7-nav-active-bg, var(--bg));
    }
  }
  :root[data-theme='dark'] .p7-hd__nav a.is-active:not(.p7-nav__sale-link) {
    background: var(--p7-nav-active-fg, var(--fg));
    color: var(--p7-nav-active-bg, var(--bg));
  }
  .p7-hd__nav a.p7-nav__sale-link.is-active {
    background: var(--p7-nav-sale-color, #8f1812);
    color: var(--ink-inverse);
  }

  .p7-hd__icons {
    justify-self: end;
    display: flex;
    gap: 0.85rem;
    align-items: center;
  }

  /* ---- Colour scheme toggle (Light / Dark) ----
     Segmented pill — the active segment fills with the ink colour so the
     current mode reads at a glance. One instance in the desktop nav, one in
     the mobile drawer; p7-header.js keeps every instance in sync. */
  .p7-scheme {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 2px;
    padding: 2px;
    border: 1.4px solid var(--border);
    border-radius: 999px;
    background: transparent;
  }
  .p7-scheme__opt {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .p7-scheme__opt svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  .p7-scheme__opt:hover {
    color: var(--text);
  }

  /* Active segment. Driven by <html data-theme> + the OS query rather than by
     aria-pressed, so the right segment is filled on first paint — including
     the untouched "follow the OS" default, where <html> carries no data-theme
     at all and Liquid has no way to know which one to mark. p7-header.js
     mirrors the same state onto aria-pressed for assistive tech.

     The four selectors are mutually exclusive — exactly one ever matches — so
     the inactive segment keeps the base styling above, :hover included. */
  :root[data-theme='light'] .p7-scheme__opt[data-p7-scheme-mode='light'],
  :root[data-theme='dark'] .p7-scheme__opt[data-p7-scheme-mode='dark'] {
    background: var(--text);
    color: var(--bg);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .p7-scheme__opt[data-p7-scheme-mode='light'] {
      background: var(--text);
      color: var(--bg);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .p7-scheme__opt[data-p7-scheme-mode='dark'] {
      background: var(--text);
      color: var(--bg);
    }
  }

  .p7-hd__searchbtn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .p7-hd__searchbtn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  /* Same glass as the bar — the panel drops out of the header's bottom edge,
     so a solid background here would read as a separate slab hanging off a
     translucent one. */
  .p7-hd__searchpanel {
    border-top: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .p7-hd__searchpanel { background: var(--bg); }
  }
  /* Dawn's base.css carries `div:empty { display: none }`, which has silently
     killed p7 overlays before. This panel always has children, but keep the
     display explicit so it cannot regress the same way. */
  .p7-hd__searchpanel[hidden] { display: none; }
  .p7-hd__searchpanel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 12px clamp(16px, 4vw, 40px);
  }
  .p7-hd__searchclose {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
  }
  .p7-hd__searchclose svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }
  .p7-hd__searchclose:hover { color: var(--text); }

  .p7-hd__search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    height: 44px;
    border: 1px solid var(--hairline);
    background: var(--bg);
  }
  .p7-hd__search:focus-within {
    border-color: var(--text);
  }
  .p7-hd__search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0;
    outline: 0;
  }
  .p7-hd__search input::placeholder {
    color: var(--text-muted);
  }
  .p7-hd__search button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .p7-hd__search svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }
  /* Was an absolutely-positioned overlay that appeared on HOVER with a
     0 12px 28px drop shadow — it fired whenever the cursor crossed the header.
     Now it is static content inside the panel the user deliberately opened. */
  .p7-hd__popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 clamp(16px, 4vw, 40px) 14px;
  }
  .p7-hd__popular span,
  .p7-hd__popular a {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }
  .p7-hd__popular span {
    color: var(--text-muted);
  }
  .p7-hd__popular a {
    padding: 7px 8px;
    border: 1px solid var(--hairline);
    color: var(--text);
  }
  .p7-hd__popular a:hover,
  .p7-hd__popular a:focus-visible {
    border-color: var(--text);
    outline: 0;
  }

  .p7-hd__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1.4px solid var(--border);
    color: var(--text);
    background: transparent;
    font-family: var(--font-display);
    font-size: 0.72rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }
  .p7-hd__cart:hover { border-color: var(--text); }
  /* Filled cart = fixed sale red in both schemes. Do not use --accent here:
     it deliberately flips to salmon in dark mode for sale prices. */
  .p7-hd__cart.is-filled { background: #c1272d; border-color: #c1272d; color: #ffffff; }
  .p7-hd__cart.is-bumped { transform: scale(1.18); }
  .p7-hd__cart .cart-count { pointer-events: none; background: none; color: inherit; min-width: 0; height: auto; padding: 0; }

  .p7-hd__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text);
  }
  .p7-hd__burger span { display: block; width: 22px; height: 2px; background: currentColor; margin: 0 auto; }

  /* ---- Menu drawer ---- */
  .p7-mnav { position: fixed; inset: 0; z-index: var(--p7-layer-drawer, 1000); }
  .p7-mnav[hidden] { display: none; }
  /* Scoped to #p7-mnav ON PURPOSE. Dawn's `div:empty { display: none }` is
     specificity (0,1,1); a bare `.p7-mnav__scrim` is only (0,1,0) and LOSES,
     so the scrim stayed hidden and tap-outside-to-close (data-p7-mnav-close)
     stayed dead. The id lifts this to (1,1,0) and wins. */
  #p7-mnav .p7-mnav__scrim {
    display: block;
  }
  .p7-mnav__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .p7-mnav__panel {
    /* One padding value for the drawer. Several children deliberately break
       out of it (active nav chip, secondary banner, promo) by negating this
       var — before, each of them repeated the clamp() by hand. */
    --p7-mnav-pad: clamp(1.25rem, 5vw, 2rem);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    height: 100dvh;
    width: min(86vw, 380px);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(24px) saturate(1.55);
    -webkit-backdrop-filter: blur(24px) saturate(1.55);
    display: flex;
    flex-direction: column;
    padding: var(--p7-mnav-pad);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .p7-mnav__panel { background: var(--bg); }
  }
  .p7-mnav.is-open .p7-mnav__scrim { opacity: 1; }
  .p7-mnav.is-open .p7-mnav__panel { transform: translateX(0); }

  /* Drawer top bar — close first, scheme toggle beside it. Both controls
     take their height from one var so they line up exactly; everything is
     border-box (critical.css `* { box-sizing: border-box }`), so the pill's
     border and padding stay inside the 2.75rem rather than adding to it. */
  .p7-mnav__top {
    --p7-mnav-ctl-h: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .p7-mnav__close {
    width: var(--p7-mnav-ctl-h);
    height: var(--p7-mnav-ctl-h);
    display: grid;
    place-items: center;
    /* Fixed red in BOTH schemes, not var(--accent): --accent flips to salmon
       #ff9b91 in dark, which does not read as a close affordance. This is the
       only red circle in the chrome, so it is unambiguous. */
    background: #c1272d;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .p7-mnav__close:hover { background: #a3231b; }
  .p7-mnav__close:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
  .p7-mnav__close svg { width: 1.15rem; height: 1.15rem; }

  /* Drawer instance of the scheme pill. The track is FILLED (--panel-2 rides
     the scheme: darker than the panel in light, lighter in dark) and the
     segments are elongated, so it reads as a deliberate control up here
     rather than a pair of loose icons. */
  .p7-mnav__top .p7-scheme {
    height: var(--p7-mnav-ctl-h);
    background: var(--panel-2);
    border-color: var(--border);
    padding: 4px;
    gap: 4px;
  }
  .p7-mnav__top .p7-scheme__opt {
    width: 3.6rem;
    height: 100%;
    border-radius: 999px;
  }
  .p7-mnav__top .p7-scheme__opt svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .p7-mnav__nav { display: flex; flex-direction: column; gap: 0.15rem; }
  .p7-mnav__nav a {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 4.6vw, 1.4rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--text);
    padding: 0.4rem 0;
  }
  .p7-mnav__nav a.p7-nav__sale-link {
    color: var(--p7-nav-sale-color, #8f1812);
  }
  /* Current page marker (owner 2026-08-05). Was a filled full-width chip —
     too heavy for what is only a "you are here" hint. Now a thin, full-height
     rule pinned to the drawer's left edge: the label keeps its normal ink and
     sits on exactly the same x as every other item, so nothing in the list
     shifts. Absolutely positioned, so it takes the panel's left edge without
     the negative-margin/padding pair the chip needed. */
  .p7-mnav__nav a.is-active {
    position: relative;
    font-weight: 700;
  }
  .p7-mnav__nav a.is-active::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--p7-mnav-pad));
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--p7-nav-active-bg, var(--text));
  }
  /* Same reversal as the desktop nav — see the note there. The saved setting
     is a near-black chip colour, which on the dark panel would paint an
     invisible marker, so dark swaps in the other half of the pair. Only the
     4px rule needs it now; the label ink no longer changes at all. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .p7-mnav__nav a.is-active::before {
      background: var(--p7-nav-active-fg, var(--fg));
    }
  }
  :root[data-theme='dark'] .p7-mnav__nav a.is-active::before {
    background: var(--p7-nav-active-fg, var(--fg));
  }
  /* An active Sale link marks itself in the Sale red instead — currentColor is
     already that red, in both schemes, so this needs no second setting. */
  .p7-mnav__nav a.is-active.p7-nav__sale-link::before {
    background: currentColor;
  }

  /* Contact / Returns / Privacy — its own banner, full-bleed, sitting
     directly on top of the promo image (owner 2026-08-05). It carries the
     margin-top: auto that used to be on the promo, so the pair stacks as one
     block at the drawer bottom with no gap between them. */
  .p7-mnav__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-top: auto;
    margin-left: calc(-1 * var(--p7-mnav-pad));
    margin-right: calc(-1 * var(--p7-mnav-pad));
    padding: 0.95rem var(--p7-mnav-pad);
    background: var(--marquee-bg);
  }
  :root[data-theme='dark'] .p7-mnav__secondary {
    background: var(--panel-3);
  }
  /* No promo block configured — the banner is then the last child, so it
     takes the drawer's bottom edge itself. */
  .p7-mnav__secondary:last-child {
    margin-bottom: calc(-1 * var(--p7-mnav-pad));
  }
  .p7-mnav__secondary a {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--marquee-fg);
    opacity: 0.75;
    transition: opacity 0.15s ease;
  }
  .p7-mnav__secondary a:hover { opacity: 1; }

  /* Promo image block — pinned to the drawer bottom, edge to edge. margin-top
     is 0, not auto: the secondary banner directly above now carries the auto
     that pushes the pair down, and a second auto here would reopen a gap
     between the banner and the image. */
  .p7-mnav__promo {
    position: relative;
    display: block;
    margin-top: 0;
    margin-left: calc(-1 * var(--p7-mnav-pad));
    margin-right: calc(-1 * var(--p7-mnav-pad));
    margin-bottom: calc(-1 * var(--p7-mnav-pad));
    /* Fixed dark chrome. This was background: var(--btn) paired with the FIXED
       white --ink-inverse — an inverting surface under non-inverting ink. In
       light that is a black promo panel with white type, as intended; in dark
       --btn resolves to #ededed and the white type lands on a near-white
       panel. --btn is an ink token (see its definition in p7-overrides.css)
       and must not back a panel. */
    background: var(--marquee-bg);
    color: var(--ink-inverse);
    overflow: hidden;
  }
  .p7-mnav__promo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.38);
    pointer-events: none;
  }
  .p7-mnav__promo-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    opacity: 0.5;
    filter: grayscale(1);
  }
  .p7-mnav__promo-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 2.25rem 1.5rem 1.35rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0));
  }
  .p7-mnav__promo-body--solid {
    position: static;
    z-index: 0;
    background: none;
    padding: 1.5rem;
    /* No photo behind it — the body sits directly on var(--btn), which
       inverts with the scheme, so the ink must be --btn-fg (the image
       variant keeps white ink over its dark photo gradient). */
    color: var(--btn-fg);
  }
  .p7-mnav__promo-eyebrow {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    opacity: 0.85;
  }
  .p7-mnav__promo-heading {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 7vw, 2rem);
    text-transform: uppercase;
    line-height: 0.95;
  }
  .p7-mnav__promo-cta {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    /* follows the body ink: white over the photo, --btn-fg on the solid variant */
    border: 1px solid currentColor;
    padding: 0.55rem 0.9rem;
  }

  @media (max-width: 820px) {
    .p7-hd__nav { display: none; }
    .p7-hd__icons { gap: 0.55rem; }
    /* The search field is no longer in the header bar — it lives in the panel,
       full width — so there is nothing left to squeeze here. Logo sizing is
       handled by the --p7-hd-logo-size swap in the section's scoped style block. */
    .p7-hd__burger { display: flex; }
    .p7-hd__inner { grid-template-columns: 1fr auto; }
  }
  @media (min-width: 821px) {
    .p7-mnav { display: none; }
  }

  html.p7-no-scroll { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .p7-hd,
    .p7-mnav__panel,
    .p7-mnav__scrim { transition: none; }
  }
/* END_SECTION:p7-header */

/* START_SECTION:p7-hero-image (INDEX:17) */
.p7-hero-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--p7-hero-empty-bg, #0d0d0d);
    color: var(--p7-hero-text, #ffffff);
  }
  @media (min-width: 750px) {
    .p7-hero-image {
      aspect-ratio: 16 / 9;
    }
  }
  .p7-hero-image__media,
  .p7-hero-image__media picture,
  .p7-hero-image__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .p7-hero-image__img {
    object-fit: cover;
    object-position: var(--p7-focal-mobile, 50% 50%);
  }
  @media (min-width: 750px) {
    .p7-hero-image__img {
      object-position: var(--p7-focal-desktop, 50% 50%);
    }
  }
  .p7-hero-image__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .p7-hero-image--overlay-none .p7-hero-image__shade {
    display: none;
  }
  .p7-hero-image--overlay-solid .p7-hero-image__shade {
    background: rgba(0, 0, 0, var(--p7-hero-overlay, 0.35));
  }
  .p7-hero-image--overlay-bottom .p7-hero-image__shade {
    background: linear-gradient(to top, rgba(0, 0, 0, var(--p7-hero-overlay, 0.35)), rgba(0, 0, 0, 0) 68%);
  }
  .p7-hero-image--overlay-left .p7-hero-image__shade {
    background: linear-gradient(to right, rgba(0, 0, 0, var(--p7-hero-overlay, 0.35)), rgba(0, 0, 0, 0) 72%);
  }
  .p7-hero-image--overlay-right .p7-hero-image__shade {
    background: linear-gradient(to left, rgba(0, 0, 0, var(--p7-hero-overlay, 0.35)), rgba(0, 0, 0, 0) 72%);
  }
  .p7-hero-image__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    padding: var(--p7-hero-pad-mobile, 24px);
  }
  @media (min-width: 750px) {
    .p7-hero-image__content {
      padding: var(--p7-hero-pad-desktop, 56px);
    }
  }
  .p7-hero-image__copy {
    display: grid;
    gap: 12px;
    width: min(var(--p7-hero-copy-max, 520px), 100%);
  }
  .p7-hero-image__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .p7-hero-image__heading {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: var(--p7-hero-heading-mobile, 42px);
    font-weight: var(--font-heading-weight);
    line-height: 0.96;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  @media (min-width: 750px) {
    .p7-hero-image__heading {
      font-size: var(--p7-hero-heading-desktop, 72px);
    }
  }
  .p7-hero-image__body {
    max-width: 40em;
    font-size: 16px;
    line-height: 1.45;
  }
  .p7-hero-image__body p {
    margin: 0;
  }
  .p7-hero-image__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: fit-content;
    min-height: 46px;
    border: 1px solid var(--p7-hero-button-bg, #ffffff);
    padding: 0 20px;
    background: var(--p7-hero-button-bg, #ffffff);
    color: var(--p7-hero-button-fg, #0d0d0d);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
  }
  .p7-hero-image__button--outline {
    border-color: currentColor;
    background: transparent;
    color: currentColor;
  }
  .p7-hero-image__button[aria-disabled='true'] {
    pointer-events: none;
  }
  .p7-hero-image--desktop-top-left .p7-hero-image__content {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  .p7-hero-image--desktop-center-left .p7-hero-image__content {
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
  .p7-hero-image--desktop-bottom-left .p7-hero-image__content {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
  }
  .p7-hero-image--desktop-center-center .p7-hero-image__content {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .p7-hero-image--desktop-bottom-center .p7-hero-image__content {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
  }
  .p7-hero-image--desktop-bottom-right .p7-hero-image__content {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
  }
  .p7-hero-image--desktop-center-center .p7-hero-image__button,
  .p7-hero-image--desktop-bottom-center .p7-hero-image__button {
    justify-self: center;
  }
  .p7-hero-image--desktop-bottom-right .p7-hero-image__button {
    justify-self: end;
  }
  .p7-hero-image__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
  }
  @media (max-width: 749px) {
    .p7-hero-image--mobile-top .p7-hero-image__content {
      align-items: flex-start;
    }
    .p7-hero-image--mobile-center .p7-hero-image__content {
      align-items: center;
    }
    .p7-hero-image--mobile-bottom .p7-hero-image__content {
      align-items: flex-end;
    }
    .p7-hero-image--mobile-align-left .p7-hero-image__content {
      justify-content: flex-start;
      text-align: left;
    }
    .p7-hero-image--mobile-align-center .p7-hero-image__content {
      justify-content: center;
      text-align: center;
    }
    .p7-hero-image--mobile-align-center .p7-hero-image__button {
      justify-self: center;
    }
    .p7-hero-image__body {
      font-size: 15px;
    }
  }
/* END_SECTION:p7-hero-image */

/* START_SECTION:p7-hero-video (INDEX:18) */
.p7-hero { display: block; background: var(--p7-hero-bg, #0d0d0d); }
    .p7-hero__frame {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;                 /* mobile: square */
      overflow: hidden;
      background: var(--p7-hero-bg, #0d0d0d);
    }
    @media (min-width: 750px) {
      .p7-hero__frame { aspect-ratio: 16 / 9; }   /* desktop: landscape */
    }
    .p7-hero__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .p7-hero.is-playing .p7-hero__video,
    .p7-hero.has-poster .p7-hero__video { opacity: 1; }
    .p7-hero__placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
      background: var(--p7-hero-bg, #0d0d0d);
      color: #ffffff;
      transition: opacity 0.4s ease;
    }
    .p7-hero.is-playing .p7-hero__placeholder { opacity: 0; visibility: hidden; }
    .p7-hero__placeholder-label {
      font-family: var(--font-display, sans-serif);
      font-weight: var(--font-heading-weight);
      font-size: clamp(22px, 6vw, 52px);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.9;
    }
    .p7-hero__placeholder-hint {
      font-size: 12px;
      letter-spacing: 0.04em;
      opacity: 0.55;
    }
    @media (prefers-reduced-motion: reduce) {
      .p7-hero__video,
      .p7-hero__placeholder { transition: none; }
    }
/* END_SECTION:p7-hero-video */

/* START_SECTION:p7-list-collections (INDEX:19) */
.p7-clxlist {
    padding: 24px 0 80px;
    color: var(--text);
  }
  .p7-clxlist__head {
    padding: 10px 0 22px;
  }
  .p7-clxlist__title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.01em;
    font-size: clamp(30px, 8vw, 60px);
  }
  .p7-clxlist__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 8px;
  }
  @media (min-width: 640px) {
    .p7-clxlist__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .p7-clxlist__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .p7-clxlist__card {
    display: block;
    color: var(--text);
    text-decoration: none;
  }
  .p7-clxlist__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface);
    margin-bottom: 10px;
  }
  .p7-clxlist__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .p7-clxlist__card:hover .p7-clxlist__img {
    transform: scale(1.04);
  }
  /* Intentionally empty placeholder — explicit display so no :empty rule can
     collapse it. */
  .p7-clxlist__noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--surface);
  }
  .p7-clxlist__name {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .p7-clxlist__card:hover .p7-clxlist__name {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .p7-clxlist__count {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
  }
  .p7-clxlist__card:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .p7-clxlist__img {
      transition: none;
    }
    .p7-clxlist__card:hover .p7-clxlist__img {
      transform: none;
    }
  }
/* END_SECTION:p7-list-collections */

/* START_SECTION:p7-marquee (INDEX:20) */
.marquee.p7-listing.p7-marquee-banner {
    background: var(--p7-mq-bg, #0d0d0d);
    color: var(--p7-mq-fg, #ffffff);
    font-size: var(--p7-mq-size, 12px);
    letter-spacing: var(--p7-mq-tracking, 0.12em);
  }

  .marquee.p7-listing.p7-marquee-banner .marquee-track {
    animation-duration: var(--p7-mq-speed, 240s);
  }

  .marquee.p7-listing.p7-marquee-banner .marquee-seq {
    gap: var(--p7-mq-gap, 22px);
    padding-left: var(--p7-mq-gap, 22px);
  }

  .p7-marquee-banner__item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: max-content;
    line-height: 1;
  }

  .p7-marquee-banner__item--text {
    font-weight: 900;
  }

  .p7-marquee-banner__item--logo img {
    display: block;
    width: auto;
    max-width: 180px;
    height: min(var(--p7-mq-logo-height, 24px), 30px);
    object-fit: contain;
  }

  .p7-marquee-banner--pause-hover:hover .marquee-track {
    animation-play-state: paused;
  }
/* END_SECTION:p7-marquee */

/* START_SECTION:p7-page (INDEX:21) */
.p7-page {
    width: 100%;
    max-width: var(--p7-page-maxw, 680px);
    margin: 0 auto;
    padding: 40px 0 80px;
    color: var(--text);
  }
  .p7-page__head {
    padding: 0 0 18px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 26px;
  }
  .p7-page__title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.01em;
    font-size: clamp(30px, 8vw, 48px);
  }
/* END_SECTION:p7-page */

/* START_SECTION:p7-password-content (INDEX:22) */
.p7-pw {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 48px var(--page-margin, 18px);
    background: var(--p7-pw-bg, #0d0d0d);
    color: var(--p7-pw-fg, #ffffff);
    text-align: center;
  }
  .p7-pw__inner {
    width: min(100%, 420px);
  }
  .p7-pw__brand {
    margin: 0 0 40px;
    font-family: var(--font-display, inherit);
    font-size: 26px;
    letter-spacing: 0.22em;
  }
  .p7-pw__title {
    margin: 0 0 12px;
    font-family: var(--font-display, inherit);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.01em;
    font-size: clamp(28px, 7vw, 44px);
  }
  .p7-pw__message {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.75;
  }
  .p7-pw__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .p7-pw__error {
    grid-column: 1 / -1;
    margin: 0 0 10px;
    font-size: 13px;
    color: #ffb3ab;
  }
  .p7-pw__input {
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--p7-pw-fg, #ffffff) 35%, transparent);
    border-right: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    font-size: 14px;
  }
  .p7-pw__input::placeholder {
    color: color-mix(in srgb, var(--p7-pw-fg, #ffffff) 50%, transparent);
  }
  .p7-pw__input:focus {
    outline: 0;
    border-color: var(--p7-pw-fg, #ffffff);
  }
  .p7-pw__submit {
    height: 48px;
    padding: 0 22px;
    border: 1px solid var(--p7-pw-fg, #ffffff);
    border-radius: 0;
    background: var(--p7-pw-fg, #ffffff);
    color: var(--p7-pw-bg, #0d0d0d);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .p7-pw__submit:hover {
    background: transparent;
    color: var(--p7-pw-fg, #ffffff);
  }
  .p7-pw__submit:focus-visible {
    outline: 2px solid var(--p7-pw-fg, #ffffff);
    outline-offset: 2px;
  }
  .p7-pw__note {
    margin: 26px 0 0;
    font-size: 12px;
    opacity: 0.6;
  }
  .p7-pw__note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .p7-pw__submit {
      transition: none;
    }
  }
/* END_SECTION:p7-password-content */

/* START_SECTION:p7-product-lookbook (INDEX:24) */
.p7-lookbook {
    padding: clamp(40px, 6vw, 88px) 0;
    background: var(--bg, #ffffff);
    color: var(--text, #0d0d0d);
  }
  .p7-lookbook__inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
  }
  .p7-lookbook__head {
    max-width: 680px;
    margin-bottom: 24px;
  }
  .p7-lookbook__head p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .p7-lookbook__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 72px);
    line-height: 0.92;
    text-transform: uppercase;
  }
  .p7-lookbook__head div {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
  }
  .p7-lookbook__grid {
    display: grid;
    gap: 16px;
  }
  .p7-lookbook__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p7-lookbook__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .p7-lookbook__grid--stack {
    grid-template-columns: 1fr;
  }
  .p7-lookbook__item {
    min-width: 0;
  }
  .p7-lookbook__link {
    position: relative;
    display: block;
    min-height: 360px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #111111;
    color: #ffffff;
    text-decoration: none;
  }
  .p7-lookbook__grid--stack .p7-lookbook__link {
    aspect-ratio: 16 / 7;
  }
  .p7-lookbook__link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
  }
  a.p7-lookbook__link:hover img {
    transform: scale(1.03);
  }
  .p7-lookbook__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 8px;
    padding: clamp(18px, 3vw, 30px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05) 58%);
  }
  .p7-lookbook__eyebrow,
  .p7-lookbook__cta {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .p7-lookbook__title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 42px);
    line-height: 0.96;
    text-transform: uppercase;
  }
  .p7-lookbook__text {
    max-width: 36ch;
    font-size: 14px;
    line-height: 1.45;
  }
  .p7-lookbook__cta {
    width: fit-content;
    border-bottom: 2px solid currentColor;
    padding-bottom: 4px;
  }
  @media (max-width: 820px) {
    .p7-lookbook__grid--two,
    .p7-lookbook__grid--three {
      grid-template-columns: 1fr;
    }
    .p7-lookbook__grid--stack .p7-lookbook__link {
      aspect-ratio: 4 / 5;
    }
  }
/* END_SECTION:p7-product-lookbook */

/* START_SECTION:p7-product-related (INDEX:25) */
.p7-related-products {
    display: block;
    background: var(--bg, #ffffff);
    color: var(--text, #0d0d0d);
    padding: clamp(40px, 6vw, 80px) 0;
  }
  /* Explicit, never :empty — the section is hidden until the fetch lands. */
  .p7-related-products[hidden] {
    display: none;
  }
  .p7-related-products__inner {
    display: block;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
  }
  .p7-related-products__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
  }
  .p7-related-products__head p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .p7-related-products__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 64px);
    line-height: 0.92;
    text-transform: uppercase;
  }
  .p7-related-products__head a {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-underline-offset: 4px;
    white-space: nowrap;
  }
  /* Cards themselves come from snippets/p7-card-css.liquid (the unified
     card); this grid only sets the rail's column count and gap. */
  .p7-related-products__grid {
    display: grid;
    grid-template-columns: repeat(var(--p7-related-cols, 4), minmax(0, 1fr));
    gap: 18px;
  }
  @media (max-width: 900px) {
    .p7-related-products__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .p7-related-products__head {
      align-items: start;
      flex-direction: column;
    }
    .p7-related-products__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
  }
/* END_SECTION:p7-product-related */

/* START_SECTION:p7-product-story (INDEX:26) */
.p7-product-story {
    position: relative;
    overflow: hidden;
    background: var(--p7-story-bg, #0d0d0d);
    color: var(--p7-story-fg, #ffffff);
  }
  .p7-product-story__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p7-product-story--image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--p7-story-overlay, 0.35));
  }
  .p7-product-story__inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(56px, 8vw, 112px) 0;
  }
  .p7-product-story--split .p7-product-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
  }
  .p7-product-story__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }
  .p7-product-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p7-product-story__copy {
    max-width: 640px;
  }
  .p7-product-story--image .p7-product-story__copy {
    max-width: 720px;
  }
  .p7-product-story__eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .p7-product-story h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(36px, 7vw, 88px);
    line-height: 0.92;
    text-transform: uppercase;
  }
  .p7-product-story__body {
    margin-top: 18px;
    font-size: clamp(15px, 1.8vw, 20px);
    line-height: 1.45;
  }
  .p7-product-story__body p {
    margin: 0 0 12px;
  }
  .p7-product-story__body p:last-child {
    margin-bottom: 0;
  }
  .p7-product-story__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 24px;
    border: 1px solid currentColor;
    padding: 12px 18px;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }
  @media (max-width: 820px) {
    .p7-product-story--split .p7-product-story__inner {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:p7-product-story */

/* START_SECTION:p7-product (INDEX:27) */
.p7-pdp {
    --p7-pdp-sticky-layer: var(--p7-layer-pill, 70);
    --p7-pdp-dialog-layer: var(--p7-layer-modal, 1100);
    font-family: var(--font-body);
    color: var(--fg);
    background: var(--bg);
    padding: 16px 16px 64px;
  }
  .p7-pdp__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .p7-pdp__inner > * {
    min-width: 0;
  }
  .p7-pdp__crumbs--mobile {
    display: none;
  }
  .p7-pdp__crumbs .p7-crumbs {
    max-width: 1280px;
    margin: 0 auto;
  }

  /* ---- Gallery ---- */
  /* Image fields ride --shot-bg (owner call 2026-08-04): a translucent gray
     over the page background, slightly darker than the page in light and
     slightly lighter in dark. Visible once shots are transparent cutouts;
     opaque crops still carry their baked #e8e8e8 backdrop. */
  .p7-pdp__gallery {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .p7-pdp__main {
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: var(--shot-bg, #e8e8e8);
    touch-action: pan-y;
  }
  .p7-pdp__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.18s ease;
  }
  .p7-pdp__placeholder {
    width: 100%;
    height: 100%;
    color: var(--faint);
  }
  /* Thumb strip runs edge to edge and butts straight up against the main
     image — no gap between the thumbs and no gap above them, so the gallery
     reads as one block (owner 2026-08-05, matching the live theme).
     Mobile is the base case: a scroller showing four and a half, which is what
     makes it obvious the row keeps going. Desktop overrides to a 4-up grid. */
  .p7-pdp__thumbs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0;
    max-width: 100%;
  }
  .p7-pdp__thumbs::-webkit-scrollbar {
    display: none;
  }
  .p7-pdp__thumb {
    flex: 0 0 calc(100% / 4.5);
    aspect-ratio: 1 / 1;
    padding: 0;
    /* No border: adjacent 1px borders doubled into a 2px seam once the gap
       went. Selection is an inset outline instead, which paints over the
       image rather than taking layout space. */
    border: 0;
    /* Shot field — see the gallery note above. */
    background: var(--shot-bg, #e8e8e8);
    cursor: pointer;
    scroll-snap-align: start;
    overflow: hidden;
    /* Full colour throughout — no dimming of the unselected shots (owner
       2026-08-05). The active thumb carried a 2px inset outline until
       2026-08-09, when the owner called it overkill: the main image above the
       rail already says which shot you are on, so the box was restating it.
       There is now NO persistent selected-state styling here by design — do
       not "restore" it as a bug fix. :focus-visible below is a separate
       concern (keyboard position, not selection) and stays. */
  }
  .p7-pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .p7-pdp__thumb:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: -2px;
  }

  /* ---- Info column ---- */
  .p7-pdp__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }
  .p7-pdp__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .p7-pdp__price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 6px;
  }
  .p7-pdp__price {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }
  .p7-pdp__price--sale {
    color: var(--accent);
  }
  .p7-pdp__compare {
    font-size: 15px;
    color: var(--faint);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
  }
  .p7-pdp__siblings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: var(--p7-bucket-space-top, 4px) 0 var(--p7-bucket-space-bottom, 18px);
  }
  .p7-pdp__siblings--divider-top,
  .p7-pdp__siblings--divider-both {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .p7-pdp__siblings--divider-bottom,
  .p7-pdp__siblings--divider-both {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .p7-pdp__siblings-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--dim);
  }
  /* Tier tabs — segmented switcher, matched to the scheme toggle's drawer
     variant (p7-header.liquid .p7-mnav__top .p7-scheme, owner call 2026-08-06):
     a filled --panel-2 track with inset padding, fully-round segments, and the
     active tier riding as a --fg pill inside it.
     Deliberately NOT tabs: these are <a href> links to sibling PRODUCT PAGES,
     so the markup stays nav > a with aria-current="page". Do not add role="tab"
     or aria-selected here — it would tell a screen reader that activating one
     swaps an in-page panel, when it actually unloads the document.
     Segment count is dynamic (custom.sibling_parent_handles is a list metafield
     of any length), so nothing may assume exactly three; flex: 1 1 0 carries it. */
  .p7-pdp__siblings-list {
    position: relative;   /* containing block for the moving thumb */
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-2);
  }
  /* The moving pill. --bg, not --fg: --fg is maximum contrast and made this
     control the loudest thing on the page, competing with Add to Cart (owner
     2026-08-06, "too big of an eye-catcher"). --bg reads as the track being cut
     through to the page beneath — a lift in light (white on #E6E6E6) and a
     recess in dark (#1A1A1A on #3C3C3C), selected-looking either way.
     It also solves dark mode for free: nothing inverts, so the label keeps
     var(--fg) — light on dark — instead of the old dark-text-on-white-pill. */
  .p7-pdp__sibling-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;                /* JS sizes it; 0 until then so it cannot flash */
    border-radius: 999px;
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    z-index: 0;              /* BEHIND the labels — the sale red reads on top */
  }
  .p7-pdp__siblings-list.has-thumb .p7-pdp__sibling-thumb { opacity: 1; }
  /* Once JS owns the thumb, the per-link fill would double up behind it. */
  .p7-pdp__siblings-list.has-thumb .p7-pdp__sibling.is-active {
    background: transparent;
  }
  .p7-pdp__sibling {
    position: relative;
    z-index: 1;              /* above the thumb */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    /* Thinner than the 9px it was: this is navigation between listings, not a
       primary action, and it sat directly above Add to Cart at a similar
       height (owner 2026-08-06, "clearly differentiating it from the add to
       cart"). */
    padding: 5px 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--dim);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .p7-pdp__sibling-label {
    line-height: 1;
  }
  .p7-pdp__sibling-price {
    color: var(--faint);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  /* --panel, not --panel-2: the track is --panel-2 now, so the old hover was
     invisible against it. --panel reads as a lift in light (white on grey) and
     as a recess in dark (#1f1f24 on #2a2a30) — distinct either way. */
  .p7-pdp__sibling:hover:not(.is-active) {
    background: var(--panel);
    color: var(--fg);
  }
  /* No-JS / pre-thumb fallback, and the source of truth for what "active"
     looks like. Text keeps its OWN colour rather than inverting — that is what
     lets SALE and FINAL stay red while active (see below). */
  .p7-pdp__sibling.is-active {
    background: var(--bg);
    color: var(--fg);
  }
  .p7-pdp__sibling.is-active .p7-pdp__sibling-price {
    color: var(--fg);
  }
  .p7-pdp__sibling:focus-visible {
    /* Ring stays inward. The track no longer clips (overflow: hidden is gone
       now that segments sit inside 3px of padding), but an inward ring is
       still the right call — outlines follow border-radius, so it traces the
       pill, and an outward one would sit on the track border. */
    outline: 2px solid var(--fg);
    outline-offset: -2px;
  }
  /* Active no longer inverts, so the ring stays --fg like every other segment. */
  .p7-pdp__sibling.is-active:focus-visible {
    outline-color: var(--fg);
  }
  /* Owner call 2026-08-04 (rev 2): markdown tiers carry the sale red as TEXT
     only. (The translucent red fill on Final was tried and cut same day.)
     Rev 3, 2026-08-06: the `:not(.is-active)` qualifier is GONE — SALE and
     FINAL now read red whether active or not. Owner: "the red in the sale and
     final should come through on top of the pill that moves." It could not
     before, because active inverted the text to sit on a --fg fill, so
     selecting SALE turned its red label white. The thumb sitting behind the
     labels rather than filling the link is what makes this possible. */
  .p7-pdp__sibling--tier-sale .p7-pdp__sibling-label,
  .p7-pdp__sibling--tier-final .p7-pdp__sibling-label {
    color: var(--accent);
  }

  /* ---- Form / size picker ---- */
  .p7-pdp__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }
  .p7-pdp__variant {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .p7-pdp__variant + .p7-pdp__variant {
    margin-top: 2px;
  }
  .p7-pdp__variant-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .p7-pdp__variant-head--plain {
    justify-content: flex-start;
  }
  .p7-pdp__variant-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--fg);
  }
  .p7-pdp__variant-label--choice {
    min-height: 15px;
  }
  .p7-pdp__variant-selected {
    font-size: 12px;
    color: var(--dim);
  }
  .p7-pdp__sizes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
  }
  .p7-pdp__size {
    position: relative;
    min-width: 0;
  }
  .p7-pdp__size input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  /* Size chips — handoff chip language: 3px radius, --panel-2 fill, selected
     fills with --fg, unavailable keeps the strike-through but stays
     selectable (the filter is two-way). */
  .p7-pdp__size label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding: 9px 3px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: var(--panel-2);
    color: var(--fg);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .p7-pdp__size label:hover {
    border-color: var(--line-2);
  }
  .p7-pdp__size input:checked + label {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
    font-weight: 700;
  }
  .p7-pdp__size label.is-sold-out,
  .p7-pdp__size label.is-unavailable,
  .p7-pdp__size input:disabled + label {
    color: var(--faint);
    text-decoration: line-through;
    cursor: pointer;
    background: none;
    border-color: var(--line);
  }
  .p7-pdp__size label.is-unavailable {
    opacity: 0.52;
  }
  .p7-pdp__size input:checked + label.is-sold-out,
  .p7-pdp__size input:checked + label.is-unavailable {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
    opacity: 1;
  }
  .p7-pdp__size input:focus-visible + label {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
  .p7-pdp__size-guide {
    align-self: flex-start;
    font-size: 12px;
    color: var(--dim);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .p7-pdp__size-guide:hover {
    color: var(--fg);
  }

  /* ---- Payment options ---- */
  .p7-pdp__payment-terms {
    margin: -4px 0 12px;
    color: var(--dim);
    font-size: 12px;
    line-height: 1.45;
  }
  .p7-pdp__payment-terms shopify-payment-terms {
    display: block;
  }
  .p7-pdp__dynamic-checkout {
    display: block;
    margin-top: -4px;
  }
  .p7-pdp__dynamic-checkout[hidden] {
    display: none;
  }
  .p7-pdp__dynamic-checkout.is-disabled {
    display: none;
  }
  .p7-pdp__dynamic-checkout .shopify-payment-button {
    display: block;
  }
  /* Shop Pay pill (owner 2026-08-05).

     The wallet buttons render inside a CLOSED shadow DOM, so the
     .shopify-payment-button__button rules below cannot reach the actual
     "Pay with Shop" surface — rounding that wrapper left the branded button
     square inside a rounded box. Shopify's documented custom properties are
     the only supported hook:
     shopify.dev/docs/storefronts/themes/pricing-payments/accelerated-checkout

     Set on the container so they inherit into <shopify-accelerated-checkout>
     wherever the platform places it, and restated on the element itself.
     block-size is pinned to the same 48px as .p7-pdp__atc (docs cap it at
     55px); 999px radius makes it a true pill matching Add to Cart.
     --shop-pay-button-border-radius covers the legacy <shop-pay-button>
     element on the older accelerated-checkout implementation. */
  .p7-pdp__dynamic-checkout,
  .p7-pdp__dynamic-checkout shopify-accelerated-checkout,
  .p7-pdp__dynamic-checkout shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: 48px;
    --shopify-accelerated-checkout-button-border-radius: 999px;
    --shopify-accelerated-checkout-button-box-shadow: none;
    --shop-pay-button-border-radius: 999px;
  }
  /* Dynamic checkout pills. The branded button is Shop Pay's own purple
     (#5a31f4, brand — never altered, not theme-dependent); we only round it
     to the shared pill radius. */
  .p7-pdp__dynamic-checkout .shopify-payment-button__button {
    min-height: 48px;
    /* Fully rounded to match .p7-pdp__atc above — both pills, same radius,
       regardless of the merchant CTA radius setting (owner 2026-08-05). */
    border-radius: 999px;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .p7-pdp__dynamic-checkout .shopify-payment-button__button--unbranded,
  .p7-pdp__dynamic-checkout .shopify-payment-button__button--unbranded * {
    /* Descendant spans too — Shopify's own checkout CSS paints them white,
       which read as white-on-orange in the dark scheme. Black ink always. */
    background: var(--cta);
    color: var(--cta-fg);
  }
  .p7-pdp__dynamic-checkout .shopify-payment-button__button--unbranded:hover:not([disabled]) {
    background: var(--cta);
    filter: brightness(0.96);
  }
  .p7-pdp__dynamic-checkout .shopify-payment-button__more-options {
    color: var(--dim);
    font-size: 12px;
    text-underline-offset: 3px;
  }
  .p7-pdp.is-sticky-buy-ready .p7-pdp__dynamic-checkout {
    position: static;
    margin-top: -4px;
  }
  .p7-pdp.is-sticky-buy-ready .p7-pdp__dynamic-checkout.is-disabled {
    display: none;
  }

  /* ---- Sock add-on ---- */
  .p7-pdp__free-socks {
    display: grid;
    grid-template-columns: auto 72px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    cursor: pointer;
  }
  .p7-pdp__free-socks-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fg);
  }
  .p7-pdp__free-socks-media {
    display: block;
    width: 72px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--line);
    /* Product shot field — rides --shot-bg, see the gallery note. */
    background: var(--shot-bg, #e8e8e8);
  }
  .p7-pdp__free-socks-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p7-pdp__free-socks-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }
  .p7-pdp__free-socks-title {
    color: var(--fg);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.12;
    text-transform: uppercase;
  }
  .p7-pdp__free-socks-text,
  .p7-pdp__free-socks-size {
    color: var(--dim);
    font-size: 12px;
    line-height: 1.35;
  }
  .p7-pdp__free-socks-price {
    display: grid;
    gap: 3px;
    justify-items: end;
    white-space: nowrap;
  }
  .p7-pdp__free-socks-price span {
    color: var(--dim);
    font-size: 12px;
    line-height: 1;
    text-decoration: line-through;
  }
  .p7-pdp__free-socks-price strong {
    color: var(--accent);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }
  .p7-pdp__free-socks:has(.p7-pdp__free-socks-checkbox:focus-visible) {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
  .p7-pdp__free-socks:has(.p7-pdp__free-socks-checkbox:not(:checked)) {
    opacity: 0.72;
  }

  /* ---- Add to cart ---- */
  /* Solid pill: colour, ink and radius arrive from .p7-cta (defined once in
     p7-base.css); this block only sizes it and owns its states. */
  .p7-pdp__atc {
    /* Height is pinned to the same 48px as the Shop Pay button below it
       (.shopify-payment-button__button) so the two pills read as a pair —
       padding-driven height made this one noticeably fatter. Flex centres the
       label now that the vertical padding is gone. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    /* Fully rounded, matched to the Shop Pay pill below (owner 2026-08-05).
       Restated here rather than left to .p7-cta so the pair can't drift if
       the merchant CTA radius setting is dialled down. */
    border-radius: 999px;
    /* Restated from .p7-cta at section level so no later sheet (Shopify's
       accelerated-checkout CSS loads async) can flip the ink — black text
       on the orange pill in BOTH schemes. */
    background: var(--cta);
    color: var(--cta-fg);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .p7-pdp__atc:hover:not(:disabled) {
    filter: brightness(0.96);
  }
  .p7-pdp__atc:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
  /* Disabled = the outline pill (.p7-cta--outline look, mirrored on
     :disabled because variant JS toggles the attribute, not classes).
     Covers "Sold out", "Select a size" and "Unavailable". */
  .p7-pdp__atc:disabled {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--dim);
    cursor: not-allowed;
    filter: none;
  }
  .p7-pdp__atc[aria-busy='true'] {
    opacity: 0.7;
  }
  .p7-pdp__bucket-frame {
    margin: -6px 0 0;
    color: var(--dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .p7-pdp__sticky-buy {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: var(--p7-pdp-sticky-layer);
    width: min(560px, calc(100vw - 22px));
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .p7-pdp__sticky-buy[hidden] {
    display: none;
  }
  html.p7-cart-open .p7-pdp__sticky-buy,
  html.p7-no-scroll .p7-pdp__sticky-buy {
    display: none;
  }
  .p7-pdp__sticky-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 6px;
    align-items: center;
    pointer-events: auto;
  }
  .p7-pdp__sticky-row--no-pay {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  /* Slimmed 56px → 42px and made translucent (owner 2026-08-05) — it was
     covering too much of the page it floats over. The blur is what keeps the
     labels legible once the fills go semi-opaque; without it the button ink
     fights whatever photography scrolls underneath. */
  .p7-pdp__sticky-size,
  .p7-pdp__sticky-atc {
    min-height: 42px;
    border-radius: var(--cta-radius, 999px);
    cursor: pointer;
    font-family: var(--font-body);
    box-shadow: 0 6px 18px rgba(10, 10, 16, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .p7-pdp__sticky-size:focus-visible,
  .p7-pdp__sticky-atc:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
  }
  .p7-pdp__sticky-size {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--fg) 80%, transparent);
    background: color-mix(in srgb, var(--fg) 80%, transparent);
    color: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0 4px;
  }
  .p7-pdp__sticky-size span {
    color: var(--bg);
    opacity: 0.62;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }
  .p7-pdp__sticky-size strong {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
  }
  .p7-pdp__sticky-size.has-size {
    background: color-mix(in srgb, var(--fg) 80%, transparent);
    color: var(--bg);
  }
  .p7-pdp__sticky-atc {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 6px;
    border: 0;
    background: color-mix(in srgb, var(--cta) 82%, transparent);
    color: var(--cta-fg);
    padding: 0 11px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    min-width: 0;
    overflow: hidden;
    text-transform: uppercase;
  }
  /* Full strength once the pointer is on it — translucency is for the resting
     state, not for the moment of committing to the purchase. */
  .p7-pdp__sticky-atc:hover:not(:disabled) {
    background: var(--cta);
    filter: brightness(0.96);
  }
  .p7-pdp__sticky-atc:disabled {
    background: color-mix(in srgb, var(--panel-2) 82%, transparent);
    color: var(--faint);
    cursor: not-allowed;
  }
  .p7-pdp__sticky-atc[aria-busy='true'] {
    opacity: 0.72;
  }
  .p7-pdp__sticky-atc-main {
    display: block;
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .p7-pdp__sticky-atc-price {
    grid-column: 3;
    justify-self: end;
    min-width: 28px;
    text-align: right;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.72;
    white-space: nowrap;
  }
  .p7-pdp__size-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--p7-pdp-dialog-layer);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.18);
  }
  .p7-pdp__size-dialog[hidden] {
    display: none;
  }
  .p7-pdp__size-dialog-panel {
    width: min(390px, 100%);
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    backdrop-filter: blur(18px) saturate(1.18);
    box-shadow: 0 22px 70px rgba(12, 12, 16, 0.18);
  }
  .p7-pdp__size-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .p7-pdp__size-dialog-head h2 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 0.95;
    text-transform: uppercase;
  }
  .p7-pdp__size-dialog-head p {
    margin: 0;
    color: var(--dim);
    font-size: 12px;
    line-height: 1.35;
  }
  .p7-pdp__size-dialog-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .p7-pdp__size-dialog-copy p {
    flex: 1 1 auto;
  }
  .p7-pdp__memory-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fg);
    cursor: pointer;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .p7-pdp__memory-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .p7-pdp__memory-switch {
    position: relative;
    width: 38px;
    height: 21px;
    border: 1px solid var(--fg);
    border-radius: 999px;
    background: var(--fg);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .p7-pdp__memory-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg);
    transform: translateX(17px);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .p7-pdp__memory-toggle input:not(:checked) + .p7-pdp__memory-switch {
    border-color: var(--line);
    background: var(--panel-2);
  }
  .p7-pdp__memory-toggle input:not(:checked) + .p7-pdp__memory-switch::after {
    background: var(--dim);
    transform: translateX(0);
  }
  .p7-pdp__memory-toggle input:focus-visible + .p7-pdp__memory-switch {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
  .p7-pdp__size-dialog-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: none;
    color: var(--fg);
    cursor: pointer;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
  }
  .p7-pdp__size-dialog-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 12px;
  }
  .p7-pdp__size-dialog-option {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: var(--panel-2);
    color: var(--fg);
    cursor: pointer;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .p7-pdp__size-dialog-option.is-selected {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--bg);
    font-weight: 700;
  }
  .p7-pdp__size-dialog-option.is-sold-out,
  .p7-pdp__size-dialog-option.is-unavailable {
    color: var(--faint);
    text-decoration: line-through;
    background: none;
    border-color: var(--line);
  }
  .p7-pdp__size-dialog-actions {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .p7-pdp__size-dialog-actions button {
    border: 0;
    background: none;
    color: var(--fg);
    min-height: 44px;
    padding: 0 2px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .p7-pdp__size-dialog-close:focus-visible,
  .p7-pdp__size-dialog-option:focus-visible,
  .p7-pdp__size-dialog-actions button:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
  @media (max-width: 520px) {
    .p7-pdp {
      padding: 0 0 132px;
    }
    .p7-pdp__inner {
      gap: 0;
    }
    .p7-pdp__crumbs--desktop {
      display: none;
    }
    .p7-pdp__crumbs--mobile {
      display: block;
      border-bottom: 1px solid var(--line);
    }
    .p7-pdp__crumbs--mobile .p7-crumbs {
      padding: 10px 16px;
    }
    .p7-pdp__gallery {
      gap: 0;
    }
    .p7-pdp__main {
      border-bottom: 0;
    }
    .p7-pdp__thumbs {
      padding: 0;
    }
    .p7-pdp__info {
      padding: 22px 16px 0;
      gap: 0;
    }
    /* The sticky-bar geometry overrides that used to sit here (56px pills,
       12px label) are gone — they were re-stating the base rules at a
       marginally different size, and after the 42px slim-down they were the
       ones actually winning on a phone, so the base change had no effect
       here. Only the genuinely mobile-only rules remain. */
    .p7-pdp__sticky-atc-price {
      display: none;
    }
    /* Clears the sticky bar: 14px bottom offset + 42px bar + 12px gap. */
    .p7-pdp__dynamic-checkout {
      bottom: calc(68px + env(safe-area-inset-bottom));
    }
    .p7-pdp__free-socks {
      grid-template-columns: auto 58px minmax(0, 1fr);
    }
    .p7-pdp__free-socks-media {
      width: 58px;
    }
    .p7-pdp__free-socks-price {
      grid-column: 3;
      justify-items: start;
    }
  }

  /* ---- Description / Technology blocks (design handoff, PDP lockup) ----
     Everything below the buy block sits under a small tracked eyebrow label:
     Description first, then the Technology group, then the accordions. */
  .p7-pdp__block-label {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .p7-pdp__desc-block {
    display: block;
    margin: 26px 0 0;
  }
  .p7-pdp__desc-block[hidden] {
    display: none;
  }
  .p7-pdp__desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
  }
  /* Single source of truth: the theme owns description typography. Product /
     child descriptions imported or pasted from legacy rich text carry inline
     font-size / font-family on <span>s (e.g. style="font-size:1rem") that beat
     theme CSS and make random chunks change size. Neutralize any inline-styled
     node so every chunk renders at the size/face/leading above. Table cells are
     excluded — the size-chart rules below size them deliberately. Also covers
     the per-color child descriptions injected via innerHTML on color change. */
  .p7-pdp__desc [style]:not(td):not(th):not(table) {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
  }
  .p7-pdp__desc p {
    margin: 0 0 12px;
  }
  .p7-pdp__desc p:last-child {
    margin-bottom: 0;
  }
  .p7-pdp__desc ul {
    margin: 14px 0 0;
    padding-left: 20px;
    list-style: disc;
  }
  .p7-pdp__desc li {
    margin: 6px 0;
  }
  .p7-pdp__desc a {
    text-decoration: underline;
  }
  .p7-pdp__desc table {
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 0;
    border-collapse: collapse;
    border: 1px solid var(--line);
    table-layout: fixed;
  }
  .p7-pdp__desc colgroup col {
    width: auto !important;
  }
  .p7-pdp__desc th,
  .p7-pdp__desc td {
    height: auto !important;
    padding: 14px 16px;
    border: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
  }
  .p7-pdp__desc tr {
    height: auto !important;
  }
  .p7-pdp__desc th:not(:first-child),
  .p7-pdp__desc td:not(:first-child) {
    width: auto !important;
    text-align: center;
    white-space: nowrap;
  }
  .p7-pdp__desc th:first-child,
  .p7-pdp__desc td:first-child {
    width: 42% !important;
    text-align: left;
  }
  .p7-pdp__desc table:has(tr:first-child > :nth-child(7)) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .p7-pdp__desc table:has(tr:first-child > :nth-child(7)) tbody,
  .p7-pdp__desc table:has(tr:first-child > :nth-child(7)) thead {
    display: table;
    width: 100%;
    min-width: 620px;
    table-layout: fixed;
  }
  @media (max-width: 520px) {
    .p7-pdp__desc th,
    .p7-pdp__desc td {
      padding: 10px 4px;
      font-size: 12px;
      line-height: 1.35;
    }
    .p7-pdp__desc th:first-child,
    .p7-pdp__desc td:first-child {
      width: auto !important;
      padding-left: 10px;
      padding-right: 8px;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) {
      display: block;
      width: 100% !important;
      max-width: 100%;
      border: 0;
      font-size: 12px;
      overflow: hidden;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) colgroup {
      display: none;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) tbody,
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) thead {
      display: block;
      width: 100% !important;
      max-width: 100%;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) tr:first-child {
      display: none;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) tr:not(:first-child) {
      display: grid;
      width: 100% !important;
      max-width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--line);
      border-bottom: 0;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) tr:last-child {
      border-bottom: 1px solid var(--line);
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td {
      display: block;
      width: auto !important;
      min-width: 0;
      border: 0;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:first-child {
      grid-column: 1 / -1;
      padding: 10px 12px 8px;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:not(:first-child) {
      padding: 8px 10px 10px;
      border-right: 1px solid var(--line);
      border-top: 1px solid var(--line);
      text-align: left;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:nth-child(odd):not(:first-child),
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:last-child {
      border-right: 0;
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:not(:first-child)::before {
      display: inline-block;
      min-width: 24px;
      margin-right: 6px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      color: var(--dim);
    }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:nth-child(2)::before { content: 'S'; }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:nth-child(3)::before { content: 'M'; }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:nth-child(4)::before { content: 'L'; }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:nth-child(5)::before { content: 'XL'; }
    .p7-pdp__desc table:not(:has(tr:first-child > :nth-child(7))) td:nth-child(6)::before { content: '2XL'; }
  }

  /* ---- Accordions ---- */
  .p7-pdp__accordions {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
  }

  /* ---- Elite mark ---- */
  /* The figure only gets position:relative during the boot state above, so set
     it unconditionally — otherwise the badge escapes to the nearest positioned
     ancestor once the PDP is ready. */
  .p7-pdp__main {
    position: relative;
  }
  .p7-pdp__elite {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    /* Explicit display: Dawn's base.css `div:empty { display: none }` has
       killed p7 overlays before. This is a span with children, but be explicit. */
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    /* Fixed ink: overlays the #e8e8e8 shot backdrop, which never follows the
       theme — so neither does this mark. */
    color: #111;
    pointer-events: none;
  }
  .p7-pdp__elite[hidden] {
    display: none;
  }
  .p7-pdp__elite b {
    font-size: 12px;
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  /* Chip badge — star only. At 54px a wordmark renders around 6px and reads as
     a smudge, so the mark alone carries it in the colour row. */
  .p7-pdp__swatch .p7-elite-mark {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 2;
    /* Fixed ink on the fixed #e8e8e8 image field — see the hero mark above. */
    color: #111;
    pointer-events: none;
  }

  /* ---- Elite Series lockup ---- */
  .p7-pdp__elite-lockup {
    /* Explicit — Dawn's base.css hides empty divs, and this one is emptied of
       visible content whenever a non-Elite colourway is selected. */
    display: block;
    margin: 0 0 14px;
  }
  .p7-pdp__elite-lockup[hidden] {
    display: none;
  }
  .p7-elite-lockup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Sits on the panel surface (not an image field), so it follows the theme. */
    color: var(--fg);
    line-height: 1;
  }
  .p7-elite-lockup__word {
    font-family: var(--font-display, inherit);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }
  .p7-elite-lockup--md .p7-elite-lockup__word {
    font-size: 15px;
  }
  .p7-elite-lockup--sm .p7-elite-lockup__word {
    font-size: 11px;
    letter-spacing: 0.13em;
  }

  /* ---- Technology tabs ---- */
  .p7-pdp__editor-blocks {
    display: grid;
    gap: 16px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }
  .p7-pdp__editor-block {
    font-size: 14px;
    line-height: 1.55;
  }
  .p7-pdp__editor-block h2 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
  }
  .p7-pdp__editor-rte p {
    margin: 0 0 10px;
  }
  .p7-pdp__editor-rte p:last-child {
    margin-bottom: 0;
  }
  .p7-pdp__accordions details + details {
    border-top: 1px solid var(--line);
  }
  .p7-pdp__accordions summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: var(--panel-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--fg);
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
  }
  .p7-pdp__accordions summary::-webkit-details-marker {
    display: none;
  }
  .p7-pdp__accordions summary:hover,
  .p7-pdp__accordions details[open] summary {
    background: var(--panel-3);
  }
  .p7-pdp__accordions summary::after {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.6px solid var(--dim);
    border-bottom: 1.6px solid var(--dim);
    transform: rotate(45deg);
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .p7-pdp__accordions details[open] summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
  }
  .p7-pdp__accordion-body {
    padding: 14px 15px 16px;
    background: var(--panel);
    font-size: 14px;
    line-height: 1.6;
    color: var(--dim);
  }
  .p7-pdp__accordion-body p {
    margin: 0 0 10px;
  }
  .p7-pdp__accordion-body p:last-child {
    margin-bottom: 0;
  }
  .p7-pdp__accordion-body a {
    color: var(--fg);
    text-decoration: underline;
  }

  /* ---- Desktop ---- */
  @media (min-width: 521px) {
    .p7-pdp {
      padding-bottom: 132px;
    }
    .p7-pdp__crumbs--desktop {
      display: block;
    }
    .p7-pdp__crumbs--mobile {
      display: none;
    }
    .p7-pdp__sizes {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  @media (min-width: 821px) {
    .p7-pdp {
      padding: 24px 24px 96px;
    }
    .p7-pdp__inner {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 28px 48px;
    }
    .p7-pdp__info {
      position: sticky;
      top: calc(var(--marquee-h) + var(--header-h) + 16px);
      align-self: start;
      /* Spans both rows so row 1 collapses to the GALLERY's height — the
         tech tabs then start directly under the images instead of below
         the (usually taller) buy column. */
      grid-column: 2;
      grid-row: 1 / 3;
    }
    .p7-pdp__title {
      font-size: 40px;
    }
    /* Thumbs deliberately have no desktop override: the 4.5-up scroller is
       the behaviour at every width (owner 2026-08-05). */
    .p7-pdp[data-sticky-buy-enabled] .p7-pdp__atc {
      display: block;
    }
    .p7-pdp__sticky-buy {
      display: none;
    }
    .p7-pdp[data-sticky-buy-enabled] .p7-pdp__dynamic-checkout {
      position: static;
      left: auto;
      bottom: auto;
      z-index: auto;
      width: auto;
      margin-top: -6px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      opacity: 1;
      pointer-events: auto;
      transform: none;
      transition: none;
    }
    .p7-pdp[data-sticky-buy-enabled] .p7-pdp__dynamic-checkout .shopify-payment-button__button {
      border-radius: var(--cta-radius, 999px);
    }
  }

  /* ---- Reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .p7-pdp__main img,
    .p7-pdp__thumb,
    .p7-pdp__size label,
    .p7-pdp__sibling,
    .p7-pdp__atc,
    .p7-pdp__accordions summary::after {
      transition: none;
    }
  }
/* END_SECTION:p7-product */

/* START_SECTION:p7-search (INDEX:29) */
/* Banner and pills come from snippets/p7-clx-css.liquid, the grid and
     cards from snippets/p7-card-css.liquid (both shared with p7-collection;
     stylesheet CSS is subset per page render tree). Only search-specific
     chrome lives here. */
  .p7-search__count {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .p7-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    width: min(100%, 520px);
    height: 46px;
    margin: 1.25rem 0 2rem;
    border: 1px solid var(--hairline);
    background: var(--bg);
  }
  .p7-search__form:focus-within { border-color: var(--text); }
  .p7-search__form input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 0 0 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: 0;
  }
  .p7-search__form input::placeholder { color: var(--text-muted); }
  .p7-search__form button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .p7-search__form svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }
/* END_SECTION:p7-search */

/* START_SECTION:p7-team-hero (INDEX:31) */
.p7-team-hero {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    background: var(--p7-team-hero-empty-bg, #0b0b0b);
    color: var(--p7-team-hero-text, #ffffff);
  }

  .p7-team-hero__slides,
  .p7-team-hero__slide,
  .p7-team-hero__slide picture,
  .p7-team-hero__image,
  .p7-team-hero__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .p7-team-hero__slides {
    z-index: 0;
  }

  .p7-team-hero__slide {
    opacity: 0;
    transition: opacity 0.48s ease;
  }

  .p7-team-hero__slide.is-active {
    opacity: 1;
  }

  .p7-team-hero__image {
    object-fit: cover;
    object-position: var(--p7-team-hero-mobile-focal, 50% 50%);
    transform: scale(1);
  }

  .p7-team-hero__slide.is-active .p7-team-hero__image {
    transform: scale(1.035);
    transition: transform calc(var(--p7-team-hero-cycle, 3000ms) + 700ms) linear;
  }

  .p7-team-hero__placeholder {
    display: grid;
    place-items: center;
    padding: 24px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%),
      var(--p7-team-hero-empty-bg, #0b0b0b);
    color: rgba(255, 255, 255, 0.42);
    font-family: var(--font-display, sans-serif);
    font-size: 30px;
    font-weight: var(--font-heading-weight);
    line-height: 0.9;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }

  /* Descendant form ON PURPOSE — see the mnav scrim note. Dawn's
     `div:empty { display: none }` is (0,1,1); a bare `.p7-team-hero__overlay`
     is (0,1,0) and loses. Two classes = (0,2,0) and wins. Can't use the
     section id here — Liquid isn't rendered inside a stylesheet block.
     (Do not write that tag name literally in this comment: theme-check's
     StaticStylesheetAndJavascriptTags rule scans the raw block text and
     flags the braces even inside a CSS comment.) */
  .p7-team-hero .p7-team-hero__overlay {
    display: block;
  }
  .p7-team-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }

  .p7-team-hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 18px;
  }

  .p7-team-hero__copy {
    display: grid;
    gap: 12px;
    width: min(720px, 100%);
  }

  .p7-team-hero__heading {
    margin: 0;
  }

  .p7-team-hero__headline {
    display: grid;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .p7-team-hero__headline:hover .p7-team-hero__name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }

  .p7-team-hero__eyebrow {
    display: block;
    color: var(--p7-team-hero-accent, #d4231b);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .p7-team-hero__names {
    position: relative;
    display: block;
    width: min(100%, 690px);
    min-height: 36px;
  }

  .p7-team-hero__name {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    width: max-content;
    max-width: 100%;
    opacity: 0;
    color: var(--p7-team-hero-text, #ffffff);
    font-family: var(--font-display, sans-serif);
    font-size: 22px;
    font-weight: var(--font-heading-weight);
    line-height: 0.88;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
  }

  .p7-team-hero__name.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  .p7-team-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    width: min(420px, 100%);
  }

  .p7-team-hero__rider-actions {
    display: contents;
  }

  .p7-team-hero__button {
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #ffffff;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
  }

  .p7-team-hero__button--primary {
    display: inline-flex;
    background: #ffffff;
    color: #0b0b0b;
  }

  .p7-team-hero__button--secondary {
    display: none;
    background: transparent;
    color: #ffffff;
  }

  /* Highlight state on the banner is WHITE with black text (owner
     2026-08-04) — the accent-filled hover disappeared against the dark
     photography once the accent setting went near-black. The primary
     button rests white already, so its hover dims a step for feedback. */
  .p7-team-hero__button--primary:hover,
  .p7-team-hero__button--secondary:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #0b0b0b;
  }
  .p7-team-hero__button--primary:hover {
    filter: brightness(0.92);
  }

  .p7-team-hero__rider-cta.is-active {
    display: inline-flex;
  }

  .p7-team-hero__rider-cta--disabled {
    opacity: 0.55;
    pointer-events: none;
  }

  .p7-team-hero__progress {
    display: grid;
    grid-template-columns: repeat(var(--p7-team-hero-count, 4), minmax(0, 1fr));
    gap: 8px;
    width: min(430px, 100%);
    padding-top: 0;
  }

  .p7-team-hero__progress-button {
    display: flex;
    align-items: center;
    height: 18px;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .p7-team-hero__progress-track {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.34);
  }

  .p7-team-hero__progress-fill {
    position: absolute;
    inset: 0;
    display: block;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left center;
  }

  .p7-team-hero__progress-button.is-active .p7-team-hero__progress-fill {
    animation: p7-team-hero-progress var(--p7-team-hero-cycle, 3000ms) linear forwards;
  }

  @keyframes p7-team-hero-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  @media (min-width: 750px) {
    .p7-team-hero {
      aspect-ratio: auto;
      height: var(--p7-team-hero-desktop-height, 680px);
      min-height: 520px;
    }

    .p7-team-hero__image {
      object-position: var(--p7-team-hero-desktop-focal, 50% 50%);
    }

    .p7-team-hero__content {
      padding: 56px;
    }

    .p7-team-hero__copy {
      gap: 20px;
    }

    .p7-team-hero__names {
      min-height: 78px;
    }

    .p7-team-hero__name {
      font-size: 62px;
    }

    .p7-team-hero__button {
      min-height: 50px;
      padding-right: 24px;
      padding-left: 24px;
    }
  }

  @media (min-width: 1200px) {
    .p7-team-hero__content {
      padding: 64px;
    }

    .p7-team-hero__name {
      font-size: 70px;
    }

    .p7-team-hero__names {
      width: min(100%, 620px);
      min-height: 90px;
    }
  }

  @media (max-width: 389px) {
    .p7-team-hero__name {
      font-size: 20px;
    }
  }

  @media (max-width: 749px) {
    .p7-team-hero__actions {
      width: 100%;
    }

    .p7-team-hero__button {
      min-width: 0;
      padding-right: 12px;
      padding-left: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .p7-team-hero__slide,
    .p7-team-hero__name,
    .p7-team-hero__image {
      transition: none;
    }

    .p7-team-hero__slide.is-active .p7-team-hero__image {
      transform: none;
    }

    .p7-team-hero__progress-button.is-active .p7-team-hero__progress-fill {
      animation: none;
      transform: scaleX(1);
    }
  }
/* END_SECTION:p7-team-hero */

/* START_SECTION:p7-team (INDEX:32) */
.p7-team {
    background: var(--bg, #ffffff);
    color: var(--text, #0d0d0d);
    font-family: var(--font-body, sans-serif);
  }
  .p7-team__hero {
    position: relative;
    display: block;
    min-height: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
    background: #0d0d0d;
    color: #ffffff;
  }
  .p7-team__hero-media,
  .p7-team__hero-media picture,
  .p7-team__video-poster,
  .p7-team__video-frame,
  .p7-team__hero-media img,
  .p7-team__hero-empty {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .p7-team__hero-media img {
    object-fit: cover;
    filter: grayscale(1) contrast(1.04);
  }
  .p7-team__video-poster {
    padding: 0;
    border: 0;
    background: #111111;
    color: #ffffff;
    cursor: pointer;
  }
  .p7-team__video-frame {
    z-index: 3;
    border: 0;
    background: #000000;
  }
  .p7-team__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 22px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(0, 0, 0, 0.66);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }
  .p7-team__video-play::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid currentColor;
  }
  .p7-team__video-poster:hover .p7-team__video-play,
  .p7-team__video-poster:focus-visible .p7-team__video-play {
    background: #ffffff;
    color: #0d0d0d;
    transform: translate(-50%, -50%) scale(1.03);
  }
  .p7-team__hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: #111111;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }
  .p7-team__hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.42));
    pointer-events: none;
  }
  .p7-team__hero-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: clamp(28px, 5vw, 72px);
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }
  .p7-team__hero-copy a,
  .p7-team__hero-copy button {
    pointer-events: auto;
  }
  .p7-team.is-video-playing .p7-team__hero-copy,
  .p7-team.is-video-playing .p7-team__hero-shade {
    opacity: 0;
    visibility: hidden;
  }
  .p7-team__eyebrow {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .p7-team__title {
    max-width: 9ch;
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(58px, 15vw, 190px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.82;
    text-transform: uppercase;
  }
  .p7-team__intro {
    max-width: 58ch;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.5;
  }
  .p7-team__intro p {
    margin: 0;
  }
  .p7-team__hero-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(620px, 100%);
    margin-top: 26px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .p7-team__hero-actions p {
    margin: 0;
  }
  .p7-team__hero-actions a,
  .p7-team__hero-actions button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .p7-team__jump {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
  }
  .p7-team__jump a {
    flex: 0 0 auto;
    border-right: 1px solid var(--hairline);
    padding: 13px 16px;
    color: var(--text-muted, #6b6b6b);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
  }
  .p7-team__jump a.is-active {
    background: #ffffff;
    box-shadow: inset 0 -3px 0 #0d0d0d;
    color: #0d0d0d;
  }
  .p7-team__jump a:hover,
  .p7-team__jump a:focus-visible {
    background: var(--text);
    color: var(--bg);
  }
  .p7-team__grid {
    display: grid;
  }
  .p7-team-card {
    display: grid;
    min-height: 680px;
    border-bottom: 1px solid var(--hairline);
    background: var(--bg);
  }
  .p7-team-card__media {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: #111111;
  }
  .p7-team-card__media img,
  .p7-team-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
  }
  .p7-team-card__media img {
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.22s ease, transform 0.22s ease;
  }
  .p7-team-card:hover .p7-team-card__media img {
    filter: grayscale(0);
    transform: scale(1.015);
  }
  .p7-team-card:focus-within .p7-team-card__media img {
    filter: grayscale(0);
    transform: scale(1.015);
  }
  .p7-team-card__placeholder {
    display: flex;
    align-items: end;
    padding: 24px;
    color: #ffffff;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(42px, 9vw, 112px);
    line-height: 0.86;
    text-transform: uppercase;
  }
  .p7-team-card__placeholder span {
    display: block;
    max-width: 100%;
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
  }
  .p7-team-card__number {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(0, 0, 0, 0.66);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }
  .p7-team-card__body {
    display: grid;
    align-content: center;
    gap: 22px;
    padding: clamp(24px, 4vw, 56px);
  }
  .p7-team-card__head {
    display: grid;
    gap: 8px;
  }
  .p7-team-card h2 {
    max-width: 100%;
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(40px, 7.2vw, 104px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.86;
    text-transform: uppercase;
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
  }
  .p7-team-card__ig {
    width: fit-content;
    margin: 2px 0 0;
    color: var(--p7-team-ig-color, var(--accent));
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .p7-team-card__bio {
    max-width: 52ch;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
  }
  .p7-team-card__bio p {
    margin: 0;
  }
  .p7-team-card__shoe {
    display: grid;
    grid-template-columns: minmax(112px, 0.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    max-width: 620px;
    border: 1px solid var(--hairline);
    background: var(--bg-soft, #f7f7f7);
  }
  .p7-team-card__shoe-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 148px;
    overflow: hidden;
    background: #ffffff;
  }
  .p7-team-card__shoe-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p7-team-card__shoe-media span {
    padding: 16px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }
  .p7-team-card__shoe-copy {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding: 16px 16px 16px 0;
  }
  .p7-team-card__shoe-copy span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
  }
  .p7-team-card__shoe-copy h3 {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
  }
  .p7-team-card__shoe-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
  }
  .p7-team-card__shoe-copy a {
    width: fit-content;
    margin-top: 2px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: underline;
    text-transform: uppercase;
    text-underline-offset: 4px;
  }
  @media (min-width: 900px) {
    .p7-team__hero {
      aspect-ratio: 21 / 9;
    }
    .p7-team-card {
      grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
    }
    .p7-team-card:nth-child(even) .p7-team-card__media {
      order: 2;
    }
  }
  @media (max-width: 640px) {
    .p7-team__title {
      font-size: clamp(54px, 18vw, 86px);
    }
    .p7-team__hero-actions {
      align-items: flex-start;
      flex-direction: column;
    }
    .p7-team-card {
      min-height: 0;
    }
    .p7-team-card__media {
      min-height: 360px;
    }
    .p7-team-card h2 {
      font-size: clamp(34px, 12vw, 58px);
      line-height: 0.88;
    }
    .p7-team-card__placeholder {
      font-size: clamp(38px, 13vw, 68px);
    }
    .p7-team-card__shoe {
      grid-template-columns: 1fr;
    }
    .p7-team-card__shoe-copy {
      padding: 0 16px 16px;
    }
    .p7-team-card__shoe-media {
      aspect-ratio: 4 / 3;
    }
  }
  @media (hover: none), (pointer: coarse), (max-width: 749px) {
    .p7-team-card__media img {
      filter: grayscale(0);
    }
    .p7-team.p7-team--scroll-reveal .p7-team-card__media img {
      filter: grayscale(1);
      transform: scale(1);
    }
    .p7-team.p7-team--scroll-reveal .p7-team-card.is-active .p7-team-card__media img,
    .p7-team.p7-team--scroll-reveal .p7-team-card:focus-within .p7-team-card__media img {
      filter: grayscale(0);
      transform: scale(1.015);
    }
  }
/* END_SECTION:p7-team */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:p7-card-css (INDEX:35) */
/* Grid geometry — merchant-controlled via --card-gap / --grid-pad /
     --card-radius set by the consumer section; unset consumers take the
     handoff defaults. */
  .p7-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-gap, 8px);
    padding-inline: var(--grid-pad, 16px);
    margin: 0;
    list-style: none;
  }
  @media (min-width: 768px) {
    .p7-card-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1200px) {
    .p7-card-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: calc(var(--card-gap, 8px) * 2);
    }
  }
  .p7-card-grid--flush { padding-inline: 0; }

  .card {
    border-radius: var(--card-radius, 7px);
    background: var(--panel);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
  }
  .card:hover { border-color: var(--line-2); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }

  /* The image field never follows the theme: it carries the backdrop the
     product is shot on. */
  /* Clips its own box, not just the card's. .card's overflow only catches the
     outer edge, which sits below .card__body — so without this the hover zoom
     spills past the bottom of the image field and over the product info. */
  .card__frame { position: relative; display: block; background: var(--shot-bg, #e8e8e8); aspect-ratio: 4 / 5; overflow: hidden; }
  .card__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
  }
  .card:hover .card__frame img { transform: scale(1.045); }

  .card__elite {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 2px 6px 2px 5px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: rgb(255 255 255 / 0.86);
    color: #111111;
    font: 700 9px/1.4 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .card__body { position: relative; padding: 11px 12px 13px; }
  .card__tags { display: flex; gap: 10px; margin: 0 0 5px; min-height: 12px; }
  .card__tag {
    font: 700 10px/1.2 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg);
  }

  .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  /* Model and colourway sized up (owner call 2026-08-06): at 14/13 they read as
     metadata under the image rather than as the product's name. Price tracks the
     title so the .card__head baseline row stays balanced. */
  .card__title {
    font: 600 16px/1.25 var(--font-body);
    letter-spacing: -0.002em;
    text-decoration: none;
    color: inherit;
  }
  .card__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .card__price b { font: 600 16px/1 var(--font-body); letter-spacing: -0.002em; }
  .card__price b.is-sale { color: var(--accent); }
  .card__price s { margin-right: 6px; font: 400 13px/1 var(--font-body); color: var(--faint); }
  .card__colour { margin: 2px 0 0; font: 400 14px/1.35 var(--font-body); color: var(--dim); }

  .card__stock-row { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
  .card__toggle {
    display: flex;
    width: 100%;
    min-height: 22px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--dim);
    text-align: left;
    font: 600 11px/1.4 var(--font-body);
    letter-spacing: 0.02em;
  }
  .card__toggle:hover { color: var(--fg); }
  .card__toggle svg { flex: none; transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .card__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .card__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dim);
    font: 600 11px/1.4 var(--font-body);
    letter-spacing: 0.02em;
  }
  .card__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stock-high); }
  .card__stock--mid .card__dot { background: var(--stock-mid); }
  .card__stock--low .card__dot { background: var(--stock-low); }
  .card__stock--out .card__dot { background: var(--stock-out, var(--faint)); }
  .card__stock--active .card__dot {
    background: var(--stock-active);
    box-shadow: 0 0 0 3px var(--stock-active-glow);
  }

  /* Selected sizes, shown as pills in the stock row. One pill per size the
     shopper picked that THIS card stocks; the first carries the dot so the row
     still reads as a stock indicator rather than a loose tag list.
     .card__toggle is justify-content: space-between with the chip on the left
     and the chevron on the right, so wrapping happens inside this span and the
     chevron stays put. min-width: 0 lets it actually wrap instead of forcing
     the row wider — the same trap that pushed 205px of page scroll from the
     collection pill rail. */
  .card__stock--pills {
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
  }
  .card__size-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border: 1px solid var(--fg);
    border-radius: 999px;
    background: var(--fg);
    color: var(--bg);
    font: 600 11px/1.4 var(--font-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* With a shoe size filtered (html.p7-shoe-size-active, stamped by
     p7-size-prefs.js), hover no longer auto-opens the size drawer —
     p7-card.js suppresses it — and the stock line grows a quiet "Change
     size" hint instead. Click and keyboard still open the panel. */
  @media (hover: hover) and (min-width: 1000px) {
    html.p7-shoe-size-active [data-card]:hover .card__toggle .card__stock::after {
      content: 'Change size';
      color: var(--faint);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
    }
  }

  /* The panel is anchored to the stock row and grows upward — hover moves
     nothing below it. */
  .card__sizes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    padding: 9px 12px;
    background: var(--panel);
    border-top: 1px solid var(--line);
    animation: card-rise 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .card__sizes[hidden] { display: none; }
  @keyframes card-rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .card__sizes-head {
    margin-bottom: 7px;
    font: 700 9px/1.5 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
  }
  /* Tech name sits under the run on its own line — at 4-up card widths it
     has no room beside the size count and wraps mid-word. */
  .card__tech {
    margin: 7px 0 0;
    font: 600 9px/1.5 var(--font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card__run { display: flex; flex-wrap: wrap; gap: 3px; }
  .card__chip {
    min-width: 26px;
    min-height: 22px;
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--panel-2);
    color: var(--fg);
    text-decoration: none;
    font: 500 11px/1.35 var(--font-body);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .card__chip.is-out { background: none; color: var(--faint); text-decoration: line-through; }
  .card__chip[aria-current="true"] { background: var(--fg); color: var(--bg); font-weight: 700; }

  /* Keyboard: the ring, and the panel opening on focus exactly as on hover. */
  .card a:focus-visible,
  .card button:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .card:focus-within .card__sizes[hidden] { display: block; }

  @media (prefers-reduced-motion: reduce) {
    .card__frame img,
    .card__sizes,
    .card__toggle svg {
      transition: none;
      animation: none;
    }
    .card:hover .card__frame img { transform: none; }
  }

  /* p7-card-filter.js chrome: the active-size rail and its chips. Lives here
     rather than snippets/p7-clx-css.liquid because that snippet is only
     rendered by p7-collection and p7-search (own header comment) — the
     related-products rail (p7-product-related.liquid) never renders it, so
     rules placed there would leave the rail's chips unstyled on every PDP.
     This file is the one snippet EVERY card consumer renders (own header
     comment above), which is what all three of p7-card-filter.js's hosts
     have in common.

     Chips must be black in BOTH schemes, so --marquee-bg / --ink-inverse
     rather than --btn: --btn is an ink token (var(--fg)) and goes near-white
     in dark, which is how two earlier components broke. */
  .p7-clx__rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
  }
  .p7-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 86%, var(--fg));
    color: var(--fg);
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.16);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .p7-chip__x { font-size: 10px; line-height: 1; opacity: 0.9; }
  .p7-chip:hover .p7-chip__x { opacity: 1; }
  .p7-chip--clear { background: transparent; color: var(--dim); text-decoration: underline; }
  .p7-chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* END_SNIPPET:p7-card-css */

/* START_SNIPPET:p7-clx-css (INDEX:37) */
/* ----------------------------------------------------------------
     Collection page (.p7-clx) — mobile-first at 375px
     ---------------------------------------------------------------- */
  /* Edge padding: --grid-pad (the "Space to screen edge" card setting,
     set inline by p7-collection) wins when present so the banner, pills
     and card grid share one page edge; otherwise the theme's responsive
     default (--p7-clx-pad) applies — search has no setting and keeps it. */
  /* width:100% + min-width:0 are load-bearing — measured, not defensive.
     .p7-clx is a grid item of .shopify-section (critical.css, grid-column: 2).
     `margin: 0 auto` sets auto inline margins, which cancel justify-self:
     stretch and re-size this box as fit-content — and fit-content is floored by
     min-content. Its min-content comes from .p7-clx__pills below: six nowrap,
     non-shrinking pills measuring 549px. So on a 370px phone this box took
     565px inside a 350px track and pushed 205px of horizontal scroll onto the
     document (measured at 370x800: clientWidth 370, scrollWidth 575).

     The trap is that .p7-clx__pills already has overflow-x: auto, which looks
     like it should contain that. It does not: overflow-x only zeroes the
     AUTOMATIC MINIMUM SIZE of a flex/grid ITEM. .p7-clx__pills is a plain block
     child, so its full 549px min-content propagates up regardless.

     Worse, the row was not scrolling at all in the shipped state
     (scrollWidth === clientWidth), so the Kids and Sale pills were unreachable
     — the carousel documented below was defeated one level up.

     min-width: 0 ALONE does not fix this; the auto margins still force
     fit-content. Neither does max-width: 100% on the pills (a percentage cannot
     resolve against a fit-content parent), nor overflow-x: hidden on html/body,
     which only hides the scrollbar while leaving the pills unreachable.
     Verified fix: 370 === 370, and the pills become a real scroller. */
  .p7-clx {
    --p7-clx-pad: 14px;
    width: 100%;
    min-width: 0;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--grid-pad, var(--p7-clx-pad)) 64px;
    font-family: var(--font-body);
    color: var(--text);
  }

  /* Banner */
  .p7-clx__banner {
    padding: 10px 0 18px;
  }
  .p7-clx__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.01em;
    font-size: clamp(30px, 8vw, 60px);
    color: var(--text);
  }
  .p7-clx__count {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .p7-clx__desc {
    margin: 14px 0 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
  }
  .p7-clx__desc p {
    margin: 0 0 10px;
  }
  .p7-clx__desc p:last-child {
    margin-bottom: 0;
  }

  /* Filter bar — reuses the global .pill / .active-filters / .clear-filters
     styles from p7-overrides.css; this only handles layout on this page. */
  .p7-clx__filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 4px;
  }

  /* Sub-collection pills */
  /* Carousel, not a wrapping block (owner 2026-08-05). Wrapping made the row
     grow to two or three lines on a phone and shove the grid down the page.
     One line that scrolls instead.

     The negative margins + matching padding let the track bleed to the screen
     edges while the FIRST pill still lines up with the cards: the row scrolls
     edge to edge, which is what tells you it scrolls, but at rest it reads as
     aligned. scroll-padding keeps a snapped pill off the very edge. */
  .p7-clx__pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px var(--grid-pad, 14px) 18px;
    margin-inline: calc(-1 * var(--grid-pad, 14px));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--grid-pad, 14px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p7-clx__pills::-webkit-scrollbar { display: none; }
  .p7-clx__pills > * { scroll-snap-align: start; }
  /* Pills must not be squeezed by the flex container to fit — shrinking is
     what would turn the scroller back into a cramped single row. */
  .p7-clx__pill { flex: 0 0 auto; white-space: nowrap; }
  /* The empty-state pill row is a normal wrapping block — it is a fallback
     list of other collections, not the category rail. */
  .p7-clx__pills--empty {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .p7-clx__pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .p7-clx__pill:hover {
    background: var(--surface);
    border-color: var(--text);
  }
  .p7-clx__pill:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
  .p7-clx__pill--active {
    background: var(--btn);
    border-color: var(--btn);
    color: var(--btn-fg);
  }
  .p7-clx__pill--active:hover {
    background: var(--btn-hover);
    border-color: var(--btn-hover);
    color: var(--btn-fg);
  }

  .p7-clx__local-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 2px var(--grid-pad, 14px) 14px;
    margin-inline: calc(-1 * var(--grid-pad, 14px));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--grid-pad, 14px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p7-clx__local-filter[hidden] { display: none; }
  .p7-clx__local-filter::-webkit-scrollbar { display: none; }
  .p7-clx__local-filter .pill { scroll-snap-align: start; }
  .p7-clx__local-filter .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 999px;
    padding: 8px 14px;
    font: 500 13px/1 var(--font-body);
    color: var(--text);
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .p7-clx__local-filter .pill:hover {
    background: var(--surface);
    border-color: var(--text);
  }
  .p7-clx__local-filter .pill.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
  }
  .p7-clx__local-filter .pill-count {
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .p7-clx__local-filter .pill.active .pill-count {
    color: inherit;
  }

  /* Grid geometry + cards live in snippets/p7-card-css.liquid. The cell
     is just the list-item wrapper the size filter shows/hides. */
  .p7-clx__cell {
    min-width: 0;
  }
  .p7-clx__cell[hidden] { display: none; }

  /* Empty state */
  .p7-clx__empty {
    padding: 72px 14px 40px;
    text-align: center;
    border-top: 1px solid var(--hairline);
  }
  .p7-clx__empty-msg {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
  }
  .p7-clx__pills--empty {
    justify-content: center;
    padding: 0;
  }

  /* Pagination — restyled default_pagination output */
  .p7-clx__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 28px 0 0;
    font-size: 13px;
    font-weight: 500;
  }
  .p7-clx__pagination[hidden] {
    display: none;
  }
  .p7-clx__pagination a,
  .p7-clx__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    text-decoration: none;
  }
  .p7-clx__pagination a {
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: color 0.12s, border-color 0.12s;
  }
  .p7-clx__pagination a:hover {
    color: var(--text);
    border-color: var(--hairline);
  }
  .p7-clx__pagination a:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
  .p7-clx__pagination .current {
    background: var(--btn);
    color: var(--btn-fg);
  }
  .p7-clx__pagination .deco {
    color: var(--text-faint);
  }

  /* Visually hidden heading */
  .p7-clx__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Tablet ≥768px */
  @media (min-width: 768px) {
    .p7-clx {
      --p7-clx-pad: 20px;
      padding-bottom: 80px;
    }
    .p7-clx__banner {
      padding: 14px 0 22px;
    }
  }

  /* Desktop ≥1200px */
  @media (min-width: 1200px) {
    .p7-clx {
      --p7-clx-pad: 24px;
      padding-bottom: 96px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .p7-clx__pill,
    .p7-clx__pagination a {
      transition: none;
    }
  }
/* END_SNIPPET:p7-clx-css */

/* START_SNIPPET:p7-customer-css (INDEX:39) */
/* ------------------------------------------------------------------
     SHARED p7 customer layer — every p7-customer-* section renders this
     snippet. Stylesheet CSS is subset per page render tree, which is why
     the layer lives here and not in any one section.
     Tokens (--bg/--text/--hairline/--font-display/...) come from the p7
     token layer (p7-base.css / p7-overrides.css).
     ------------------------------------------------------------------ */
  .p7-cust {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px 0 96px;
    color: var(--text);
    font-family: var(--font-body);
  }
  .p7-cust--narrow {
    width: min(460px, calc(100% - 32px));
  }
  .p7-cust__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 18px;
    margin-bottom: 26px;
  }
  .p7-cust__head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-heading-weight);
    font-size: clamp(30px, 6vw, 60px);
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .p7-cust__sub,
  .p7-cust__status {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .p7-cust__h2 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .p7-cust__form {
    display: grid;
    gap: 16px;
    margin-top: 8px;
  }
  .p7-cust__field {
    display: grid;
    gap: 6px;
  }
  .p7-cust__field > label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .p7-cust__row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .p7-cust :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    padding: 10px 12px;
  }
  .p7-cust :where(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
  .p7-cust__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid var(--text);
    background: var(--bg);
    color: var(--text);
    padding: 13px 18px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
  }
  .p7-cust__btn--primary {
    background: var(--btn);
    border-color: var(--btn);
    color: var(--btn-fg);
  }
  .p7-cust__btn--primary:hover {
    background: var(--btn-hover);
    border-color: var(--btn-hover);
  }
  .p7-cust__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .p7-cust__err {
    background: var(--err-bg);
    color: var(--err-fg);
    padding: 12px 14px;
    font-size: 14px;
  }
  .p7-cust__err a {
    color: inherit;
  }
  .p7-cust__err :is(p, ul):first-child {
    margin-top: 0;
  }
  .p7-cust__err :is(p, ul):last-child {
    margin-bottom: 0;
  }
  .p7-cust__ok {
    background: var(--ok-bg);
    color: var(--ok-fg);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 16px;
  }
  .p7-cust__ok p {
    margin: 0;
  }
  .p7-cust__hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
  }
  .p7-cust__alt {
    margin: 22px 0 0;
    font-size: 14px;
  }
  .p7-cust__details {
    border: 1px solid var(--hairline);
    margin-top: 18px;
  }
  .p7-cust__details > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .p7-cust__details > summary::-webkit-details-marker {
    display: none;
  }
  .p7-cust__details > summary::after {
    content: '+';
    font-size: 16px;
    line-height: 1;
  }
  .p7-cust__details[open] > summary::after {
    content: '\2212';
  }
  .p7-cust__details-body {
    padding: 0 16px 18px;
    display: grid;
    gap: 14px;
  }
  .p7-cust__check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
  }
  .p7-cust__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Tables (order history, order detail) */
  .p7-cust__table-wrap {
    overflow-x: auto;
  }
  .p7-cust__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .p7-cust__table th {
    text-align: left;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--text);
    padding: 10px 12px 10px 0;
    white-space: nowrap;
  }
  .p7-cust__table td {
    border-bottom: 1px solid var(--hairline);
    padding: 14px 12px 14px 0;
    vertical-align: top;
  }
  .p7-cust__table .p7-cust__num {
    text-align: right;
    padding-right: 0;
  }

  /* default_pagination output */
  .p7-cust__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    font-size: 14px;
  }
  .p7-cust__pages span,
  .p7-cust__pages a {
    color: inherit;
  }
  .p7-cust__pages .current {
    font-weight: 800;
  }

  @media (max-width: 640px) {
    .p7-cust {
      padding-top: 28px;
    }
    .p7-cust__row2 {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:p7-customer-css */

/* START_SNIPPET:p7-pagination (INDEX:45) */
.p7-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 32px 0 0;
    font-size: 13px;
    font-weight: 500;
  }
  .p7-pagination__page,
  .p7-pagination__arrow,
  .p7-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    color: var(--text-muted);
    text-decoration: none;
  }
  a.p7-pagination__page,
  a.p7-pagination__arrow {
    border: 1px solid transparent;
    transition: color 0.12s, border-color 0.12s;
  }
  a.p7-pagination__page:hover,
  a.p7-pagination__arrow:hover {
    color: var(--text);
    border-color: var(--hairline);
  }
  a.p7-pagination__page:focus-visible,
  a.p7-pagination__arrow:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
  .p7-pagination__arrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .p7-pagination__page--current {
    background: var(--btn);
    color: var(--btn-fg);
  }
  .p7-pagination__gap {
    color: var(--text-faint);
  }
  @media (prefers-reduced-motion: reduce) {
    a.p7-pagination__page,
    a.p7-pagination__arrow {
      transition: none;
    }
  }
/* END_SNIPPET:p7-pagination */

/* START_SNIPPET:p7-rte (INDEX:51) */
.p7-rte {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
  }
  .p7-rte p,
  .p7-rte ul,
  .p7-rte ol,
  .p7-rte blockquote,
  .p7-rte table {
    margin: 0 0 16px;
  }
  .p7-rte h2,
  .p7-rte h3,
  .p7-rte h4,
  .p7-rte h5,
  .p7-rte h6 {
    margin: 28px 0 12px;
    line-height: 1.25;
  }
  .p7-rte h2 {
    font-size: 20px;
    font-weight: 600;
  }
  .p7-rte h3 {
    font-size: 17px;
    font-weight: 600;
  }
  .p7-rte h4,
  .p7-rte h5,
  .p7-rte h6 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .p7-rte a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .p7-rte a:hover {
    color: var(--text-muted);
  }
  .p7-rte ul,
  .p7-rte ol {
    padding-left: 22px;
  }
  .p7-rte li {
    margin-bottom: 6px;
  }
  .p7-rte img {
    width: 100%;
    height: auto;
    margin: 24px 0;
  }
  .p7-rte blockquote {
    border-left: 2px solid var(--text);
    padding: 4px 0 4px 18px;
    color: var(--text-muted);
  }
  .p7-rte hr {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: 32px 0;
  }
  .p7-rte table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .p7-rte th,
  .p7-rte td {
    border: 1px solid var(--hairline);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }
  .p7-rte th {
    background: var(--surface);
    font-weight: 600;
  }
  .p7-rte iframe {
    max-width: 100%;
  }
/* END_SNIPPET:p7-rte */

/* START_SNIPPET:p7-shoe-tech (INDEX:53) */
/* Owner 2026-08-04: PARA-MOUNT and DELUX-LITE side by side as horizontal
     tabs. The selected tab fills (clearly highlighted) and fuses with the
     panel that expands full-width beneath BOTH tabs; an unselected tab is
     transparent so it reads as the page background.

     Sizes derive from --p7-tech-scale, which the scoped style block above sets
     per breakpoint from the section's scale settings. The rest is fixed. */
  .p7-pdp__tech-block {
    display: block;
    margin: 22px 0 0;
  }
  /* Mobile: match the buy column exactly (owner 2026-08-05). This block is a
     direct grid child of .p7-pdp__inner, and .p7-pdp carries NO horizontal
     padding at this breakpoint — each child supplies its own. Without this the
     tech block runs full-bleed while the SIZING & FIT / SHIPPING & RETURNS
     accordions sit inside .p7-pdp__info's `padding: 22px 16px 0`, so the two
     read as different widths. 16px is that same value — change them together. */
  @media (max-width: 520px) {
    .p7-pdp__tech-block {
      padding-inline: 16px;
    }
  }
  .p7-pdp__tech-block[hidden] {
    display: none;
  }
  .p7-pdp__tech-tabs {
    display: flex;
    gap: 4px;
  }
  .p7-pdp__tech-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .p7-pdp__tech-tab[hidden] {
    display: none;
  }
  .p7-pdp__tech-tab:hover:not(.is-selected) {
    background: var(--panel-2);
    color: var(--fg);
  }
  .p7-pdp__tech-tab.is-selected {
    background: var(--panel-2);
    border-color: var(--line);
    color: var(--fg);
  }
  .p7-pdp__tech-tab:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: -2px;
  }
  /* Unselected tab logos sit muted until hover/selection. */
  .p7-pdp__tech-tab:not(.is-selected) .p7-pdp__tech-logo {
    opacity: 0.55;
  }
  /* Panel body: render at half width on the left, copy beside it on the
     right (owner 2026-08-04); stacks on narrow screens. */
  .p7-pdp__tech-panel {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 0 0 7px 7px;
    background: var(--panel-2);
    padding: 14px 15px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dim);
  }
  .p7-pdp__tech-panel[hidden] {
    display: none;
  }
  .p7-pdp__tech-copy {
    flex: 1 1 0;
    min-width: 0;
  }
  .p7-pdp__tech-panel p {
    margin: 0 0 10px;
  }
  .p7-pdp__tech-panel p:last-child {
    margin-bottom: 0;
  }
  @media (max-width: 520px) {
    .p7-pdp__tech-panel {
      flex-direction: column;
    }
    /* Stacked: the tile is already full width, so scale can only pull it in.
       max-width keeps a >100 setting from overflowing the panel. */
    .p7-pdp__tech-panel .p7-pdp__tech-media {
      width: calc(100% * var(--p7-tech-scale, 1));
      max-width: 100%;
    }
  }
  .p7-pdp__tech-logo {
    height: calc(17px * var(--p7-tech-scale, 1));
    width: auto;
    /* Monochrome wordmarks, black on transparent — the catalog's own
       product-page versions, not the colour ones from the tech spread.
       Inverted to white in the dark scheme below (pixel-identical to the
       -white.png assets, no markup change needed). */
  }
  .p7-pdp__tech-kind {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .p7-pdp__tech-media {
    /* Half the panel width — the copy sits to its right (owner 2026-08-04).
       min() keeps a >100 scale from pushing the copy out of the row. */
    flex: 0 1 min(100%, calc((50% - 9px) * var(--p7-tech-scale, 1)));
    min-width: 0;
    padding: 14px;
    border-radius: 5px;
    /* Owner call 2026-08-04: white tile behind the render in BOTH schemes —
       the transparent PNGs are dark line art and vanish on the dark panel.
       Fixed white, same standing as the #e8e8e8 image fields (supersedes the
       2026-08-01 no-tile call, which predated the dark scheme). */
    background: #ffffff;
  }
  .p7-pdp__tech-media img {
    display: block;
    width: 100%;
    height: auto;
  }
  .p7-pdp__tech-panel ul {
    margin: 9px 0 0;
    padding-left: 17px;
    line-height: 1.7;
  }
  /* Desktop placement in the PDP grid: column 1, directly under the gallery
     (owner 2026-08-04). Depends on .p7-pdp__inner's grid, which the section
     defines — this snippet is rendered as a direct child of it. Kept here, and
     after the base rule above, so the margin reset wins on source order
     without needing extra specificity. */
  @media (min-width: 521px) {
    .p7-pdp__tech-block {
      grid-column: 1;
      grid-row: 2;
      margin-top: 0;
      /* Reads at the same width as the accordions opposite (owner
         2026-08-05) while staying under the gallery. .p7-pdp__inner is
         1.4fr / 1fr, so the info column is exactly this column over 1.4 —
         derived rather than a magic pixel, but it does track that ratio:
         change the grid and this has to change with it. */
      max-width: calc(100% / 1.4);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .p7-pdp__tech-tab {
      transition: none;
    }
  }
  /* Dark scheme: flip the black wordmark PNGs to white. The explicit
     [data-theme] hooks let the theme toggle win in both directions. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .p7-pdp__tech-logo {
      filter: invert(1);
    }
  }
  :root[data-theme='dark'] .p7-pdp__tech-logo {
    filter: invert(1);
  }
/* END_SNIPPET:p7-shoe-tech */