/** Shopify CDN: Minification failed

Line 408:67 Unexpected ")"
Line 408:77 Expected identifier but found whitespace

**/
/* ==========================================================================
   Klaviyo embed (section: klaviyo-embed)
   Heading and copy beside an embedded third-party form (Klaviyo, HubSpot,
   Mailchimp, etc). Every form rule is scoped to .klaviyo-embed__form, and the
   !important flags exist only to beat the inline styles those embeds inject.

   Scope: fit the form to the card, style the flat controls (text fields,
   checkboxes, radios, submit) and round everything's corners. Composite
   controls the embed assembles from several nested nodes - dropdowns above all
   - are left alone beyond their radius, because CSS cannot tell which node in
   that tree is meant to look like the field, and guessing paints a box inside
   the box.

   Selectors are narrow and key off semantic HTML and ARIA roles rather than
   class names: Klaviyo documents its own classes (needsclick,
   kl-private-reset-css, hashed values) as internal and subject to change. The
   narrowness is the point - a control these rules fail to match keeps the form
   builder's own styling, which is always an acceptable result. For anything
   that needs more, set a class on the component in Klaviyo's form builder and
   use the .ke-* hooks at the bottom of this file.
   ========================================================================== */

.klaviyo-embed__grid {
  display: grid;
  grid-template-columns: 1fr var(--ke-form-width, 46%);
  align-items: center;
  gap: var(--ke-gap, 60px);
}

.klaviyo-embed--form-left .klaviyo-embed__grid {
  grid-template-columns: var(--ke-form-width, 46%) 1fr;
}

.klaviyo-embed--form-left .klaviyo-embed__content {
  order: 1;
}

.klaviyo-embed--stacked .klaviyo-embed__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

/* Content ----------------------------------------------------------------- */

.klaviyo-embed__content {
  text-align: var(--ke-text-align, left);
}

/* Prefixed with the block root: these carry .sk-title and .sk-rte, and later
   sections re-emit section-kit.css, so an equal-specificity selector here would
   lose on document order. */
.klaviyo-embed .klaviyo-embed__heading {
  margin: 0 0 24px;
}

.klaviyo-embed .klaviyo-embed__text {
  max-width: 56ch;
  margin: var(--ke-text-margin, 0);
  line-height: 1.7;
}

/* Form card --------------------------------------------------------------- */

.klaviyo-embed__card {
  width: 100%;
  max-width: var(--ke-card-max-width, 520px);
  margin-inline: auto;
  padding: var(--ke-card-padding-block, 32px) var(--ke-card-padding-inline, 28px);
  background-color: var(--ke-card-bg, #ffffff);
  border: var(--sk-border-width, 1px) solid var(--sk-border-color, transparent);
  border-radius: var(--ke-card-radius, 16px);
  transition: border-color var(--sk-ease);
}

@media (hover: hover) {
  .klaviyo-embed__card:hover {
    border-color: var(--sk-accent);
  }
}

.klaviyo-embed__card--shadow {
  box-shadow: var(--sk-card-shadow, none);
}

.klaviyo-embed__placeholder {
  padding: 32px 16px;
  border: 1px dashed var(--sk-border);
  border-radius: var(--sk-radius-card);
  color: var(--sk-ink-muted);
  font-size: var(--sk-small);
  text-align: center;
}

/* Embed: structure -------------------------------------------------------- */

.klaviyo-embed__form > :first-child {
  margin-top: 0;
}

.klaviyo-embed__form > :last-child {
  margin-bottom: 0;
}

/* Embeds ship their own horizontal padding and width caps inline, which stack
   on top of the card padding and make the card's own control look inert.
   Flatten them so the card is the single source of horizontal spacing. A
   multi-step embed swaps one step wrapper for the next, so the step containers
   need the same treatment. */
.klaviyo-embed__form form,
.klaviyo-embed__form .klaviyo-form,
.klaviyo-embed__form [data-testid='form-row'],
.klaviyo-embed__form [data-testid='form-component'],
.klaviyo-embed__form [data-testid*='step'],
.klaviyo-embed__form [class*='step-container'] {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Vertical rhythm is deliberately left alone. Block spacing is configured in
   Klaviyo's form builder, so overriding it here just fights the merchant's own
   settings and desynchronises one form from the next. Only horizontal padding
   is flattened, above, because that is sized for a full-bleed popup rather than
   a card. */

/* Checkbox and radio groups arrive as a fieldset, which carries a browser
   default border and padding that has to go. Margin is left to the embed. */
.klaviyo-embed__form fieldset {
  padding: 0 !important;
  border: 0 !important;
}

.klaviyo-embed__form img {
  max-width: 100% !important;
  height: auto !important;
}

.klaviyo-embed__form hr {
  margin: 20px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--sk-border) !important;
}

/* Embed: typography ------------------------------------------------------- */

/* Text and heading blocks inside the card follow the card, not the embed's own
   palette, which is usually built for a popup over a photo. */
.klaviyo-embed__form h1,
.klaviyo-embed__form h2,
.klaviyo-embed__form h3,
.klaviyo-embed__form h4,
.klaviyo-embed__form h5,
.klaviyo-embed__form h6 {
  margin: 0 0 12px !important;
  color: var(--sk-ink) !important;
  font-family: var(--heading-font-family) !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

.klaviyo-embed__form p,
.klaviyo-embed__form li {
  color: var(--sk-ink-muted) !important;
  line-height: 1.6 !important;
}

.klaviyo-embed__form a {
  color: var(--sk-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em !important;
}

/* Group heading above a set of radios or checkboxes. */
.klaviyo-embed__form legend {
  padding: 0 !important;
  margin: 0 0 10px !important;
  color: var(--sk-ink) !important;
  font-family: var(--heading-font-family) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Field labels are micro-caps. Choice labels opt out further down, since they
   read as sentences. */
.klaviyo-embed__form label {
  display: block;
  margin-bottom: 6px;
  color: var(--ke-label-color, var(--sk-ink-muted)) !important;
  font-size: var(--ke-label-size, 12px) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Embed: text-like fields ------------------------------------------------- */

.klaviyo-embed__form input[type='text'],
.klaviyo-embed__form input[type='email'],
.klaviyo-embed__form input[type='tel'],
.klaviyo-embed__form input[type='number'],
.klaviyo-embed__form input[type='date'],
.klaviyo-embed__form input[type='month'],
.klaviyo-embed__form input[type='url'],
.klaviyo-embed__form input[type='search'],
.klaviyo-embed__form input:not([type]),
.klaviyo-embed__form select,
.klaviyo-embed__form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
  padding: var(--ke-input-padding, 12px 16px) !important;
  background-color: var(--ke-input-bg, #ffffff) !important;
  border: 1px solid var(--ke-input-border, #d7dcde) !important;
  border-radius: var(--ke-input-radius, 8px) !important;
  color: var(--ke-input-text, var(--sk-ink)) !important;
  font-family: inherit !important;
  font-size: var(--ke-input-font-size, 16px) !important;
  line-height: 1.4 !important;
}

.klaviyo-embed__form textarea {
  min-height: 110px !important;
  resize: vertical !important;
}

/* Native selects drop the OS arrow so they match the scripted dropdowns. */
.klaviyo-embed__form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23677279' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}

.klaviyo-embed__form input[type='date']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}

.klaviyo-embed__form input::placeholder,
.klaviyo-embed__form textarea::placeholder {
  color: var(--ke-placeholder-color, #9aa3a8) !important;
  font-size: var(--ke-input-font-size, 16px) !important;
}

.klaviyo-embed__form input:focus,
.klaviyo-embed__form select:focus,
.klaviyo-embed__form textarea:focus {
  border-color: var(--sk-accent) !important;
  outline: none !important;
}

/* A dropdown holds its value in a real <input>, so the text-field box above
   would land inside the dropdown and read as a second field nested in it. This
   is the one exception the field rules need; the specificity has to clear
   `.klaviyo-embed__form input[type='text']`, hence the card prefix. */
.klaviyo-embed__card .klaviyo-embed__form input[role='combobox'],
.klaviyo-embed__card .klaviyo-embed__form [role='combobox'] input,
.klaviyo-embed__card .klaviyo-embed__form [aria-haspopup] input,
.klaviyo-embed__card .klaviyo-embed__form [aria-expanded] input {
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: var(--ke-input-radius, 8px) !important;
}

/* Embed: composite rows --------------------------------------------------- */

/* Phone fields pair a country-code select with the number, and date and age
   gate fields can arrive as two or three selects. Left alone the 100% width
   above stacks them; this puts them back on one row. */
.klaviyo-embed__form [data-testid='form-component']:has(select + input[type='tel']),
.klaviyo-embed__form [data-testid='form-component']:has(select + select),
.klaviyo-embed__form div:has(> select + input[type='tel']),
.klaviyo-embed__form div:has(> select + select) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.klaviyo-embed__form [data-testid='form-component']:has(select + input[type='tel']) select,
.klaviyo-embed__form div:has(> select + input[type='tel']) select {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 92px !important;
  padding-right: 34px !important;
  background-position: right 10px center !important;
}

.klaviyo-embed__form [data-testid='form-component']:has(select + select) select,
.klaviyo-embed__form div:has(> select + select) select {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Embed: action buttons --------------------------------------------------- */

/* Narrow on purpose. This used to style every <button> and then carve out the
   ones that turned out to be fields, which meant anything the exceptions missed
   got a dark pill. Identifying only the submit inverts that: a control this
   misses just keeps the form builder's own styling, which is a far better
   failure than a dropdown wearing a submit button.
   A dropdown trigger carries aria-expanded or aria-haspopup, and a chevron
   button holds nothing but an svg. The submit has neither. */
.klaviyo-embed__form button:not([aria-expanded]):not([aria-haspopup]):not([role='combobox']):not([role='option']):not(:has(svg)),
.klaviyo-embed__form input[type='submit'],
.klaviyo-embed__form [type='submit'] {
  width: var(--ke-button-width, 100%) !important;
  min-height: 50px !important;
  padding: 15px 32px !important;
  background-color: var(--ke-button-bg, var(--sk-ink)) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ke-button-radius, 999px) !important;
  color: var(--ke-button-text, #ffffff) !important;
  font-family: var(--heading-font-family) !important;
  font-size: var(--ke-button-font-size, 17px) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color var(--sk-ease), color var(--sk-ease), border-color var(--sk-ease) !important;
}

@media (hover: hover) {
  .klaviyo-embed__form button:not([aria-expanded]):not([aria-haspopup]):not([role='combobox']):not([role='option']):not(:has(svg)):hover,
  .klaviyo-embed__form input[type='submit']:hover,
  .klaviyo-embed__form [type='submit']:hover {
    background-color: var(--ke-button-hover-bg, var(--sk-ink-hover, #000000)) !important;
  }
}

.klaviyo-embed__form button[disabled],
.klaviyo-embed__form button[aria-disabled='true'] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Back, previous and "no thanks" read as the secondary action on a step. */
.klaviyo-embed__form button[data-testid*='back'],
.klaviyo-embed__form button[data-testid*='previous'],
.klaviyo-embed__form button[data-testid*='dismiss'],
.klaviyo-embed__form button[aria-label*='ack'],
.klaviyo-embed__form button[aria-label*='revious'],
.klaviyo-embed__form button[class*='back'] {
  background-color: transparent !important;
  border-color: currentColor !important;
  color: var(--sk-ink) !important;
}

@media (hover: hover) {
  .klaviyo-embed__form button[data-testid*='back']:hover,
  .klaviyo-embed__form button[data-testid*='previous']:hover,
  .klaviyo-embed__form button[data-testid*='dismiss']:hover,
  .klaviyo-embed__form button[aria-label*='ack']:hover,
  .klaviyo-embed__form button[aria-label*='revious']:hover,
  .klaviyo-embed__form button[class*='back']:hover {
    background-color: var(--sk-ink) !important;
    border-color: var(--sk-ink) !important;
    color: #ffffff !important;
  }
}

/* Two actions on one step sit side by side instead of stacking full width. */
.klaviyo-embed__form [data-testid='form-row']:has(button + button),
.klaviyo-embed__form [class*='step-nav'] {
  display: flex !important;
  gap: 12px !important;
}

.klaviyo-embed__form [data-testid='form-row']:has(button + button) button,
.klaviyo-embed__form [class*='step-nav'] button {
  flex: 1 1 auto !important;
  width: auto !important;
  padding-inline: 20px !important;
}

/* Embed: dropdowns ------------------------------------------------------- */

/* Left to the embed, deliberately.

   Klaviyo builds a dropdown as a nested structure - a trigger wrapping a real
   <input> for the value and a separate <button> for the chevron, plus a listbox
   for the menu. Giving those a background and border here painted a box inside
   the box, which read as a second dropdown injected into the real one and
   covered the menu on selection. There is no reliable way to tell from CSS
   which node in that tree is the one meant to look like the field, so this file
   no longer tries.

   Corners only. Everything else - colour, height, padding, the menu, the
   options, the chevron - stays exactly as the form builder renders it. */
   Under ARIA the combobox role sits on the input, not on the wrapper that
   carries the visible border, so the wrapper is reached with :has() instead.
   Radius on an element with no border of its own is simply a no-op, which makes
   casting wide here safe in a way that borders and backgrounds were not. */
/* Which node in a dropdown carries the visible border is not knowable from
   here, and counting wrapper levels guessed wrong twice. So this matches the
   control and every ancestor of it, at any depth, and lets the no-op do the
   filtering: whichever element actually has the border gets rounded, and the
   rest are unaffected because radius without a border draws nothing. */
.klaviyo-embed__form [role='combobox'],
.klaviyo-embed__form [role='listbox'],
.klaviyo-embed__form [aria-haspopup],
.klaviyo-embed__form [aria-expanded],
.klaviyo-embed__form [class*='dropdown'],
.klaviyo-embed__form [class*='menu'],
.klaviyo-embed__form *:has([role='combobox']),
.klaviyo-embed__form *:has([role='listbox']),
.klaviyo-embed__form *:has([aria-haspopup]),
.klaviyo-embed__form *:has([aria-expanded]) {
  border-radius: var(--ke-input-radius, 8px) !important;
}

/* Checkboxes and radios are the one thing in here that should stay square. */
.klaviyo-embed__form input[type='checkbox'],
.klaviyo-embed__form input[type='radio'] {
  border-radius: 0 !important;
}

/* Menu text follows the theme; the panel itself does not. Colour and type only,
   with no box properties, so this cannot reintroduce a field inside the field.
   The descendant selector is needed because the option's text sits in a nested
   span carrying the embed's colour inline. */
.klaviyo-embed__form [role='listbox'],
.klaviyo-embed__form [role='option'],
.klaviyo-embed__form [role='option'] *,
.klaviyo-embed__form [class*='dropdown'] [role='option'],
.klaviyo-embed__form [class*='dropdown'] [role='option'] * {
  color: var(--ke-input-text, var(--sk-ink)) !important;
  font-family: inherit !important;
  font-size: var(--ke-input-font-size, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Embed: checkboxes and radios ------------------------------------------- */

.klaviyo-embed__form input[type='checkbox'],
.klaviyo-embed__form input[type='radio'] {
  flex: 0 0 auto !important;
  width: 18px !important;
  min-width: 18px !important;
  min-height: 0 !important;
  height: 18px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--sk-accent) !important;
  cursor: pointer !important;
}

.klaviyo-embed__form input[type='checkbox']:focus-visible,
.klaviyo-embed__form input[type='radio']:focus-visible {
  outline: 2px solid var(--sk-accent) !important;
  outline-offset: 2px !important;
}

/* Choice text reads as a sentence, so it drops the micro-caps label styling.
   The sibling combinators are what actually carry this: Klaviyo renders the
   input and its label as siblings rather than nesting one in the other, so a
   `label:has(input)` rule alone never matches and the choice keeps the embed's
   own colour. The `:has(> input)` variant catches the wrapper-div shape without
   depending on that div's generated class name. */
.klaviyo-embed__form input[type='checkbox'] + label,
.klaviyo-embed__form input[type='radio'] + label,
.klaviyo-embed__form input[type='checkbox'] ~ label,
.klaviyo-embed__form input[type='radio'] ~ label,
.klaviyo-embed__form *:has(> input[type='checkbox']) label,
.klaviyo-embed__form *:has(> input[type='radio']) label,
.klaviyo-embed__form label:has(input[type='checkbox']),
.klaviyo-embed__form label:has(input[type='radio']),
.klaviyo-embed__form fieldset:has(input[type='checkbox']) label,
.klaviyo-embed__form fieldset:has(input[type='radio']) label,
.klaviyo-embed__form [role='radiogroup'] label,
.klaviyo-embed__form [role='group']:has(input[type='checkbox']) label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  color: var(--sk-ink) !important;
  font-family: inherit !important;
  font-size: var(--sk-body, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  cursor: pointer !important;
}

/* The visible choice text sits in a nested span carrying the embed's own colour
   inline, so the label's own colour never reaches it. An !important author
   declaration is what overrides an inline style. */
.klaviyo-embed__form input[type='checkbox'] + label *,
.klaviyo-embed__form input[type='radio'] + label *,
.klaviyo-embed__form input[type='checkbox'] ~ label *,
.klaviyo-embed__form input[type='radio'] ~ label *,
.klaviyo-embed__form *:has(> input[type='checkbox']) label *,
.klaviyo-embed__form *:has(> input[type='radio']) label *,
.klaviyo-embed__form label:has(input[type='checkbox']) *,
.klaviyo-embed__form label:has(input[type='radio']) *,
.klaviyo-embed__form [role='radiogroup'] label * {
  color: var(--sk-ink) !important;
  font-family: inherit !important;
  font-size: var(--sk-body, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}

/* Consent and disclosure copy is finer print than a choice. */
.klaviyo-embed__form [class*='consent'] label,
.klaviyo-embed__form [class*='disclosure'],
.klaviyo-embed__form [class*='disclaimer'],
.klaviyo-embed__form small {
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Embed: validation ------------------------------------------------------ */

/* Embeds float these as tooltips, which lands them on top of the next field.
   Put them back in the flow under the control they belong to. */
.klaviyo-embed__form [data-testid*='error'],
.klaviyo-embed__form [data-testid*='Error'],
.klaviyo-embed__form [class*='error'],
.klaviyo-embed__form [class*='Error'],
.klaviyo-embed__form [class*='tooltip'],
.klaviyo-embed__form [role='alert'],
.klaviyo-embed__form [aria-live='polite'],
.klaviyo-embed__form [aria-live='assertive'] {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: #d0362e !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Kills the tooltip's pointer triangle. */
.klaviyo-embed__form [data-testid*='error']::before,
.klaviyo-embed__form [data-testid*='error']::after,
.klaviyo-embed__form [class*='error']::before,
.klaviyo-embed__form [class*='error']::after,
.klaviyo-embed__form [class*='tooltip']::before,
.klaviyo-embed__form [class*='tooltip']::after,
.klaviyo-embed__form [role='alert']::before,
.klaviyo-embed__form [role='alert']::after {
  display: none !important;
}

.klaviyo-embed__form input[aria-invalid='true'],
.klaviyo-embed__form select[aria-invalid='true'],
.klaviyo-embed__form textarea[aria-invalid='true'] {
  border-color: #d0362e !important;
}

/* Embed: success step ---------------------------------------------------- */

/* role=status rather than role=alert, so this does not collide with the error
   styling above. */
.klaviyo-embed__form [role='status'],
.klaviyo-embed__form [data-testid*='success'],
.klaviyo-embed__form [class*='success'] {
  color: var(--sk-ink) !important;
  text-align: center !important;
}

/* Coupon block on the success step. */
.klaviyo-embed__form [class*='coupon'],
.klaviyo-embed__form [data-testid*='coupon'] {
  display: block !important;
  margin: 16px 0 0 !important;
  padding: 14px 18px !important;
  background-color: var(--sk-surface) !important;
  border: 1px dashed var(--sk-accent) !important;
  border-radius: var(--ke-input-radius, 8px) !important;
  color: var(--sk-ink) !important;
  font-family: var(--heading-font-family) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

/* Embed: opt-in hooks ---------------------------------------------------- */

/* Klaviyo's generated classes are unstable, so the reliable override is a class
   you set on the component in the form builder (Styles > custom CSS must be on
   for the class field to appear). Klaviyo puts that class on the component's
   outer wrapper and renders the visible text in a child, hence the * selectors.
   Available: ke-heading, ke-note, ke-field, ke-dropdown, ke-choices, ke-submit,
   ke-secondary. */

.klaviyo-embed__form .ke-heading,
.klaviyo-embed__form .ke-heading * {
  color: var(--sk-ink) !important;
  font-family: var(--heading-font-family) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.klaviyo-embed__form .ke-note,
.klaviyo-embed__form .ke-note * {
  color: var(--sk-ink-muted) !important;
  font-size: 13px !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

.klaviyo-embed__form .ke-field input,
.klaviyo-embed__form .ke-field select,
.klaviyo-embed__form .ke-field textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
  padding: var(--ke-input-padding, 12px 16px) !important;
  background-color: var(--ke-input-bg, #ffffff) !important;
  border: 1px solid var(--ke-input-border, #d7dcde) !important;
  border-radius: var(--ke-input-radius, 8px) !important;
  color: var(--ke-input-text, var(--sk-ink)) !important;
  font-family: inherit !important;
  font-size: var(--ke-input-font-size, 16px) !important;
  font-weight: 400 !important;
  text-align: left !important;
  text-transform: none !important;
}

.klaviyo-embed__form .ke-choices label,
.klaviyo-embed__form .ke-choices label * {
  color: var(--sk-ink) !important;
  font-size: var(--sk-body, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.klaviyo-embed__form .ke-submit,
.klaviyo-embed__form .ke-submit button {
  background-color: var(--ke-button-bg, var(--sk-ink)) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ke-button-radius, 999px) !important;
  color: var(--ke-button-text, #ffffff) !important;
}

.klaviyo-embed__form .ke-secondary,
.klaviyo-embed__form .ke-secondary button {
  background-color: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: var(--ke-button-radius, 999px) !important;
  color: var(--sk-ink) !important;
}

/* Tablet and mobile -------------------------------------------------------- */

@media screen and (max-width: 989px) {
  .klaviyo-embed__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ke-gap-mobile, 36px);
  }

  .klaviyo-embed--form-left .klaviyo-embed__content {
    order: 0;
  }

  .klaviyo-embed__content {
    text-align: var(--ke-text-align-mobile, center);
  }

  .klaviyo-embed .klaviyo-embed__text {
    margin: var(--ke-text-margin-mobile, 0 auto);
  }
}

@media screen and (max-width: 749px) {
  .klaviyo-embed__card {
    padding: var(--ke-card-padding-block-mobile, 22px) var(--ke-card-padding-inline-mobile, 18px);
  }

  .klaviyo-embed__form button:not([aria-expanded]):not([aria-haspopup]):not([role='combobox']):not([role='option']):not(:has(svg)),
  .klaviyo-embed__form input[type='submit'],
  .klaviyo-embed__form [type='submit'] {
    width: 100% !important;
  }

  /* Step navigation stays on one row so "back" does not sit above "next". */
  .klaviyo-embed__form [data-testid='form-row']:has(button + button) button,
  .klaviyo-embed__form [class*='step-nav'] button {
    width: auto !important;
    padding-inline: 16px !important;
    font-size: 15px !important;
  }
}