/* Motokiwo Builder 2 front-end layout. The original theme header and footer
   remain outside this file and are never replaced by builder sections. */
.mkb-page.mk-home{
  display:block!important;
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding:0 40px 64px;
  overflow:visible;
}
.mkb-page,.mkb-page *{box-sizing:border-box}
.mkb-section{
  --mkb-space-before:0px;
  --mkb-space-after:0px;
  --mkb-padding-top:56px;
  --mkb-padding-bottom:56px;
  position:relative;
  isolation:isolate;
  margin-top:var(--mkb-space-before)!important;
  margin-bottom:var(--mkb-space-after)!important;
  background:var(--mkb-background,transparent);
  color:var(--mkb-text,inherit);
}
.mkb-section:not(.mkb-section--playground)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--mkb-background,transparent);
  box-shadow:0 0 0 100vmax var(--mkb-background,transparent);
  clip-path:inset(0 -100vmax);
}
.mkb-section__inner{
  width:100%;
  margin-inline:auto;
  padding-top:var(--mkb-padding-top);
  padding-bottom:var(--mkb-padding-bottom);
  container-type:inline-size;
  container-name:mkb-section;
}
.mkb-width--contained>.mkb-section__inner{max-width:920px}
.mkb-width--wide>.mkb-section__inner{max-width:1240px}
.mkb-width--full>.mkb-section__inner{max-width:none}

/* The saved order always wins. Old homepage CSS used flex order to move the
   playground; Builder sections must remain exactly where they are dropped. */
.mkb-page>.mkb-section{order:initial!important}
body.motokiwo-builder-page #main-content.mkb-page>.mk-home-edit:first-child{
  margin-top:var(--mkb-space-before)!important;
  margin-bottom:var(--mkb-space-after)!important;
}
.mkb-section--playground{
  display:block!important;
  width:100%;
  padding:22px 0 24px!important;
  background:var(--canvas,#24271f)!important;
  color:var(--type,#eef1d7)!important;
}
.mkb-section--playground::before{background:var(--canvas,#24271f)!important}
.mkb-section--playground .mk-type-stage{min-height:var(--mkb-stage-height,330px)!important}
.mkb-section--playground .mk-type-actions:empty{display:none}

/* Product grids use the real Shop card markup. Only the grid geometry is
   controlled here. max(minimum card width, one share of the maximum-column
   row) prevents both tiny cards and accidental five/six-column overrides. */
.mkb-shop-cards{container-type:inline-size;container-name:mkb-products}
.mkb-shop-cards .mkb-product-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--mkb-grid-min)),1fr))!important;
  gap:var(--mkb-grid-gap,22px)!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.mkb-shop-cards .mkb-product-grid>li.product{
  display:block!important;
  float:none!important;
  clear:none!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.mkb-section--products .mk-home-search{margin-bottom:0}

.mkb-hero{max-width:940px}
.mkb-align--center .mkb-hero,.mkb-align--center .mkb-text,.mkb-align--center .mkb-cta{margin-inline:auto;text-align:center}
.mkb-align--right .mkb-hero,.mkb-align--right .mkb-text,.mkb-align--right .mkb-cta{margin-left:auto;text-align:right}
.mkb-hero h1{
  max-width:16ch;
  margin:0;
  font-size:clamp(38px,7.2cqi,var(--mkb-heading-max,64px));
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.045em;
}
.mkb-align--center .mkb-hero h1{margin-inline:auto}
.mkb-align--right .mkb-hero h1{margin-left:auto}
.mkb-hero p{
  max-width:680px;
  margin:24px 0 0;
  font-size:clamp(17px,2cqi,22px);
  line-height:1.6;
  color:color-mix(in srgb,currentColor 72%,transparent);
}
.mkb-align--center .mkb-hero p{margin-inline:auto}
.mkb-align--right .mkb-hero p{margin-left:auto}
.mkb-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:28px;
  padding:12px 20px;
  border:1px solid currentColor;
  color:inherit!important;
  font-size:16px;
  line-height:1.2;
  text-decoration:none!important;
  transition:background-color .15s ease,color .15s ease;
}
.mkb-button:hover{background:currentColor}
.mkb-button:hover{color:var(--mkb-background,#fff)!important}

.mkb-text{max-width:900px}
.mkb-text h2,.mkb-image-copy h2,.mkb-cta h2,.mkb-shortcode-heading{
  margin:0 0 22px;
  font-size:clamp(32px,4.4cqi,54px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.035em;
}
.mkb-richtext{
  font-size:clamp(17px,1.7cqi,20px);
  line-height:1.7;
}
.mkb-richtext>*:first-child{margin-top:0}
.mkb-richtext>*:last-child{margin-bottom:0}
.mkb-richtext a{text-decoration:underline;text-underline-offset:3px}
.mkb-text--columns-2 .mkb-richtext{column-count:1;column-gap:48px}
@container mkb-section (min-width:780px){
  .mkb-text--columns-2 .mkb-richtext{column-count:2}
}

.mkb-image-text{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
@container mkb-section (min-width:760px){
  .mkb-image-text{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:clamp(42px,6cqi,88px)}
  .mkb-image-text--right .mkb-image-frame{order:2}
  .mkb-image-text--right .mkb-image-copy{order:1}
}
.mkb-image-frame,.mkb-single-image{
  margin:0;
  width:100%;
  overflow:hidden;
  background:#f0f0ea;
}
.mkb-image-frame img,.mkb-single-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.mkb-ratio--1-1{aspect-ratio:1/1}
.mkb-ratio--4-3{aspect-ratio:4/3}
.mkb-ratio--3-2{aspect-ratio:3/2}
.mkb-ratio--3-4{aspect-ratio:3/4}
.mkb-ratio--auto{aspect-ratio:auto}
.mkb-ratio--auto img{height:auto;object-fit:contain}
.mkb-image-copy{max-width:600px}
.mkb-image-copy .mkb-richtext{font-size:clamp(16px,1.7cqi,19px)}
.mkb-single-image figcaption{padding-top:12px;font-size:14px;line-height:1.5;color:color-mix(in srgb,currentColor 68%,transparent)}
.mkb-image-link{display:block;color:inherit!important;text-decoration:none!important}
.mkb-image-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  min-height:260px;
  background:repeating-linear-gradient(135deg,#efefe9,#efefe9 12px,#e7e7df 12px,#e7e7df 24px);
  color:#696b61;
  font-size:15px;
}

.mkb-cta{max-width:1000px}
.mkb-cta h2{max-width:18ch;font-size:clamp(38px,6cqi,78px);margin-bottom:0}
.mkb-align--center .mkb-cta h2{margin-inline:auto}
.mkb-align--right .mkb-cta h2{margin-left:auto}
.mkb-cta p{max-width:660px;margin:22px 0 0;font-size:18px;line-height:1.65}
.mkb-align--center .mkb-cta p{margin-inline:auto}
.mkb-align--right .mkb-cta p{margin-left:auto}

.mkb-shortcode-heading{max-width:760px}
.mkb-shortcode{font-size:16px}
.mkb-wordpress-content>.mkb-section__inner>.entry-content{max-width:none!important;width:100%!important;margin:0!important}
.mkb-divider{width:100%;height:0;margin:0;border:0;border-top-style:solid}
.mkb-spacer{position:relative}
.mkb-spacer>span{display:none}
.mkb-empty{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  justify-content:center;
  min-height:160px;
  padding:28px;
  border:1px dashed currentColor;
  opacity:.7;
  font-size:15px;
}
.mkb-empty strong{font-size:18px}

/* Hidden sections remain inspectable only in the private builder preview. */
body.motokiwo-builder-preview .mkb-section--hidden{display:block!important;opacity:.42;filter:grayscale(.7)}
body.motokiwo-builder-preview .mkb-spacer{
  min-height:24px;
  outline:1px dashed rgba(70,80,60,.5);
  background:repeating-linear-gradient(135deg,rgba(90,100,80,.06),rgba(90,100,80,.06) 8px,transparent 8px,transparent 16px);
}
body.motokiwo-builder-preview .mkb-spacer>span{
  display:grid;
  place-items:center;
  height:100%;
  color:#666d5e;
  font:600 11px/1.2 system-ui,sans-serif;
}

@media(max-width:767px){
  .mkb-page.mk-home{padding-right:16px;padding-left:16px;padding-bottom:48px}
  .mkb-section__inner{padding-top:min(var(--mkb-padding-top),72px);padding-bottom:min(var(--mkb-padding-bottom),72px)}
  .mkb-section--playground{padding-top:16px!important;padding-bottom:18px!important}
  .mkb-hero p,.mkb-cta p{font-size:16px}
  .mkb-button{font-size:15px;min-height:44px;margin-top:22px}
  .mkb-image-text{gap:24px}
}
@media(prefers-reduced-motion:reduce){.mkb-button{transition:none}}

/* v1.9.8: match the text-only fallback to the playground height selected in
   the Builder. No visual card or media placeholder is introduced. */
.mkb-section--playground .mk-type-fallback{
  min-height:var(--mkb-stage-height,330px)!important;
}