/* Local overrides for the /franshiza/ export.
   Loaded last, after every Tilda stylesheet.

   Only fixes for text that the Tilda zero-block (T396) layout clips at the
   viewport edge. Those blocks position every element absolutely, in px, per
   breakpoint; a handful of them were authored a few px wider than the
   breakpoint they belong to, so the last letter falls outside the artboard
   (which is overflow:hidden). Nothing here moves a box unless it has to -
   the elements are absolutely positioned, so re-wrapping text can collide
   with the element below. */

/* ------------------------------------------------------------------ */
/* <=959px: the two centred headings in "5 простых шагов" sit at
   left:-13px / -11px, so their first letter is cut on every phone and tablet
   width, not just 320. Anchor them to the artboard and let them centre in it.
   Above 960px the block uses its desktop layout and must not be touched. */
@media screen and (max-width: 959px) {
  #rec581232035 .tn-elem__5812320351682324406507,
  #rec581232035 .tn-elem__5812320351682324687414 { left: 0 !important; width: 100% !important; }
}

/* ------------------------------------------------------------------ */
/* 320-374px: the "320" artboard layout                                */
@media screen and (max-width: 374px) {
  /* "*что подтверждается данными поисковых запросов" - box 333px wide */
  #rec581154534 .tn-elem__5811545341682068808810 .tn-atom { font-size: 15px !important; }

  /* "5 простых шагов" block: three headings 335-347px wide */
  #rec581232035 .tn-elem__5812320351682323667052 .tn-atom { font-size: 28px !important; }
  #rec581232035 .tn-elem__5812320351682324406507 .tn-atom { font-size: 22px !important; }
  #rec581232035 .tn-elem__5812320351682324687414 .tn-atom { font-size: 24px !important; }

  /* "Как мы работаем?" cards: titles start at left:137px in a 193px box */
  #rec581163096 .tn-elem__5811630961682072506967 .tn-atom { font-size: 19px !important; }
  #rec581163096 .tn-elem__5811630961682072733909 .tn-atom { font-size: 19px !important; }

  /* "Варианты франшизы": subtitle. The two tab buttons are handled in the
     dedicated section at the bottom of this file - below 480px they are laid
     out full width, one under the other, so they no longer need shrinking. */
  #rec581202002 .tn-elem__5812020021682073066956 .tn-atom { font-size: 17px !important; }

  /* "Стоимость открытия магазина" heading + the investments line */
  #rec581218739 .tn-elem__5812187391682074585814 .tn-atom { font-size: 26px !important; }
  #rec581218739 .tn-elem__5812187391682074634598 .tn-atom { font-size: 15px !important; }

  /* "Укажите Ваш контактный номер..." - left:22px + width:320px = 342px.
     Left-aligned wrapped text always fills its box, so the box itself has to
     shrink; verified it only adds one line and still clears the form below. */
  #rec582233635 .tn-elem__5822336351682327700299 { width: 290px !important; }
}

/* ------------------------------------------------------------------ */
/* 641-959px: the "960" artboard layout, cropped to the viewport        */
@media screen and (min-width: 641px) and (max-width: 959px) {
  /* "Стоимость открытия магазина и финансовые показатели бизнеса" */
  #rec581218739 .tn-elem__5812187391682074585814 .tn-atom { font-size: 30px !important; }
}

/* ------------------------------------------------------------------ */
/* "Варианты франшизы" - the two option buttons                        */
/*                                                                     */
/* The owl-carousel that used to hold the two variant blocks is gone:  */
/* rec584468928 ("секция в вашем магазине") and rec584469304           */
/* ("фирменный магазин") now sit one under the other, so a visitor     */
/* sees both. The two links that used to switch the carousel keep      */
/* their place and become real buttons that jump to their variant and  */
/* highlight the one currently on screen.                              */
/*                                                                     */
/* Tilda renders them as .tn-atom <a> elements whose colours come from */
/* per-element rules with the same specificity, hence !important.      */

#rec581202002 .button-tabs .tn-atom {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 16px !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  --t396-bgcolor-color: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #ff8332 !important;
  transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out,
              color .2s ease-in-out !important;
}
#rec581202002 .button-tabs .tn-atom,
#rec581202002 .button-tabs .tn-atom .tn-atom__button-text {
  color: #ff8332 !important;
}
#rec581202002 .button-tabs .tn-atom .tn-atom__button-text {
  white-space: nowrap !important;
  transition: color .2s ease-in-out !important;
}

/* hover - only on devices that really hover, so a tap does not stick */
@media (hover: hover) {
  #rec581202002 .button-tabs:not(.active) .tn-atom:hover {
    background-color: #fff1e6 !important;
    --t396-bgcolor-color: #fff1e6 !important;
    box-shadow: inset 0 0 0 2px #ee5501 !important;
  }
  #rec581202002 .button-tabs:not(.active) .tn-atom:hover,
  #rec581202002 .button-tabs:not(.active) .tn-atom:hover .tn-atom__button-text {
    color: #ee5501 !important;
  }
}
#rec581202002 .button-tabs .tn-atom:active { transform: translateY(1px); }

/* the option currently on screen - solid accent fill */
#rec581202002 .button-tabs.active .tn-atom {
  background-color: #ff8332 !important;
  --t396-bgcolor-color: #ff8332 !important;
  box-shadow: inset 0 0 0 2px #ff8332, 0 4px 12px rgba(255, 131, 50, .35) !important;
}
#rec581202002 .button-tabs.active .tn-atom,
#rec581202002 .button-tabs.active .tn-atom .tn-atom__button-text {
  color: #ffffff !important;
}

/* >=480px: Tilda's own boxes (177/198px) are wide enough for a pill,
   they only need a bit more height than the authored 32px. */
@media screen and (min-width: 480px) {
  #rec581202002 .button-tabs { height: 40px !important; }
}

/* <=479px: side by side the two boxes are 333px wide and overflow a 320px
   screen, so stack them full width. The artboard is 190px tall there and
   has to grow to fit the second row. */
@media screen and (max-width: 479px) {
  #rec581202002 .t396__artboard,
  #rec581202002 .t396__filter,
  #rec581202002 .t396__carrier { height: 250px !important; }
  #rec581202002 .button-tabs {
    left: 20px !important;
    width: calc(100% - 40px) !important;
    height: 44px !important;
  }
  #rec581202002 .tn-elem__5812020021682678713595 { top: 134px !important; }
  #rec581202002 .tn-elem__5812020021682678941654 { top: 188px !important; }
}

/* the two jump anchors must not add any height of their own */
.fr-tabs-anchor { height: 0; overflow: hidden; }


/* ------------------------------------------------------------------ */
/* "Варианты франшизы": the photo inside each of the two option cards   */
/* below 1200px.                                                        */
/*                                                                      */
/* back_16050.jpg / fon-tabs-2.jpg are not photos placed on a card -    */
/* each one IS the whole desktop card: a 1124px picture with the person */
/* on the left fading into flat orange (#ed5501) on the right. Only the */
/* >=1200px artboard uses it that way. Every narrower artboard parks the */
/* picture below the board (top:610px against a 470px board at 1199px,  */
/* top:917px against an 800px board at 320px) and paints a flat orange  */
/* shape in its place, and the board is overflow:hidden - so from       */
/* 1199px down the person was cropped away completely.                  */
/*                                                                      */
/* Fix: bring the picture back as a band across the top of the card     */
/* (object-fit:cover anchored left/top, so the person stays in frame at */
/* every width), push the rest of the card down by the height of that   */
/* band, and grow the card and the artboard by the same amount. The     */
/* >=1200px layout is not touched at all.                               */

#rec584468928,
#rec584469304 { --fr-band: 220px; }
@media screen and (max-width: 479px) {
  #rec584468928,
  #rec584469304 { --fr-band: 200px; }
}

@media screen and (max-width: 1199px) {
  /* the card contents move down to clear the band ... */
  #rec584468928 .t396__elem,
  #rec584469304 .t396__elem {
    transform: translateY(var(--fr-band)) !important;
  }
  /* ... except the card itself and the picture (higher specificity) */
  #rec584468928 .tn-elem[data-elem-id="1683113918084"],
  #rec584468928 .tn-elem[data-elem-id="1682679016568"],
  #rec584469304 .tn-elem[data-elem-id="1683114759027"],
  #rec584469304 .tn-elem[data-elem-id="1683114759048"] {
    transform: none !important;
  }

  /* the picture becomes the top band of the card */
  #rec584468928 .tn-elem[data-elem-id="1682679016568"],
  #rec584469304 .tn-elem[data-elem-id="1683114759048"] {
    top: 17px !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--fr-band) !important;
    /* .t396__elem is display:table, where height is only a minimum and the
       picture would push the band back out to its own aspect ratio */
    display: block !important;
  }
  #rec584468928 .tn-elem[data-elem-id="1682679016568"] .tn-atom,
  #rec584469304 .tn-elem[data-elem-id="1683114759048"] .tn-atom {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 15px 15px 0 0 !important;
  }
  #rec584468928 .tn-elem[data-elem-id="1682679016568"] .tn-atom__img,
  #rec584469304 .tn-elem[data-elem-id="1683114759048"] .tn-atom__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left top !important;
    border-radius: 15px 15px 0 0 !important;
  }
  /* The flat shape now only carries the bottom corners, and it takes the
     exact orange the pictures fade into (#ed5501, sampled from the right
     edge of both files) instead of the lighter #ff8332 it was authored
     with - otherwise there is a visible seam where band meets card. */
  #rec584468928 .tn-elem[data-elem-id="1683113918084"] .tn-atom,
  #rec584469304 .tn-elem[data-elem-id="1683114759027"] .tn-atom {
    border-radius: 0 0 15px 15px !important;
    --t396-bgcolor-color: #ed5501 !important;
    background-color: #ed5501 !important;
  }

  /* 960-1199px artboard: 470 / 490, card 436 / 456 */
  #rec584468928 .t396__artboard,
  #rec584468928 .t396__filter,
  #rec584468928 .t396__carrier { height: calc(470px + var(--fr-band)) !important; }
  #rec584469304 .t396__artboard,
  #rec584469304 .t396__filter,
  #rec584469304 .t396__carrier { height: calc(490px + var(--fr-band)) !important; }
  #rec584468928 .tn-elem[data-elem-id="1683113918084"] { height: calc(436px + var(--fr-band)) !important; }
  #rec584469304 .tn-elem[data-elem-id="1683114759027"] { height: calc(456px + var(--fr-band)) !important; }
}

/* 640-959px artboard: 540 / 500, card 507 / 475 */
@media screen and (max-width: 959px) {
  #rec584468928 .t396__artboard,
  #rec584468928 .t396__filter,
  #rec584468928 .t396__carrier { height: calc(540px + var(--fr-band)) !important; }
  #rec584469304 .t396__artboard,
  #rec584469304 .t396__filter,
  #rec584469304 .t396__carrier { height: calc(500px + var(--fr-band)) !important; }
  #rec584468928 .tn-elem[data-elem-id="1683113918084"] { height: calc(507px + var(--fr-band)) !important; }
  #rec584469304 .tn-elem[data-elem-id="1683114759027"] { height: calc(475px + var(--fr-band)) !important; }
}

/* 480-639px artboard: 610 / 660, card 577 / 617 */
@media screen and (max-width: 639px) {
  #rec584468928 .t396__artboard,
  #rec584468928 .t396__filter,
  #rec584468928 .t396__carrier { height: calc(610px + var(--fr-band)) !important; }
  #rec584469304 .t396__artboard,
  #rec584469304 .t396__filter,
  #rec584469304 .t396__carrier { height: calc(660px + var(--fr-band)) !important; }
  #rec584468928 .tn-elem[data-elem-id="1683113918084"] { height: calc(577px + var(--fr-band)) !important; }
  #rec584469304 .tn-elem[data-elem-id="1683114759027"] { height: calc(617px + var(--fr-band)) !important; }
}

/* <=479px artboard: 800 / 810, card 755 / 778 */
@media screen and (max-width: 479px) {
  #rec584468928 .t396__artboard,
  #rec584468928 .t396__filter,
  #rec584468928 .t396__carrier { height: calc(800px + var(--fr-band)) !important; }
  #rec584469304 .t396__artboard,
  #rec584469304 .t396__filter,
  #rec584469304 .t396__carrier { height: calc(810px + var(--fr-band)) !important; }
  #rec584468928 .tn-elem[data-elem-id="1683113918084"] { height: calc(755px + var(--fr-band)) !important; }
  #rec584469304 .tn-elem[data-elem-id="1683114759027"] { height: calc(778px + var(--fr-band)) !important; }
}