/* === RESET === */

:root {

  --content-max-width: 1200px;

  --content-inline-gap: 20px;

  --header-height: 100px;

  --text-link-color: #7a3f1d;

  --text-link-hover-color: #5f2f14;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



button,

input,

select,

textarea {

  font: inherit;

}



body {

  display: flex;

  min-height: 100vh;

  flex-direction: column;

  font-family: 'Baloo 2', cursive;

  background-image: url('../images/backround1.webp');

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  color: #2c1e1e;

}



html, body {

  scroll-behavior: smooth;

}



main {

  width: 100%;

  flex: 1 0 auto;

}



main a:not([class]),

main a:not([class]):visited {

  color: var(--text-link-color);

  text-decoration-color: currentColor;

  text-underline-offset: 2px;

}



main a:not([class]):hover,

main a:not([class]):focus-visible {

  color: var(--text-link-hover-color);

}





.section-light {

  background-color: #a1531f50;

  padding: 80px 10%;

}



section {

  scroll-margin-top: 100px; /* stejná hodnota jako výška menu */

}



/* HLAVIČKA */

header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: var(--header-height);

  z-index: 1000;

  background: #fffaf2;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  padding: 0 30px;

}



/* Levá část – logo */

.header-left {

  justify-self: start;

}



.header-left .logo {

  height: 80px;

  width: auto;

  margin-left: -10px;

}



/* Střed – navigace */

.header-center {

  justify-self: center;

  background: transparent;

  padding: 10px 30px;

}



.nav-links {

  display: flex;

  list-style: none;

  gap: 30px;

  margin: 0;

  padding: 0;

}



.nav-links a {

  font-family: 'Coiny', cursive;

  text-decoration: none;

  font-size: 1.8em;

  color: #333;

  display: inline-block;

  transition: transform 0.2s ease;

}



.nav-links a:hover {

  transform: scale(1.07);

}



/* Pravá část – jazyk + košík */

.header-right {

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 20px;

  background: transparent;

  padding: 10px 20px;

}



.cart-notification {

  position: absolute;

  top: calc(100% + 10px);

  right: 20px;

  width: max-content;

  max-width: min(340px, calc(100vw - 32px));

  padding: 8px 12px;

  border: 0;

  border-radius: 6px;

  background: #a1531f;

  color: #fff;

  font-size: 0.9rem;

  font-weight: 700;

  line-height: 1.3;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.15s ease, visibility 0.15s;

  z-index: 1100;

}



.cart-notification.is-visible {

  opacity: 1;

  visibility: visible;

}



.header-right .cart-icon {

  position: relative;       /* pro absolutně pozicovaný badge */

  display: inline-block;

}



.cart-badge {

  position: absolute;

  top: 23px;

  right: -10px;

  background: #e74c3c;      /* sytě červená */

  color: white;

  font-size: 0.75rem;

  font-weight: bold;

  padding: 2px 6px;

  border-radius: 12px;      /* kulaté rohy */

  white-space: nowrap;

  box-shadow: 0 0 2px rgba(0,0,0,0.3);

  display: none;            /* skryté, pokud je 0 */

}





.product-detail select:focus-visible {

  outline: 3px solid #a1531f;

  outline-offset: 2px;

}



/* Ikona košíku */

.cart-icon {

  font-size: 1.8em;

  text-decoration: none;

  color: #333;

  transition: transform 0.2s ease;

}



.cart-icon:hover {

  transform: scale(1.2);

}



/* HERO */

.hero {

  position: relative; /* pro absolutní pozici ikon */

  overflow-x: clip;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 60px;

  padding: 100px 10% 60px;

  min-height: 100vh; /* celá obrazovka */

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 1s ease, transform 1s ease;

  box-sizing: border-box;

  text-align: center;

}



.hero.show {

  opacity: 1;

  transform: translateY(0);

}



.hero-text {

  max-width: 600px;

}



.hero-text h1,

.hero-text p {

  font-family: 'Coiny', cursive;

  color: #000000de;

  margin: 0;

}



.hero-text h1 {

  font-size: 4em;

  margin-bottom: 15px;

}



.hero-text p {

  font-size: 2.2em;

}



.hero-logo img {

  max-width: 420px;

  height: auto;

}



/* === Slide-in efekty === */

.slide-left {

  opacity: 0;

  transform: translateX(-80%);

  transition: all 0.8s ease;

}



.slide-right {

  opacity: 0;

  transform: translateX(80%);

  transition: all 0.8s ease;

}



.hero.show .slide-left,

.hero.show .slide-right {

  opacity: 1;

  transform: translateX(0);

}



/* === IKONY v hero sekci (dole) === */

.hero-icons {

  position: absolute;

  bottom: 30px;

  left: 50%;

  transform: translateX(-50%) translateY(30px);

  opacity: 0;

  transition: opacity 0.8s ease, transform 0.8s ease;

}



.hero-icons.visible {

  opacity: 1;

  transform: translateX(-50%) translateY(0);

}



/* === Ikonový řádek === */

.icon-row {

  display: flex;

  justify-content: center;

  gap: 80px;

}



.icon-row img {

  width: 80px;

  height: auto;

  transition: transform 0.2s ease;

}



.icon-row img:hover {

  transform: scale(1.1);

}



/*PRODUCT*/

.product-section {

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin-inline: auto;

  padding: 40px 0;

  display: flex;

  flex-direction: column;

  gap: 5px;

  box-sizing: border-box;



}



.product-row {

  width: 100%;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 40px;

  flex-wrap: wrap;

    border-radius: 20px;

  overflow: hidden; /* ořízne obsah, jako je obrázek, pokud přesahuje */

  margin: 5px 0;

}



.product-row.reverse {

  flex-direction: row-reverse;

}



.product-row:nth-child(odd) {

  background-color: #a1531f40; /* světlejší */

}



.product-row:nth-child(even) {

  background-color: #a1531f40; /* tmavší */

}



.product-row:first-child {

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

}



.product-row:last-child {

  border-bottom-left-radius: 20px;

  border-bottom-right-radius: 20px;

}



.product-image-wrapper {

  max-width: 500px;

  height: 500px;

  overflow: hidden;

  border-radius: 12px;

  flex: 1 1 40%;

}



.product-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1.0s ease;

  display: block;

}



.product-image-chaga {

  width: 75%;

  height: 100%;

  object-fit: cover;

  transition: transform 1.0s ease;

  display: block;

}



.product-image:hover {

  transform: scale(1.05);

}



.product-image-chaga:hover {

  transform: scale(1.05);

}



.product-text {

  flex: 1 1 50%;

  min-width: 280px;

  padding: 40px;

}



.product-text h2 {

  font-family: Coiny;

  font-size: 2.2rem;

  margin-bottom: 10px;

  color: #000000;

}



.product-text p {

  font-weight: bold;

  line-height: 1.7;

  font-size: 1.1rem;

}



.product-actions {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 22px;

  flex-wrap: wrap;

}



.buy-button,

.read-more-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  min-width: 130px;

  line-height: 1.15;

  text-align: center;

  font-family: 'Coiny', cursive;

  font-size: 1.1em;

  padding: 12px 24px;

  border: 2px solid #a1531f;

  border-radius: 8px;

  text-decoration: none;

  cursor: pointer;

  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;

}



.buy-button {

  background-color: #a1531f;

  color: white;

}



.read-more-link {

  background: rgba(255, 255, 255, 0.92);

  color: var(--text-link-color);

}



.read-more-link:hover,

.read-more-link:focus-visible {

  color: var(--text-link-hover-color);

  background: #fff;

  transform: translateY(-2px);

}



.buy-button:hover {

  background-color: #853f17;

  transform: scale(1.05);

}



/*ABOUT*/



.about-box {

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin: 80px auto;

  padding: 40px;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 16px;

  box-shadow: 0 0 20px rgba(0,0,0,0.1);

  box-sizing: border-box;

}



.about-inner {

  font-size: 1.2rem;

  line-height: 1.7;

}



.about-box h2 {

  font-family: 'Coiny', cursive;

  font-size: 2em;

  margin-bottom: 20px;

  color: #2c1e1e;

}



.about-box p {

  margin-bottom: 20px;

  font-family: 'Baloo 2', cursive;

  color: #2c1e1e;

}



/* KONTAKT */



.contact-section {

  padding: 80px 10%;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 16px;

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin: 0 auto 60px;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

  box-sizing: border-box;

}



.contact-inner {

  text-align: center;

}



.contact-inner h2 {

  font-family: 'Coiny', cursive;

  font-size: 2.4em;

  margin-bottom: 10px;

}



.contact-inner p {

  margin-bottom: 30px;

  font-size: 1.2em;

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 15px;

  max-width: 600px;

  margin: 0 auto;

}



.contact-form input,

.contact-form textarea {

  padding: 12px;

  font-size: 1.1em;

  border-radius: 8px;

  border: 2px solid #ccc;

}



.contact-form button {

  background-color: #a1531f;

  color: white;

  font-family: 'Coiny', cursive;

  font-size: 1.2em;

  padding: 14px;

  border: none;

  border-radius: 10px;

  cursor: pointer;

  transition: background 0.2s ease;

}



.contact-form button:hover {

  background-color: #853f17;

}



.contact-form button:disabled {

  cursor: not-allowed;

  opacity: 0.55;

}



.cap-wrapper {

  display: flex;

  justify-content: center;

  min-height: 58px;

}



.cap-wrapper cap-widget {

  --cap-widget-width: 260px;

  --cap-background: #fffaf2;

  --cap-border-color: #d7c5b7;

  --cap-focus-ring: #a1531f;

}



.form-honeypot {

  position: absolute;

  left: -10000px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



.form-config-error,

.form-response {

  margin: 0;

  padding: 10px 12px;

  border-radius: 6px;

  background: #f5e9df;

  color: #6f3515;

  font-size: 0.95rem;

}



.form-response.is-success {

  background: #e8f2e7;

  color: #285b2d;

}



.form-response.is-error {

  background: #f4e5e2;

  color: #7a3028;

}



/* ====== Footer ====== */

.footer {

  position: relative;

  flex-shrink: 0;

  margin-top: auto;

  background: #111;

  color: #eee;

  font-family: 'Baloo 2', cursive;

  overflow: hidden; /* zabrání přesahům */

  font-size: 0.9rem;

}



/* Horní část – grid */

.footer-top {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 1rem;

  padding: 1.5rem 1rem 0.5rem;

}



/* Jednotlivé sekce */

.footer-section {

  position: relative;

  text-align: center;

  padding: 0 1rem;

}



/* Oddělovače mezi sekcemi */

.footer-section:not(:first-child)::before {

  content: '';

  position: absolute;

  left: 0;

  top: 20%;

  bottom: 20%;

  width: 1px;

  background: #333;

}



/* Nadpis sekce */

.footer-section h4 {

  margin: 0 0 0.5rem;

  font-size: 1.1rem;

  font-weight: balder;

  letter-spacing: 0.05em;

  color: #fff;

}



/* Odkazy */

.footer-section a {

  color: #ddd;

  text-decoration: none;

  transition: color 0.2s;

}

.footer-section a:hover {

  color: #a1531f;

}



/* Kontejner ikon */

.footer-icons {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 0.75rem;

  margin-top: 0.5rem;

}



/* Ikony – jednotná, větší velikost */

.footer-icons .icon {

  width: 90px;

  height: auto;

  display: block;

}



/* Spodní řádek (copyright) */

.footer-bottom {

  text-align: center;

  padding: 0.5rem;

  font-size: 0.9rem;

  color: #777;

}



.icon-space {

  margin-right: 8px;

}



.footer-mushroom {

  position: absolute;

  bottom: 0;

  width: 80px;

  height: auto;

  display: block;

  pointer-events: none;

  opacity: 0.9;

  z-index: 1;

  transform-origin: bottom center;

}



.footer-mushroom.right {

  right: 0;

}



/*ESHOP*/



body.eshop-page {

  padding-top: 120px;

}



.shop-container {

  display: flex;

  align-items: flex-start;

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 40px 20px;

  gap: 60px;

  box-sizing: border-box;

}



.shop-sidebar {

  flex: 0 0 300px;

  min-width: 280px;

  max-width: 360px;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 16px;

  padding: 30px 20px;

  box-shadow: 0 0 20px rgba(0,0,0,0.1);

  box-sizing: border-box;

}



.shop-sidebar h2 {

  font-size: 1.6em;

  margin-bottom: 20px;

  text-align: center;

}



.category-block {

  margin-bottom: 30px;

}



.category-block h3 {

  font-size: 1.2em;

  margin-bottom: 10px;

  cursor: default;

  user-select: none;

}



.category-block ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: block;

}



.product-list li {

  margin-bottom: 12px;

  padding: 0;

  background-color: rgba(255, 255, 255, 0.72);

  color: #2c1e1e;

  border-radius: 8px;

  text-align: left;

  cursor: pointer;

  overflow: hidden;

  border: 1px solid rgba(161, 83, 31, 0.18);

  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}



.product-list li:hover {

  background-color: #fff;

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(75, 44, 28, 0.12);

}



.product-list li a {

  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 82px;

  padding: 8px 10px;

  color: inherit;

  text-decoration: none;

}



.product-preview-image {

  width: 58px;

  height: 68px;

  flex: 0 0 58px;

  object-fit: contain;

}



.product-preview-content {

  display: flex;

  min-width: 0;

  flex: 1;

  flex-direction: column;

  gap: 4px;

}



.product-preview-name {

  font-weight: 700;

  line-height: 1.2;

}



.product-preview-price {

  color: #a1531f;

  font-size: 1.05rem;

  font-weight: 800;

}



.product-preview-link[aria-current="page"] {

  box-shadow: inset 4px 0 #a1531f;

  background: #fff;

}



.product-list li:has(a:focus-visible) {

  outline: 3px solid currentColor;

  outline-offset: 3px;

}



.product-detail {

  flex: 1 1 0;

  min-width: 0;

  width: 100%;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 16px;

  padding: 40px;

  box-shadow: 0 0 20px rgba(0,0,0,0.1);

  font-size: 0.9em;

  min-height: 500px;

  box-sizing: border-box;

}



.product-card,

.product-info {

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

}



.product-detail img {

  width: 360px;

  max-width: 100%;

  aspect-ratio: 1126 / 1397;

  height: auto;

  object-fit: contain;

  float: left;

  margin-right: 40px;

  border-radius: 12px;

}



.product-detail h1,

.product-detail h2 {

  font-size: 2.2em;

  margin-bottom: 14px;

  line-height: 1.25;

}



.product-detail p {

  line-height: 1.6;

}



.product-short-desc {

  width: 100%;

  font-size: 1.15em;

  margin-bottom: 20px;

  color: #2f2724;

  max-width: none;

  box-sizing: border-box;

}



.product-long-desc {

  margin-bottom: 24px;

  color: #3a302c;

}



.product-more-link {

  display: inline-block;

  margin-left: 0.35em;

  color: var(--text-link-color);

  font-weight: 700;

}



.product-more-link:hover,

.product-more-link:focus-visible {

  color: var(--text-link-hover-color);

}



.product-purchase-summary {

  display: flex;

  align-items: flex-end;

  gap: 42px;

  margin-bottom: 36px;

  flex-wrap: wrap;

}



.product-price-box,

.product-amount-box {

  display: flex;

  flex-direction: column;

}



.product-price-label,

.product-amount-label {

  font-size: 0.95em;

  color: #7a6a62;

  margin-bottom: 4px;

}



.product-price {

  font-family: 'Coiny', cursive;

  font-size: 2.5em;

  line-height: 1;

  color: #a1531f;

}



.product-amount-value {

  font-size: 1.15em;

  font-weight: 700;

  color: #2f2724;

}



.product-detail .buy-block {

  margin-top: 0;

  margin-bottom: 28px;

  display: flex;

  align-items: center;

  gap: 18px;

  flex-wrap: nowrap;

}



.product-detail .buy-block label {

  font-size: 1em;

  font-weight: 700;

  color: #2f2724;

  margin-right: 4px;

  white-space: nowrap;

}



.product-stock {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 38px;

  margin-bottom: 26px;

  font-size: 1em;

  font-weight: 700;

  opacity: 0.90;

}



.stock-dot {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  display: inline-block;

  flex-shrink: 0;

}



.product-stock.in_stock .stock-dot {

  background: #2e9b45;

  box-shadow: 0 0 0 4px rgba(46, 155, 69, 0.12);

}



.product-stock.in_stock .stock-text {

  color: #2e7d32;

}



.product-stock.restocking .stock-dot {

  background: #d98b1f;

  box-shadow: 0 0 0 4px rgba(217, 139, 31, 0.12);

}



.product-stock.restocking .stock-text {

  color: #a56711;

}



.product-stock.out_of_stock .stock-dot {

  background: #c64646;

  box-shadow: 0 0 0 4px rgba(198, 70, 70, 0.12);

}



.product-stock.out_of_stock .stock-text {

  color: #a33434;

}



.product-meta {

  clear: both;

  width: 100%;

  border-top: 1px solid rgba(0,0,0,0.08);

  padding-top: 26px;

  margin-top: 36px;

  box-sizing: border-box;

}



.product-meta p {

  width: 100%;

  font-size: 1em;

  margin: 0 0 12px;

  line-height: 1.7;

  color: #3a302c;

}



.product-meta .disclaimer {

  font-size: 0.95em;

  color: #a1531f;

  font-style: italic;

}



.product-detail select,

.product-detail button {

  font-family: 'Coiny', cursive;

  font-size: 1.05em;

  padding: 12px 18px;

  border-radius: 8px;

  border: none;

}



.product-detail select {

  min-width: 140px;

  appearance: none;

  -webkit-appearance: none;

  padding-right: 44px;

  font-family: 'Baloo 2', sans-serif;

  font-weight: 700;

  line-height: 1.25;

  background-color: #e9e9ee;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 16px center;

  background-size: 12px 8px;

  color: #111;

}



.product-detail button {

  background-color: #a1531f;

  color: white;

  cursor: pointer;

  transition: transform 0.2s ease, background-color 0.2s ease;

  white-space: nowrap;

}



.product-detail button:hover {

  transform: scale(1.05);

  background-color: #853f17;

}



.product-detail button:disabled,

.product-detail select:disabled {

  cursor: not-allowed;

  opacity: 0.55;

}



.product-detail button:disabled:hover {

  transform: none;

  background-color: #a1531f;

}



/*CART*/ 



h1, h2, h3,

.product-detail h2,

.shop-sidebar h2,

.category-block h3 {

  font-family: 'Coiny', cursive;

}



.cart-main {

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin: 140px auto 40px; /* ← Posuneme celý box dolů */

  padding: 40px 20px;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 16px;

  box-shadow: 0 0 20px rgba(0,0,0,0.1);

}



.cart-main h1 {

  text-align: center;

  font-size: 3em;

  margin-bottom: 30px;

  font-family: 'Coiny', cursive;

}



.cart-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 25px;

  padding: 15px 20px;

  background-color: #f4e7df;

  border-radius: 12px;

}



.cart-item-name {

  font-size: 1.2em;

  flex: 1;

}



.cart-item-controls {

  display: flex;

  align-items: center;

  gap: 10px;

}



.cart-item-controls button {

  font-size: 1.2em;

  padding: 4px 12px;

  cursor: pointer;

  border: none;

  border-radius: 6px;

  background-color: #a1531f;

  color: white;

  transition: background 0.2s ease;

}



.cart-item-controls button:hover {

  background-color: #853f17;

}



.cart-summary {

  text-align: right;

  font-size: 1.4em;

  margin-top: 40px;

  padding: 0 20px 20px;

}



.checkout-button {

  display: inline-block;

  margin-top: 20px;

  padding: 14px 24px;

  background-color: #a1531f;

  color: white;

  text-decoration: none;

  font-family: 'Coiny', cursive;

  border-radius: 8px;

  transition: background 0.2s ease;

}



.cart-summary-buttons {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 20px;

  gap: 15px;

}



.continue-shopping-button {

  display: inline-block;

  margin-top: 20px;

  padding: 14px 24px;

  background-color: #a1531f;

  color: white;

  text-decoration: none;

  font-family: 'Coiny', cursive;

  border-radius: 8px;

  transition: background 0.2s ease;

}



.checkout-button,

.continue-shopping-button {

  padding: 9px 18px;

  font-size: 0.8em;

}



.continue-shopping-button:hover {

  background-color: #853f17;

}



.checkout-button:hover {

  background-color: #853f17;

}



.cart-item-name-wrap {

  display: flex;

  align-items: center;

  gap: 14px;

  flex: 1;

}



.cart-item-thumb {

  width: 52px;

  height: 52px;

  object-fit: cover;

  border-radius: 8px;

  background: #fff;

  flex-shrink: 0;

}



@media (max-width: 768px) {

  .cart-summary-buttons {

    display: flex;

    gap: 12px;

  }



  .checkout-button,

  .continue-shopping-button {

    flex: 1;

    min-height: 48px;

    max-height: 58px;



    display: flex;

    align-items: center;

    justify-content: center;



    text-align: center;

    line-height: 1.15;

    font-size: 0.85em;



    margin-top: 0;

    padding: 8px 10px;

    box-sizing: border-box;

  }

}



/*ORDER*/



body.order-page {

  padding-top: 120px;

}



h1, h2, h3,

.product-detail h2,

.shop-sidebar h2,

.category-block h3 {

  font-family: 'Coiny', cursive;

}



.order-container {

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin: 0 auto;

  margin-bottom: 40px;

  padding: 40px 20px;

  background: rgba(255,255,255,0.9);

  border-radius: 16px;

  box-shadow: 0 0 30px rgba(0,0,0,0.1);

}



.order-container h1, .order-container h2 {

  font-size: 2em;

  margin-bottom: 20px;

  text-align: center;

}



.order-summary {

  margin-bottom: 40px;

  padding: 20px;

  border: 2px solid #a1531f;

  border-radius: 12px;

  background-color: #fff;

  font-size: 1.1em;

}



.order-summary ul {

  list-style: none;

  padding: 0;

}



.order-summary li {

  margin-bottom: 10px;

}



#order-form {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



#order-form input,

#order-form textarea,

.shipping-options label {

  font-size: 1.1em;

  padding: 12px;

  border: 2px solid #ccc;

  border-radius: 8px;

}



#order-address {

  resize: vertical;

}



.shipping-options {

  padding: 10px;

  background: #fdf7f4;

  border-radius: 8px;

  border: 1px solid #ddd;

}



.shipping-options label {

  display: block;

  margin-bottom: 10px;

  cursor: pointer;

}



.shipping-options input[type="radio"],

.payment-options input[type="radio"] {

  width: auto;

  height: auto;

  accent-color: #a1531f;  /* stejná akcentní barva jako tlačítko */

  outline: none;          /* odstraní nežádoucí rámeček */

}



.terms-checkbox label {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  line-height: 1.45;

  cursor: pointer;

}



.terms-checkbox label > span {

  min-width: 0;

}



#order-form .terms-checkbox input[type="checkbox"] {

  width: 18px;

  height: 18px;

  flex: 0 0 18px;

  margin-top: 0.2em;

  padding: 0;

  border: 0;

  border-radius: 3px;

  accent-color: #a1531f;

}



#order-form button {

  background-color: #a1531f;

  color: white;

  font-family: 'Coiny', cursive;

  font-size: 0.9em;

  padding: 15px;

  border: none;

  border-radius: 10px;

  cursor: pointer;

  transition: background 0.2s ease;

}



#order-form button:hover {

  background-color: #853f17;

}



/* ========= Platba – ladí se se sekcí dopravy ========= */

.payment-options {

  padding: 10px;

  background: #fdf7f4;           /* stejná barva jako shipping-options */

  border-radius: 8px;

  border: 1px solid #ddd;

  margin-bottom: 20px;

}



.payment-options label {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 10px;

  cursor: pointer;

  font-size: 1.1em;

}



.payment-options input[type="radio"] {

  width: auto;

  height: auto;

  accent-color: #a1531f;         /* stejná akcentní barva jako tlačítko */

}



.order-preview {

  margin: 20px 0;

  padding: 20px;

  border: 2px solid #a1531f;

  border-radius: 12px;

  background-color: #fff;

  font-size: 1.1em;

}

.order-preview h3 {

  font-family: 'Coiny', cursive;

  margin-bottom: 10px;

  text-align: center;

}

.order-preview ul {

  list-style: none;

  padding: 0;

}

.order-preview li {

  margin-bottom: 8px;

}



/*SHROOMS*/



/* === Obecný textový blok (historie, dodavatelé) === */

.text-block {

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin: 140px auto;

  margin-bottom: 40px;

  padding: 40px;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 16px;

  box-shadow: 0 0 20px rgba(0,0,0,0.1);

  font-family: 'Baloo 2', cursive;

  color: #2c1e1e;

  line-height: 1.7;

  box-sizing: border-box;

}



.text-block h1,

.text-block h2 {

  font-family: 'Coiny', cursive;

  font-size: 2em;

  margin-bottom: 20px;

  text-align: center;

}



.text-block p {

  margin-bottom: 20px;

  font-size: 1.1rem;

}



/* === Sekce s houbami === */

.mushroom-section {

  display: flex;

  flex-direction: column;

  gap: 40px;

  padding: 60px 0;

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin: 0 auto;

  box-sizing: border-box;

}

.mushroom-block {

  width: 100%;

  box-sizing: border-box;

  display: flex;

  flex-wrap: wrap;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 16px;

  box-shadow: 0 0 20px rgba(0,0,0,0.1);

  overflow: hidden;

}



.mushroom-block[id] {

  scroll-margin-top: calc(var(--header-height) + 20px);

}



.mushroom-block img {

  max-width: 400px;

  width: 100%;

  height: auto;

  object-fit: cover;

  flex: 1 1 300px;

}



.mushroom-block div {

  flex: 1 1 400px;

  padding: 30px;

  font-family: 'Baloo 2', cursive;

}



.mushroom-block h2 {

  font-family: 'Coiny', cursive;

  font-size: 1.6em;

  margin-bottom: 15px;

  color: #2c1e1e;

}



.mushroom-block h3 {

  padding-bottom: 10px;

}



.mushroom-block p {

  font-size: 1.05rem;

  line-height: 1.6;

  color: #2c1e1e;

  margin-bottom: 15px;

}



/* Poznámka o EU omezeních */

.disclaimer {

  font-size: 0.9rem;

  font-style: italic;

  color: #a1531f;

}

.farm-gallery.split-layout {

  display: flex;

  flex-wrap: wrap;

  gap: 2rem;

  margin: 2rem 0;

  align-items: stretch;

}



.farm-column {

  display: flex;

  flex-direction: column;

  gap: 2rem;

  flex: 1 1 48%;

}



.farm-photo {

  text-align: center;

  height: 100%;

}



.farm-photo img {

  width: 100%;

  height: auto;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  display: block;

}



.farm-photo p {

  margin-top: 0.5rem;

  font-size: 0.95rem;

  color: #555;

}



.farm-photo.tall {

  flex: 1 1 48%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.farm-photo.tall img {

  height: 100%;

  object-fit: cover;

}





/*TERMS*/



body.terms-page {

  padding-top: 120px;

}



h1, h2, h3,

.product-detail h2,

.shop-sidebar h2,

.category-block h3 {

  font-family: 'Coiny', cursive;

}



.terms-content {

  width: calc(100% - (2 * var(--content-inline-gap)));

  max-width: var(--content-max-width);

  margin: auto;

  margin-top: 40px;

  padding: 40px 40px;

  background: rgba(255, 255, 255, 0.95);

  border-radius: 16px;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

  margin-bottom: 40px;

}



.terms-content h1 {

  font-size: 2em;

  text-align: center;

  margin-bottom: 30px;

}



.terms-content section {

  margin-bottom: 30px;

}



.terms-content h2 {

  font-size: 1.2em;

  margin-bottom: 10px;

  color: #a1531f;

}



.terms-content p {

  margin-bottom: 16px;

  text-align: justify;

}



/*THANK YOU*/



body.thank-page {

  padding-top: 120px;

}



.thank-you-container {

  padding: 32px;

}



.payment-status-box {

  display: flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 26px;

  border-bottom: 1px solid rgba(161, 83, 31, 0.2);

}



.payment-status-icon {

  display: inline-flex;

  width: 52px;

  height: 52px;

  flex: 0 0 52px;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #a1531f;

  color: #fff;

  font-family: 'Coiny', cursive;

  font-size: 1.5rem;

}



.thank-you-container .payment-status-box h1 {

  margin: 0 0 4px;

  text-align: left;

}



.payment-status-box[data-status="pending"] .payment-status-icon {

  background: #b97822;

}



.payment-status-box[data-status="cancelled"] .payment-status-icon {

  background: #8b3e2f;

}



.thank-you-content {

  padding-top: 28px;

}



.thank-you-content h2 {

  text-align: left;

}



.next-steps {

  display: grid;

  gap: 10px;

}



.thank-you-contact {

  margin-top: 26px;

}



.thank-you-contact a {

  color: var(--text-link-color);

  font-weight: 700;

}



.thank-you-actions {

  display: flex;

  gap: 12px;

  margin-top: 28px;

  flex-wrap: wrap;

}



@media (max-width: 600px) {

  .thank-you-container {

    padding: 22px 18px;

  }



  .payment-status-box {

    align-items: flex-start;

  }



  .thank-you-container .payment-status-box h1 {

    font-size: 1.45rem;

  }



  .thank-you-actions > a {

    width: 100%;

    max-width: none;

  }

}



/*SHIPPING PAYMENT*/



body.shipping-page {

  padding-top: 120px;

}





/* Skrýt hamburger mimo mobilní zobrazení */

@media (min-width: 769px) {

  .menu-toggle {

    display: none;

  }

}



/*MOBILNI ZOBRAZENI*/



@media (max-width: 768px) {



/*BODY*/



  html, body {

    min-height: 100%;

    width: 100%;

    background-size: cover; /* Nebo cover, podle výsledku */

    background-repeat: no-repeat;

    background-position: top center;

    background-attachment: scroll; /* Důležité na mobilech */

    overflow-x: hidden;

  }



  body {

    height: auto;

    min-height: 100vh;

    padding-top: 100px; /* nebo kolik potřebuješ kvůli fixní hlavičce */

  }



/*NAV*/



header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: var(--header-height);

  z-index: 999;

  background: #fffaf2;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 16px;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}



  .header-left {

    flex: 0 0 auto;

  }



  .header-left .logo {

    height: 72px;

    margin-left: 0;

  }



  .header-center {

    flex: 0 0 auto;

    padding: 0;

  }



  .header-right {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0;

  }



  .menu-toggle {

    display: flex;

    cursor: pointer;

    z-index: 1001;

  }



  .nav-links {

    display: none;

    position: fixed;

    top: var(--header-height);

    left: 0;

    width: 100%;

    height: auto;

    max-height: calc(100vh - var(--header-height));

    overflow-y: auto;

    background: #fffaf2;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    list-style: none;

    margin: 0;

    padding: 30px 20px;

    z-index: 1000;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

  }



  .nav-links.active {

    display: flex;

  }



  .nav-links li a {

    font-family: 'Coiny', cursive;

    font-size: 1.2em;

    color: #333;

    text-decoration: none;

    padding: 10px;

    text-align: center;

    display: block;

  }



/*Hero*/



  .hero {

    flex-direction: column;

    padding: 80px 20px 40px;

    gap: 30px;

    min-height: auto;

    text-align: center;

  }



  .hero-text h1 {

    font-size: 2.2em;

  }



  .hero-text p {

    font-size: 1.3em;

  }



  .hero-logo img {

    max-width: 240px;

  }



  .icon-row {

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

  }



  .icon-row img {

    width: 50px;

  }



  .hero-icons {

    position: static;

    transform: none;

    margin-top: 20px;

    opacity: 1;

  }



  .hero-icons.visible {

    transform: none;

    opacity: 1;

  }



/*PRODUCTS*/



  .product-row,

  .product-row.reverse {

    flex-direction: column;

    gap: 20px;

    padding: 20px;

  }



  .product-image-wrapper {

    max-width: 100%;

    height: auto;

  }



  .product-image {

    height: auto;

    max-height: 300px;

  }



  .product-text {

    padding: 10px 0;

  }



  .product-text h2 {

    font-size: 1.6rem;

    text-align: center;

  }



  .product-text p {

    font-size: 1rem;

    text-align: center;

  }



  .product-actions {

    justify-content: center;

    gap: 10px;

  }



  .buy-button,

  .read-more-link {

    display: flex;

    flex: 1 1 130px;

    max-width: 180px;

    transform: none;

    font-size: 1em;

    padding: 10px 20px;

  }

  

  .buy-button:hover {

    background-color: #853f17;

    transform: translateY(-2px);

  }



  /*ABOUT*/



  .about-box {

    margin: 40px auto;

    padding: 20px;

    border-radius: 12px;

  }



  .about-inner {

    font-size: 1rem;

    line-height: 1.6;

  }



  .about-box h2 {

    font-size: 1.6em;

    text-align: center;

  }



  .about-box p {

    font-size: 1rem;

    text-align: justify;

  }



  /*KONTAKT*/



   .contact-section {

    padding: 40px 20px;

    margin: 0 auto 40px;

    border-radius: 12px;

  }



  .contact-inner h2 {

    font-size: 1.8em;

  }



  .contact-inner p {

    font-size: 1em;

    line-height: 1.5;

  }



  .contact-form {

    width: 100%;

    max-width: 100%;

    gap: 12px;

  }



  .contact-form input,

  .contact-form textarea {

    font-size: 1em;

    padding: 10px;

  }



  .contact-form button {

    font-size: 1em;

    padding: 12px;

  }



  /*FOOTER*/



  .footer-top {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .footer-section {

    padding: 1rem 0;

  }



  .footer-section:not(:first-child)::before {

    content: none; /* odstraníme oddělovače */

  }



  .footer-icons {

    flex-direction: row;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: center;

  }



  .footer-icons .icon {

    width: 60px;

  }



  .footer-bottom {

    font-size: 0.8rem;

    padding: 1rem 0;

  }



  .footer-mushroom.right {

    width: 60px;

    opacity: 0.7;

  }



  /*ESHOP*/



  .shop-container {

    flex-direction: column;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    gap: 24px;

    padding: 20px 16px;

  }



  .shop-sidebar {

    width: 100%;

    min-width: 0;

    max-width: none;

    padding: 20px 18px;

  }



  .shop-sidebar .category-block {

    min-width: 0;

    margin-bottom: 0;

  }



  .product-list {

    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    min-width: 0;

    padding: 4px 0 0;

    overflow: visible;

  }



  .product-list li {

    width: 100%;

    min-width: 0;

    margin-bottom: 0;

  }



  .product-list li a {

    min-width: 0;

    min-height: 174px;

    height: 100%;

    padding: 12px 8px;

    flex-direction: column;

    justify-content: space-between;

    gap: 8px;

    text-align: center;

    overflow-wrap: anywhere;

  }



  .product-preview-image {

    width: min(90px, 100%);

    height: 104px;

    flex-basis: 104px;

  }



  .product-preview-content {

    width: 100%;

    flex: 0 0 auto;

    align-items: center;

  }



  .product-preview-name {

    font-size: 0.95rem;

  }



  .product-preview-price {

    font-size: 1.1rem;

  }



  .product-detail {

    flex: 0 0 auto;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    min-height: 0;

    padding: 20px;

    font-size: 1em;

    overflow-wrap: anywhere;

  }



  .shop-container.has-product .product-detail {

    order: -1;

  }



  .product-card,

  .product-info,

  .product-media {

    min-width: 0;

    max-width: 100%;

  }



  .product-detail img {

    width: min(280px, 100%);

    float: none;

    display: block;

    margin: 0 auto 20px;

    max-width: 100%;

  }



  .product-detail .buy-block {

    flex-direction: column;

    align-items: stretch;

  }



  .product-detail select,

  .product-detail button {

    width: 100%;

    font-size: 1em;

  }



  /*CART*/



    .cart-main {

    margin: 120px 16px 40px;

    padding: 20px;

  }



  .cart-main h1 {

    font-size: 2.2em;

  }



  .cart-item {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    padding: 12px 16px;

  }



  .cart-item-name {

    font-size: 1.1em;

    width: 100%;

  }



  .cart-item-controls {

    width: 100%;

    justify-content: space-between;

  }



  .cart-summary {

    font-size: 1.1em;

    text-align: center;

    padding: 20px 0;

  }



  .checkout-button {

    width: 100%;

    text-align: center;

    font-size: 1em;

    padding: 12px;

  }



  /*ORDER*/



    .order-container {

    padding: 20px;

    margin: 100px 16px 40px;

  }



  .order-container h1,

  .order-container h2 {

    font-size: 1.6em;

  }



  .order-summary,

  .order-preview {

    padding: 16px;

    font-size: 1em;

  }



  #order-form input,

  #order-form textarea {

    font-size: 1em;

    padding: 10px;

  }



  .shipping-options,

  .payment-options {

    padding: 10px;

  }



  .payment-options label {

    flex-direction: column;

    align-items: flex-start;

  }



  #order-form button {

    font-size: 1em;

    width: 100%;

    padding: 14px;

    margin-top: 10px;

  }



  #packeta-button {

    width: 100%;

    padding: 10px;

    font-size: 1em;

  }



  #packeta-selected {

    font-size: 0.95em;

    text-align: center;

  }



  /*TERMS*/



    .terms-content {

    padding: 20px;

    margin: 100px 16px 40px;

  }



  .terms-content h1 {

    font-size: 1.6em;

  }



  .terms-content h2 {

    font-size: 1.1em;

  }



  .terms-content p,

  .terms-content a {

    font-size: 1em;

  }



  .terms-content p a {

    display: block;

    margin-top: 10px;

  }



  .centered-header {

    text-align: center;

  }

}



@media (max-width: 768px) {

  .cart-main .cart-summary-buttons {

    display: flex;

    gap: 12px;

    align-items: stretch;

  }



  .cart-main .cart-summary-buttons .checkout-button,

  .cart-main .cart-summary-buttons .continue-shopping-button {

    width: auto;

    flex: 1;

    min-height: 48px;

    max-height: 48px;

    margin-top: 0;

    padding: 8px 10px;

    font-size: 0.85em;

    line-height: 1.15;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

  }

}













.visually-hidden {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



.menu-toggle {

  appearance: none;

  width: 44px;

  height: 44px;

  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  align-items: center;

  justify-content: center;

  flex: 0 0 44px;

}



.menu-toggle span,

.menu-toggle span::before,

.menu-toggle span::after {

  display: block;

  width: 24px;

  height: 2px;

  border-radius: 2px;

  background: currentColor;

  transition: transform 0.2s ease, background-color 0.2s ease;

}



.menu-toggle span {

  position: relative;

}



.menu-toggle span::before,

.menu-toggle span::after {

  position: absolute;

  left: 0;

  content: '';

}



.menu-toggle span::before {

  top: -7px;

}



.menu-toggle span::after {

  top: 7px;

}



.menu-toggle[aria-expanded="true"] span {

  background: transparent;

}



.menu-toggle[aria-expanded="true"] span::before {

  top: 0;

  transform: rotate(45deg);

}



.menu-toggle[aria-expanded="true"] span::after {

  top: 0;

  transform: rotate(-45deg);

}



.menu-toggle:focus-visible,

.product-list a:focus-visible {

  outline: 3px solid currentColor;

  outline-offset: 3px;

}

}