/* Kavio Store: Magento storefront design ("extension studio"), loaded only on the Magento host (html[data-kv-design="magento"],
   kv_platform_hosts). GENERATED by scratchpad/swq4/mkcss.py from woocommerce.css (same component set, class prefix .mgx-*): Magento
   orange on a warm white ground, Manrope display type, charcoal bands, pill buttons. Accent colours come from tokens.css. */


@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../../../media/fonts/kv/plat/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../../../media/fonts/kv/plat/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html[data-kv-design="magento"] {
  --display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --paper: #FDF8F5;
  --lav: #FEF3ED;
  --lav-2: #FFE1D1;
  --plum: #221F1C;
  --deep: #C7490A;
  --deep-700: #A83D08;
  --bg-2: #F9F1ED;
  --bg-3: #F4E8E2;
  --line: #F3E0D7;
  --line-2: #D6D1CC;
  --ink: #1D1A18;
  --ink-2: #4F4841;
  --ink-3: #6C6259;
  --r-1: 8px; --r-2: 10px; --r-3: 14px; --r-4: 18px; --r-5: 24px;
  --mgx-sh: 0 1px 2px rgba(29, 26, 24, .05), 0 10px 30px rgba(29, 26, 24, .08);
  --mgx-sh-lg: 0 2px 4px rgba(29, 26, 24, .06), 0 30px 70px rgba(57, 51, 46, .18);
  scroll-padding-top: 96px;
}
html[data-kv-design="magento"] body { background: var(--paper); color: var(--ink); }
html[data-kv-design="magento"] .ty-tygh, html[data-kv-design="magento"] .tygh-content > div { background-color: var(--paper); }
html[data-kv-design="magento"] h1, html[data-kv-design="magento"] h2, html[data-kv-design="magento"] h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; }
/* logo: the module takes the platform colour ("the module fits your platform") */
html[data-kv-plat] .logo__img path[fill="#ff5b2e"] { fill: var(--brand); }

/* ---------- shared atoms ---------- */
.mgx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ink);
  border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px/1.1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.mgx-btn:hover { background: var(--ink); color: #fff; text-decoration: none; }
.mgx-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--deep); }
.mgx-btn--primary { background: var(--deep); border-color: var(--deep); color: #fff; }
.mgx-btn--primary:hover { background: var(--deep-700); border-color: var(--deep-700); color: #fff; }
.mgx-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.mgx-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.mgx-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--deep); text-decoration: none; border-bottom: 1.5px solid var(--brand); padding-bottom: 1px; }
.mgx-link:hover { color: var(--deep-700); border-bottom-color: var(--deep); }
.mgx-link .ico { transition: transform .15s; }
.mgx-link:hover .ico { transform: translateX(3px); }
.mgx-eyebrow { margin: 0; font: 600 13px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--deep); }
.mgx-h2 { margin: 10px 0 0; font: 600 clamp(30px, 3.4vw, 46px)/1.08 var(--display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.mgx-h2 em, .mgx-display em, .mgx-std__h em, .mgx-ftr__news h2 em { font-style: normal; font-weight: 500; color: var(--deep); }
.mgx-display { margin: 20px 0 20px; font: 600 clamp(42px, 5.4vw, 74px)/1.02 var(--display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.mgx-display--page { font-size: clamp(34px, 4.2vw, 56px); margin: 10px 0 14px; }
.mgx-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--lav); color: var(--deep); font: 600 13px/1.2 var(--font); white-space: nowrap; }
.mgx-pill--hero { margin: 0; padding: 7px 14px; background: #fff; box-shadow: var(--mgx-sh); }
.mgx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--lav); color: var(--deep); font-size: 12.5px; font-weight: 700; }
.mgx-input { height: 48px; padding: 0 18px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 15px var(--font); min-width: 0; }
.mgx-input:focus { outline: 0; border-color: var(--deep); box-shadow: 0 0 0 4px var(--brand-ring); }
.mgx-yes { display: inline-flex; align-items: center; gap: 4px; color: #1D6B3A; font-weight: 600; }
.mgx-price { display: inline-block; font: 600 26px/1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.mgx-price small { display: block; margin-top: 5px; font: 500 12.5px/1.2 var(--font); color: var(--ink-3); letter-spacing: 0; }

/* ---------- header ---------- */
.mgx-news { background: var(--plum); color: #F7E7DF; font-size: 13.5px; }
.mgx-news__in { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.mgx-news__k { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--brand); color: var(--brand-on); font-size: 12px; font-weight: 700; }
.mgx-news a { color: #fff; text-decoration: none; }
.mgx-news a:hover .mgx-news__go { text-decoration: underline; }
.mgx-news__go { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: #FFBF9F; font-weight: 600; white-space: nowrap; }
.mgx-hdr { position: sticky; top: 0; z-index: 50; background: rgba(253, 248, 245, .94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.mgx-hdr__in { display: flex; align-items: center; gap: 28px; height: 76px; }
.mgx-lock { display: inline-flex; align-items: baseline; gap: 10px; flex: none; color: var(--ink); text-decoration: none; }
.mgx-lock .logo__img { height: 24px; width: auto; display: block; align-self: center; }
.mgx-lock__tag { font: 400 19px/1 var(--display); color: var(--ink-2); white-space: nowrap; }
.mgx-lock__tag em { font-style: normal; font-weight: 500; color: var(--deep); }
.mgx-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.mgx-nav a { position: relative; padding: 9px 13px; border-radius: 999px; color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.mgx-nav a:hover { background: var(--lav); color: var(--ink); }
.mgx-nav a[aria-current="page"] { background: var(--lav); color: var(--deep); font-weight: 600; }
.mgx-act { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.mgx-nav + .mgx-act { margin-left: 0; }
.mgx-round { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.mgx-round:hover { border-color: var(--deep); color: var(--deep); }
.mgx-act__link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.mgx-act__link:hover { color: var(--deep); }
.mgx-cart { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--brand); color: var(--brand-on); font-weight: 600; text-decoration: none; white-space: nowrap; }
.mgx-cart:hover { background: var(--brand-700); color: var(--brand-on); }
.mgx-cart__n { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; }
.mgx-menu { display: none; }
.mgx-drawer .drawer__head .mgx-lock__tag { font-size: 17px; }
.mgx-search { display: flex; align-items: center; height: 48px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; overflow: hidden; }
.mgx-search:focus-within { border-color: var(--deep); box-shadow: 0 0 0 4px var(--brand-ring); }
.mgx-search__in { flex: 1; min-width: 0; height: 100%; padding: 0 18px; border: 0; background: transparent; font: 15px var(--font); color: var(--ink); }
.mgx-search__in:focus { outline: 0; }
.mgx-search__go { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 2px; border: 0; border-radius: 50%; background: var(--deep); color: #fff; cursor: pointer; }
.mgx-drawer .mgx-search { margin: 4px 20px 12px; }
.mgx-drawer__nav { display: grid; padding: 4px 12px; }
.mgx-drawer__nav a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 12px; color: var(--ink); font: 600 17px/1.2 var(--display); text-decoration: none; }
.mgx-drawer__nav a:hover { background: var(--lav); }
.mgx-drawer__nav .mgx-drawer__item { padding-left: 18px; font: 500 15px/1.3 var(--font); color: var(--ink-2); }
.mgx-drawer__util { display: grid; gap: 2px; margin: 10px 12px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.mgx-drawer__util a { display: flex; align-items: center; gap: 10px; padding: 11px 10px; color: var(--ink-2); text-decoration: none; }
@media (max-width: 1179px) { .mgx-nav .mgx-nav__x { display: none; } }
@media (max-width: 1099px) { .mgx-nav a { padding: 9px 9px; font-size: 14.5px; } .mgx-hdr__in { gap: 18px; } .mgx-act__link .lbl { display: none; } }
@media (max-width: 959px) {
  .mgx-nav { display: none; }
  .mgx-menu { display: inline-flex; }
  .mgx-act { margin-left: auto; }
}
@media (max-width: 559px) {
  .mgx-hdr__in { height: 64px; gap: 10px; }
  .mgx-lock .logo__img { height: 20px; }
  .mgx-lock__tag { font-size: 16px; }
  .mgx-lock__tag { display: none; }
  .mgx-act { gap: 6px; }
  .mgx-round { width: 40px; height: 40px; }
  .mgx-act__link { padding: 0 6px; }
  .mgx-cart { min-height: 40px; padding: 0 6px 0 12px; }
  .mgx-cart .lbl { display: none; }
  .mgx-news { font-size: 12.5px; }
  .mgx-news__go { display: none; }
}

/* ---------- home: hero ---------- */
.mgx-home { overflow: hidden; }
.mgx-hero { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); }
.mgx-hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 120%; background: radial-gradient(closest-side, rgba(199, 73, 10, .26), transparent 70%); pointer-events: none; }
.mgx-hero::after { content: ""; position: absolute; left: -12vw; bottom: -30%; width: 46vw; height: 80%; background: radial-gradient(closest-side, rgba(255, 188, 155, .30), transparent 70%); pointer-events: none; }
.mgx-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px 64px; align-items: center; }
.mgx-hero__lede { max-width: 36em; margin: 0 0 28px; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.mgx-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.mgx-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.mgx-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.mgx-hero__facts .ico { color: var(--deep); }
.mgx-hero__art { position: relative; padding-bottom: 46px; }
.mgx-fan { position: relative; padding: 0 18px 18px; border-radius: 26px; background: #fff; box-shadow: var(--mgx-sh-lg); transform: rotate(1.6deg); }
.mgx-fan__bar { display: flex; align-items: center; gap: 10px; margin: 0 -18px 16px; padding: 12px 18px; border-radius: 26px 26px 0 0; background: var(--plum); color: #BEB6AF; font-size: 13px; }
.mgx-fan__bar b { margin-left: auto; color: #fff; font-weight: 600; }
.mgx-fan__wp { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.5px solid #BEB6AF; border-radius: 50%; font: 700 12px/1 var(--display); }
.mgx-plug { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mgx-plug + .mgx-plug { margin-top: 10px; }
.mgx-plug--1 { border-color: var(--lav-2); background: var(--lav); box-shadow: inset 4px 0 0 var(--deep); }
.mgx-plug__top { display: flex; align-items: center; gap: 12px; }
.mgx-plug__top > .pi { flex: none; }
.mgx-plug__top > div { flex: 1; min-width: 0; }
.mgx-plug__top > div > b { display: block; font: 600 16.5px/1.25 var(--display); color: var(--ink); }
.mgx-plug__top > div > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.mgx-plug__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 12.5px; color: var(--ink-3); }
.mgx-plug__on { display: inline-flex; align-items: center; gap: 6px; color: var(--deep); font-weight: 700; }
.mgx-plug__on i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.mgx-plug__links { color: var(--deep); }
.mgx-plug__ok { display: inline-flex; align-items: center; gap: 5px; color: #1D6B3A; }
.mgx-plug__act { padding: 5px 12px; border: 1px solid var(--deep); border-radius: 999px; color: var(--deep); font-weight: 600; }
.mgx-hero__stats { position: absolute; left: -26px; bottom: 0; display: flex; gap: 10px; }
.mgx-hero__stats > div { display: grid; padding: 12px 18px; border-radius: 18px; background: #fff; box-shadow: var(--mgx-sh); }
.mgx-hero__stats b { font: 600 24px/1.05 var(--display); color: var(--ink); }
.mgx-hero__stats b .ty-price-num, .mgx-hero__stats b span { font: inherit; }
.mgx-hero__stats span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1023px) {
  .mgx-hero__grid { grid-template-columns: 1fr; }
  .mgx-hero__art { max-width: 620px; }
  .mgx-hero__stats { left: 16px; }
}
@media (max-width: 559px) {
  .mgx-hero__lede { font-size: 16.5px; }
  .mgx-fan { transform: none; padding: 0 12px 12px; }
  .mgx-fan__bar { margin: 0 -12px 12px; }
  .mgx-plug--3 { display: none; }
  .mgx-plug__foot { flex-wrap: wrap; }
  .mgx-hero__art { padding-bottom: 0; }
  .mgx-hero__stats { position: static; margin-top: 14px; }
  .mgx-hero__stats > div { flex: 1; padding: 10px 12px; }
  .mgx-hero__stats b { font-size: 20px; }
  .mgx-hero__ctas .mgx-btn { flex: 1 1 100%; }
}

/* ---------- home: standards band ---------- */
.mgx-std { padding: clamp(48px, 6vw, 80px) 0; background: var(--plum); color: #F1DACF; }
.mgx-std__h { max-width: 18em; margin: 0 0 40px; font: 500 clamp(28px, 3.2vw, 42px)/1.12 var(--display); color: #fff; letter-spacing: -0.02em; }
html[data-kv-design="magento"] .mgx-std__h { font-weight: 500; }
.mgx-std__h em { color: #FFBF9F !important; }
.mgx-std__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.mgx-std__list li { padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, .14); }
.mgx-std__list li:first-child { padding-left: 0; border-left: 0; }
.mgx-std__k { display: block; font: 500 40px/1 var(--display); color: var(--brand); }
html[data-kv-design="magento"] .mgx-std__list h3 { margin: 16px 0 8px; font: 600 16px/1.3 var(--font); color: #fff; letter-spacing: 0; }
.mgx-std__list p { margin: 0; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1023px) { .mgx-std__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; } .mgx-std__list li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 559px) { .mgx-std__list { grid-template-columns: 1fr; gap: 26px; } .mgx-std__list li { padding: 0 0 0 18px; border-left: 2px solid var(--brand); } .mgx-std__list li:first-child, .mgx-std__list li:nth-child(3) { padding-left: 18px; border-left: 2px solid var(--brand); } }

/* ---------- sections ---------- */
.mgx-sec { padding: clamp(56px, 7vw, 104px) 0; }
.mgx-sec--tint { background: var(--lav); }
.mgx-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 56px; margin-bottom: 40px; }
.mgx-sec__head > div { max-width: 660px; }
.mgx-sec__head > p { max-width: 400px; margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 899px) { .mgx-sec__head { flex-direction: column; align-items: flex-start; } }

/* ---------- plugin cards ---------- */
.mgx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mgx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgx-card { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--line); border-radius: 24px; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; }
.mgx-card:hover { border-color: var(--lav-2); box-shadow: var(--mgx-sh-lg); transform: translateY(-3px); }
.mgx-card__shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--lav); }
.mgx-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mgx-card__body { display: flex; flex: 1; flex-direction: column; padding: 18px 10px 8px; }
.mgx-card__top { display: flex; align-items: center; gap: 12px; }
.mgx-card__name { margin: 0; font: 600 21px/1.2 var(--display); letter-spacing: -0.01em; }
.mgx-card__name a { color: var(--ink); text-decoration: none; }
.mgx-card__name a:hover { color: var(--deep); }
.mgx-card__by { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.mgx-card__sum { margin: 14px 0 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mgx-req { display: grid; gap: 0; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13.5px; }
.mgx-req li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--line-2); }
.mgx-req li:last-child { border-bottom: 1px dashed var(--line-2); }
.mgx-req span { color: var(--ink-3); }
.mgx-req b { font-weight: 600; color: var(--ink); text-align: right; }
.mgx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
@media (max-width: 1023px) { .mgx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .mgx-grid, .mgx-grid--2 { grid-template-columns: 1fr; } }

/* ---------- home: install steps ---------- */
.mgx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.mgx-step { position: relative; padding: 18px 22px 24px; border-radius: 24px; background: #fff; box-shadow: var(--mgx-sh); }
.mgx-step__win { display: flex; align-items: stretch; height: 86px; margin: 0 -4px 22px; overflow: hidden; border-radius: 14px; background: #F0F0F1; }
.mgx-step__side { display: grid; align-content: start; gap: 7px; width: 56px; padding: 12px 10px; background: #25221E; }
.mgx-step__side i { height: 6px; border-radius: 3px; background: #50575E; }
.mgx-step__side i.on { background: var(--brand); }
.mgx-step__path { align-self: center; margin: 0 14px; padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); color: #25221E; font: 600 12.5px/1.35 var(--font); }
.mgx-step__n { position: absolute; top: 84px; right: 22px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--deep); color: #fff; font: 600 22px/1 var(--display); box-shadow: 0 0 0 5px #fff; }
html[data-kv-design="magento"] .mgx-step h3 { margin: 0 0 8px; font-size: 22px; }
.mgx-step p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 899px) { .mgx-steps { grid-template-columns: 1fr; } .mgx-step { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: 28px; align-items: start; } .mgx-step__win { grid-row: 1 / 4; margin: 0; } .mgx-step__n { top: 18px; right: 18px; width: 38px; height: 38px; font-size: 19px; } html[data-kv-design="magento"] .mgx-step h3 { margin-top: 4px; padding-right: 48px; } }
@media (max-width: 599px) { .mgx-step { display: block; } .mgx-step__win { margin: 0 -4px 22px; } .mgx-step__n { top: 84px; right: 22px; } }

/* ---------- home: screenshots (site.showcase) ---------- */
.mgx-shots__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; margin: 0; padding: 0; list-style: none; }
.mgx-shot { display: grid; gap: 18px; align-content: start; min-width: 0; }
.mgx-browser { display: block; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--mgx-sh-lg); transition: transform .3s, box-shadow .3s; }
.mgx-browser:hover { transform: translateY(-3px); }
.mgx-browser__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #F9F0EB; border-bottom: 1px solid var(--line); }
.mgx-browser__bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #F1D9CD; }
.mgx-browser__bar span { min-width: 0; margin-left: 10px; padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgx-browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.mgx-shot__txt { display: flex; align-items: flex-start; gap: 14px; padding: 0 6px; }
.mgx-shot__txt .pi--sm { flex: none; width: 34px; height: 34px; border-radius: 10px; }
.mgx-shot__txt h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.mgx-shot__txt h3 a { color: var(--ink); text-decoration: none; }
.mgx-shot__txt h3 a:hover { color: var(--deep); }
.mgx-shot__txt p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 639px) { .mgx-shots__grid { grid-template-columns: 1fr; gap: 32px; } .mgx-browser { border-radius: 16px; } }

/* ---------- home: compatibility ---------- */
.mgx-compat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.mgx-compat__card { display: grid; gap: 4px; padding: 20px 22px; border-radius: 20px; background: #fff; }
.mgx-compat__v { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.mgx-compat__d { font: 600 30px/1.1 var(--display); color: var(--ink); }
.mgx-compat__p { color: var(--ink-2); font-size: 14px; }
.mgx-compat__s { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-3); font-size: 13.5px; }
.mgx-compat__s.is-tested { color: #1D6B3A; font-weight: 600; }
.mgx-table-wrap { overflow-x: auto; border-radius: 20px; background: #fff; }
.mgx-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.mgx-table th, .mgx-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: left; }
.mgx-table thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.mgx-table tbody tr:last-child > * { border-bottom: 0; }
.mgx-table tbody th a { font: 600 17px/1.3 var(--display); color: var(--ink); text-decoration: none; }
.mgx-table tbody th a:hover { color: var(--deep); }
@media (max-width: 899px) { .mgx-compat { grid-template-columns: 1fr; } }
@media (max-width: 679px) {
  .mgx-table-wrap { overflow: visible; background: transparent; }
  .mgx-table, .mgx-table tbody, .mgx-table tr, .mgx-table th, .mgx-table td { display: block; min-width: 0; }
  .mgx-table thead { display: none; }
  .mgx-table tr { margin-bottom: 12px; padding: 16px 18px; border-radius: 18px; background: #fff; }
  .mgx-table th, .mgx-table td { padding: 5px 0; border: 0; }
  .mgx-table td { display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  .mgx-table td::before { content: attr(data-l); color: var(--ink-3); text-align: left; }
}

/* ---------- home: FAQ ---------- */
.mgx-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; }
.mgx-faq__intro p:last-child { margin: 16px 0 0; color: var(--ink-2); }
.mgx-faq__list { display: grid; gap: 12px; }
.mgx-qa { border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.mgx-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font: 600 18.5px/1.3 var(--display); cursor: pointer; list-style: none; }
.mgx-qa summary::-webkit-details-marker { display: none; }
.mgx-qa__i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lav); color: var(--deep); transition: transform .2s; }
.mgx-qa[open] .mgx-qa__i { transform: rotate(45deg); background: var(--deep); color: #fff; }
.mgx-qa p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
@media (max-width: 899px) { .mgx-faq { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.mgx-ftr { padding: 24px 0 32px; background: var(--paper); color: var(--ink-2); font-size: 14px; }
.mgx-ftr__panel { padding: clamp(28px, 4vw, 52px); border-radius: 32px; background: var(--lav); }
.mgx-ftr__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 64px; padding-bottom: 36px; border-bottom: 1px solid var(--lav-2); }
.mgx-ftr__brand p { max-width: 32em; margin: 18px 0 0; }
.mgx-ftr__news h2 { margin: 0 0 16px; font: 500 26px/1.2 var(--display); color: var(--ink); }
html[data-kv-design="magento"] .mgx-ftr__news h2 { font-weight: 500; }
.mgx-ftr__nf { display: flex; gap: 10px; }
.mgx-ftr__nf .mgx-input { flex: 1; }
.mgx-ftr__nf .mgx-btn { min-height: 48px; }
.mgx-ftr__news p { margin: 10px 0 0 18px; font-size: 13px; color: var(--ink-3); }
.mgx-ftr__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding: 34px 0; }
html[data-kv-design="magento"] .mgx-ftr__col h2 { margin: 0 0 12px; font: 500 17px/1.3 var(--display); color: var(--deep); }
.mgx-ftr__col ul { margin: 0; padding: 0; list-style: none; }
.mgx-ftr__col li { margin: 0 0 8px; }
.mgx-ftr__col a { color: var(--ink-2); text-decoration: none; }
.mgx-ftr__col a:hover { color: var(--deep); text-decoration: underline; }
.mgx-ftr__pays { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding-top: 22px; border-top: 1px solid var(--lav-2); font-size: 13px; }
.mgx-ftr__pays .pays { margin: 0; }
.mgx-ftr__usd { color: var(--ink-3); }
.mgx-ftr__stripe { margin-left: auto; }
.mgx-ftr__stripe img { display: block; height: 26px; width: auto; }
.mgx-ftr__bottom { padding: 22px 8px 0; font-size: 12.5px; color: var(--ink-3); }
.mgx-ftr__bottom p { margin: 8px 0 0; }
.mgx-ftr__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mgx-ftr__legal a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.mgx-ftr__legal a:hover { color: var(--deep); text-decoration: underline; }
@media (max-width: 1023px) { .mgx-ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .mgx-ftr__top { grid-template-columns: 1fr; } }
@media (max-width: 559px) {
  .mgx-ftr__panel { border-radius: 24px; padding: 24px 20px; }
  .mgx-ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .mgx-ftr__nf { flex-direction: column; }
  .mgx-ftr__nf .mgx-input { flex: none; width: 100%; }
  .mgx-ftr .mgx-lock__tag { display: inline; }
  .mgx-ftr__stripe { margin-left: 0; }
  .mgx-ftr__legal a { padding: 6px 0; }
  .mgx-ftr__col li { margin: 0; }
  .mgx-ftr__col a { display: inline-block; padding: 6px 0; }
}

/* ---------- catalogue and search pages ---------- */
.mgx-page { padding-bottom: clamp(56px, 7vw, 96px); }
.mgx-phead { position: relative; overflow: hidden; margin-bottom: 32px; padding: 6px 0 40px; background: var(--lav); }
.mgx-phead::after { content: ""; position: absolute; right: -8vw; top: -40%; width: 40vw; height: 180%; background: radial-gradient(closest-side, rgba(199, 73, 10, .26), transparent 70%); pointer-events: none; }
.mgx-phead .wrap { position: relative; z-index: 1; }
.mgx-crumbs { padding-top: 18px; }
.mgx-phead__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-top: 14px; }
.mgx-phead__grid > div { max-width: 720px; }
.mgx-phead p:last-child, .mgx-phead__grid p:last-child { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.mgx-demo-chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--mgx-sh); }
.mgx-demo-chip:hover { color: var(--deep); box-shadow: var(--mgx-sh-lg); }
.mgx-demo-chip span { display: grid; }
.mgx-demo-chip small { color: var(--ink-3); font-size: 12.5px; }
.mgx-demo-chip__dot { display: block !important; width: 10px; height: 10px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.mgx-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.mgx-tools__count { margin: 0; color: var(--ink-3); font-size: 15px; }
.mgx-tools__count b { color: var(--ink); font: 600 20px/1 var(--display); }
.mgx-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.mgx-sort select { height: 42px; padding: 0 34px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background-color: #fff; color: var(--ink); font: 500 14px var(--font); }
.mgx-rows { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.mgx-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 40px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 28px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.mgx-row[hidden] { display: none; }
.mgx-row:hover { border-color: var(--lav-2); box-shadow: var(--mgx-sh-lg); }
.mgx-row__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: var(--lav); }
.mgx-row__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mgx-row__main { padding: 8px 18px 8px 0; }
.mgx-row__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.mgx-row__top .mgx-pill { margin-left: auto; }
.mgx-row__name { margin: 0; font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -0.015em; }
.mgx-row__name a { color: var(--ink); text-decoration: none; }
.mgx-row__name a:hover { color: var(--deep); }
.mgx-row__sum { margin: 14px 0 16px; max-width: 46em; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.mgx-req--row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.mgx-req--row li:nth-last-child(2) { border-bottom: 1px dashed var(--line-2); }
.mgx-row__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.mgx-row__foot .mgx-price { margin-right: auto; }
.mgx-custom { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 32px; padding: 24px 26px; border: 1.5px dashed var(--line-2); border-radius: 24px; background: #fff; }
.mgx-custom > div { flex: 1; min-width: 220px; }
.mgx-custom__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--lav); color: var(--deep); }
.mgx-custom b { font: 600 20px/1.2 var(--display); }
.mgx-custom p { margin: 4px 0 0; max-width: 46em; color: var(--ink-2); }
.mgx-custom__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }
/* release 20261434: "Free on WordPress.org" block of the plugins page (common/kv/plat/woocommerce/catalog.tpl) */
.mgx-free { margin-top: 40px; padding: 30px 30px 32px; border-radius: 28px; background: var(--lav); }
.mgx-free__head { max-width: 60em; }
.mgx-free__h { margin: 8px 0 8px; font: 600 clamp(26px, 2.6vw, 34px)/1.12 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.mgx-free__h em { font-style: normal; font-weight: 500; color: var(--deep); }
.mgx-free__head > p:last-child { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.mgx-free__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.mgx-free__card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 14px 16px; margin: 0; padding: 22px 22px 20px; border-radius: 22px; background: #fff; box-shadow: var(--mgx-sh); }
.mgx-free__ico { display: inline-flex; align-items: center; justify-content: center; grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 50%; background: var(--lav); color: var(--deep); }
.mgx-free__name { margin: 2px 0 6px; font: 600 20px/1.2 var(--display); }
.mgx-free__name a { color: var(--ink); text-decoration: none; }
.mgx-free__name a:hover { color: var(--deep); }
.mgx-free__body p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.mgx-free__body .mgx-free__more { margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.mgx-free__more a { color: var(--deep); font-weight: 600; }
.mgx-free__go { justify-self: start; }
@media (max-width: 899px) { .mgx-free__list { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .mgx-free { padding: 22px 16px 18px; border-radius: 22px; } .mgx-free__card { grid-template-columns: 1fr; padding: 18px; } .mgx-free__ico { grid-row: auto; width: 40px; height: 40px; } }

.mgx-search--page { max-width: 640px; height: 54px; margin-top: 22px; padding-right: 4px; }
.mgx-search--page .mgx-btn { min-height: 44px; }
@media (max-width: 899px) {
  .mgx-row { grid-template-columns: 1fr; gap: 16px; }
  .mgx-row__main { padding: 4px 8px 10px; }
}
@media (max-width: 559px) {
  .mgx-req--row { grid-template-columns: 1fr; }
  .mgx-req--row li:nth-last-child(2) { border-bottom: 0; }
  .mgx-row__top .mgx-pill { margin-left: 0; }
  .mgx-row { border-radius: 22px; padding: 10px; }
}

/* ---------- shared pages, WooCommerce skin (product, cart, checkout, account, content) ---------- */
html[data-kv-design="magento"] .btn { border-radius: 999px; border-color: var(--line-2); }
html[data-kv-design="magento"] .btn:hover { border-color: var(--deep); color: var(--deep); background: #fff; }
html[data-kv-design="magento"] .btn--primary { background: var(--deep); border-color: var(--deep); color: #fff; }
html[data-kv-design="magento"] .btn--primary:hover { background: var(--deep-700); border-color: var(--deep-700); color: #fff; }
html[data-kv-design="magento"] .btn--primary .ico { color: #fff; }
html[data-kv-design="magento"] .btn--quiet { border-color: transparent; background: transparent; }
html[data-kv-design="magento"] .panel, html[data-kv-design="magento"] .side-grid, html[data-kv-design="magento"] .rcard { border-radius: 20px; border-color: var(--line); }
html[data-kv-design="magento"] .buy { border-radius: 24px; border-color: var(--line); box-shadow: var(--mgx-sh-lg); }
html[data-kv-design="magento"] .gallery__stage { border-radius: 20px; border-color: var(--line); }
html[data-kv-design="magento"] .thumb { border-radius: 12px; }
html[data-kv-design="magento"] .thumb[aria-current="true"] { outline: 2px solid var(--deep); outline-offset: 1px; }
html[data-kv-design="magento"] .input, html[data-kv-design="magento"] .select, html[data-kv-design="magento"] .input-pre { border-radius: 12px; }
html[data-kv-design="magento"] .tag { border-radius: 999px; }
html[data-kv-design="magento"] .ph h1 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
html[data-kv-design="magento"] .tabs .tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--deep); color: var(--deep); }
html[data-kv-design="magento"] .kvp-eco { border-color: var(--line); border-radius: 18px; background: #fff; }
html[data-kv-design="magento"] .kvp-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--lav); color: var(--deep); font: 600 15px/1 var(--display); }
html[data-kv-design="magento"] .kv-phcta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
html[data-kv-design="magento"] .section--alt { background: transparent; }
html[data-kv-design="magento"] .pg-steps li.is-current b, html[data-kv-design="magento"] .pg-steps .is-current b { border-radius: 999px; }
html[data-kv-design="magento"] .empty .tile { border-radius: 24px; }
html[data-kv-plat] .thumb--cover::after { content: none; }
html[data-kv-design="magento"] .mgx-also { margin-top: clamp(40px, 5vw, 64px); }
html[data-kv-design="magento"] .kvc--content:has(.mgx-also) { padding-bottom: 0; }
html[data-kv-design="magento"] .kv .ty-btn__primary, html[data-kv-design="magento"] .kv .ty-btn__add-to-cart, html[data-kv-design="magento"] .kv .cm-checkout-place-order, html[data-kv-design="magento"] .kv .litecheckout__submit-btn { border-radius: 999px; background: var(--deep); border-color: var(--deep); color: #fff !important; }
html[data-kv-design="magento"] .kv .ty-btn__primary:hover, html[data-kv-design="magento"] .kv .ty-btn__add-to-cart:hover, html[data-kv-design="magento"] .kv .litecheckout__submit-btn:hover { background: var(--deep-700); border-color: var(--deep-700); color: #fff !important; }
html[data-kv-design="magento"] .kv .litecheckout__payment-method, html[data-kv-design="magento"] .kv .ty-other-pay { border-radius: 16px; }

/* themes in the catalogue (theme-sync4) */
.mgx-na { color: var(--ink-3); font-weight: 600; }
.mgx-sub { margin-top: clamp(40px, 5vw, 64px); }
.mgx-sub__head { max-width: 640px; margin-bottom: 28px; }
.mgx-sub__h { margin: 8px 0 0; font: 600 clamp(24px, 2.6vw, 34px)/1.12 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.mgx-sub__head p:last-child { margin: 10px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }

/* ---------- theme-sync8 (2026-11-02): official Woo purple, vivid details ---------- */
/* serif italics in a Woo purple gradient (AA: both ends >= 4.5:1 on the cream ground) */
.mgx-h2 em, .mgx-display em, .mgx-ftr__news h2 em { background: linear-gradient(100deg, #AA3E09 0%, #C7490A 55%, #DE5612 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* hero: purple + violet light, a soft glow around the plugin screen */
.mgx-hero::before { background: radial-gradient(closest-side, rgba(199, 73, 10, .30), transparent 70%), radial-gradient(closest-side at 70% 70%, rgba(255, 107, 33, .16), transparent 70%); }
.mgx-fan { box-shadow: var(--mgx-sh-lg), 0 40px 90px -30px rgba(199, 73, 10, .45); }
/* the plum band: purple light from the corners, the big italic words in a light purple gradient */
.mgx-std { background: radial-gradient(50% 90% at 0% 0%, rgba(199, 73, 10, .28), transparent 60%), radial-gradient(40% 80% at 100% 100%, rgba(255, 107, 33, .18), transparent 60%), var(--plum); }
.mgx-std__k { background: linear-gradient(100deg, #FFA97D, #FFD8C5); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.mgx-news { background: linear-gradient(90deg, var(--plum), #35302B 50%, var(--plum)); }
/* buttons: lift + purple glow on hover */
.mgx-btn--primary, html[data-kv-design="magento"] .btn--primary, .mgx-cart { transition: background-color .15s, box-shadow .25s var(--ease-out, ease), transform .25s var(--ease-out, ease); }
@media (hover: hover) and (pointer: fine) {
  .mgx-btn--primary:hover, html[data-kv-design="magento"] .btn--primary:hover, .mgx-cart:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(199, 73, 10, .7); }
  .mgx-card:hover { box-shadow: var(--mgx-sh-lg), 0 24px 50px -26px rgba(199, 73, 10, .55); border-color: var(--brand-200); }
}
.mgx-card img { transition: transform .6s var(--ease-out, ease); }
@media (hover: hover) and (pointer: fine) { .mgx-card:hover img { transform: scale(1.03); } }
/* page heads: lavender with purple light */
.mgx-phead { background: radial-gradient(60% 140% at 100% 0%, rgba(199, 73, 10, .14), transparent 60%), var(--lav); }
html[data-kv-design="magento"] .buy { box-shadow: var(--mgx-sh-lg), 0 30px 70px -40px rgba(199, 73, 10, .5); }
/* sticky buy bar: cream glass, pill action */
html[data-kv-design="magento"] .mbar[data-mbar] { --mb-r: 22px; --mb-bg: rgba(253, 248, 245, .9); --mb-bd: var(--lav-2); box-shadow: 0 30px 70px -24px rgba(57, 51, 46, .4), 0 2px 8px rgba(29, 26, 24, .06); }
html[data-kv-design="magento"] .mbar[data-mbar] .mbar__ico { border-radius: 12px; background: var(--lav); }
html[data-kv-design="magento"] .mbar[data-mbar] .mbar__name { font-family: var(--display); font-weight: 600; font-size: 16.5px; letter-spacing: 0; }
html[data-kv-design="magento"] .mbar[data-mbar] .mbar__price b { font-family: var(--display); font-weight: 600; }
html[data-kv-design="magento"] .mbar[data-mbar] .mbar__cta { border-radius: 999px; }
html[data-kv-design="magento"] .mbar[data-mbar] .mbar__demo { border-radius: 999px; }
@media (max-width: 760px) { html[data-kv-design="magento"] .mbar[data-mbar] { --mb-r: 18px; } html[data-kv-design="magento"] .mbar[data-mbar] .mbar__name { font-size: 15px; } }

/* ---- flagship theme spotlight (home themes block + themes listing), 20261104 ---- */
.mgx-flag { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin: 0 0 28px; padding: 14px; border-radius: 28px; background: radial-gradient(60% 90% at 100% 0%, rgba(199, 73, 10, .55), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(250, 83, 0, .22), transparent 70%), var(--plum); color: #fff; box-shadow: 0 40px 80px -40px rgba(57, 51, 46, .55); isolation: isolate; overflow: hidden; }
.mgx-flag::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(120deg, #FF9059, #FF6B21 40%, #2ad3a0 60%, #ffb06b); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; z-index: -1; }
.mgx-flag__shot { display: block; border-radius: 18px; overflow: hidden; background: #2F2B27; aspect-ratio: 16 / 9; }
.mgx-flag__shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
@media (hover: hover) and (pointer: fine) { .mgx-flag:hover .mgx-flag__shot img { transform: scale(1.03); } }
.mgx-flag__body { padding: 10px clamp(6px, 2vw, 24px) 10px 0; min-width: 0; }
.mgx-flag__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #FFCFB6; }
.mgx-flag__badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: linear-gradient(120deg, #C7490A, #FF6B21); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mgx-flag__name { margin: 0; font: 600 clamp(26px, 2.8vw, 38px)/1.08 var(--display); letter-spacing: -0.02em; }
.mgx-flag__name a { color: #fff; text-decoration: none; }
.mgx-flag__name a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.mgx-flag__sum { margin: 12px 0 0; color: #F7DBCD; font-size: 15.5px; line-height: 1.6; }
.mgx-flag__chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mgx-flag__chips li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 600; color: #fff; }
.mgx-flag__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 22px; }
.mgx-flag__price { display: inline-flex; align-items: baseline; gap: 8px; font: 700 26px/1 var(--display); color: #fff; }
.mgx-flag__price small { font: 500 13px/1.2 var(--font); letter-spacing: 0; color: #ECCEBF; }
.mgx-flag .mgx-btn--primary { background: #fff; border-color: #fff; color: var(--plum); }
.mgx-flag .mgx-btn--primary:hover { background: #FEECE3; border-color: #FEECE3; color: var(--plum); }
.mgx-flag__more { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.mgx-flag__more:hover { color: #FFCFB6; }
.mgx-flag :focus-visible { outline-color: #fff; }
@media (max-width: 1023px) { .mgx-flag { grid-template-columns: 1fr; } .mgx-flag__body { padding: 4px 8px 10px; } }
@media (max-width: 639px) { .mgx-flag { padding: 10px; border-radius: 22px; } .mgx-flag__price { font-size: 22px; } }

/* ---------- Magento identity (swq4, 2026-11-12) ---------- */
html[data-kv-design="magento"] .mgx-h2, html[data-kv-design="magento"] .mgx-display, html[data-kv-design="magento"] .mgx-std__h, html[data-kv-design="magento"] .mgx-sub__h,
html[data-kv-design="magento"] .mgx-flag__name { font-weight: 800; letter-spacing: -0.035em; }
html[data-kv-design="magento"] .mgx-card__name, html[data-kv-design="magento"] .mgx-row__name { font-weight: 800; letter-spacing: -0.02em; }
html[data-kv-design="magento"] .mgx-h2 em, html[data-kv-design="magento"] .mgx-display em, html[data-kv-design="magento"] .mgx-ftr__news h2 em { font-weight: 800; }
html[data-kv-design="magento"] .mgx-lock__tag em { font-weight: 800; }

/* studio hero (common.css .kvst--plat): Magento orange, no serif italics */
html[data-kv-plat="magento"] .kvst--plat { --st-b: #FF6B21; --st-c: #FFB089; --st-hl: #FFBB99;
  --st-g: linear-gradient(90deg, #FFBB99 0%, #FF6B21 28%, #FFD9C6 52%, #FFBB99 76%, #FF6B21 100%);
  --st-btn: linear-gradient(135deg, #EF590E 0%, #C7490A 50%, #A83D08 100%); }
html[data-kv-plat="magento"] .kv .kvst--plat .kvst__l1, html[data-kv-plat="magento"] .kv .kvst--plat .kvst__l2 { font-weight: 800; letter-spacing: -.035em; }
html[data-kv-design="magento"] .mgx-std__k { font-weight: 800; letter-spacing: -.03em; }
html[data-kv-design="magento"] .mgx-ftr__col h2 { font-weight: 700; font-size: 15px; letter-spacing: -.005em; }
/* one plugin on sale: spotlight layouts instead of a lonely third of the grid */
@media (min-width: 900px) {
  html[data-kv-design="magento"] .mgx-grid:has(> .mgx-card:only-child) { grid-template-columns: minmax(0, 1fr); }
  html[data-kv-design="magento"] .mgx-card:only-child { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 28px; align-items: stretch; padding: 14px; }
  html[data-kv-design="magento"] .mgx-card:only-child .mgx-card__shot { aspect-ratio: auto; height: 100%; min-height: 300px; }
  html[data-kv-design="magento"] .mgx-card:only-child .mgx-card__body { justify-content: center; padding: 18px 18px 18px 0; }
  html[data-kv-design="magento"] .mgx-shots__grid:has(> .mgx-shot:only-child) { grid-template-columns: minmax(0, 960px); justify-content: center; }
}

/* =====================================================================================================================
   Sales design (swhost 2026-11-12). Recoloured from the 20261907 sales design (luminance-matched orange / warm charcoal) for marks and large fills; #C34506
   behind white button text (5.0:1) and #AD3A00 for orange text on white (6.2:1). Classes .mgz-*, used by magento/home.tpl and
   magento/lockup.tpl only. This stylesheet loads only on the Magento host.
   ===================================================================================================================== */
html[data-kv-plat="magento"] {
  --brand: #D64700; --brand-700: #C34506; --brand-800: #A03906; --brand-ink: #AD3A00; --brand-2: #FF6B21; --brand-2-rgb: 24, 158, 255;
  --brand-rgb: 8, 112, 255; --brand-ring: rgba(214, 71, 0, .24); --brand-glow: rgba(214, 71, 0, .38); --link: #AD3A00;
  --brand-grad: linear-gradient(135deg, #D64700 0%, #FF6B21 100%);
}
html[data-kv-design="magento"] { --deep: #C34506; --deep-700: #A03906; --plum: #1D1A18; --mgz-dark: #191714; --mgz-dark-2: #272420; --mgz-ink-deep: #AD3A00; }
html[data-kv-design="magento"] .mgx-eyebrow { color: var(--mgz-ink-deep); }
html[data-kv-design="magento"] .mgx-h2 em, html[data-kv-design="magento"] .mgx-std__h em { color: var(--mgz-ink-deep); }

/* lockup: kavio labs | for [Magento] */
.mgz-lock { align-items: center; gap: 12px; }
.mgz-lock .logo__img { height: 24px; }
.mgz-lock__sep { width: 1px; height: 28px; background: var(--line-2); flex: none; }
.mgz-lock__for { font: 500 14px/1 var(--font); color: var(--ink-3); letter-spacing: .01em; }
/* Brand Hub (Logo > How to use): full logo at least 100 px wide (22 px tall = 103 px), clear space = half the signet height on every side;
   below 560 px the name is shown as plain text instead of an undersized logo */
.mgz-lock__name { display: inline; font: 800 19px/1 var(--display); color: var(--ink); letter-spacing: -.01em; }
.mgz-lock__name sup { font-size: .5em; font-weight: 600; margin-left: 1px; color: var(--ink-3); vertical-align: super; }
@media (max-width: 1099px) { .mgz-lock { gap: 11px; }  }
@media (max-width: 559px) { .mgz-lock { gap: 7px; } .mgz-lock .logo__img { height: 17px; } .mgz-lock__sep { height: 20px; } .mgz-lock__for { font-size: 12px; } .mgz-lock__name { font-size: 16px; } }
@media (max-width: 374px) { .mgz-lock__for, .mgz-lock__sep { display: none; } }

/* buttons */
.mgz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 1.5px solid transparent;
  border-radius: 999px; font: 700 15px/1.1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.mgz-btn:hover { text-decoration: none; transform: translateY(-1px); }
.mgz-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand); }
.mgz-btn--primary { background: #C34506; border-color: #C34506; color: #fff; box-shadow: 0 8px 22px rgba(195, 69, 6, .32); }
.mgz-btn--primary:hover { background: #A03906; border-color: #A03906; color: #fff; }
.mgz-btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .32); color: #fff; }
.mgz-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); color: #fff; }
.mgz-btn--line { background: #fff; border-color: var(--line-2); color: var(--ink); }
.mgz-btn--line:hover { border-color: var(--mgz-ink-deep); color: var(--mgz-ink-deep); }
.mgz-btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.mgz-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.mgz-price { display: inline-flex; align-items: baseline; gap: 6px; font: 800 24px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.mgz-price small { font: 500 12.5px/1.2 var(--font); color: var(--ink-3); letter-spacing: 0; }
.mgz-price--lg { font-size: 36px; }

/* hero */
.mgz-hero { position: relative; overflow: hidden; color: #fff; padding: 64px 0 72px;
  background: radial-gradient(900px 520px at 88% -10%, rgba(255, 107, 33, .30), transparent 62%), radial-gradient(700px 520px at -8% 110%, rgba(214, 71, 0, .32), transparent 60%), linear-gradient(180deg, var(--mgz-dark) 0%, var(--mgz-dark-2) 100%); }
.mgz-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.mgz-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); grid-template-rows: auto auto; column-gap: 56px; row-gap: 0; align-items: end; }
.mgz-hero__copy { grid-column: 1; grid-row: 1; }
.mgz-hero__act { grid-column: 1; grid-row: 2; align-self: start; }
.mgz-hero__picks { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.mgz-price__v { display: inline; }
.mgz-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  background: rgba(255, 255, 255, .06); font: 600 13.5px/1.2 var(--font); color: #FDDFD1; }
.mgz-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 4px rgba(61, 220, 151, .18); flex: none; }
html[data-kv-design="magento"] .mgz-hero__h { margin: 0 0 20px; font: 800 clamp(36px, 4.6vw, 60px)/1.04 var(--display); letter-spacing: -.035em; color: #fff; }
.mgz-hero__h em { font-style: normal; background: linear-gradient(90deg, #FF7F3F 0%, #FFB996 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mgz-hero__lede { max-width: 600px; margin: 0 0 30px; font-size: 18.5px; line-height: 1.6; color: #EDCEBF; }
.mgz-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.mgz-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: #E8C2AF; }
.mgz-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.mgz-hero__facts .ico { color: #FF9865; }
.mgz-hero__picks { display: grid; gap: 16px; }
.mgz-pick { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 28px 60px rgba(13, 12, 11, .45); transition: transform .2s, box-shadow .2s; }
.mgz-pick:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 34px 70px rgba(13, 12, 11, .55); }
.mgz-pick__img { display: block; position: relative; overflow: hidden; background: #1D1A17; min-height: 150px; }
.mgz-pick__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; transform: scale(1.62); transform-origin: 0 45%; }
.mgz-pick__body { display: flex; flex-direction: column; padding: 18px 20px 18px; min-width: 0; }
.mgz-pick__k { margin: 0 0 4px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mgz-ink-deep); }
html[data-kv-design="magento"] .mgz-pick__name { margin: 0 0 6px; font: 800 20px/1.15 var(--display); letter-spacing: -.02em; }
.mgz-pick__name a { color: var(--ink); text-decoration: none; }
.mgz-pick__name a:hover { color: var(--mgz-ink-deep); }
.mgz-pick__sum { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.mgz-pick__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }

/* strip under the hero */
.mgz-strip { background: #fff; border-bottom: 1px solid var(--line); }
.mgz-strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 auto; padding-top: 22px; padding-bottom: 22px; list-style: none; }
.mgz-strip__list li { display: flex; flex-direction: column; gap: 2px; padding: 0 24px; border-left: 1px solid var(--line); }
.mgz-strip__list li:first-child { border-left: 0; padding-left: 0; }
.mgz-strip__list b { font: 800 16px/1.3 var(--display); color: var(--ink); }
.mgz-strip__list li > span { font-size: 14px; color: var(--ink-3); }

/* plugin rows */
.mgz-rows { display: grid; gap: 40px; }
.mgz-row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--mgx-sh); }
.mgz-row--flip .mgz-row__img { order: 2; }
.mgz-row__img { display: block; overflow: hidden; border-radius: 18px; background: #1D1A17; box-shadow: 0 18px 44px rgba(48, 43, 39, .22); }
.mgz-row__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s; }
.mgz-row__img:hover img { transform: scale(1.02); }
.mgz-row__body { min-width: 0; }
.mgz-row__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
html[data-kv-design="magento"] .mgz-row__name { margin: 0; font: 800 30px/1.1 var(--display); letter-spacing: -.025em; }
.mgz-row__name a { color: var(--ink); text-decoration: none; }
.mgz-row__name a:hover { color: var(--mgz-ink-deep); }
.mgz-row__for { display: inline-block; margin: 0 0 14px; padding: 7px 12px; border-radius: 10px; background: var(--lav); font-size: 14px; color: var(--ink-2); }
.mgz-row__for b { color: var(--mgz-ink-deep); }
.mgz-row__hook { margin: 0 0 16px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.mgz-ticks { display: grid; gap: 9px; margin: 0 0 24px; padding: 0; list-style: none; }
.mgz-ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.mgz-ticks .ico { flex: none; margin-top: 2px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #FDEBE2; color: var(--mgz-ink-deep); }
.mgz-row__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.mgz-row__price { display: flex; flex-direction: column; gap: 6px; }
.mgz-row__price small { font-size: 13px; color: var(--ink-3); }
.mgz-row__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* trust */
.mgz-trust { padding: 84px 0; color: #fff; background: radial-gradient(700px 400px at 100% 0%, rgba(255, 107, 33, .22), transparent 60%), linear-gradient(180deg, var(--mgz-dark) 0%, #25211E 100%); }
.mgz-trust__head { max-width: 760px; margin-bottom: 40px; }
html[data-kv-design="magento"] .mgz-eyebrow--on { color: #FFAE85; }
html[data-kv-design="magento"] .mgz-trust__h { margin: 0; font: 800 clamp(28px, 3.4vw, 44px)/1.1 var(--display); letter-spacing: -.03em; color: #fff; }
.mgz-trust__h em { font-style: normal; color: #FF9865; }
.mgz-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.mgz-trust__grid li { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: rgba(255, 255, 255, .05); }
.mgz-trust__ico .ico { width: 22px; height: 22px; }
.mgz-trust__ico { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: #D64700; color: #fff; box-shadow: 0 10px 24px rgba(214, 71, 0, .4); }
html[data-kv-design="magento"] .mgz-trust__grid h3 { margin: 0 0 8px; font: 800 18px/1.25 var(--display); color: #fff; }
.mgz-trust__grid p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: #EAC7B6; }
.mgz-trust__grid a { margin-top: auto; font-weight: 600; font-size: 14px; color: #FFAE85; text-decoration: none; }
.mgz-trust__grid a:hover { color: #fff; text-decoration: underline; }
.mgz-trust__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 30px; padding: 18px 22px; border-radius: 18px; background: #fff; color: var(--ink-2); }
.mgz-pays { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.mgz-pays img { display: block; width: auto; height: 26px; }
.mgz-pays li:first-child img { height: 15px; }
.mgz-pays__stripe img { height: 25px; }
.mgz-trust__co { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; }
.mgz-trust__co > span { display: inline-flex; align-items: center; gap: 7px; }
.mgz-trust__co .ico { color: var(--mgz-ink-deep); }

/* comparison */
.mgz-cmp__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--mgx-sh); }
.mgz-cmp__t { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.mgz-cmp__t th, .mgz-cmp__t td { padding: 16px 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.mgz-cmp__t tbody th { width: 20%; font-weight: 600; color: var(--ink-3); font-size: 14px; }
.mgz-cmp__t td { width: 40%; color: var(--ink); }
.mgz-cmp__t thead th { padding-top: 22px; padding-bottom: 18px; background: var(--lav); }
.mgz-cmp__p { display: flex; align-items: center; gap: 10px; font: 800 18px/1.2 var(--display); }
.mgz-cmp__p a { color: var(--ink); text-decoration: none; }
.mgz-cmp__p a:hover { color: var(--mgz-ink-deep); }
.mgz-cmp__t .mgz-price { font-size: 20px; }
.mgz-cmp__t tfoot th, .mgz-cmp__t tfoot td { border-bottom: 0; padding-top: 18px; padding-bottom: 22px; }

/* closing call to action */
.mgz-final { padding: 0 0 88px; }
.mgz-final__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 44px 48px; border-radius: 28px; color: #fff;
  background: radial-gradient(600px 300px at 100% 0%, rgba(255, 107, 33, .45), transparent 60%), linear-gradient(120deg, #C34506 0%, #7E2F07 100%); box-shadow: 0 30px 70px rgba(138, 50, 6, .28); }
html[data-kv-design="magento"] .mgz-final__h { margin: 0 0 8px; font: 800 clamp(26px, 3vw, 38px)/1.1 var(--display); letter-spacing: -.03em; color: #fff; }
.mgz-final__in p { max-width: 560px; margin: 0; font-size: 16.5px; line-height: 1.55; color: #FDE3D6; }
.mgz-final__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.mgz-final .mgz-btn--primary { background: #fff; border-color: #fff; color: #A03906; box-shadow: 0 10px 26px rgba(27, 24, 22, .3); }
.mgz-final .mgz-btn--primary:hover { background: #FEEFE8; border-color: #FEEFE8; color: #782B05; }

/* responsive */
@media (max-width: 1179px) { .mgz-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1179px) {
  .mgz-hero { padding: 48px 0 56px; }
  .mgz-hero__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .mgz-hero__copy, .mgz-hero__act, .mgz-hero__picks { grid-column: 1; grid-row: auto; }
  .mgz-hero__copy { order: 1; } .mgz-hero__act { order: 2; } .mgz-hero__picks { order: 3; }
  .mgz-hero__picks { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .mgz-pick { grid-template-columns: 1fr; }
  .mgz-pick__img { aspect-ratio: 16 / 9; min-height: 0; }
  .mgz-pick__img img { transform: none; }
}
@media (max-width: 1023px) {
  .mgz-row { grid-template-columns: 1fr; gap: 28px; }
  .mgz-row--flip .mgz-row__img { order: 0; }
  .mgz-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .mgz-strip__list li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 639px) {
  .mgz-hero { padding: 36px 0 44px; }
  .mgz-hero__eyebrow { font-size: 12.5px; padding: 6px 12px; }
  .mgz-hero__lede { font-size: 16.5px; margin-bottom: 24px; }
  .mgz-hero__ctas .mgz-btn { flex: 1 1 100%; }
  .mgz-hero__picks { order: 2; } .mgz-hero__act { order: 3; }
  .mgz-hero__picks { grid-template-columns: 1fr; gap: 14px; }
  .mgz-pick { grid-template-columns: 1fr; }
  .mgz-pick__img { aspect-ratio: 16 / 10; min-height: 0; }
  .mgz-pick__img img { transform: none; }
  .mgz-hero__eyebrow { display: none; }
  html[data-kv-design="magento"] .mgz-hero__h { font-size: 34px; }
  .mgz-hero__lede { margin-bottom: 4px; }
  .mgx-hdr .mgx-round:not(.mgx-menu), .mgx-hdr .mgx-act__link { display: none; }
  .mgz-pick__body { padding: 14px; }
  .mgz-pick__k { font-size: 10.5px; }
  html[data-kv-design="magento"] .mgz-pick__name { font-size: 17px; }
  .mgz-pick__sum { display: none; }
  .mgz-pick__foot { flex-wrap: wrap; gap: 10px; }
  .mgz-pick .mgz-price { font-size: 21px; }
  .mgz-strip__list { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .mgz-strip__list li { padding: 0 0 0 12px; border-left: 2px solid var(--brand); }
  .mgz-strip__list li:first-child, .mgz-strip__list li:nth-child(3) { padding-left: 12px; border-left: 2px solid var(--brand); }
  .mgz-strip__list b { font-size: 14.5px; } .mgz-strip__list li > span { font-size: 13px; }
  .mgz-row { padding: 16px; border-radius: 22px; }
  html[data-kv-design="magento"] .mgz-row__name { font-size: 24px; }
  .mgz-row__hook { font-size: 16px; }
  .mgz-price--lg { font-size: 30px; }
  .mgz-row__ctas, .mgz-row__ctas .mgz-btn { width: 100%; }
  .mgz-trust { padding: 56px 0; }
  .mgz-trust__grid { grid-template-columns: 1fr; }
  .mgz-trust__foot { padding: 16px; }
  .mgz-cmp__wrap { border-radius: 18px; }
  .mgz-cmp__t { min-width: 0; table-layout: fixed; }
  .mgz-cmp__t th, .mgz-cmp__t td { padding: 11px 8px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
  .mgz-cmp__t tbody th { width: 27%; font-size: 12.5px; padding-left: 12px; }
  .mgz-cmp__t td { width: auto; }
  .mgz-cmp__t thead th:first-child, .mgz-cmp__t tfoot th { width: 27%; }
  .mgz-cmp__p { font-size: 14.5px; gap: 6px; }
  .mgz-cmp__p .pi { display: none; }
  .mgz-cmp__t .mgz-price { font-size: 17px; }
  .mgz-cmp__t tfoot .mgz-btn { white-space: normal; min-height: 38px; padding: 6px 12px; font-size: 13px; line-height: 1.2; }
  .mgz-final { padding-bottom: 56px; }
  .mgz-final__in { padding: 28px 20px; border-radius: 22px; }
  .mgz-final__ctas, .mgz-final__ctas .mgz-btn { width: 100%; white-space: normal; text-align: center; }
}

/* =====================================================================================================================
   Magento host (magento agent 2026-11-13): brand tokens and the coming-soon blocks of magento/home.tpl (.mgz-board, .mgz-tag,
   .mgz-spot, .mgz-fact, .mgz-notify, .mgz-std). Magento orange #F26322 for marks, dots and large fills, with ink text on it
   (6.6:1); #B4400C for orange text on white (5.5:1); warm charcoal grounds. "Magento" is set as text (no logo file).
   ===================================================================================================================== */
html[data-kv-plat="magento"] {
  --brand: #F26322; --brand-700: #FF7A3A; --brand-800: #FF8B4F; --brand-on: #101418; --brand-ink: #B4400C; --link: #B4400C;
  --brand-rgb: 242, 99, 34; --brand-2: #FF8B3D; --brand-2-rgb: 255, 139, 61; --brand-ring: rgba(242, 99, 34, .24); --brand-glow: rgba(242, 99, 34, .38);
  --brand-grad: linear-gradient(135deg, #F26322 0%, #FF8B3D 100%);
}
html[data-kv-design="magento"] { --mgz-ink-orange: #B4400C; --mgz-char: #1F1E1D; --mgz-char-2: #2C2A28; }
html[data-kv-design="magento"] .mgx-eyebrow { color: var(--mgz-ink-orange); }
html[data-kv-design="magento"] .mgx-h2 em { color: var(--mgz-ink-orange); }
.mgz-eyebrow--on { color: #FFB27A !important; }

/* buttons on the Magento host: orange fill with ink text (on-brand, 6.6:1), charcoal hover */
.mgz-btn--primary { background: #F26322; border-color: #F26322; color: #141210; box-shadow: 0 8px 22px rgba(242, 99, 34, .30); }
.mgz-btn--primary:hover { background: #FF7A3A; border-color: #FF7A3A; color: #141210; }
.mgz-btn--line:hover { border-color: var(--mgz-ink-orange); color: var(--mgz-ink-orange); }
.mgz-dot { width: 8px; height: 8px; border-radius: 50%; background: #F26322; box-shadow: 0 0 0 4px rgba(242, 99, 34, .22); flex: none; }

/* hero ground: warm charcoal with an orange glow */
.mgz-hero { background: radial-gradient(900px 520px at 88% -10%, rgba(242, 99, 34, .26), transparent 62%), radial-gradient(700px 520px at -8% 110%, rgba(255, 139, 61, .16), transparent 60%), linear-gradient(180deg, #1F1E1D 0%, #2C2A28 100%); }
.mgz-hero__h em { color: #FF9A5C; }
.mgz-hero__eyebrow { color: #F3E3D8; }

/* release board (hero, right) */
.mgz-board { position: relative; background: #fff; color: var(--ink); border-radius: 22px; padding: 26px 26px 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .06); }
.mgz-board::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #F26322, #FF8B3D); }
.mgz-board__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.mgz-board__k { font: 800 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mgz-board__live { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--font); color: var(--ink-3); }
.mgz-board__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mgz-board__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mgz-board__name { font: 800 19px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.mgz-board__name small { display: block; margin-top: 4px; font: 500 13.5px/1.4 var(--font); letter-spacing: 0; color: var(--ink-3); }
.mgz-board__name a { color: inherit; }
.mgz-board__proof { margin: 16px 0 18px; padding: 14px 16px; border-radius: 14px; background: #FFF4EC; border: 1px solid #FBD9C4; }
.mgz-board__proof p { margin: 0; font: 500 14px/1.5 var(--font); color: #4A3A30; }
.mgz-board__proof b { color: #2A1F18; }
.mgz-board__cta { width: 100%; }
.mgz-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 12.5px/1.2 var(--font); white-space: nowrap; }
.mgz-tag--dev { background: #FFE9DB; color: #8A3108; }
.mgz-tag--dev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F26322; }
.mgz-tag--live { background: #E3F4E8; color: #1D6B3A; }

/* first module spotlight */
.mgz-spot { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.mgz-spot__main { padding: 32px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(31, 30, 29, .06); }
.mgz-spot__k { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 13.5px/1.2 var(--font); color: var(--ink-3); }
.mgz-spot__h { margin: 0 0 18px; font: 800 clamp(22px, 2.4vw, 28px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.mgz-ticks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.mgz-ticks li { display: flex; gap: 10px; align-items: flex-start; font: 500 15.5px/1.5 var(--font); color: var(--ink-2); }
.mgz-ticks .ico { flex: none; margin-top: 3px; color: #fff; background: #F26322; border-radius: 50%; padding: 3px; width: 20px; height: 20px; }
.mgz-spot__note { margin: 0; font: 500 13.5px/1.5 var(--font); color: var(--ink-3); }
.mgz-spot__side { display: grid; gap: 14px; }
.mgz-fact { padding: 20px 22px; border-radius: 18px; background: #1F1E1D; color: #EDE6E1; }
.mgz-fact b { display: block; margin-bottom: 6px; font: 800 24px/1.1 var(--display); letter-spacing: -.02em; color: #FF9A5C; }
.mgz-fact span { font: 500 14.5px/1.5 var(--font); }

/* notify band */
.mgz-notify { padding: 72px 0; background: linear-gradient(135deg, #1F1E1D 0%, #34302C 100%); color: #EDE6E1; }
.mgz-notify__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 56px; align-items: center; }
.mgz-notify__h { margin: 6px 0 14px; font: 800 clamp(26px, 3vw, 38px)/1.15 var(--display); letter-spacing: -.02em; color: #fff; }
.mgz-notify__h em { font-style: normal; color: #FF9A5C; }
.mgz-notify__copy p { margin: 0; font: 500 16px/1.6 var(--font); color: #D9CFC8; }
.mgz-notify__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mgz-notify__steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); font: 500 15px/1.4 var(--font); color: #F2ECE7; }
.mgz-notify__steps span { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #F26322; color: #141210; font: 800 14px/1 var(--font); }
.mgz-notify__ctas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* standards list */
.mgz-std { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mgz-std li { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.mgz-std__k { font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mgz-ink-orange); }
.mgz-std h3 { margin: 10px 0 8px; font: 800 18px/1.25 var(--display); color: var(--ink); }
.mgz-std p { margin: 0; font: 500 14.5px/1.55 var(--font); color: var(--ink-2); }

@media (max-width: 1099px) {
  .mgz-spot { grid-template-columns: 1fr; }
  .mgz-spot__side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mgz-notify__in { grid-template-columns: 1fr; }
  .mgz-std { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mgz-spot__side { grid-template-columns: 1fr; }
  .mgz-spot__main { padding: 22px; }
  .mgz-board { padding: 22px 18px 18px; }
  .mgz-board__name { font-size: 17px; }
  .mgz-board__row { flex-wrap: wrap; }
  .mgz-notify { padding: 52px 0; }
}
@media (max-width: 559px) {
  .mgz-std { grid-template-columns: 1fr; }
  .mgz-board__head { flex-wrap: wrap; }
}
.mgz-ftr-note p a { color: var(--mgz-ink-orange); font-weight: 600; }
.mgz-board__name small { color: var(--ink-3) !important; }