/* Equipment catalogue: native tablet/mobile layout.
   Desktop keeps the original 1200 px artboard and autoscale behaviour. */

@media (max-width: 1199.98px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
    background: #3b3b3b;
  }

  body {
    --tt-equipment-page-gutter: clamp(20px, 4vw, 40px);
    --tt-equipment-page-grid:
      linear-gradient(90deg,
        transparent calc(33.333% - .5px),
        rgba(220, 220, 220, .04) calc(33.333% - .5px),
        rgba(220, 220, 220, .04) calc(33.333% + .5px),
        transparent calc(33.333% + .5px)),
      linear-gradient(90deg,
        transparent calc(33.333% + 7.5px),
        rgba(220, 220, 220, .04) calc(33.333% + 7.5px),
        rgba(220, 220, 220, .04) calc(33.333% + 8.5px),
        transparent calc(33.333% + 8.5px)),
      linear-gradient(90deg,
        transparent calc(66.666% - .5px),
        rgba(220, 220, 220, .04) calc(66.666% - .5px),
        rgba(220, 220, 220, .04) calc(66.666% + .5px),
        transparent calc(66.666% + .5px)),
      linear-gradient(90deg,
        transparent calc(66.666% + 7.5px),
        rgba(220, 220, 220, .04) calc(66.666% + 7.5px),
        rgba(220, 220, 220, .04) calc(66.666% + 8.5px),
        transparent calc(66.666% + 8.5px));
  }

  /* Hero, catalogue, request form and footer each paint their own grid.
     A fixed body overlay would sit above opaque card media at browser zoom. */

  .tt-mobile-header {
    position: relative;
    z-index: 1000;
  }

  .tt-stage {
    position: relative;
    z-index: 1;
  }

  html body .tt-stage {
    display: block;
    width: 100%;
    height: auto !important;
    overflow: visible;
  }

  html body .tt-stage .tt-stage__inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    flex: none !important;
    transform: none !important;
  }

  /* Hero */
  body:has(#tt-kits) .tt1700-rent {
    width: 100% !important;
    height: auto !important;
    min-height: 360px;
    padding: 64px var(--tt-equipment-page-gutter) 72px !important;
    overflow: visible;
    box-sizing: border-box;
    background-image: var(--tt-equipment-page-grid) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  .tt1700-rent__logo,
  .tt1700-rent__mail,
  .tt1700-rent__menu {
    display: none !important;
  }

  body:has(#tt-kits) .tt1700-rent__title {
    position: relative !important;
    inset: auto !important;
    display: flex;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    align-items: baseline;
    justify-content: flex-start;
    font-size: clamp(23px, calc(4.3vw + 7.5px), 42px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.055em !important;
    text-align: left;
  }

  .tt1700-rent__title span {
    position: static !important;
  }

  .tt1700-rent__word {
    margin: 0;
  }

  body:has(#tt-kits) .tt1700-rent__subtitle {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 620px) !important;
    margin: 38px 0 0 !important;
    font-size: clamp(14px, 2vw, 17px) !important;
    line-height: 1.55 !important;
    text-align: left;
  }

  /* Catalogue */
  body:has(#tt-kits) #tt-kits.tt-kits {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px var(--tt-equipment-page-gutter) 80px !important;
    overflow: visible !important;
    background-image: none !important;
  }

  body:has(#tt-kits) #tt-kits.tt-kits::before {
    content: none !important;
    display: none !important;
  }

  body:has(#tt-kits) #tt-kits .tt-kits__guide-lines {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background-image: var(--tt-equipment-page-grid) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  body:has(#tt-kits) #tt-kits .tt-kits__guide-lines span {
    display: none !important;
  }

  body:has(#tt-kits) #tt-kits .tt-kits__grid {
    position: relative !important;
    z-index: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 56px 12px !important;
  }

  #tt-kits .tt-kits__card {
    position: relative !important;
    z-index: 1 !important;
    min-height: 480px !important;
  }

  #tt-kits .tt-kits__media,
  #tt-kits .tt-kits__body {
    position: relative !important;
    z-index: 2 !important;
  }

  #tt-kits .tt-kits__media > img {
    position: relative !important;
    z-index: 1 !important;
  }

  #tt-kits .tt-kits__body {
    padding-top: 16px !important;
  }

  #tt-kits .tt-kits__title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #tt-kits .tt-kits__desc {
    margin-top: 7px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  #tt-kits .tt-kits__actions {
    padding-top: 20px !important;
  }

  #tt-kits .tt-kits__btn {
    min-height: 28px !important;
    font-size: 16px !important;
  }

  #tt-kits .tt-kits__btn--doc {
    width: 116px !important;
  }

  #tt-kits .tt-kits__btn--req {
    width: 194px !important;
    margin-top: 4px !important;
  }

  #tt-kits .tt-kits__btn--doc .tt-kits__arrow {
    left: calc(8ch + 8px) !important;
  }

  #tt-kits .tt-kits__btn--req .tt-kits__arrow {
    left: calc(16ch + 8px) !important;
  }

  /* At native responsive sizes the labels are 16px instead of the 10px
     desktop artboard size. Keep the icon after the active label rather than
     reusing the desktop pixel offsets, which made it overlap the text. */
  #tt-kits .tt-kits__btn--doc[data-state="cta"] .tt-kits__arrow {
    left: calc(8px + 8ch + 7px) !important;
    transform: translate(0, -50%) !important;
  }

  #tt-kits .tt-kits__btn--req[data-state="cta"] .tt-kits__arrow {
    left: calc(8px + 15ch + 7px) !important;
    transform: translate(0, -50%) !important;
  }

  #tt-kits .tt-kits__btn--req[data-state="on"] .tt-kits__arrow {
    left: calc(8ch + 7px) !important;
    transform: translate(0, -50%) !important;
  }

  #tt-kits .tt-kits__btn--req[data-state="off"] .tt-kits__arrow {
    left: calc(8px + 6ch + 7px) !important;
    transform: translate(0, -50%) !important;
  }

  #tt-kits .tt-kits__tray {
    position: sticky !important;
    z-index: 8 !important;
    left: auto !important;
    right: auto !important;
    bottom: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    margin-top: 34px !important;
    padding: 10px 14px !important;
    gap: 12px !important;
  }

  /* Request */
  body:has(#tt-kits) #tt-request-block {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 72px var(--tt-equipment-page-gutter) 80px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background-image: var(--tt-equipment-page-grid) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-stage {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: min(100%, 900px) !important;
    height: auto !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr) !important;
    gap: 56px !important;
    overflow: visible !important;
    transform: none !important;
  }

  #tt-request-block .tt-request-grid-lines {
    display: none !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-kits,
  body:has(#tt-kits) #tt-request-block .tt-request-ui {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-kits {
    margin: 0 !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-kits__label {
    margin-bottom: 26px !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-kits__area {
    min-height: 0 !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-kits__empty {
    width: 100% !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-f {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    margin-bottom: 22px !important;
  }

  #tt-request-block .tt-f-label {
    padding-top: 13px !important;
    font-size: 12px !important;
  }

  #tt-request-block .tt-request-ui input,
  #tt-request-block .tt-request-ui textarea {
    height: 46px !important;
    font-size: 16px !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-ui textarea {
    height: 112px !important;
  }

  /* Footer */
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 64px var(--tt-equipment-page-gutter) 72px !important;
    overflow: visible !important;
    background-image: var(--tt-equipment-page-grid) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  #tt-footer-simple .tt-footer-simple__grid {
    display: none !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 0 24px !important;
    align-items: start !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col a,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy button {
    min-width: 0 !important;
    padding: 0 !important;
    font-size: clamp(12px, 1.1vw, 13px) !important;
    line-height: 1.35 !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__label {
    font-size: clamp(10px, 1vw, 12px) !important;
    line-height: 1.25 !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__privacy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__col--mail {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail {
    width: 132px !important;
    height: 24px !important;
    font-size: clamp(12px, 1.1vw, 13px) !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail-text,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail-cta {
    height: 24px !important;
    font-size: clamp(12px, 1.1vw, 13px) !important;
  }
}

@media (max-width: 980px) {
  body:has(#tt-kits) #tt-kits .tt-kits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 52px 12px !important;
  }

  #tt-kits .tt-kits__card {
    min-height: 0 !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-stage {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-kits {
    padding-bottom: 40px !important;
    border-bottom: 1px solid rgba(220, 220, 220, .1) !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 40px 24px !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__col--mail {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  body {
    --tt-equipment-page-gutter: 20px;
  }

  body:has(#tt-kits) .tt1700-rent {
    min-height: 0;
    padding-top: 58px !important;
    padding-bottom: 36px !important;
  }

  body:has(#tt-kits) .tt1700-rent__title {
    font-size: clamp(23px, calc(4.3vw + 7.5px), 42px) !important;
  }

  body:has(#tt-kits) .tt1700-rent__subtitle {
    margin-top: 30px !important;
    text-align: left;
  }

  body:has(#tt-kits) #tt-kits.tt-kits {
    padding-top: 10px !important;
    padding-bottom: 64px !important;
  }

  body:has(#tt-kits) #tt-kits .tt-kits__grid {
    grid-template-columns: 1fr !important;
    gap: 58px !important;
  }

  #tt-kits .tt-kits__title {
    font-size: 17px !important;
  }

  #tt-kits .tt-kits__desc {
    font-size: 12px !important;
  }

  #tt-kits .tt-kits__actions {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }

  #tt-kits .tt-kits__tray {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
  }

  #tt-kits .tt-kits__traynames {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body:has(#tt-kits) #tt-request-block {
    padding-top: 58px !important;
    padding-bottom: 64px !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-request-kits {
    margin-bottom: 0 !important;
  }

  body:has(#tt-kits) #tt-request-block .tt-f {
    display: block !important;
    margin: 0 0 24px !important;
  }

  #tt-request-block .tt-request-ui .tt-f-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding-top: 0 !important;
    text-align: left !important;
  }

  #tt-request-block .tt-f--submit .tt-f-label {
    display: none !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] {
    padding: 24px var(--tt-equipment-page-gutter) 64px !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns {
    min-height: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 28px !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__col--mail {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__col a,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__columns > .tt-footer-simple__privacy button,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail-text,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail-cta {
    font-size: 12px !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__label {
    font-size: 10px !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail {
    width: 120px !important;
    height: 22px !important;
  }

  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail-text,
  html body:has(#tt-kits) #tt-footer-simple.tt-footer-simple[id] .tt-footer-simple__mail-cta {
    height: 22px !important;
  }
}

/* Continue the narrow-screen scale smoothly through tablet widths, ending at
   the unchanged 80px desktop title size at the 1200px breakpoint. */
@media (min-width: 640.01px) and (max-width: 1199.98px) {
  body:has(#tt-kits) .tt1700-rent__title {
    font-size: calc(8.0321vw - 16.383px) !important;
  }
}

@media (max-width: 359px) {
  body {
    --tt-equipment-page-gutter: 16px;
  }

  body:has(#tt-kits) .tt1700-rent__title {
    font-size: 23px !important;
  }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .tt1700-rent__bracket,
  .tt1700-rent__word {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}