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

html,
body {
     background: #f8f7f4;
     color: #333;
     max-width: 100%;
     line-height: 1.6;
     scroll-behavior: smooth;
     overflow-x: hidden;
}

/* Header */
header {
     margin-bottom: 50px;
}

.arteshop {
     width: 80%;
     height: auto;
     margin: 100px 120px;
     padding-top: 60px;
}

header .title-container {
     margin: 50px 40px 100px;
}

header .title-container h1,
h2 {
     display: block;
     text-align: center;
}

header .title-container h1 {
     margin: 40px 20px 25px;
}

header .title-container h2 {
     margin: 0 20px;
}

.menu {
     display: flex;
     background: #f8f7f4;
     height: 70px;
     width: 100%;
     padding: 5px;
     align-items: center;
     justify-content: space-between;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
}

.menu.scrolled {
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
     /* Jemná spodní linka */
}

.logo img {
     max-width: 100%;
     margin-top: 15%;
}

/* Hlavní navigace */
.main-nav {
     display: flex;
     align-items: center;
     gap: 35px;
     list-style: none;
}

.main-nav li a {
     font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
     font-size: 18px;
     font-weight: 600;
     color: #1e292b;
     padding: 22px;
     text-decoration: none;
     transition: all 0.3s ease-in-out;
}

.main-nav .kosik {
     font-size: 34px;
}

/* Mobile menu */
.mobile-nav-icon img {
     display: none;
     float: right;
     cursor: pointer;
}

/* Mobilní overlay - překrytí*/
.mobile-nav-back {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.08);
     opacity: 0;
     z-index: 9998 !important;
     pointer-events: none;
     transition: opacity 0.5s ease-in-out;
}

.mobile-nav-back.open {
     opacity: 1;
     pointer-events: auto !important;
}

/* Navigační krokový ukazatel */
.checkout-steps {
     display: flex;
     font-family: 'Yeseva One', Arial, Helvetica, sans-serif;
     color: #899;
     font-weight: bold;
     justify-content: center;
     align-items: center;
     gap: 30px;
     margin-top: 95px;
     margin-bottom: 40px;
     font-size: 18px;
}

.checkout-steps .active {
     color: #006b68;
     font-weight: bold;
}

/* Obchod */

.products-section h2 {
     text-align: center;
     margin-bottom: 15px;
}

.products-section {
     padding: 80px 20px;
}

.section-intro {
     text-align: center;
     margin-bottom: 50px;
     color: #666;
     font-size: 20px;
     font-weight: 600;
}

.products {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
}

.products-detail {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     max-width: 1100px;
     margin: 60px auto;
     padding: 30px;
}

.product-card {
     background: #fff;
     border: 1px solid #e5e5e5;
     padding: 15px;
     border-radius: 4px;
     transition: transform 0.3s ease;
     box-shadow: 0.3s ease;
}

.product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.product-detail-page {
     padding: 120px 40px 80px;
}

.product-image {
     height: 300px;
     overflow: hidden;
}

.product-image img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: transform 0.4s ease;
}

.detail-image img {
     width: 100%;
     height: 500px;
     object-fit: contain;
}

.detail-info {
     padding: 80px;
     text-align: center;
}

.detail-info h3 {
     margin-bottom: 15px;
     font-size: 32px;
}

.detail-category {
     margin-bottom: 25px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
}

.detail-info p {
     margin-bottom: 12px;
}

.detail-price {
     margin-top: 30px;
     font-size: 26px;
     font-weight: 700;
}

.product-image img:hover {
     transform: scale(1.03);
}

.product-info h3 {
     margin-bottom: 8px;
}

.product-description {
     color: #777;
}

.price {
     font-weight: 700;
     margin: 15px 0;
}

.btn {
     display: inline-block;
     padding: 10px 20px;
     background: #009478;
     color: #fff;
     text-decoration: none;
     border-radius: 3px;
     font-family: 'Nunito Sans' Arial, Helvetica, sans-serif;
     font-weight: 600;
     transition: background 0.3s ease;
}

.btn:hover {
     background: #007a64;
}

/* Košík */
.cart-section {
     padding: 120px 40px 80px;
}

.cart-section h1 {
     text-align: center;
     margin-bottom: 50px;
}

.cart-item {
     display: flex;
     align-items: center;
     gap: 30px;
     max-width: 900px;
     margin: 0 auto 25px;
     padding: 20px;
     background: #fff;
     border: 1px solid #eeeeee;
}

.cart-item img {
     width: 180px;
     height: 135px;
     object-fit: cover;
}

.cart-info h2 {
     margin: 0 0 10px;
}

.cart-info p {
     margin: 5px 0;
}

.cart-price {
     font-weight: 700;
     margin-top: 15px !important;
}

/* Tlačítko odebrat */
.remove-cart {
     margin-top: 15px;
     padding: 10px 18px;
     border: none;
     background: #eeeeee;
     color: #333;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
     transition: 0.3s;
}

.remove-cart:hover {
     background: #dcdcdc;
}

/* Celková cena */
#cart-total {
     max-width: 900px;
     margin: 40px auto 0;
     padding: 25px 20px;
     border-top: 2px solid #eeeeee;
     text-align: left;
}

#cart-total h2 {
     margin: 0;
     font-size: 24px;
}

/* Tlačítka v košíku */
.cart-buttons {
     max-width: 900px;
     margin: 30px auto 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
}

.cart-buttons a {
     display: inline-block;
     padding: 12px 22px;
     text-decoration: none;
     transition: 0.3s;
}

/* Dropdown v košíku */
.cart-menu {
     position: relative;
}

.cart-count {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     width: 23px;
     height: 23px;
     position: absolute;
     top: 0;
     font-size: 16px;
     color: #fff;
     background: red;
     right: 50px;
     border-radius: 50%;
}

.cart-dropdown {
     display: none;
     position: absolute;
     top: 100%;
     right: 0;
     width: 320px;
     padding: 20px;
     background: #fff;
     border: 1px solid #eeeeee;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     z-index: 1000;
}

.cart-menu:hover .cart-dropdown {
     display: block;
}

.cart-dropdown h3 {
     margin-top: 0;
     margin-bottom: 15px;
}

.cart-dropdown-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 0;
     border-bottom: 1px solid #eeeeee;
}

.cart-dropdown-item img {
     width: 55px;
     height: 45px;
     object-fit: cover;
}

.cart-dropdown-item-info {
     flex: 1;
}

.cart-dropdown-item-info p {
     margin: 3px 0;
}

.cart-dropdown-price {
     font-weight: 700;
}

.cart-dropdown-total {
     font-weight: 700;
     margin: 15px 0;
}

.cart-dropdown-button {
     display: block;
     padding: 11px;
     text-align: center;
     color: #fff;
     background: #2f6f6b;
     text-decoration: none;
     transition: 0.3s;
}

.cart-dropdown-button:hover {
     background: #245956;
}

.continue-shopping {
     color: #333;
     border: 1px solid #dddddd;
     background: #fff;
}

.continue-shopping:hover {
     background: #eeeeee;
}

.checkout-button {
     color: #fff;
     font-size: 17px;
     padding: 15px 20px;
     font-weight: bold;
     border-radius: 6px;
     background: #2f6f6b;
     border: 1px solid #2f6f6b;
     cursor: pointer;
}

.checkout-button:hover {
     background: #245956;
}

.order-form-container {
     /* doprava, formulář, rekapitulace */
     max-width: 800px;
     background: #ffffff;
     padding: 30px;
     margin: 45px auto;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.order-form-container h2 {
     margin-top: 0;
     margin-bottom: 35px !important;
     color: #333;
     text-align: center;
}

.order-options {
     display: flex;
     gap: 25px;
}

.box {
     width: 100%;
     padding: 20px;
     border: 1px solid #ccc;
}

.order-form {
     background: #fafafa;
     border-bottom: 1px solid #e5e5e5;
     border-radius: 10px;
}

.form-section h3 {
     font-size: 17px;
     color: #006b68;
     margin-top: 0;
     margin-bottom: 20px;
}

/* Jednotlivé možnosti */
.form-section label {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 10px;
     margin-bottom: 8px;
     border-radius: 6px;
     cursor: pointer;
     color: #555555;
     transition: background-color 0.2s ease;
}

.form-section label:hover {
     background-color: #f0f0f0;
}

.form-group {
     margin-bottom: 15px;
}

.form-row {
     display: flex;
     gap: 15px;
}

.form-row .form-group {
     flex: 1;
}

/* Radio button */
.form-section input [type="radio"] {
     width: 17px;
     height: 17px;
     accent-color: #006b68;
     cursor: pointer;
}

input:not([type="radio"]),
select {
     width: 100%;
     padding: 10px;
     border: 1px solid #cccccc;
     border-radius: 4px;
     font-size: 14px;
     box-sizing: border-box;
}

input:not([type="radio"]):focus,
select:focus {
     border-color: #0066cc;
     outline: none;
}

/* Tlačítko - doprava a platba */
.order-form-container button[type="submit"] {
     width: 100%;
     margin-top: 30px;
     padding: 13px 20px;
     border: none;
     border-radius: 6px;
     background-color: #006b68;
     color: #fff;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.2s ease;
}

.order-form-container button[type="submit"]:hover {
     background-color: #00504e;
}

.submit-btn {
     width: 100%;
     background-color: #0066cc;
     color: white;
     padding: 12px;
     border: none;
     border-radius: 4px;
     font-size: 16px;
     cursor: pointer;
     font-weight: bold;
}

.submit-btn:hover {
     background-color: #004d99;
}

/* Rekapitulace */
.summary-section {
     margin-bottom: 30px;
     padding-bottom: 20px;
     border-bottom: 1px solid #eeeeee;
}

.summary-section h3 {
     margin-bottom: 20px;
     color: #333;
}

.summary-items {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 15px 0;
     border-bottom: 1px solid #eeeeee;
}

.summary-items img {
     width: 100px;
     height: 80px;
     object-fit: cover;
     border-radius: 6px;
}

.summary-items h4 {
     margin: 0 0 8px;
     color: #333;
}

.summary-items p {
     margin: 4px 0;
     color: #666;
}

.summary-total {
     text-align: right !important;
     margin: 30px 0;
     padding-top: 20px;
     border-bottom: 2px solid #eeeeee;
}

.summary-total h2 {
     margin: 0;
     color: #333;
}

#summary-shipping,
#summary-payment,
#summary-customer {
     margin-top: 10px;
     color: #555;
}

/* Děkuji za objednávku */
.thank-you-page {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 40px 20px;
     background: #fafafa;
}

.thank-you-container {
     max-width: 650px;
     width: 100%;
     padding: 60px 40px;
     text-align: center;
     background: #fff;
     border: 1px solid #eeeeee;
}

.thank-you-icon {
     font-size: 50px;
     margin-bottom: 20px;
}

.thank-you-container h1 {
     margin-bottom: 20px;
}

.thank-you-container p {
     margin: 10px 0;
     line-height: 1.7;
}

.thank-you-text {
     font-size: 18px;
     font-weight: 600;
}

.thank-you-button {
     display: inline-block;
     margin-top: 30px;
     padding: 13px 25px;
     color: #fff;
     font-size: 18px;
     font-weight: bold;
     background: #2f6f6b;
     text-decoration: none;
     transition: 0.3s;
}

.thank-you-button:hover {
     background: #245956;
}

/* Footer a copyright */
.eshop-icon {
     color: #e67e22;
     text-align: center;
     font-size: 50px;
     margin-bottom: 30px;
}

.site-footer {
     background-color: #f0f0f0;
     color: #444;
     margin-top: 100px;
     padding: 40px 20px 20px;
}

.footer-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
     gap: 30px;
}

.footer-col {
     flex-direction: 1;
     min-width: 220px;
}

.footer-col h3 {
     font-size: 18px;
     margin-bottom: 15px;
     color: #006b68;
}

.footer-col p {
     line-height: 1.6;
}

.footer-col ul {
     list-style: none;
     padding: 0;
     margin: 0;
}

.footer-col ul li {
     margin-bottom: 8px;
}

.footer-col a {
     color: #777;
     text-decoration: none;
}

.footer-col a:hover {
     color: #333;
     text-decoration: underline;
}

.footer-bottom {
     text-align: center;
     border-top: 1px solid #999;
     margin-top: 30px;
     padding-top: 15px;
     font-size: 14px;
     color: #555;
}

.footer-bottom a {
     color: #006b68;
     text-decoration: none;
}

/* Newsletter + soc.sítě*/
.discount {
     color: red;
     font-weight: 700;
}

.newsletter-col p {
     font-size: 14px;
     margin-bottom: 12px;
     color: #777;
}

.footer-newsletter-form {
     display: flex;
     max-width: 280px;
}

.footer-newsletter-form .newsletter-input {
     flex: 1;
     padding: 10px 12px;
     border: 1px solid #555;
     border-radius: 4px 0 0 4px;
     background-color: #333;
     color: #fff;
     font-size: 15px;
     outline: none;
}

.footer-newsletter-form .newsletter-input::placeholder {
     color: #999;
}

.footer-newsletter-form .newsletter-btn {
     background-color: #f39c12;
     color: #fff;
     border: none;
     padding: 0 15px;
     border-radius: 0 4px 4px 0;
     cursor: pointer;
     transition: background 0.3s ease;
}

.footer-newsletter-form .newsletter-btn:hover {
     background-color: #e67e22;
}

/* ikony -soc.síť */
.social-links {
     display: flex;
     gap: 12px;
     margin-top: 10px;
}

.social-links a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background-color: #333;
     color: #fff;
     border-radius: 50%;
     font-size: 18px;
     transition: all 0.3s ease;
     text-decoration: none;
}

.social-links a:hover {
     color: #fff;
     text-decoration: none;
     transform: translateY(-3px);
}

.social-links a[aria-label="Facebook"]:hover {
     background-color: #1877f2;
}

.social-links a[aria-label="Instagram"]:hover {
     background-color: #e1206c;
}

.social-links a[aria-label="TikTok"]:hover {
     background-color: #000000;
     box-shadow: 0 0 5px #00f2fe;
}

/* Doprava a platba */
.box-box {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
}

.boxing {
     max-width: 500px;
     width: 100%;
     height: auto;
     padding: 30px 40px;
     text-align: center;
     margin-top: 120px;
     border: 1px solid #999;
     background: #fff;
}

.zbox {
     position: relative;
     gap: 20px;
     text-align: center;
}

.pbox img {
     width: 170px;
     margin-top: 10%;
}

.pbox h2 {
     font-size: 1.2em;
}

.zbox h1 {
     font-size: 1.8em;
     color: red;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.zbox h2 {
     font-size: 1.2em;
}

.zbox img {
     width: 35px;
     height: 35px;
     margin-top: 20px;
}

.box-text {
     padding: 15px;
}

.zbox-text {
     margin-bottom: 15px;
     font-size: 17px;
     font-weight: 600;
}

.box-btn {
     display: inline-block;
     margin-top: 20px;
     padding: 13px 20px;
     color: #1e292b;
     font-size: 16px;
     font-weight: bold;
     justify-content: center;
     align-items: center;
     background: #e5e5e5;
     text-decoration: none;
     transition: 0.3s;
     cursor: pointer;
}

.prices {
     display: inline-block;
}

.prices-card h2 {
     font-size: 1.1em;
}

.prices-info p {
     font-size: 16px;
     margin-top: 15px;
}

/* Reklamace */
.complaint {
     margin: 100px 0 120px;
}

.complaint h1 {
     font-size: 1.8em;
}

.complaint h2 {
     font-size: 1.1em;
     text-align: left;
     margin-top: 30px;
}

.complaint p {
     margin: 12px;
     font-size: 17px;
}

/* Obchodní podmínky */
.part {
     max-width: 1200px;
     margin: 25px auto;
     margin-top: 110px;
}

.conditions-title h1 {
     font-size: 1.5em;
     margin-top: 50px;
     margin-bottom: 50px;
}

.conditions-text {
     margin: 30px;
}

.conditions-text h2 {
     font-size: 1.1em;
     text-align: left;
     margin-bottom: 15px;
}

.conditions-text p {
     color: #1e292b;
     font-size: 17px;
}

/* Zásady */
.protection-title h1 {
     font-size: 1.5em;
     margin-top: 50px;
     margin-bottom: 50px;
}

.protection-text {
     margin: 30px;
}

.protection-text h2 {
     font-size: 1.1em;
     text-align: left;
     margin-bottom: 15px;
}

.protection-text p {
     color: #1e292b;
     font-size: 17px;
}

/* Cookie */
.cookie-title h1 {
     font-size: 1.5em;
     margin-top: 50px;
     margin-bottom: 50px;
}

.cookie-text {
     margin: 30px;
}

.cookie-text h2 {
     font-size: 1.1em;
     text-align: left;
     margin-bottom: 15px;
}

.cookie-text p {
     color: #1e292b;
     font-size: 17px;
}

/* Cookie bar */
.cookie-bar {
     position: fixed;
     bottom: 20px;
     left: 0;
     max-width: 400px;
     width: 100%;
     background: #f2f2f2;
     border-radius: 8px;
     border: 1px solid #d3d3d3;
     padding: 15px 25px;
     text-align: center;
     z-index: 100;
}

.cookie-bar .consent {
     display: flex;
     align-items: center;
     column-gap: 15px;
     color: #1f3537;
     font-size: 17px;
     font-weight: 600;
}

.cookie-bar .consent h2 {
     font-size: 20px;
     color: #1f3537;
}

.cookie-bar .consent i {
     font-size: 20px;
}

.cookie-bar p {
     padding-top: 10px;
     letter-spacing: 1px;
     color: #1f3537;
}

.cookie-buttons {
     display: flex;
     margin-top: 16px;
     width: 100%;
     align-items: center;
     justify-content: space-between;
}

.button-cookiefull:hover {
     color: #f2f2f2;
     font-weight: 700;
}

.cookie-buttons .button-cookiefull {
     padding: 8px;
     font-size: 15px;
     color: #f2f2f2;
     border: none;
     border-radius: 4px;
     background: #1f3537;
     width: calc(100% / 2 - 10px);
     font-weight: 600;
     letter-spacing: 2px;
     cursor: pointer;
     transition: all 0.2s ease;
}

.cookie-buttons .button-cookiefull:hover {
     background: #1f3537 !important;
}

.cookie-buttons .button-cookieempty {
     padding: 8px;
     border: 1px solid #1f3537;
     border-radius: 4px;
     background: transparent;
     font-weight: 600;
     letter-spacing: 2px;
     cursor: pointer;
     width: calc(100% / 2 - 10px);
     transition: all 0.2s ease;
}

.cookie-buttons .button-cookieempty:hover {
     background: #1f3537;
}

.cookie-buttons .button-cookieempty a {
     color: #1f292b;
     font-size: 15px;
     text-decoration: none;
     font-family: 'Arial' sans-serif;
     font-weight: bold;
}

.cookie-buttons .button-cookieempty a:hover {
     text-decoration: underline;
     color: #fff;
}

/* Šipka */
#scrollToTop {
     display: none;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 1000;
     border: none;
     outline: none;
     background-color: #006b68;
     color: #fff;
     cursor: pointer;
     padding: 10px;
     border-radius: 8px;
     font-size: 15px;
     transition: 0.3s;
     box-shadow: 0 5px 13px rgba(0, 0, 0, 0.2);
}

#scrollToTop:hover {
     transform: translateY(-5px);
}

.container {
     max-width: 1200px;
     margin: 0 auto;
}

.italic {
     font-style: italic;
}

/* Queries - responzivita */
@media (max-width: 768px) {
     .order-form-container {
          margin: 25px 15px;
          padding: 20px;
     }

     .order-options {
          flex-direction: column;
          gap: 20px;
     }

     .form-section {
          padding: 20px;
     }

     .arteshop {
          width: 100%;
          margin: 0 auto;
          margin-top: 40px;
     }

     .products {
          grid-template-columns: 1fr;
     }

     .checkout-steps {
          flex-direction: column;
          gap: 10px;
          font-size: 16px;
          margin-top: 60px;
     }

     .menu {
          justify-content: flex-start;
     }

     .menu ul li {
          margin: 15px;
     }

     .mobile-nav-icon img {
          display: block;
          position: absolute;
          right: 20px;
          top: 16px;
          z-index: 10001;
          /* musí být nad menu */
          cursor: pointer;
     }

     .main-nav {
          display: none;
     }

     .main-nav.open {
          display: flex;
          flex-direction: column;
          position: fixed;
          top: 70px;
          right: 0;
          width: 250px;
          padding: 20px;
          margin: 0;
          background: #f8f7f4;
          gap: 10px;
          z-index: 9999;
     }

     .main-nav.open li {
          width: 100%;
          margin: 0;
     }

     .main-nav.open li a {
          display: block;
          padding: 12px;
     }

     .remove-cart {
          display: block;
     }

     .cart-buttons {
          display: block;
          padding: 5px;
          height: auto;
          justify-content: center;
          align-items: center;
          margin-top: 30px;
          gap: 10px;
     }

     .kosik {
          font-size: 34px;
     }

     .continue-shopping {
          width: 100%;
          margin-bottom: 10px;
          text-align: center;
     }

     .checkout-button {
          width: 100%;
          text-align: center;
          margin-top: 10px;
     }

     .btn {
          margin-bottom: 10px;
     }

     .cart-count {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 23px;
          height: 23px;
          position: absolute;
          top: 15px;
          font-size: 12px;
          color: #fff;
          background: red;
          left: 20px;
          border-radius: 50%;
     }

     .main-nav .kosik {
          font-size: 45px;
     }

     .box-box {
          grid-template-columns: 1fr;
          margin-bottom: 15px;
          margin-left: 5px;
          margin-right: 5px !important;
     }


     .conditions-title h1 {
          font-size: 1em;
          text-align: center;
     }

     .conditions-text h2 {
          font-size: 0.9em;
     }

     .complaint h1 {
          font-size: 1.1em;
          text-align: center;
     }

     .complaint h2 {
          font-size: 0.9em;
          text-align: left;
          margin-top: 30px;
     }
}