/* Giggle — мінімальний скін для сторінок, які поки лишились на старих шаблонах
   (кабінет, чекаут, порівняння, карта сайту). Тільки типографіка, форми, кнопки. */

body.gg-legacy > #content,
body.gg-legacy > .container,
body.gg-legacy > #error-not-found,
body.gg-legacy > div > #content,
body.gg-legacy > div > .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 56px;
  box-sizing: border-box;
}

body.gg-legacy .container .container { padding: 0; }

body.gg-legacy :is(.container,#content,#error-not-found) h1 { font-size: 34px; line-height: 1.15; margin: 28px 0 16px; letter-spacing: -0.01em; }
body.gg-legacy :is(.container,#content,#error-not-found) h2 { font-size: 24px; margin: 26px 0 12px; }
body.gg-legacy :is(.container,#content,#error-not-found) h3 { font-size: 19px; margin: 22px 0 10px; }
body.gg-legacy :is(.container,#content,#error-not-found) h4 { font-size: 16px; margin: 18px 0 8px; }
body.gg-legacy :is(.container,#content,#error-not-found) p  { margin: 0 0 12px; line-height: 1.6; }
body.gg-legacy :is(.container,#content,#error-not-found) a  { color: inherit; }

body.gg-legacy :is(.container,#content,#error-not-found) .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
body.gg-legacy :is(.container,#content,#error-not-found) [class^="col-"], body.gg-legacy :is(.container,#content,#error-not-found) [class*=" col-"] { padding: 0 12px; box-sizing: border-box; width: 100%; }

@media (min-width: 900px) {
  body.gg-legacy :is(.container,#content,#error-not-found) .col-sm-3, body.gg-legacy :is(.container,#content,#error-not-found) .col-md-3 { width: 25%; }
  body.gg-legacy :is(.container,#content,#error-not-found) .col-sm-4, body.gg-legacy :is(.container,#content,#error-not-found) .col-md-4 { width: 33.3333%; }
  body.gg-legacy :is(.container,#content,#error-not-found) .col-sm-6, body.gg-legacy :is(.container,#content,#error-not-found) .col-md-6 { width: 50%; }
  body.gg-legacy :is(.container,#content,#error-not-found) .col-sm-8, body.gg-legacy :is(.container,#content,#error-not-found) .col-md-8 { width: 66.6667%; }
  body.gg-legacy :is(.container,#content,#error-not-found) .col-sm-9, body.gg-legacy :is(.container,#content,#error-not-found) .col-md-9 { width: 75%; }
  body.gg-legacy :is(.container,#content,#error-not-found) .col-sm-12, body.gg-legacy :is(.container,#content,#error-not-found) .col-md-12 { width: 100%; }
}

body.gg-legacy :is(.container,#content,#error-not-found) ul.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 18px 0 0; padding: 0;
  font-size: 13px; opacity: .7;
}
body.gg-legacy :is(.container,#content,#error-not-found) ul.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }

body.gg-legacy :is(.container,#content,#error-not-found) label { display: block; font-size: 13px; margin: 0 0 6px; }
body.gg-legacy :is(.container,#content,#error-not-found) .form-group { margin: 0 0 16px; }
body.gg-legacy :is(.container,#content,#error-not-found) input[type="text"],
body.gg-legacy :is(.container,#content,#error-not-found) input[type="email"],
body.gg-legacy :is(.container,#content,#error-not-found) input[type="tel"],
body.gg-legacy :is(.container,#content,#error-not-found) input[type="password"],
body.gg-legacy :is(.container,#content,#error-not-found) input[type="number"],
body.gg-legacy :is(.container,#content,#error-not-found) input[type="date"],
body.gg-legacy :is(.container,#content,#error-not-found) select,
body.gg-legacy :is(.container,#content,#error-not-found) textarea,
body.gg-legacy :is(.container,#content,#error-not-found) .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  box-sizing: border-box;
}
body.gg-legacy :is(.container,#content,#error-not-found) textarea { min-height: 110px; resize: vertical; }
body.gg-legacy :is(.container,#content,#error-not-found) input:focus, body.gg-legacy :is(.container,#content,#error-not-found) select:focus, body.gg-legacy :is(.container,#content,#error-not-found) textarea:focus {
  outline: none; border-color: rgba(0,0,0,.55);
}
body.gg-legacy :is(.container,#content,#error-not-found) .radio input, body.gg-legacy :is(.container,#content,#error-not-found) .checkbox input,
body.gg-legacy :is(.container,#content,#error-not-found) input[type="radio"], body.gg-legacy :is(.container,#content,#error-not-found) input[type="checkbox"] { width: auto; margin-right: 8px; }
body.gg-legacy :is(.container,#content,#error-not-found) .radio label, body.gg-legacy :is(.container,#content,#error-not-found) .checkbox label { display: flex; align-items: center; gap: 8px; font-size: 15px; }

body.gg-legacy :is(.container,#content,#error-not-found) .btn,
body.gg-legacy :is(.container,#content,#error-not-found) button,
body.gg-legacy :is(.container,#content,#error-not-found) input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: #111; color: #fff;
  font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
body.gg-legacy :is(.container,#content,#error-not-found) .btn:hover, body.gg-legacy :is(.container,#content,#error-not-found) button:hover { opacity: .88; }
body.gg-legacy :is(.container,#content,#error-not-found) .btn-default, body.gg-legacy :is(.container,#content,#error-not-found) .btn-light {
  background: #fff; color: #111; border: 1px solid rgba(0,0,0,.18);
}
body.gg-legacy :is(.container,#content,#error-not-found) .buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0; }
body.gg-legacy :is(.container,#content,#error-not-found) .pull-right { margin-left: auto; }

body.gg-legacy :is(.container,#content,#error-not-found) table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
body.gg-legacy :is(.container,#content,#error-not-found) table th, body.gg-legacy :is(.container,#content,#error-not-found) table td {
  padding: 12px 10px; border-bottom: 1px solid rgba(0,0,0,.1); text-align: left; vertical-align: middle;
}
body.gg-legacy :is(.container,#content,#error-not-found) table th { font-weight: 600; }
body.gg-legacy :is(.container,#content,#error-not-found) .table-responsive { overflow-x: auto; }

body.gg-legacy :is(.container,#content,#error-not-found) .panel, body.gg-legacy :is(.container,#content,#error-not-found) .well, body.gg-legacy :is(.container,#content,#error-not-found) fieldset {
  border: 1px solid rgba(0,0,0,.1); border-radius: 16px; padding: 20px; margin: 0 0 20px; background: #fff;
}
body.gg-legacy :is(.container,#content,#error-not-found) .panel-heading, body.gg-legacy :is(.container,#content,#error-not-found) legend { font-weight: 600; margin: 0 0 12px; padding: 0; border: 0; }

body.gg-legacy :is(.container,#content,#error-not-found) .alert {
  padding: 14px 16px; border-radius: 12px; margin: 0 0 16px;
  background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.1);
}
body.gg-legacy :is(.container,#content,#error-not-found) .alert-danger { background: #fdeceb; border-color: #f3c2bd; }
body.gg-legacy :is(.container,#content,#error-not-found) .alert-success { background: #eaf7ee; border-color: #bfe3c9; }
body.gg-legacy :is(.container,#content,#error-not-found) .text-danger { color: #c0392b; font-size: 13px; }

body.gg-legacy :is(.container,#content,#error-not-found) .list-group { list-style: none; padding: 0; margin: 0 0 20px; }
body.gg-legacy :is(.container,#content,#error-not-found) .list-group-item { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); display: block; }

body.gg-legacy :is(.container,#content,#error-not-found) img { max-width: 100%; height: auto; }
body.gg-legacy :is(.container,#content,#error-not-found) .required > label::after, body.gg-legacy :is(.container,#content,#error-not-found) .required .control-label::after { content: " *"; color: #c0392b; }

/* карта сайту та сторінки-сітки в новому дизайні */
.smap { padding: 8px 0 56px; }
.smap__cols { display: grid; gap: 32px; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .smap__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .smap__cols { grid-template-columns: repeat(4, 1fr); } }
.smap__h { font-size: 17px; margin: 0 0 12px; }
.smap__list, .smap__list ul { list-style: none; margin: 0; padding: 0; }
.smap__list li { margin: 0 0 8px; }
.smap__list ul { margin: 8px 0 12px 14px; opacity: .75; font-size: 14px; }
.smap__list a { text-decoration: none; }
.smap__list a:hover { text-decoration: underline; }
