/* Native theme shell. Keep the quote action inside the same drawer breakpoint. */
@media (max-width:1024px) {
  .kt-site-header__actions .kt-site-header__cta { display:none!important; }
}

/* The Contact form is on a light surface, unlike legacy dark RFQ sections. */
.kt-local-contact .kt-form-shell { min-width:0;margin-top:24px;padding:0;border:0;background:transparent;color:var(--kt-text); }
.kt-local-contact .kt-form-shell label,
.kt-local-contact .kt-form-shell .ff-el-input--label { color:var(--kt-text)!important; }
.kt-local-contact .kt-form-shell .ff-el-form-control { box-sizing:border-box;min-width:0;min-height:48px;background:var(--kt-white)!important;color:var(--kt-text)!important;border:1px solid var(--kt-line)!important;font-size:16px; }
.kt-local-contact .kt-form-shell .ff-el-form-control::placeholder { color:var(--kt-muted);opacity:1; }
.kt-local-contact .kt-form-shell .ff-btn-submit { min-height:48px;padding:12px 24px;color:var(--kt-white)!important; }
.kt-local-contact .kt-form-shell :is(input,select,textarea,button):focus-visible { outline:2px solid var(--kt-text);outline-offset:3px; }

/* Footer legal row. The footer is site chrome (.kt-shell-chrome), outside every
   page's <main>, so neither the legacy rule (excluded from chrome) nor the
   per-page .kt-local-shell rules reach it. The consent plugin appends
   "Cookie settings" here at runtime. */
.kt-footer.kt-shell-chrome .kt-footer__legal { display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 24px; }
.kt-footer.kt-shell-chrome .kt-footer__legal a { color:color-mix(in srgb,var(--kt-on-dark,#f8fbf9) 72%,transparent);text-decoration:none; }
.kt-footer.kt-shell-chrome .kt-footer__legal a:is(:hover,:focus-visible) { color:var(--kt-on-dark,#f8fbf9);text-decoration:underline; }
@media (max-width:720px) {
  .kt-footer.kt-shell-chrome .kt-footer__legal { gap:4px 20px; }
  .kt-footer.kt-shell-chrome .kt-footer__legal a { display:inline-flex;align-items:center;min-height:44px; }
}

/* Final CTA: KEYTOP's own stitching line (WP media 2433) under a dark scrim.
   The scrim is heaviest behind the heading column so text contrast does not
   depend on the photo. !important because the home page's packaged rule sets
   the background shorthand with !important. */
main.kt-shell-host section.kt-section--cta {
  background-image:
    linear-gradient(90deg, rgb(24 25 27 / .95) 0%, rgb(24 25 27 / .9) 45%, rgb(24 25 27 / .84) 100%),
    url("/wp-content/uploads/2026/08/keytop-shoes-factory-32-optimized.webp") !important;
  background-size:cover !important;background-position:center 40% !important;background-repeat:no-repeat !important;
}
@media (max-width:720px) {
  main.kt-shell-host section.kt-section--cta {
    background-image:
      linear-gradient(180deg, rgb(24 25 27 / .93), rgb(24 25 27 / .9)),
      url("/wp-content/uploads/2026/08/keytop-shoes-factory-32-optimized.webp") !important;
  }
}

/* Header fit, 1025px and up. With every nav item plus the language switcher
   and the quote button, the row overflowed below ~1280px in English and even
   at 1440px in Italian and Japanese (translated button labels run past 40
   characters). The button shrinks and wraps only when the row runs out of room; between 1025 and
   1279px the button is hidden, as it already is at 1024px and below. The quote
   form stays one tap away through the floating action and every page's CTA. */
@media (min-width:1025px) {
  /* Side columns size to their content, so the button keeps one line when it fits. */
  .kt-site-header.kt-shell-chrome .kt-site-header__inner { grid-template-columns:auto minmax(max-content,1fr) auto; }
  .kt-site-header.kt-shell-chrome .kt-site-nav { justify-self:center; }
  .kt-site-header.kt-shell-chrome .kt-site-header__cta { flex:0 1 auto;min-width:9.5em;white-space:normal;text-align:center;line-height:1.25; }
}
@media (min-width:1025px) and (max-width:1279px) {
  .kt-site-header.kt-shell-chrome .kt-site-header__actions .kt-site-header__cta { display:none!important; }
  .kt-site-header.kt-shell-chrome .kt-site-header__inner { gap:16px; }
  .kt-site-header.kt-shell-chrome .kt-site-nav__link { padding:8px 8px; }
}

/* casual-shoes channel route cards: four routes in the
   3-column .kt-fit-grid left one card alone on a second row. Two columns
   from tablet up, one on phones; mark, text and arrow share one left edge. */
main.shipb2b-packaged--products--casual-shoes.kt-shell-host .kt-solution-list.kt-fit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
main.shipb2b-packaged--products--casual-shoes.kt-shell-host .kt-solution-list.kt-fit-grid .kt-solution-row { align-items:flex-start;text-align:left;min-height:0; }
main.shipb2b-packaged--products--casual-shoes.kt-shell-host .kt-solution-list.kt-fit-grid .kt-solution-row__arrow { margin-top:auto;align-self:flex-start; }
@media (max-width:720px) {
  main.shipb2b-packaged--products--casual-shoes.kt-shell-host .kt-solution-list.kt-fit-grid { grid-template-columns:1fr; }
}

/* Phones: translated button labels and headings (es, ru) run longer than the
   English the layout was drawn for; a nowrap button widened the whole final
   CTA on /es/oem-odm/ by 110px. Let them wrap inside the column. */
@media (max-width:720px) {
  main.kt-shell-host .kt-btn { white-space:normal;max-width:100%;text-align:center; }
  main.kt-shell-host :is(h1,h2,h3) { overflow-wrap:break-word;hyphens:auto; }
}

/* Solutions breadcrumbs (solutions, private-label, ecommerce-brands) mark their
   links .kt-text-link, which adds a "→" before every "/" separator and
   renders them 14px/750. Match the plain breadcrumbs on every other page. */
main.kt-shell-host .kt-breadcrumb .kt-text-link { font-size:inherit;font-weight:inherit;justify-content:center; }
main.kt-shell-host .kt-breadcrumb .kt-text-link::after { content:none; }