/* ============================================================
   Way Moz — карточка товара, корзина, оформление заказа
   ============================================================ */

/* ---------------------------------------------------- крошки */
.crumbs{ padding-block:1.15rem; font-size:var(--fs-xs); color:var(--bark-45); }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--bark); text-decoration:underline; }
.crumbs span{ margin-inline:.45rem; opacity:.5; }

/* ---------------------------------------------------- товар */
.prod{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(1.6rem,4vw,4rem); padding-bottom:clamp(2.6rem,6vw,4.5rem); }
.prod__media{ display:grid; gap:.7rem; }
.prod__hero{ position:relative; aspect-ratio:4/5; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.prod__hero img{ width:100%; height:100%; object-fit:cover; }
.prod__thumbs{ display:flex; gap:.6rem; flex-wrap:wrap; }
.prod__thumbs button{ width:74px; aspect-ratio:1; padding:0; overflow:hidden; cursor:pointer;
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--r); }
.prod__thumbs button[aria-current="true"]{ border-color:var(--bark); }
.prod__thumbs img{ width:100%; height:100%; object-fit:cover; }

.prod__info{ padding-top:.4rem; }
.prod{ --c:var(--ochre); --on-c:#fff; }
.prod--terracotta{ --c:var(--terracotta); }
.prod--olive{ --c:var(--olive); }
.prod--ochre{ --c:var(--ochre); --on-c:var(--ink-on-ochre); }
.prod--bark{ --c:var(--bark); }
.prod__variety{ display:inline-block; font-size:var(--fs-xs); font-weight:600;
  color:var(--on-c); background:var(--c); padding:.3rem .7rem; border-radius:var(--r);
  margin-bottom:1rem; }
.prod h1{ font-size:clamp(2.1rem,4.6vw,3.1rem); margin-bottom:.4rem; }
.prod__sub{ color:var(--bark-45); font-size:var(--fs-sm); margin-bottom:1.5rem; }
.prod__price{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:.3rem; }
.prod__price b{ font-size:2rem; font-weight:700; letter-spacing:-.015em; }
.prod__price s{ color:var(--bark-45); font-size:1.05rem; font-weight:500; }
.prod__unit{ color:var(--bark-45); font-size:var(--fs-sm); margin-bottom:1.6rem; }

.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--bark);
  border-radius:var(--r); overflow:hidden; }
.qty button{ width:42px; height:46px; border:0; background:transparent; color:var(--bark);
  font-size:1.25rem; cursor:pointer; font-family:var(--text); line-height:1; }
.qty button:hover{ background:var(--paper-2); }
.qty input{ width:46px; height:46px; border:0; border-inline:1.5px solid var(--line);
  background:transparent; text-align:center; font:600 1rem var(--text); color:var(--bark);
  -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0; }
.prod__buy{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-bottom:1.9rem; }
.prod__buy .btn{ flex:1; min-width:190px; padding-block:1rem; }

/* паспорт партии — из бренд-книги: номер, сезон, местность */
.passport{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  margin-bottom:1.8rem; background:var(--paper); }
.passport__h{ background:var(--c,var(--ochre)); color:var(--on-c,#fff); padding:.6rem 1rem;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; }
.passport dl{ margin:0; padding:.35rem 1rem .9rem; }
.passport div{ display:flex; justify-content:space-between; gap:1.2rem; padding:.62rem 0;
  border-bottom:1px solid var(--line-soft); font-size:var(--fs-sm); }
.passport div:last-child{ border-bottom:0; }
.passport dt{ color:var(--bark-45); }
.passport dd{ margin:0; font-weight:600; text-align:right; }

.prod__desc{ white-space:pre-line; color:var(--bark-70); max-width:60ch; }
.prod__note{ margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--bark-45); }
@media (max-width:860px){
  .prod{ grid-template-columns:1fr; }
  /* на телефоне снимок не должен занимать весь экран — цена видна сразу */
  .prod__hero{ aspect-ratio:auto; height:min(56vh,440px); }
}

/* ---------------------------------------------------- корзина */
.page-head{ padding-block:clamp(1.6rem,4vw,2.8rem) 1.4rem; }
.page-head h1{ font-size:clamp(2.1rem,5vw,3.2rem); }

.cart-layout{ display:grid; grid-template-columns:minmax(0,1fr) 372px;
  gap:clamp(1.4rem,3.5vw,2.8rem); align-items:start;
  padding-bottom:clamp(3rem,7vw,5rem); }
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr; } }

.lines{ display:grid; gap:.85rem; }
.line{ display:grid; grid-template-columns:96px 1fr auto; gap:1rem; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:.85rem; }
.line__fig{ width:96px; aspect-ratio:4/5; overflow:hidden; border-radius:2px; background:var(--paper-2); }
.line__fig img{ width:100%; height:100%; object-fit:cover; }
.line__name{ font-family:var(--display); font-size:1.24rem; text-decoration:none; line-height:1.15; }
.line__name:hover{ text-decoration:underline; }
.line__unit{ font-size:var(--fs-xs); color:var(--bark-45); margin-top:.2rem; }
.line__ctrl{ display:flex; align-items:center; gap:.9rem; margin-top:.7rem; flex-wrap:wrap; }
.line__ctrl .qty button{ width:34px; height:36px; font-size:1.05rem; }
.line__ctrl .qty input{ width:38px; height:36px; font-size:.92rem; }
.line__del{ background:none; border:0; padding:0; color:var(--bark-45); cursor:pointer;
  font:500 var(--fs-xs)/1 var(--text); text-decoration:underline; }
.line__del:hover{ color:var(--terracotta); }
.line__sum{ font-weight:700; font-size:1.08rem; white-space:nowrap; align-self:start; padding-top:.15rem; }
@media (max-width:560px){
  .line{ grid-template-columns:76px 1fr; }
  .line__fig{ width:76px; }
  .line__sum{ grid-column:2; text-align:right; }
}

.empty{ text-align:center; padding:clamp(2.6rem,7vw,4.5rem) 1rem;
  border:1px dashed var(--line); border-radius:var(--r); }
.empty .orn{ margin-bottom:1.4rem; }
.empty h2{ font-size:1.7rem; margin-bottom:.6rem; }
.empty p{ color:var(--bark-70); margin-bottom:1.6rem; }

/* ---------------------------------------------------- итог */
.sum{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem; position:sticky; top:86px; }
.sum h2{ font-size:1.4rem; margin-bottom:1rem; }
.sum__row{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
  font-size:var(--fs-sm); color:var(--bark-70); }
.sum__row b{ color:var(--bark); font-weight:600; }
.sum__total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-top:.7rem; padding-top:.9rem; border-top:1.5px solid var(--line); font-size:1.06rem; }
.sum__total b{ font-size:1.55rem; font-weight:700; letter-spacing:-.015em; }
.sum .btn{ margin-top:1.2rem; }
.sum__note{ font-size:var(--fs-xs); color:var(--bark-45); margin-top:.9rem; text-align:center; }
.free-hint{ margin-top:.8rem; padding:.6rem .8rem; background:var(--paper-2);
  border-radius:2px; font-size:var(--fs-xs); color:var(--bark-70); }

/* ---------------------------------------------------- форма */
.form{ display:grid; gap:1.5rem; }
.fset{ border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:1.3rem; margin:0; }
.fset legend{ font-family:var(--display); font-size:1.32rem; padding-inline:.5rem; margin-left:-.5rem; }
.frow{ display:grid; gap:1rem; margin-top:1rem; }
.frow--2{ grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .frow--2{ grid-template-columns:1fr; } }

.field{ display:grid; gap:.4rem; }
.field label{ font-size:var(--fs-xs); font-weight:600; color:var(--bark-70); }
.field .req{ color:var(--terracotta); }
.field input,.field textarea,.field select{
  font:400 1rem var(--text); color:var(--bark); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--r); padding:.78rem .9rem;
  width:100%; transition:border-color .16s;
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--bark); outline-offset:1px; }
.field textarea{ min-height:88px; resize:vertical; }
.field small{ font-size:var(--fs-xs); color:var(--bark-45); }

.opts{ display:grid; gap:.7rem; margin-top:1rem; }
.opt{ display:grid; grid-template-columns:auto 1fr auto; gap:.85rem; align-items:start;
  border:1.5px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; cursor:pointer;
  transition:border-color .16s, background .16s; }
.opt:hover{ border-color:var(--bark-45); }
.opt:has(input:checked){ border-color:var(--bark); background:var(--paper-2); }
.opt input{ margin:.28rem 0 0; accent-color:var(--bark); width:17px; height:17px; }
.opt__t{ display:block; font-weight:600; font-size:var(--fs-sm); }
.opt__d{ display:block; font-size:var(--fs-xs); color:var(--bark-45); margin-top:.2rem; }
@media (max-width:480px){
  .opt{ grid-template-columns:auto 1fr; }
  .opt__p{ grid-column:2; margin-top:.35rem; }
}
.opt__p{ font-weight:600; font-size:var(--fs-sm); white-space:nowrap; }

.err{ background:#FBE9E4; border:1px solid var(--terracotta); color:#7E2E19;
  padding:.8rem 1rem; border-radius:var(--r); font-size:var(--fs-sm); }

/* ---------------------------------------------------- заказ принят */
.thanks{ max-width:620px; margin-inline:auto; text-align:center;
  padding-block:clamp(2.4rem,6vw,4.2rem); }
.thanks .orn{ margin-bottom:1.5rem; }
.thanks h1{ font-size:clamp(2rem,5vw,2.9rem); margin-bottom:.7rem; }
.thanks__num{ font-size:var(--fs-sm); color:var(--bark-45); margin-bottom:1.7rem; }
.thanks__box{ text-align:left; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); padding:1.3rem; margin-bottom:1.8rem; }
.thanks__box .sum__row{ padding:.42rem 0; }
.thanks__box h2{ font-size:1.2rem; margin-bottom:.8rem; font-family:var(--display); }
.badge{ display:inline-block; font-size:var(--fs-xs); font-weight:600; padding:.28rem .68rem;
  border-radius:20px; background:var(--paper-2); color:var(--bark-70); }
.badge--paid{ background:var(--olive); color:#fff; }
.badge--new{ background:var(--ochre); color:var(--ink-on-ochre); }

/* ---------------------------------------------------- нижняя панель (моб.) */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:rgba(251,244,228,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:.7rem var(--gut);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:1rem;
}
.dock__sum b{ font-size:1.12rem; }
.dock__sum span{ display:block; font-size:var(--fs-xs); color:var(--bark-45); }
@media (max-width:820px){
  .dock.is-on{ display:flex; }
  body.has-dock{ padding-bottom:80px; }
}

/* ---------------------------------------------------- всплывашка */
.toast{
  position:fixed; z-index:80; left:50%; bottom:1.5rem; transform:translate(-50%,150%);
  background:var(--bark); color:var(--paper); padding:.8rem 1.3rem; border-radius:var(--r);
  font-size:var(--fs-sm); font-weight:500; box-shadow:0 12px 34px -12px rgba(0,0,0,.5);
  transition:transform .32s cubic-bezier(.2,.8,.3,1); max-width:calc(100vw - 2rem);
}
.toast.is-on{ transform:translate(-50%,0); }
@media (max-width:820px){ .toast{ bottom:5.2rem; } }

/* ---------------------------------------------------- 404 */
.nf{ text-align:center; padding-block:clamp(3.5rem,10vw,7rem); }
.nf .orn{ margin-bottom:1.6rem; }
.nf h1{ font-size:clamp(2.2rem,6vw,3.4rem); margin-bottom:.7rem; }
.nf p{ color:var(--bark-70); margin-bottom:1.8rem; }