/* Shared Color Studio header: matches the shop's purple navigation and centered, curved logo tab. */
.studio-header { box-shadow: none; }
.studio-header .shipping-banner {
  min-height: 49px; height: auto; display: grid; place-items: center; padding: 10px 20px; text-align: center;
  background: #8e5892; color: white; font-family: "DM Sans", sans-serif; font-size: 15px; line-height: 1.4; letter-spacing: .01em;
}
.studio-header .shipping-banner strong { margin: 0 .22em; font-weight: 850; }
.studio-header .store-nav {
  position: relative; display: grid; grid-template-columns: 1fr 180px 1fr; grid-template-rows: 88px; align-items: center;
  height: 88px; padding: 0 30px; background: #fff; border: 0; backdrop-filter: none;
}
.studio-header .nav-logo {
  position: relative; z-index: 2; grid-column: 2; justify-self: center; align-self: start; display: grid; place-items: start center;
  width: 220px; height: 118px; margin: 0; padding-top: 10px; overflow: visible;
}
.studio-header .nav-logo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 118'%3E%3Cpath fill='white' d='M0 0h220v88c-20 0-24 30-48 30H48C24 118 20 88 0 88Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.studio-header .nav-logo img {
  position: static; width: 137px; height: auto; max-width: 100%; transform: none;
}
.return-to-shop, .studio-back {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 0; color: #8e5892; text-decoration: none;
  font-family: "Rum Raisin", sans-serif; font-size: 20px; font-weight: 400;
  line-height: 1.2; text-transform: uppercase;
}
.return-to-shop { grid-column: 3; justify-self: end; }
.studio-back { grid-column: 1; grid-row: 1; justify-self: start; }
.return-to-shop svg, .studio-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.return-to-shop:hover, .studio-back:hover { color: #447fc1; }
.return-to-shop:hover span, .studio-back:hover span { text-decoration: underline; text-underline-offset: 4px; }
.studio-header a:focus-visible { outline: 2px solid #447fc1; outline-offset: 4px; border-radius: 4px; }
.studio-header + main .tool-intro { padding-top: 46px; }
@media (max-width: 640px) {
  .studio-header .shipping-banner { min-height: 34px; padding: 7px 10px; font-size: 11px; }
  .studio-header .store-nav { height: 70px; grid-template-columns: 1fr 142px 1fr; grid-template-rows: 70px; padding: 0 12px; }
  .studio-header .nav-logo { width: 142px; height: 94px; padding-top: 9px; }
  .studio-header .nav-logo img { width: 105px; }
  .return-to-shop, .studio-back { gap: 0; max-width: 86px; font-size: 17px; }
  .return-to-shop { text-align: right; }
  .return-to-shop svg, .studio-back svg { display: none; }
  .studio-header + main .tool-intro { padding-top: 38px; }
}
@media (max-width: 360px) { .studio-header .shipping-banner { padding-inline: 4px; letter-spacing: 0; } }

/* Phones zoom the page in when a focused text field's font is under 16px (iOS Safari, and
   Chrome on some Android phones). Every text-entry control stays at 16px or more there. */
@media (max-width: 700px) {
  html body input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  html body select,
  html body textarea { font-size: max(16px, 1em); }
}