/* Final shared layout rules: text and controls must fit their actual column. */
.hero-copy,.collection-copy,.guide>div,.detail-copy,.product-info,
.benefit>div,.category>div,.cart-row>div,.checkout-form>label {
  min-width:0;
}
.hero-copy h1,.collection-copy h2,.guide h2,.detail-copy h1,
.category strong,.category span,.product-info,.cart-row h2 {
  overflow-wrap:anywhere;
}
.category>div {flex:1}
.search {min-width:0}
.search button,.header-actions,.brand-mark,.add-button {flex-shrink:0}
.main-nav {flex-wrap:wrap;row-gap:10px;padding-block:10px}
.main-nav a {overflow-wrap:anywhere}
.benefits {grid-template-columns:repeat(3,minmax(0,1fr))}
.categories {grid-template-columns:repeat(4,minmax(0,1fr))}
.guide {grid-template-columns:repeat(2,minmax(0,1fr))}
.detail {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.checkout-form {grid-template-columns:repeat(2,minmax(0,1fr))}
.product-bottom,.cart-tools,.buy-row,.toolbar,.toolbar-controls {flex-wrap:wrap}
.toolbar-controls {min-width:0}
.toolbar-controls select {min-width:0;max-width:100%}
.product-grid.list,.shop-content .product-grid.list {grid-template-columns:minmax(0,1fr)}
.product-grid.list .product-card {grid-template-columns:150px minmax(0,1fr)}
.cart-row {grid-template-columns:90px minmax(0,1fr) auto}
.detail-copy dl {grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
.detail-copy dt,.detail-copy dd {overflow-wrap:anywhere}
.hero-meta {max-width:calc(100% - 32px);overflow-wrap:anywhere}
.hero-meta:before {flex-shrink:0}
.section-head {flex-wrap:wrap}
.section-head>a {white-space:normal}

/* The original designs now give the photograph its own column, too. */
.original-hero {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  height:auto;
  min-height:540px;
}
.original-hero:after {display:none}
.original-hero .hero-copy {align-self:center;padding:clamp(28px,4vw,55px)}
.original-hero .hero-copy h1 {width:100%;max-width:none;font-size:clamp(2.2rem,4vw,4.4rem)}
.original-hero .hero-art {position:relative;min-width:0;min-height:380px;overflow:hidden}
.original-hero .hero-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.original-hero .hero-meta {right:16px;bottom:16px}
html[data-shop=forge] .original-hero .hero-meta {background:#151819e8;padding:9px 14px;border-radius:var(--radius)}

@media(max-width:1100px) {
  .catalog-layout .product-grid:not(.list) {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-layout {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1000px) {
  .original-hero {grid-template-columns:minmax(0,1fr);min-height:0}
  .original-hero .hero-art {min-height:340px}
  .original-hero .hero-copy h1 {max-width:18ch;font-size:clamp(2.2rem,5vw,3.6rem)}
}
@media(max-width:1200px) {
  .shop-content .original-hero {grid-template-columns:minmax(0,1fr);min-height:0}
  .shop-content .benefits {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px) {
  .benefits,.guide,.detail,.checkout-form {grid-template-columns:minmax(0,1fr)}
  .categories {grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-grid.list .product-card {grid-template-columns:100px minmax(0,1fr)}
  .cart-row {grid-template-columns:70px minmax(0,1fr)}
  .original-hero .hero-art {min-height:285px}
  .original-hero .hero-copy {padding:30px 24px 32px}
}
@media(max-width:380px) {
  .hero .hero-copy h1,.shop-content .hero .hero-copy h1 {font-size:clamp(1.85rem,8.5vw,2.15rem)}
  .hero .hero-copy {padding-inline:20px}
  .product-grid.list .product-card {grid-template-columns:80px minmax(0,1fr);gap:14px}
  .buy-row .button {padding-inline:16px}
}


/* Appearance controls stay together and never squeeze the search icon. */
.header-main {flex-wrap:wrap}
.header-actions {max-width:100%}
.appearance-controls,.color-choices {display:flex;align-items:center;flex-shrink:0;gap:4px}
.appearance-controls {gap:8px}
.color-dot {width:32px;height:44px;padding:0;border:0;background:transparent;border-radius:8px;display:grid;place-items:center;color:var(--ink)}
.color-dot:before {content:'';width:18px;height:18px;border-radius:50%;background:var(--color-swatch);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--line)}
.color-dot[aria-pressed=true]:before {outline:2px solid var(--ink);outline-offset:3px}
html[data-color]:not([data-color=original]) .hero {background:var(--surface);color:var(--ink)}
html[data-color]:not([data-color=original]) .hero-copy p {color:var(--muted)}
html[data-color]:not([data-color=original]) .hero-copy .eyebrow,
html[data-color]:not([data-color=original]) .hero-copy h1 em {color:var(--accent)}
html[data-color]:not([data-color=original]) .hero-copy .button {background:var(--accent);color:var(--on-accent)}
html[data-color]:not([data-color=original]) .hero-meta {background:var(--bg);color:var(--ink)}
html[data-color]:not([data-color=original]) .collection-image {background:var(--surface)}
@media(max-width:760px) {
  .header-actions {flex-wrap:wrap;justify-content:flex-end}
  .appearance-controls {gap:4px}
  .color-choices {gap:0}
}