/* Keep search easy to find without a separate banner on every page. */
body>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center}
header .brand{grid-column:1;grid-row:1}
header .site-search{grid-column:2;grid-row:1;width:100%;max-width:560px;margin:0 auto;padding:0}
header .saved-link{grid-column:3;grid-row:1;justify-self:end}
header .site-search-form label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
header .site-search-help{display:none}
header .site-search-row input{min-height:44px}
header .site-search-row button{min-height:44px}
/* Let visitors choose a color before reading the longer policy at confirmation. */
#collection .color-intro-simple{margin-bottom:12px}
#collection .color-intro-simple h1{margin-bottom:6px}
#collection .color-intro-simple .price-note{margin-top:8px}
#collection .color-intro-simple .photo-note{margin-top:9px}
.color-quick-note{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;background:#fcf5f7;border-left:3px solid var(--rose);padding:11px 14px;margin:12px 0 22px;font-size:13px;line-height:1.7}
.color-quick-note strong{color:#78304d;font-size:14px}
.color-quick-note span{color:#594b53}
#collection #grid .collection-story{display:none}
@media(max-width:760px){
  body>header{height:auto;min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:3px;padding:6px 14px 10px}
  header .brand{grid-column:1;grid-row:1}
  header .brand .brand-logo{width:70px}
  header .saved-link{grid-column:2;grid-row:1}
  header .site-search{grid-column:1/-1;grid-row:2;max-width:none}
  header .site-search-row{gap:6px}
  header .site-search-row input{font-size:16px}
  header .site-search-row button{min-width:56px;padding:9px}
  #collection:not(.compact-gallery) .collection-story{display:none}
}

/* The photo, work number, actual colors and price carry the choice. Keep
   editorial names in the source data for search and possible later reuse. */
#collection .collection-name,#collection .collection-story,
#saved .collection-name,#saved .collection-story,
#confirmation .collection-name,#confirmation .collection-story,
#detail-display-name,#detail-story,
#nailcollection .nail-display-name,#nailcollection .nail-display-story,
#nailsaved .nail-display-name,#nailsaved .nail-display-story,
#nailconfirmation .nail-display-name,#nailconfirmation .nail-display-story,
#nail-detail-name,#nail-detail-story{display:none!important}

/* Keep color cards focused on the product number and actual color names. */
#collection .card-info .color-names + p,
#colorintro .card-info .color-names + p,
#saved .card-info .color-names + p,
#confirmation .card-info .color-names + p,
#search-grid .card-info .color-names + p,
#detail-description{display:none!important}
#search-grid .collection-name,#search-grid .collection-story,
#search-grid .nail-display-name,#search-grid .nail-display-story{display:none!important}
