/* Магазин «Герб рода»: хаб, страницы товаров, форма виртуального заказа.
   Конструктор подключает этот файл тоже — форма заказа в нём общая. */

/* ---------- Карточки товаров ---------- */
.products{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
@media (max-width:980px){ .products{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .products{ grid-template-columns:1fr; } }
.product{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
/* Картинка не должна задавать высоту карточки: у SVG-герба свои пропорции
   500×560, и с ним первая карточка выходила выше соседних. */
.product-media{ display:block; position:relative; aspect-ratio:1; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--line); }
.product-media img,.product-media svg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-media .arms-img{ object-fit:contain; padding:14px; }
.product-body{ display:flex; flex-direction:column; gap:14px; padding:22px; flex:1; }
.product-title{ font-family:var(--f-head); font-weight:600; font-size:20px; letter-spacing:-.01em; margin:0; }
.product-title a{ color:inherit; text-decoration:none; }
.product-title a:hover{ color:var(--accent); }
.product-text{ color:var(--ink-soft); font-size:15px; margin:0; }
.product .chips{ gap:6px; }
.product .chip{ font-size:13px; padding:5px 11px; cursor:default; }
.product .chip:hover{ background:var(--bg); color:var(--ink-soft); }
.product-more{ display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:15px; color:var(--accent); text-decoration:none; }
.product-more:hover{ text-decoration:underline; }

/* ---------- «Хочу такой» — лайк во всю ширину ---------- */
/* Кнопка и ссылка прижаты к низу: в соседних карточках они на одной линии. */
.want{ width:100%; margin-top:auto; }
.want-btn{ width:100%; display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:var(--r-btn);
  border:1px solid var(--accent); background:var(--accent); color:#fff; font:inherit; font-size:16px; font-weight:600;
  cursor:pointer; transition:background .15s ease, color .15s ease; }
.want-btn:hover{ background:var(--accent-deep); }
.want-btn:disabled{ opacity:.7; cursor:progress; }
.want-heart{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.want-label{ flex:1; text-align:left; }
.want-count{ flex:none; min-width:34px; padding:3px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.18);
  font-size:14px; text-align:center; }
.want-count b{ font-weight:700; }
.want-btn.is-on{ background:var(--clay-soft); color:var(--clay-deep); border-color:var(--clay-soft); }
.want-btn.is-on:hover{ background:#F2DFD1; }
.want-btn.is-on .want-heart{ fill:var(--clay); stroke:var(--clay); animation:want-pop .35s ease; }
.want-btn.is-on .want-count{ background:#fff; }
@keyframes want-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* ---------- Промо конструктора ---------- */
.promo{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:center; padding:36px; }
@media (max-width:860px){ .promo{ grid-template-columns:1fr; padding:24px; } .promo-img{ max-width:320px; } }
.promo-text{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.promo-title{ margin:0; }
.promo-text p{ color:var(--ink-soft); max-width:60ch; margin:0; }
.promo-img img{ width:100%; height:auto; }

/* ---------- Примеры электронных гербов ---------- */
.arms-gallery{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:860px){ .arms-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.arms-gallery figure{ margin:0; display:flex; flex-direction:column; gap:8px; }
.arms-gallery img{ width:100%; height:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:10px; }
.arms-gallery figcaption{ font-size:14px; color:var(--ink-soft); }

/* ---------- Шаги ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); counter-reset:none; }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.steps li{ display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--line); border-radius:var(--r-card); }
.step-n{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-deep); font-weight:700; }
.steps p{ color:var(--ink-soft); font-size:15px; margin:0; }

/* ---------- Галерея ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:700px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.gallery figure{ margin:0; display:flex; flex-direction:column; gap:8px; }
.gallery img{ border-radius:14px; border:1px solid var(--line); aspect-ratio:1; object-fit:cover; width:100%; height:auto; }
.gallery figcaption{ font-size:14px; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; padding:18px 36px 18px 0; font-weight:600; list-style:none; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:4px; top:14px; font-size:22px; color:var(--accent); font-weight:400; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ color:var(--ink-soft); padding:0 0 18px; margin:0; max-width:70ch; }

/* ---------- Страница товара ---------- */
.pmain{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:start; }
@media (max-width:900px){ .pmain{ grid-template-columns:1fr; gap:24px; } }
.pgallery{ display:flex; flex-direction:column; gap:12px; }
.pgallery-main img{ border-radius:var(--r-card); border:1px solid var(--line); width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.pgallery .arms-main{ border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:24px; }
.pgallery .arms-main img{ width:100%; height:auto; }
.pgallery-thumbs{ display:flex; gap:10px; }
.thumb{ padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden; background:none; cursor:pointer; width:84px; }
.thumb img{ width:100%; height:auto; display:block; }
.thumb[aria-current="true"]{ border-color:var(--accent); }

/* ---------- Форма заказа ---------- */
.order{ display:flex; flex-direction:column; gap:18px; padding:28px; position:sticky; top:96px; }
@media (max-width:900px){ .order{ position:static; padding:22px; } }
.order-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.order-title{ font-size:22px; margin:0; }
.order-price{ margin:0; font-family:var(--f-head); font-size:18px; color:var(--ink-soft); }
.opts{ border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.opts legend{ font-size:13.5px; color:var(--ink-faint); margin-bottom:8px; padding:0; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.opt span{ display:inline-block; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-btn); font-size:15px; cursor:pointer; background:var(--bg); }
.opt-sm span{ padding:8px 12px; font-size:14px; }
.opt input:checked + span{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); color:var(--accent-deep); font-weight:600; }
.opt input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.order-fields{ display:flex; flex-direction:column; gap:12px; }
.fld{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--ink-faint); }
.fld i{ font-style:normal; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:15px; cursor:pointer; }
.check input{ width:18px; height:18px; margin-top:3px; accent-color:var(--accent); flex:none; }
.order-submit{ width:100%; }
.order-status{ margin:0; color:var(--accent-deep); min-height:1.2em; }
.order-status.is-error{ color:var(--clay-deep); }
.order-count{ margin:0; }
/* Ловушка для ботов: убрана из потока и от читалок экрана. */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Символы тинктур (как на странице герба фамилии) ---------- */
.symbols li{ display:flex; gap:20px; padding:16px 0; border-top:1px solid var(--line); }
.symbols li:first-child{ border-top:0; }
.symbols .what{ flex:0 0 210px; font-weight:600; display:flex; align-items:center; gap:10px; }
.symbols .sw{ flex:none; width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.15); }
.symbols p{ color:var(--ink-soft); font-size:15.5px; margin:0; }
@media (max-width:600px){ .symbols li{ flex-direction:column; gap:6px; } .symbols .what{ flex:none; } }