/* ===========================================================
   МОЯ ИГРУШКА — токены дизайна
   Палитра взята с реальных фото: тёплое дерево, лён, ягоды рябины
=========================================================== */
:root{
  --cream:   #F2EAD9;   /* фон страницы */
  --paper:   #FBF7EE;   /* фон бирок/карточек */
  --honey:   #D9A35C;   /* светлое дерево, основной акцент */
  --walnut:  #4A3120;   /* тёмное дерево, заголовки */
  --rowan:   #B23A2E;   /* ягода рябины — кнопки, цены */
  --rowan-dark:#8C2C22;
  --spruce:  #5F7355;   /* хвоя — второстепенный акцент */
  --ink:     #2E2620;   /* основной текст */
  --ink-soft:#6B5E50;   /* приглушённый текст */
  --line:    #DACBAE;   /* линии-нити */

  --display: "Manrope"; 
/*  --display: "Balsamiq Sans"; (1) */
  --body:    "Manrope", "Segoe UI", sans-serif;
  --hand: "Playpen Sans", sans-serif;

  --radius-tag: 22px;
  --shadow-card: 0 18px 40px -22px rgba(74,49,32,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3{font-family:var(--display);color:var(--walnut);margin:0 0 .4em;font-weight:600;}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}
.eyebrow{
  font-family:var(--hand);
  font-size:0.8rem;
  color:var(--rowan);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.brev{
  font-size:28px;
  color:var(--rowan);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.stitch{
  border:none;
  border-top:2px dashed var(--line);
  margin:0;
}

/* ---------- Бирка: фирменный элемент ----------
   Повторяет форму скруглённой плашки с реальных фото товара,
   используется в хедере, на карточках и в подвале. */
.tag{
  position:relative;
  background:var(--paper);
  border-radius:var(--radius-tag);
  border:1px solid var(--line);
}
.tag::before{
  /* дырочка для "нити", как у подвесной бирки */
  content:"";
  position:absolute;
  top:14px; left:14px;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--cream);
  border:1.5px solid var(--ink-soft);
}

/* ================= Header ================= */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(242,234,217,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  max-width:1180px;margin:0 auto;
}
.logo{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--display);
  font-weight:700;font-size:1.4rem;color:var(--walnut);
}
.logo span{
  font-family:var(--hand);
  font-size:1.1rem;color:var(--rowan);font-weight:400;
}
nav.main-nav{display:flex;gap:30px;font-size:.95rem;color:var(--ink-soft);}
nav.main-nav a:hover{color:var(--rowan);}
.cart-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--walnut);color:var(--paper);
  border:none;border-radius:30px;
  padding:10px 18px;font-size:.92rem;font-weight:600;
  transition:background .2s;
}
.cart-btn:hover{background:var(--rowan-dark);}
.cart-count{
  background:var(--rowan);color:#fff;
  border-radius:50%;min-width:20px;height:20px;
  font-size:.75rem;display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;
}

/* ================= Hero ================= */
.hero{padding:64px 0 40px;}
.hero-grid{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:40px;align-items:center;
}
.hero h1{font-size:clamp(2.1rem,3.6vw,3.3rem);line-height:1.12;}
.hero h1 em{
  font-style:normal;color:var(--rowan);
  background:linear-gradient(transparent 62%, var(--honey) 62%);
}
.hero p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:480px;margin:18px 0 28px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--rowan);color:#fff;
  padding:14px 26px;border-radius:30px;
  font-weight:700;font-size:1rem;border:none;
  box-shadow:0 12px 24px -10px rgba(178,58,46,.55);
  transition:transform .15s, background .2s;
}
.btn:hover{background:var(--rowan-dark);transform:translateY(-1px);}
.btn.ghost{
  background:transparent;color:var(--walnut);
  border:1.5px solid var(--walnut);box-shadow:none;
}
.btn.ghost:hover{background:var(--walnut);color:var(--paper);}

.hero-photo{position:relative;}
.hero-photo .tag{
  padding:18px;
  transform:rotate(-2deg);
}
.hero-photo img{border-radius:14px;}
.floating-chip{
  position:absolute;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:8px 14px 8px 10px;
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow-card);
}
.floating-chip .dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--cream);}
.chip-1{top:6%; right:-6%;}
.chip-2{bottom:10%; left:-8%;}

/* ================= Материалы ================= */
.materials{
  padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.materials-row{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;
}
.material-item{
  display:flex;align-items:center;gap:12px;
  flex:1 1 200px;
}
.material-item .ic{
  width:42px;height:42px;border-radius:50%;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;border:1px solid var(--line);
  flex-shrink:0;
}
.material-item strong{display:block;font-size:.95rem;color:var(--walnut);}
.material-item small{color:var(--ink-soft);font-size:.82rem;}

/* ================= Каталог ================= */
.catalog{padding:70px 0 30px;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;flex-wrap:wrap;gap:14px;}
.section-head p{color:var(--ink-soft);max-width:420px;margin:6px 0 0;}

.grid-products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{transform:translateY(-4px);}
.card-plate{
  margin:14px 14px 0;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:30px;
  padding:9px 16px;
  font-weight:700;font-size:.95rem;color:var(--walnut);
  text-align:center;
}
.card-photo{
  padding:10px 22px 0;
  cursor:pointer;
}
.card-photo img{aspect-ratio:1/0.78;object-fit:contain;}
.card-body{padding:6px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-body .material{font-size:.78rem;color:var(--spruce);font-weight:600;}
.card-body .desc{font-size:.86rem;color:var(--ink-soft);flex:1;}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.price{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--rowan);}
.add-btn{
  background:var(--walnut);color:var(--paper);
  border:none;border-radius:24px;padding:9px 16px;
  font-size:.85rem;font-weight:700;
  transition:background .2s;
}
.add-btn:hover{background:var(--rowan-dark);}
.add-btn.added{background:var(--spruce);}

/* ================= О бренде ================= */
.about{padding:70px 0;}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
}
.about .tag{padding:26px 28px;}
.about blockquote{
  font-family:var(--hand);font-size:1.5rem;color:var(--rowan);
  margin:0 0 14px;line-height:1.3;
}
.about p{color:var(--ink-soft);}

/* ================= Footer ================= */
footer{
  margin-top:60px;border-top:1px solid var(--line);
  padding:46px 0 26px;
}
.footer-row{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:30px;
}
.footer-col h4{margin:0 0 10px;font-family:var(--display);color:var(--walnut);font-size:1.05rem;}
.footer-col p, .footer-col a{display:block;color:var(--ink-soft);font-size:.9rem;margin:4px 0;}
.footer-col a:hover{color:var(--rowan);}
.copy{text-align:center;font-size:.8rem;color:var(--ink-soft);}

/* ================= Корзина (drawer) ================= */
.overlay{
  position:fixed;inset:0;background:rgba(46,38,32,.45);
  opacity:0;visibility:hidden;transition:opacity .25s;
  z-index:60;
}
.overlay.open{opacity:1;visibility:visible;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;
  background:var(--paper);
  box-shadow:-20px 0 50px -20px rgba(74,49,32,.5);
  transform:translateX(100%);transition:transform .3s ease;
  z-index:70;display:flex;flex-direction:column;
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 22px 16px;border-bottom:1px solid var(--line);
}
.cart-head h3{margin:0;}
.close-btn{
  background:none;border:none;font-size:1.4rem;color:var(--ink-soft);
  line-height:1;padding:4px;
}
.cart-items{flex:1;overflow-y:auto;padding:14px 22px;}
.cart-empty{color:var(--ink-soft);font-size:.92rem;padding:30px 0;text-align:center;}
.cart-line{
  display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed var(--line);
}
.cart-line img{width:60px;height:60px;object-fit:contain;background:var(--cream);border-radius:10px;flex-shrink:0;}
.cart-line-info{flex:1;display:flex;flex-direction:column;gap:4px;}
.cart-line-info .name{font-weight:700;font-size:.9rem;color:var(--walnut);}
.qty-row{display:flex;align-items:center;gap:8px;}
.qty-row button{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  background:var(--cream);font-size:.9rem;display:flex;align-items:center;justify-content:center;
}
.cart-line .remove{font-size:.78rem;color:var(--rowan);background:none;border:none;align-self:flex-start;margin-top:auto;}
.cart-foot{padding:18px 22px 22px;border-top:1px solid var(--line);}
.cart-total{display:flex;justify-content:space-between;font-weight:700;color:var(--walnut);margin-bottom:14px;font-size:1.05rem;}
.cart-foot .btn{width:100%;justify-content:center;}

/* ================= Lightbox ================= */
.lightbox{
  position:fixed;inset:0;background:rgba(46,38,32,.78);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s;
  z-index:80;padding:30px;
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img{max-height:80vh;border-radius:16px;}
.lightbox-close{
  position:absolute;top:24px;right:30px;color:#fff;font-size:2rem;background:none;border:none;
}

/* ================= Toast ================= */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);
  background:var(--walnut);color:var(--paper);
  padding:12px 22px;border-radius:30px;font-size:.9rem;font-weight:600;
  opacity:0;visibility:hidden;transition:opacity .25s, transform .25s;
  z-index:90;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* ================= Responsive ================= */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{order:-1;max-width:420px;margin:0 auto;}
  .grid-products{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr;}
  nav.main-nav{display:none;}
}
@media (max-width:560px){
  .grid-products{grid-template-columns:1fr;}
  .header-row{padding:14px 18px;}
  .container{padding:0 18px;}
  .floating-chip{display:none;}
  .logo{font-size:1.1rem;flex-direction:column;align-items:flex-start;gap:0;line-height:1.25;}
  .logo span{font-size:.95rem;}
  .cart-btn{padding:9px 14px;font-size:.85rem;white-space:nowrap;}
}

/* ===== ОБНОВЛЕНИЯ ===== */

/* Логотип-картинка */
.logo-img {
  height: 56px;
  width: auto;
  display: block;
}

/* Меню — крупнее и контрастнее */
nav.main-nav { font-size: 1.08rem; gap: 34px; }
nav.main-nav a { color: var(--walnut); font-weight: 600; }
nav.main-nav a:hover { color: var(--rowan); }

/* Карточки — фото целиком без обрезки */
.card { cursor: pointer; }
.card-photo {
  padding: 14px 14px 8px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.card-photo img {
  aspect-ratio: unset;
  object-fit: contain;
  width: 100%;
  max-height: 200px;
}

/* Убираем цену и кнопку корзины с карточек */
.card-foot { display: none; }

/* card-body без лишнего нижнего паддинга при отсутствии card-foot */
.card-body { padding-bottom: 18px; }

/* Product page link cursor */
.card:hover { transform: translateY(-4px); }

/* ===== ОБНОВЛЕНИЕ 2 ===== */

/* Заголовки карточек — обычный текст, не кнопка */
.card-plate {
/*  margin: 18px 18px 0;*/
  margin: 9px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--walnut);
  text-align: left;
  font-family: var(--display);
/*  font-family: "Playpen Sans", sans-serif;*/
}

/* Фото в карточках — крупнее */
.card-photo {
  padding: 12px 12px 6px;
  min-height: 240px;
}
.card-photo img {
  max-height: 240px;
  width: 100%;
  object-fit: contain;
}



/* product.html: главное фото целиком без обрезки */
.main-photo {
  cursor: zoom-in;
  min-height: 420px;
  padding: 20px;
}
.main-photo img {
  max-height: 400px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ===== ОБНОВЛЕНИЕ 3 ===== */

/* Заголовок Hero — шрифт Balsamiq Sans */
.hero h1 {
  font-family: 'Balsamiq Sans', cursive;
}

/* Убираем цветной прямоугольник за словами */
.hero h1 em {
  background: none;
}

/* Названия карточек по центру */
.card-plate {
  text-align: center;
}

/* ===== ОБНОВЛЕНИЕ 4 ===== */

/* "пахнут деревом" — тёплый коричнево-красный */
.hero h1 em {
  color: #A0522D;
}

/* Все заголовки — Balsamiq Sans */
h1, h2, h3, h4 {
  font-family: 'Balsamiq Sans', cursive;
}
.card-plate {
  /* font-family: 'Balsamiq Sans', cursive; */
  font-family: 'Playpen Sans', sans-serif;
}

/* ===== ОБНОВЛЕНИЕ 5 ===== */
.card-plate {
  font-size: 1.5rem;
}
.product-info h1 {
  font-size: 2.4rem;
}

/* ===== ОБНОВЛЕНИЕ 6 ===== */
.eyebrow {
  font-size: 1.0rem;
  gap: 12px;
}

/* ================= Оформление заказа (модалка) ================= */
.modal-overlay{
  position:fixed;inset:0;background:rgba(46,38,32,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s;
  z-index:100;padding:20px;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.checkout-modal{
  position:relative;
  background:var(--paper);
  border-radius:20px;
  max-width:480px;width:100%;
  max-height:88vh;overflow-y:auto;
  padding:32px;
  box-shadow:var(--shadow-card);
}
.checkout-modal h3{margin-bottom:16px;}
.checkout-modal .close-btn{position:absolute;top:16px;right:18px;}
.checkout-summary{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:20px;
  font-size:.85rem;
  max-height:180px;
  overflow-y:auto;
}
.checkout-summary-row{
  display:flex;justify-content:space-between;gap:10px;
  padding:5px 0;color:var(--ink-soft);
}
.checkout-summary-total{
  display:flex;justify-content:space-between;
  font-weight:700;color:var(--walnut);
  border-top:1px dashed var(--line);
  margin-top:6px;padding-top:10px;
}
.checkout-modal .form-group{margin-bottom:14px;}
.checkout-modal .form-group label{
  display:block;font-weight:700;font-size:.9rem;color:var(--walnut);margin-bottom:6px;
}
.checkout-modal .form-group input,
.checkout-modal .form-group textarea{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  font-size:.95rem;
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  outline:none;
  transition:border-color .2s;
}
.checkout-modal .form-group input:focus,
.checkout-modal .form-group textarea:focus{border-color:var(--rowan);}
.checkout-modal .add-to-cart-btn{margin-top:6px;}
.checkout-success{text-align:center;padding:10px 0;}
.success-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--spruce);color:#fff;
  font-size:1.5rem;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.checkout-success p{color:var(--ink-soft);margin-bottom:20px;}

/* ================= Доставка и оплата ================= */
.delivery{padding:20px 0 70px;}
.delivery-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px;
}
.delivery-card{padding:26px 28px;}
.delivery-card h3{margin-bottom:14px;font-size:1.15rem;}
.delivery-card ul{margin:0;padding-left:20px;color:var(--ink-soft);}
.delivery-card li{margin-bottom:10px;font-size:.92rem;line-height:1.5;}
@media (max-width:820px){
  .delivery-grid{grid-template-columns:1fr;}
}

/* ================= Примеры с именем ================= */
.examples{padding:20px 0 60px;}
.examples-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:10px;
}
.example-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.example-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.example-card span{
  display:block;
  padding:10px 8px;
  font-weight:700;
  font-size:.85rem;
  color:var(--walnut);
}
@media (max-width:820px){
  .examples-grid{grid-template-columns:repeat(2,1fr);}
}