/*
 * Folio & Frame: store layer on top of the Hazen Studio kit (/hazen/hazen.css).
 * Colours, type, buttons, cards, chips and form fields come from the kit;
 * this file only lays out the shop and draws its own pieces (frames, cart
 * lines, the story stage). Every colour is a kit token, so both themes work.
 *
 * The rules join the kit's cascade layers (base, then components) so that
 * kit components such as hz-prose keep their own spacing.
 */

@layer base {
  /* ─── Reset for this site ─── */
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  dl,
  dd,
  figure,
  blockquote,
  fieldset {
    margin: 0;
  }
  ul[role="list"],
  ol[role="list"] {
    padding: 0;
    list-style: none;
  }
  fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
  }
  legend {
    padding: 0;
  }
  img {
    display: block;
  }
  [hidden] {
    display: none !important;
  }

  .shop-stack > * + * {
    margin-top: var(--gap, 1rem);
  }
}

@layer components {
  /* ─── Header ─── */
  .shop-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
  }
  .shop-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--hz-text);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-radius: var(--hz-radius-sm);
  }
  .shop-brand__mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--hz-text);
    border-radius: 4px;
    padding: 4px;
  }
  .shop-brand__mark::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background: linear-gradient(160deg, var(--hz-accent), var(--hz-accent-strong));
  }
  .shop-brand em {
    font-family: var(--hz-font-serif);
    font-size: 1.15em;
    font-weight: 400;
    color: var(--hz-accent-text);
  }
  .shop-nav {
    display: none;
    gap: 2px;
  }
  .shop-nav .hz-nav-link[aria-current="page"] {
    color: var(--hz-text);
    background: var(--hz-surface-2);
  }
  .shop-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .shop-cart-link {
    position: relative;
    color: var(--hz-text);
    text-decoration: none;
  }
  .shop-cart-link[aria-current="page"] {
    border-color: var(--hz-line-strong);
    background: var(--hz-surface-2);
  }
  .shop-cart-link__count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--hz-radius-full);
    background: var(--hz-accent);
    color: var(--hz-on-accent);
    font-family: var(--hz-font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }
  .shop-cart-link__count[hidden] {
    display: none;
  }
  .shop-menu {
    border-top: 1px solid var(--hz-line);
    background: var(--hz-bg);
    box-shadow: var(--hz-shadow-md);
  }
  .shop-menu ul {
    display: grid;
    gap: 2px;
    padding-block: 12px 16px;
  }
  .shop-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: 12px;
    border-radius: var(--hz-radius-md);
    color: var(--hz-text);
    font-weight: 500;
    text-decoration: none;
  }
  .shop-menu a:hover,
  .shop-menu a[aria-current="page"] {
    background: var(--hz-surface-2);
  }
  @media (min-width: 860px) {
    .shop-nav {
      display: flex;
    }
    .shop-menu-button,
    .shop-menu {
      display: none;
    }
  }

  /* ─── Page heads and sections ─── */
  .shop-page-head {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  .shop-page-head .hz-lead {
    max-width: 40rem;
    margin-top: 1.25rem;
  }
  .shop-page-head h1 {
    margin-top: 1rem;
  }
  .shop-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  .shop-section-head > div {
    max-width: 44rem;
  }
  .shop-section-head h2 {
    margin-top: 1rem;
  }
  .shop-section-head .hz-lead {
    margin-top: 1rem;
  }
  .shop-band {
    border-block: 1px solid var(--hz-line);
    background: var(--hz-bg-raise);
  }

  /* ─── Frames (hero wall, product preview, story) ─── */
  .shop-frame {
    --frame: transparent;
    --frame-w: 0%;
    --mat: 2.2%;
    --ratio: 1.414 / 1;
    width: 100%;
    padding: var(--frame-w);
    background: var(--frame);
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.1),
      0 22px 44px -18px rgb(0 0 0 / 0.45);
    transition:
      width var(--hz-dur-slow) var(--hz-ease-out),
      padding var(--hz-dur-slow) var(--hz-ease-out);
  }
  .shop-frame__mat {
    padding: var(--mat);
    background: #fbfaf7;
    transition: padding var(--hz-dur-slow) var(--hz-ease-out);
  }
  .shop-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
  .shop-frame--portrait {
    --ratio: 1 / 1.414;
  }
  .shop-frame[data-frame="black"] {
    --frame: linear-gradient(145deg, #34343a, #0f0f11 70%);
    --frame-w: 3.4%;
    --mat: 7%;
  }
  .shop-frame[data-frame="oak"] {
    --frame: linear-gradient(145deg, #e0c39a, #b48b58 75%);
    --frame-w: 3.4%;
    --mat: 7%;
  }

  /* ─── Home: hero ─── */
  .shop-hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
  }
  .shop-hero__grid {
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 5rem);
    align-items: center;
  }
  .shop-hero .hz-display {
    margin-top: 1.5rem;
  }
  .shop-hero .hz-lead {
    max-width: 34rem;
    margin-top: 1.75rem;
  }
  .shop-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2.25rem;
  }
  .shop-hero__wall {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(1rem, 4%, 2rem);
    align-items: center;
    padding: clamp(1.5rem, 6%, 3rem);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-2xl);
    background:
      radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--hz-accent) 14%, transparent), transparent 60%),
      var(--hz-surface-2);
  }
  .shop-hero__wall > :first-child {
    grid-row: span 2;
  }
  @media (min-width: 1024px) {
    .shop-hero__grid {
      grid-template-columns: 1.05fr 1fr;
    }
  }

  .shop-trust {
    display: grid;
    gap: 1rem;
    padding-block: 1.5rem;
  }
  .shop-trust li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--hz-text-2);
    font-size: var(--hz-text-sm);
  }
  .shop-trust strong {
    display: block;
    color: var(--hz-text);
    font-weight: 600;
  }
  .shop-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--hz-radius-md);
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
  }
  .shop-icon svg {
    width: 20px;
    height: 20px;
  }
  @media (min-width: 720px) {
    .shop-trust {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ─── Product cards ─── */
  .shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1rem, 0.75rem + 1vw, 1.5rem);
    padding: 0;
    list-style: none;
  }
  .shop-card__link {
    display: grid;
    gap: 6px;
    color: var(--hz-text);
    text-decoration: none;
    border-radius: var(--hz-radius-lg);
  }
  .shop-card__media {
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 9%;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-surface-2);
  }
  .shop-card__media img {
    width: 100%;
    aspect-ratio: 1.414 / 1;
    object-fit: cover;
    box-shadow:
      0 0 0 5px #fbfaf7,
      0 14px 28px -12px rgb(0 0 0 / 0.5);
    transition: transform var(--hz-dur-slow) var(--hz-ease-out);
  }
  .shop-card__link:hover .shop-card__media img {
    transform: scale(1.04);
  }
  .shop-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--hz-text-3);
    font-size: var(--hz-text-xs);
  }
  .shop-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .shop-card__link:hover .shop-card__title {
    text-decoration: underline;
    text-decoration-color: var(--hz-accent-line);
    text-underline-offset: 0.2em;
  }
  .shop-card__price {
    color: var(--hz-text-2);
    font-size: var(--hz-text-sm);
    font-variant-numeric: tabular-nums;
  }

  /* ─── Collections (home) ─── */
  .shop-collections {
    display: grid;
    gap: 1rem;
  }
  .shop-collection {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 20rem;
    align-items: flex-end;
    padding: 1.5rem;
    border-radius: var(--hz-radius-xl);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
  }
  .shop-collection img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hz-dur-slow) var(--hz-ease-out);
  }
  .shop-collection::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.1) 60%);
  }
  .shop-collection:hover img {
    transform: scale(1.05);
  }
  .shop-collection__title {
    display: block;
    font-size: var(--hz-text-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .shop-collection__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: rgb(255 255 255 / 0.82);
    font-size: var(--hz-text-sm);
  }
  @media (min-width: 800px) {
    .shop-collections {
      grid-template-columns: 1.2fr 1fr 1fr;
    }
    .shop-collection {
      min-height: 26rem;
    }
  }

  /* ─── Home: how it works (scrollytelling) ─── */
  .shop-story {
    display: block;
  }
  .shop-story__stage {
    display: none;
  }
  .shop-story__steps {
    display: grid;
    gap: 1.25rem;
  }
  .shop-story__step {
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-surface);
    transition:
      border-color var(--hz-dur) var(--hz-ease-out),
      box-shadow var(--hz-dur) var(--hz-ease-out);
  }
  .shop-story__index {
    color: var(--hz-accent-text);
    font-family: var(--hz-font-mono);
    font-size: var(--hz-text-xs);
  }
  .shop-story__step h3 {
    margin-top: 0.75rem;
    font-size: var(--hz-text-h3);
  }
  .shop-story__step p {
    margin-top: 0.5rem;
    color: var(--hz-text-2);
  }
  .shop-story__inline {
    margin-top: 1.5rem;
  }
  .shop-scene {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    padding: 12%;
    border-radius: var(--hz-radius-xl);
    background:
      radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--hz-accent) 12%, transparent), transparent 65%),
      var(--hz-surface-2);
  }
  .shop-scene .shop-frame {
    width: 88%;
  }
  .shop-scene__tags {
    position: absolute;
    left: 6%;
    bottom: 6%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .shop-scene__tags .hz-chip {
    background: var(--hz-surface);
    color: var(--hz-text);
    box-shadow: var(--hz-shadow-sm);
  }
  .shop-scene__progress {
    position: absolute;
    inset-inline: 10%;
    bottom: 8%;
    display: grid;
    gap: 8px;
    color: var(--hz-text-2);
    font-family: var(--hz-font-mono);
    font-size: var(--hz-text-xs);
  }
  .shop-parcel {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 22rem;
    padding: 1.5rem;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-surface);
    box-shadow: var(--hz-shadow-md);
  }
  .shop-parcel ol {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
    font-size: var(--hz-text-sm);
  }
  .shop-parcel li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hz-text-2);
  }
  .shop-parcel li::before {
    content: "";
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hz-accent);
  }
  .shop-parcel li:last-child::before {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--hz-line-strong);
  }
  .shop-parcel li:last-child {
    color: var(--hz-text-3);
  }
  @media (min-width: 1024px) {
    .shop-story {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
    .shop-story__stage {
      position: sticky;
      top: calc(var(--hz-header-h) + 3rem);
      display: block;
      align-self: start;
    }
    .shop-story__stage .shop-scene {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(0.97);
      transition:
        opacity var(--hz-dur-slow) var(--hz-ease-out),
        transform var(--hz-dur-slow) var(--hz-ease-out);
    }
    .shop-story__stage-inner {
      position: relative;
      aspect-ratio: 5 / 4;
    }
    .shop-story__stage[data-active="1"] [data-scene="1"],
    .shop-story__stage[data-active="2"] [data-scene="2"],
    .shop-story__stage[data-active="3"] [data-scene="3"],
    .shop-story__stage[data-active="4"] [data-scene="4"] {
      opacity: 1;
      transform: none;
    }
    .shop-story__steps {
      gap: 0;
    }
    .shop-story__step {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 60svh;
      border-color: transparent;
      background: transparent;
    }
    .shop-story__step.is-active {
      border-color: var(--hz-accent-line);
      background: var(--hz-surface);
      box-shadow: var(--hz-shadow-md);
    }
    .shop-story__inline {
      display: none;
    }
  }

  /* ─── Newsletter ─── */
  .shop-newsletter {
    display: grid;
    gap: 1.5rem;
    align-items: center;
  }
  .shop-newsletter form {
    display: grid;
    gap: 10px;
  }
  .shop-newsletter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .shop-newsletter__row .hz-input {
    flex: 1 1 14rem;
    width: auto;
  }
  .shop-status {
    color: var(--hz-success);
    font-size: var(--hz-text-sm);
  }
  @media (min-width: 900px) {
    .shop-newsletter {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
  }

  /* ─── Collections page ─── */
  .shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--hz-line);
  }
  .shop-toolbar .hz-segmented {
    max-width: 100%;
    overflow-x: auto;
  }
  .shop-toolbar__end {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--hz-text-3);
    font-size: var(--hz-text-sm);
  }
  .shop-toolbar__end label {
    color: var(--hz-text-2);
  }
  .shop-toolbar .hz-select {
    width: auto;
    min-height: 40px;
    padding-block: 6px;
    font-size: var(--hz-text-sm);
  }

  /* ─── Product page ─── */
  .shop-crumbs {
    padding-top: 1.5rem;
    color: var(--hz-text-3);
    font-size: var(--hz-text-sm);
  }
  .shop-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    list-style: none;
  }
  .shop-crumbs li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--hz-line-strong);
  }
  .shop-crumbs a {
    color: var(--hz-text-2);
    text-decoration: none;
  }
  .shop-crumbs a:hover {
    color: var(--hz-text);
    text-decoration: underline;
  }
  .shop-product {
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4rem);
    padding-block: 1.5rem clamp(4rem, 3rem + 4vw, 6rem);
  }
  .shop-wall {
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    padding: 7%;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-2xl);
    background:
      radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--hz-accent) 10%, transparent), transparent 60%),
      var(--hz-surface-2);
  }
  .shop-wall .shop-frame {
    width: var(--w, 78%);
  }
  .shop-wall .shop-frame[data-size="a4"] {
    --w: 60%;
  }
  .shop-wall .shop-frame[data-size="a3"] {
    --w: 76%;
  }
  .shop-wall .shop-frame[data-size="a2"] {
    --w: 94%;
  }
  .shop-wall__note {
    margin-top: 12px;
    color: var(--hz-text-3);
    font-size: var(--hz-text-xs);
    text-align: center;
  }
  .shop-product__info h1 {
    margin-top: 0.75rem;
    font-size: var(--hz-text-h2);
    line-height: var(--hz-leading-h2);
    letter-spacing: var(--hz-tracking-h2);
  }
  .shop-rating {
    margin-top: 0.75rem;
    color: var(--hz-text-2);
    font-size: var(--hz-text-sm);
  }
  .shop-stars {
    color: var(--hz-accent-text);
    letter-spacing: 1px;
  }
  .shop-price {
    margin-top: 1.25rem;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .shop-product__text {
    margin-top: 1rem;
    color: var(--hz-text-2);
  }
  .shop-options {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hz-line);
  }
  .shop-options legend {
    margin-bottom: 10px;
    font-size: var(--hz-text-sm);
    font-weight: 600;
  }
  .shop-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .shop-choice {
    position: relative;
    display: grid;
    gap: 2px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--hz-line-strong);
    border-radius: var(--hz-radius-md);
    background: var(--hz-surface);
    cursor: pointer;
    transition:
      border-color var(--hz-dur-fast) var(--hz-ease-out),
      box-shadow var(--hz-dur-fast) var(--hz-ease-out);
  }
  .shop-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .shop-choice__label {
    font-size: var(--hz-text-sm);
    font-weight: 600;
  }
  .shop-choice__hint {
    color: var(--hz-text-3);
    font-size: var(--hz-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .shop-choice:hover {
    border-color: var(--hz-text-3);
  }
  .shop-choice:has(input:checked) {
    border-color: var(--hz-accent-text);
    box-shadow: inset 0 0 0 1px var(--hz-accent-text);
    background: var(--hz-accent-soft);
  }
  .shop-choice:has(input:focus-visible) {
    outline: 2px solid var(--hz-focus);
    outline-offset: 2px;
  }
  .shop-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--hz-line-strong);
  }
  .shop-swatch--none {
    background: #fbfaf7;
  }
  .shop-swatch--black {
    background: #18181b;
  }
  .shop-swatch--oak {
    background: #c9a473;
  }
  .shop-buy {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.75rem;
  }
  .shop-buy .hz-btn {
    flex: 1 1 12rem;
  }
  .shop-qty {
    display: inline-flex;
    align-items: center;
    height: 52px;
    border: 1px solid var(--hz-line-strong);
    border-radius: var(--hz-radius-full);
    background: var(--hz-surface);
  }
  .shop-qty__btn {
    width: 44px;
    height: 100%;
    border: 0;
    border-radius: var(--hz-radius-full);
    background: transparent;
    color: var(--hz-text);
    font-size: 1.125rem;
    cursor: pointer;
  }
  .shop-qty__btn:hover {
    background: var(--hz-surface-2);
  }
  .shop-qty__input {
    width: 3rem;
    height: 100%;
    border: 0;
    background: transparent;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .shop-qty__input::-webkit-inner-spin-button,
  .shop-qty__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .shop-qty__input:focus-visible {
    outline-offset: -2px;
    border-radius: 6px;
  }
  .shop-qty--sm {
    height: 40px;
  }
  .shop-qty--sm .shop-qty__btn {
    width: 36px;
  }
  .shop-qty--sm .shop-qty__input {
    width: 2.25rem;
  }
  .shop-perks {
    display: grid;
    gap: 10px;
    margin-top: 1.75rem;
    padding: 0;
    list-style: none;
    color: var(--hz-text-2);
    font-size: var(--hz-text-sm);
  }
  .shop-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .shop-perks svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--hz-accent-text);
  }
  @media (min-width: 960px) {
    .shop-product {
      grid-template-columns: 1.15fr 1fr;
      align-items: start;
    }
    .shop-wall {
      aspect-ratio: 1 / 0.92;
    }
    .shop-product__gallery {
      position: sticky;
      top: calc(var(--hz-header-h) + 1.5rem);
    }
  }

  .shop-tabs {
    margin-top: 2.5rem;
  }
  .shop-tabs [role="tabpanel"] {
    margin-top: 1.5rem;
    color: var(--hz-text-2);
  }
  .shop-tabs [role="tabpanel"] > * + * {
    margin-top: 0.75rem;
  }
  .shop-specs {
    display: grid;
    gap: 0;
  }
  .shop-specs div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
    padding-block: 10px;
    border-bottom: 1px solid var(--hz-line);
    font-size: var(--hz-text-sm);
  }
  .shop-specs dt {
    color: var(--hz-text);
    font-weight: 500;
  }
  .shop-reviews {
    display: grid;
    gap: 1rem;
    padding: 0;
    list-style: none;
  }
  .shop-review {
    padding: 1rem 1.25rem;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-md);
    background: var(--hz-surface);
  }
  .shop-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--hz-text);
  }
  .shop-review p + p {
    margin-top: 6px;
    font-size: var(--hz-text-sm);
  }

  /* ─── Cart ─── */
  .shop-cart {
    display: grid;
    gap: 2rem;
    padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
  }
  .shop-lines {
    display: grid;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hz-line);
  }
  .shop-line {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    grid-template-areas:
      "thumb info remove"
      "thumb qty total";
    gap: 10px 16px;
    align-items: center;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--hz-line);
  }
  .shop-line__thumb {
    grid-area: thumb;
    align-self: start;
    padding: 8px;
    border-radius: var(--hz-radius-md);
    background: var(--hz-surface-2);
  }
  .shop-line__thumb img {
    width: 100%;
    aspect-ratio: 1.414 / 1;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fbfaf7;
  }
  .shop-line__info {
    grid-area: info;
    min-width: 0;
  }
  .shop-line__title {
    color: var(--hz-text);
    font-weight: 600;
    text-decoration: none;
  }
  .shop-line__title:hover {
    text-decoration: underline;
  }
  .shop-line__options {
    margin-top: 2px;
    color: var(--hz-text-3);
    font-size: var(--hz-text-sm);
  }
  .shop-line .shop-qty {
    grid-area: qty;
    justify-self: start;
  }
  .shop-line__total {
    grid-area: total;
    justify-self: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .shop-line__remove {
    grid-area: remove;
    justify-self: end;
    width: 36px;
    height: 36px;
  }
  .shop-line__remove:hover {
    color: var(--hz-danger);
    border-color: color-mix(in srgb, var(--hz-danger) 40%, transparent);
  }
  @media (min-width: 720px) {
    .shop-line {
      grid-template-columns: 112px 1fr auto 6rem auto;
      grid-template-areas: "thumb info qty total remove";
    }
  }
  .shop-summary {
    display: grid;
    gap: 1.25rem;
    align-self: start;
  }
  .shop-summary h2 {
    font-size: 1.25rem;
  }
  .shop-summary__rows {
    display: grid;
    gap: 10px;
  }
  .shop-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--hz-text-2);
    font-variant-numeric: tabular-nums;
  }
  .shop-summary__row dd {
    color: var(--hz-text);
  }
  .shop-summary__row--total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--hz-line);
    color: var(--hz-text);
    font-size: 1.125rem;
    font-weight: 600;
  }
  .shop-free {
    display: grid;
    gap: 10px;
  }
  .shop-free__text {
    color: var(--hz-text-2);
    font-size: var(--hz-text-sm);
  }
  .shop-empty {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding: clamp(2rem, 1.5rem + 3vw, 4rem);
    border: 1px dashed var(--hz-line-strong);
    border-radius: var(--hz-radius-xl);
  }
  .shop-empty p {
    max-width: 32rem;
    color: var(--hz-text-2);
  }
  @media (min-width: 960px) {
    .shop-cart {
      grid-template-columns: 1fr 22rem;
      align-items: start;
      gap: 3rem;
    }
    .shop-cart .shop-summary {
      position: sticky;
      top: calc(var(--hz-header-h) + 1.5rem);
    }
  }

  /* ─── Checkout ─── */
  .shop-checkout {
    display: grid;
    gap: 2rem;
    padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
  }
  .shop-checkout form {
    display: grid;
    gap: 2.5rem;
  }
  .shop-fieldset {
    display: grid;
    gap: 1rem;
  }
  .shop-fieldset legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .shop-fieldset legend span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
    font-family: var(--hz-font-mono);
    font-size: var(--hz-text-xs);
  }
  .shop-fields {
    display: grid;
    gap: 1rem;
  }
  .shop-choices--stack {
    grid-template-columns: 1fr;
  }
  .shop-choice--row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .shop-choice--row .shop-choice__price {
    grid-row: span 2;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .shop-mini-list {
    display: grid;
    gap: 14px;
    padding: 0;
    list-style: none;
  }
  .shop-mini {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    font-size: var(--hz-text-sm);
    font-variant-numeric: tabular-nums;
  }
  .shop-mini__thumb {
    position: relative;
    padding: 6px;
    border-radius: var(--hz-radius-sm);
    background: var(--hz-surface-2);
  }
  .shop-mini__thumb img {
    width: 100%;
    aspect-ratio: 1.414 / 1;
    object-fit: cover;
  }
  .shop-mini__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--hz-radius-full);
    background: var(--hz-text-2);
    color: var(--hz-bg);
    font-size: 11px;
    font-weight: 600;
  }
  .shop-mini__info {
    display: grid;
    min-width: 0;
  }
  .shop-mini__info span {
    color: var(--hz-text-3);
  }
  @media (min-width: 640px) {
    .shop-fields--2 {
      grid-template-columns: 1fr 1fr;
    }
    .shop-fields--3 {
      grid-template-columns: 1fr 1fr;
    }
    .shop-fields--3 > :last-child {
      grid-column: 1 / -1;
    }
  }
  @media (min-width: 1100px) {
    .shop-fields--3 {
      grid-template-columns: 1.4fr 1fr 1.4fr;
    }
    .shop-fields--3 > :last-child {
      grid-column: auto;
    }
  }
  @media (min-width: 960px) {
    .shop-checkout {
      grid-template-columns: 1fr 24rem;
      align-items: start;
      gap: 3rem;
    }
    .shop-checkout .shop-summary {
      position: sticky;
      top: calc(var(--hz-header-h) + 1.5rem);
    }
  }

  /* ─── Confirmation, contact, about ─── */
  .shop-done {
    display: grid;
    justify-items: start;
    gap: 1rem;
    max-width: 40rem;
    padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
  }
  .shop-done h2 {
    font-size: var(--hz-text-h2);
    line-height: var(--hz-leading-h2);
    letter-spacing: var(--hz-tracking-h2);
    outline: none;
  }
  .shop-done p {
    color: var(--hz-text-2);
  }
  .shop-check {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hz-success-soft);
    color: var(--hz-success);
  }
  .shop-check svg {
    width: 28px;
    height: 28px;
  }

  .shop-contact {
    display: grid;
    gap: 2rem;
    padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
  }
  .shop-contact form,
  .shop-contact .shop-done {
    display: grid;
    gap: 1.25rem;
  }
  .shop-contact h2 {
    font-size: 1.25rem;
  }
  .shop-info {
    display: grid;
    align-self: start;
    padding: 0;
    list-style: none;
  }
  .shop-info li {
    display: flex;
    gap: 14px;
    padding: 1.25rem;
  }
  .shop-info li + li {
    border-top: 1px solid var(--hz-line);
  }
  .shop-info small {
    display: block;
    color: var(--hz-text-3);
    font-size: var(--hz-text-xs);
  }
  @media (min-width: 960px) {
    .shop-contact {
      grid-template-columns: 1.4fr 1fr;
      align-items: start;
      gap: 3rem;
    }
  }

  .shop-about {
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4rem);
    align-items: center;
  }
  .shop-about .hz-prose > * + * {
    margin-top: 1rem;
  }
  .shop-about__image {
    overflow: hidden;
    border-radius: var(--hz-radius-2xl);
  }
  .shop-about__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .shop-values {
    display: grid;
    gap: 1rem;
    padding: 0;
    list-style: none;
  }
  .shop-values li h3 {
    margin-top: 1.25rem;
    font-size: 1.125rem;
  }
  .shop-values li p {
    margin-top: 6px;
    color: var(--hz-text-2);
    font-size: var(--hz-text-sm);
  }
  .shop-team {
    display: grid;
    gap: 1rem;
    padding: 0;
    list-style: none;
  }
  .shop-team li {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .shop-avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hz-accent-soft);
    color: var(--hz-accent-text);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .shop-team strong {
    display: block;
  }
  .shop-team span {
    color: var(--hz-text-2);
    font-size: var(--hz-text-sm);
  }
  @media (min-width: 900px) {
    .shop-about {
      grid-template-columns: 1fr 1fr;
    }
    .shop-values,
    .shop-team {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ─── FAQ ─── */
  .shop-faq {
    display: grid;
    max-width: 48rem;
    padding-bottom: 2rem;
  }
  .shop-faq details {
    border-bottom: 1px solid var(--hz-line);
  }
  .shop-faq details:first-child {
    border-top: 1px solid var(--hz-line);
  }
  .shop-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding-block: 14px;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    list-style: none;
    cursor: pointer;
  }
  .shop-faq summary::-webkit-details-marker {
    display: none;
  }
  .shop-faq summary::after {
    content: "+";
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--hz-line-strong);
    border-radius: 50%;
    color: var(--hz-text-2);
    font-weight: 400;
    transition: transform var(--hz-dur) var(--hz-ease-out);
  }
  .shop-faq details[open] summary::after {
    transform: rotate(45deg);
  }
  .shop-faq summary:hover {
    color: var(--hz-accent-text);
  }
  .shop-faq details > div {
    padding-bottom: 1.25rem;
    color: var(--hz-text-2);
  }
  .shop-faq details > div > * + * {
    margin-top: 0.75rem;
  }

  /* ─── Small page pieces ─── */
  .shop-collections > li {
    display: grid;
  }
  .shop-listing,
  .shop-faq-page {
    padding-bottom: var(--hz-section-y);
  }
  .shop-optional {
    color: var(--hz-text-3);
    font-weight: 400;
  }
  .shop-cart__more {
    margin-top: 1.25rem;
  }
  .shop-empty {
    margin-bottom: var(--hz-section-y);
  }
  .shop-contact .shop-done {
    padding-bottom: 0;
  }
  .shop-faq-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: 48rem;
    margin-top: 2.5rem;
  }
  .shop-faq-cta p {
    margin-top: 4px;
    color: var(--hz-text-2);
  }

  /* ─── Toast ─── */
  .shop-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: var(--hz-z-overlay);
    display: grid;
    gap: 2px;
    width: min(26rem, calc(100vw - 32px));
    padding: 14px 18px;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg);
    background: var(--hz-material-solid);
    color: var(--hz-text);
    box-shadow: var(--hz-shadow-lg);
    font-size: var(--hz-text-sm);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition:
      opacity var(--hz-dur) var(--hz-ease-out),
      transform var(--hz-dur) var(--hz-ease-out);
  }
  .shop-toast span {
    color: var(--hz-text-2);
  }
  .shop-toast a {
    justify-self: start;
    margin-top: 4px;
    font-weight: 500;
  }
  .shop-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  @media (max-width: 639px) {
    .shop-toast {
      bottom: 88px;
    }
  }

  /* ─── Footer ─── */
  .shop-footer__grid {
    display: grid;
    gap: 2.5rem;
  }
  .shop-footer__grid ul {
    display: grid;
    gap: 8px;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
  }
  .shop-footer__grid a,
  .shop-footer__bottom a {
    color: var(--hz-text-2);
    text-decoration: none;
  }
  .shop-footer__grid a:hover,
  .shop-footer__bottom a:hover {
    color: var(--hz-text);
  }
  .shop-footer__about p {
    max-width: 22rem;
    margin-top: 1rem;
  }
  .shop-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hz-line);
  }
  @media (min-width: 800px) {
    .shop-footer__grid {
      grid-template-columns: 1.6fr repeat(3, 1fr);
    }
  }
}