@charset "utf-8";

/* CSS Mini Reset */
html, body, div, form, fieldset, legend, label, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, footer, header, nav {margin: 0; padding: 0;}
table {border-spacing: 0; border-collapse: collapse;}
li {list-style: none;}
a, a:hover {text-decoration: none; outline: none;}
th, td {text-align: left; vertical-align: top;}
img, fieldset {border: 0; height: auto;}
h1, h2, h3, h4, h5, h6, th, td, p, caption {font-weight: normal; font-size: 1em;}
footer, header, nav, section {display: block;}

#main img, #main object {max-width: 100%;}
.clear {clear:both;}
.thin {font-weight:300;}
.small {font-size:12px; line-height:16px;}
strong, .strong {font-weight:700;}
.left {float:left;}
.center {margin:0 auto; text-align:center;}
.right {float:right;}
.block {display:block;}
.relative {position:relative;}

.left50 {width:48.5%; float:left;}
.right50 {width:48.5%; float:right;}

.txt-center {text-align:center;}
.txt-right {text-align:right;}

.img-responsive {max-width: 100%;  display:block; height: auto;}

body {height:100%; font-size:14px; line-height:16px; color:#111111; text-align:left; background-color:#ffffff;}
html {height:100%;}

body, input, textarea, select, button {font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;}

a {color:#222222;}

iframe {display:block;}
big {font-size:16px; color:#100f0d; font-weight:600;}

p {margin-top:0; font-size:16px; line-height:22px; color:#676767;}
p+p {margin-top:16px;}

/* Header */
.header {box-sizing:border-box; background: linear-gradient(to right, #ffffff 50%, #FFF3EB 50%); position:relative; width:100%;}
.logo img {margin-top:30px;}
.header h1 {margin-top:120px; margin-bottom:30px;}
.header p {margin-bottom:30px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;text-decoration:none;font-weight:500;color:#fff;background:#333; transition: all 0.8s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0);}
.btn img{}
.btn:hover,.btn:focus{transform:translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.btn-primary{background:#774206;font-weight:700;padding:16px 25px 16px 32px;gap:16px;border-radius:99px;font-size:16px;flex-direction:row;text-transform:uppercase;}
.btn-primary img{display:inline-block;transform-origin:50% 0}
.btn-primary:hover img{animation:ring .6s ease-in-out}
@keyframes ring {
0%{transform:rotate(0deg)}
20%{transform:rotate(15deg)}
40%{transform:rotate(-10deg)}
60%{transform:rotate(7deg)}
80%{transform:rotate(-4deg)}
100%{transform:rotate(0deg)}
}

.btn-secondary{background:#ffffff;padding:18px 27px 18px 22px;gap:19px;font-weight:600;border-radius:55px;font-size:18px;flex-direction:row;color:#343434; box-shadow: 4px 4px 58px 0px rgba(0, 0, 0, 0.12);}
.btn-secondary:hover {background:#FFF8F3;}
.btn-header-first {position:absolute; top:50px; left:-30px;}
.btn-header-second {position:absolute; bottom:110px; right:0px;}

/* Marquee */
.marquee{overflow:hidden;background:#FFF3EB}
.track{display:flex;animation:scroll var(--duration) linear infinite}
.item{flex:0 0 var(--item-width,25vw);padding:1.3rem 2rem;font-size:13px;text-transform:uppercase;font-weight:600;box-sizing:border-box;text-align:center}
.item img{width:18px;vertical-align:-3px;margin-right:10px}
@keyframes scroll {
from{transform:translateX(0)}
to{transform:translateX(var(--shift))}
}

@media only screen and (min-width: 75em) {
	.p80-center {margin-left:auto; margin-right:auto; width:88%;}
}

/* Headings */
h1, .h1 {font-size:63px; line-height:68px; color:#343434; font-weight:700; letter-spacing:-4px;}
h2, .h2 {font-size:36px; line-height:43px; color:#343434; font-weight:500; letter-spacing:-2px;}
h3, .h3 {font-size:26px; line-height:34px; font-weight:normal; letter-spacing:1px;}
h4, .h4 {font-size:17px; line-height:22px; color:#626262; font-weight:normal;}
h5 {font-size: 16px; line-height: 20px; color: #6b6b6b; padding:4px 0 12px 0; font-weight:normal;}
h6 {font-size:16px; line-height:18px; font-weight:normal;}

.hero-section {}
.hero-section h2 {margin:70px 0 30px 0;}

/* Magic table */
table{margin-top:40px;margin-bottom:10px;width:100%; /* border-collapse:collapse; */   border-collapse: separate; border-spacing: 0; table-layout:fixed; /* height:100%; */}
th,td{padding:10px;text-align:left;vertical-align:top;font-size:13px;vertical-align:middle; height:100%; word-break: break-word; overflow-wrap: break-word;}

.gutter{width:15px;padding:0;border:none;background:transparent}
.gutter-horizontal{height:15px;padding:0;border:none;background:transparent}
.gutter-horizontal td {height:15px;padding:0;border:none;background:transparent}

thead th{background:#FFF3EB;border:2px solid #FFF3EB;color:#111;text-align:center;font-weight:600;font-size:17px;line-height:20px}
thead tr:nth-child(2) th.feature-head{background:#ffffff;border:2px solid #FFF3EB;font-weight:500;padding:8px 6px;font-size:11px;line-height:12px;font-weight:500}
thead th.col-main em{font-weight:400;font-style:normal}

tbody td{background:none;color:#111;border:2px solid #FFF3EB;height: 100%;}
tbody td.col-rank{border:none;}
td.border {position:relative;}

thead th {position: sticky; top: -1px; z-index: 2;}
thead th.feature-head {position: sticky; top:20px;}

.col-price {line-height:1; font-size:14px; font-weight:500; text-align:center;}
.col-price strong {font-size:28px; font-weight:600;}

.product-box {padding: 15px; text-align:center;}
.product-box img{width:100%}
.product-title{font-size:15px;line-height:1.1; font-weight:400;}
.product-title strong {font-size:17px; font-weight:700; display:block; margin-bottom:6px; margin-top:25px;}

.div-table {/* position:absolute;top:0;right:0;bottom:0;left:0; */ height:100%; display:flex;flex-direction:column; text-align: center;}
.div-table-row1 {flex:1;display:flex;align-items:center;justify-content:center; font-size:12px; line-height:16px; padding:10px; word-wrap: break-word; overflow-wrap: break-word;}
.div-table-row2 {font-size:10px;color:#777;text-align:center;padding:4px 0 8px 0; color:#333333;}
.div-table-row2 strong {font-size:14px; font-weight:700; display:inline-block; background:#FFF3EB; padding:3px 4px; border-radius:2px;}

.rating-stars {text-align:center;}
.star {vertical-align:middle; margin:0 1px; width:14px;}
.star.empty {vertical-align:-4px;}

.rating-points {text-align:center; font-size:14px; font-weight:600; margin-top:35px;}
.rating-points strong {font-size:32px; font-weight:600;}

.rating-label {font-size:10px; font-weight:600; letter-spacing:0; text-transform:uppercase; color:#333333; background:#FFF3EB; border-radius:2px; padding:5px 8px; margin:10px auto 0 auto; text-align:center;}

.rating-place {font-size:34px; font-weight:700; text-align:center; color:#000000; padding:20px 0;}
.rating-place.first-place {background-image:url(../img/ico-rating-gold.svg); background-repeat:no-repeat; background-position:center center; background-size:contain; min-height:70px; margin-bottom:10px; color:#FCC91B; box-sizing: border-box;}
.rating-place.second-place {background-image:url(../img/ico-rating-silver.svg); background-repeat:no-repeat; background-position:center center; background-size:contain; min-height:70px; margin-bottom:10px; color:#989DB1; box-sizing: border-box;}
.rating-place.third-place {background-image:url(../img/ico-rating-brown.svg); background-repeat:no-repeat; background-position:center center; background-size:contain; min-height:70px; margin-bottom:10px; color:#964b00; box-sizing: border-box;}

@media (max-width: 1240px) {
	thead tr:nth-child(2) th.feature-head{padding:8px 4px;font-size:9px;font-weight:400}
}

/* Footer */
.footer {background:#FFF3EB; padding:25px 0 35px 0; margin-top:30px;}
.footer a {font-size:16px; color:#000000;}
@media only screen and (min-width: 75em) {
	.footer a {display:inline-block; margin-right:60px;}
}
@media only screen and (max-width: 75em) {
	.footer a {display:block; margin:10px auto; text-align:center;}
}
.copyright {margin-top:20px; font-size:14px; line-height:22px; color:#535353;}

/* Accordion */
.accordion{max-width:600px;margin:20px auto;color:#111;border:1px solid #e8c6b1;border-radius:2px;overflow:hidden}
.accordion input{display:none}
.accordion-label{display:flex;justify-content:space-between;align-items:center;background:#FFF3EB;cursor:pointer;padding:16px 20px;font-size:16px;font-weight:500;border-bottom:1px solid #f5dccc;transition:background .2s}
.accordion-label:hover{background:#ffe0d0}
.accordion-label .icon{transition:transform .3s ease}
.accordion-content{max-height:0;overflow:hidden;background:#fff;padding:0 20px;font-size:14px;line-height:1.5;transition:max-height .4s ease,padding .3s ease}
.accordion-content p{margin:0}
.accordion-content p + p{margin-bottom:20px}
.accordion input:checked + .accordion-label + .accordion-content{max-height:500px;padding:16px 20px}
.accordion input:checked + .accordion-label .icon{transform:rotate(180deg)}

/* Container / Grid */
.container-fluid {padding-right: 2rem; padding-left: 2rem;}
.container, .container-fluid {margin-right: auto; margin-left: auto;}
.wrap {box-sizing: border-box; max-width: 1400px; /* max-width:1068px; */ margin: 0 auto;}

/* md - 75em */
@media only screen and (max-width: 75em) {
	h1, .h1 {font-size:42px; line-height:1; letter-spacing:-3px;}
}

@media only screen and (min-width: 999px) {
	td.border:not(.border-last):not(.col-price), tr th.feature-head:not(:last-child) {border-right:0 !important;}
}

@media only screen and (max-width: 1000px) {
	
      table, thead, tbody, th, td, tr {
        display: block;
      }
      thead {
        display: none; /* chowamy nagłówki */
      }
      tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 4px;
        margin: 1rem 0;
      }
      td {
        border: none;
        padding: 6px;
        text-align: center;
      }
	  
	  .rating-place.first-place {margin-bottom:0;}
	  .rating-stars {height: 22px;}
	  .rating-points {margin:0;}
	  .rating-label {background:#ffffff;}

      /* układ: ręczne przypisanie pozycji */
      td:nth-child(1) { grid-column: 1 / -1; } /* Miejsce i punkty */
      td:nth-child(3) { grid-column: 1 / -1; } /* Produkt */
      td:nth-child(5) { grid-column: 1; }      /* Cecha 1 */
      td:nth-child(6) { grid-column: 2; }      /* Cecha 2 */
      td:nth-child(7) { grid-column: 1; }      /* Cecha 3 */
      td:nth-child(8) { grid-column: 2; }      /* Cecha 4 */
      td:nth-child(9) { grid-column: 1; }      /* Cecha 5 */
      td:nth-child(10) { grid-column: 2; }      /* Cecha 6 */
      td:nth-child(11) { grid-column: 1; }      /* Cecha 7 */
      td:nth-child(12){ grid-column: 2; }      /* Cena */
	
	.col-rank {background:#FFF3EB;}
	.rating-grid {
	  display: grid;
	  grid-template-columns: 1fr 1fr; /* 2 kolumny */
	  grid-template-rows: auto auto;  /* 2 wiersze */
	  text-align: center;
	  gap: 6px;
	  margin-bottom:-15px;
	}

	.rating-grid > div {
	  /* 
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  */
	}

	/* przypisanie do siatki */
	.rating-place { grid-column: 1; grid-row: 1; margin-top:15px;}   /* lewa-góra */
	.rating-stars { grid-column: 1; grid-row: 2; }   /* lewa-dół */
	.rating-points { grid-column: 2; grid-row: 1; align-self: end; position: relative; top: -25px;}  /* prawa-góra */
	.rating-label { grid-column: 2; grid-row: 2; font-size:13px; letter-spacing:1px; position: relative; top: -25px;}   /* prawa-dół */
	
	.product-box {
	  display: flex;           /* włącza flexbox */
	  align-items: center;     /* wyśrodkowanie pionowe */
	  gap: 10px;               /* odstęp między obrazkiem a tekstem */
	}
	.product-box img {width:140px;}
	.product-box .product-title {width:calc(100% - 140px);}
	
	.div-table-row1 {flex-direction:column; background:#FFF3EB; border-radius:2px; font-weight: bold; box-sizing:border-box; padding:6px 10px; font-size:13px;}
	.div-table-row1:before, .col-price > div:before {
	  content: attr(data-label);
	  display: block;
	  font-weight:normal;
	  margin-bottom: 0.3em;
	}
	
	.col-price > div:before {margin-bottom:8px;}
	
	.col-price > div {flex-direction:column; background:#FFF3EB; border-radius:2px; font-weight: bold; box-sizing:border-box; padding:6px 10px; font-size:13px; padding: 25px 0;}
	
	.div-table-row2 {margin-top:6px;}
	
	.div-table {position:relative; height:100%;}
	
	td.gutter {display:none;}
	tr.gutter-horizontal td {border:0;}
	
	tbody td {border-bottom:0; border-top:0;}
	td.border {height:auto;}
	.border:not(.border-odd) {border-left:0;}
	.border.border-odd {border-right:0;}
	.border-last {padding-bottom: 20px;}
	tr {border-bottom:2px solid #FFF3EB;}
	/* tbody tr {border-bottom:2px solid red;} */
	
}

/* sm - 62em */
@media only screen and (max-width: 62em) {
	
	.header {background:#FFF3EB;}
	.logo img {margin-top:20px;}
	.header h1 {margin-top:30px; margin-bottom:20px;}
	.header p {margin-bottom:25px;}
	
	h1, .h1 {font-size:32px; line-height:1; letter-spacing:-3px;}
	h2, .h2 {font-size:32px; line-height:38px;}
	
	.btn-secondary{padding:15px 24px 15px 18px;gap:16px;font-size:13px;}
	.btn-secondary img {width:20px;}

	.btn-header-first {position:absolute; top:auto; left:10px; bottom: 25%;}
	.btn-header-second {position:absolute; bottom:10%; right:10px;}
	
	.item {white-space:nowrap;}
	
}

/* xs - 48em */
@media only screen and (max-width: 48em) {
	
	.btn-primary{font-size:12px;}
	.btn-secondary{gap:14px;font-size:12px;}
	
	.product-box img {width:100px;}
	.product-box .product-title {width:calc(100% - 100px);}
	.product-title {font-size:12px;}
	.product-title strong {font-size:13px;}

}

.hero-section table {
    all: unset !important;
    display: table !important;
    width: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    text-align: left !important;
}

.hero-section table th,
.hero-section table td {
    all: unset !important;
    display: table-cell !important;
    padding: 0.5em !important;
    border: 1px solid #FFF3EB !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.hero-section table thead {
    all: unset !important;
    display: table-header-group !important;
}

.hero-section table tbody {
    all: unset !important;
    display: table-row-group !important;
}

.hero-section table tr {
    all: unset !important;
    display: table-row !important;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}

ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.15em;
  color: #8b5e3c;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
}