* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  color: var(--color-bodyText, #111);
  background: var(--color-bodyBg, #fff);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, var(--font-body, inherit));
  color: var(--color-bodyText, inherit);
}
a { color: var(--color-primary, #2563eb); }
[data-lk-slot="header"] { background: var(--color-headerBg, transparent); color: var(--color-headerText, inherit); }
[data-lk-slot="footer"] { background: var(--color-footerBg, transparent); color: var(--color-footerText, inherit); }
[data-lk-slot="sidebar-left"], [data-lk-slot="sidebar-right"] { background: var(--color-sidebarBg, transparent); color: var(--color-sidebarText, inherit); }
.lk-section { padding: var(--lk-spacing-sectionY, 64px) var(--lk-spacing-sectionX, 24px); }
.lk-row { display: flex; gap: var(--lk-spacing-gutter, 16px); flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.lk-col { flex: 1 1 0; }
.lk-col[data-span='12'] { flex-basis: 100%; }
.lk-col[data-span='6'] { flex-basis: 48%; }
.lk-col[data-span='4'] { flex-basis: 30%; }
.lk-col[data-span='3'] { flex-basis: 22%; }

/* CTA + button styling shared between editor canvas, iframe preview,
 * and published site. `lk-cta` (hero) is the larger primary CTA;
 * `lk-button` (button gadget) is the standard button. */
a.lk-cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-primary, #2563eb);
  color: #fff !important;
  border-radius: var(--lk-radii-md, 8px);
  font-weight: 600;
  text-decoration: none;
}
a.lk-cta:hover { opacity: 0.9; }
a.lk-button {
  display: inline-block;
  padding: 8px 16px;
  background: var(--color-primary, #2563eb);
  color: #fff !important;
  border-radius: var(--lk-radii-sm, 4px);
  font-weight: 600;
  text-decoration: none;
}
a.lk-button:hover { opacity: 0.9; }
/* `lk-link` (Link gadget) is the un-styled inline link — same
 * content shape as Button but rendered as text. */
a.lk-link {
  display: inline;
  color: var(--color-primary, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
a.lk-link:hover { text-decoration-thickness: 2px; }

/* Per-gadget 12-column grid. Wraps the children of a 1-col cell
 * (the default — a `<div class="lk-col" data-span="12">`) so
 * each gadget can take a fraction of the cell's width via
 * `data-lk-col-span`. Multi-col cells (parts of a 2/3/4-col
 * Container) intentionally don't get this wrapper — the cell's
 * own width drives gadget width. Default span when no value is
 * set is 12 (full row); the renderer emits the attribute only
 * when the merchant picked a smaller span on the Layout tab.
 *
 * Flex-wrap mirrors the existing `lk-row`/`lk-col` pattern,
 * so spacing semantics stay consistent. Negative-margin trick
 * is avoided by computing each basis as `calc(N% - gap)`. */
.lk-gadget-row { display: flex; flex-wrap: wrap; gap: 16px; }
.lk-gadget-row > * { flex-basis: 100%; min-width: 0; }
.lk-gadget-row > [data-lk-col-span='12'] { flex-basis: 100%; }
.lk-gadget-row > [data-lk-col-span='10'] { flex-basis: calc(83.333% - 16px); }
.lk-gadget-row > [data-lk-col-span='8']  { flex-basis: calc(66.666% - 16px); }
.lk-gadget-row > [data-lk-col-span='6']  { flex-basis: calc(50% - 16px); }
.lk-gadget-row > [data-lk-col-span='4']  { flex-basis: calc(33.333% - 16px); }
.lk-gadget-row > [data-lk-col-span='3']  { flex-basis: calc(25% - 16px); }
.lk-gadget-row > [data-lk-col-span='2']  { flex-basis: calc(16.666% - 16px); }

/* `hiddenOnMobile` toggle on the Layout tab. Decoration emitter
 * sets `data-lk-hide-mobile="true"`; the actual hide happens
 * here so the value composes with everything else the gadget
 * carries (background, border, animations, etc.). `!important`
 * because gadget-level inline styles otherwise win. */
@media (max-width: 768px) {
  [data-lk-hide-mobile='true'] { display: none !important; }
}

/* Site-navigation mobile collapse. The component renders BOTH the
 * horizontal link row and a <details> hamburger; this block swaps
 * them at the same 768px breakpoint as `hiddenOnMobile`. CSS-only
 * (native <details> disclosure) so the published static page needs
 * no JS. `!important` beats the component's inline flex styles. */
.lk-nav-mobile { display: none; }
@media (max-width: 768px) {
  .lk-nav-horizontal > .lk-site-navigation-links { display: none !important; }
  .lk-nav-mobile { display: block; margin-left: auto; }
  /* Compound selector on purpose: the editor canvas ships a reset
   * (`.lk-canvas-root summary { list-style: revert }`, 0-1-1) that
   * would out-rank a lone class — 0-2-0 wins in both surfaces. The
   * `::marker` rule covers modern Chrome, which ignores the legacy
   * -webkit-details-marker pseudo. */
  .lk-site-navigation .lk-nav-mobile-toggle {
    list-style: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--lk-radii-sm, 4px);
  }
  .lk-site-navigation .lk-nav-mobile-toggle::marker { content: none; }
  .lk-nav-mobile-toggle::-webkit-details-marker { display: none; }
  .lk-nav-burger { display: block; width: 20px; }
  .lk-nav-burger span {
    display: block;
    height: 2px;
    margin: 4px 0;
    border-radius: 1px;
    background: var(--color-headerText, #333);
  }
  /* Expanded panel flows in-document (the header grows) — boring
   * and stacking-context-proof. Full-width row below the bar. */
  .lk-nav-mobile[open] { flex-basis: 100%; }
  .lk-nav-mobile[open] .lk-nav-mobile-toggle { position: absolute; top: 16px; right: 24px; }
  .lk-nav-horizontal { position: relative; flex-wrap: wrap; }
  .lk-nav-mobile-panel { padding: 8px 0 4px; }
  .lk-nav-mobile-panel .lk-site-navigation-links { width: 100%; }
}

/* Site-navigation sub-menus (one level). Base = static indented list
 * — that's what the vertical layout and the mobile hamburger panel
 * show. The horizontal desktop row upgrades it below to an absolute
 * hover/focus dropdown. CSS-only: published pages ship no JS. All
 * contested selectors sit at ≥0-2-0 specificity so the editor
 * canvas's element-level resets can't out-rank them (see the
 * .lk-nav-mobile-toggle precedent above). */
.lk-site-navigation .lk-nav-dropdown {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lk-site-navigation .lk-nav-parent { position: relative; }
.lk-site-navigation .lk-nav-parent-label { cursor: pointer; }
.lk-nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.15s ease;
}
/* Children are always visible (indented) in vertical + mobile —
 * a caret would promise a toggle that doesn't exist there. */
.lk-nav-vertical .lk-nav-caret,
.lk-nav-mobile-panel .lk-nav-caret { display: none; }

/* Desktop dropdown — scoped to the DIRECT child <ul> of the
 * horizontal nav so the mobile panel's nested copy keeps the static
 * indented base style. Hidden via visibility/opacity, NOT
 * display:none: focusing the parent (Tab) reveals the dropdown via
 * :focus-within, and the next Tab then reaches the child links —
 * keyboard access with zero JS. */
.lk-nav-horizontal > .lk-site-navigation-links .lk-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--color-headerBg, #ffffff);
  border-radius: var(--lk-radii-sm, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  visibility: hidden;
  opacity: 0;
  z-index: 50;
}
.lk-nav-horizontal > .lk-site-navigation-links .lk-nav-parent:hover > .lk-nav-dropdown,
.lk-nav-horizontal > .lk-site-navigation-links .lk-nav-parent:focus-within > .lk-nav-dropdown {
  visibility: visible;
  opacity: 1;
}
.lk-nav-horizontal > .lk-site-navigation-links .lk-nav-parent:hover .lk-nav-caret,
.lk-nav-horizontal > .lk-site-navigation-links .lk-nav-parent:focus-within .lk-nav-caret {
  transform: rotate(180deg);
}
.lk-nav-horizontal > .lk-site-navigation-links .lk-nav-dropdown a { display: block; }


.lk-anim {
  animation-duration: var(--lk-anim-duration, 600ms);
  animation-delay: var(--lk-anim-delay, 0ms);
  animation-timing-function: var(--lk-anim-easing, ease-out);
  animation-iteration-count: var(--lk-anim-iteration, 1);
  animation-fill-mode: both;
}
.lk-anim[data-lk-anim-paused="true"] { animation-play-state: paused; opacity: 0; }
.lk-anim.lk-anim-active { animation-play-state: running; opacity: 1; }
@keyframes lk-anim-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes lk-anim-fade-up    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lk-anim-fade-down  { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lk-anim-fade-left  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lk-anim-fade-right { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lk-anim-slide-up    { from { transform: translateY(48px); } to { transform: translateY(0); } }
@keyframes lk-anim-slide-down  { from { transform: translateY(-48px); } to { transform: translateY(0); } }
@keyframes lk-anim-slide-left  { from { transform: translateX(48px); } to { transform: translateX(0); } }
@keyframes lk-anim-slide-right { from { transform: translateX(-48px); } to { transform: translateX(0); } }
@keyframes lk-anim-zoom-in  { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lk-anim-zoom-out { from { transform: scale(1.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lk-anim-rotate-in { from { transform: rotate(-12deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }
@keyframes lk-anim-flip      { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes lk-anim-bounce {
  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
  40%, 43%                { transform: translateY(-24px); }
  70%                     { transform: translateY(-12px); }
  90%                     { transform: translateY(-4px); }
}
@keyframes lk-anim-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes lk-anim-shake  { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes lk-anim-wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.lk-anim-fade-in    { animation-name: lk-anim-fade-in; }
.lk-anim-fade-up    { animation-name: lk-anim-fade-up; }
.lk-anim-fade-down  { animation-name: lk-anim-fade-down; }
.lk-anim-fade-left  { animation-name: lk-anim-fade-left; }
.lk-anim-fade-right { animation-name: lk-anim-fade-right; }
.lk-anim-slide-up    { animation-name: lk-anim-slide-up; }
.lk-anim-slide-down  { animation-name: lk-anim-slide-down; }
.lk-anim-slide-left  { animation-name: lk-anim-slide-left; }
.lk-anim-slide-right { animation-name: lk-anim-slide-right; }
.lk-anim-zoom-in    { animation-name: lk-anim-zoom-in; }
.lk-anim-zoom-out   { animation-name: lk-anim-zoom-out; }
.lk-anim-rotate-in  { animation-name: lk-anim-rotate-in; }
.lk-anim-flip       { animation-name: lk-anim-flip; }
.lk-anim-bounce { animation-name: lk-anim-bounce; }
.lk-anim-pulse  { animation-name: lk-anim-pulse;  animation-iteration-count: var(--lk-anim-iteration, infinite); }
.lk-anim-shake  { animation-name: lk-anim-shake; }
.lk-anim-wobble { animation-name: lk-anim-wobble; }
[data-lk-anim-trigger="on-hover"]:hover { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .lk-anim:not([data-lk-anim-rm="fade"]) { animation: none !important; transform: none !important; opacity: 1 !important; }
  .lk-anim[data-lk-anim-rm="fade"]       { animation: lk-anim-fade-in 200ms ease-out both !important; transform: none !important; }
}


*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
.container {
    width: 100%
}
@media (min-width: 640px) {
    .container {
        max-width: 640px
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px
    }
}
.visible {
    visibility: visible
}
.block {
    display: block
}
.grid {
    display: grid
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}