.main-page {
  max-width: 726px;
  margin-inline: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.main-page__title {
  display: none !important;
}

/* Match live's top spacing: these pages sit flush under the header (live has no
   cream gap); the section's default 80px is too much. for-nurses is title-first
   with a ~44px gap. (mom-guide/wholesale set their own values in their sections.) */
.main-page--for-parents,
.main-page--clinical-evidence,
.main-page--collab {
  padding-top: 0 !important;
  padding-block-start: 0 !important;
}
.main-page--for-nurses {
  padding-top: 44px !important;
  padding-block-start: 44px !important;
}

.main-page__content h1 {
  font-family: Poppins, sans-serif !important;
  font-size: 52px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.6px !important;
  color: #535353 !important;
}

@media (max-width: 749px) {
  .main-page__content h1 {
    font-size: 36px !important;
  }
}

.main-page--for-nurses .main-page__content h1 {
  font-family: Parkinsans, "parkinsans-regular", sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.6px !important;
  color: #2d2d2d !important;
  text-align: center !important;
  margin: 0 0 16px !important;
}

.main-page--collab .main-page__content h1 {
  font-family: Parkinsans, "parkinsans-regular", sans-serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 52px !important;
  letter-spacing: 0.6px !important;
  color: #535353 !important;
  text-align: center !important;
  margin: 0 !important;
}

@media (max-width: 749px) {
  .main-page--collab .main-page__content h1 {
    font-size: 30px !important;
    line-height: 39px !important;
  }
}

.main-page__content h2 {
  font-family: Parkinsans, "parkinsans-regular", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.6px !important;
  color: #535353 !important;
  margin: 20px 0 !important;
}

.main-page__content h3 {
  font-family: Parkinsans, "parkinsans-regular", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.6px !important;
  color: #535353 !important;
  margin: 18px 0 !important;
}

.main-page__content h4 {
  font-family: Parkinsans, "parkinsans-regular", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.6px !important;
  color: #535353 !important;
  margin: 16px 0 !important;
}

.main-page__content p,
.main-page__content li {
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.6px;
}

.main-page__content table th {
  padding: 1px;
}

.main-page__content table td {
  padding: 1px 12px;
}

/* =====================================================================
   MIGRATION PARITY RULES
   The Shopify -> Shopline migration stripped class/id/type attributes,
   inline style="" attributes and inline <style>/<script> blocks from the
   page CONTENT. The live pages relied on that stripped styling. The rules
   below re-create the live look, scoped per page handle so only these
   content pages are affected. Structural selectors (:has, nth-child,
   element, [href], [name]) target the now-class-less markup.
   ===================================================================== */

/* ---------- Shared full-bleed helper values are inlined per page ------ */

/* =========================== FOR PARENTS ============================= */
/* Live: full-bleed cream hero (image) + email capture form below.       */
.main-page--for-parents .main-page__content > section {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  background-color: #fff9e6;
  padding: 0 0 40px;
  text-align: center;
}
.main-page--for-parents .main-page__content > section img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* the three migrated hidden inputs lost type="hidden" -> hide them */
.main-page--for-parents form input[name="form_type"],
.main-page--for-parents form input[name="utf8"],
.main-page--for-parents form input[name="contact[tags]"],
.main-page--for-nurses form input[name="form_type"],
.main-page--for-nurses form input[name="utf8"],
.main-page--for-nurses form input[name="contact[tags]"] {
  display: none !important;
}
/* the migrated <label> lost class="sr-only" -> visually hide it */
.main-page--for-parents form label,
.main-page--for-nurses form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.main-page--for-parents form {
  margin: 25px auto 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-inline: 16px;
}
.main-page--for-parents form input[name="contact[email]"] {
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 12px 16px;
  min-width: 220px;
  font-size: 16px;
}
.main-page--for-parents form button {
  background-color: transparent;
  color: #4fb093;
  border: 1px solid #4fb093;
  padding: 12px 25px;
  border-radius: 40px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.main-page--for-parents form button:hover {
  background-color: #4fb093;
  color: #fff;
}

/* =========================== FOR NURSES ============================= */
/* Live: full-bleed cream hero with title/subtitle/cta text + form.      */
.main-page--for-nurses .main-page__content > section {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  background-color: #fff9e6;
  padding: 60px 20px 40px;
  text-align: center;
}
.main-page--for-nurses .main-page__content > section > div:first-child {
  max-width: 700px;
  margin: 0 auto 30px;
  padding: 0 20px;
}
/* subtitle + cta paragraphs inside the hero text wrapper */
.main-page--for-nurses .main-page__content > section > div p:nth-of-type(1) {
  font-size: 1.15rem !important;
  color: #444 !important;
  margin: 0 0 12px !important;
  line-height: 1.5 !important;
}
.main-page--for-nurses .main-page__content > section > div p:nth-of-type(2) {
  font-size: 1rem !important;
  color: #555 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.main-page--for-nurses form {
  margin: 25px auto 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-inline: 16px;
}
.main-page--for-nurses form input[name="contact[email]"] {
  padding: 12px 20px;
  border: 1.5px solid #ccc;
  border-radius: 50px;
  font-size: 1rem;
  width: 260px;
  max-width: 100%;
  outline: none;
}
.main-page--for-nurses form input[name="contact[email]"]:focus {
  border-color: #4fb093;
}
.main-page--for-nurses form button {
  padding: 12px 24px;
  background-color: transparent;
  color: #4fb093;
  border: 1.5px solid #4fb093;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.main-page--for-nurses form button:hover {
  background-color: #4fb093;
  color: #fff;
}

/* ============================== COLLAB ============================== */
/* Live styling came from the Shopify Collabs app stylesheet, which does
   not exist in Shopline. Re-created here (scoped) from application-page.css.
   NOTE: the migrated content lost the image src values (empty <img>), so
   the decorative images/logo are hidden to avoid broken-image icons.     */
/* Live renders the Collabs app inside a .collabs-page wrapper (700px, centered).
   The migration produced NO .collabs-page wrapper, so the content-width var has
   to live on the page root, and the 700px column width is set here too. */
.main-page--collab {
  --collabs-page-content-width: 540px;
  max-width: 700px;
}
.main-page--collab .collabs-page {
  --collabs-page-content-width: 540px;
}
.main-page--collab .collabs-page__main {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
}
/* migration stripped the logo's class -> target the header <img> structurally */
.main-page--collab .collabs-page__header img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.main-page--collab .collabs-page__main h1,
.main-page--collab .collabs-page__main h2,
.main-page--collab .collabs-page__main p {
  margin: 0 !important;
}
.main-page--collab .collabs-page__main h2,
.main-page--collab .collabs-page__main p {
  text-align: center !important;
}
.main-page--collab .collabs-page__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: var(--collabs-page-content-width);
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}
.main-page--collab .collabs-page__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.main-page--collab .collabs-page__images {
  display: grid;
  justify-content: center;
  gap: 10px;
  grid-template-columns: repeat(min(var(--collabs-page-images-count, 4), 2), minmax(0, 200px));
}
/* migration stripped the imgs' .collabs-page__image class -> target by parent */
.main-page--collab .collabs-page__images > img,
.main-page--collab .collabs-page__image {
  object-fit: cover;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
}
.main-page--collab .collabs-page__cta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.main-page--collab .collabs-page__cta-main {
  padding: 14px 40px;
  text-decoration: none !important;
  color: var(--collabs-page-button-label-color, #fff) !important;
  background: var(--collabs-page-button-background-color, #000);
  font-size: 14px;
  font-weight: 400;
  transition: 0.2s background;
  text-align: center;
}
.main-page--collab .collabs-page__cta-login-section {
  text-align: center;
}
.main-page--collab .collabs-page__cta-login-link {
  color: var(--collabs-page-link-color, #2c6ecb);
}
.main-page--collab .collabs-page__partnership-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: var(--collabs-page-content-width);
  max-width: 100%;
  margin: 16px auto 0;
}
.main-page--collab .collabs-page__partnership-list li {
  padding: 2px 16px;
  background: #e4e5e7;
  color: #65625c;
}
.main-page--collab .collabs-page__corner-square {
  border-radius: 0;
}
/* migrated images lost their src -> hide broken placeholders */
.main-page--collab img:not([src]),
.main-page--collab img[src=""] {
  display: none !important;
}
@media (min-width: 750px) {
  .main-page--collab .collabs-page__main {
    gap: 40px;
  }
  .main-page--collab .collabs-page__images {
    grid-template-columns: repeat(min(var(--collabs-page-images-count, 4), 4), minmax(0, 200px));
  }
}

/* ============================ BLUEBONNET =========================== */
/* Live: cream content blocks, a two-column "Nomination Details" layout,
   dark navy headings, a timeline table, and a centered CTA button. All of
   this came from inline style="" attrs + one <style> block, now stripped. */
/* Live renders bluebonnet at full page width — full-bleed banner images, a
   ~1260px cream "Nomination Details" block and a full-bleed cream "Official
   Rules" block — NOT the 726px content column. Break the whole page out to the
   viewport so each section can match live's widths. */
.main-page--bluebonnet {
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.main-page--bluebonnet .main-page__content section img {
  display: block;
  width: 100%;
  height: auto;
}
/* the nested nomination section (cream) — live caps it at ~1260px, centered */
.main-page--bluebonnet .main-page__content section section {
  background-color: #fef8ef;
  padding: 50px 40px;
  text-align: left;
  color: #333;
  max-width: 1260px;
  margin-inline: auto;
}
/* the OFFICIAL RULES section (top-level section that wraps a div>h2) is
   full-bleed cream on live; its inner div is capped to 880px (see below). */
.main-page--bluebonnet > section:has(> div > h2) {
  background-color: #fef8ef;
  padding: 50px 40px;
  color: #333;
}
.main-page--bluebonnet > section:has(> div > h2) > div {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
/* NOMINATION DETAILS heading */
.main-page--bluebonnet .main-page__content section section > h2 {
  text-align: left !important;
  font-weight: 700 !important;
  color: #1c2e4a !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 40px !important;
  font-size: 28px !important;
}
/* OFFICIAL RULES heading is centered */
.main-page--bluebonnet > section:has(> div > h2) > div > h2 {
  text-align: center !important;
  color: #1c2e4a !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 28px !important;
  font-size: 26px !important;
}
.main-page--bluebonnet h3 {
  color: #1c2e4a !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  margin: 24px 0 8px !important;
}
/* two-column nomination layout (first div child of the cream section) */
.main-page--bluebonnet .main-page__content section section > div:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  line-height: 1.8;
  font-size: 16px;
  text-align: left;
}
.main-page--bluebonnet .main-page__content section section > div:first-of-type > div {
  flex: 1;
  min-width: 300px;
}
.main-page--bluebonnet .main-page__content section section > div:nth-of-type(2) {
  margin-top: 50px;
}
/* timeline table */
.main-page--bluebonnet table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 16px;
}
.main-page--bluebonnet table td {
  padding: 8px;
}
.main-page--bluebonnet table tr:first-child {
  font-weight: 700;
  color: #1c2e4a;
}
/* dash-style nested lists (they lost class="dash") */
.main-page--bluebonnet li > ul {
  list-style: none;
  margin-left: 8px;
}
.main-page--bluebonnet li > ul > li {
  position: relative;
  padding-left: 14px;
}
.main-page--bluebonnet li > ul > li::before {
  content: "-";
  position: absolute;
  left: 0;
}
/* CTA button (Nomination Form) — centered under the nomination block */
.main-page--bluebonnet .main-page__content > section:has(> section) {
  text-align: center;
}
.main-page--bluebonnet a[href*="forms.monday.com"] {
  display: block;
  width: fit-content;
  margin: 16px auto 28px;
  padding: 10px 20px;
  background-color: #64c3bb;
  color: #fffaee !important;
  border-radius: 52px;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  text-decoration: none !important;
}

/* ========================= CLINICAL EVIDENCE ======================= */
/* Live tables were plain <table> that inherited Dawn's table styling.
   Our theme has no table borders -> re-create a clean bordered / header /
   zebra table, and restore the (stripped) inline-styled Download button.  */
.main-page--clinical-evidence .main-page__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
  table-layout: auto;
}
.main-page--clinical-evidence .main-page__content th,
.main-page--clinical-evidence .main-page__content td {
  border: 1px solid #d9d9d9;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.main-page--clinical-evidence .main-page__content thead th {
  background-color: #f2f2f2;
  font-weight: 700;
}
.main-page--clinical-evidence .main-page__content th[scope="row"] {
  background-color: #fafafa;
  font-weight: 600;
}
.main-page--clinical-evidence .main-page__content tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}
/* Download button — mirrors the live inline style that was stripped */
.main-page--clinical-evidence .main-page__content a[download],
.main-page--clinical-evidence .main-page__content a[href$=".pdf"] {
  display: inline-block;
  background-color: #1a1a1a;
  color: #fff !important;
  padding: 14px 32px;
  text-decoration: none !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
}

/* ================= NIT HAPPENS / PRODUCT INFORMATION =============== */
/* Both live pages use full-bleed image banners + a two-column
   image-with-text component. Nit Happens additionally has a Download
   button and a video. Re-created structurally below.                    */

/* first section = image banner -> full bleed, image spans full width */
.main-page--nit-happens-instructions-for-use .main-page__content > section:first-child,
.main-page--product-information-and-how-it-works .main-page__content > section:first-child {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  text-align: center;
}
.main-page--nit-happens-instructions-for-use .main-page__content > section:first-child img,
.main-page--product-information-and-how-it-works .main-page__content > section:first-child img {
  display: block;
  width: 100%;
  height: auto;
}
/* keep the banner heading / text / button readable & centered under image */
.main-page--nit-happens-instructions-for-use .main-page__content > section:first-child > div > div:nth-child(2) {
  max-width: 726px;
  margin: 20px auto 0;
  padding-inline: 20px;
}

/* two-column image-with-text (image left, text right) */
.main-page--nit-happens-instructions-for-use .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2),
.main-page--product-information-and-how-it-works .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.main-page--nit-happens-instructions-for-use .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2) > div,
.main-page--product-information-and-how-it-works .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2) > div {
  flex: 1 1 300px;
  min-width: 280px;
}
.main-page--nit-happens-instructions-for-use .main-page__content > div img,
.main-page--product-information-and-how-it-works .main-page__content > div img {
  display: block;
  width: 100%;
  height: auto;
}

/* Live uses Poppins 40 for the section headings (banner + image-with-text),
   not the theme's 24px Parkinsans h2. Match it for this page only. */
.main-page--nit-happens-instructions-for-use .main-page__content h2 {
  font-family: Poppins, sans-serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 52px !important;
  letter-spacing: 0.6px !important;
  color: #535353 !important;
}
/* Live's image-with-text block is ~1080px wide, not the 726px content column.
   Break the two-column wrapper out to match (image right, copy left like live). */
.main-page--nit-happens-instructions-for-use .main-page__content > div {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 94vw);
  box-sizing: border-box;
}
.main-page--nit-happens-instructions-for-use .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2) {
  flex-direction: row-reverse;
}
/* live's split is ~text 692 / image 388 (not 50/50): cap the image column */
.main-page--nit-happens-instructions-for-use .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2) > div:nth-child(1) {
  flex: 0 1 388px;
}

/* Download button (Nit Happens IFU) */
.main-page--nit-happens-instructions-for-use .main-page__content a[href$=".pdf"] {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 28px;
  background-color: #2d2d2d;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
}

/* Video section (deferred-media hydrated by the gated script in main-page.html)
   Live renders this as a full-bleed video-section (100vw). Break the video out
   of the 726px content column so it spans the whole viewport like live. */
.main-page--nit-happens-instructions-for-use deferred-media {
  position: relative;
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 24px;
  margin-bottom: 24px;
}
.main-page--nit-happens-instructions-for-use deferred-media > button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.main-page--nit-happens-instructions-for-use deferred-media img,
.main-page--nit-happens-instructions-for-use deferred-media video {
  display: block;
  width: 100%;
  height: auto;
}
/* play indicator (the original SVG was stripped from the poster button) */
.main-page--nit-happens-instructions-for-use deferred-media > button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.main-page--nit-happens-instructions-for-use deferred-media.is-loaded > button::after {
  display: none;
}

/* ============================== MOM GUIDE ========================== */
/* Live: full-bleed teal intro band (color-scheme-5) with centered white
   text, then a WIDE two-column image-with-text (picture left, copy +
   Download button right), then the long guide (narrow).                 */
/* Live renders the teal intro band flush under the header — drop the
   section's top padding so it isn't pushed down by a cream gap. */
.main-page--mom-guide {
  padding-top: 0 !important;
  padding-block-start: 0 !important;
}
.main-page--mom-guide .main-page__content > section:not(:has(h1)) {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  background-color: #64c3bb;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}
.main-page--mom-guide .main-page__content > section:not(:has(h1)) h2,
.main-page--mom-guide .main-page__content > section:not(:has(h1)) p {
  color: #fff !important;
  text-align: center !important;
}
/* widen the image-with-text block beyond the 726px content column */
.main-page--mom-guide .main-page__content > div {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 94vw);
  box-sizing: border-box;
}
.main-page--mom-guide .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
.main-page--mom-guide .main-page__content > div div:has(> div:nth-child(1) img):has(> div:nth-child(2) h2) > div {
  flex: 1 1 300px;
  min-width: 280px;
}
.main-page--mom-guide .main-page__content > div img {
  display: block;
  width: 100%;
  max-width: 598px;
  height: auto;
  margin-inline: auto;
}
/* Book-section heading is Poppins on live (not the guide-body Parkinsans). */
.main-page--mom-guide .main-page__content > div h2 {
  font-family: Poppins, sans-serif !important;
}
/* Download button (Mom Guide one-pager) — live is a teal pill (#64c3bb / #fffaee,
   52px radius), matching the wholesale "Log in" button, not a dark rounded rect. */
.main-page--mom-guide .main-page__content a[href$=".pdf"] {
  display: inline-block;
  margin-top: 12px;
  padding: 0 30px;
  line-height: 45px;
  background-color: #64c3bb;
  color: #fffaee !important;
  border-radius: 52px;
  font-weight: 400;
  font-size: 15px;
  text-decoration: none !important;
}

/* ========================= WHOLESALE ORDERING ===================== */
/* Live: narrow title, a left-aligned rich-text block with a primary
   "Log in to shop Wholesale" button + email caption, then an account /
   application form (a Shopify Forms app embed that does not exist in
   Shopline). We fix the text layout here and render a real contact-form
   powered application form via main-page.html (gated on this handle).    */
/* Live sits the title ~36px under the header, not the section's default 80px. */
.main-page--wholesale-ordering {
  padding-top: 36px !important;
  padding-block-start: 36px !important;
}
/* Live centers the title over a wider body; body/list copy stays left. */
.main-page--wholesale-ordering .main-page__content h1 {
  text-align: center !important;
}
.main-page--wholesale-ordering .main-page__content p,
.main-page--wholesale-ordering .main-page__content ul {
  text-align: left;
}
/* Live uppercases the trailing "Questions? Email …" line (the p after the login button).
   Shopline renders the login link as /user/signIn; keep the old Shopify "authentication"
   match too so a URL flip can't silently break this again. */
.main-page--wholesale-ordering .main-page__content div:has(> a[href*="signIn"]) + p,
.main-page--wholesale-ordering .main-page__content div:has(> a[href*="authentication"]) + p {
  text-transform: uppercase !important;
}
/* the empty Shopify-Forms app placeholder div -> hide it */
.main-page--wholesale-ordering .main-page__content [data-form-root] {
  display: none !important;
}
/* "Log in to shop Wholesale" primary button — live is a teal pill
   (#64c3bb / #fffaee, 52px radius, 45px tall), not a dark rounded rect. */
.main-page--wholesale-ordering .main-page__content a[href*="signIn"],
.main-page--wholesale-ordering .main-page__content a[href*="authentication"] {
  display: inline-block;
  margin: 8px 0 4px;
  padding: 0 30px;
  line-height: 45px;
  background-color: #64c3bb;
  color: #fffaee !important;
  border-radius: 52px;
  font-weight: 400;
  font-size: 15px;
  text-decoration: none !important;
}
/* the injected wholesale application form (main-page.html) — matches the
   client's live Shopify-Forms embed screenshot: a centered cream card with
   white rounded fields, a dashed resale-certificate upload box and a
   full-width near-black submit button. */
.main-page--wholesale-ordering .wholesale-form {
  box-sizing: border-box;
  max-width: 600px;
  margin: 32px auto 0;
  padding: 40px 40px 32px;
  background-color: #fffaee;
  border-radius: 10px;
  text-align: left;
}
.main-page--wholesale-ordering .wholesale-form__title {
  margin: 0 0 6px !important;
  text-align: center !important;
  font-family: Parkinsans, "parkinsans-regular", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.4px !important;
  color: #333 !important;
}
.main-page--wholesale-ordering .wholesale-form__intro {
  margin: 0 0 24px !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #6b6b6b !important;
}
.main-page--wholesale-ordering .wholesale-form__field {
  margin-bottom: 14px;
}
.main-page--wholesale-ordering .wholesale-form__field > input {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: #333;
}
.main-page--wholesale-ordering .wholesale-form__field > input::placeholder {
  color: #9a9a9a;
}
.main-page--wholesale-ordering .wholesale-form__field > input:focus {
  outline: none;
  border-color: #64c3bb;
}
/* resale-certificate file upload — dashed box with an "Add file" button */
.main-page--wholesale-ordering .wholesale-form__field--file {
  margin-top: 6px;
}
.main-page--wholesale-ordering .wholesale-form__file-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  color: #333;
}
.main-page--wholesale-ordering .wholesale-form__file-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 16px;
  border: 1.5px dashed #c9c9c9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.main-page--wholesale-ordering .wholesale-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}
.main-page--wholesale-ordering .wholesale-form__file-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #f6f6f6;
  font-size: 14px;
  color: #333;
}
/* full-width near-black submit */
.main-page--wholesale-ordering .wholesale-form__submit {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  background-color: #1a1a1a;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.main-page--wholesale-ordering .wholesale-form__submit:hover {
  background-color: #333;
}
/* small centered marketing/consent line under the button */
.main-page--wholesale-ordering .wholesale-form__consent {
  margin: 14px 0 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #6b6b6b !important;
}
.main-page--wholesale-ordering .wholesale-form__consent a {
  color: #6b6b6b !important;
  text-decoration: underline !important;
}

/* ============================== CONTACT =========================== */
/* Live: a cream card holding a custom contact form (First/Last name, email,
   a newsletter checkbox, a "Describe Yourself" radio group, phone, message)
   with white rounded fields and a teal outline pill submit button. The
   migration flattened every input to type="text" (hidden/checkbox/radio/
   email/tel were all stripped) and removed the form's classes, so the fields
   leaked as bare text boxes. Re-create the live look structurally.          */
.main-page--contact .main-page__content form {
  max-width: 660px;
  margin: 0 auto;
  padding: 32px 28px;
  background-color: #fff9e6;
  border-radius: 12px;
  text-align: left;
}
/* pure hidden inputs that lost type="hidden" */
.main-page--contact .main-page__content form input[name="form_type"],
.main-page--contact .main-page__content form input[name="utf8"] {
  display: none !important;
}
/* field groups */
.main-page--contact .main-page__content form > div {
  margin-bottom: 18px;
}
/* group labels (Name / Email / Phone / Describe Yourself / Message / Sign up) */
.main-page--contact .main-page__content form label {
  display: block;
  font-weight: 600;
  color: #535353;
  margin-bottom: 6px;
}
/* real text fields (first/last name, email, phone) + message textarea.
   NB: migration stripped the type attribute entirely (no type="text"), so
   select by exclusion of the hidden + checkbox/radio (contact[tags]) names. */
.main-page--contact .main-page__content form input:not([name="form_type"]):not([name="utf8"]):not([name="contact[tags]"]),
.main-page--contact .main-page__content form textarea {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font: inherit;
  background: #fff;
}
.main-page--contact .main-page__content form textarea {
  border-radius: 16px;
  min-height: 120px;
}
/* newsletter checkbox + Describe-Yourself radios were checkbox/radio, now
   type="text"; render them as control-sized boxes with hidden text/caret. */
.main-page--contact .main-page__content form input[name="contact[tags]"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 8px 0 0;
  vertical-align: middle;
  border: 1px solid #999;
  border-radius: 3px;
  background: #fff;
  color: transparent;
  caret-color: transparent;
}
/* the Describe-Yourself group has <br>-separated options -> round its radios
   (the newsletter div has no <br>, so its checkbox stays square). */
.main-page--contact .main-page__content form > div:has(br) input[name="contact[tags]"] {
  border-radius: 50%;
}
/* labels that wrap a checkbox/radio sit inline with their control */
.main-page--contact .main-page__content form label:has(input[name="contact[tags]"]) {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  margin: 4px 0;
}
/* submit button -> teal outline pill */
.main-page--contact .main-page__content form button {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 28px;
  background-color: transparent;
  color: #4fb093;
  border: 1px solid #4fb093;
  border-radius: 40px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.main-page--contact .main-page__content form button:hover {
  background-color: #4fb093;
  color: #fff;
}