@charset "UTF-8";
:root {
  /* Kolory */
  --color-white: #ffffff;
  --color-black: #343434;
  --color-dark-gray: #8e8e8e;
  --color-light-gray: #e5e5e5;
  /* Kolory brandowe */
  --color-primary: #279ec9;
  --color-primary-light: #9de5ff;
  --color-primary-dark: #1880a7;
  --color-accent: #279dc9;
  /* Kolory funkcjonalne */
  --color-success: #8ade52;
  --color-success-dark: #558a32;
  --color-error: #cf0000;
  --color-error-light: rgba(207, 0, 0, 0.1);
  --color-warning: #f2ef32;
  /* Kolory tekstowe */
  --color-text-primary: #343434;
  --color-text-secondary: #8e8e8e;
  --color-text-link: #0000ff;
  --color-text-white: #ffffff;
  /* Tła */
  --background-main: #e5e5e5;
  --background-product: #f6f5f3;
  /* Fonty */
  --font-primary: "Times New Roman", serif;
  --font-heading: "Times New Roman", serif;
  --font-logo: "Calistoga", serif;
  --font-ui: "Open Sans", sans-serif;
  --font-accent: "Baloo Tammudu", cursive;
  /* Rozmiary fontów */
  --font-size-h1: 69px;
  --font-size-h2: 22px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-body: 16px;
  --font-size-body-large: 20px;
  --font-size-caption: 14px;
  --font-size-logo: 36px;
  --font-size-banner: 40px;
  --font-size-hiperlink: 27px;
  --font-size-hiperlink-small: 24px;
  /* Line heights */
  --line-height-tight: 0.94em;
  --line-height-normal: 1.3em;
  --line-height-relaxed: 1.625em;
  --line-height-loose: 2.22em;
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;
  --spacing-xxl: 60px;
  /* Wymiary */
  --content-width: 652px;
  --sidebar-width: 300px;
  --header-height: 200px;
  --icon-size: 42px;
  --icon-size-small: 25px;
  --avatar-size: 60px;
  /* Efekty */
  --border-radius: 20px;
  --text-shadow: 2.67px 3.55px 0px rgba(52, 52, 52, 1);
  --stroke-weight: 1px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: 400;
  line-height: 1.15em;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.5em;
  text-transform: uppercase;
  text-align: center;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: 700;
  text-align: center;
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: 1.44em;
}

h5 {
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: 1.44em;
}

p {
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

ul,
ol {
  margin-bottom: var(--spacing-sm);
}
ul li,
ol li {
  margin-bottom: var(--spacing-xs);
}

.container {
  max-width: 996px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.site-header {
  height: var(--header-height);
  background-image: url(../img/site-header-background.jpg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--spacing-xl);
  gap: var(--spacing-md);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 600px) {
  .site-header {
    padding: 10px 0 !important;
    height: auto;
  }
}
.site-header .logo {
  margin-top: 60px;
  display: flex;
  align-items: center;
  width: 473px;
  height: 80px;
  position: relative;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .site-header .logo {
    margin-top: 40px;
    flex-direction: column;
    gap: 10px;
  }
}
.site-header .logo .logo-sygnet {
  width: 79px;
  height: 80px;
}
.site-header .logo .logo-sygnet img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 2;
  position: relative;
}
.site-header .logo .logo-text {
  position: relative;
  width: 426px;
  height: 47px;
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -20px;
  z-index: 1;
  padding-left: 20px;
}
@media (max-width: 600px) {
  .site-header .logo .logo-text {
    width: 100%;
    height: auto;
    padding: 10px 0;
  }
}
.site-header .logo .logo-text .logo-tagline {
  font-family: var(--font-logo);
  font-size: var(--font-size-logo);
  color: var(--color-white);
  text-align: center;
  line-height: var(--line-height-tight);
}
@media (max-width: 600px) {
  .site-header .logo .logo-text .logo-tagline {
    font-size: 26px;
  }
}
.site-header .header-banner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.site-header .header-banner .header-title {
  font-family: var(--font-accent);
  font-size: var(--font-size-banner);
  color: var(--color-warning);
  line-height: var(--line-height-loose);
  text-align: left;
  text-shadow: 2.665px 3.554px 0 var(--Color-black, #343434);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--Color-red, #cf0000);
}
@media (max-width: 600px) {
  .site-header .header-banner .header-title {
    font-size: 26px !important;
    line-height: 32px;
    margin-top: 25px;
  }
}

.page-container {
  background: linear-gradient(180deg, rgb(227, 243, 249) 0%, rgb(255, 255, 255) 100%);
  display: flex;
  justify-content: center;
  padding: var(--spacing-md) 0 0;
  gap: var(--spacing-xs);
}

.page {
  display: flex;
  padding: var(--spacing-xs);
  background-color: #e5e5e5;
}

.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: var(--content-width);
}

.content-card,
.comments-card {
  background: var(--color-white);
  border: var(--stroke-weight) solid var(--color-dark-gray);
  padding: var(--spacing-md) var(--spacing-xs) var(--spacing-xxl);
  gap: 10px;
  width: 100%;
}

.comments-card {
  padding: var(--spacing-md) var(--spacing-xs) var(--spacing-xxl);
  gap: var(--spacing-md);
}

.article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.article-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
.article-header .main-title {
  font-size: var(--font-size-h1);
  line-height: 1.15em;
  text-align: left;
}
.article-header .main-title span {
  color: #cf0000;
}
@media (max-width: 600px) {
  .article-header .main-title {
    font-size: 38px;
  }
}
.article-header .subtitle {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-normal);
  text-align: left;
}
.article-header .subtitle span {
  color: #00af12;
}
.article-header .divider {
  height: 0;
  width: 100%;
  border-top: 3px solid var(--color-dark-gray);
}

.symptoms-wrap,
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: var(--spacing-sm);
  width: 636px;
}
@media (max-width: 720px) {
  .symptoms-wrap,
  .benefits-list {
    width: 100%;
  }
}

.symptoms-list,
.benefits-list,
.conditions-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
}

.symptom-item,
.benefit-item,
.condition-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
}
.symptom-item .icon,
.benefit-item .icon,
.condition-item .icon {
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.symptom-item .icon.icon-cross,
.benefit-item .icon.icon-cross,
.condition-item .icon.icon-cross {
  width: 40px;
  height: 42px;
  background-image: url("../img/icon-cross.png");
}
.symptom-item .icon.icon-tick,
.benefit-item .icon.icon-tick,
.condition-item .icon.icon-tick {
  width: 40px;
  height: 42px;
  background-image: url("../img/icon-tick.png");
}
.symptom-item .icon.icon-arrow,
.benefit-item .icon.icon-arrow,
.condition-item .icon.icon-arrow {
  width: 25px;
  height: 25px;
  background-image: url("../img/icon-arrow.png");
}
.symptom-item span:last-child,
.benefit-item span:last-child,
.condition-item span:last-child {
  font-weight: 700;
}

.benefit-item span:last-child {
  font-weight: 700;
}

.symptom-item span:last-child {
  font-weight: normal;
}

.acupressure-points {
  position: relative;
  max-width: 636px;
}

.detox-highlight {
  background-color: var(--color-error);
  padding: var(--spacing-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}
@media (max-width: 600px) {
  .detox-highlight {
    flex-direction: column;
  }
}
.detox-highlight .clock-icon {
  width: 108px;
  height: 96px;
  flex-shrink: 0;
}
.detox-highlight .clock-icon img {
  width: 100%;
  height: 100%;
}
.detox-highlight .detox-text {
  font-family: var(--font-ui);
  font-size: var(--font-size-h2);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
  line-height: 1.5em;
  margin: 0;
}

.product-section {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border: var(--stroke-weight) solid var(--color-dark-gray);
}
@media (max-width: 700px) {
  .product-section {
    display: none;
  }
}
.product-section .product-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  padding: 24px 0;
  background-color: #9de5ff;
}
.product-section .product-header h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: 700;
  line-height: 1.444em;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
}
.product-section .image-frame {
  position: relative;
  width: 632px;
  height: 356px;
  background-color: #f6f5f3;
  overflow: hidden;
}
@media (max-width: 720px) {
  .product-section .image-frame {
    width: 100%;
  }
}
.product-section .image-frame .knee-band-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-47%);
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}
.product-section .image-frame .feature-text {
  position: absolute;
  font-family: var(--font-ui);
  font-size: var(--font-size-caption);
  font-weight: 400;
  line-height: 1.429em;
  text-align: right;
  color: var(--color-text-primary);
  z-index: 3;
}
.product-section .image-frame .feature-text.feature-1 {
  top: 47px;
  left: 20px;
  width: 159px;
  height: 40px;
  text-align: left;
}
.product-section .image-frame .feature-text.feature-2 {
  top: 118px;
  left: 18px;
  height: 20px;
}
.product-section .image-frame .feature-text.feature-3 {
  top: 190px;
  left: 15px;
  height: 20px;
}
.product-section .image-frame .feature-text.feature-4 {
  top: 266px;
  left: 30px;
  width: 190px;
  height: 60px;
  text-align: left;
}
.product-section .image-frame .feature-text.feature-5 {
  top: 37px;
  left: 458px;
  width: 164px;
  height: 60px;
}
.product-section .image-frame .feature-text.feature-6 {
  top: 180px;
  left: 510px;
  height: 20px;
}
.product-section .image-frame .feature-text.feature-7 {
  top: 261px;
  left: 470px;
  width: 151px;
  height: 60px;
}

.product-section-mobile {
  display: none;
  flex-direction: column;
  align-self: stretch;
  border: var(--stroke-weight) solid var(--color-dark-gray);
  margin-bottom: var(--spacing-md);
}
@media (max-width: 700px) {
  .product-section-mobile {
    display: flex;
  }
}
.product-section-mobile .product-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  padding: 24px 0;
  background-color: #9de5ff;
}
.product-section-mobile .product-header h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: 700;
  line-height: 1.444em;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
}
.product-section-mobile .image-frame {
  position: relative;
  width: 100%;
  background-color: #f6f5f3;
  padding: 20px;
  padding-top: 0;
  padding-bottom: 0;
}
.product-section-mobile .image-frame img {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.product-section-mobile .feature-list {
  padding: 20px;
  background-color: #f6f5f3;
}
.product-section-mobile .feature-list .feature-item {
  font-family: var(--font-ui);
  font-size: var(--font-size-caption);
  line-height: 1.429em;
  color: var(--color-text-primary);
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  padding-left: 20px;
}
.product-section-mobile .feature-list .feature-item:before {
  content: "•";
  position: absolute;
  left: 5px;
  top: 12px;
  color: var(--color-primary);
}
.product-section-mobile .feature-list .feature-item:last-child {
  border-bottom: none;
}

.testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.testimonial {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px 8px 8px;
  border: var(--stroke-weight) solid var(--color-dark-gray);
  width: 636px;
  background: var(--color-white);
}
@media (max-width: 720px) {
  .testimonial {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}
.testimonial .testimonial-image {
  width: 102px;
  height: 123px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}
.testimonial .testimonial-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.testimonial .testimonial-content .testimonial-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-error);
  line-height: 1.5em;
  margin: 0;
}
.testimonial .testimonial-content .testimonial-text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  margin: 0;
}
.testimonial .testimonial-content .testimonial-author {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.conditions-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  width: 100%;
}
@media (max-width: 600px) {
  .conditions-wrap {
    flex-direction: column;
    gap: 20px;
  }
}
.conditions-wrap .knee-image {
  width: 201px;
  height: 275px;
  -o-object-fit: fill;
     object-fit: fill;
  border: var(--stroke-weight) solid var(--color-dark-gray);
  flex-shrink: 0;
}
.conditions-wrap .symptoms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 0 16px;
  flex: 1;
}
.conditions-wrap .symptoms-list .symptoms-item {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  gap: 8px;
  align-items: flex-start;
}
.conditions-wrap .symptoms-list .symptoms-item .icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.conditions-wrap .symptoms-list .symptoms-item .icon.icon-arrow {
  background-image: url("../img/icon-arrow.png");
}
.conditions-wrap .symptoms-list .symptoms-item .symptom-text {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.625em;
  color: var(--color-text-primary);
  text-align: left;
}

.order-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}
.order-section .order-title {
  color: var(--color-error);
  margin: 0;
}
.order-section .price-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  width: 100%;
}
@media (max-width: 600px) {
  .order-section .price-section {
    gap: 10px;
    flex-direction: column;
  }
}
.order-section .price-section .old-price {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: 1.44em;
}
.order-section .price-section .new-price {
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.5em;
  text-transform: uppercase;
  width: 234px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warning-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 12px var(--spacing-md);
  background-color: var(--color-error-light);
  width: 100%;
}
@media (max-width: 600px) {
  .warning-section {
    flex-direction: column;
  }
}
.warning-section .made-in-germany {
  width: 106px;
  height: 106px;
  flex-shrink: 0;
}
.warning-section .made-in-germany img {
  width: 100%;
  height: 100%;
}
.warning-section .warning-text {
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: 1.44em;
  margin: 0;
}

.urgency-text {
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.5em;
  text-transform: uppercase;
  text-align: center;
}

.cta-button-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-decoration: underline;
  font-family: var(--font-ui);
  font-size: var(--font-size-hiperlink);
  font-weight: 700;
  color: var(--color-text-link);
  text-align: left;
  line-height: 1.41em;
  margin-top: 20px;
  max-width: 600px;
  padding-left: 10px;
}
@media (max-width: 600px) {
  .cta-button {
    text-align: center;
  }
}

.comments-title {
  color: var(--color-accent);
  text-align: left;
  margin-bottom: var(--spacing-md);
  font-family: "Open Sans";
}

.comments-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.comments-section::before {
  content: "";
  width: 635px;
  height: 0;
  border-top: var(--stroke-weight) solid var(--color-light-gray);
}
@media (max-width: 720px) {
  .comments-section::before {
    width: 100%;
  }
}

.comment {
  display: flex;
  gap: 16px;
  padding: 20px 20px;
  border-bottom: var(--stroke-weight) solid var(--color-light-gray);
  width: 636px;
  align-items: flex-start;
}
@media (max-width: 720px) {
  .comment {
    width: 100%;
  }
}
.comment .comment-avatar {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  margin-top: 10px;
}
.comment .comment-avatar.comment-avatar-default {
  background-color: var(--color-light-gray);
  background-image: url("../img/avatar-default.svg");
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}
.comment .comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px 0 0 0;
}
.comment .comment-content .comment-header {
  position: relative;
  width: 100%;
  height: 32.46px;
}
.comment .comment-content .comment-header .comment-author {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0;
}
.comment .comment-content .comment-header .comment-date {
  position: absolute;
  top: 23.46px;
  left: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  color: var(--color-text-primary);
  line-height: 1.86em;
}
.comment .comment-content .comment-text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.bannerbg {
  background-color: #e5e5e5;
  width: 100%;
  padding-left: 28px;
  padding-right: 10px;
}

.banner-section {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid #8e8e8e;
  background: #ffffff;
  overflow: hidden;
}
.banner-section .banner-bg {
  max-width: 317px;
  max-height: 257px;
  margin-top: 55px;
}
.banner-section .banner-content {
  position: absolute;
  top: -0.17px;
  left: 1px;
  width: 299px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #ffffff;
}
.banner-section .banner-content .banner-title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3em;
  text-align: center;
  color: #343434;
  margin: 0;
  padding: 16px;
}
.banner-section .banner-product {
  position: absolute;
  top: 206px;
  left: 19px;
  width: 271px;
  height: 193px;
}
.banner-section .banner-product .banner-product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 258px;
  height: 193px;
  -o-object-fit: cover;
     object-fit: cover;
}
.banner-section .banner-product .banner-germany-badge {
  position: absolute;
  top: 2px;
  left: 165px;
  width: 106px;
  height: 106px;
}
.banner-section .banner-product .banner-germany-badge img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.banner-section .banner-cta-button {
  position: absolute;
  top: 360px;
  left: 68.5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-decoration: underline;
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  color: #0000ff;
  line-height: 0.958em;
  text-align: left;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-light-gray);
  padding: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.footer .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 800px;
}
.footer .footer__text {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-xs);
}
.footer .copyright,
.footer .attachments {
  margin-bottom: var(--spacing-sm);
}
.footer .attachments {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}
.footer .attachments a {
  color: var(--color-text-secondary);
}
.footer .attachments a:hover {
  color: var(--color-primary);
}

.summary-page-container {
  background: linear-gradient(180deg, rgb(227, 243, 249) 0%, rgb(255, 255, 255) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md) 0 var(--spacing-xl);
  gap: var(--spacing-xs);
}

.summary-page {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  gap: 28px;
  width: 980px;
}

.summary-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.summary-content-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xs) var(--spacing-xxl);
  gap: 10px;
  background: var(--color-white);
  border: var(--stroke-weight) solid var(--color-dark-gray);
  width: 100%;
}

.summary-article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.summary-header-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}

.summary-alert-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.summary-alert-title {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
}
.summary-alert-title p {
  margin: 0;
  padding: 0;
  line-height: normal;
}
.summary-alert-title .alert-uwaga {
  font-family: "Times New Roman", serif;
  font-weight: 700;
  font-size: 44px;
  color: #cf0000;
  text-align: center;
  margin-bottom: 0 !important;
}
.summary-alert-title .alert-text {
  font-family: "Times New Roman", serif;
  font-weight: 400;
  font-size: 44px;
  color: var(--color-text-primary);
  text-align: center;
  margin-top: 0 !important;
}

.alert-attention {
  color: var(--color-text-primary);
}

.summary-content-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
}
@media (max-width: 500px) {
  .summary-content-section {
    gap: 0;
  }
}

.summary-offer-text {
  font-family: "Times New Roman", serif;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
  margin-bottom: 32px;
}
.summary-offer-text p {
  margin: 0;
  padding: 0;
}
.summary-offer-text .offer-line-1 {
  margin-bottom: 0;
}
.summary-offer-text .offer-line-2 {
  margin-top: 0;
}

.price-highlight {
  color: var(--color-text-primary);
  font-weight: 700;
}

.price-strike {
  color: var(--color-text-primary);
}

.summary-product-showcase {
  position: relative;
  width: 271px;
  height: 193px;
}

.summary-product-image {
  width: 258px;
  height: 193px;
  -o-object-fit: cover;
     object-fit: cover;
}

.summary-made-in-germany {
  position: absolute;
  top: 2px;
  right: 0;
  width: 106px;
  height: 106px;
}
.summary-made-in-germany img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.summary-instruction-text {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
}
@media (max-width: 500px) {
  .summary-instruction-text {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.summary-instruction-text p {
  margin: 0;
  padding: 0;
}
.summary-instruction-text .instruction-line-1 {
  margin-bottom: 0;
}
.summary-instruction-text .instruction-line-2 {
  margin: 0;
}
.summary-instruction-text .instruction-line-3 {
  margin-top: 0;
}

.summary-contact-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.summary-phone-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  width: 100%;
  margin-bottom: 30px;
  margin-top: 10px;
}

.summary-phone-text {
  font-family: "Open Sans", sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  color: #0000ff;
  text-decoration: underline;
  cursor: pointer;
}

.summary-phone-number {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  width: 100%;
  margin-bottom: 30px;
  margin-top: 10px;
}
.summary-phone-number a {
  font-family: "Open Sans", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  color: #0000ff;
  text-decoration: underline;
}

.summary-contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px 60px;
  border: 1px solid #8e8e8e;
  background: var(--color-white);
  margin-top: 8px;
  width: auto;
  max-width: 471px;
}

.summary-hours-text {
  font-family: "Times New Roman", serif;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
}
.summary-hours-text p {
  margin: 0;
  padding: 0;
}
.summary-hours-text .hours-line-1 {
  margin-bottom: 0;
}
.summary-hours-text .hours-line-2 {
  margin-top: 0;
}

.summary-product-description {
  font-family: "Times New Roman", serif;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  color: #343434;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}

.summary-warning-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-sm);
  background-color: var(--color-error-light);
  width: 100%;
  border-radius: 8px;
}

.summary-warning-content {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  gap: 10px;
}

.summary-warning-text {
  font-family: var(--font-ui);
  font-size: var(--font-size-caption);
  line-height: 1.57em;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0 auto;
  flex: 1;
  max-width: 700px;
}
.summary-warning-text span.font-bold {
  font-weight: 700;
}

@media (max-width: 1400px) {
  .summary-page {
    width: 100%;
    max-width: 980px;
    padding: 0 var(--spacing-md);
  }
}
@media (max-width: 1024px) {
  .banner-section {
    display: none;
  }
  .page {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .page-container {
    display: block;
  }
  .page-content {
    margin: 0 auto;
  }
  .summary-page {
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    padding: 0 var(--spacing-sm);
  }
  .summary-alert-title {
    font-size: 36px;
  }
  .summary-alert-title p {
    margin: 0;
    padding: 0;
    line-height: normal;
  }
  .summary-alert-title .alert-uwaga {
    font-size: 36px;
  }
  .summary-alert-title .alert-text {
    font-size: 36px;
  }
  .summary-product-showcase {
    width: 100%;
    max-width: 271px;
    margin: 0 auto;
  }
  .banner-section {
    width: 100%;
    position: relative;
  }
  .site-header .logo {
    justify-content: center;
    width: 100%;
  }
  .header-title {
    text-align: center !important;
  }
}
@media (max-width: 750px) {
  .header-title {
    font-size: 28px !important;
  }
  .page-container {
    display: block;
    width: 100%;
  }
  .page-content {
    width: 100%;
    padding: 0 10px;
  }
  p {
    max-width: 100%;
  }
  .summary-alert-title {
    font-size: 28px;
  }
  .summary-alert-title p {
    margin: 0;
    padding: 0;
    line-height: normal;
  }
  .summary-alert-title .alert-uwaga {
    font-size: 28px;
  }
  .summary-alert-title .alert-text {
    font-size: 28px;
  }
}/*# sourceMappingURL=style.css.map */