/* ============================================================
   Granitum — базовый CSS дизайн-системы (извлечён из макетов)
   Подключать в базовом шаблоне MODX:
   <link rel="stylesheet" href="/assets/templates/granitum/site-base.css">
   ------------------------------------------------------------
   Содержит: шрифты, мраморные текстуры, ховер-эффекты карточек,
   мобильную адаптацию. Инлайн-стили компонентов будут добавлены
   после захвата отрендеренных макетов.
   ============================================================ */

/* ── Шрифты ──────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fafaf7; font-family: 'Manrope', system-ui, sans-serif; color: #1d1d1f; }
body { overflow-x: hidden; }
input { font-family: inherit; }
button { font-family: inherit; }
a { color: inherit; }

/* ── Бренд-палитра (из макета) ───────────────────────────── */
:root {
  --g-ink:        #1d1d1f;   /* основной текст */
  --g-paper:      #fafaf7;   /* фон страницы */
  --g-stone:      #f3f1ec;   /* мраморный фон */
  --g-card:       #faf9f5;   /* фон карточки */
  --g-accent:     #0b5e5e;   /* акцент (тёмно-бирюзовый), ховеры/кнопки */
}

/* ── Белый мрамор: фоновые текстуры (SVG inline, без внешних файлов) ── */
:root {
  --marble-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Crect width='100%25' height='100%25' fill='%23f3f1ec'/%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.009' numOctaves='5' seed='14'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.85 0 0 0 0 0.87 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.55'/%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0022 0.014' numOctaves='5' seed='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.62 0 0 0 0 0.62 0 0 0 0 0.66 0 0 0 8 -3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='0.14'/%3E%3C/svg%3E");
  --marble-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Crect width='100%25' height='100%25' fill='%23faf9f5'/%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='5' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.89 0 0 0 0 0.89 0 0 0 0 0.91 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.5'/%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.003 0.016' numOctaves='5' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.7 0 0 0 0 0.7 0 0 0 0 0.73 0 0 0 7 -2.9'/%3E%3C/filter%3E%3C/svg%3E");
}
body { background: #f3f1ec var(--marble-page); background-size: 1000px 1000px; background-attachment: fixed; }
.g-marble { background: #f3f1ec var(--marble-page); background-size: 880px 880px; }
.g-marble-card { background: #faf9f5 var(--marble-card); background-size: 600px 600px; }

#root { max-width: 1440px; margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,0.06); }

/* ── Ховер-эффекты карточек товара/категории ─────────────── */
.g-prod, .g-cat {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}
.g-prod:hover { transform: translateY(-7px); box-shadow: 0 22px 46px rgba(29,29,31,0.14); border-color: rgba(29,29,31,0.22); }
.g-cat:hover  { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(29,29,31,0.11); border-color: rgba(29,29,31,0.20); }
.g-rm-img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.g-hover:hover .g-rm-img { transform: scale(1.07); }
.g-prod-btn { transition: background .22s ease, color .22s ease, gap .22s ease; }
.g-prod:hover .g-prod-btn { background: #0b5e5e; }
.g-cat-icon { transition: transform .3s ease; }
.g-cat:hover .g-cat-icon { transform: translateY(-3px) scale(1.06); }
.g-fav { transition: background .2s ease, color .2s ease, transform .2s ease; }
.g-fav:hover { background: #0b5e5e; color: #fff; transform: scale(1.08); }
.g-quickview { opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease; pointer-events: none; }
.g-prod:hover .g-quickview { opacity: 1; transform: translateY(0); }

/* ── Мобильная адаптация (<=760px) ───────────────────────── */
@media (max-width: 760px) {
  html, body { overflow-x: hidden !important; }
  #root { box-shadow: none !important; }
  .r-topbar { display: none !important; }
  .r-nav { grid-template-columns: 1fr !important; row-gap: 14px !important; padding: 14px 16px !important; }
  .r-nav .r-actions { flex-wrap: wrap !important; gap: 14px !important; justify-content: space-between !important; }
  [style*="max-width: 560px"] { margin-left: 0 !important; max-width: none !important; width: 100% !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat"] { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid2 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid3 { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="px 48px"], [style*="0 48px"], [style*="px 56px"], [style*="0 56px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="px 64px"] { padding-left: 18px !important; padding-right: 18px !important; }
  .r-hide { display: none !important; }
  .r-footcta { grid-template-columns: 1fr !important; gap: 20px !important; }
  .r-footcta button { width: 100%; }
  .r-foot-legal { flex-direction: column !important; gap: 8px !important; }

  /* карточка товара: компактнее, цена и кнопка в столбик */
  .g-prod-body { padding: 12px !important; }
  .g-prod-body > div[style*="min-height:46px"] { min-height: 0 !important; font-size: 16px !important; margin-bottom: 8px !important; }
  .g-prod-foot { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .g-prod-foot .g-prod-btn { width: 100% !important; justify-content: center !important; padding: 11px !important; }

  /* слайдер отзывов: один отзыв на экран */
  #reviews-track > div { flex: 0 0 86% !important; }

  /* интерактивный блок салонов — компактно: без встроенной карты, фото + адрес + маршрут */
  .shr-map-wrap { display: none !important; }
  .r-showroom-body { grid-template-columns: 1fr !important; }
  .r-showroom-body > div:last-child { padding: 18px !important; }
  #shr-tabs { flex-wrap: nowrap !important; }
  #shr-tabs button { flex: 1 1 0 !important; min-width: 0 !important; padding: 12px 6px !important; }
  #shr-tabs button > div:last-child { display: none !important; }

  /* мобильная панель фильтра */
  .m-filter-bar { display: flex !important; }

  /* категории на главной — компактные плитки 2 в ряд */
  [style*="grid-template-columns:repeat(8"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  /* цвета гранита на главной — компактные плитки 3 в ряд */
  [style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .g-cat { padding: 12px !important; gap: 9px !important; }
  .g-cat > div:first-child { height: 68px !important; padding: 8px !important; }
  .g-cat-icon { width: 40px !important; height: 40px !important; }

  /* «Наши работы из этого каталога» — горизонтальный слайдер на мобиле */
  #cat-works { display: flex !important; overflow-x: auto; gap: 10px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  #cat-works::-webkit-scrollbar { display: none; }
  #cat-works > a { flex: 0 0 58% !important; scroll-snap-align: start; }

  /* футер: на мобиле — только тонкая полоска (навигация в нижней панели и бургере) */
  footer { padding: 14px 18px !important; }
  .r-foot-grid { display: none !important; }
  .r-foot-legal { margin-top: 0 !important; flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px !important; font-size: 10px !important; }

  /* ── Страница товара на мобиле (стиль santehnika) ── */
  /* заголовок сверху, компактный и помельче — места мало */
  .p-titlebar { padding: 6px 16px 0 !important; }
  .p-h1 { font-size: 22px !important; line-height: 1.12 !important; }
  /* характеристики плотнее */
  .p-specs div[style*="padding:14px 20px"] { padding: 10px 14px !important; }
  .p-specs span[style*="13px"] { font-size: 12px !important; }
  /* верхний блок: НЕ сетка, а столбик — фото на всю ширину, потом инфо */
  .p-top { display: block !important; padding-top: 10px !important; }
  .p-top > div { width: 100% !important; }
  .p-top > div:first-child { margin-bottom: 18px !important; }
  /* галерея: большое фото на всю ширину */
  .p-top .g-marble-card { aspect-ratio: 1/1 !important; width: 100% !important; }
  .p-thumbs { grid-template-columns: repeat(5, 1fr) !important; margin-top: 8px !important; }
  /* «Заказать» уже есть в липкой панели снизу — в шапке товара дублировать не нужно */
  .p-buy-order { display: none !important; }
  .p-buy { gap: 10px !important; }
  .p-buy-inst { flex: 1 1 auto !important; padding: 15px !important; }
  .p-buy-fav { width: 52px !important; }
  /* свотчи гранита: 4 в ряд */
  .p-stones { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  /* характеристики и блок гранитов — в столбик (не 2 колонки) */
  .p-specs { display: block !important; padding-left: 16px !important; padding-right: 16px !important; }
  .p-specs > div { width: 100% !important; margin-bottom: 32px !important; }
  .p-specs > div:last-child { margin-bottom: 0 !important; }
  /* тёмный блок калькулятора — компактнее */
  .p-calc-cta { padding: 26px 20px !important; }
  .p-calc-cta a { flex: 1 1 100% !important; justify-content: center !important; }

  /* липкая панель покупки НАД нижней полоской навигации */
  .pg-product { padding-bottom: 130px !important; }
  .m-buybar { display: flex !important; position: fixed; left: 0; right: 0; bottom: 60px; z-index: 96; background: #fff; border-top: 1px solid rgba(29,29,31,0.12); box-shadow: 0 -6px 20px rgba(29,29,31,0.08); padding: 10px 14px; gap: 12px; align-items: center; }
  .m-buybar-price { font: 700 19px/1 'Manrope', sans-serif; color: #1d1d1f; white-space: nowrap; }
}
.m-buybar { display: none; }
@media (max-width: 440px) {
  [style*="grid-template-columns: repeat"] { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid3 { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="px 48px"], [style*="0 48px"], [style*="px 56px"], [style*="0 56px"] { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ───────── Ховеры шапки, меню и кнопок ───────── */
.r-nav a, .r-nav button, nav a, .g-allcats-btn, button, .g-fav { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease, filter .16s ease; }

/* чипы категорий в нав-баре */
nav > div > a[href]:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(29,29,31,0.10); border-color: rgba(29,29,31,0.28); }

/* кнопка «Все категории» */
.g-allcats-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(29,29,31,0.22); }

/* ссылки мега-меню */
.g-megamenu a { transition: color .15s ease, padding-left .15s ease; }
.g-megamenu a:hover { padding-left: 4px; color: #0b5e5e !important; }

/* круглые кнопки действий (избранное, калькулятор) */
.r-actions > a:hover { transform: translateY(-1px); }
.r-actions > a:hover div { border-color: rgba(11,94,94,0.45); }

/* кнопка поиска и тёмные кнопки */
.r-nav form button:hover { background:#0b5e5e !important; transform: translateY(-1px); }

/* общий ховер для кнопок и CTA-ссылок */
button:hover { filter: brightness(1.06); }
main a[href][style*="border-radius:99px"]:hover,
main a[href][style*="border-radius: 99px"]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,29,31,0.14); }

/* верхние ссылки логотипа/телефона */
.r-nav > a:hover { opacity: .85; }

/* подсказки живого поиска */
#gsearch-drop a.gs-item:hover { background:#f5f2ea; }
#gsearch-drop a.gs-item { transition: background .12s ease; }

/* активная кнопка избранного */
.g-fav.active { background:#0b5e5e !important; color:#fff !important; border-color:#0b5e5e !important; }

/* ───────── Пагинатор каталога ───────── */
.g-pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:40px 0;}
.g-pager ul,.g-pager li{list-style:none;margin:0;padding:0;display:contents;}
.g-page{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:99px;border:1px solid rgba(29,29,31,0.12);background:#fff;color:#1d1d1f;text-decoration:none;font:600 14px/1 'Manrope',sans-serif;transition:all .15s ease;}
.g-page:hover{border-color:#0b5e5e;color:#0b5e5e;transform:translateY(-1px);box-shadow:0 6px 16px rgba(29,29,31,0.08);}
.g-page-active{background:#0b5e5e;color:#fff !important;border-color:#0b5e5e;}

/* ───────── Текстовые (инфо) страницы ───────── */
.g-prose{font:16px/1.75 'Manrope',sans-serif;color:rgba(29,29,31,0.80);}
.g-prose h2{font:400 32px/1.1 'Cormorant Garamond',serif;color:#1d1d1f;letter-spacing:-0.01em;margin:40px 0 16px;}
.g-prose h3{font:600 18px/1.3 'Manrope',sans-serif;color:#1d1d1f;margin:28px 0 10px;}
.g-prose p{margin:0 0 16px;}
.g-prose ul{margin:0 0 18px;padding-left:0;list-style:none;}
.g-prose ul li{position:relative;padding-left:26px;margin-bottom:9px;}
.g-prose ul li:before{content:'';position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:#0b5e5e;}
.g-prose strong{color:#1d1d1f;}
.g-prose a{color:#0b5e5e;text-decoration:underline;text-underline-offset:2px;}
.g-prose details{border:1px solid rgba(29,29,31,0.10);border-radius:12px;padding:4px 20px;margin-bottom:12px;background:#fff;}
.g-prose details summary{cursor:pointer;font:600 16px/1.5 'Manrope',sans-serif;color:#1d1d1f;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.g-prose details summary::-webkit-details-marker{display:none;}
.g-prose details summary:after{content:'+';color:#0b5e5e;font-size:22px;font-weight:300;}
.g-prose details[open] summary:after{content:'–';}
.g-prose details p{padding-bottom:14px;margin:0;color:rgba(29,29,31,0.66);}

/* слайдер отзывов */
#reviews-track::-webkit-scrollbar{display:none;}
#reviews-track{scrollbar-width:none;}
#rev-prev:hover,#rev-next:hover{border-color:#0b5e5e;color:#0b5e5e;}

/* выбор камня на странице товара */
.g-stone-opt .g-stone-frame{border:2px solid rgba(29,29,31,0.10);transition:border-color .15s ease,transform .15s ease;}
.g-stone-opt:hover .g-stone-frame{border-color:rgba(11,94,94,0.5);}
.g-stone-opt.sel .g-stone-frame{border-color:#0b5e5e;box-shadow:0 0 0 3px rgba(11,94,94,0.15);}
.g-stone-opt.sel{transform:translateY(-2px);}

/* вкладки на странице товара (Характеристики/Описание) */
.p-tabs{display:flex;gap:6px;}
.p-tab{padding:10px 6px 12px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font:600 15px/1 'Manrope',sans-serif;color:rgba(29,29,31,0.45);margin-bottom:-1px;transition:color .15s ease,border-color .15s ease;}
.p-tab:hover{color:#1d1d1f;}
.p-tab-active{color:#1d1d1f;border-bottom-color:#0b5e5e;}

/* CTA-кнопки заказа */
.g-cta{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background-color .15s ease;}
.g-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,94,94,0.22);filter:brightness(1.04);}

/* каталог без цен — скрыть фильтр, сетка на всю ширину */
.r-catwrap.no-filter{grid-template-columns:1fr !important;}
.r-catwrap.no-filter .r-catfilter{display:none !important;}

/* ───────── Мобильный фильтр (bottom-sheet) ───────── */
.m-filter-bar{display:none;}
.m-filter-close{display:none;}
.m-filter-overlay{display:none;}
@media (max-width:760px){
  .r-catwrap.no-filter .m-filter-bar{display:none !important;}
  .r-catfilter{position:fixed !important;left:0;right:0;bottom:0;top:auto !important;max-height:86vh !important;width:100%;margin:0 !important;z-index:140;background:#fafaf7;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(29,29,31,0.22);transform:translateY(101%);transition:transform .3s cubic-bezier(.2,.7,.2,1);overflow-y:auto;}
  .r-catfilter.open{transform:translateY(0);}
  .r-catfilter > div{border:none !important;border-radius:18px 18px 0 0 !important;}
  .m-filter-close{display:flex !important;position:sticky;top:0;float:right;width:34px;height:34px;align-items:center;justify-content:center;border:none;background:rgba(29,29,31,0.06);border-radius:50%;cursor:pointer;font-size:20px;color:#1d1d1f;}
  .m-filter-overlay{position:fixed;inset:0;background:rgba(29,29,31,0.45);z-index:135;}
  .m-filter-overlay.open{display:block;}
}