/* These override the shared .grid utility, so they belong to its layer and load last. */
@layer utilities {
  .tag-wide { display:block }
  .tag-intro { display:grid; gap:var(--sp-5); grid-template-columns:minmax(0,1.2fr) minmax(min(280px,100%),.8fr); align-items:end }
  .tag-intro h1 { max-width:12ch }
  .tag-source { font-size:var(--t-caption); color:var(--ink-3); max-width:52ch }
  .tag-source a { color:inherit }
  .tag-collections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-8) var(--gutter) }
  .tag-collection { border-top:1px solid var(--ink); padding-top:var(--sp-4) }
  .tag-collection-head { display:flex; justify-content:space-between; gap:var(--sp-5); align-items:baseline; margin-bottom:var(--sp-5) }
  .tag-collection h2 { font-size:var(--t-h3) }
  .tag-collection-head p { max-width:35ch; color:var(--ink-2); font-size:var(--t-caption) }
  .tag-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-6) var(--gutter); list-style:none; padding:0; margin:0 }
  .tag-card,.tag-card a { color:inherit; text-decoration:none; display:block; min-width:0 }
  .tag-card-media { display:block; aspect-ratio:4/5; overflow:hidden; background:#cbc1ac }
  .tag-card-media img { width:100%; height:100%; object-fit:contain; display:block }
  .tag-card-name { display:block; margin-top:var(--sp-3) }
  .tag-card-name strong { font-family:var(--font-display); font-size:var(--t-h4); font-weight:var(--w-display) }
  .tag-card-name span { display:block; margin-top:var(--sp-1); font-size:var(--t-micro); color:var(--ink-3); letter-spacing:.08em }
  .tag-card-colours { display:flex; gap:.35rem; margin-top:var(--sp-2) }
  .tag-card-colours i { width:.75rem; height:.75rem; border-radius:50%; border:1px solid rgb(0 0 0/.18); background:var(--dot) }
  .tag-card p { margin-top:var(--sp-1); color:var(--ink-2); font-size:var(--t-caption); line-height:1.35rem }
  .tag-placeholder { width:100%; height:100%; display:grid; place-items:center; overflow:hidden; background:#d9d1c2; color:#25231f; text-align:center; padding:var(--sp-3) }
  .tag-placeholder span { max-width:100%; overflow-wrap:anywhere }

  .tag-product { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(min(320px,100%),.65fr); gap:var(--sp-8) var(--gutter); padding-top:var(--sp-7); align-items:start }
  .tag-gallery { display:grid; grid-template-columns:5rem minmax(0,1fr); gap:var(--sp-3); position:sticky; top:6rem }
  .tag-thumbs { display:flex; flex-direction:column; gap:var(--sp-2) }
  .tag-thumbs button { aspect-ratio:1; border:1px solid transparent; padding:0; overflow:hidden; background:#d9d1c2; cursor:pointer }
  .tag-thumbs button:hover, .tag-thumbs button:focus-visible, .tag-thumbs button[aria-pressed="true"] { border-color:var(--ink) }
  .tag-thumbs img { width:100%; height:100%; object-fit:cover }
  .tag-main-shot { aspect-ratio:4/5; background:#d9d1c2; overflow:hidden }
  .tag-main-shot img { width:100%; height:100%; object-fit:contain }
  .tag-buy { padding-top:var(--sp-2) }
  .tag-line { color:var(--ink-3); font-size:var(--t-caption); margin-bottom:var(--sp-2) }
  .tag-buy h1 { font-size:clamp(2.4rem,1.7rem + 2.6vw,4.8rem); line-height:1; max-width:10ch }
  .tag-code { margin-top:var(--sp-3); font-size:var(--t-micro); letter-spacing:.12em; color:var(--ink-3) }
  .tag-price { margin-top:var(--sp-5); font-size:var(--t-body); color:var(--ink) }
  .tag-choice { border:0; padding:0; margin:var(--sp-6) 0 0 }
  .tag-choice legend { font-weight:var(--w-medium); font-size:var(--t-caption); margin-bottom:var(--sp-3) }
  .tag-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2) }
  .tag-chip { display:inline-flex; min-width:4rem; min-height:44px; align-items:center; justify-content:center; border:1px solid var(--rule); padding:var(--sp-2) var(--sp-3); font:inherit; font-size:var(--t-caption); background:transparent; color:inherit; cursor:pointer }
  .tag-chip.is-default { border-color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent) }
  .tag-swatches { display:flex; gap:var(--sp-3) }
  .tag-swatch { display:grid; gap:var(--sp-1); justify-items:center; font-size:var(--t-micro); color:var(--ink-3) }
  .tag-swatch i { width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid rgb(0 0 0/.2); display:block; background:var(--swatch) }
  .tag-actions { display:grid; gap:var(--sp-2); margin-top:var(--sp-6) }
  .tag-promise { margin-top:var(--sp-3); color:var(--ink-3); font-size:var(--t-caption); line-height:1.35rem }
  .tag-short { margin-top:var(--sp-6); color:var(--ink-2); max-width:44ch }
  .tag-specs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 var(--gutter); margin-top:var(--sp-5) }
  .tag-specs div { display:grid; grid-template-columns:minmax(6rem,.7fr) 1.3fr; gap:var(--sp-3); border-top:1px solid var(--rule); padding:var(--sp-3) 0; font-size:var(--t-caption) }
  .tag-specs dt { color:var(--ink-3) }
  .tag-specs dd { margin:0 }
  .tag-story { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:var(--gutter); align-items:start }
  .tag-story p { color:var(--ink-2); max-width:58ch }

  @media(max-width:860px){
    .tag-intro,.tag-product,.tag-story { grid-template-columns:1fr }
    .tag-collections { grid-template-columns:1fr }
    .tag-gallery { position:static }
    .tag-specs { grid-template-columns:1fr }
  }
  @media(max-width:560px){
    .tag-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5) var(--sp-3) }
    .tag-card-name { display:block }
    .tag-card-name span { display:block; margin-top:var(--sp-1); overflow-wrap:anywhere }
    .tag-collection-head { display:block }
    .tag-collection-head p { margin-top:var(--sp-2) }
    .tag-gallery { grid-template-columns:44px minmax(0,1fr) }
    .tag-thumbs button { width:44px }
  }
}