/* Magnet Studio M1.3 — screenshot tuning pass. */

html { scroll-padding-top: 92px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Header polish */
.ms-header {
  min-height: 70px;
  padding-block: 9px;
  box-shadow: 0 8px 28px rgba(31, 43, 79, .065);
}
.ms-brand:focus-visible,
.ms-nav a:focus-visible,
.ms-header__actions a:focus-visible,
.ms-menu:focus-visible {
  outline: 3px solid rgba(49,88,255,.30);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Hero: keep the premium split, improve the secondary action and rhythm. */
.ms-app:has(#smart-cut) .ms-hero { min-height: 590px; }
.ms-app:has(#smart-cut) .ms-hero__copy { padding: 68px 52px 96px 52px; }
.ms-app:has(#smart-cut) .ms-actions { gap: 14px; margin-top: 28px; }
.ms-app:has(#smart-cut) .ms-actions .ms-button:nth-child(2) {
  color: var(--m13-ink) !important;
  border: 1px solid rgba(18,30,65,.12) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 9px 22px rgba(31,43,79,.07) !important;
}
.ms-app:has(#smart-cut) .ms-actions .ms-button:nth-child(2):hover {
  background: #fff !important;
  box-shadow: 0 14px 28px rgba(31,43,79,.10) !important;
}
.ms-app:has(#smart-cut) .ms-proof-pills { margin-top: 24px; gap: 10px 20px; }
.ms-app:has(#smart-cut) .ms-benefits {
  padding-block: 24px 32px;
  margin-bottom: 34px;
}
.ms-app:has(#smart-cut) .ms-benefits article { justify-content: center; }

/* Smart Cut: larger visual steps and clearer final manufactured magnet. */
#smart-cut {
  min-height: 320px;
  padding: 38px 46px 42px;
  gap: clamp(36px, 4vw, 70px);
  border-radius: 30px;
}
#smart-cut .ms-transform { gap: 26px; }
#smart-cut .ms-transform > article,
#smart-cut .ms-transform__flow {
  min-height: 214px;
  background-size: 88% auto;
}
#smart-cut .ms-transform > article:first-child { background-size: 82% auto; }
#smart-cut .ms-transform > article:last-child { background-size: 94% auto; }
#smart-cut .ms-transform > article::after,
#smart-cut .ms-transform__flow::after {
  bottom: -14px;
  font-size: 11px;
}
#smart-cut .ms-section-title h2::after { font-size: clamp(30px, 2.65vw, 42px); }
#smart-cut .ms-section-title p::after { max-width: 410px; font-size: 14px; }

/* Product cards: more breathing room, no text-arrow collisions. */
#smart-cut + .ms-section { padding: 62px 0 96px; }
#smart-cut + .ms-section .ms-section-title { margin-bottom: 26px; }
#smart-cut + .ms-section .ms-product-grid { gap: 20px; }
#smart-cut + .ms-section .ms-product-grid > article {
  min-height: 326px;
  padding: 0 20px 22px;
  border-radius: 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}
#smart-cut + .ms-section .ms-product-grid > article:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(31,43,79,.10);
}
#smart-cut + .ms-section .ms-product-grid__art {
  min-height: 212px;
  margin-inline: -20px;
  background-size: 84% auto;
}
#smart-cut + .ms-section .ms-product-grid h3 { margin-top: 14px; font-size: 19px; }
#smart-cut + .ms-section .ms-product-grid p {
  min-height: 42px;
  padding-right: 44px;
  font-size: 12px;
  line-height: 1.5;
}
#smart-cut + .ms-section .ms-product-grid > article > a {
  position: absolute;
  right: 18px;
  bottom: 18px;
  margin: 0;
}
#smart-cut + .ms-section .ms-product-grid > article { position: relative; }

/* Magnetic sheet story: controlled headline and more dimensional product composition. */
.ms-app:has(#smart-cut) .ms-sheet {
  min-height: 570px;
  padding: 68px 70px;
  grid-template-columns: minmax(380px,.82fr) minmax(540px,1.18fr);
  gap: 46px;
  border-radius: 34px;
}
.ms-app:has(#smart-cut) .ms-sheet h2 { font-size: 0; }
.ms-app:has(#smart-cut) .ms-sheet h2::after {
  content: 'Více motivů.\A Jeden arch.\A Méně odpadu.';
  display: block;
  white-space: pre-line;
  max-width: 520px;
  color: var(--m13-ink);
  font-size: clamp(50px, 4.6vw, 72px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.052em;
}
.ms-app:has(#smart-cut) .ms-sheet p { max-width: 450px; font-size: 15px; }
.ms-app:has(#smart-cut) .ms-sheet__paper {
  min-height: 410px;
  transform: none;
  filter: drop-shadow(0 28px 34px rgba(39,52,92,.17));
}
.ms-app:has(#smart-cut) .ms-sheet__paper::before { transform: translate(-4%,-2%) rotate(-7deg); }
.ms-app:has(#smart-cut) .ms-sheet__paper::after { transform: translate(8%,4%) rotate(4deg); }

/* Inspiration: retain the open editorial grid, add subtle affordance. */
.ms-app:has(#smart-cut) .ms-use-grid { gap: 24px; }
.ms-app:has(#smart-cut) .ms-use-grid article {
  min-height: 370px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ms-app:has(#smart-cut) .ms-use-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 54px rgba(31,43,79,.10);
}

/* Final CTA: button belongs to the message, never over the imagery. */
.ms-app:has(#smart-cut) .ms-final {
  min-height: 440px;
  padding: 64px 66px;
  display: grid;
  grid-template-columns: minmax(420px,.88fr) minmax(520px,1.12fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 40px;
  border-radius: 34px;
}
.ms-app:has(#smart-cut) .ms-final > div:first-child {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.ms-app:has(#smart-cut) .ms-final > .ms-button {
  grid-column: 1;
  grid-row: 2;
  position: static !important;
  inset: auto !important;
  justify-self: start;
  align-self: start;
  margin: 24px 0 0 !important;
  transform: none !important;
}
.ms-app:has(#smart-cut) .ms-final > .ms-button:hover { transform: translateY(-2px) !important; }

/* Unified light footer on every route. */
.ms-footer {
  width: min(1420px, calc(100vw - 40px));
  margin: 76px auto 20px;
  padding: 46px 10px 54px;
  color: var(--m13-ink) !important;
  border-top: 1px solid rgba(18,30,65,.10);
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ms-footer > div { color: var(--m13-ink) !important; }
.ms-footer p,
.ms-footer a,
.ms-footer small,
.ms-footer span { color: #667087 !important; }
.ms-footer a:hover { color: var(--m13-blue) !important; }
.ms-footer .ms-brand b,
.ms-footer .ms-brand small {
  display: inline !important;
  color: var(--m13-ink) !important;
  font-size: 14px !important;
  opacity: 1 !important;
}
.ms-footer .ms-brand > span:last-child { display: flex !important; gap: 5px !important; }
.ms-footer > div:first-child p { max-width: 390px; }
.ms-footer > div:last-child span { font-size: 0 !important; }
.ms-footer > div:last-child span::after {
  content: 'Magnet Studio M1.3';
  font-size: 12px;
  font-weight: 700;
  color: #667087;
}

/* Studio: canvas-first, fewer nested panels and a real contour preview. */
body:has(.ms-studio-page) { background: #f7f8fc; }
.ms-studio-page { margin-top: 26px; }
.ms-studio-head {
  padding: 30px 30px 28px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(120deg,#f8faff,#eef2ff 68%,#fbf6ff);
}
.ms-studio-layout {
  grid-template-columns: 82px minmax(0,1fr) 330px;
  gap: 14px;
  padding: 14px;
  border-radius: 0 0 28px 28px;
  background: #f0f3f9;
}
.ms-tool-rail,
.ms-canvas-panel,
.ms-inspector {
  border: 1px solid rgba(18,30,65,.08);
  box-shadow: 0 12px 32px rgba(31,43,79,.06);
}
.ms-tool-rail { padding: 10px 8px; border-radius: 22px; background: rgba(255,255,255,.82); }
.ms-tool-rail button { min-height: 78px; border-radius: 16px; }
.ms-canvas-panel { border-radius: 22px; background: #fff; overflow: hidden; }
.ms-canvas-toolbar { padding: 17px 18px; }
.ms-canvas { min-height: 620px; }
.ms-canvas .ms-magnet-preview {
  width: min(440px,62%);
  filter: none;
  transform: none;
}
.ms-canvas .ms-magnet-preview::after { display: none !important; }
.ms-canvas .ms-magnet-preview > span {
  min-height: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ms-canvas .ms-magnet-preview > span::before { display: none; }
.ms-canvas .ms-magnet-preview img {
  max-height: 410px;
  filter:
    drop-shadow(5px 0 0 #fff)
    drop-shadow(-5px 0 0 #fff)
    drop-shadow(0 5px 0 #fff)
    drop-shadow(0 -5px 0 #fff)
    drop-shadow(0 18px 16px rgba(44,58,94,.22));
}
.ms-inspector {
  padding: 12px 14px;
  border-radius: 22px;
  background: #fff;
}
.ms-inspector > section {
  margin: 0 !important;
  padding: 16px 4px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(18,30,65,.09) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ms-inspector > section:first-child { padding-top: 4px !important; }
.ms-inspector > section:last-child { border-bottom: 0 !important; padding-bottom: 4px !important; }
.ms-upload { border-radius: 16px; background: #fafbff; }
.ms-order-card { background: transparent !important; }
.ms-order-card .ms-button { width: 100%; }
body:has(.ms-studio-page) .ms-footer { margin-top: 34px; }

@media (max-width: 1120px) {
  .ms-app:has(#smart-cut) .ms-sheet,
  .ms-app:has(#smart-cut) .ms-final { grid-template-columns: 1fr 1fr; padding-inline: 42px; }
  .ms-studio-layout { grid-template-columns: 74px minmax(0,1fr) 300px; }
}

@media (max-width: 900px) {
  .ms-app:has(#smart-cut) .ms-hero__copy { padding: 48px 26px 38px; }
  #smart-cut { padding: 34px 24px 46px; }
  #smart-cut .ms-transform > article,
  #smart-cut .ms-transform__flow { min-height: 230px; }
  .ms-app:has(#smart-cut) .ms-sheet,
  .ms-app:has(#smart-cut) .ms-final { grid-template-columns: 1fr; }
  .ms-app:has(#smart-cut) .ms-final > div:first-child,
  .ms-app:has(#smart-cut) .ms-final > .ms-button { grid-column: 1; }
  .ms-studio-layout { grid-template-columns: 70px minmax(0,1fr); }
  .ms-inspector { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .ms-header { min-height: 64px; }
  .ms-app:has(#smart-cut) .ms-benefits { padding-inline: 8px; }
  #smart-cut + .ms-section .ms-product-grid__art { min-height: 224px; }
  .ms-app:has(#smart-cut) .ms-sheet,
  .ms-app:has(#smart-cut) .ms-final { padding: 44px 24px; }
  .ms-app:has(#smart-cut) .ms-sheet h2::after { font-size: 48px; }
  .ms-footer { grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; }
  .ms-studio-layout { display: block; padding: 10px; }
  .ms-tool-rail { margin-bottom: 10px; display: grid; grid-template-columns: repeat(5,1fr); }
  .ms-tool-rail button { min-height: 66px; }
  .ms-canvas { min-height: 470px; }
  .ms-inspector { margin-top: 10px; }
}