:root{

  --cream:#f7f1e6;

  --cream-deep:#efe6d4;

  --sand:#e7dcc4;

  --taupe:#a9835a;

  --taupe-dark:#8c6a44;

  --ink:#3a2f22;

  --ink-soft:#6b5d49;

  --line:#d9cbaf;

  --white:#fffdf9;

  --paper-shadow:rgba(58,47,34,.12);

  --hero-bg:#f4ebdc;

}

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

html{scroll-behavior:smooth;}

body{

  font-family:'Tahoma', 'Lora', serif;

  color:var(--ink);

  background:

    radial-gradient(circle at 12% 18%, rgba(255,255,255,.48) 0, rgba(255,255,255,0) 22%),

    radial-gradient(circle at 88% 12%, rgba(255,255,255,.34) 0, rgba(255,255,255,0) 20%),

    linear-gradient(180deg, #f8f2e8 0%, #f3eadc 100%);

  -webkit-font-smoothing:antialiased;

  position:relative;  

  isolation:isolate;

}

h1, h2, h3, .logo {

  font-family: 'Lora', 'Tahoma', serif;

}

a{color:inherit;text-decoration:none;}

ul{list-style:none;}

img,svg{display:block;max-width:100%;}

.container{max-width:1320px;margin:0 auto;padding:0 40px;}



img[aria-hidden="true"]{flex:none;}



body::before{

  content:'';

  position:fixed;

  inset:0;

  pointer-events:none;

  background-image:

    linear-gradient(rgba(58,47,34,.028) 1px, transparent 1px),

    linear-gradient(90deg, #3a2f2205 1px, transparent 1px);

  background-size:34px 34px;

  mix-blend-mode:multiply;

  opacity:.35;

  z-index:-1;

}



/* ---------- Top bar ---------- */

.topbar{

  background:var(--cream-deep);

  border-bottom:1px solid var(--line);

  font-size:11px;

  letter-spacing:.04em;

  color:var(--ink-soft);

}

.topbar .container{

  display:flex;justify-content:center;align-items:center;

  height:35px;

}

.topbar .row{display:flex;justify-content:center;gap:48px;width:100%;}

.topbar span{display:flex;align-items:center;gap:8px;white-space:nowrap;}

.topbar img{width:18px;height:18px;flex:none;object-fit:contain;}

@media (max-width:900px){ .topbar .row{gap:22px} .topbar span:nth-child(3){display:none} }

@media (max-width:640px){ .topbar span:nth-child(2){display:none} }



/* ---------- Header ---------- */

header{

  background:var(--cream);

  padding:22px 0;

}

header .container{

  display:flex;align-items:center;justify-content:space-between;

  gap:24px;

}

.logo{

  display:flex;align-items:center;gap:10px;

  font-size:30px;letter-spacing:.16em;font-weight:700;color:var(--ink);

}

.logo img{width:160px;object-fit:contain;}

.header-icons{display:flex;align-items:center;gap:26px;}

.header-icons img{width:20px;height:20px;cursor:pointer;object-fit:contain;}

.cart-wrap{position:relative;}

.cart-badge{

  position:absolute;top:-8px;right:-9px;background:var(--taupe-dark);color:#fff;

  font-size:10px;width:16px;height:16px;border-radius:50%;

  display:flex;align-items:center;justify-content:center;

}

/* ---------- Hero ---------- */

.hero{

  position:relative;

  min-height:640px;

  background:var(--hero-bg);

  overflow:hidden;

}

.hero .container{

  position:relative;

  min-height:640px;

  display:block;

  padding-top:90px;

  padding-bottom:100px;

}

.hero-media {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: auto;

  width: 90%;

  z-index: 0;

  background:var(--hero-bg);

  filter:saturate(.95) contrast(1.02) drop-shadow(-18px 20px 28px rgba(58,47,34,.12));

}



.hero-media .hero-art-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: right center;

  background:var(--hero-bg);

}



.hero-text .divider{

  display:flex;align-items:center;gap:14px;margin:26px 0 26px;

  color:var(--taupe-dark);

}

.hero-text .divider .l1, .hero-text .divider .l2{height:2px;width:70px;background:var(--line);border-radius:999px;transform:rotate(-1deg);}

.hero-text .divider img{width:18px;height:18px;object-fit:contain;}

.hero-text h1{

  font-size:54px;line-height:1.05;font-weight:700;color:var(--ink);

  letter-spacing:.01em;

}

.hero-text p{

  max-width:420px;margin-top:6px;color:var(--ink-soft);font-size:16px;line-height:1.7;

}

.btn{

  display:inline-block;margin-top:34px;

  background:var(--cream-deep);color:#3a2f22;

  padding:12px 34px;font-size:13px;letter-spacing:.14em;

  border:2px solid var(--ink);border-radius:18px 28px 20px 26px;

  cursor:pointer;transition:background .2s ease, transform .2s ease, box-shadow .2s ease;

  box-shadow:2px 2px 0 0 var(--ink);

}

.btn:hover{background:var(--cream);transform:translateY(-1px) rotate(-0.5deg);box-shadow:5px 6px 0 0 var(--ink);}



.hero-text{

  position:relative;

  z-index:1;

  max-width:520px;

  padding-top:94px;

}



.hero-text h1,

.hero-text p,

.hero-text .divider{

  text-shadow:0 1px 18px rgba(247,241,230,.45);

}



.hero::after{

  content:'';

  position:absolute;

  inset:0;

  background:linear-gradient(90deg, rgba(244,235,220,.96) 0%, rgba(244,235,220,.74) 34%, rgba(244,235,220,.16) 70%, rgba(244,235,220,0) 100%);

  pointer-events:none;

}



/* Highlight Brushstroke Styling */

.brushstroke {

  position: relative;

  display: inline-block;

  white-space: nowrap;

  padding: 0 0.25em;

  z-index: 1;

}



.brushstroke i {

  font-style: italic;

  position: relative;

  z-index: 2;

  

  color: var(--sand);

  

  text-shadow: none; 

}



.brushstroke::before {

  content: "";

  position: absolute;

  left: -1%;

  right: -6%;

  top: 8%;

  bottom: -9%;

  z-index: 1;

  background: #3a2f22; 

  border-radius: 255px 100px 225px 200px/125px 225px 200px 255px;

  transform: rotate(-2deg);

}



/* ---------- Feature strip ---------- */

.features{

  background:var(--cream-deep);

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  padding:44px 0;

}

.features .container{

  display:grid;grid-template-columns:repeat(3,1fr);gap:60px;

}

.feature{

  display:flex;gap:16px;align-items:flex-start;

  background:rgba(255,253,249,.45);

  border:1.5px solid rgba(58,47,34,.14);

  border-radius:22px 18px 24px 16px;

  padding:18px 16px;

  box-shadow:2px 3px 0 0 var(--paper-shadow);

  transform:rotate(-.4deg);

}

.feature:nth-child(2n){transform:rotate(.5deg);}

.feature img{width:60px;height:60px;flex:none;object-fit:contain;}

.feature h4{font-family:'Lora', 'Tahoma', serif;font-size:16px;letter-spacing:.03em;font-weight:700;margin-bottom:6px;}

.feature p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

@media (max-width:980px){ .features .container{grid-template-columns:repeat(2,1fr);} }

@media (max-width:560px){ .features .container{grid-template-columns:1fr;} }



/* ---------- Products ---------- */

.products{padding:90px 0 70px;}

.section-title{text-align:center;margin-bottom:56px;}

.section-title span.eyebrow{

  font-family:'Lora', 'Tahoma', serif;

  font-size:18px;letter-spacing:.04em;color:var(--taupe-dark);

}

.section-title h2{font-size:32px;letter-spacing:.02em;margin-top:8px;font-weight:700;}

.section-title .divider{

  display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px;color:var(--taupe-dark);

}

.section-title .divider .l{height:2px;width:60px;background:var(--line);border-radius:999px;transform:rotate(-1deg);}

.section-title .divider img{width:18px;height:18px;object-fit:contain;}



.product-grid{

  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;

}

.card{

  background:var(--white);

  border:2px solid var(--ink);

  border-radius:24px 18px 26px 20px;

  display:flex;flex-direction:column;

  transition:box-shadow .25s ease, transform .25s ease;

  box-shadow:4px 5px 0 0 rgba(58,47,34,.12);

}

.card:hover{box-shadow:6px 8px 0 0 rgba(58,47,34,.16);transform:translateY(-4px) rotate(-.6deg);}

.card:nth-child(2n){transform:rotate(.4deg);}

.card:nth-child(2n):hover{transform:translateY(-4px) rotate(.2deg);}

.card-media{

  position:relative;aspect-ratio:1/0.95;

  background:linear-gradient(160deg,#f1e7d3,#e6d7ba);

  display:flex;align-items:center;justify-content:center;overflow:hidden;

  border-bottom:2px solid var(--ink);

}

.card-media img{width:100%;height:100%;object-fit:contain;}

.badge{

  position:absolute;top:14px;left:14px;

  background:var(--taupe-dark);color:#fff;

  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;

  padding:7px 12px;border-radius:18px 24px 19px 23px;

  border:1.5px solid var(--ink);

  box-shadow:2px 3px 0 0 rgba(58,47,34,.18);

}

.card-body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;}

.card-body h3{

  font-weight:700;font-size:18px;

  line-height:1.35;color:var(--ink);margin-bottom:14px;flex:1;

}

.card-footer{display:flex;align-items:center;justify-content:space-between;}

.price{font-family:'Lora', 'Tahoma', serif;font-size:16px;font-weight:600;color:var(--ink);}

.add-btn{

  width:38px;height:38px;background:var(--taupe-dark);

  display:flex;align-items:center;justify-content:center;

  cursor:pointer;transition:background .2s ease, transform .2s ease;

  border:2px solid var(--ink);border-radius:14px 18px 15px 20px;

  box-shadow:2px 3px 0 0 rgba(58,47,34,.16);

}

.add-btn:hover{background:var(--ink);transform:rotate(-4deg);}

.add-btn img{width:20px;height:20px;object-fit:contain;}

@media (max-width:980px){ .product-grid{grid-template-columns:repeat(2,1fr);} }

@media (max-width:560px){ .product-grid{grid-template-columns:1fr;} }



/* ---------- Bottom benefits ---------- */

.benefits{

  background:var(--cream-deep);

  border-top:1px solid var(--line);

  padding:48px 0;

}

.benefits .container{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}

.benefit{

  display:flex;gap:16px;align-items:flex-start;

  background:rgba(255,253,249,.45);

  border:1.5px solid rgba(58,47,34,.14);

  border-radius:20px 24px 18px 22px;

  padding:18px 16px;

  box-shadow:2px 3px 0 0 var(--paper-shadow);

  transform:rotate(.35deg);

}

.benefit:nth-child(2n){transform:rotate(-.45deg);}

.benefit img{width:38px;height:38px;flex:none;object-fit:contain;}

.benefit h4{font-size:17px;letter-spacing:.02em;font-weight:700;margin-bottom:5px;}

.benefit p{font-size:13px;color:var(--ink-soft);line-height:1.5;}

@media (max-width:980px){ .benefits .container{grid-template-columns:repeat(2,1fr);} }

@media (max-width:560px){ .benefits .container{grid-template-columns:1fr;} }



/* ---------- Footer ---------- */

footer{background:var(--ink);color:#e9dfcd;padding:64px 0 28px;}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}

.footer-grid .logo{color:#f3ead9;}

.footer-about p{margin-top:16px;font-size:13.5px;line-height:1.7;color:#c9bda3;max-width:280px;}

.footer-col h5{font-family:'Lora', 'Tahoma', serif;font-size:18px;letter-spacing:.02em;margin-bottom:18px;color:#f3ead9;}

.footer-col li{margin-bottom:11px;font-size:13.5px;color:#c9bda3;}

.footer-col a:hover{color:#f3ead9;}

.footer-bottom{

  border-top:1px solid #4a4030;padding-top:22px;

  display:flex;justify-content:space-between;font-size:12.5px;color:#a8987a;

  flex-wrap:wrap;gap:10px;

}

@media (max-width:900px){

  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}

  .footer-grid .logo img{width:136px;}

  .footer-about p{max-width:none;}

  .footer-bottom{

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

  }

}

@media (max-width:560px){

  .footer-grid{grid-template-columns:1fr;gap:28px;}

  .footer-grid .logo img{width:128px;}

}



@media (max-width: 640px) {

  /* --- 1. VYCENTROVANÁ HORNÍ LIŠTA --- */

  .topbar span:nth-child(2) {

    display: flex; 

  }

  

  .topbar .row {

    flex-direction: column;

    align-items: center; /* Zaručí horizontální vycentrování flex položek */

    gap: 6px;

  }

  

  .topbar .container {

    height: auto;

    padding: 10px 15px;

    text-align: center; /* Zaručí vycentrování i v případě, že se text zalomí */

  }



  /* --- 2. POSUNUTÍ A VÝŘEZ OBRÁZKU --- */

  .hero-media {

    width: 100%;

  }



  .hero-media .hero-art-image {

    /* Změň podle toho, kde se na původní fotce produkt nachází:

       "center center" = zaměří se na střed

       "left center" = zachová levou část fotky

       "30% 50%" = jemné ladění pozice pomocí procent */

    object-position: center center; 

  }

}