@font-face {
  font-family: 'Lava Pro Grunge';
  src: url('/assets/fonts/lava.ttf') format('truetype');
  font-display: block;
}

@font-face {
  font-family: 'Antio';
  src: url('/assets/fonts/antio.otf') format('opentype');
  font-display: block;
}

:root {
  --offer-top-offset: calc(100vw * 100 / 1920);

  /* wysokość planszy reaguje i na szerokość, i na wysokość */
  --offer-stage-height-from-width: clamp(825px, calc(100vw * 725 / 1920), 1180px);
  --offer-stage-height-from-height: calc(100dvh - var(--offer-top-offset) - 8px);
  --offer-desktop-page-height: max(var(--offer-stage-height-from-width), var(--offer-stage-height-from-height));

  /* wspólna plansza */
  --offer-board-top: 7.2%;
  --offer-board-width: min(65.4%, calc(var(--offer-desktop-page-height) * 1.52));

  --offer-header-top: 5%;
  --offer-header-width: 26%;
  --offer-header-font: clamp(44px, calc(100vw * 62 / 1920), 84px);

  --offer-panel-top: 17.2%;
  --offer-panel-width: min(calc(100vw * 900 / 1920), 900px);
  --offer-panel-scroll-height: clamp(380px, calc(var(--offer-desktop-page-height) * 0.44), 760px);

  --offer-buttons-top: 17.3%;
  --offer-buttons-right: clamp(54px, calc(100vw * 92 / 1920), 96px);
  --offer-buttons-gap: clamp(8px, calc(100vw * 15 / 1920), 18px);

  --offer-footer-top: 88.8%;
  --offer-footer-width: min(calc(100vw * 620 / 1920), 820px);

  /* click przyklejony do boardu */
  --offer-click-top: 15%;
  --offer-click-width: clamp(84px, calc(100vw * 190 / 1920), 210px);
  --offer-click-overlap: clamp(10px, calc(100vw * 18 / 1920), 18px);

  /* rocket ma się bardziej zwężać */
  --offer-rocket-top: 72.2%;
  --offer-rocket-right: 19.5%;
  --offer-rocket-width: min(14.4%, clamp(210px, calc(100vw * 276 / 1920), 300px));

  /* blue doodle ma nie być za mały przy wąskim / wysokim ekranie */
  --offer-blue-top: 20%;
  --offer-blue-left: -2%;
  --offer-blue-width: max(10.8%, clamp(96px, calc(var(--offer-desktop-page-height) * 0.12), 190px));

  --offer-side-small-height: clamp(74px, calc(100vw * 96 / 1920), 106px);
  --offer-side-big-height: clamp(63px, calc(100vw * 82 / 1920), 92px);
}

body.offer-page {
  min-height: auto;
}

body.offer-page header {
  background: transparent !important;
}

body.offer-page main.offer-main {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: calc(100dvh - 90px) !important;
  background-image: url('/assets/Background.png') !important;
  background-size: 100% 100% !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

body.offer-page .full-width-wrapper.offer-wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

body.offer-page .offer-master {
  display: none !important;
}

body.offer-page .is-hidden {
  display: none !important;
}

body.offer-page .offer-inline-link,
body.offer-page .offer-contact-link {
  color: #ffde59;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 222, 89, 0.78);
}

body.offer-page .offer-inline-link:hover,
body.offer-page .offer-contact-link:hover {
  border-bottom-style: solid;
}

/* =======================================================
   DESKTOP — 16:9 baseline + wydłużanie całej planszy
======================================================= */
@media (min-width: 901px) {
  body.offer-page main.offer-main {
    padding-top: var(--offer-top-offset) !important;
    overflow: hidden !important;
  }

  body.offer-page main.offer-main::before,
  body.offer-page main.offer-main::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 35;
    height: clamp(6px, 0.42vw, 10px);
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.96) 3%,
      rgba(255,255,255,0.98) 97%,
      rgba(255,255,255,0) 100%
    );
    box-shadow: 0 0 10px rgba(255,255,255,0.15);
  }

  body.offer-page main.offer-main::before {
    top: calc((100vw * 90 / 1920) - (clamp(6px, 0.42vw, 10px) / 2));
  }

  body.offer-page main.offer-main::after {
    bottom: 0;
  }

  body.offer-page .offer-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    min-height: var(--offer-desktop-page-height) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    background: none !important;
    isolation: isolate !important;
  }

  body.offer-page .offer-decor-layer,
  body.offer-page .offer-content-layer {
    position: absolute !important;
    inset: 0 !important;
  }

  body.offer-page .offer-decor-layer {
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  body.offer-page .offer-content-layer {
    z-index: 5 !important;
    pointer-events: none !important;
    line-height: normal !important;
  }

  body.offer-page .offer-deco {
    position: absolute !important;
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    max-width: none !important;
    height: auto !important;
  }

  /* board wyśrodkowany i zwężający się na wąskich / wysokich ekranach */
  body.offer-page .offer-board {
    top: var(--offer-board-top) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--offer-board-width) !important;
    z-index: 1 !important;
  }

  /* click przyklejony do prawej krawędzi boardu */
  body.offer-page .offer-click {
    top: var(--offer-click-top) !important;
    right: calc(50% - (var(--offer-board-width) / 2) - var(--offer-click-overlap)) !important;
    width: var(--offer-click-width) !important;
    z-index: 3 !important;
  }

  /* rocket węższy przy zwężaniu ekranu */
  body.offer-page .offer-rocket {
    top: var(--offer-rocket-top) !important;
    right: var(--offer-rocket-right) !important;
    width: var(--offer-rocket-width) !important;
    z-index: 3 !important;
  }

  /* blue doodle większy na wąskich/wysokich ekranach */
  body.offer-page .offer-blue-scribble {
    top: var(--offer-blue-top) !important;
    left: var(--offer-blue-left) !important;
    width: var(--offer-blue-width) !important;
    z-index: 2 !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-panel-title,
  body.offer-page .offer-panel-desc,
  body.offer-page .offer-meta-pill,
  body.offer-page .offer-footer-note {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
  }

  body.offer-page .offer-header {
    position: absolute !important;
    top: var(--offer-header-top) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--offer-header-width) !important;
    text-align: center !important;
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: var(--offer-header-font) !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 14px rgba(0,0,0,0.65) !important;
    opacity: 0 !important;
    z-index: 6 !important;
  }

  html.fonts-loaded body.offer-page .offer-header {
    opacity: 1 !important;
  }

  /* okno tekstu zawsze idealnie wyśrodkowane */
  body.offer-page .offer-panel {
    position: absolute !important;
    top: var(--offer-panel-top) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--offer-panel-width) !important;
    pointer-events: auto !important;
    user-select: text !important;
    z-index: 6 !important;
  }

  body.offer-page .offer-intro,
  body.offer-page .offer-category {
    width: 100% !important;
  }

  body.offer-page .offer-panel-title {
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: clamp(29px, calc(100vw * 36 / 1920), 44px) !important;
    line-height: 1.04 !important;
    color: #ffffff !important;
    margin: 0 0 clamp(8px, calc(100vw * 10 / 1920), 14px) 0 !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.65) !important;
    opacity: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html.fonts-loaded body.offer-page .offer-panel-title {
    opacity: 1 !important;
  }

  body.offer-page .offer-panel-meta {
    display: flex !important;
    gap: clamp(10px, calc(100vw * 14 / 1920), 18px) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 0 clamp(10px, calc(100vw * 12 / 1920), 16px) 0 !important;
  }

  body.offer-page .offer-panel-meta.is-hidden {
    display: none !important;
  }

  body.offer-page .offer-meta-pill {
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(16px, calc(100vw * 19 / 1920), 23px) !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,0.96) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  }

  body.offer-page .offer-meta-price {
    color: #ffde59 !important;
    font-weight: 800 !important;
  }

  body.offer-page .offer-panel-desc {
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(16px, calc(100vw * 21 / 1920), 25px) !important;
    line-height: 1.28 !important;
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
  }

  body.offer-page .offer-panel-scroll {
    height: var(--offer-panel-scroll-height) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: clamp(6px, calc(100vw * 8 / 1920), 10px) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.35) transparent !important;
  }

  body.offer-page .offer-panel-scroll::-webkit-scrollbar {
    width: 8px;
  }

  body.offer-page .offer-panel-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  body.offer-page .offer-panel-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
  }

  /* consultation idealnie pod resztą */
  body.offer-page .offer-side-buttons {
    position: absolute !important;
    top: var(--offer-buttons-top) !important;
    right: var(--offer-buttons-right) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--offer-buttons-gap) !important;
    width: max-content !important;
    pointer-events: auto !important;
    z-index: 7 !important;
  }

  body.offer-page .offer-side-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease !important;
    opacity: 0.96 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.offer-page .offer-side-btn img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: var(--offer-side-small-height) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: var(--offer-side-big-height) !important;
  }

  body.offer-page .offer-side-btn[data-offer="consultation"] {
    margin: 0 !important;
  }

  body.offer-page .offer-side-btn:hover {
    transform: translateX(-6px) scale(1.05) !important;
    opacity: 1 !important;
  }

  body.offer-page .offer-side-btn:hover img,
  body.offer-page .offer-side-btn.is-active img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(30%) saturate(1000%) hue-rotate(350deg) brightness(103%) contrast(103%) !important;
  }

  body.offer-page .offer-footer-note {
    position: absolute !important;
    top: var(--offer-footer-top) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--offer-footer-width) !important;
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(13px, calc(100vw * 15 / 1920), 18px) !important;
    line-height: 1.52 !important;
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
    text-align: center !important;
    z-index: 6 !important;
    overflow-wrap: anywhere !important;
  }
}

/* =======================================================
   901–1180
======================================================= */
@media (min-width: 901px) and (max-width: 1180px) {
  :root {
    --offer-board-width: min(63.2%, calc(var(--offer-desktop-page-height) * 1.44));
    --offer-panel-width: min(calc(100vw * 820 / 1920), 700px);
    --offer-panel-scroll-height: clamp(360px, calc(var(--offer-desktop-page-height) * 0.46), 720px);
    --offer-footer-width: min(calc(100vw * 560 / 1920), 620px);
    --offer-buttons-right: 34px;

    --offer-click-width: clamp(80px, calc(100vw * 170 / 1920), 190px);
    --offer-rocket-width: min(13.8%, clamp(188px, calc(100vw * 250 / 1920), 270px));
    --offer-blue-width: max(10.8%, clamp(98px, calc(var(--offer-desktop-page-height) * 0.128), 180px));

    --offer-side-small-height: clamp(60px, calc(100vw * 80 / 1920), 80px);
    --offer-side-big-height: clamp(50px, calc(100vw * 66 / 1920), 66px);
  }

  body.offer-page .offer-header {
    font-size: clamp(40px, calc(100vw * 48 / 1920), 50px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(26px, calc(100vw * 30 / 1920), 31px) !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(15px, calc(100vw * 17 / 1920), 18px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(15px, calc(100vw * 17.5 / 1920), 18.5px) !important;
    line-height: 1.24 !important;
  }

  body.offer-page .offer-footer-note {
    font-size: clamp(12.5px, calc(100vw * 13.5 / 1920), 14px) !important;
  }
}

/* =======================================================
   1181–1487
======================================================= */
@media (min-width: 1181px) and (max-width: 1487px) {
  :root {
    --offer-board-width: min(64.1%, calc(var(--offer-desktop-page-height) * 1.48));
    --offer-panel-width: min(calc(100vw * 860 / 1920), 780px);
    --offer-panel-scroll-height: clamp(370px, calc(var(--offer-desktop-page-height) * 0.45), 740px);
    --offer-footer-width: min(calc(100vw * 590 / 1920), 700px);
    --offer-buttons-right: 48px;

    --offer-click-width: clamp(84px, calc(100vw * 180 / 1920), 200px);
    --offer-rocket-width: min(14.1%, clamp(200px, calc(100vw * 264 / 1920), 286px));
    --offer-blue-width: max(10.8%, clamp(102px, calc(var(--offer-desktop-page-height) * 0.124), 190px));
  }

  body.offer-page .offer-header {
    font-size: clamp(46px, calc(100vw * 54 / 1920), 58px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(29px, calc(100vw * 33 / 1920), 35px) !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(16px, calc(100vw * 18 / 1920), 19px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(16px, calc(100vw * 18.7 / 1920), 19.5px) !important;
  }
}

/* =======================================================
   wysoki ekran desktop:
   panel węższy, dłuższy, większa czcionka
======================================================= */
@media (min-width: 901px) and (max-aspect-ratio: 16/10) {
  :root {
    --offer-stage-height-from-width: clamp(980px, calc(100vw * 940 / 1920), 1480px);

    --offer-board-top: 8.1%;
    --offer-board-width: min(61.8%, calc(var(--offer-desktop-page-height) * 1.38));

    --offer-header-top: 5.8%;
    --offer-panel-top: 19.1%;
    --offer-buttons-top: 19.15%;
    --offer-footer-top: 90.4%;

    --offer-panel-width: min(calc(100vw * 760 / 1920), 700px);
    --offer-panel-scroll-height: clamp(440px, calc(var(--offer-desktop-page-height) * 0.49), 820px);
    --offer-footer-width: min(calc(100vw * 520 / 1920), 610px);
    --offer-buttons-right: clamp(18px, calc(100vw * 28 / 1920), 44px);

    --offer-click-width: clamp(82px, calc(100vw * 165 / 1920), 185px);
    --offer-rocket-width: min(13.1%, clamp(176px, calc(100vw * 236 / 1920), 250px));
    --offer-blue-width: max(11.6%, clamp(112px, calc(var(--offer-desktop-page-height) * 0.13), 198px));
  }

  body.offer-page .offer-header {
    font-size: clamp(42px, calc(100vw * 46 / 1920), 54px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(28px, calc(100vw * 31 / 1920), 36px) !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(17px, calc(100vw * 18 / 1920), 20px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(17px, calc(100vw * 18.3 / 1920), 21px) !important;
    line-height: 1.28 !important;
  }
}

@media (min-width: 901px) and (max-aspect-ratio: 4/3) {
  :root {
    --offer-stage-height-from-width: clamp(1080px, calc(100vw * 1020 / 1920), 1620px);

    --offer-board-width: min(59.8%, calc(var(--offer-desktop-page-height) * 1.30));
    --offer-panel-width: min(calc(100vw * 700 / 1920), 620px);
    --offer-panel-scroll-height: clamp(500px, calc(var(--offer-desktop-page-height) * 0.52), 900px);
    --offer-footer-width: min(calc(100vw * 470 / 1920), 540px);

    --offer-buttons-right: 14px;
    --offer-click-width: clamp(78px, calc(100vw * 150 / 1920), 170px);
    --offer-rocket-width: min(12.4%, clamp(162px, calc(100vw * 214 / 1920), 228px));
    --offer-blue-width: max(12.4%, clamp(118px, calc(var(--offer-desktop-page-height) * 0.135), 205px));

    --offer-side-small-height: clamp(54px, calc(100vw * 70 / 1920), 70px);
    --offer-side-big-height: clamp(44px, calc(100vw * 58 / 1920), 58px);
  }

  body.offer-page .offer-header {
    font-size: clamp(38px, calc(100vw * 42 / 1920), 48px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(26px, calc(100vw * 28 / 1920), 32px) !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(17px, calc(100vw * 17 / 1920), 19px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(17px, calc(100vw * 17 / 1920), 20px) !important;
    line-height: 1.3 !important;
  }
}

/* =======================================================
   2000+
======================================================= */
@media (min-width: 2000px) {
  :root {
    --offer-stage-height-from-width: clamp(980px, calc(100vw * 900 / 1920), 1500px);
    --offer-board-width: min(65.4%, calc(var(--offer-desktop-page-height) * 1.52));
    --offer-panel-width: min(calc(100vw * 900 / 1920), 1140px);
    --offer-panel-scroll-height: clamp(430px, calc(var(--offer-desktop-page-height) * 0.46), 780px);
    --offer-footer-width: min(calc(100vw * 620 / 1920), 980px);
    --offer-buttons-right: clamp(108px, calc(100vw * 96 / 1920), 162px);

    --offer-click-width: clamp(96px, calc(100vw * 200 / 1920), 230px);
    --offer-rocket-width: min(14.4%, clamp(240px, calc(100vw * 288 / 1920), 340px));
    --offer-blue-width: max(10.8%, clamp(118px, calc(var(--offer-desktop-page-height) * 0.12), 220px));

    --offer-side-small-height: clamp(100px, calc(100vw * 96 / 1920), 126px);
    --offer-side-big-height: clamp(86px, calc(100vw * 82 / 1920), 108px);
  }

  body.offer-page .offer-header {
    font-size: clamp(68px, calc(100vw * 62 / 1920), 96px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(38px, calc(100vw * 36 / 1920), 50px) !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(20px, calc(100vw * 19 / 1920), 26px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(22px, calc(100vw * 21 / 1920), 28px) !important;
  }

  body.offer-page .offer-footer-note {
    font-size: clamp(16px, calc(100vw * 15 / 1920), 20px) !important;
  }
}

/* =======================================================
   MOBILE / TABLET
   bez SVG assetów — tylko PNG przyciski
======================================================= */
@media (max-width: 900px) {
  body.offer-page main.offer-main {
    min-height: calc(100dvh - 90px) !important;
    background-image: url('/assets/Background.png') !important;
    background-size: 100% 100% !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow: hidden !important;
    padding-top: 96px !important;
    padding-bottom: 0 !important;
  }

  body.offer-page main.offer-main::before,
  body.offer-page main.offer-main::after,
  body.offer-page .offer-decor-layer,
  body.offer-page .offer-master {
    display: none !important;
  }

  body.offer-page .offer-wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100dvh - 96px) !important;
    padding: 16px 10px 5dvh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body.offer-page .offer-content-layer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: calc(100dvh - 112px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    pointer-events: auto !important;
    z-index: 5 !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-side-buttons,
  body.offer-page .offer-panel,
  body.offer-page .offer-footer-note {
    width: min(92vw, 640px) !important;
    max-width: min(92vw, 640px) !important;
    margin: 0 auto !important;
  }

  body.offer-page .offer-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding-top: 2px !important;
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: clamp(36px, 9vw, 60px) !important;
    line-height: 0.96 !important;
    text-align: center !important;
    color: #ffffff !important;
    opacity: 1 !important;
    order: 1 !important;
    z-index: 5 !important;
  }

  body.offer-page .offer-side-buttons {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, 1.7vw, 10px) !important;
    margin: 0 auto !important;
    order: 2 !important;
    z-index: 6 !important;
  }

  body.offer-page .offer-side-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.98 !important;
    transition: transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.offer-page .offer-side-btn img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(48px, 11vw, 82px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(40px, 9.4vw, 70px) !important;
  }

  body.offer-page .offer-side-btn[data-offer="consultation"] {
    margin: 0 !important;
  }

  body.offer-page .offer-side-btn:hover,
  body.offer-page .offer-side-btn.is-active {
    transform: translateY(-2px) scale(1.03) !important;
    opacity: 1 !important;
  }

  body.offer-page .offer-side-btn:hover img,
  body.offer-page .offer-side-btn.is-active img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(30%) saturate(1000%) hue-rotate(350deg) brightness(103%) contrast(103%) !important;
  }

  body.offer-page .offer-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: rgba(20, 20, 20, 0.14) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 16px 15px !important;
    pointer-events: auto !important;
    order: 3 !important;
    z-index: 5 !important;
    backdrop-filter: blur(1px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: clamp(290px, calc(100dvh - 340px), 640px) !important;
  }

  body.offer-page .offer-intro,
  body.offer-page .offer-category {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.offer-page .offer-intro.is-hidden,
  body.offer-page .offer-category.is-hidden,
  body.offer-page .offer-panel-meta.is-hidden {
    display: none !important;
  }

  body.offer-page .offer-panel-title {
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: clamp(25px, 6vw, 36px) !important;
    line-height: 1 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    opacity: 1 !important;
    overflow-wrap: anywhere !important;
  }

  body.offer-page .offer-panel-meta {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin: 0 0 12px 0 !important;
  }

  body.offer-page .offer-meta-pill {
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(16px, 4vw, 20px) !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,0.96) !important;
  }

  body.offer-page .offer-meta-price {
    color: #ffde59 !important;
    font-weight: 800 !important;
  }

  body.offer-page .offer-panel-desc {
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(15px, 3.9vw, 20px) !important;
    line-height: 1.36 !important;
    text-align: left !important;
    color: rgba(255,255,255,0.92) !important;
  }

  body.offer-page .offer-panel-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.35) transparent !important;
  }

  body.offer-page .offer-footer-note {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(13px, 3.3vw, 16px) !important;
    line-height: 1.45 !important;
    text-align: center !important;
    color: rgba(255,255,255,0.9) !important;
    margin: 0 auto !important;
    order: 4 !important;
    z-index: 5 !important;
    overflow-wrap: anywhere !important;
  }

  body.offer-page #offerIntroText {
    margin-top: -2px !important;
  }

  body.offer-page #offerIntroText br:nth-of-type(1),
  body.offer-page #offerIntroText br:nth-of-type(2) {
    display: none !important;
  }
}

@media (min-width: 650px) and (max-width: 900px) {
  body.offer-page .offer-wrapper {
    min-height: calc(100dvh - 96px) !important;
    padding: 18px 14px 5dvh !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-side-buttons,
  body.offer-page .offer-panel,
  body.offer-page .offer-footer-note {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
  }

  body.offer-page .offer-header {
    font-size: clamp(42px, 6.4vw, 62px) !important;
  }

  body.offer-page .offer-side-buttons {
    gap: clamp(4px, 1vw, 8px) !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(60px, 9vw, 92px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(52px, 7.8vw, 78px) !important;
  }

  body.offer-page .offer-panel {
    padding: 20px 20px !important;
    border-radius: 22px !important;
    min-height: clamp(330px, calc(100dvh - 350px), 700px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(30px, 4.5vw, 40px) !important;
    margin-bottom: 12px !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(18px, 2.65vw, 22px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(18px, 2.65vw, 22px) !important;
    line-height: 1.42 !important;
  }

  body.offer-page .offer-footer-note {
    font-size: clamp(14px, 2.1vw, 18px) !important;
  }
}

@media (max-width: 420px) {
  body.offer-page .offer-wrapper {
    min-height: calc(100dvh - 96px) !important;
  }

  body.offer-page .offer-side-buttons {
    width: min(96vw, 560px) !important;
    gap: 4px !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(42px, 11.5vw, 64px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(36px, 9.8vw, 58px) !important;
  }

  body.offer-page .offer-panel {
    padding: 14px 13px !important;
    min-height: clamp(280px, calc(100dvh - 320px), 560px) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.offer-page main.offer-main {
    padding-top: 90px !important;
  }

  body.offer-page .offer-wrapper {
    min-height: calc(100dvh - 90px) !important;
    padding: 10px 10px 5dvh !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-panel,
  body.offer-page .offer-side-buttons,
  body.offer-page .offer-footer-note {
    width: min(86vw, 700px) !important;
    max-width: min(86vw, 700px) !important;
  }

  body.offer-page .offer-header {
    font-size: clamp(28px, 5vw, 44px) !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(42px, 7vw, 64px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(36px, 5.8vw, 54px) !important;
  }

  body.offer-page .offer-panel {
    min-height: clamp(220px, calc(100dvh - 250px), 420px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(22px, 4.2vw, 30px) !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(14px, 2.4vw, 18px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(13px, 2.2vw, 17px) !important;
  }

  body.offer-page .offer-footer-note {
    font-size: clamp(12px, 1.9vw, 15px) !important;
  }
}